2. 入門講座 - 4. 「Tween」

 次はモーショントゥイーンとボタンについて勉強しましょう。

2- 4- 0. レイヤーとオブジェクトの用意

まずレイヤーを用意します。レイヤーを「ACTION」「BUTTON」「BALL」「SCREEN」の4つ用意します。
今回使用するオブジェクトは、「ボール」と「ボタン」と「背景」です。「ボール」は「BALL」レイヤー、「ボタン」は「BUTTON」レイヤー、「背景」は「SCREEN」レイヤーにそれぞれ配置しておきます。

Tween_Layer
レイヤーは、この順に並べる。

2- 4- 1. シンボルに変換

用意したオブジェクトをシンボルに変換していきます。「ボール」は「グラフィックシンボル」、「ボタン」は「ボタンシンボル」に変換します。「背景」はそのままで構いません。


シンボルに変換されると、ライブラリに格納される。

2- 4- 2. フレームの編集

フレームを編集します。ここでは30フレーム使用し、フレームレートは10fpsとします。「ACTION」「BUTTON」レイヤーは1フレームです。
「BALL」「SCREEN」レイヤーの30フレーム目で「フレームの挿入」をして下さい。そして、「BALL」レイヤーの30フレーム目で「キーフレームの挿入」をして下さい。

2- 4- 3. モーショントゥイーンの作成

モーショントゥイーンの作成をします。「BALL」レイヤーの1~29フレーム目のどこかで右クリックをして、「モーショントゥイーンを作成」を選択して下さい。「BALL」レイヤーに矢印が書き込まれたはずです。
30フレーム目の「ボール」の位置をずらせば、すでに簡単なトゥイーンアニメーションは出来上がっています。2~29フレーム目のどれかを選択してみましょう。「ボール」が1フレーム目と30フレーム目の「ボール」の間に移動をしているはずです。




↑をクリックして、キーボードの「5」を押すとスタートします。
半角英数入力にしておいて下さい。

2- 4- 4. トゥイーンの編集

モーショントゥイーンでは、位置、サイズ、色、透明度などが変化するものを作ることができます。ここでは、位置とサイズと透明度を変化させ、ボールが遠くへ行く様子をアニメーションで表してみたいと思います。30フレーム目の「ボール」を選択し、プロパティウィンドウ(パネル)でサイズと透明度(アルファ)を編集します。
モーショントゥイーンでは、回転も表せます。「BALL」レイヤーの1~29フレームのどれかを選択して下さい。するとプロパティウィンドウ(パネル)に回転を設定する欄があるはずです。回転方向と回転数(トゥイーン内での回転の回数)を指定して下さい。


トゥイーンのプロパティ。回転方向や回転数などを設定する。


グラフィックインスタンスのプロパティ。右のメニューで明度や着色、アルファなどを設定する。左でサイズ、位置などを設定する。

2- 4- 5. アニメーションの制御ボタン

ボタンによってアニメーションを制御できるようにします。
Flashは再生されると特に指定がない限り、1フレームから順にフレームを進んでいきます。コンテンツ内でスタートボタンを設定する際にまずやるべきことは、フレームが進むのを「止める」ことです。そこで、「ACTION」レイヤーの1フレーム目のアクションウィンドウに「stop();」と書いておきます。




 次にボタンでアニメーションが始まるようにします。「ボタン」オブジェクトを選択し、アクションウィンドウを開きます。そこに

on(keyPress "5") {
gotoAndPlay(2);
}


と記述して下さい。on(イベント){処理}で、指定されたイベントがおこったとき { } 内の処理をするという意味です。ここでは、携帯電話の「5」キーが押されたら、2フレームへ行き再生、の意味です。

2- 4- 6. ムービープレビュー

プレビューしてみましょう。キーを操作する部分が出てきましたので、コンテンツタイプとテストデバイスによってはエラーが出る場合があります。ムービープレビューで上手く動いても、実機(実際の携帯電話)で思うように動かない場合もあります。