Flash Text の補足資料
目次
１．１ Lesson１の準備（普通のお絵描きツールと少し違うので）
１．２ Lesson1の前に（タイムラインとフレーム操作）
１．３ パラパラマンガ（フレーム操作の応用）
２．１ Lesson２の後で
３． 補足なし
４．１ ライブラリとインスタンス
４．２ ムービークリップとボタン
４．３ アクションスクリプト
４．４ アクションスクリプトを書く場所
５． 補足なし
６． 補足なし
７．１ ムービークリップの補足
＝＝＝＝
１．１ Lesson1 の準備（最初につまづかないために）
http://tail.s68.xrea.com/html/text/kouza/
お絵かきツール基礎
面が勝手にくっつくとか、線と面が分離するとか、線が消えるとか
最初に苦労する線と面の謎
Flashを使ってみた人が最初につまづくのがこれです。
ちょっとやってみましょう。
まず矩形ツールを選んで
ドラッグして四角を描きます。ここまでは普通のお絵かきツールとほぼ同じです。
ところが
選択ツールを使って移動させようとすると
あれ？線が移動しないで緑の塗りの部分だけ移動しちゃった・・・
さらに選択を解除したり移動したりしてると、あらら、線が消えちゃった。
線と面はまったく別物
実はFlashでは線と面が別々の物として扱われ、必ず１つのものじゃないんです。
矩形ツールは言ってみれば線と面の四角を同時に１個ずつ描いてくれるツールですね。
イラストレーターとかだと１つの図形に面と線の要素がありますが Flashだとそれぞれ独立しています。
線を取っちゃうこともできる
ただし、それだけだと操作も面倒くさいので図形の中でダブルクリックすると 
線と面をいっぺんに選択できて
移動することができます。
描画のルール
このように、線と面が分離する他にFlashには独特の仕様があります。
線は角で１本１本に分離する
こういう図形を
一度クリックして移動させると線が１本だけ取れる
ダブルクリックすると全体選択になり、移動するのも全体になる
面は他の図形に重なった場合、属性が違えば切り抜き、属性が同じならば結合する
２つの色の違う面を重ねて
一度選択を解除する
そしてどかすと、下の面が切り抜かれている。
穴の開いた図形はこの特性を利用して作ったりする。
同じ属性（色や透明度が同じ）な場合は切り抜かずに２つの面がくっつく。
線は他の図形に重なった場合、その図形を分離させる
図形に対して線を引くと
その部分で分離させることができます。（右はその後、線を消したもの）
これらは編集上なかなか重要な操作になります。
上手く利用するようにしましょう。
One Point ： 結合、分離を防ぐには
とはいっても、結合したくなかったり、分離させたくない時があります。 そういう時はレイヤーを分けてしまうか、グループ化をします。
レイヤー分けの方がお勧めですが、Flash5ではレイヤーフォルダが無いので（レイヤーが増えすぎると面倒）
シンボル化してからレイヤー分けするなどの工夫が必要かもしれないですね。
グループ化はCtrl+Gで選択中のものをシンボル化に似た状態にします。（あくまで似た状態なのでトゥイーンの設定とかはできません）
逆にこのグループを分解するにはCtrl+Bです。
１． ２ Lesson1 の前に（タイムラインとフレーム操作）
タイムラインまとめ （フレームとレイヤーの操作方法）
意外とめんどくさいフレーム操作
タイムラインはFlashには重要な要素ですが、他のソフトに無いので分かりにくいかと思います。特にFlash5等はタイムラインに若干のバグがあったりして、落ちついて操作しないとぐちゃぐちゃになることも。ちなみに表示がおかしくなるなどのバグが起こったら、速やかに別命保存してflashを起動しなおしましょう。
説明と画面はMacromedia Flash MX 2004 Professionalのものです。
フレームマークの説明
タイムラインのフレームの説明。
キーフレーム
何かの絵が設定されているフレームです。コマアニメだと大量に見ることになるマークで、トゥイーンを使っていても先頭は必ずキーフレームになります。
ちなみにFlashのタイムラインでは、灰色が絵があること、白色が何も表示されないことを意味します。
空白キーフレーム
何も絵が設定されていない、ということが設定されているフレームになります。空白フレームの先頭は必ず空白キーフレームになります。
通常フレーム
何か絵の表示される、特に変哲の無いフレームです。四角いマークはそのフレームの状態が終了する最後のフレームにつきます。このフレームでは直前のキーフレームと同じ絵が表示されることになります。
空白フレーム
何の絵も表示されないフレームです。キーフレームの以後は通常このフレームになります。最後のフレームだけに四角マークがつきます。
モーショントゥイーン
とあるキーフレームから、別のキーフレームまでモーショントゥイーンを設定すると、その間のフレームにはこのような矢印がつきます。ちなみにこれらのフレームの中でキーフレームを設定すると、動作の中間状態のキーフレームを作ることができます。
シェイプトゥイーン
モーショントゥイーンと違い、こちらはシェイプトゥイーンを設定した時に表示されます（色が違う）。シェイプトゥイーンは移動や回転等の情報ではなく、丸を四角にするなど、絵そのものを変形させるトゥイーンです。
One Point ： シェイプトゥイーンの設定の仕方
右クリックからトゥイーンの追加を選ぶと、タイムラインにはモーショントゥイーンが作成されてしまいます。シェイプトゥイーンを設定するには、そのフレームを選択した後プロパティウインドウのトゥイーンの項目からシェイプを選びましょう。モーショントゥイーンをこの方法で設定することもできます。
設定不能トゥイーン
トゥイーンを設定したけどFlashが動かすことができないトゥイーンの表示です。動かせない原因は、例えば片方のキーフレームが空白キーフレームだったり同じシンボルが無かったりするとか。
アクションスクリプトフレーム
Action Scriptが記述されているフレームです。基本的にAction Scriptはキーフレームか空白キーフレームに記述することができるのですが、殆どの場合空白キーフレームに設定することになります。
Memo ： どうしてAction Scriptは空白キーフレームに？
Action Scriptはキーフレームに設定することができますが、普通のキーフレームに設定することはお勧めできません。というのもキーフレームは移動させることや削除することが多く、その時にAction Scriptも移動したり消してしまうのでミスの元になります。 Action
Scriptはレイヤーを個別に用意して、絵の移動や削除に影響されないようにするのが基本になります。
レイヤーの基本操作
Flashのレイヤーは基本的に他の動画ソフトと同じ仕組みです。よく使う動作はダブルクリックで名前変更、ドラッグで並び順の移動くらいですが他にアイコンの意味なども説明しておきます。
レイヤーの状態
レイヤーの右側にあるマークはレイヤーの状態を示します。
一番左のペンのマークは現在作業中のレイヤーを示します。
２番目の「・」というマークは表示状態のマークで、ここをクリックするとそのレイヤーは非表示になります。ほかのレイヤーを編集している時にそのレイヤーが邪魔になって見えない時に利用します
One Point ： 非表示にしてもパブリッシュはされる
この非表示ボタンで見えなくなるのはあくまで編集状態です。アニメーションをパブリッシュした時はしっかり見えるので気をつけてください。パブリッシュした時に見えなくするためには、下で説明するガイドレイヤー機能を使います。
３番目はロックのマークです。このマークをクリックすると表示はされたまま、編集ができなくなります。これも同じくそのレイヤーが邪魔な時に使ってください。
フレームの基本操作
フレームの操作はちょっと特殊なので最初は戸惑うかもしれません。
まず、フレームの移動ですが、いきなりドラッグしようとすると範囲選択になってしまうため、一度そのフレームをクリック等して選択状態にしてからドラッグします。
また、逆に例えば全体が選択状態の時に一部を範囲選択しようとしてドラッグすると、フレームを移動させてしまうので注意してください。
そのほか、ダブルクリックするとキーフレームから次のキーフレーム直前までいっぺんに選択されることも覚えておくといいかも。
One Point ： 自動で補間されるフレーム
フレームの移動やキーフレームの設定の時は、自動でフレームが補間されることがあります。
例えばキーフレームを移動しようとすると
このように、キーフレームの左側と、元キーフレームがあった場所へフレームが補間されます。たまに思わぬキーフレームが補間されることもあるので注意してください。
１． ３ パラパラマンガ（フレーム操作の応用）
■パラパラ漫画 （http://www.info-study.net/flash/f12.htm）
|
アニメーションの基本はパラパラ漫画です。
|
||||||||||||||||||||||||||||||||||
|
フレ ーム が連 続し てい て落 ち着 きが ない。 |
|
|||||||||||||||||||||||||||||||||
|
|
このようにフレームは主にタイムライン、すなわち時間の流れを制御する目的で使われます。 |
|||||||||||||||||||||||||||||||||
（補足）シンボルを使ったパラパラマンガ
上の例は、フレームに画像を描き込んでいきましたが、シンボル化した画像を使ったパラパラマンガもできます。
この場合（画像を右に移動させるパラパラマンガ）：
Step1:絵を描いてシンボル化する。これでドラッグが可能になる。
Step2:タイムラインの２フレーム目をマウスで右クリックし、「キーフレームの挿入」を選ぶ。
（２フレーム目に●が表示され、赤い縦線が２フレーム目に移動。この時ステージに表示されている画像は２フレーム目のものです。１フレーム目の画像が２フェテーム目にそのままコピーされた）
Step3:２フレーム目の画像を少し移動。
これを繰り返す、と完成です。
Step4:プレビューして下さい。
２．１ Ｌｅｓｓｏｎ２の後で
Lesson2では、図形をグラフィックのシンボルにしてライブラリに格納し、ライブラリに入れたグラフィックシンボルをＷクリックして編集している。Ｗクリックすると、グラフィックシンボルのタイムラインが現れるので、そこに２つの図形を描いている。
実行すると、シンボル化した図形ではなく、子階層で描いた図形が表示される。
普通、Flashでこのようなことをやるには最初に作る図形をグラフィックでシンボル化するのではなく、ムービークリップでシンボル化するように、参考書では書かれている。今回のグラフィックシンボルのタイムラインをいじる方法は簡単なやり方であるが、（私の試した限りでは）孫階層の図形がシーン１で実行した時表示されなかった。
４．１ ライブラリとインスタンス
シンボル化した図形は、ライブラリ（ウインドウの右の方にある小ウインドウ）に登録される。ライブラリに登録される３種類のシンボル。
（１） ムービークリップシンボル：シーンまたは他のムービークリップ内において、独立したムービーになる。
（２） ボタンシンボル：シーンまたはムービークリップ内において、マウスに反応するボタンとしての役割。
（３） グラフィックシンボル：シーンまたは他のシンボル内で、図形などを使いまわすための原型。
ライブラリに登録されているものは、型紙（Javaで言えばクラス）であり、シーンで使うためにはシーン上にライブラリからドラッグしてくる。シーン上にドラッグしてきて置かれたものをインスタンスと言う。Lesson3まではグラフィックシンボルを使っていたので、試しに何か図形をシンボル化し（ライブラリ入るので）、ライブラリからドラッグしてシーンに３つ４つ置いてみよう。
インスタンスは、プロパティを持っていてこれを書き換えると色、大きさ、などが変わる。
（注：最初シーンに絵を描いて、それをシンボル化すると、シーン上の絵は自動的にインスタンスになる。要するに、シーン上のシンボルは全てインスタンス）
４．２ ムービークリップとボタン
Lesson3までは、シンボル化にグラフィックを用いていた。これから、残りの２つ、ムービークリップとボタンによるシンボル化が出てくる。
(1) ムービークリップ：自分で動くもの（独自のタイムラインを持つ）。私のイメージは、舞台の上で演技をする（ラジコン）小型電動台車に乗った役者。台車上での動きがムービークリップのタイムラインでの動き。電動台車がシーン上の動き。
(2) ボタン：ボタンのpush, releaseなどでアニメの動きを制御する。
(3) グラフィック：電動台車の上での動きは、ない役者。メインのタイムライン上で動きはするが、基本的には静止画って感じ。
これらは、いずれもモーショントゥイーンで扱えるが、インスタンスに名前を付けられるのは(1)(2)のみ。
４．３ アクションスクリプト
Lesson3までは図形をタイムラインで動かしてきた。アクションスクリプトは図形をプログラムで動かす記述である。アクションスクリプトを記述できるのは、ムービークリップとボタン。
(1) ムービークリップの場合：ムービークリップの台車や台車上の動きをアクションスクリプトで記述。
(2) ボタンの場合：ボタンを押したり放したりした時のアニメの動き制御をアクションスクリプトで記述。
ボタンでムービークリップの動きを止めたり再開したりするためには、ムービークリップオブジェクトの名前を付ける必要があり、この名をインスタンス名と言う。
４．４ アクションスクリプトを書く場所
アクションスクリプトは次の３か所に書けます。
（１） ムービークリップのインスタンス（クリップアクション）
（２） ムービークリップのキーフレーム（フレームアクション）
（３） ボタンのインスタンス（ボタンアクション）
Lesson4ではクリップアクション、Lesson５ではボタンアクションを使います。
Flashはアクションスクリプトを色々な所に書けるため、適当に書いていくと、現在どのアクションが動作しているのか分からなくねることがあるので、注意。
課題１：ボールを円運動させてみよう。
課題２：ボールを落下させ、地面で弾みながら静止するまでのアクションスクリプトを書こう。
シーン１で画像をムービークリップにした場合、その画像は電動台車の形で、その上に乗っている役者も電動台車と同じ形だと思ってください。
シーン上に表示されるのは役者です。 ムービークリップを編集しようとすると、役者が表示されます。役者は、独自のタイムラインを持っているので、台車と別の形にしても問題ありませんし、タイムライン上で色々な形になっても問題ありません。
また、役者にボタンの役割を割り当ててもかまいません。Lesson７は役者にボタン役を割り当てています。
課題：Lesso7で作ったボールは鉄製、Lesson6の最初の方に作ったビリヤードのような動きをするボールを風船と考え、風船は鉄のボールに当たると跳ね返るとして。２つのボールがぶつかって、風船が跳ね飛ばされる様子をシミュレートしよう。ネット上を検索し、２つのボールの衝突を検出して跳ね返る方法を探しましょう。