このFlash講座1234は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです

FLASH講座 ーモーショントウイーンー
(1)直線運動

 FLASHの最大の魅力と言えば、写真やその他の画像がスクリーンの右や左に移動しながら現れたり、消えたりと言う、いわゆるアニメーションにあると言えます。 DRAWソフトとしても特徴のある面を持っており、それなりに興味があります。 しかしそちらは他のサイトを参照願うことにして、FLASHを志す方の最大の関心事モーショントゥイーンを講座の最初にします。

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

<本ページに使った用語の説明>  

タイムライン 表示物(イメージ、テキストなどのオブジェクト)の動きや属性(色や形など)を時間軸に沿って制御するために設けられたもので、フレーム(コマ)で構成されている。
フレーム タイムラインを構成する要素の一つで、映画フィルムの1コマ1コマに該当する。フレーム数が増えれば増えるほどムービーの継続時間が長くなる。
キーフレーム タイムラインの中でキーとなる変化が定義されているフレームのことで、言い換えると、そのフレームにきたときに、オブジェクトがどこにありどんな風になっているかを定義してあるフレームを言う。 逆に言うと、キーフレームでなければ、これらの動きを設定できない。
モーショントゥイーン タイムラインにモーションの開始点と終了点のキーフレームを作成し、それぞれに移動、回転、伸縮、透明度、明度、カラーなどを設定すると、中間にあるフレームにその動きなどが連続してスムースに変化するようにFlashがモーションを付けてくれることを言う。 betweenのtweenから来ているらしい。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                       (by Hiraoka)
HOME   Flash講座総リスト         モーショントゥイーン(2)