TweenMaxを使ってカラフルサークル
ActionScript 3.0にはいろいろと便利なライブラリが公開されていますが、その中の一つTweenMaxを使って簡単なサンプルを作りたいと思います
解説はつづきから
ライブラリを使うことによって高度なアニメーションも簡単に、なめらかに行うことができるようになります
まずはTweenMaxをGreenSockからダウンロード
ダウンロードしたファイルを解凍してできたgsフォルダを今回つくるflaファイルと同じ場所に設置
これで準備は完了です
※追記
最新バージョンの場合はgsフォルダではなくcomフォルダになります
Actionscriptでimportする時は
import gs.*; import gs.easing.*;
から
import com.greensock.*; import com.greensock.easing.*;
に変わりました
※TweenMaxにはライセンスがあります
うむるむさんのところに詳しくまとまってますので目を通しておくとよいと思います
ではflaファイルを作成します
新規ファイル作成
ステージ設定はサイズを400×300、フレームレートは30、背景を#000000に
新規シンボル作成からActionScriptに書き出しにチェックを入れて、クラス名をCircleに
40×40、色#FFFFFFの円を描く
シーン1に戻って、新規レイヤーを追加し、ActionScriptを記述
import gs.*; //TweenMaxをインポート //円を追加するタイマー設定 var timer:Timer = new Timer(50); timer.addEventListener(TimerEvent.TIMER, createCircle); timer.start(); //円追加から大きくなるまでの設定 function createCircle(e:Event):void { var circle:Circle = new Circle(); //円の表示位置設定(マウス位置の四方30にランダムで) circle.x = mouseX + Math.random() * 60 - 30; circle.y = mouseY + Math.random() * 60 - 30; circle.alpha = 0; //円の初期透明度を0に //大きさ比率の目標値設定 var targetScale = 0.2 + Math.random(); //トゥイーン設定 TweenMax.to(circle, 1,{ //circleを1秒間で tint: Math.random()* 0xffffff, //色をランダム色に scaleX: targetScale, //大きさ比率を設定値に scaleY: targetScale, alpha: Math.random(), //透明度をランダム値に blurFilter: {blurX:10, blurY:10}, //ぼかしを10に onComplete: tweenFinished, //トゥイーンが終わったら onCompleteParams: [circle] //tweenFinished()実行 }); addChild(circle); //円追加 } //円が大きくなり終わった後の設定 function tweenFinished(circle:Circle):void { //トゥイーン設定 TweenMax.to(circle, 1, { //circleを1秒間で scaleX: 0, //大きさ比率を0に scaleY: 0, alpha: 0, //透明度を0に onComplete: removeCircle, //トゥイーンが終わったら onCompleteParams: [circle] //removeCircle()実行 }); } function removeCircle(circle:Circle):void { removeChild(circle); //円削除 }
これでムービープレビューすると以下のようになってるかと思います
以上、カラフルサークルの作り方でした