yoppa.org


Webアニメーション 2010

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

今日の内容

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

Tweenライブラリ

TweenMax のダウンロード

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

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

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

[code language=”javascript”]
import com.greensock.*;

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

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

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

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

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

[code language=”javascript”]
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});
}
[/code]

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

[code language=”javascript”]
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});
}
[/code]

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

[code language=”javascript”]
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});
}
[/code]

位置+サイズの変更

[code language=”javascript”]
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});
}
[/code]

TintPluginの利用:色の変化

ランダムに色が変化する

[code language=”javascript”]
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});
}
[/code]

Tweenの連鎖:onCompleteの利用

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

[code language=”javascript”]
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});
}
[/code]

Picasa Webアルバムを表示する(2) | yoppa org — 19 January 2011 07:13
[...] アニメーションの効果には、Tweenライブラリを使用しています。これは、変化させる対象と変化に要する時間を指定すると簡単にアニメーションを作成してくれるライブラリです。詳細は、「Webアニメーション」の授業の「Tweenライブラリの利用(1)」「Tweenライブラリの利用(2)」を参照してください。 [...]