課題6「4つのボタン」

1.インタラクティブな作品

 

ボタンを使うと単に見るだけでなく、画面を操作して変化を与えることができる作品を作ることができる。このような作品を「インタラクティブ」であるという。インタラクティブとは「相互に作用する」「双方向性の」「対話型の」といった意味がる言葉である。

この課題では画面に4つのボタンを配置し、それぞれが特定のフレームに移動する仕掛けを使ってインタラクティブな仕掛けを作る。

 

2.レイヤーの準備
 

レイヤーを挿入し、全部で3つのレイヤーを作り、それぞれ上から「ボタン」「イラスト」「アクション」の名前を付けておく。

 

3.フレームの表示幅を大きくする
 

フレームに対して編集を行うが、幅が狭いとマウス操作が難しいので、フレームの表示幅を大きくしておく。

フレームの表示幅を変えるには、タイムラインの右端にある「シーンの編集」「シンボルの編集」ボタンの下にある、「フレーム表示設定」ボタンを押す。このボタンはマウスを重ねてもボタンの名前が表示されないが、3本の縦線に横線が入っている、魚の骨のようなデザインのボタンである。

 

4.フレームを挿入する
 

絵やボタンを描く前にフレームの準備をする。

「ボタン」のレイヤーは、4フレーム目をクリックして「フレームを挿入」しておく。このレイヤーは最初のフレームだけがキーフレームであればよく、ここに4つのボタンを配置することになる。

「アクション」と「イラスト」のレイヤーには、1フレーム目から4フレームまでの全てのフレームにキーフレームを挿入しておく。

 

5.「ボタン」レイヤーにボタンを描く
 

「ボタン」レイヤーに4つのボタンを描き、それぞれを「ボタンシンボル」にしておく。名前は「ボタン1」「ボタン2」「ボタン3」「ボタン4」としておけばわかりやすい。

「ボタンシンボル」を作るには、描いた絵を選択して「挿入」−「シンボルに変換」を行い、「シンボルプロパティ」ウィンドウで「タイプ」を「ボタン」にする。

4つのボタンができたら、次の作業に移る前に、「ボタン」レイヤーをロックしておくと間違いがない。

 

6.「イラスト」レイヤーに絵を描く
 

「イラスト」レイヤーの4つのフレームに、それぞれ別の絵を描く。

絵が描けたら、次の操作に移る前に、「イラスト」レイヤーをロックしておくと間違いがない。

 

7.「Stop」アクションを設定する
 

「アクション」レイヤーの4つのキーフレームに、すべて「Stop」アクションを設定する。これはフレームアクションであり、フレームアクションを設定するには、キーフレームを右クリックして「プロパティ」を選択するか、フレームをダブルクリックして「フレームプロパティ」ウィンドウを開いて、「アクション」タグにアクションスクリプトを記述すればよい。

すべてのフレームに「Stop」アクションを設定するのは、勝手にムービーが次へ進んでいかないようにしたいためである。

「Stop」アクションは絵を描いたフレームと同じフレームに設定してもいいのだが、ここではわかりやすいように別のレイヤーを作って設定することとしている。

 

8.ボタンにアクションスクリプトを設定する
 

「ボタン」レイヤーがロックされていたら編集できないので「ロック」を解除し、他のレイヤーはロックしておくと次の操作に間違いがない。

4つのボタンのうち1つを選択し、右クリックして「プロパティ」を選択するか、ダブルクリックして「インスタンスプロパティ」ウィンドウを開く。「アクション」タグを開いて、次のアクションスクリプトを記述する。

Go to and Stop (1)

このスクリプトを記述するには、まず「+」ボタンを押してコマンドリストを表示させ、「GoTo」アクションを選べばよい。

このスクリプトの意味は、ボタンを押すとフレーム番号1へムービーが移動するという意味である。同様に2つめのボタンには、

Go to and Stop (2)

3つめのボタンには、

Go to and Stop (3)

4つめのボタンには、

Go to and Stop (4)

の各アクションスクリプトを記述する。これで各ボタンを押すと、フレーム番号1、2、3、4のそれぞれの場面にムービーが移動する仕掛けができた。

 

9.ムービーを確認する
 

ムービーができたら動きを確認する。通常、編集中はボタンアクションやフレームアクションは働かないようになっている。これは編集中に機能すると、編集作業に支障が出るからである。

編集中にボタンアクションやフレームアクションを確かめたいときは、「制御」メニューの「ボタンアクション」または「フレームアクション」をクリックし、チェックを付けておく。

ボタンアクションやフレームアクションの動きを確かめる、最も確実な方法は、「制御」メニューの「ムービープレビュー」または「シーンプレビュー」を行う方法である。これを行うと、完成したムービーを確かめることができ、同時にフォルダにフラッシュプレイヤー形式の「.swf」ファイルが書き出される。

 

 

平成13年度マルチメディアデザイン授業

〜明石高校+須磨学園高校による〜

(作成:兵庫県立明石高等学校/松本吉生/平成13年11月9日)