Lesson 0 Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5  

  Lesson 2 最終更新 2001.7.30
 2−1 図形を動かす(T)・・・フレーム

201

FLASHを起動し、ツールバーの左から2番目「フォルダアイコン(開く)」をクリック。
「開く」ダイヤログボックスで「FlashFiles」フォルダの「test01.fla」ファイルをクリックして、「開く」で開いてください。
”Lesson1”では、3つのレイヤー「背景」「ボール」「タイトル」を使って、それぞれに図形と文字を描きました。
図03:Lesson1終了後の画面例参照
※もし、Lesson1で上手くいかなかった方やLesson2からはじめたい方は、「図3画面例」の下欄でここまでの「test01.fla」ファイルをダウンロードしてください。
ここでは「ボール」と「タイトル文字」をアニメーションとして動かすことを学びます。

202

画像を動かすということは、時間の経過とともに図形の位置や大きさ等を変化させるということです。
この時間軸に相当するのが「タイムライン」です。
「タイムライン」の中でフレームが左から右へ移動し時間が経過していきます。
映写フィルムが「タイムライン」、フィルムのひとコマひとコマに相当するのが「フレーム」とお考えください。
そして、各々のコマの状態は「再生ヘッド」を移動することで、下のステージに表示されます。
※ステージに表示されているのは、「再生ヘッド」が指し示すフレームの、すべてのレイヤーを上から見た姿です。
したがって、映写フィルムが何枚も重ねられた状態で、コマ移動しているというイメージです。

画像を動かす前に、「フレーム」について、ご説明しておきます(^^)
横の時間軸に展開する「タイムライン」には、「キーフレーム」と呼ばれるものと通常の「フレーム」と呼ばれるものがあります。

203

キーフレーム」とは、図形などを書き込んだり、書かなかったりといった何らかの仕事をすることができるフレームのことです。
各レイヤーの1フレームをみると「●」がついています。
図形などが入っているキーフレームには 「●」がつきます。
何も入っていないときは、何のしるしもない「白抜き」になり、これを特に「空白キーフレーム」と呼びます。
レイヤーを作成したときの最初の1フレームはすべてこの「空白キーフレーム」です。
そこに”Lesson1”で図形や文字を入れたので、現在は「●」の「キーフレーム」になっています。
「キーフレーム」を新たに作成するときは、作成したいフレームを右クリックして、ショートカットメニューの「キーフレームの挿入」又は「空白キーフレームの挿入」をクリックします。
実際にやってみましょう!
「タイトル」レイヤーの10フレームを右クリック、「空白キーフレームの挿入」をクリック。
「ボール」レイヤーの10フレームを右クリック、「キーフレームの挿入」をクリック。
上の「再生ヘッド」も10フレームに移動していますので、下の「ステージ」にある画像は、10フレームの状態を示しています。
「空白キーフレーム」を入れた「タイトル」レイヤーでは、タイトル文字が消えているはずです。
「キーフレーム」を入れた「ボール」レイヤーでは、そのまま1フレームのボールの図形が複写されて見えています。
「キーフレーム」の右方向に新たに「キーフレームの挿入」を行うと、”左のキーフレームの図形等がそのまま複写されて入る”ということは重要ですので、覚えておいてください。
また、一端新しい「キーフレーム」や「空白キーフレーム」を作成すると、そこに単独で新たな図形を書き入れたり、複写された図形等を変形したり位置を移動したりすることができます。

204

「ボール」レイヤーのみ「ロックを解除(”128後段”)」し、「ボール」レイヤー名をクリックして「書き込み対象レイヤー」にしてください。
「ボール」レイヤーの10フレームをクリックすると、ボールの図形が選択状態(網が掛った状態)になります。
(※選択状態になっていないときは、「(黒)矢印ツール」で図形をクリックして選択してください。)
選択されたボールの図形を上方向にドラッグして、位置を移動させてください。
目分量でなく、真直ぐ上に移動させたいときは、キーボードの「上向き矢印キー」を数回押すか、「情報パネル(”119”)」を使って「Yの値」を小さくしてください。
※「Shiftキー」を押しながらキーボードの「矢印キー」を押すと1回の動きの幅が大きくなります。
ボールの位置が移動できれば、フレーム番号の「1の数字」をクリックして、「再生ヘッド」を1フレームに戻し、それをドラッグして右に10フレームまで移動させてみてください。
10フレームにきたとき、ステージのボールが上に跳ねあがったでしょう(*^^*)
これがアニメーションの第一歩です(笑)

205

キーフレームとキーフレームの間の「網目」の部分は何でしょうか?
これが、通常の「フレーム」と呼ばれるものです。
「キーフレーム」のように、ここに図形を描いたり、複写された図形を変形したり位置を移動したりはできません。
意味的には”左に同じ”ということで、役割としては”時間稼ぎ”です。
ここでは、2〜9フレームが左の「1フレームのキーフレーム」に”同じ(一体である)”という意味。
2〜9フレームのひとつひとつに実際に図形等が描かれているのではなく、「1フレームのキーフレーム」の内容を引き続き表示させているだけです。

ひとつひとつのフレームの表示時間は一定で決まっています。
キーフレームとキーフレームの間が大きいほど画面の変化する速度が遅くなり、狭ければ速くなります。
速度調整のために、普通の「フレーム」を増やしたり減らしたりするには、キーフレームとキーフレームの間のどの「フレーム」でもいいですから、マウスをおいて(カーソルが「手」の形になります)右クリック、ショートカットメニューの「フレームの挿入」又は「フレームの削除」をクリックします。
増やしたり減らしたりする数が多くて面倒なときは、「フレーム」の末尾にある「□」をクリックして選択反転させ、キーボードの「F5キー」を押す度に1つづつ増えます。減らすときは「Shiftキー」を押しながら「F5キー」を押します。
※フレームの末尾の「□」マークを左右にドラッグしても、フレームの数を増減させることができます。

通常の「フレーム」は、「網目」が掛ったものだけではありません!
「タイトル」レイヤーの20フレームを右クリック、ショートカットメニューの「空白キーフレーム」をクリックしてください。
11フレームから19フレームが白抜きのフレームになったはずです。
10フレームが「空白キーフレーム」なので、”左に同じ”すなわち「空白」の時間稼ぎ「フレーム」ができあがったということです。
「網目」との違いは中に図形等があるかないかだけのことです。

206

次は「背景」レイヤーに注目してください。
「再生ヘッド」で各フレームの状態を時間経過を追いながら確認しましたが、2フレーム以降から四角のバック図形が消えて無くなりましたね!
お気付きと思いますが、2フレーム以降には「フレーム」がありません。
そのため、突然「バックの四角」が消えてしまっていました。
”203
”で行ったように10フレームを右クリックして「キーフレームの挿入」でも解決できますが、 通常の「フレーム」だけを増やすこともできます。
「背景」レイヤーの10フレームを右クリック、 「フレームの挿入」をクリックすると、通常の「フレーム」だけが10フレームまで
増やされます。

207

「キーフレームの挿入」と「フレームの挿入」の違いを整理しますと…
「キーフレームの挿入」の場合は、直近左のキーフレームの内容をそのまま複写して、複写された内容をそのキーフレームでさらに編集可能な状態にします。
新しくできたキーフレームの内容を変化させても、元のキーフレームの内容は変化しません。
つまり、新しいキーフレーム以降は、左にあるすべてのフレームとは縁が切れます
「フレームの挿入」の場合は、ただ単にそこまでの時間稼ぎフレーム(左に同じ)を増やすだけで、元の内容が複写された訳ではありません。
あくまでも直近左のキーフレームと一体となった状態が継続しています。
したがって、もしそこで変更や編集を行えば、この例でいいますと「1フレーム」のキーフレームの内容が変更されてしまいます。
つまり、左のフレームとの縁が繋がったままフレーム数を増やすということです。

「背景」レイヤーのように、最初から最後まで変化させる必要のない場合にフレームを増やすときは「フレームの挿入」を使ってください。
※「背景」レイヤーの例で「キーフレームの挿入」を使えば何か問題があるのか!?といえば・・・
「キーフレーム」の場合、そこに実態としての図形が入りますので、その分メモリ容量が増えます。
この程度のFLASHムービーならそれほど問題になりませんが、レイヤーが増え、ひとつのフレーム番号にキーフレームが集中すると、読み込みの負荷が大きくなって、ムービー再生の際、動きが一瞬止まったり、ぎこちない動きになったりする原因になります。

スムーズな動きのムービーにするには、可能な限り「キーフレーム」の集中を避けるようにしなければなりません。

208

フレームの説明はこれくらいにして、次のステップに進みます。
今までの練習画面をすべてクリアしてください(^^)
すべてクリアする方法は”Lesson1”でいろいろお示ししましたが、それを実行されても構いません。
もうひとつ!「タイムライン」でこれらを元に戻す方法を記しておきます。

先ほど「フレーム」を増減する方法に触れましたが、それの応用です。
1フレームだけの状態に戻すには・・・
「再生ヘッド」をドラッグして、フレーム「2」の位置に戻すか、又は再生ヘッドの目安としての「2」の位置をクリックして、「再生ヘッド」を2フレームに戻します。
上の方法でフレームを指定すると、個別のレイヤーの”いずれのフレームも選択されない状態”で「再生ヘッド」が移動します。
その状態で「Shiftキー」を押しながら「F5キー」を押していきます。
各レイヤーのフレームが「Shift+F5」を押すたび”同時に削除”されます。
最後に1フレームだけ残る状態にしてください。
この逆(「Shiftキー」なしで「F5キー」だけを押す)をすれば、全体的に「フレーム」が増えていきます。

すべてのレイヤーのフレームを同時に増(F5)減(Shift+F5)させるには、”いずれのフレームも選択されていない状態”ということがポイントです。

 @キーフレーム
 A普通のフレーム
 B空白キーフレーム
 C普通のフレーム(空白)
 D(下地が見えている部分)
  フレームなし


 2−2 図形を動かす(U)・・・シンボルとインスタンス

209

動画をつくる仕組みは、フレームごとに少しずつ異なった図形等を入れるということでした。
そして、異なった図形等を入れるには「キーフレーム」が必要で、その間の時間調整に普通の「フレーム」を増減させるということはご理解いただけたと思います(^^g/~~
アニメGIFの場合も、これと全く同じ原理ですが、これだけでは少し問題があります。
それぞれの異なった図形等は、複写して位置等を変化させたとしても、それぞれはメモリー容量を持った実態のある図形等です。
仮に最初の図形等が1KBであったとして、10個のフレームに「キーフレームを挿入」し、それぞれ内容を変化させると、10KBになります。
これぐらいならまだよいのですが、ここで扱うスライドショーでは写真を沢山使います。
1枚が10〜20KBとしても、10個のキーフレームで、100〜200KBにもなってしまいます。
これでは、読み込むのに時間がかかりすぎて、とても使い物になりませんね(笑)
これを解消するために、FLASHには「シンボル」と「インスタンス」という、便利な機能があります。

210

「シンボル」と「インスタンス」の概念ですが・・・
簡単に言ってしまえば「生身の実態としてのあなた」と「鏡に映った分身のあなた」の関係といえます(笑)
「実態としてのあなた」は一人しかいませんが、「あなたの分身」は、鏡さえ用意すれば、鏡の数だけ存在することができます。
そして、FLASHの表舞台で活躍するのは、「実態としてのあなた」ではなく「質量の無いあなたの分身」です。
「実態としてのあなた」は、いつでも鏡に写せるよう「決められた場所」に座っていていただければよいだけです。

※これを先ほどのアニメGIFの場合でたとえますと、すべての場面で「実態としてのあなた」自身が活躍していることになります(^^)
出番があまり多いと、疲れて動きが鈍くなるのは当然ですね(爆)

FLASHの中で「実態」というのは、”Lesson1”で描いた四角の図形やボールの図形、タイトル文字に相当し、次回”Lesson3”で読み込むことになる写真(JPGファイル)なども含めて、実際にメモリ容量を持つすべてのオブジェクトのことです。

「実態」はそのままでは「ただの実態」です。
「実態」に代わって「分身」に仕事をさせるためには、鏡に写せるよう「決められた場所」に座る必要があります。
「決められた場所」のことを「ライブラリ」といい、”鏡に映れるよう”に「ライブラリ」に座る(登録する)ことを「シンボルに変換」するといいます。
「シンボルに変換された実態」のことを「シンボル」といいます。
「シンボルとなった実態」は、以後表舞台に出ず「ライブラリ」の中でジットしているだけです。
各フレームで活躍するときは、活躍すべき場所に鏡を置き、そこに映った「分身」を利用します。
この「分身」のことを「インスタンス」といいます。
鏡の前にレンズを置けば、「分身」を拡大、縮小させることができます。
鏡の前に色フィルターを置けば、「分身」の色を実際より変化させて映し出すこともできます。
このように鏡に映る分身の姿を変化させることを「インスタンスの修正」といいます。
「インスタンスを修正」しても、変化させたのは「鏡に映る分身」であって「実態」である「シンボル」には何の変化もないことはご想像いただけると思います!

「分身の映った鏡」はどのレイヤーにも、どのフレームにも何枚でも置くことができ、それぞれの「分身」は独立していますので「分身ごとに異なった修正」が可能です。
「実態のあなた」は数十キログラムの体重があっても、鏡のそれはたかだかしれています。
したがって、何度も登場しなければならない動画を作成するときは、必ず実態を「シンボル」にし、分身である「インスタンスを使い廻す」ことを心掛ける必要があります。
これがFLASHの動画が、アニメGIFなどと比べて軽いといわれる所以でもあります。

211

実際に「ボール」でやってみます。
「ボール」レイヤー以外のレイヤーをロック、「ボール」レイヤーの1フレームをクリックしてください。
図形が選択された状態になります。

図形等を「シンボルに変換」するには、選択された状態で、メニューバー挿入→シンボルに変換をクリック。
左図のような「シンボルプロパティ」ダイヤログボックスがあらわれます。
ここで、「名前」は当初は「シンボル1(数字)」のようになっていますが、後々自分で分かるように、これを消して適当な名前を入れてください。
※日本語でもOKです。
ここでは「ボール」としてください。
その下「タイプ」に3種類あります。
「シンボル」には「ムービークリップ」「ボタン」「グラフィック」 がありますが、ここでは1番下の「グラフィック」のラジオボタンをクリックしてください。

※「ボタン」については”Lesson4”、「ムービークリップ」については”Lesson5”で詳しく説明します。



※「ボール図形」という実態を「シンボルに変換」することの意味。
当初は、1フレームに「図形の実態(この時点ではシンボルではない)」が存在していましたが、「シンボルに変換」されたことで「実態」は「ライブラリ」に移動、そこに「ボール」という名前を付けられて「シンボル」として登録されます。
「実態」が「ライブラリ」に移動したのなら、元の1フレームに残された「ボール図形」は何でしょう?
”実態のない”分身「インスタンス」に置き換わります。


212

名前右横の「OK」をクリックすると、「シンボルプロパティ」が消え、左図、左のように、今までの網が掛った状態(塗り)が消え、図形の周囲が「青線」で囲まれ、中央に「+」マークが入ります。
これが「インスタンス(グラフィック)」のしるしです。
中央の「+」はこの図形の中心点を表しています。

※ここで、ステージの中の図形のないところでクリックしてみてください。
「青線枠」「+」マークが消えます。
この状態では、図形が単なる(実態ある)図形なのか、「インスタンス(実態のない分身)」なのか見分けがつきません。
そのようなときは、図形の上でクリックして選択状態にし、その形で見分けるようにしてください。


212
 -1

メニューバーウインドウ→ライブラリをクリックすると、上図の右のような「ライブラリパレット」が出てきます。
そこに、先ほど「シンボルプロパティ」で付けた名前が表示されているはずです。
ここの名前の左のアイコンが「グラフィックシンボル」のしるしです。
※「ライブラリ」には、グラフィックやボタン、ムービークリップなどの「シンボル」のほか、他から読み込んだ画像等も登録されます。
その性格によって「アイコン」の形が異なってきます。
それぞれのアイコンについては、必要なときにご説明しますので、今は「グラフィックシンボル・アイコン」がこれだということだけ覚えておいてください。

「ライブラリ」にある名前の上をクリックすると、その上の「表示窓」に登録した図形等が表示されます。
※登録した当初は最初から表示されています。
実際に名前の上をクリックして表示窓に「ボール」の図形を表示させてください。
ライブラリの表示窓の中にマウスを置いて、そこからステージの任意の場所にドラッグすると、「ボール」の図形がもうひとつできます。
この図形には「青線枠」と「+」マークが付いていますから「インスタンス」です。
これが「シンボル(実態)」から「インスタンス(分身)」を取出す方法です。
※イメージとしては”表示窓が鏡”。そこにライブラリ内の実態の姿が映し出されていて、”姿の映った鏡”をステージに置くという感じです(^^)

213

これから作ろうとするサンプル画像は、ボールが1つですから、あとで挿入したボールを削除してください。
※「ボール(インスタンス)」をクリックして選択、キーボードの「Delキー」を押す。

さていよいよ、これをタイムラインを使って動かしてみましょう。
どこでもいいですが、取り敢えず25フレームで図形を変化させることにします。
「ボール」レイヤーの25フレームを右クリックして、ショートカットメニューの「キーフレームの挿入」をクリック。
25フレームに1フレームと同じもの(「インスタンス」としてのボール図形)が複写されます。
「背景」が消えてしまいますので、「背景」レイヤーの25フレームを右クリック、ここは図形を変化させる必要がないので、ショートカットメニューの「フレームの挿入」をクリック。
次にステージの「ボール」をクリックして選択してください。
「インスタンス(グラフィック)」ですから”2
12”のように「青線枠」「+」がつきます。
「ボール」の上にマウスをおいて、適当に右上の方向へドラッグして位置を移動させてください。
さらに、ツールボックスの一番下「オプション」 の右下「伸縮」をクリックして、ボールの大きさを適当に縮小してください。

※今行った作業の意味は、25フレームにある「インスタンス」の座標位置の修正と、縦横幅の修正です。
値を変化させたのは「分身」であって、「ライブラリ」に登録された「実態」には何の影響もありません。
※試しに「ライブラリ」の表示窓からボール図形をステージにドラッグしてみてください。
新しくできたボールの「インスタンス」は「実態」の大きさのままですね。

※「インスタンスの修正」について、もう少し試してみます(^^g/~~
あとでドラッグしたボールをクリックして選択、メニューバー修正→インスタンスをクリック。
インスタンスパネル」がでてきますので、左から2番目の「効果」タブをクリックして、「効果パネル」にしてください。
初期値は「なし」ですが、右横の「▼」をクリックして、プルダウンメニューから「高度な設定」をクリック。
「R・G・B」のそれぞれの値がありますが、例えば右上の”R+
”の値を”0”以上に設定してみてください。
数値の右横の「▼」を上下にドラッグすると値が変化します。
値の変化と共にステージのボール(インスタンス)の色も変化しますが、「ライブラリ」の表示窓のボール(シンボルの姿を映した鏡)の色はそのままです。

適当に遊べましたら、あとから挿入したボールを削除し、右上の縮小したボールだけを残してください。


 2−3 図形を動かす(V)・・・モーショントゥイーン

214

「再生ヘッド」を1フレームに戻し、「再生ヘッド」を右方向にドラッグして25フレームまで移動させてください。
24フレームまで変化が無く、25フレームにきて急に右上の方向にボールが移動しましたね!
これではあまりにぎこちないので、2〜24フレームもすべて「キーフレーム」にし、少しづつ位置を移動させてやれば、もっとスムーズな動きになるはずです。
”209”の場合と異なり、中身が実体の無い「インスタンス」ですから、メモリ的には問題がありません。
その方法も可能ですが、この場合、あまりにも面倒臭い作業です(爆)
FLASHには、始点のキーフレームと終点のキーフレームにある「インスタンス(分身)」の位置関係等を計算して、少しづつ値が変化するよう中間のフレームに割り当てる機能が備わっています。
それが「モーショントゥイーン」といわれる機能です。

215

キーフレームとキーフレームの間に「モーショントゥイーンを設定」するには、始点のキーフレームをクリックして選択(反転)。
”213”でだした「効果」パネルがそのままでていれば、その右横の「フレーム」タブをクリックして、「フレームパネル」にしてください。
※もし閉じていれば、再度、メニューバー修正→インスタンスで「インスタンスパネル」をだし、そこの「フレーム」タブをクリック。
上から2段目の「トゥイーン」の初期値は「なし」ですから、その右横の「▼」をクリックして、プルダウンメニューの「モーション」をクリック。

左図のような「フレーム」ダイヤログボックスがあらわれると同時に、2〜24フレームにかけて矢印が表示されます。
この矢印が、フレームに「モーショントゥイーン」が設定されているしるしです。
この間が黒く反転している状態は、この間のフレームが選択されているということであり、「フレーム」ダイヤログボックスのそれぞれの項目についてさらに設定可能な状態という意味です。
※通常はこのままの設定で構いません。
ステージ上の画像のないところでクリックすると、フレームの選択が解除されます。

「再生ヘッド」を1〜25フレームにドラッグして動きを確かめてください。
実にスムーズな動きになったでしょう(*^^*)



※通常の「フレーム」は”左に同じ”ということでしたが、フレームに「モーショントゥイーン」が設定されると”左に同じだけれど、インスタンスが持つ位置や大きさ等の「情報値」だけをFLASH内部で自動的に計算して、この間段階的に変更しています”という意味になります。
※インスタンスが持つ位置や大きさ等の「情報値」を強制的に変化させて表示させたいときは、左のフレームとの縁を切断する「キーフレーム」を使い、手動で変更することになります。
※「モーショントゥイーン」と「キーフレーム」の使い分けについては”Lesson3”でご説明します。

※一度設定した「モーショントゥイーンの設定」を解除したり、修正するときは、もう一度始点のキーフレームをクリック選択し、「フレーム」ダイヤログボックスで「トゥイーン」を「なし」にすると解除、項目を修正すると修正されます。

216

これまで、コマの動きを確認するのに「再生ヘッド」のドラッグで行ってきましたが、より正確に動きを確認する方法があります。
@最も簡単には、メニューバー制御→再生をクリックします。
  1フレームから最終フレーム(この場合は25フレーム)まで自動でコマ送りをしてくれます。
Aメニューバーウインドウ→ツールバー→制御パネルをクリックすると「制御パネル」がでてきます。
 各ボタンは、オーディオ等の操作ボタンと同じ機能です。
他にもありますが、今の段階では上の@Aいずれかの方法で充分です。

217

さて、上図の「イージング」のところに赤丸のしるしを入れています。
これが何かということをご説明します。
「モーショントゥイーン」の始まりのキーフレームである「1フレーム」をクリックすると、先ほどの「フレーム」ダイヤログボックスに現在の設定が入ります。
その状態で、赤丸内の「▼」を上下にドラッグすることで”0”の値を”100〜−100”に設定できます。
上にドラッグして”100”にしてください。
そのまま、メニューバー制御→再生で、ボールの動きを再生してください。
もう一度、1フレームをクリックしてから、 下にドラッグして”−100”に設定して、同様に再生してください。
違いがお分かりでしょうか(^^)
「イージング」は加速度の設定です。
値が”0”のときは、各フレームを移動するのに等速運動をします。
「+」になると動き出しが速く、終わりになるほど遅くなるという”減速運動”です。
「−」はその逆、徐々に速度を速める”加速運動”になります。
一般的には等速運動で構いませんが、ボールの動きのような場合、減速、加速の変化をつけると、よりリアルな動きを表現できます。
この場合は、左手前から飛びこんできたボールが、右奥の方で止まるという設定ですから”減速”がぴったりですね(^^)
「イージング」の値を”80〜100”程度に設定しておいてください。

以上でサンプル画像の「ボールを動かす」作業は終了です。
ここで、念のため、ファイルの「上書き保存」を行ってください。

218

「上書き保存」ができたので、もう少し遊んでみます(笑)
今、おこなったのは、ボールが左手前から右奥への直線運動でした。
これが、途中でどこかの壁にぶつかって、軌道が変るというようにしてみましょう!
起点と終点は同じとして、10フレームでボールの位置を変更してみてください。
10フレームで、位置を変更できるようにするには、そこが「キーフレーム」である必要がありますね!
そのまま10フレームを右クリック、ショートカットメニューの「キーフレームの挿入」をクリック。
10フレームが「キーフレーム」になり「モーショントゥイーン」の矢印が左右にそれぞれできます。
この状態でステージのボールが選択された状態になっていますから、これを適当に移動させてください。
メニューバー制御→再生で動きを確認してください。
10フレームのキーフレームを左右にドラッグすると、キーフレームの位置を変えることもできます。
左右の「モーショントゥイーン」は分割された時点で、それぞれ別々に「イージング」等の値を設定できるようになっています。
キーフレームはさらに増やすこともできます。
右クリックして「フレームの挿入」でモーショントウィーンが設定されているフレームを増やすこともできます。
考えられる限りのことを、ここでいろいろ試してください。

そして、充分ご堪能されたら、一端、このファイルを閉じ、改めて”test01.fla”ファイルを開いてください。
※ファイルを閉じるときは、念のため”126”を参照してください。
「test01.flaへの変更を保存しますか?」と聞かれたら、 必ず「いいえ」をクリックです(*^^*)


 2−4 文字を動かす・・・まとめ

219

次に「タイトル文字」を動かします。 方法は、図形と全く同じです。
1フレームから25フレームにかけ、ボールが移動し終わったところから、小さなタイトル文字があらわれ、次第に大きくなりながら、40フレームで現在の大きさ、位置に納まるようにしてみましょう!

まず、「タイトル」レイヤー以外のレイヤーをロックしてください。
現在は、1フレームに文字が書かれていますが、起点を25フレームとするため、1フレームのキーフレームにマウスをのせて、25フレームまでドラッグして移動させてください。
※”205”で、フレームの末尾の「□」を左右にドラッグできたように、キーフレームの場合もドラッグして位置を移動させることができます。

この段階で1〜24フレームは空白のフレームで埋められます。
※ただし、1フレームは「空白キーフレーム」です。

以下、これまでのおさらいをしながら操作手順を示して行きます。

220

画像や文字を動かすときは「シンボルに変換」して「インスタンス」を使い廻します。
25フレームをクリックして、文字を選択。
※文字が選択された状態というのは「青線枠」で囲まれていて、一見既に「インスタンス(グラフィック)」のようにみえますが、そうではありません!
※「インスタンス(グラフィック)」は、「青線枠」と中心点を示す「+」マークがあります(”212”参照)。
※それに「シンボル」として「ライブラリ」にも登録されていなければなりません。
今「ライブラリ」には「ボール」のグラフィックシンボルしか登録されていませんね。

メニューバー挿入→シンボルに変換をクリック。
「シンボルプロパティ」ダイヤログボックスで「名前」に”タイトル”と記入、「タイプ」として”グラフィック”にチェックし、「OK」をクリックします。
ステージのタイトル文字の中央に中心点を示す「+」マークが入ったのを確認してください。
「ライブラリ」をみると、「タイトル」という名前と、その左に「グラフィックシンボル」としてのアイコンがあるはずです。
これで「タイトル文字」の実態が「ライブラリ」に登録され、25フレームの「タイトル文字」が「インスタンス」に置き換わりました(”211後段”)。

221

動きの終点にキーフレームを作成し、「インスタンス」の複製を作る。
動きの終点である40フレームを右クリック、ショートカットメニューの「キーフレームの挿入」をクリック。
これで、始点である25フレームと終点である40フレームにタイトル文字の「インスタンス」が入りました。
このままでは、26フレーム以降、ボールと背景図形が見えなくなるので、 「ボール」レイヤーと「背景」レイヤーのそれぞれ40フレームを右クリック、ショートカットメニューの「フレームの挿入」をクリックして、通常のフレームを伸ばします。

222

始点及び終点の「インスタンス」に対し、位置や大きさなどの修正を行う。
始点である25フレームをクリックして、ステージのタイトル文字を選択。
ツールバーの一番下「オプション」の右下「伸縮」をクリックし、横幅がほぼボールの直径ぐらいの大きさになるぐらいまで縮小してください。
縮小した文字をドラッグして、ボールの上に重ねてください。
終点である40フレームの文字については、そのままでもいいですし、もし、何らかの微調整をされる場合は、40フレームをクリックして、ステージのタイトル文字を選択。
あとは、適当にお願いします(笑)

223

始点と終点のキーフレームの間に「モーショントウィーン」を設定します。
始点である25フレームをクリックして選択、「フレームパネル」で「トウィーン」に「モーション」を設定します。
※フレームパネルが出ていないときは、メニューバー修正→インスタンスをクリック。
「インスタンスパネル」で「フレーム」タブをクリックします。

224

動作確認と微調整
メニューバー制御→再生をクリック、 または、メニューバーウインドウ→ツールバー→制御パネルをクリックして「制御パネル」で動作の確認を行います。
動作確認の結果、微調整が必要なときは、各々のキーフレームで位置や大きさ等の修正を行うほか、モーショントゥイーンの「イージング」などの値の変更などを行います。
モーショントゥイーン全体速度の調整は、その間のフレーム数を増減させることで可能です。
その場合、この例では、26〜49フレームのどこでもいいですから、「再生ヘッド」を移動します。
いずれのフレームも選択(反転)していないことを確認して、キーボードの「F5キー」を押すと、押した数だけフレームが増え、「Shift」+「F5キー」では、押した数だけ減少させることができます。
※この方法は、関連する他のレイヤーのフレームも同じだけ増減しますので、レイヤー間の時間的タイミングを損ないません(”208”後段)。

微調整が終了すれば、これで”Lesson2”におけるサンプル画像の作成は完了です。
ここで、ファイルを「上書き保存」してください。

※余裕のある方のみ、さらに読み進んでください(*^^*)


 2−5 モーショントゥイーンとインスタンス

225

「上書き保存」しましたので、これから動画作成でよくある失敗例を体験していただき、さらに理解を深めていただきたいと思います。
サンプル画像の「ボール」をよくみていただくと、よりリアルにするため「ボールの影」が表現されています。
では、ボールに影をつけてみましょう!
@「ボール」レイヤー以外をロックします。
A1フレームをクリック、ボールの「インスタンス」が選択された状態になっていますので、図形のない場所でクリックして、選択を解除します。
Bツールボックスの上から4段目左「楕円ツール」をクリック。
Cツールボックスの下のカラーで「線のカラー」を”なし”、「塗りのカラー」を”黒”に設定してください。
Dボール右下あたりに影に見えるよう楕円形を描いてください。
Eツールボックスの「(黒)矢印キー」をクリックして、「影」をクリックして選択、ドラッグもしくはキーボードの矢印キーなどを使って微調整してください。
F動かす対象ですから、これを「シンボルに変換」します。
「影」が選択された状態で、メニューバー挿入→シンボルに変換をクリック。
G名前を「影」、タイプを「グラフィック」にして「OK」をクリック。
H「影」が「インスタンス」になりましたが、「ボール」よりあとで作成したため、ボールの手前に来てしまいました。
その場合は、「影」が選択された状態で、メニューバー修正→重ね順→ひとつ背面へをクリック。
I25フレームをクリック、ボールが選択されていますので、何もないところをクリックして選択を解除。
J「ライブラリ」から「影(インスタンス)」をステージにドラッグします。
Kツールバーの一番下「伸縮」をクリックして、「影」をボールと釣り合うよう大きさを縮小、位置を決めます。
Lメニューバー修正→重ね順→ひとつ背面へをクリック。

さて、これでボールの動きに合わせて影も移動するはずですね(^^g/~~
メニューバー制御→再生、又は制御パネルで動きを確認してください。
???
最初と最後にだけ「影」があらわれますが、中間にはありません!!!
これは、あとから「影」を挿入したからではありません。
25フレームを作るまえ、モーショトウィーンを設定する以前の最初の段階からでも、同じ結果になります。
それは、モーショントウィーンが適用されるのは、「1つのインスタンス」のみだからです。
この原則は覚えておいてください。
ここでは、1つのレイヤーに「2つのインスタンス(「ボール」と「影」)」を置き、それをモーショントウィーンで動かそうとしたため失敗しました(笑)

では、このようにあとで気付いて影を挿入したい場合はどうすればよいかといいますと・・・
2つの方法があります。

226

ひとつは、新しく「影」専用のレイヤーを作成します。
「レイヤーの追加(”127”)」を行って、「ボール」レイヤーのすぐ下に移動します。
そこで、上記(”225”)
B〜Gの操作で「シンボルに変換」し、これまでご説明した手順で影を動かしてください。
これは、影のようにボールと一体となった動きでなくても、自由に動かせます。


 2−6 シンボルの編集

227

もうひとつの方法は、「ライブラリ」に登録された「シンボル」そのものを修正します。
ステージ上の各フレームにあるのは「鏡に映った分身」という表現を使ってきましたが、まさにそのとおり!
これまであちらこちらに配置した鏡をそのままにして、鏡の前のあなたが「わたし」と入れ替われば、すべての鏡が「わたしの分身」になります。

「シンボル」を変えるとすべての「インスタンス」も変ります。
「シンボル」の内容を変えることを「シンボルの編集」といいます。

まず、先ほどの失敗例を元に戻します。
「ボール」レイヤーの1フレームをクリック、何もないところをクリックしてすべての選択を解除。
「影」をクリックして選択、キーボードの「Delキー」を押して削除します。
25フレームもクリックして、同様に「影」を削除します。
「ライブラリ」の名前のところで「影」を右クリック、ショートカットメニューの「削除」をクリックして、「影シンボル」を削除します。
これで、元に戻ったはずです。

ここからが、本番の「シンボルの編集」です。
「ライブラリ」の「名前(ボール)」を右クリック、ショートカットメニューの「編集」をクリック。

すると、今までの作業画面が消えて、左図のような画面になります。
これは、名前「ボール」という「グラフィックシンボル」の編集画面です。
「シーン1」の右横のしるしがそれを表しています。
そして、今まで沢山あったレイヤーやフレームが消え、「1レイヤー・1フレーム」の状態になります。
下のステージに表示されている「ボールの図形」は、「シンボルに変換」する前のオリジナルの図形です。
※「+」マークはシンボルの中心点を表していますが、「塗り」の選択(網が掛った状態)になっていることに留意。
オリジナルの実態図形だからこそ、編集ができます。

ここに影を描き加えます!?
「楕円ツール」をクリックして、このボールに黒の影を描きたいところですが・・・
ここで”Lesson1”の「四角の図形」に「丸の図形」を描いたときのことを思い出してください。
「塗り」の上に「別の色の塗り」を重ねると、重なった下の塗りは、上の塗りに置きかえられてしまいます。(”124”)
そして、あとで描いた「丸」をドラッグして移動させると、そこにポッカリ穴が空いてしまいましたね。
そこで、そうならないために、新しいレイヤーを追加し、そこに別の図形を描き入れました。
ここも同じです。

「レイヤーを追加(”127”) 」し、新しくできた「レイヤー2」をドラッグして、「レイヤー1」の下に置いてください。
※ここの例では、レイヤーがこれ以上増えないので「レイヤー名」をそのままにしています。
わかりやすくする必要があるときは、レイヤーに別の名前をつけてください。

「レイヤー1」をロックし、「レイヤー2」の1フレームをクリック、「楕円ツール」を使って、上記(”225”)B〜Eの手順で「影」を描き込んでください。
このとき、今回はムービーの背景が黒、影の色も黒なので、描いた図形が確認できません!
そのような場合は、臨時的にムービーの「背景色を変更」してください(”107”)。
メニューバー修正→ムービーをクリック、「背景色」で黒以外の色を選択して「OK」をクリックです。
「影」を「レイヤー2」に描くと、「ライブラリ」の中の図形にも影が描かれたのが確認できます。
これで「シンボル(実態)」が書替えられました。
「シンボル(実態)」が修正されたので、その「インスタンス(分身)」もそれに従って修正されているはずです。
それを確認するには、元の作業画面に戻ります。

「シンボルの編集」画面から、元の画面に戻るには、上の図の赤丸「シーン1」をクリックします。
「ボール(インスタンス)」に「影」がついたはずです。
メニューバー制御→再生、又は「制御パネル」でモーショントウィーンの動きも確認してください。
すべてのフレームで「影つきのボール」になったはずです。

先ほどの「シンボル編集画面」でムービーの背景色を臨時的に変更しましたので、もう一度、元の黒に戻してください。

※ここの説明をご理解いただき上手く成功された方は、このファイルを「上書き保存」しておいてください。
※ファイルが乱れて、収拾がつかなくなった方は、上書き保存しないでファイルを閉じてください。

※この「シンボルの編集」機能は、あちらこちらに分散した「インスタンス」の形状等を一度に変更できる非常に便利な機能です。
慣れてくれば、いろいろな使い方ができるようになります。

Lesson2 戻る このページの先頭へ 次へ


【おしえて!FLASH5】お奨め関連ページ
○「1−5 アニメ作りの下準備」…P24〜25
○「1−6 超カンタン!移動アニメ 」…P26〜27
○「2−1 シンボルとインスタンス」…P30〜31
○「2−2 拡大、縮小自由自在!」…P32〜33
○「2−3 回転・変形だってできちゃうぞ」…P34〜35
○「2−8 タイムラインの編集」…P44〜45


質問掲示板 過去記事 サンプル作品集 FLASH5講座 ACTION SCRIPT講座 リンク 憲ちゃんのHP FLASH制作代行 トップページ

トップページ