ActionScript 3.0入門ノート CS4でタグ「Tween」が付けられているもの

Section14-01 外部イメージファイルを読み込んでフェードインで表示するスクリプト(p.406)のサンプルはLoaderクラスを継承した作りになっているために難しいかもしれません。そこでフレームアクションで実行できるシンプルな例を紹介しておきます。
このスクリプトのポイントは、画像ファイルの読み込み完了イベントEvent.COMPLETEのリスナーをLoaderのインスタンスのcontentLoaderInfoプロパティにaddEventListener()する部分です。(6行目)

[:script:]読み込み完了後にフェードインで表示する
//読み込む画像ファイルを指定する
var url:String = "image/IMG_8171.jpg";
var urlReq:URLRequest = new URLRequest(url);
//ローダーを作る
var photoLoader:Loader=new Loader();
photoLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
//画像を読み込む
photoLoader.load(urlReq);
//画像を表示する
photoLoader.x = 100;
photoLoader.y = 50;
addChild(photoLoader);
//ドロップシャドウを付ける
var dsf:DropShadowFilter=new DropShadowFilter();
dsf.alpha = 0.8;
photoLoader.filters = [dsf];

import fl.transitions.Tween;
import fl.transitions.easing.*;
var tw:Tween;
//フェードインで表示する
function onLoaded(eventObj:Event):void {
	tw = new Tween(photoLoader,"alpha",Regular.easeInOut,0,1,1,true);
}

fadein.jpg
swfを試す

ファイル一式をダウンロードする
(section05-03 座標移動のアニメーションから抜粋)

 yoyo()はトゥイーンの逆再生を行うメソッドです。プロパティの値がaからbに変化するトゥイーンを作って実行している最中にyoyo()を実行すると、bからaへの逆向きのトゥイーンになります。さらに逆向きのトゥイーンの再生中にyoyo()を実行すると再びトゥイーンの方向が逆転してaからbへのトゥイーンになります。
fig05-03-06_shiji.jpgswfを試す

[:script:]ロールオーバーしている間、右回りと左回りを交互に繰り返す。
import fl.transitions.Tween;
import fl.transitions.easing.Regular;
import fl.transitions.TweenEvent;
var twObj:Tween;

//ロールオーバーとロールアウトの設定
box_mc.addEventListener(MouseEvent.ROLL_OVER, startSwing);
box_mc.addEventListener(MouseEvent.ROLL_OUT, stopSwing);

//右回転
function startSwing(eventObj:MouseEvent):void {
	//右に1回転する
	twObj=new Tween(box_mc,"rotation",Regular.easeInOut,0,360,1,true);
	//回転が完了したら逆回転する
	twObj.addEventListener(TweenEvent.MOTION_FINISH, rewind);
}
//逆回転
function rewind(eventObj:TweenEvent):void {
	twObj.yoyo();
}
//逆回転を行わない
function stopSwing(eventObj:MouseEvent):void {
	twObj.removeEventListener(TweenEvent.MOTION_FINISH, rewind);
}
(section05-03 座標移動のアニメーションから抜粋)

 次のサンプルでは、トゥイーンアニメーションの関数を配列motionListに入れておき、トゥイーンが完了したならばmotionListから順に次の関数を取り出して実行します。トゥイーンの関数には右へトゥイーンするmoveRight()、左へトゥイーンするmoveLeft()、180度回転するturn()の3つの種類の関数があります。これを9行目で示すように[moveRight,turn,moveLeft,turn]の順でmotionListに入れます。そしてnextMotion()でmotionListから関数を順に取り出して実行していきます。36行目ではmotionListから取り出した関数は変数motionに入れていますが、motion()と実行することで取り出した関数を実行できます。

 トゥイーンアニメーションのそれぞれの関数では、実行したトゥイーンが完了したならばnextMotion()を呼び出すようにTweenEvent.MOTION_FINISHイベントのリスナー関数を登録します。moveRight()、moveLeft()、turn()で毎回新しくtwObjインスタンスを作成するので、そのつどにTweenEvent.MOTION_FINISHイベントのリスナー関数を登録しなければなりません。

fig05-03-04_shiji.jpgswfを試す

[:script:]複数のトゥイーンアニメーションを連続して再生する
(section05-03 座標移動のアニメーションから抜粋)

トゥイーンの完了を待って次の処理に移りたいという場合があります。Tweenクラスではトゥイーンの完了をTweenEvent.MOTION_FINISHイベントで知ることができます。
 次のサンプルではこれを利用して2つのトゥイーンを連続させています。まず最初にステージの外から中央へトゥイーンで登場し、移動が完了したならば続いてスケールをトゥイーンさせてビヨンと弾むようなアニメーションを行います。トゥイーンの関数にElastic.easeOutを使うとビヨンと弾むように見えます。
fig05-03-03_shiji.jpgswfを試す
//利用するクラスをインポート
import fl.transitions.Tween;
import fl.transitions.easing.Regular;
import fl.transitions.easing.Elastic;
import fl.transitions.TweenEvent;
var twObj1:Tween;
var twObj2:Tween;
var twObj3:Tween;

//ステージの外から登場してくる
twObj1=new Tween(box_mc,"x",Regular.easeInOut,-100,275,1,true);
twObj1.addEventListener(TweenEvent.MOTION_FINISH, spring);

//移動が完了したらビヨンと弾む
function spring(eventObj:TweenEvent):void {
	twObj2=new Tween(box_mc,"scaleX",Elastic.easeOut,0.8,1,1,true);
	twObj3=new Tween(box_mc,"scaleY",Elastic.easeOut,0.8,1,1,true);
}
(section05-03 Tweenクラスを利用したアニメーションから抜粋)

 次のサンプルはステージにあるbox_mcインスタンスをx座標50の位置からx座標450の位置まで、Tweenクラスを利用して直線的に移動させる例です。引数は次のようになります。トゥイーンさせるインスタンスはbox_mc、値を変化させるプロパティはx、値の変化に利用する関数は標準的なイーズイン・アウトのRegular.easeInOut、xプロパティの開始値は50、終了値は450、移動には1秒間、秒数指定なので最後の引数はtrueです。

//利用するクラスをインポート
import fl.transitions.Tween;
import fl.transitions.easing.Regular;
//box_mcのx座標をトゥイーンする
var twObj_x:Tween=new Tween(box_mc,"x",Regular.easeInOut,50,450,1,true);
swfを試す

スピードにブラーを合わせる

|

UFOにカーソルが重なると逃げます。動きのスピードと向きに合わせてブラーフィルタがかかります。
fig12-01-03a.jpg
→swfを見る

まったく新しいAS3の世界!
694a.jpg
Adobe Flash CS4
詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)

楽しいActionScript。
新たなる1歩へと踏み出しましょう。
■内容は?→ 目次を見る
■評判は?→ 書評を読む
この本を書いたわけ

タグ

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

あわせて読みたいブログパーツ