FLASHのお勉強　ーモーショントウイーンー

(１)直線運動

　ＦＬＡＳＨの最大の魅力と言えば、写真やその他の画像がスクリーンの右や左に移動しながら現れたり、消えたりと言う、いわゆるアニメーションにあると言えよう。　ＤＲＡＷソフトとしても特徴のある面を持っていて、それなりに興味があるが、その方は他のサイトを参照願うことにして、ＦＬＡＳＨを志す者の最大の関心事モーショントゥイーンをお勉強の１にしたい。

　ステージ（キャンバスのこと）に描いた円形のボールが、左から右に移動する。　これだけがお勉強 １のテーマである。　しかし、これだけのことで多くの人が悩まされているのである。　うまくいったと思えば、次はうまくいかない。　なぜだ？　本屋で立ち読みしてみると、本によってさまざまな手法が書いてある。　シンボルだインスタンスだそれなんだ。　頭の中が整理つかないまま、ごまかしごまかし何とか使ってみる。　そのうち、アクションスクリプトなるものを使わないとさまにならないことが出てきて、これまた難解を極める。　もういやだ、やめた。　これが多くの人のたどる道ではなかろうか。　ちょっと言い過ぎかもしれないが、心当たりのある人は多いはずである。　

　さて、ここで、ボールを左から右に移動させる手順を２つ紹介する。　なぜ２つを紹介するかと言えば、この２つにはその結果に違いが生じるからである(ボールの動きは同じ)。　説明がくどくなるかもしれないが、ここが我慢のしどころと思っていただきたい。　

　手順１：トゥイーンをとにかく作る（ほとんど失敗しない作成方法)　

　（１）ファイルを新規作成し、キャンバスに円形のイメージを描く
　（２）タイムラインのフレーム１がキーフレームに変わり黒丸となる。
　（３）フレーム１で右クリックして、｢モーショントゥイーンを作成」をクリックする
　（４）適当なフレームを選び、右クリックしで「キーフレームの挿入｣をクリックする
　（５）実線の矢印が１フレーム目から、選んだフレームまで作成される
　（６）円形イメージを選択ドラッグして、キャンバスの右に移動させる

　この図のように、実線の矢印が出来れば成功であり、点線の直線が出来たら失敗である。　点線の出来るケースは後述する。

　さて、混乱するかも知れないが、（４）でキーフレームでなく、「フレームを挿入」を選ぶとまず点線が作成されるが、（６）を実行するとフレームが自動的にキーフレームに変わり、それにともなって点線が実線矢印に変わる。　結果として、同じ結果が得られる。　実質的にどちらを使っても差はない。　しかし、このケースでは、最初にキーフレームを設定していないので、（６）を実行する前に点線部分のどこかの位置を選択しておくと、そのフレームがキーフレームに変わりそこまでのトウイーンが作成される（残りは点線のまま)。　逆に、複数のイメージにトウイーンを付ける場合に表示を終わらせるタイミングを合わせるときなどにとりあえず、最後までフレームを挿入しておいて、途中までトウイーンを付ける場合などに使う。

　手順２：あらかじめシンボルを作る　（失敗する可能性がやや多い)

　次は、Flashのヘルプにも記載されているオーソドックスな方法である。

　（１）ファイルを新規作成、キャンバスに円形のイメージを描く
　（２）タイムラインのフレーム１がキーフレームに変わり黒丸となる。
　（３）円形イメージを選択し、右クリックメニューから「シンボルに変換」する(ここではムービークリップ、グラフィックどちらでも可）
　（４）適当なフレームを選び、右クリックで「キーフレームの挿入」をクリックする
　（５）円形イメージをドラッグして、キャンバスの右に移動させる
　（６）タイムラインの途中（どこでもよい）をクリックして選択し、右クリックで「モーショントウイーンの作成」をクリック

　成功すれば実線矢印が、失敗すれば点線直線が出来る。
　失敗例を以下に掲げると
　　・シンボルに変換するのを忘れた（ステップ（３））
　　・シンボルに変換するときにイメージを選択するが、しっかりダブルクリックしないと中側だけが選択され、外線が選択もれになる。
　　　（手順１の場合は、ステップ（３）で１フレーム目をクリックしたときに、自動的に全イメージが選択されるのでこの失敗はない）
　　・上記手順の順序が入れ替わっている
　　・同じレイヤーにイメージを追加して描いてしまった
　などのケースがあり、失敗すると原因が分からずいらいらがつのることになる。

　さて、手順１と手順２の成功した場合の２５フレーム目を見ていただくと、違いが生じていることに気づく。　手順２では、フレーム２５の両側に縦線があり、２５フレーム目がトウイーンから独立している（単なるキーフレームでトゥイーンには含まれない）。
　この両者にどのような違いがあるのだろうか。　ここでのボールの移動アクションにおいては全く違いは生じない。　しかし、タイムラインの２５フレーム以降にモーショントウイーンを追加作成したときに違いが生じる。　すなわち、手順１の場合は、２５フレーム以降もトウイーン状態が連続していて、キーフレームを追加するごとに連続してトウイーンが作成されるのに対し、手順２の場合は、２５フレーム以降にキーフレームを挿入してもそこまでのトウイーンが作成されないので、違った位置（場所)から次のモーショントウイーンを作成することが出来る。

　この説明を読むにも相当疲れると思うが、もうひとつ付け加えなければならないことがある。　手順１では、シンボルに変換する操作を行っていないが、「モーショントウイーンの作成」を実行した際に自動的にシンボル化されているのである。　タイムライン右上のシンボルの編集アイコンをクリックするとトウイーン１なるシンボルが作成されているのが分かる。　ちなみに、手順２の操作でモーショントウイーンを作成したときは、シンボル１というシンボルが作成される。　この両者で作成されるシンボルに実際上の違いはないように思えるが、　シンボルについてはいずれ解説を加えることにしたい。

　以上で、お勉強の１は終了である。　たかがボールを動かすだけのことで、最初は失敗することもあるんだと言うことを述べたが、失敗することで身に付くことも多い。　くどくど述べたが、ここを通過することがまず第１段階なのである。

＜本ページに使った用語の説明＞