今日の内容

• 先週に引き続き、Tweenライブラリについて学んでいきます
• ユーザのアクションに反応する、Tweenを使用した様々な動きを試していきます

触れると拡大する物体

• マウスで触れると(ROLL_OVER)、拡大します
• マウスを離すと(ROLL_OUT)、もとの大きさに戻ります
• Easingの関数や、拡大・縮小に要する時間をいろいろ変化させて、動きのニュアンスの違いを試してみましょう

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

this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
this.mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);

function rollOverHandler(e:MouseEvent):void {
TweenLite.to(this.mc, 1, {scaleX:4.0, scaleY:4.0, ease:Elastic.easeOut});
}

function rollOutHandler(e:MouseEvent):void {
TweenLite.to(this.mc, 1, {scaleX:1.0, scaleY:1.0, ease:Elastic.easeOut});
}
[/code]

https://yoppa.org/wp-content/uploads/2010/07/01_touchEaseing.swf,550,400

触ろうとすると、逃げていく物体

• マウスで触れようとすると、スルリすり抜けて逃げていきます
• ランダムな値を指定するには、Math.random() という命令を使用します、Math.random() は、0〜1の範囲でランダムな値を生成します

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

this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);

function rollOverHandler(e:MouseEvent):void {
TweenLite.to(this.mc, 1, {x:Math.random()*550, y:Math.random()*400, rotation:Math.random()*360, ease:Elastic.easeOut});
}
[/code]

https://yoppa.org/wp-content/uploads/2010/07/02_touchEaseing.swf,550,400

触れると色が変化する

• 色を変化させるには、「tint」というプロパティを変化させます
• tintを有効にするには、プラグインを読みこむ必要があります。冒頭で「import com.greensock.plugins.*」と指定します。

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

TweenPlugin.activate([TintPlugin]);

this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
this.mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);

function rollOverHandler(e:MouseEvent):void {
var color:Number = Math.random() * 0xffffff;
TweenLite.to(this.mc, 1, {scaleX:4.0, scaleY:4.0, tint:color, ease:Elastic.easeOut});
}

function rollOutHandler(e:MouseEvent):void {
var color:Number = Math.random() * 0xffffff;
TweenLite.to(this.mc, 1, {scaleX:1.0, scaleY:1.0, tint:color, ease:Elastic.easeOut});
}
[/code]

https://yoppa.org/wp-content/uploads/2010/07/03_touchEaseingColor.swf,550,400

触れるとぼやける

• 色の変化だけでなく、様々なエフェクトを利用可能です
• プラグインを利用して、ぼかし(blur)をかけてみます。

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

TweenPlugin.activate([TintPlugin]);

this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
this.mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);

function rollOverHandler(e:MouseEvent):void {
TweenMax.to(this.mc, 1, {scaleX:4.0, scaleY:4.0, blurFilter:{blurX:50, blurY:50}, ease:Elastic.easeOut});
}

function rollOutHandler(e:MouseEvent):void {
TweenMax.to(this.mc, 1, {scaleX:1.0, scaleY:1.0, blurFilter:{blurX:0, blurY:0}, ease:Elastic.easeOut});
}
[/code]

https://yoppa.org/wp-content/uploads/2010/07/04_touchEaseingBlur.swf,550,400

触れると光る

• glow という効果を使用すると、全体が光っているような効果を生みだします

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

TweenPlugin.activate([TintPlugin]);

this.mc.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
this.mc.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);

function rollOverHandler(e:MouseEvent):void {
TweenMax.to(this.mc, 1, {scaleX:4.0, scaleY:4.0, glowFilter:{color:0x91e600, alpha:1, blurX:30, blurY:30}, ease:Elastic.easeOut});
}

function rollOutHandler(e:MouseEvent):void {
TweenMax.to(this.mc, 1, {scaleX:1.0, scaleY:1.0, glowFilter:{alpha:0, blurX:0, blurY:0}, ease:Elastic.easeOut});
}
[/code]

https://yoppa.org/wp-content/uploads/2010/07/04_touchEaseingGlow.swf,550,400