ActionScript Learning 101210

12.10.2010

Flashで回転するサムネイル一覧。

サムネイルをクリック時に最短距離で移動するように調整する。

上記のサンプルと基本的に同じ方法でループを管理している。
座標は三角関数で取得している。

x = Math.cos( 角度 * Math.PI / 180 ) * 半径
y = Math.sin( 角度 * Math.PI / 180 ) * 半径

SAMPLE VIEW CODE


package {
	
	import flash.display.*;
	import flash.events.*;
	
	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.events.TweenEvent;
	import org.libspark.betweenas3.tweens.*;
	import org.libspark.betweenas3.easing.*;


	public class NMain extends MovieClip {
		
		//-------------------------------------------------------------------------------- Properties

		private var embedtest:Class;
		
		private var _this:*;
		private var _stage:Stage;
		
		private var _main:MovieClip;
		
		
		//-------------------------------------------------------------------------------- Constractor
		
		public function NMain() {
			
			_this = this;
			_stage = stage;
			
			_stage.scaleMode = StageScaleMode.NO_SCALE;
			_stage.align = StageAlign.TOP_LEFT;
			
			Init();
		}
		
		
		//-------------------------------------------------------------------------------- Function
		 
		/**
		 * initialize
		 */
		public function Init():void {
			
			_main = new MovieClip();
			_main.y = Math.round(_stage.stageHeight / 2) - 30;
			_main.x = Math.round(_stage.stageWidth / 2);
			
			initcards();
			initbtns();
			
			_this.addChild(_main);
			
			
			//moveNum(1);			
			//movetime = .8;
		}
		
		/**
		 * initialize cards
		 */
		private var radius:Number;
		private var cardslength:int = 20;
		private var onestep:Number;
		
		private function initcards():void {
			
			radius = 150;
			
			var nm_gradation = new NM_Gradation();
			var cols_1 = nm_gradation.Colors(0xE4007F, 0x00A0E9, 11);
			var cols_2 = nm_gradation.Colors(0x00A0E9, 0xE4007F, 11);
			
			cols_1.pop();
			cols_2.pop();

			var colors = cols_1.concat(cols_2);			
			
			onestep = 360 / cardslength;
			
			for(var i = 0; i < cardslength; i++) {
				
				var _card:MovieClip = new card();
				
				_card.cid = (i + 1);				
				_card.name = "card_" + (i + 1);
				
				_card.scaleX = .45;
				_card.scaleY = .45;
				
				_card.defrot = i * onestep + 90;
				
				_card.startrot = _card.defrot;
				_card.moverot = _card.defrot;
				
				var radian = _card.defrot * Math.PI / 180;
				
				_card.x = Math.cos(_card.defrot * Math.PI / 180) * radius;
				_card.y = Math.sin(_card.defrot * Math.PI / 180) * radius;			
				
				
				_card.Init(colors[i]);
				
				_card.buttonMode = true;				
				_card.addEventListener(MouseEvent.MOUSE_DOWN, card_click);
				
				_main.addChild(_card);
			}
			
		}
		/** */
		private function card_click(eo:* = null) {
			
			var tgtcard = eo.currentTarget;
			
			moveNum(tgtcard.cid);
		}		
		
		/**
		 * initialize buttons
		 */
		private function initbtns():void {
			
			var _btn_r = new btn_r();
			var _btn_l = new btn_l();
			
			_btn_r.x = Math.round(_stage.stageWidth / 2) + 40;
			_btn_r.y = Math.round(_stage.stageHeight / 2) + 190;
			
			_btn_l.x = Math.round(_stage.stageWidth / 2) - 40;
			_btn_l.y = Math.round(_stage.stageHeight / 2) + 190;
			
			_btn_r.buttonMode = true;
			_btn_l.buttonMode = true;
			
			_btn_r.addEventListener(MouseEvent.MOUSE_DOWN, btn_r_click);
			_btn_l.addEventListener(MouseEvent.MOUSE_DOWN, btn_l_click);
			
			_this.addChild(_btn_r);
			_this.addChild(_btn_l);
		}
		/** */
		private function btn_r_click(eo:* = null):void {
			
			moveBack();
		}
		/** */
		private function btn_l_click(eo:* = null):void {

			moveNext();
		}
		
		/**
		 * card actions
		 */
		private var currentcid:int = 1;
		private var lastcid:int = 1;
		
		private var movecount:int = 0;
			
		/** */
		public function moveNext():void {
			
			moveNum(currentcid - 1);
		}
		/** */
		public function moveBack():void {
			
			moveNum(currentcid + 1);
		}
		/** */
		public function moveNum(cid:int):void {
			
			setcid(cid);			
			setmovecount();
			movecards();
		}
		//
		private function setcid(cid:int):void {
			
			if(cid < 1) cid += cardslength;
			else if(cid > cardslength) cid -= cardslength;
			
			lastcid = currentcid;
			currentcid = cid;
		}
		//
		private function setmovecount():void {

			var difference = lastcid - currentcid;
			
			if(Math.abs(difference) > cardslength / 2) {
				
				if(difference < 0) difference = difference + cardslength;
				else if(difference > 0) difference = difference - cardslength;
			}
			
			movecount += difference;
		}
		
		/**
		 * card moving
		 */
		private var stepmax = onestep * cardslength;
		
		public function movecards():void {
			
			setmovecards();			
			movecardsaction();
		}
		/** */
		private function setmovecards():void {
			
			var card:*;			
			
			if(movecount >= cardslength) {
				
				movecount -= cardslength;
			
				for( var i:int = 0; i < cardslength; i++ ) {
					
					card = _main.getChildByName("card_" + (i + 1));
	
					card.startrot += 360;
				}
			}
			else if(movecount <= 0)  {
				
				movecount += cardslength;
			
				for( var j:int = 0; j < cardslength; j++ ) {
					
					card = _main.getChildByName("card_" + (j + 1));
	
					card.startrot -= 360;
				}
			}
		}
		/** */
		private function movecardsaction():void {
			
			for( var i:int = 0; i < cardslength; i++ ) {
				
				var card = _main.getChildByName("card_" + (i + 1)); 

				if(card.moverot > 360) {
					
					card.moverot -= 360;
					card.startrot -= 360;
				}
				else if(card.moverot < 0) {
					
					card.moverot += 360;
					card.startrot += 360;
				}
				
				card.goalrot = card.startrot + (movecount * onestep);				
				
				if(card.movetween) card.movetween.stop();
				
				card.movetween = BetweenAS3.tween(card, {moverot:card.goalrot}, null, 1.2, Quad.easeOut);
				card.movetween.addEventListener(TweenEvent.UPDATE, movecardsaction_update);
				card.movetween.play();
			}
		}		
		/** */
		private function movecardsaction_update(eo:* = null):void {
			
			var _card = eo.target.target;

			var tgtrot = _card.moverot;
			
			if(tgtrot >= 360) tgtrot -= 360;
			else if(tgtrot <= 0) tgtrot += 360;

			_card.x = Math.cos(tgtrot * Math.PI / 180) * radius;
			_card.y = Math.sin(tgtrot * Math.PI / 180) * radius;
		}
	}
}


category : ActionScript / Flash

Demonstrations

Feature Samples

Author

虹村 マキオウ (nizimura makiou)

猫と太極拳を愛する横浜在住のフリーランスクリエイターです。

logo

Demo and Sample

Category