Webアニメーション 2010

ActionScript応用：Tweenライブラリの利用(1)

June 30, 2010

今日の内容

トウィーンを扱うライブラリを使用して、高度なアニメーション表現に調整
ライブラリにはTweenMaxを使用する
様々なイージング関数を試してみる

Tweenライブラリ

アニメーションの補完のためのライブラリ
位置だけでなく、ムービークリップの属性(プロパティー)であれば、ほとんどのものを補完してくれる
- 大きさ (width, height)
- 角度 (rotation)
- 透明度 (alpha)
- フィルター … etc
有志により、様々なライブラリが開発されている
- TweenLite, TweenMax http://blog.greensock.com/v11/
- Tweener http://code.google.com/p/tweener/
- G Tween http://www.gskinner.com/libraries/gtween/
- Tweensy http://code.google.com/p/tweensy/
- GoAsap http://www.goasap.org/
- BetweenAS3 http://www.libspark.org/wiki/BetweenAS3/en
今回は高速さと多機能さが売りのTweenMaxを使用します

TweenMax のダウンロード

TweenMaxのページからライブラリをダウンロードする
- http://blog.greensock.com/tweenmax/
- AS3版のダウンロード：http://www.greensock.com/as/greensock-tweening-platform-as3.zip
- 収録されているデモムービーを見てみる (TimelineMax_Demo.swf)

TweenMaxを利用したインタラクティブなムービーの作成：基本

マウスをクリックした場所にTween

必ずダウンロードしたフォルダ「greensock-tweening-platform-as3」の中にある「com」フォルダを、作成するflaファイルと同じ場所に置く
- この中にあるAS3のライブラリを参照します
画面にムービークリップを一つ配置する
ムービークリップのインスタンス名を「mc」に
タイムラインの第1フレームにスクリプトを記入
まず最初に、Tweenライブラリをインポートする
- import com.greensock.*;

import com.greensock.*;

this.stage.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(e:MouseEvent):void {
    TweenLite.to(this.mc, 1, {x:mouseX, y:mouseY});
}

いろいろなイージング関数を試してみる

あらたにイージングのためのライブラリをインポートする
- import com.greensock.easing.*;
TweenLiteの指定にイージングを追加する

指数関数によるイースイン・アウト

import com.greensock.*;
import com.greensock.easing.*;

this.stage.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(e:MouseEvent):void {
    TweenLite.to(this.mc, 1, {x:mouseX, y:mouseY, ease:Expo.easeInOut});
}

バウント効果によるイースアウト

import com.greensock.*;
import com.greensock.easing.*;

this.stage.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(e:MouseEvent):void {
    TweenLite.to(this.mc, 1, {x:mouseX, y:mouseY, ease:Bounce.easeOut});
}

ばねの動きによるイースアウト

import com.greensock.*;
import com.greensock.easing.*;

this.stage.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(e:MouseEvent):void {
    TweenLite.to(this.mc, 1, {x:mouseX, y:mouseY, ease:Elastic.easeOut});
}

位置+サイズの変更

import com.greensock.*;
import com.greensock.easing.*;

this.stage.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(e:MouseEvent):void {
    var size:Number = Math.random() * 200;
    TweenLite.to(this.mc, 1, {x:mouseX, y:mouseY, width:size, height:size, ease:Elastic.easeOut});
}

TintPluginの利用：色の変化

ランダムに色が変化する

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;

TweenPlugin.activate([TintPlugin]);

this.stage.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(e:MouseEvent):void {
    var scale:Number = Math.random() * 4.0;
    var color:Number = Math.random() * 0xffffff;
    import com.greensock.plugins.*;
    TweenLite.to(this.mc, 1, {x:mouseX, y:mouseY, scaleX:scale, scaleY:scale, tint:color, ease:Elastic.easeOut});
}

Tweenの連鎖：onCompleteの利用

Tweenが完了すると、すぐに新たなTweenを適用する

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;

TweenPlugin.activate([TintPlugin]);

this.stage.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(e:MouseEvent):void {
    myTween();
}

function myTween():void {
    var scale:Number=Math.random()*4.0;
    var color:Number=Math.random()*0xffffff;
    var toX:Number=Math.random()*stage.stageWidth;
    var toY:Number=Math.random()*stage.stageHeight;
    import com.greensock.plugins.*;
    TweenLite.to(this.mc, 1, {x:toX, y:toY, scaleX:scale, scaleY:scale, tint:color, ease:Elastic.easeOut, onComplete:myTween});
}