カルーセルアクション
円運動を前面から見たような奥行き感のある動きをマウスで制御するアクションの作り方です
解説はつづきから
新規ファイル作成
ステージ設定はサイズを400×300、フレームレートは30に
まずは背景を作成
400×180の矩形を描き、ステージの下に配置
線はなし、#FFFFFFから#CCCCCCの色で線形グラデーション
新規シンボルを作成
ActionScriptに書き出しにチェックを入れて、クラス名をPanelに
矩形プリミティブツールで画像のような図形を描く
塗りは#CCCCCCから#999999の色で下から上に線形グラデーション
新規レイヤーを追加し、ActionScriptを記述
考え方としては以前の記事と同じように、仮の座標を設定してそこからX、Y座標を割り出す
//panelの枚数 var num:int = 9; //視線位置 var xEye:int = stage.stageWidth/2; var yEye:int = 70; //Y軸方向(真上)から見たときの円の半径 var radius:int = 150; //視点から円の中心までのZ軸方向距離 var cLength:int = 500; var angle:Number = 0; //角度 var speed:Number; //速度 var panels:Array = new Array(); //panel初期設定 for (var i:int = 0; i<num; i++) { //panelを生成して配列に格納、配置 panels.push(new Panel()); addChild(panels[i]); //仮想X軸、Y軸、Z軸でのpanelの初期位置 panels[i].xPos = radius*Math.cos(i/num*Math.PI*2); panels[i].yPos = 100; panels[i].zPos = radius*Math.sin(i/num*Math.PI*2); //panelの透明度を0.7に panels[i].alpha = 0.7; //マウスカーソルを指の形に panels[i].buttonMode = true; //マウスオーバーイベント追加 panels[i].addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); //マウスアウトイベント追加 panels[i].addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); } //panelの動きのイベント追加 addEventListener(Event.ENTER_FRAME, moveCarousel); function moveCarousel(e:Event):void { //X軸方向のマウス位置によって速度変更 speed = (mouseX-xEye)/3000; //速度を加算して角度変更 angle += speed; for (i = 0; i<num; i++) { //angleを変化させてpanelの仮想X軸、Z軸での位置を変える panels[i].xPos = radius*Math.cos(angle+i/num*Math.PI*2); panels[i].zPos = radius*Math.sin(angle+i/num*Math.PI*2); //panelのZ軸方向位置の比率 var zRatio = cLength/(cLength+panels[i].zPos); //仮想位置をステージ上のX、Y座標に変換 panels[i].x = xEye+panels[i].xPos*zRatio; panels[i].y = yEye+panels[i].yPos*zRatio; //Z軸方向位置によってpanelの大きさ変更 panels[i].scaleX = panels[i].scaleY = zRatio; //trace(myArray[i].name); } //重ね順を変更するための関数実行 sortPanel(); } function sortPanel():void { //配列を仮想Z軸位置が奥にある順に並び替え panels.sortOn("zPos", Array.NUMERIC | Array.DESCENDING); for (i = 0; i<num; i++) { //重ね順を変更、背景があるので+1 setChildIndex(panels[i], i+1); } } function mouseOverHandler(e:Event):void { //panelの動きを止めて透明度を1に removeEventListener(Event.ENTER_FRAME, moveCarousel); e.target.alpha = 1; } function mouseOutHandler(e:Event):void { //再びpanelの動きを追加して、透明度0.7に addEventListener(Event.ENTER_FRAME, moveCarousel); e.target.alpha = 0.7; }
これでムービープレビューすると以下のようになってるかと思います
以上、カルーセルアクションの作り方でした