301

”Lesson２”では、ステージに描いた図形や文字を「シンボルに変換」し、その「インスタンス（分身）」を利用して「タイムライン」上で動かしました。
動かすにあたっては、キーフレームとキーフレームの間に「モーショントゥイーン」を設定しました。

ここでは外部のソフトで加工した「画像ファイル」をFLASHに読み込んで、それをアニメーションとして動かします。
FLASHに読み込むことのできる「画像ファイル」は、「JPG」「GIF」「BMP」など一般的なWeb用の画像ファイルなら何でも構いません。

302

「画像ファイル」は、FLASHに読み込む前に、大きさサイズや画像容量などをお持ちの画像処理ソフトで整えておきます。
作業が円滑にできるよう、専用のフォルダを用意されることをお奨めします。
例えば「FlashFiles」フォルダの中に「images」という名前のフォルダを作り、その中に加工した画像ファイルを保存していくようにします。
サンプルで使用する画像は「W２８０×H２１０ピクセル」に統一、容量はできるだけ２５KB以内に納めるようにしてください。
保存するときの「ファイル名」は、表示する順番に通し番号を付けるなど工夫してください(^^)

※ご自分の画像ファイルがすぐにご用意できないときは、ココをクリックしてください。
「花のスライドショー写真集」の加工済み写真画像がでてきます。
各画像を右クリック、ショートカットメニューの「名前を付けて画像を保存」をクリックして、先ほどの「images」フォルダにすべて保存してください。

303

読み込む画像の準備ができましたら、 FLASHを起動し、「FlashFiles」フォルダの「test01.fla」ファイルを開いてください。

※もし、Lesson２で上手くいかなかった方やLesson３からはじめたい方は、以下のファイル名を右クリックし「対象をファイルに保存」で、Lesson２までの制作ファイルをダウンロードしてください。
「test01.fla」

304

まず、新たに画像表示用のレイヤーを「タイトル」レイヤーの上に追加作成してください（”127”参照）。
レイヤー名を「写真」としてください（”129後段”参照）
サンプルの制作ファイルでは、４０フレームでタイトルが終っていますので、１０フレームほど時間稼ぎをし、５０フレームから写真が表示されるようにすることにします。

各レイヤーのタイムラインを５０フレームまで延ばします。
「再生ヘッド」を４０フレームに移動（”208”参照）、いずれのフレームも選択されていないことを確認して、キーボードの「F５キー」を１０回押します。

305

特定のフレームに図形や文字を描き込むには、そこをキーフレームにする必要がありました。
画像ファイルを外部から読み込む場合も同じです。
「写真」レイヤーの５０フレームを右クリック、ショートカットメニューの「空白キーフレームの挿入」をクリック。
５０フレームが選択（反転）されている状態で、メニューバーファイル→読み込みをクリック。
「読み込み」ダイヤログボックスがでてきますので、目的の画像が保存されているフォルダを開きます。
※サンプルの場合は「FlashFiles」の中の「images」フォルダ。

読み込みたい画像ファイル（例では「p01.jpg」）を選択して「開く」をクリック。
※ファイル名に通し番号を付している場合には、”このファイルはシーケンスの一部分です。シーケンスのイメージをすべて読み込みますか？”と聞いてきます。
「はい」をクリックすると以降のファイルがすべて、その後のフレームに１枚づつ読み込まれますが、ここでは使いません。
「いいえ」をクリックして、選択したファイルのみ読み込んでください。

ステージに選択した画像ファイルがはまり込み、「写真」レイヤーの５０フレームが「空白キーフレーム」から「●キーフレーム」に変化したはずです。
「ライブラリ」をみると、そこにも今読み込んだ画像が登録されています。

※図０４：画像読み込み後の画面例参照

「ライブラリ」内のファイル名「p01.jpg」の左のマークは「ビットマップイメージ」を表しています。
このファイル名をクリックすると、上の窓に画像が表示されます。
「ライブラリ」に登録されても、これはまだ「シンボル」ではありません。

306

読み込んだ画像は、そのままでは「ビットマップ」画像（＝「ｊpg」「gif」「bmp」など）なので、大きさや色、透明度などを自由に変化させるには、これを「シンボルに変換」する必要がありました（”210,211”参照）。
ステージの画像が選択された状態で、メニューバー挿入→シンボルに変換をクリック。
「シンボルプロパティ」で、名前を「ｐ０１（何でも構いませんが…）」、タイプを「グラフィック」にして「OK」をクリック。

すると左図のようにステージのビットマップ画像が「インスタンス」画像に入れ替わるとともに、「ライブラリ」の中に「ビットマップイメージ」とは別に「p01」という名前の「シンボル」が登録されます（”212,212-1”参照）

これで、画像アニメーションの準備完了です。

307

シンボルとして「ライブラリ」に登録しても、実際にムービーとして動かすのは、タイムラインにある「インスタンス（画像）」です。
まず、５０フレームにある「インスタンス（画像）」のステージ上の位置を決めます。
位置を正確に決めるのは「情報パネル（”119”参照）」を使いました。
※メニューバー「ウインドウ」→「パネル」→「情報」。

画像を選択すると「情報パネル」に現在の大きさと位置の情報が表示されます。
大きさは原型のまま「W２８０×H２１０ピクセル」です。
位置情報のところで、「左上」が黒点になっているのを確認して「X＝２０」「Y=２０」と入力し、ステージ上の画像をクリックしてください。
ピッタリ、下の背景と重なるはずです。

308

ここまでの作業では、タイトルが表示しおわってしばらくすると、画像がいきなり現われることになります。
画像が透明から次第に不透明になり、完全に現われてからも一定時間表示されるようにしてみましょう。
透明から完全に表示されるまでのタイムラインを１０フレーム分、その後の表示時間稼ぎを仮に２０フレーム分として作業を進めます。

今５０フレームにインスタンス（画像）がありますから、そこから１０フレーム後、６０フレームにキーフレームを挿入します。
「再生ヘッド」を５０フレームに移動、いずれのフレームも選択されていないことを確認して、キーボードの「F５キー」を１０回押し、各レイヤーのタイムラインを６０フレームまで延ばしてください。
「写真」レイヤーの６０フレームを右クリック、ショートカットメニューの「キーフレームの挿入」をクリック。
６０フレームに「●キーフレーム」が入り、５０フレームと同じインスタンス（画像）が複写されます。

309

次に、５０フレームのインスタンス（画像）を透明にします。
「写真」レイヤーの５０フレーム（キーフレーム）をクリックして選択（反転）します。
下のステージに表示されているインスタンス（画像）は５０フレームの状態です。

透明度を設定するときは「効果パネル」を使います。
作業画面に「効果パネル」がないときは、 メニューバー修正→インスタンスをクリック。
「インスタンスパネル」がでてきますので、左から２番目の「効果」タブをクリックして、「効果パネル」にしてください（”213”後段参照）
※通常、「インスタンス」「効果」「フレーム」「サウンド」はセットでひとつのパネルになっています。
いずれかが画面にあるときは、そこの「効果」タブをクリックしてください。

初期値は「なし」ですが、右横の「▼」をクリックして、プルダウンメニューから「アルファ」をクリック。
「アルファ」は非透明度の設定です。
初期値の「１００％」で透明度ゼロ（完全非透明）、値が小さくなるほど透明度が上がります。
「０％」で完全透明です。
数値の右横の「▼」を上下にドラッグすると値が変化するとともに、ステージ上のインスタンス（画像）もその数値に応じた状態に変化します。
ここでは完全透明の「０％」に設定してください。

310

これで、５０フレーム（キーフレーム）には「p01」の「透明のインスタンス（画像）」が、６０フレーム（キーフレーム）には「非透明のインスタンス（画像）」が納まっている状態になりました。
キーフレームとキーフレームの間でインスタンスの値を”段階的に移行”させるのは「モーショントゥイーン」でしたね！
ここでの両者間の値の違いは「アルファ値」です。

５０〜６０フレーム間にモーショントゥイーンを設定します（”215”参照）
先ほどの「効果パネル」の「効果タブ」の右「フレーム」タブをクリックして、「フレームパネル」にしてください。
※ここでもし、５０フレームが選択（反転）されていないときは、５０フレームをクリックして選択。

上から２段目の「トゥイーン」の初期値は「なし」ですから、その右横の「▼」をクリックして、プルダウンメニューの「モーション」をクリック。
５１〜５９フレームにかけて矢印が表示されたら設定完了です。

メニューバー制御→再生で動きを確認してみてください。

※ここではインスタンスの透明度の変化だけを使いましたが、５０フレームのインスタンス（画像）の大きさを縮小すれば、小さな透明画像が大きくなりながら現われるようになります。
拡大縮小は、インスタンスが選択された状態で、画面左のツールボックスの下「オプション」の下、右の「伸縮」アイコンです。

311

画像が透明から徐々にフェードインして現われたところで、あとはその状態を一定時間保つために、時間稼ぎのフレームを８０フレームまで増やしてください。
再生ヘッドを６０フレームに移動、いずれのフレームも選択されていない状態で「F５キー」を２０回押します。

312

最初の画像はこれで一応スムーズに表示できましたので、次の画像に取りかかります。
２枚目の画像をタイムラインに乗せるときには、先ほどの「写真」レイヤーの続き、すなわち８１フレームを空白キーフレームにして、そこに２枚目の画像を読み込む方法と、別途新しくレイヤーを追加して、そこに読み込む方法が考えられます。
画像を切り替える際、１本のレイヤーより２本のレイヤーを使った方が応用範囲が大きくなりますので、ここでは後者の方法を使います。

「写真」レイヤーの上に、新しくレイヤーを追加してください。
新しいレイヤーの名前を「写真２」とし、元の「写真」レイヤーを「写真１」に変更してください。

313

追加した「写真２」レイヤーの８０フレームに２枚目の画像「p02.jpg」を読み込み、「シンボルに変換」後、８０フレームから９０フレームにかけて透明からフェードインさせ、１１０フレームまでその状態を保つということにします。
１枚目の画像と処理方法は同じですから、説明なしで手順だけを書いておきます。

�@「写真２」レイヤーの８０フレームを右クリック、「空白キーフレームの挿入」をクリック。
�Aメニューバーファイル→読み込みをクリック。
　「p02.jpg」を選択して「開く」をクリック。
　※”このファイルはシーケンスの・・・”がでてきたら「いいえ」をクリック。
�Bメニューバー挿入→シンボルに変換をクリック。
　「シンボルプロパティ」で名前を「p02」、タイプを「グラフィック」として「OK」をクリック。
�C「情報パネル」で「X=20」「Y=20」を入力して、ステージのインスタンス（画像）をクリック。
�D８０フレームにある再生ヘッドをクリックして、すべてのフレームが選択されていない状態にし、キーボードの「F５キー」を３０回押し、各レイヤーのタイムラインを１１０フレームまで延ばします。
�E「写真２」レイヤーの９０フレームを右クリック、「キーフレームの挿入」をクリック。
�F「写真２」レイヤーの８０フレームをクリックして選択（反転）。
　 ステージのインスタンス（画像）が選択されていることを確認。
　※このときもし「写真２」レイヤーのタイムライン全体が反転したときは…
　 一端、再生ヘッドをクリックして反転を解除し、改めて８０フレームをクリックして、
　 ８０フレームだけを反転させてください。
�G「効果パネル」で「アルファ」を選択、値を「０％」に設定。
�H「フレームパネル」のトゥイーンで「モーション」を選択。
�Iメニューバー制御→再生で動きを確認。

どうですか！？
１枚目の画像から２枚目の画像への切り替えが実にスムーズでしょ（笑）
１本のレイヤーでは、こうはできません！！

314

３枚目の画像も上記と同様に新しく「写真３」レイヤーを追加、そこに読み込むという方法で一見上手くいきそうですが・・・
４〜５枚程度ぐらいまでなら特に問題はありませんが、数十枚〜１００枚となったときには、レイヤーが多くなり過ぎて作業効率が非常に悪くなります。

２枚まで画像をはめこんだ時点で、各レイヤーの様子をもう一度よく眺めると・・・
「写真１」と「写真２」の関係は、８０〜８９フレームでは、上に位置する「写真２」が透明又は半透明の状態ですから、下の「写真１」が見えていますが、９０フレームでは完全に非透明となって、以降、下の「写真１」の画像は全く見えない状態になっています。
見えない以上、ここに元の画像があっても無駄ですね！

それならば、ここに３枚目の画像を忍ばせるという方法が使えそうです(*^^*)

315

どうなるか、とにかくやってみましょう！
「写真１」レイヤーの”９１”フレームを右クリック、ショートカットメニューの「空白キーフレームの挿入」をクリック。
メニューバーファイル→読み込みで「p03.jpg」を選択して「開く」をクリック。
※例によって”このファイルはシーケンスの・・・”がでてきたら「いいえ」をクリック。

画像ファイルが読み込まれる位置にもよりますが、「写真２」レイヤーの画像の下に一部分が隠れて見えないはずです。
作業がしにくいので、ここで一時的に「写真２」レイヤーを見えなくしてください（”136後段”参照） 。
「写真２」レイヤー名の右「目アイコン」の位置の「・」をクリック。
「・」が「×」に変り、ステージから画像が一時的に消えます。

メニューバー挿入→シンボルに変換。
「シンボルプロパティ」で名前を「p03」、タイプを「グラフィック」にして「OK」。
「情報パネル」で「X=２０」「Y=２０」と入力、ステージの画像をクリックして、所定の位置に配置します。

そして一時的に見えなくした「写真２」レイヤーの「×」を再度クリックして、見えるようにしてください。

メニューバー制御→再生で確認してください。
外見上、先ほどとなんら変化はありませんが、すでに３枚目の画像が「写真１」レイヤーにはまり込んでいることになります。

316

２枚目の画像から３枚目の画像への切り替えはどうなるか！？
続きをやってみましょう。

上に位置する「写真２」レイヤーにある２枚目の画像を、１１０フレームから徐々に（透明度を増して）消していき、１２０フレームで完全に透明にすることで、下の「写真１」レイヤーにある３枚目の画像が徐々に現われるように見えるはずです。
１２０フレームから１４０フレームを３枚目の画像の時間稼ぎとします。

再生ヘッドを１１０フレームに移動、すべてのフレームが選択されていない状態で「F５キー」を３０回押し、各レイヤーのタイムラインを１４０フレームまで延ばしてください。
「写真２」レイヤーの１１０フレームと１２０フレームをそれぞれ右クリック、「キーフレームの挿入」でキーフレームにしてください。
１２０フレームが選択（反転）されていることを確認し（選択されていないときはクリックして選択）、「効果パネル」で「アルファ」を選択、値を「０％」に設定。
１１０フレームをクリックして選択（反転）、「フレームパネル」のトゥイーンで「モーション」を選択。
メニューバー制御→再生で動きを確認してください。

※この間「写真１」レイヤーの３枚目の画像には、全く触れていません。

317

次に４枚目の画像ですが、もうおわかりですね(*^^*)
２枚目の画像と同じ方法（”313”）で「写真２」レイヤーに読み込んで作業を行ってください。

「写真２」レイヤーの１４０フレームを「空白キーフレーム」にし、そこに４枚目の「p04.jpg」をに読み込んで、「シンボルに変換」。
１４０フレームのインスタンス（画像）を透明（アルファ＝０％）にし、１５０フレームにかけて「モーショントゥイーン」で出現。
１５０〜１７０フレームを時間稼ぎフレームとします。

サンプルの「花のスライドショー写真集」のうち「p08.jpg」の大きさは、別の意図があって他とは変えています。（Lesson５で説明）
ここでは、７枚目の「p07.jpg」まで、上記の方法で交互に画像をはめこんでみてください。

318

非常に単純作業の繰り返しですが、油断をすると頭が混乱してきます（笑）
常に以下の点に留意しながら作業を行い、数をこなすことでご自分なりの”コツ”を掴んでいただければ幸いです。

�@「写真１」レイヤーに入る画像ファイルは、常にファイル名のナンバーが奇数。
　当然「写真２」レイヤーは偶数です。
�Aインスタンスに「アルファ」を設定したり「モーショントゥイーン」を設定するのは、上に位置する「写真２」レイヤーのみです。
※「●透明」→「モーショントゥイーン」→「●非透明」→「時間稼ぎフレーム」→「●非透明」→「モーショントゥイーン」→「●透明」
�B下に位置する「写真１」レイヤーに画像を読み込んだり、情報パネルで位置を確定する際は、必ず上の「写真２」レイヤーを見えなくしておくこと（”315後段”） 。
そうしないと、間違って上の「写真２」レイヤーを選択し、そこに読む込むという失敗を犯す可能性があります。
ひとつのレイヤーのフレームに同時に複数のインスタンスがあるとモーショントゥイーンが正常に働きません。
「写真１」レイヤーの作業がおわれば、今度は「写真２」レイヤーを見えるように復活させることを忘れないこと。
�C選択中のインスタンスがどのシンボルのものか分からなくなったときは、「インスタンス」タブをクリックして「インスタンスパネル」で「シンボル名」を確認してください。
タイプ名の上に表示されています。

319

Ｌｅｓｓｏｎ３のテーマである「外部の画像ファイルを読み込んで動かす」ということの説明は以上のとおりです。
折角の写真ですから、これに「枠」を付けて画面を引き締めてみましょう。
内容はＬｅｓｓｏｎ１のおさらいになります。
”117”で背景の「タイトルのバック図形（写真画像と同じ大きさ）」を描く際、「枠」に相当する周囲の線をわざと省略しました。
これは、そこで線を含めて描いても、その上に写真画像が表示されると、下に隠れて見えなくなるからです。
見えないものを描いてもメモリを無駄にするだけなので、極力省略します。
写真画像が表示されても「枠」がその上に見えるようにするには、「写真１・２」レイヤーの上に新しく枠専用のレイヤーを追加し、それに描き込むようにします。
「写真２」レイヤーの上に新しくレイヤーを追加し、名前を「枠」としてください（”127,129”参照）。

320

「枠」レイヤーの１フレームをクリック選択（反転）、画面左端「ツールボックス」の上から４段目右の「矩形ツール」をクリック。
「カラー」の「鉛筆（線のカラー）」を「＃６６６６６６」、「バケツ（塗りのカラー）」を「カラーなし（赤斜線をクリック）」にして、ステージに枠に相当する「四角形」を描いてください。（”109〜”参照）
描いたあと「ツールボックス」の「（黒）矢印キー」をクリックして四角形全体を選択、「情報パネル（”119”参照）」を使って大きさ、位置を確定すると確実です。
右の「ボタンのバック図形」「ＨＯＭＥボタンのバック図形」の部分にも同様に枠を描いてください。
※「情報パネル」での各値は以下のとおりです。
「タイトルのバック」 ：Ｗ＝２８０、Ｈ＝２１０、Ｘ＝２０、Ｙ＝２０
「ボタンのバック」　 ：Ｗ＝１１５、Ｈ＝１２５、Ｘ＝３１５、Ｙ＝２０
「ＨＯＭＥボタンのバック」 ：Ｗ＝１１５、Ｈ＝７０、Ｘ＝３１５、Ｙ＝１６０

メニューバー制御→再生で動きを確認してください。

【おしえて！ＦＬＡＳＨ５】お奨め関連ページ
○「４−１　透明を使ったフェード」…Ｐ６８〜６９
○「８−１　写真を取り込む」…Ｐ１２６〜１２７
○「８−６　写真のアルファチャンネル 」…Ｐ１３６〜１３７（あまり参考にならないのでほどほどに…）