Flashラボ

外部ムービー、画像の読み込み

外部ムービー、画像の読み込み

だいぶ、Flashにも慣れてきたと思いますので、そろそろサンプルサイトを更新しやすいように「外部ムービーを読み込む」仕様に変更してみましょう。

サンプルサイトの仕様変更

変更された仕様

今までは、ボタン「A」、「B」、「C」をクリックしたら、そのFlash内でページを切りかえていましたが、これを別のFlashファイル(SWFファイル)を読み込むようにしてみましょう。

まずは、サイズが700×350でFPSが24の新規Flashファイルを作ります。これが後々読み込まれるファイルになるわけですが、注意しなければいけないのが、FPSを親のFlashファイルと同じにすることです。

作成したら、任意の名前をつけて保存してください。ここでは、「page_top.fla」とした。同様に、「page_about.fla」、「page_event.fla」、「page_access.fla」も作成します。これらが読み込まれるファイル群です。

データの移行

ファイルを作成したら、各ファイルに元ファイルからデーターを移行(コピペ)していきます。上は、page_top.flaにトップページのデータを貼付けた図。貼付けたら忘れずに書き出しておきましょう。

アクションスクリプトをつける

ベースののFlashは、各ページのデーターを別ファイルにコピペしたので空っぽになります。
不必要なフレームは削除し、下のように整理しましょう。

そうしたら、700×350の長方形を描き、ムービークリップシンボル化し、名前を「読み込み用ステージ」とします。その際、基準点は左上に合わせてください。これが、外部ファイルを読み込む際のムービークリップとなります。

ムービークリップに名前をつける

ムービークリップシンボル化したら、任意の名前をつけます。ここでは、「stage」としました。

TOPボタンにASをつける

「TOP」ボタンインスタンスに、下のようにアクションスクリプトを書いてみましょう。

TOPボタンにASをつける2

loadMovie();は外部ムービーを読み込む関数で、左の引数がファイル名、右が読み込むムービークリップの名前です。これで、外部ムービーを読み込むスクリプトは完成です。
*ファイルのパスですが、今回は、読み込むベースのFlashファイルと、読み込まれるコンテンツのFlashファイルが同じ階層なので、"page_top.swf"でOKです。もしもフォルダ等でそれぞれを整理する場合は、HTMLで画像を指定するように、きちっとパスの指定もしてください。

それぞれのボタンにも、上のようなスクリプトを書きます。

書き出すとわかると思いますが、このままだと最初に真っ黒い画面になってしまうので、ラベル名「Top」のシーンに入ったら、最初に「page_top.swf」を読み込むように設定します。アクションスクリプトは、

loadMovie("page_top.swf",this.stage);

で、「アクション」レイヤーの2フレームに書きます。
*まれに、1フレーム名にアクションを書くとバグが発生する可能性があるので、問題が無い場合は、2フレーム目に書く癖を付けると良いと思います。

ローディングバーの表示

最後に読み込み用ステージムービークリップの色を白にしてやれば完成です。

外部ファイルを読み込む仕様にすることで、例えば、「About」コンテンツに修正が入った場合は、「page_about」だけを修正してアップしてやれば良いし、中身を刷新する場合、古いファイルを「page_top_old.fla」としてとっておけばいつでも古いバージョンに戻すことができます。

また、新しいコンテンツを追加する時も、「page_???.swf」を作成し、新しいボタンを追加するだけでコンテンツを追加してやることができます。

ちなみに、loadMovie();の関数はJPG画像も読み込むこともできます。

ここまでのサンプルサイトを見る。
ここまでのサンプルFlashファイルをダウンロード。
(右クリック→ファイルをダウンロード:[top04.fla]90KB)

Copyright (c) Penta Creation All rights reserved.