今日の内容

• トウィーンを扱うライブラリを使用して、高度なアニメーション表現に調整
• ライブラリには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});
}

最終課題の予告

最終課題：TweenMaxライブラリを使用して、インタラクティブな作品を作る

• TweenMaxライブラリを使用して、インタラクティブな作品を作成してください
• ユーザからの何らかの入力に反応するようにする
  • 基本：マウス、キーボード
  • 応用：音声、ネットワーク、外部センサー、時間 …etc.
• 動きにはTweenMaxライブラリを利用すること
• 課題の提出方法、締切などの詳細は、年明けの授業で連絡します