Home > Flash > actionscript3.0 で カルーセル

actionscript3.0 で カルーセル

カルーセルな動き(無限ループするヤツ)をさせる為のクラス書いた。

This movie requires Flash Player 9

CarouselData.as

/**
 * @author atama-switch
 */
package
{
	// flash
	import flash.display.DisplayObject;
	import flash.events.Event;
	import flash.events.EventDispatcher;
 
	/**
	 * CarouselData クラス
	 */
	public class CarouselData extends EventDispatcher
	{		
		// coordX
		public function get coordX():Number { return _coordX; }
		public function set coordX(value:Number):void {
			if(value != _coordX) {
				_coordX = value;
				updateHorizontal();
			}
		}
		private var _coordX:Number = 0;
 
		// coordY
		public function get coordY():Number { return _coordY; }
		public function set coordY(value:Number):void {
			if(value != _coordY) {
				_coordY = value;
				updateVertical();
			}
		}
		private var _coordY:Number = 0;
 
		// x
		public function get x():Number { return _x; }
		public function set x(value:Number):void { _x = value; }
		private var _x:Number = 0;
 
		// y
		public function get y():Number { return _y; }
		public function set y(value:Number):void { _y = value; }
		private var _y:Number = 0;
 
		// height
		public function get height():Number { return _height; }
		public function set height(value:Number):void { _height = value; }
		private var _height:Number = 0;
 
		// width
		public function get width():Number { return _width; }
		public function set width(value:Number):void { _width = value; }
		private var _width:Number = 0;
 
		// limitLeft
		public function get limitLeft():Number { return _limitLeft; }
		public function set limitLeft(value:Number):void { _limitLeft = value; }
		private var _limitLeft:Number = 0;
 
		// limitRight
		public function get limitRight():Number { return _limitRight; }
		public function set limitRight(value:Number):void { _limitRight = value; }
		private var _limitRight:Number = 0;
 
		// limitTop
		public function get limitTop():Number { return _limitTop; }
		public function set limitTop(value:Number):void { _limitTop = value; }
		private var _limitTop:Number = 0;
 
		// limitBottom
		public function get limitBottom():Number { return _limitBottom; }
		public function set limitBottom(value:Number):void { _limitBottom = value; }
		private var _limitBottom:Number = 0;
 
		// carouselArray
		public function get data():Array { return _data; }
		private var _data:Array = new Array();
 
		// gutter
		public function get gutter():Number { return _gutter; }
		public function set gutter(value:Number):void { _gutter = value; }
		private var _gutter:Number = 0;
 
		// direction
		public function get direction():String { return _direction; }
		public function set direction(value:String):void { _direction = value; }
		private var _direction:String = "horizontal";// horizontal or vertical
 
		/**
		 * 新しい CarouselData インスタンスを作成します。
		 */
		public function CarouselData( initObject:Object = null ) 
		{
			for ( var parame in initObject ){
				// 繰り返すスクリプト
				if (this.hasOwnProperty(parame)) {
					this[parame] = initObject[parame];
				}
			}
		}
 
 
		// push
		public function push ( target:DisplayObject ):void
		{
			_data.push( { x : target.x, y : target.y, width : target.width, height : target.height } );
			if(_direction == "horizontal") _width += target.width + _gutter;
			if(_direction == "vertical") _height += target.height + _gutter;
		}
 
 
		// updateHorizontal
		public function updateHorizontal ( e:Event = null):void
		{
			var distance:Number = (_coordX - _x);
			distance = Number(distance.toFixed(3));
			_x += distance;
 
			for (var i:int = 0; i < _data.length; i++) {
				_data[i].x += distance;
				if (_data[i].x < (_limitLeft - (_data[i].width + _gutter)) && distance < 0) {
					// 左の画面外に出たら一番右に移動
					_data[i].x += _width;
 
				} else if (_data[i].x >= _limitRight && distance > 0) {
					// 右の画面外に出たら一番左に移動
					_data[i].x -= _width;
				}
			}
			dispatchEvent( new Event(Event.CHANGE) );
		}
 
 
		// updateVertical
		public function updateVertical ( e:Event = null):void
		{
			var distance:Number = (_coordY - _y);
			distance = Number(distance.toFixed(3));
			_y += distance;
 
			for (var i:int = 0; i < _data.length; i++) {
				_data[i].y += distance;
 
				if (_data[i].y < (_limitTop - (_data[i].height + _gutter)) && distance < 0) {
					// 上の画面外に出たら一番下に移動
					_data[i].y += _height;
 
				} else if (_data[i].y >= _limitBottom && distance > 0) {
					// 下の画面外に出たら一番上に移動
					_data[i].y -= _height;
				}
			}
			dispatchEvent( new Event(Event.CHANGE) );
		}
	}
 
}

使うときはこんな感じ

package 
{
	// flash
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	import flash.events.Event;
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.text.*;
 
	// CarouselData
	import CarouselData;
 
	public class Main extends Sprite
	{
 
		private var _mcNum:Number = 16;
		private var _gutter:Number = 8;
 
		// 横
		// _carouselDataHorizontal
		private var _carouselDataHorizontal:CarouselData;
		// _mcHorizontalArray
		private var _mcHorizontalArray:Array;
		// _horizontalSprite
		private var _horizontalSprite:Sprite;
		// _horizontalSpriteMask
		private var _horizontalSpriteMask:Sprite;
 
 
		// 縦
		// _carouselDataVertical
		private var _carouselDataVertical:CarouselData;
		// _mcVerticalArray
		private var _mcVerticalArray:Array;
		// _verticalSprite
		private var _verticalSprite:Sprite;
		// _verticalSpriteMask
		private var _verticalSpriteMask:Sprite;
 
 
		// ------------------------------------------------------------------------------------------------- //
		//コンストラクタ
		public function Main()
		{
			//ステージスケールモード設定
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
 
			init();
		}
		// ------------------------------------------------------------------------------------------------- //
 
		// ------------------------------------------------------------------------------------------------- //
		// 初期化
		private function init ():void
		{
 
			// _carouselDataHorizontal
			_carouselDataHorizontal = new CarouselData( { limitLeft : 0, limitTop : 0, limitRight : 360, limitBottom : 80, gutter : _gutter, direction : "horizontal" } );
 
 
			// _horizontalSprite
			_horizontalSprite = new Sprite();
			_horizontalSprite.graphics.beginFill( 0xF5F5F5 );
			_horizontalSprite.graphics.drawRect(0, 0, 360, 80);
			_horizontalSprite.graphics.endFill();
			_horizontalSprite.x = 30;
			_horizontalSprite.y = 10;
			addChild(_horizontalSprite);
 
			// _horizontalSpriteMask
			_horizontalSpriteMask = new Sprite();
			_horizontalSpriteMask.graphics.beginFill( 0xF5F5F5 );
			_horizontalSpriteMask.graphics.drawRect(0, 0, 360, 80);
			_horizontalSpriteMask.graphics.endFill();
			_horizontalSpriteMask.x = 30;
			_horizontalSpriteMask.y = 10;
			addChild(_horizontalSpriteMask);
 
			// mask
			_horizontalSprite.mask = _horizontalSpriteMask;
 
			// _mcHorizontalArray
			_mcHorizontalArray = new Array();
 
			var i:int = 0;
			var box:Sprite;
			var tf:TextField;
 
			for (i = 0; i < _mcNum; i++) {
				box = new Sprite();
				box.graphics.beginFill(0xFFFFFF * Math.random());
				box.graphics.drawRect(0, 0, 80, 80);
				box.graphics.endFill();
 
				tf = new TextField();
				tf.autoSize = TextFieldAutoSize.LEFT;
				tf.selectable = false;
				tf.mouseEnabled = false;
				tf.text = "Box" + String(i);
				box.addChild( tf );
 
				box.x = (i * 80) + (_gutter * ( i + 1 ));
				box.y = 0;
 
				_horizontalSprite.addChild(box);
 
				_mcHorizontalArray.push( box );
				_carouselDataHorizontal.push( _mcHorizontalArray[i] );
			}
 
			_carouselDataHorizontal.addEventListener( Event.CHANGE, onChangeHorizontal );
 
			addEventListener( Event.ENTER_FRAME, onEnterFrameHorizontal );
 
 
 
 
			// _carouselDataVertical
			_carouselDataVertical = new CarouselData( { limitLeft : 0, limitTop : 0, limitRight : 80, limitBottom : 272, gutter : _gutter, direction : "vertical" } );
 
 
			// _verticalSprite
			_verticalSprite = new Sprite();
			_verticalSprite.graphics.beginFill( 0xF5F5F5 );
			_verticalSprite.graphics.drawRect(0, 0, 80, 272);
			_verticalSprite.graphics.endFill();
			_verticalSprite.x = 30;
			_verticalSprite.y = 100;
			addChild(_verticalSprite);
 
			// _verticalSpriteMask
			_verticalSpriteMask = new Sprite();
			_verticalSpriteMask.graphics.beginFill( 0xF5F5F5 );
			_verticalSpriteMask.graphics.drawRect(0, 0, 80, 272);
			_verticalSpriteMask.graphics.endFill();
			_verticalSpriteMask.x = 30;
			_verticalSpriteMask.y = 100;
			addChild(_verticalSpriteMask);
 
			// mask
			_verticalSprite.mask = _verticalSpriteMask;
 
			// _mcVerticalArray
			_mcVerticalArray = new Array();
 
			for (i = 0; i < _mcNum; i++) {
				box = new Sprite();
				box.graphics.beginFill(0xFFFFFF * Math.random());
				box.graphics.drawRect(0, 0, 80, 80);
				box.graphics.endFill();
 
				tf = new TextField();
				tf.autoSize = TextFieldAutoSize.LEFT;
				tf.selectable = false;
				tf.mouseEnabled = false;
				tf.text = "Box" + String(i);
				box.addChild( tf );
 
				box.x = 0;
				box.y = (i * 80) + (_gutter * ( i + 1 ));
 
				_verticalSprite.addChild(box);
 
				_mcVerticalArray.push( box );
				_carouselDataVertical.push( _mcVerticalArray[i] );
			}
 
			_carouselDataVertical.addEventListener( Event.CHANGE, onChangeVertical );
			addEventListener( Event.ENTER_FRAME, onEnterFrameVertical );
 
        }
		// ------------------------------------------------------------------------------------------------- //
 
 
		// ------------------------------------------------------------------------------------------------- //
		private function onChangeHorizontal( e:Event ):void
		{
			for (var i:int = 0; i < _carouselDataHorizontal.data.length; i++) {
				_mcHorizontalArray[i].x = _carouselDataHorizontal.data[i].x;
				_mcHorizontalArray[i].y = _carouselDataHorizontal.data[i].y;
			}
		}
		// ------------------------------------------------------------------------------------------------- //
 
 
		// ------------------------------------------------------------------------------------------------- //
		private function onEnterFrameHorizontal( e:Event ):void
		{
			_carouselDataHorizontal.coordX += 1;
		}
		// ------------------------------------------------------------------------------------------------- //
 
 
		// ------------------------------------------------------------------------------------------------- //
		private function onChangeVertical( e:Event ):void
		{
			for (var i:int = 0; i < _carouselDataVertical.data.length; i++) {
				_mcVerticalArray[i].x = _carouselDataVertical.data[i].x;
				_mcVerticalArray[i].y = _carouselDataVertical.data[i].y;
			}
		}
		// ------------------------------------------------------------------------------------------------- //
 
 
		// ------------------------------------------------------------------------------------------------- //
		private function onEnterFrameVertical( e:Event ):void
		{
			_carouselDataVertical.coordY += 1;
		}
		// ------------------------------------------------------------------------------------------------- //
 
 
	}
}

CarouselData.as は縦か横かのどちらかでしか動作させないので変数名はもうちょっとすっきりできそう。

↓参考にさせていただきました。感謝。
ActionScript 3.0で始めるオブジェクト指向スクリプティング:第12回 マウスポインタとスクロールの連動|gihyo.jp … 技術評論社
http://gihyo.jp/dev/serial/01/as3/0012

FLASH-JP.COM – フォーラム > 無限ループ時のずれ
http://www.flash-jp.com/modules/newbb/viewtopic.php?topic_id=6803&forum=8&post_id=34361

Comments:1

SLT-A77 11-11-18 (金) 6:55

私は実際にあなたのブログ記事は非常に現実的な議論する予定です。私は本当にこの問題は、この特定のヘルプように? sのすべての人のたくさんの中に私の米国内の同一のサイトを提供するの​​は、この上のアカウントに全く新しい何かを聞くことを選ぶ。私はトピックについてのよく見することができたのプラスが、それとは対照的にブログの多数に気づいた。あなたのウェブサイトの内部でそんなに明らかにしていただきありがとうございます。

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://blog.atama-switch.net/wp-trackback.php?p=267
Listed below are links to weblogs that reference
actionscript3.0 で カルーセル from BLOG atama-switch

Home > Flash > actionscript3.0 で カルーセル

Search
Feeds
Meta
Link
写真素材 ストックフォトの定額制ペイレスイメージズ

Return to page top