プログラマのためのFlash遊び方

第6回 動きのある Flash を作る(後編)

この記事を読むのに必要な時間:およそ 3.5 分

addTween()を極める

それではソースコードを見ていきましょう。

アニメーションさせるにはTweenerクラスの静的メソッドaddTween()を利用します。

画像

表示オブジェクトs(円)をパラメータに従ってアニメーションさせています。

パラメータを見ていきましょう。timeはアニメーションの秒数です。その次の,scaleXとscaleYはアニメーション後のscaleXとscaleYプロパティの値を指定しています。

つまり,このコードを実行すると,1秒の間にsのscaleXとscaleYプロパティがそれぞれ5まで遷移します。

第2引数のパラメータの{}のところが分かりにくいかもしれませんね。{}というのは,Objectクラスのインスタンスを生成して,プロパティに値を設定するときの構文です。次のようなソースコードと同じと考えるとよいでしょう。

var param:Object = new Object();
param.time = 1;
param.scaleX = 5;
param.scaleY = 5;

Tweener.addTween(s, param);

timeとscaleXの違い

timeパラメータはtweenerによってあらかじめ定義されているパラメータです。あらかじめ定義されているパラメータの一覧はtweenerオンラインマニュアルTweening Parametersにあります。delay,count,transitionといったアニメーションの振る舞いを決めるパラメータや,アニメーション中にイベントが発生したときに呼び出されるonUpdate,onCompleteなどがあります。

それに対して,scaleXとscaleYは,アニメーション後の値を指定するパラメータです。scaleXとscaleYの他には,どのような種類があるのでしょうか。tweenerのオンラインマニュアルには一覧が載っていません。というのも,指定できるパラメータの種類は,アニメーション対象の表示オブジェクトのプロパティであれば何でもいいのです。

scaleXプロパティとscaleYプロパティは最初は0に設定されています。

s.scaleX = s.scaleY = 0;

addTween() が呼ばれると,プロパティの値は初期値(0)から指定された値(5)まで段階的に変化します。結果として,アニメーションしているように見えるのです。

それでは,別のプロパティも変更してみましょう。x座標を表すxプロパティを付け加えてみます。

Tweener.addTween(s, {
    time: 1,
    scaleX: 5,
    scaleY: 5,
    x: 0
});

クリックした位置から左端まで移動するようになりました。

このように,表示オブジェクトのプロパティであれば,どのようなものであってもtweenerでアニメーションさせることができます。

transitionを修正する

tweenerには,パラメータが遷移するときの移り変わり具合をコントロールするtransitionというパラメータがあります。

transitionの一覧はtweenerオンラインマニュアルTransition Typesにあります。デフォルト値はeaseOutExpoです。

画像

試しに,transitionの値をeaseOutBounceに変更してみましょう。

Tweener.addTween(s, {
    time: 1,
    scaleX: 5,
    scaleY: 5,
    transition: "easeOutBounce"
});

バウンドしながら拡大していくようになります。

著者プロフィール

最田健一(さいたけんいち)

有限会社 CO-CONV勤務のプログラマ。京都在住の京都好き。趣味で ActionScript 3.0やFlex 2を触っていたら,いつの間にか仕事でも使うことになっていた。個人ブログは「てっく煮ブログ」。

URLhttp://tech.nitoyon.com/