multimedia design, Actionscript, Lingo, PHP, Perl, SQL
3月
21

Actionscript 3, 3D hover and scale effect

Filed under: Flash CS4 | Tags: , , TweenLite | 3月 21st, 2009
Post

rotate3dgotoAndLearn() の新しいサンプルを試した。
3D Photo Panels – Learn how to create a nice 3D hover and scale effect using the new features in Flash Player 10.

6枚の画像をマウスにあわせて3D回転させるサンプル。
回転アニメーションにTweenLiteを使う。
クリックされた画像が拡大される。

画像を1枚にし、クリックされた画像が拡大されるを無しで作ってみた。

demo : require Flash Plaer 10 above

Flash Player 10 から使える z プロパティって便利だな。
TweenEngine の使い方が参考になった。

単純な3Dもどきな動きなら3Dライブラリはいらないんだね。

package {
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.display.Sprite;
 
import gs.TweenLite;
import gs.easing.*;
 
[SWF(width='700', height='500', backgroundColor='#000000', frameRate='60')]
public class Rotate3D extends Sprite {
	[Embed(source="aviation.png")]
	private var Aviation:Class;
	public function Rotate3D()
	{
		super();
		stage.align = StageAlign.TOP_LEFT;
		stage.scaleMode = StageScaleMode.NO_SCALE;
 
		var avi:* = new Aviation();
		avi.x -= avi.width/2;
		avi.y -= avi.height/2;
 
		_s = new Sprite();
		addChild(_s);
 
		_s.addChild(avi);
		_s.x = stage.stageWidth / 2;
		_s.y = stage.stageHeight / 2;
		_s.z = 250;
		stage.addEventListener( Event.ENTER_FRAME, enterFrameHandler );
	}
	private function enterFrameHandler(event:Event):void
	{
		var distX:Number = mouseX / stage.stageWidth;
		var distY:Number = mouseY / stage.stageHeight;
		var moveV:Number = 70;
		TweenLite.to(_s, 2, {
			rotationY:(-moveV + (2*moveV*distX))
			,rotationX:(moveV - (2*moveV*distY))
			,ease:Expo.easeOut
			});
 
	}
	private var _s : Sprite;	
}
 
}

moveV に設定する数値が動きを決定する。
大きくすると動きは速くなりたくさん回転するようになる。

制作は TextMate + Flex SDK 3.3 でしました。
コンパイルするものを作るときはプロジェクトを作って制作をすると楽なことが分かった。

Bookmark and Share

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt=""> <pre lang="" line="" escaped="">