円の変形アニメーション
マウス位置で円の形や大きさが変わるアニメーションです
解説はつづきから
今回もTweenMaxを使います
詳しくはこちらを参照
新規ファイル作成
ステージ設定はサイズを400×300、フレームレートを30に
新規シンボルを作成
ActionScriptに書き出しにチェックを入れて、クラス名をCircleに
塗りなし、線の色を#0099FF、線の太さ1、縦30、横30の円を描く
シーン1に戻って、新規レイヤーを追加しActionScriptを記述
//TweenMaxをインポート import gs.*; import gs.easing.*; var timer:Timer = new Timer(50); timer.addEventListener(TimerEvent.TIMER, createCircle); timer.start(); function createCircle(e:Event):void { var circle:Circle = new Circle(); //円の表示位置をステージ中央に circle.x = 200; circle.y = 150; //円の初期大きさ circle.scaleX = mouseX/60; circle.scaleY = mouseY/45; circle.alpha = 0;//円の初期透明度 //トゥイーン設定 TweenMax.to(circle, 1,{ //円を1秒間で scaleX: mouseX/40, //大きさ比率をマウス位置によって変更 scaleY: mouseY/30, ease:Cubic.easeOut, //イージング設定 alpha: 1,//透明度を1に onComplete: removeCircle, //トゥイーンが終わったら onCompleteParams: [circle] //removeCircle()実行 }); addChild(circle); //円追加 } function removeCircle(circle:Circle):void { removeChild(circle); //円削除 }
ムービープレビューすると以下のようになってるかと思います
以上、円の変形アニメーションでした