ゆげ アニメーション サンプル

ゆげアニメーションを作ってみた。

アツアツ感たっぷり？

夏の残暑が残る季節に KY 的なエントリ、すみません…（汗

ゆげ、って飲食もそうだし、温泉などでも使えるし、意外と使いどころは多い気がする。そういう時にゆげの演出を加えるだけでもイメージ訴求率が UP してくるはず。

本当は和っぽく、みそ汁の画像が良かったんだけど、なかなか良い素材が見つからなくて、結局ラーメンに…。
あ、そこはどうでも良いと…！？

サンプル

ソースはこちら

package {
	
	//クラス
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	import flash.display.Sprite;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	//Tweener 1.31.71
	import caurina.transitions.Tweener;
	import caurina.transitions.properties.FilterShortcuts;
	
	public class Main extends Sprite {
		
		private var yugeTimer:Timer;
		private var defX:uint = 300;	//ゆげ生成位置
		private var defY:uint = 200;	//ゆげ生成位置
			
		//コンストラクタ
		public function Main() {
			//ステージサイズ設定
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			//Tweener初期化
			FilterShortcuts.init();
			
			//タイマー
			yugeTimer = new Timer(800);
			yugeTimer.addEventListener(TimerEvent.TIMER, timerHandler);
			yugeTimer.start();
			
			//初期表示
			for (var i:uint = 0; i < 4; i++) {
				addSteam();
			}
		}
		
		//タイマー動作
		public function timerHandler(event:TimerEvent) {
			addSteam();
		}
		
		//ゆげ生成処理
		public function addSteam() {
			//ゆげオブジェクトを生成
			var yuge:steamOrigin = new steamOrigin();
			addChild(yuge);
			
			//位置をランダムに表示
			yuge.x = defX + Math.random()*160-80;
			yuge.y = defY + Math.random()*20-10;
			yuge.scaleX = yuge.scaleY = Math.round(Math.random()*0.5+1.5);
			yuge.rotation = Math.random()*360;
			yuge.alpha = 0;
			
			//ゆげの動き計算
			Tweener.addTween(yuge, {
				time:3,
				alpha:0.1,
				_Blur_blurX:16,
				_Blur_blurY:16
			});
			Tweener.addTween(yuge, {
				time:Math.round(Math.random()*5+3),
				y:-150,
				scaleX:0.7,
				scaleY:0.7,
				transition:"easeInSine",
				onComplete:function() { removeChild(yuge); }
			});
		}
		
	}
}

作り方はそんなに難しいわけではない。

こんな感じで、ゆげの素を作る。今回はちょっぴりリアル感をだすため、ゆげの素の内側に透明部分を描いてみた。簡単な雲模様でも十分ゆげっぽくはなると思う。

あとは、ゆげの素を一定間隔で生成し、ブラーアニメーションさせるだけ。イージングを「In」にするのがポイント。
ゆげの素の形で処理速度が大きく変わってくるかもしれないので、処理が重いようであれば、簡略化した図形にすると良いかもしれない。

ゆげの素を、正円にしてぼかしを抑えるとデフォルメされた感じになるので、イラストなどでも使っていけるかもしれない。

また、このサンプルをうまく応用すれば、煙の演出も可能な気がする。
細長い感じの図形で煙の素を作り、回転の処理を削除する感じで。実際に試していないんで、うまくいくかどうか分からないけど（無責任…）汗

09/07/29追記

なんか最近、元ファイルの希望者が多かったので一式をアップしてみた。
※Tweener ライブラリも含み。バージョンは 1.31.71 だと思う。

この記事をブックマークしておく