SWFファイルを読ませてみよう

SWFファイルの読み込み

いよいよレッスンも終盤に近づいてまいりました。GALLERYページでは、簡単なアニメーションのSWFファイルを作成しておいて、ボタンクリック時にloadMovieのアクションスプリクトで各SWFファイルを表示させています。

サイトの構成

わかりやすいように構成を簡単に説明しておきます。ウインドウの動き(モーショントゥーイン)が終る9フレーム目の次の10フレーム目で新規に同じサイズのウィンドウを作成してムービークリックシンボル化しています。それに伴って、button・背景・actionレイヤーともに10フレーム目まで増やしてます。button2レイヤーは、表示用ボタンの配置用に新規に作成してます。

ムービークリップシンボルの作成

10フレーム目に色は黒色、塗り(#000000)・幅(500px)・高さ(250px)・座標(X: 25, Y: 25)のオブジェクトを短形ツールで作成。その後、ムービークリップシンボルに変換します。この際、loadMovieでSWFファイルを読み込ませるオブジェクトをシンボル変換する際に重要なポイントがあります。基準点は、デフォルトで真ん中になっているのですが左上に変更してシンボル化してください。そうしないとSWFファイルを読み込ませたときに真ん中を始点として表示されてしまいます。(ちょっと文章だとわかりづらいですね。余裕がある方は実際真ん中で試してみてください。) 

インスタンス名の入力

そして次のポイントです。アクションスプリクトを使用する場合にインスタンスに名称をつける必要がある場合があります。シンボル化した際につけた名前とは別にもう一度シンボルを選択してプロパティインスペクタより任意の名称をつけます。この例では、window2としています。(他仕様としては、ここでアルファ60%で透明化してます。)

あとは、ボタンシンボルを作成して、loadMovie のアクションスプリクトをつけるわけですが先にソースをみてみてください。(xxx.swfの xxx部分は、作成したSWFファイル名にあわせるということです。)

loadMovieの設定

ボタンシンボルに対しアクションスプリクトをつけていきます。
今回は、ノーマルモード→エキスパートモードに変更しておきます。
ムービーコントロール→onをダブルクリック後、さらにreleaseをダブルクリックします。

ターゲットパスの挿入

on(release)を入力できたらカーソルを{ }内にあわせてから青枠表示のターゲットパスを挿入ボタンをクリックします。先ほど指定したwindow2を選択して、OKボタンをクリックします。その後に .(ドット)をいれます。 

window2.とは、この後に続くアクションスプリクトが、window2と指定したムービークリップシンボルに対して行われることを意味しています。

loadMovieの設定

window2. に続けて、ブラウザ/ネットワーク→loadMovieをダブルクリック。

loadMovie 後の()カッコ内は手入力となりますが、loadMovie("xxx.swf", 1); } 

入力の意味合いは、この場合こう考えて差し支えないと思います。
loadMovie(SWFファイル名,レベル); }

SWFファイル名に関しては、自分の作成したファイル名を入力すればよいでしょう。またFLASHには、レベルという概念があります。サンプルサイトのGALLERYページでは3作品あげてますがそれぞれに1、2、3とレベルを変えて指定しています。逆に言うと同レベルにすると次のボタンを押すとアニメーションが切り替わるのではなく2つのアニメーションが同時に表示されるような形になります。

ファイルの構成

また参考までにサンプルサイトのファイル構成としては、メインとしてindex.swf。loadMovieで読み込ませているアニメーションとして作成したflower.swf・planet.swf・webkun.swfを同階層に置いてアップしています。

最後に、今度はアニメーションの方のSWF作成時の注意点として、loadMovieで読み込ませるSWFの背景が透けてしまうということです。

そこで背景として画面サイズと同じサイズのオブジェクトを作成して意図した背景を表示させています。

SWFの構成

背景の挿入

こんな感じです。今回のレッスンは多少わかりづらい説明になってしまったのですがポイントはおさえているはずなので実際にやりながら理解してみてください。

逆に最初はスムーズにいかなかった場合の方がここに書いてあることがはっきり理解できるかも知れないです。(私もうなりながら試行錯誤して作成しました。)

いよいよ次が最後のレッスンになります。あくまでサイト構築の基本を伝えることを目的としていますのでアニメーション的な部分に関しては省かせていただきます。