教科書ダウンロード[PDF版] - liquid-style

Flashの使い方： インタラクティブの画像閲覧のメニューを作る(F23)
目的：
Flashのアクションスクリプトを利用して、ボタンを押すとフレーム間を移動するインタラクティブなムー
ビーを作ります。ライブラリでフォルダを作り素材管理をしたりフレームラベルを利用します。
完成のイメージです。「photo1」から「photo4」のボタンを押すとそれぞれの画像が表示されます。
作業前に素材の確認をします。まずはタイムラインです。
ステージには「ボタン_btn」シンボルが配置されています。
1
Flashの使い方： インタラクティブの画像閲覧のメニューを作る(F23)
ライブラリに「ボタン1_btn」というシンボルがあります。フォルダに外部素材を追加していきます。
オレンジの枠素材を追加します。メニューの「ファイル/読み込み/ライブラリに読み込み」を選びます。
ライブラリの「_material」フォルダの中にイラストレーターファイル「06_frame.ai」を読み込みました。
ライブラリに読み込んだムービークリップシンボル「06_frame.ai」を編集します。
シンボル「06_frame.ai」を選択して右クリックから「プロパティ…」を選びます。
2
Flashの使い方： インタラクティブの画像閲覧のメニューを作る(F23)
シンボルプロパティを開き、名前を「06_frame」に変更します。タイプを「ムービークリップ」から「グ
ラフィック」に変更します。ライブラリからシンボルをダブルクリックして編集します。
シンボル「06_frame」を開きます。イラストレーターのレイヤー別にフレームに並んでいます。
シンボル「06_frame」の1フレーム目が必要ないので、フレーム削除します。
3
Flashの使い方： インタラクティブの画像閲覧のメニューを作る(F23)
メニューの「修正/分解」をします。何度も分解を繰り返すとグループ化されたシェイプが全て解除されます
（ファイルサイズが少なくなりアニメーションがスムーズになります）。編集が終わりました。「シーン」
に戻ります。
次に「シーン」にあるレイヤー「フレーム」にライブラリからシンボル「06_frame」をドラッグして配置
します。プロパティパネルを開き座標のXを「0.0」Yを「0.0」にします。外枠が完成です。
4
Flashの使い方： インタラクティブの画像閲覧のメニューを作る(F23)
次は画像を「photo1.jpg」から「photo4.jpg」までの画像を外部からライブラリに読み込みます。
レイヤー「フォト」の10フレーム目にある空キーフレーム内に「photo1.jpg」を配置します。同様に20フ
レーム目、30、40と「photo3.jpg」から「photo4.jpg」まで配置したら完成です。
5
Flashの使い方： インタラクティブの画像閲覧のメニューを作る(F23)
ライブラリのシンボル「ボタン1_btn」を複製して「ボタン1_btn」から「ボタン4_btn」まで作ります。
編集してテキスト「photo1」から「photo4」と変更しましょう。
シーンのレイヤー「ラベル」からフレームラベルを付けます。フレームプロパティで「photo2」から
「photo4」を追加します。
再びシーンからステージのボタンシンボルを選択します。
6
Flashの使い方： インタラクティブの画像閲覧のメニューを作る(F23)
アクションスクリプトを挿入します。メニューのウインドウから「アクション」を開きます。
7
Flashの使い方： インタラクティブの画像閲覧のメニューを作る(F23)
完成しました。
Text by Eisuke Miura[liquid-style-design.com]
8