5/7は宿題の講評から始まって、外部画像の読み込み方、Tweenerの使い方をやりました。
外部画像を使う
宿題では画像を使いたい人が多かったみたいなので、方法を説明。
外部画像を読み込む
http://oyatsu.mztm.jp/2010/05/07/exim/
Tweenerを使おう
これまではENTER_FRAMEを使ってSpriteを動かしていましたが、Tweenerというライブラリを使って動かしてみましょう。
Tweenerとは
Spriteとかをボヨーンと動かすためのActionScriptの固まり。気の聞いた機能がたくさんあるので、ユーザー側は簡単な記述だけで動かすことができる。Flashに付属されていないしAdobe純正でもないので、Tweener自体をダウンロードする必要がある。
ダウンロード
↓ここの、右側、tweener_1_33_74_as3.zipをクリックしてダウンロード。
http://code.google.com/p/tweener/
設置
zipファイルをダウンロードしたら、解凍して、caurinaのフォルダを、flaと同じ階層に置く。
ちなみに日本語の説明はここに詳しい。
http://www.tonpoo.com/tweener/index2.html
作例1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
package{ import caurina.transitions.Tweener; import flash.display.Sprite; public class Main extends Sprite{ private var _maru1:Sprite; public function Main(){ _maru1 = new Sprite(); _maru1.graphics.beginFill(0x006666,0.7); _maru1.graphics.drawCircle(0,0,26); _maru1.graphics.endFill(); this.addChild(_maru1); Tweener.addTween(_maru1, { x:200, y:200, time:3, transition:"easeOutBack" } ); } } } |
import caurina.transitions.Tweener;
と
Tweener.addTween(_maru1, { x:200, y:200, time:3, transition:”easeOutBack” } );
だけで、動くものができたことを確認。
作例2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
package{ import caurina.transitions.Tweener; import flash.display.Sprite; import flash.events.MouseEvent; public class Main extends Sprite{ private var _maru1:Sprite; public function Main(){ _maru1 = new Sprite(); _maru1.graphics.beginFill(0x006666,0.7); _maru1.graphics.drawCircle(0,0,26); _maru1.graphics.endFill(); this.addChild(_maru1); //Tweener.addTween(_maru1, { x:200, y:200, time:3, transition:"easeOutBack" } ); stage.addEventListener(MouseEvent.CLICK,onClick); } private function onClick(event:MouseEvent):void{ var dx:Number = Math.random()*stage.stageWidth; var dy:Number = Math.random()*stage.stageHeight; Tweener.addTween(_maru1, { x:dx, y:dy, time:3, transition:"easeOutBack" } ); } } } |
ステージ上をマウスクリックするたびに、_maru1がランダムな位置に移動します。
作例3
授業ではやりきれなかったおまけ。
delayを使うと、実行までのタイムラグを設定できる。
onComplete:onCompと書くと、動きの完了後にonCompのファンクションを実行させられる。
組み合わせると、目的地にまっすぐに移動だけじゃなくてちょっと変な動きも可能。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/* * Tweenerの日本語の解説。 * http://www.tonpoo.com/tweener/index2.html * */ package{ import caurina.transitions.Tweener; import flash.display.Sprite; import flash.events.MouseEvent; public class Main extends Sprite{ private var _maru1:Sprite; public function Main(){ _maru1 = new Sprite(); _maru1.graphics.beginFill(0x006666,0.7); _maru1.graphics.drawCircle(0,0,26); _maru1.graphics.endFill(); this.addChild(_maru1); stage.addEventListener(MouseEvent.CLICK, onClick); } private function onClick(event:MouseEvent):void { trace("click!"); var dx:Number = Math.random() * stage.stageWidth; var dy:Number = Math.random() * stage.stageHeight; Tweener.addTween(_maru1, { x:dx, time:1, transition:"easeOutQuart" } ); Tweener.addTween(_maru1, { y:dy, time:1, delay:0.2, transition:"easeOutQuart", onComplete:onComp } ); } private function onComp():void { trace("onComp!"); } } } |
tweenerは他にも機能があって、組み合わせるといろいろな表現ができる。是非、上でも紹介した説明ページをみて、使いこなせるようになって欲しい。
宿題
宿題はtweenerと前回のDateを使って、ナウい時計を作ること。時刻がわからない時計。カッコいい、たのしいものになることが優先。
