サンプルサイトの構造
サンプルサイトの構造
さて、 今まで説明してきたことを思い出して、実際に素材を張り込んで、サンプルサイトを制作してみましょう。素材は何でも良いので、各ページの素材とボタン素材を用意します。
レイヤーは、それぞれ、「アクション」、「ラベル」、「ヘッダ」、「フッタ」「コンテンツ」と分けて、それぞれに名前をつけます。また、「アクション」レイヤーの、5、10、15、20には、それぞれ、アクションスクリプトパネルを開き、「this.stop();」を書き込みます。これで、各5、10、15、20で再生が止まることになります。
サンプルでは、SeaFlowerというヘッダのデザインを「ヘッダ」レイヤー（ベタ画像）に、「TOP」、「ABOUT」、「EVENT」、「ACCESS」のそれぞれのボタンと、グラーデションの長方形のグラフィック（Flashで描いた）を「フッタ」レイヤーに。「ヘッダ」と「フッタ」は各ページ共通なので、特に「キーフレーム」でフレームを分割することはしません。
なお、「TOP」、「ABOUT」、「EVENT」、「ACCESS」は、それぞれボタンシンボルにしてください。
トップページの海の写真とInfomationという文字、Infomationのテキストを「コンテンツ」レイヤーに配置します。
なお、ライブラリーにもフォルダを作ることができますので、用途に分けてそれぞれのオブジェクトを整理してください。
ラベルとは
ここで、「ラベル」というものが出てきましたが、これは付箋のようなものです。
あとで、「gotoAndPlay();」というActionscriptで各ページを表示させる処理を行いますが、そこで使うのが、ラベル名です。
「ウィンドウ」→「プロパティー」で表示される、上のようなダイアログで、ラベル名を設定することができます。
ラベル名を設定すると、「gotoAndPlay("Top");」といったActionScriptで「Top」というラベル名のフレームに移動させることができます。
ボタンにアクションをつけてみる
では、それぞれのボタンにActionScriptを書いてみよう。ボタン「TOP」を選択して、以下のように書いてみましょう。
「on(release)」は約束事として覚えましょう。「ボタン」インスタンスに命令を実行させようとする場合、クリックしたとき（綿密には、クリックしてマウスを放したとき）に必要です。「{}」は、括弧の中の命令を実行しろという意味です。
「gotoAndPlay();」は、（）の中のフレームに移動しろという意味で、「;」はプログラム特有の「。」みたいなものです。「this.」は今のところ気にする必要はなく、あってもなくても問題はありません。ちなみに、大文字と小文字は区別されるので気をつけましょう。
「gotoAndPlay();」の「（）」の中には、フレームの番号（何番目のフームか）と「ラベル名」を入れることができます。ただ、フレームの番号の場合、編集中にフレームの長さが変わると、いちいち書き直さなければいけないので、ラベル名で管理するのが便利です。
さて、アクションスクリプトをつけたら、パブリッシュしてみましょう。
フッタのボタンをクリックすると、表示内容が変わることがわかります。残りのページの素材も張り込んで、これで、まずは、Flashを使った初歩的なWEBサイトの完成です。
ここまでのサンプルサイトを見る。
ここまでのサンプルFlashファイルをダウンロード。
（右クリック→ファイルをダウンロード:[top01.fla]240KB）
