Home > Tags > tween

tween

[Adobe MAX Japan 2009]ROXIK城戸さんのアレとTweensyで観覧車やってみた

すでにたくさんのレポートが投稿されてるみたいですが、
私もAdobe MAX 2日目参加してきました！！

感想をまとめようかと思いましたが、
私と全く同じセッションを選択されているll_koba_llさんのこの記事に書いてあるまとめが、
本当に感じたこととか一緒でうまくまとめてくださってるので、

まとめるの割愛します(あんなにうまく文まとまりましぇんｗ)。

受けたセッションの中でも、
すぐやってみたいと思ったのが
ROXIK城戸さんが実際にコードを書いて
日本語変数でものすごくわかりやすかった
ムービークリップの座標を視点で制御するアレ。

そこで記憶とメモを基に、
サンプルを作ってみることにした。

まず準備

真ん中基準点のMC「box_mc」を作成。
セッションの時のを忠実に再現w
aの文字は動くとぶるぶるするので分解してシェイプに。
プロパティでクラスにbox_mcと設定。

サンプルたち

視点の横移動

view sample

PLAIN TEXT
Actionscript:
  1. var 視点={x:0,y:0,angle:0,zoom:0};</p>
  2. <p>var ボックスたち=[];<br />
  3. var ポイントたち=[];</p>
  4. <p>ボックス追加();</p>
  5. <p>function ボックス追加() {<br />
  6.     var ポイント;<br />
  7.     var ボックス;</p>
  8. <p> for (var i=0; i&lt;20; i++) {<br />
  9.         ポイント={x:Math.random()*700,y:Math.random()*400};<br />
  10.         ポイントたち[i]=ポイント;</p>
  11. <p>  ボックス=new box_mc();<br />
  12.         ボックスたち[i]=ボックス;<br />
  13.         addChild(ボックス);<br />
  14.     }<br />
  15. }</p>
  16. <p>function モーション(e:Event) {<br />
  17.     視点.x+=2;<br />
  18. }</p>
  19. <p>function レンダリング(e:Event) {<br />
  20.     for (var i=0; i<ボックスたち.length; i++) {<br />
  21.         var ポイント=ポイントたち[i];<br />
  22.         var ボックス=ボックスたち[i];</p>
  23. <p>  ボックス.x=ポイント.x-視点.x;<br />
  24.         ボックス.y=ポイント.y-視点.y;<br />
  25.     }<br />
  26. }<br />
  27. addEventListener(Event.ENTER_FRAME,モーション);<br />
  28. addEventListener(Event.ENTER_FRAME,レンダリング);

視点の回転

view sample

PLAIN TEXT
Actionscript:
  1. var 視点={x:0,y:0,angle:0,zoom:0};</p>
  2. <p>var ボックスたち=[];<br />
  3. var ポイントたち=[];</p>
  4. <p>ボックス追加();</p>
  5. <p>function ボックス追加() {<br />
  6.     var ポイント;<br />
  7.     var ボックス;</p>
  8. <p> for (var i=0; i&lt;20; i++) {<br />
  9.         ポイント={x:Math.random()*700,y:Math.random()*400};<br />
  10.         ポイントたち[i]=ポイント;</p>
  11. <p>  ボックス=new box_mc();<br />
  12.         ボックスたち[i]=ボックス;<br />
  13.         addChild(ボックス);<br />
  14.     }<br />
  15. }</p>
  16. <p>function モーション(e:Event) {<br />
  17.     //ポイント.x+=2;<br />
  18.     //視点.x+=2;<br />
  19.     視点.angle+=0.01;<br />
  20. }</p>
  21. <p>function レンダリング(e:Event) {<br />
  22.     var cos=Math.cos(視点.angle);<br />
  23.     var sin=Math.sin(視点.angle);</p>
  24. <p> for (var i=0; i<ボックスたち.length; i++) {<br />
  25.         var ポイント=ポイントたち[i];<br />
  26.         var ボックス=ボックスたち[i];</p>
  27. <p>  var 視点からの差x=ポイント.x-視点.x;<br />
  28.         var 視点からの差y=ポイント.y-視点.y;</p>
  29. <p>  ボックス.x=視点からの差x*cos-視点からの差y*sin+350;<br />
  30.         ボックス.y=視点からの差x*sin+視点からの差y*cos+200;<br />
  31.     }<br />
  32. }<br />
  33. addEventListener(Event.ENTER_FRAME,モーション);<br />
  34. addEventListener(Event.ENTER_FRAME,レンダリング);

視点のズーム＆回転

view sample

PLAIN TEXT
Actionscript:
  1. var 視点={x:0,y:0,angle:0,zoom:0};</p>
  2. <p>var ボックスたち=[];<br />
  3. var ポイントたち=[];</p>
  4. <p>ボックス追加();</p>
  5. <p>function ボックス追加() {<br />
  6.     var ポイント;<br />
  7.     var ボックス;</p>
  8. <p> for (var i=0; i&lt;20; i++) {<br />
  9.         ポイント={x:Math.random()*700,y:Math.random()*400};<br />
  10.         ポイントたち[i]=ポイント;</p>
  11. <p>  ボックス=new box_mc();<br />
  12.         ボックスたち[i]=ボックス;<br />
  13.         addChild(ボックス);<br />
  14.     }<br />
  15. }</p>
  16. <p>function モーション(e:Event) {<br />
  17.     //ポイント.x+=2;<br />
  18.     視点.angle-=0.01;<br />
  19.     視点.zoom+=0.01;<br />
  20. }</p>
  21. <p>function レンダリング(e:Event) {<br />
  22.     var cos=Math.cos(-視点.angle);<br />
  23.     var sin=Math.sin(-視点.angle);</p>
  24. <p> for (var i=0; i<ボックスたち.length; i++) {<br />
  25.         var ポイント=ポイントたち[i];<br />
  26.         var ボックス=ボックスたち[i];</p>
  27. <p>  var 視点からの差x=(ポイント.x-視点.x)*視点.zoom;</p>
  28. <p>  var 視点からの差y=(ポイント.y-視点.y)*視点.zoom;</p>
  29. <p>  ボックス.scaleX=ボックス.scaleY=視点.zoom;<br />
  30.         ボックス.x=視点からの差x*cos-視点からの差y*sin+350;<br />
  31.         ボックス.y=視点からの差x*sin+視点からの差y*cos+200;<br />
  32.     }<br />
  33. }<br />
  34. addEventListener(Event.ENTER_FRAME,モーション);<br />
  35. addEventListener(Event.ENTER_FRAME,レンダリング);

 

感想

忘れないうちにってことでとりあえずアップしてみたけど、
かなりセッションでやってたやつに近いサンプルができたかな？

自分もこのソースみてまた勉強しようw

今回の城戸さんのスライド公開ならへんかなぁ(*´ω｀*)

関連する投稿

[tweensy]いろいろ試してみる：TweensyGroupで特殊プロパティをトゥイーン

訳しときながらTweensyGroupって何なのかわからなかったけど、
今日asDoc読んでてわかったような気が…。

TweensyGroupには、tweenerでいう特殊プロパティ的なもののトゥイーンのショートカットがあって、
Tweensyでやるよりコードがすっきりして、簡単。

色、輝度、マトリックス、…などなどをバラバラに指定できて、まとめて管理できるから”Group”ってことなのかな？？

それぞれの効果にTweensyTimelineを作ってグループ管理している模様。

時間、イージング、遅延とか各効果別に設定したいけど、制御系はグループ管理したいって時に使えるってことか。

とにかく今回は制御というよりかは特殊プロパティについて調べてみる。


TweensyGroupサンプル

透明度をあげつつ、ぼかしをとりつつ、ぼよんと拡大する。

view sample

Sample1.as

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import com.flashdynamix.motion.*;
  4.     import fl.motion.easing.*;
  5.     import flash.text.TextField;
  6.     import flash.display.MovieClip;
  7.     import flash.filters.BlurFilter;
  8.     import flash.geom.Matrix;
  9.  
  10.     /**
  11.     * ...
  12.     * @author DefaultUser (Tools -> Custom Arguments...)
  13.     */
  14.     public class  Sample1 extends MovieClip
  15.     {
  16.         private var tween:TweensyGroup;
  17.         private var tf:TextField;
  18.        
  19.         public function Sample1() {
  20.             tween = new TweensyGroup();
  21.             tween.onComplete = tweenComp;
  22.            
  23.             //透明度
  24.             this.alpha = 0;
  25.             tween.alphaTo(this, 1, 1,Quartic.easeOut,0.5);
  26.             //フィルター
  27.             var blur:BlurFilter = new BlurFilter(30,30,1);
  28.             tween.filterTo(this, blur, {blurX:0,blurY:0}, 1,Quartic.easeOut,0.5)
  29.             //拡大・縮小
  30.             tween.scaleTo(this, 2, 2, Elastic.easeOut, 1);
  31.            
  32.             //テキストフィールドを作成、追加
  33.             tf = new TextField();
  34.             tf.y = -(this.height/2)-20; //基準点が中央のため
  35.  
  36.             addChild(tf);
  37.            
  38.         }
  39.         public function tweenComp():void {
  40.             tf.text = "Complete!";
  41.         }
  42.        
  43.     }
  44.    
  45. }

ショートカットの詳細

alphaToメソッド　-透明度の変更

public function alphaTo(instance:Object, alpha:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcのアルファを3秒かけて0.5にする
tween.alphaTo(mc, 0, 5,3);

brightnessToメソッド -輝度の変更

public function brightnessTo(instance:Object, amount:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcの輝度を3秒かけて0.5にする
tween.alphaTo(mc, 1, 5,3);

ColorToメソッド -色を変更

public function colorTo(instance:Object, color:uint, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcの色を3秒かけて0x000000(黒)にする
tween.colorTo(mc, 0x000000, 3);

ColorTransformToメソッド -ColorTranceformの適用

public function colorTransformTo(instance:Object, color:ColorTransform, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

import flash.geom.ColorTransform;

//mcの色をColorTransform オブジェクトctに5秒かけて適用
var ct:ColorTransform=new ColorTransform(-1, -1, -1, 1, 255, 255, 255, 0)
tween.colorTransformTo(mc, ct, 5)

contrastToメソッド -コントラストの変更

public function contrastTo(instance:Object, amount:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcのコントラストを3秒かけて1(最大)に変更
tween.contrastTo(mc 1,2);

filterToメソッド -フィルタ効果の適用

public function filterTo(instance:Object, filter:BitmapFilter, to:Object, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

import flash.filters.BlurFilter;

//ぼかしフィルターのblurX、blurYを10に5秒かけて適用
var blur:BlurFilter = new BlurFilter(0,0,1);
tween.filterTo(this, blur, {blurX:10,blurY:10}, 5);

matrixToメソッド -マトリックス変形の適用

public function matrixTo(instance:Object, mtx:Matrix, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

import flash.geom.Matrix;

//mcにMatrixオブジェクトmtxを3秒かけて適用
var mtx:Matrix = new Matrix(-1,2,1,2,1,2);
tween.matrixTo(this, mtx, 3);

rotateToメソッド -回転

public function rotateTo(instance:Object, rotation:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcの角度を3秒かけて180度に変更
tween.rotateTo(mc, 180, 3);

scaleToメソッド -拡大・縮小

public function scaleTo(instance:Object, scale:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcを1秒かけて50%に縮小
tween.scaleTo(mc,0.5,1)；

soundTransformTo -SoundTransformの適用

public function soundTransformTo(instance:Object, trans:SoundTransform, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

import flash.media.SoundTransform;

////mcにSoundTranceformオブジェクトstを3秒かけて適用
var st:SoundTransform = new SoundTransform(1, 0);
tween.soundTransformTo(this, st, 3);



関連する投稿

Home > Tags > tween

Twitter
Follow @kanariia (254 followers)
recent article
arcive
category
bookmark
nakanohito

あわせて読みたい
あわせて読みたいブログパーツ

Return to page top