光が降り積もるアニメーション
光の粒が落ちて下に溜まる様子を表現したアニメーションです
解説はつづきから
新規ファイル作成
ステージ設定はサイズを400×300、背景を黒、フレームレートを30に
まずは背景を作成
400×300の矩形を描き画像のように#5A3A01から#000000の色でグラデーション
新規レイヤーを作成し、400×5の矩形を描く
線はなし、塗りを#FFFFFF
ムービークリップシンボルに変換し、基準点を真中の下に
インスタンス名をboxにし、位置を画像のように
フィルタを画像のように3つかける
一つ目はグローで、ぼかしを水平、垂直30に、強度100%、カラーを#FFCC33
二つ目もグローで、ぼかしを水平、垂直40に、強度100%、カラーを#FFCC33でグロー(内側)にチェックをいれる
三つ目はぼかしで、水平0、垂直10に
次に新規シンボル作成から6×6の円を描き、画像のように#FFFFFFから#FFCC33の色でグラデーション
描いた円をさらにシンボル化
ActionScriptに書き出しにチェックを入れて、クラス名をLightに
Lightにフィルタ:グローをかける
ぼかしを水平、垂直8に、強度100%でカラーを#FFCC33
シーン1に戻って、新規レイヤー追加しActionScriptを記述
var lightBall:Light; //光が発生しているかどうか var droped:Boolean = false; //ステージをクリックするのを他のものが //邪魔するので反応しないように stage.mouseChildren = false; //タイマー間隔設定 var timer:Timer = new Timer(50); //ステージをクリックして光の発生を切り替えるための設定 stage.addEventListener(MouseEvent.CLICK, outMouse); function outMouse(e:MouseEvent):void { //光が発生しているとき if (droped) { Mouse.show(); //マウスカーソル出現 droped = false; //光の発生をオフに //光を発生するイベントを取り除く timer.removeEventListener(TimerEvent.TIMER, createLight); timer.stop(); //光が発生していないとき } else { Mouse.hide(); //マウスカーソル隠す droped = true; //光の発生をオンに //光を発生するイベントを追加 timer.addEventListener(TimerEvent.TIMER, createLight); timer.start(); } } //光を発生させる設定 function createLight(e:Event):void { lightBall = new Light(); //光の位置をマウス位置の周辺ランダムに lightBall.x = mouseX + Math.random() * lightBall.width; lightBall.y = mouseY - Math.random() * lightBall.height; //光の大きさ設定 lightBall.scaleX = lightBall.scaleY = Math.random()+0.5; addChild(lightBall); //光追加 //光の動きのイベント追加 lightBall.addEventListener(Event.ENTER_FRAME, animate); } //光の動きの設定 function animate(e:Event):void { //光を徐々に透明に e.target.alpha -= 0.01; //光を徐々に小さく e.target.scaleX = e.target.scaleY -= 0.01; //光の位置を徐々に下へ e.target.y += 3; //光がboxとぶつかった時の設定 if (e.target.hitTestObject(box)) { //光の動きのイベント除去 e.target.removeEventListener(Event.ENTER_FRAME, animate); //光を除去 removeChild(e.target as Sprite); //boxの高さを増やす box.height += 0.05; //一定値でboxの高さ固定 if (box.height>200) { box.height = 200; } } }
これでムービープレビューすると以下のようになってるかと思います
以上、光が降り積もるアニメーションの作り方でした