Posted By

daisuke103 on 02/11/08


Tagged

textmate simple sample setup Fuse easing short zigo Penner


Versions (?)

AS2 Fuse ZigoEngine トゥイーンとイージングの種類リファレンス


 / Published in: Other
 

  1. stop();
  2. import com.mosesSupposes.fuse.*;
  3. ZigoEngine.simpleSetup(Shortcuts, PennerEasing);
  4.  
  5. // イージングの種類は最下部にあります
  6. // ステージにbox1_mcを用意
  7. // 40フレームまでフレーム延長
  8.  
  9. /*
  10. 皆様
  11. 特に初心者の方々
  12.  
  13. このサンプルについて
  14. ビビらないでください!
  15.  
  16. 下の大量のコードは、段階を追って学習できるように書かれた、とてもシンプルなコードです。(^_^)
  17.  
  18. ステージ上にbox1_mc(プロパティパネルから設定します)という名前のムービークリップがあります。
  19. (もう一つ、タイムラインがトゥイーンできるのを見せるためのMCが配置されていますが、それ以外のテストはbox1_mcで行います)
  20.  
  21. ここでは、一連のトゥイーンのサンプルをご覧になれます。ムービークリップに直接、ショートカットメソッドを指定しています。
  22.  
  23. All the shortcuts accept around the same parameters - 各例を試してみて学習していってください。
  24.  
  25.  
  26. 使い方
  27. 好きな行のコメントを外して下さい、行頭の"//"を削除することで、実行されるようになります。
  28. よくわからないという方へのTips:
  29. - 次の行をテストしたい時は"//"を打ち直しておいてください、でないと、いくつかの命令が同時に実行されてしまいます。
  30. - //の直後にカーソルを合わせリターンキーで改行させると簡単です。テスト後、戻す時はbackspaceキーで元の形に戻してください。
  31.  
  32. */
  33.  
  34. /* 1. 最小限の指定をした時は、Shortcutsはデフォルトである、1秒で、"easeOutQuint"という種類のトゥイーンで実行されます。
  35. 各行のコードを試してみてください。*/
  36.  
  37. //this.box1_mc.alphaTo(0);
  38. this.box1_mc.slideTo(300,300);
  39. //this.box1_mc.rotateTo(180);
  40. //this.box1_mc.scaleTo(200);
  41. //this.box1_mc.sizeTo(125);
  42. //this.box1_mc.colorTo("#33FF00");
  43. //this.box1_mc.tintTo(0x33FF00,50);
  44. //this.box1_mc.brightnessTo(80);
  45. //this.box1_mc.brightOffsetTo(100);
  46. //this.box1_mc.contrastTo(200);
  47. //this.box1_mc.invertColorTo(100);
  48.  
  49. /* bezierTo では x, y, controlX, controlY を設定できます */
  50. //this.box1_mc.bezierTo(400,100,300,200);
  51.  
  52. /* fadeInとfadeOutではalphaの値をフェードさせ、アルファが0になったら_visibleをfalseにするようになっています。 */
  53. //this.box1_mc.fadeOut();
  54.  
  55. /* 次の行は同時に実行してください。 */
  56. //this.box1_mc._alpha = 0;
  57. //this.box1_mc.fadeIn();
  58.  
  59. /* frameTo ではタイムライン自体をトゥイーンできます。ここではタイムラインを40フレームに進めます。 */
  60. //this.frameTo(40, 1);//結果は下のムービークリップで確認してください。
  61.  
  62. /* ややこしいのであまり使いたがらないかもしれませんが、flash7でのcolor transform指定もできます。 */
  63. //this.box1_mc.colorTransformTo(0,100,100,50,100,50,50,0);
  64.  
  65. /* The granddaddy of them all is "tween", which lets you pass any parameter, including some
  66. added by the engine that you may not have seen yet. (You will in the other files here.)
  67. (This only scratches the surface since you can also tween more than one property at once.) */
  68. //this.box1_mc.tween('_xscale', 4000);
  69.  
  70.  
  71. /* OK。上の例を全部試したら次いってみよう。 ---------------------------------------
  72. 2. "相対指定について知る"
  73. ZigoEngineには相対値で指定する技があります。簡単です。引用符「'」を使うだけです。
  74.  
  75. 下のサンプルを試してみてください。各ブロックの1行目と2行目をそれぞれ試して、違いを見てください。
  76. 相対値(「'」で囲まれた方)での指定では、現在の位置からの"相対的"な位置を算出します。
  77. */
  78.  
  79. //this.box1_mc.slideTo(100,100); // ステージ左上(原点)を元に移動します。
  80. //this.box1_mc.slideTo('100','100'); // ムービークリップの現在位置からそれぞれ100pxずつ移動します。
  81.  
  82. //this.box1_mc.slideTo(-10, -10); // ステージ左上(原点)を元に移動します。
  83. //this.box1_mc.slideTo('-10','-10'); // ムービークリップの現在位置からそれぞれ-10pxずつ移動します。
  84.  
  85. //this.box1_mc.bezierTo(150,50,100, 250);
  86. //this.box1_mc.bezierTo('100','0','0','-50');
  87.  
  88. //this.box1_mc.scaleTo(300);
  89. //this.box1_mc.scaleTo('300');
  90.  
  91. //this.box1_mc.sizeTo(100);
  92. //this.box1_mc.sizeTo('100');
  93.  
  94.  
  95.  
  96. /* 次いってみよう。 -----------------------------------------------------------------------------------------
  97. 3. Tweens have a bunch more parameters that you can add, with commas of course.
  98.  
  99. Here they are:
  100. - one or more destination parameters, depending on the shortcut
  101. - number of seconds to tween
  102. - easing style -- "easeOutElastic", "easeInOutExpo", or "easeInBack" etc. --
  103. - delay before start
  104. - a function to trigger when the tween is done, also called a "callback".
  105.  
  106. Uncomment one example at a time below to see each parameter added.
  107. */
  108.  
  109. /* はじめに基本のslideToです。相対値で移動させます。 */
  110. //this.box1_mc.slideTo('300', '0');
  111.  
  112. /* 継続時間を2秒に設定します。 - 設定していない時はデフォルト値の1秒でした。 */
  113. //this.box1_mc.slideTo('300', '0', 2);
  114.  
  115. /* PennerEasingの省略指定を使って、イージングの種類を追加します */
  116. //this.box1_mc.slideTo('300', '0', 2, 'easeOutElastic');
  117.  
  118. /* 1.5秒の待機後、トゥイーンを開始までするように設定します。 */
  119. //this.box1_mc.slideTo('300', '0', 2, 'easeOutElastic', 1.5);
  120.  
  121. /* 最後に、出力ウィンドウにメッセージを表示するtraceコマンドを追加します。
  122. (これはコールバック関数を実行させる簡単な方法のひとつです。ぜひ他のサンプルもご覧下さい。) */
  123. //this.box1_mc.slideTo('300', '0', 2, 'easeOutElastic', 1.5, "trace('トゥイーン終わったよ')");
  124.  
  125.  
  126.  
  127. /* これまで学習してきたことを使って、上の方の例に、継続時間やイージングタイプ、待機時間やコールバックを
  128. 設定して、いろいろ試してみてください。
  129.  
  130. イージングについての追記:このページの最上段のセットアップの部分で、
  131. ZigoEngineにPennerEasingが渡されている事にご注意ください。登録しておくことで、
  132. "easeInQuad"といった省略指定が使えるようになるのです。
  133.  
  134. でも、ビルトインのmx easingクラスの方がお好みであれば、setup部分のPennerEasingの登録を削除し、
  135. import mx.transitions.easing.*;
  136. と追加して、イージングのパラメーターとしてStrong.easeOut(引用符は不要)等を設定してください。
  137.  
  138. Zigoのトゥイーン方法のショートカット指定をもっと知りたい方のために、下に全リストを載せておきます。
  139. (個人的にも、選ぶ種類が多いので重宝してます。)
  140. これら全てを作った人、その名はRobert Penner - 彼の本はおすすめです。
  141.  
  142. 色々試して遊んでみてください!
  143.  
  144. "linear",
  145. "easeInQuad","easeOutQuad","easeInOutQuad","easeOutInQuad"
  146. "easeInCubic","easeOutCubic","easeInOutCubic","easeOutInCubic"
  147. "easeInQuart","easeOutQuart","easeInOutQuart","easeOutInQuart"
  148. "easeInQuint","easeOutQuint","easeInOutQuint","easeOutInQuint"
  149. "easeInSine","easeOutSine","easeInOutSine","easeOutInSine"
  150. "easeInExpo","easeOutExpo","easeInOutExpo","easeOutInExpo"
  151. "easeInCirc","easeOutCirc","easeInOutCirc","easeOutInCirc"
  152. "easeInElastic","easeOutElastic","easeInOutElastic","easeOutInElastic"
  153. "easeInBack","easeOutBack","easeInOutBack","easeOutInBack"
  154. "easeInBounce","easeOutBounce","easeInOutBounce""easeOutInBounce"
  155.  
  156. */

Report this snippet   <

You need to login to post a comment.