スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

トゥイーンを使う

アイテムを動かしてみましょう。目標は下のFLASHです。
クリックしてみてください。

★が左上から右下に動いていると思います。

今回はこの動きをやってみます。(CLICKボタンは除く)

手順は以下の通りです。

*サイズは240x240でやっています。
  1. シンボルリストの下で右クリック→アイテムを追加→テキスト追加。

  2. 右下の初期表示テキストに"★"と入力。

  3. 左上のフォント情報でサイズを"48"と入力。(フォント名、文字色は自由。)

  4. OKを押す。

    これで、シンボルリストにアイテム[★]ができました。
    これをレイヤーに追加します。


  5. アイテム[★]の上で右クリック→レイヤーに追加(又はドラッグ)

    これでは★は止まったままなので、動かすように設定します。


  6. ★の1フレーム目を右クリック→コピー。


  7. 同じ横軸の20フレーム目で右クリック→貼り付け。

  8. 1フレーム目の位置を右下で x=-48,y=-48 に設定。

  9. 20フレーム目の位置を同様に x=240,y=240 に設定。


  10. 1フレーム目で右下の"トゥイーン"にチェック。


    レイヤー部分はこんな感じ。


これで完成です。

右上にある虫眼鏡ボタンを押してみましょう。

★が左上から右下に移動したでしょうか?

移動していたら成功です^^


■今回の要点
・シンボルリストで文字(★)を作り、レイヤーに移動する。
・移動の開始地点と終了地点の位置、フレームを決める。
・移動開始側は"トゥイーン"にチェックを入れる。


もっと複雑な動きがしたい方は、
・中央の移動点編集にチェックを入れた状態で移動ラインを右クリック→移動点追加で曲線を描く。
・右下で速度変化をつける。
・右下のカラーで色や透明度を変える。
などなど。

色々できますので各自試してみてね☆
(分からなかったらコメントお願いします。)
スポンサーサイト

スプライトを使う

今回は"スプライト"を利用してアイテムを動かしてみましょう。目標は下のFLASHです。
クリックしてみてください。

前回に加え、★が回転して動いていると思います。

今回はこの動きをやってみます。

手順は以下の通りです。

*サイズは240x240でやっています。
*前回の.csfファイルを用います。
  1. シンボルリスト下部で右クリック→アイテムを追加→スプライト追加。

  2. サイズを 幅:48,高さ:48 に設定(★のサイズと同じ)し、OKを押す。
    今回はスプライト名を"★_回転"とします。

  3. スプライトをクリックすると、上部に編集ボタンがあるのでクリック。


  4. すると、右のレイヤー画面がスプライト(★_回転)になります。
    ここの使用方法は、通常のレイヤー画面と変わりません。

  5. アイテム[★]をレイヤーに移動。


  6. ここから、細かい設定を行います。

  7. [★]の1フレーム目で位置を、x=24,y=24 , 制御点(X)=24,制御点(Y)=24 に設定。


  8. ちなみに"X:"をクリックすると制御点が画面の中心に、"制御点(X)"をクリックすると制御点がアイテムの中心に設定されます。意外と使います。

    制御点はアイテムの中心となる点です。★のサイズは48x48なので、おおよそ(24,24)が中心となります。

  9. ★の1フレーム目をコピーし、14フレーム目に貼り付ける。

  10. 右下で"角度"を 336 (°)と設定。(*追記参照)


  11. 1フレーム目に戻り、トゥイーンにチェックを入れる。


  12. まずここまででプレビューを見てみましょう。

    ★が回転していますか?
    (制御点をおおよそにとったので、綺麗な回転になっていないかもしれませんが、そこは妥協。)

    では、メインのレイヤー画面に戻りましょう。

  13. レイヤー上部の ★_回転 (ID:~) をダブルクリック。


  14. ここからは、前回のアイテム[★]がレイヤーにあると仮定して、時間短縮な方法で説明します。
    無い方は、アイテムを動かしてみよう-トゥイーン-の 5.~10. を参照してください。(下の方法も試してくださいね^^)

  15. 前回に作ったレイヤーにある[★]を右クリック→プロパティ(又はダブルクリック)。

  16. 参照シンボルを"スプライト|★_回転"にし、OKをクリック。


  17. すると、テキストアイテム[★]がスプライト[★_回転]に置き換わります。

これで完成です。

虫眼鏡ボタンで早速プレビュー。

回転した★が左上から右下へ移動していたら成功です^^


■今回の要点
・複数の動きを行いたいときは"スプライト"を使う。
制御点はアイテムの中心になる。
・スプライトからメインに戻るには、 スプライト名 (ID:~) をダブルクリック。
・プロパティ→参照シンボルでアイテムが置き換えられる。

こんな感じです。

スプライトはとってもよく使うので、動きを混ぜたいときはぜひ使ってください^^
(今回のもテキストアイテム[★]の角度を変えれば回転しますが)

スプライトとフレーム数

スプライトとフレーム数の関係です。

前回ので分かったかもしれませんが、
  • FLASHは停止スクリプト( stop(); )を使わない限りリピートする。
    これを利用して★を回転させました。

  • スプライトの再生フレームは、それが入るスプライト・メインのフレーム数に依る。
    ★_回転は15フレーム、メインの移動は20フレームだったので、★は1回と5/20(1/4)回転したことになります。

では、"スプライトに10フレームのアニメーションを入れ、これを3つ作り、10フレーム目から5フレーム間隔で再生し止める"にはどうすればよいでしょうか。
こんな感じの。


難しくはないのですが、この場合、
スプライトの注意01
ではなく、
スプライトの注意02
としなくてはいけません。

最初の方では、例えばスプライト1は11フレームから再生開始ですが最初1フレーム分しか再生されません。
しかも、21フレーム目で全再生が終了ですが、ループするので1フレームからリピートしてしまいます。

それらを修正したのが2つ目で、これならば各々10フレーム再生して消え、31フレーム目で stop(); により停止してくれます。

もし、リピートするなら stop(); を消せば大丈夫です。(gotoAndPlay();も可。)


もう1つ。

メインの1フレーム目のみにスプライトAを置いたとします。(他のフレームは何もなし。)

この場合、スプライトAが再生され続けます。

これは、
"ずっとメインの1フレーム目をリピートする→スプライトAにずっとフレームがある"
ためです。


こう言葉にすると難しいのですが、やっているうちに慣れると思います。

プロフィール

クロワッサン@

Author:クロワッサン@
FLASHへの質問はコメントにて。

↓携帯サイトはコチラ

QRコード
*FLASHと画像で萌えサイト

カテゴリ

スポンサードリンク

検索フォーム

月別アーカイブ

最新記事

最新コメント

Twitter

Twitter < > Reload

Copyright © クロワッサン@
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。