FlashはActionScriptというプログラムを書くことにより、インタラクティヴな表現が可能になります。今回は簡単なActionScriptを書いてマウス操作に合わせて動きの変わる作品を制作してみましょう。本日は少し難易度があがりますので、先生の操作説明を集中して聞くようにしてください。
下記のリンクからWeb Dramaとして制作された作品を参照してみよう。作品はいずれも映像作家の宇田敦子氏。Flashを用いて新しい映像作品の領域を作りだしている。通常の映像ではなく、ユーザがマウスを操作する時に映像の中に時間が発生しているのがわかるだろう。
現在インストールされているFlash CS3では、新規作成時にActionScript3.0や2.0などの形式を選べるようになっているが、今回のサンプルを元に制作する時には「Flashファイル(AS 2.0)」を選ぶ。また端末機によっては以前のバージョンのFlash8が入っているが、その場合そちらを使っても構わない。
自分の保存領域に、Flash2_Sampleというディレクトリ(フォルダ)を作り、下記の9つの顔画像をドラッグしてダウンロードしよう。 授業ではとりあえず使い方を覚える為に、下記の画像を使用して進めることとする。
課題作品として提出する作品には、下の画像のように9つの角度の顔画像を携帯電話のカメラ等で撮影し(友人に協力してもらい、なるべく自分の顔画像を撮影する)、自分のメールアドレスに送って使用する。その際、画像サイズはPhotoshopで切り抜くなどの加工をする。解像度72dpi、サイズは縦横ともに100px。保存形式はJPEG。ファイル名は任意だが、半角英数字で分かりやすい名前にしよう(例:middle.jpg, right.jpg, left.jpgなど)。また、顔の動きがあまり大き過ぎると不自然なので注意すること。
下記のリンクからテンプレートをsampleディレクトリ(フォルダ)にダウンロードしFlashで開いてみよう。
→ テンプレート
タイムラインに新たなレイヤーを追加する。ボタンレイヤーを選択した上で、「レイヤーの追加」ボタンをクリックしてボタンレイヤーの上に新たなレイヤーを作成する。レイヤーの名前を「顔」にしておこう。
メニューの「表示」から「ガイド」→「ガイドを表示」でガイドを表示させてみよう(テンプレートにはあらかじめガイドが作成してある。このガイドを描くにはステージの上と左に表示されているルーラー(定規)からドラッグすることで描くことができる)。ガイドが表示されたら顔レイヤーの1フレーム目を選択し、ガイドに沿って真中の枠に合うように正面を向いた画像(middle.gif)をライブラリパレットからドラッグして配置する。配置したら、メニューの「修正」→「シンボルに変換」で「グラフィック・シンボル」に変換する。基準は真中にしておこう。
1、顔レイヤーの5フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを作成する。空白キーフレームにライブラリパレットからやや左向き画像(left01.gif)をドラッグし、中央の枠に合うように配置する。配置したらメニューの「修正」→「シンボルに変換」で「グラフィックシンボル」に変換する。続いて6フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを挿入し、左向き画像(left02.gif)を同じ場所にドラッグする。配置したら同様に「グラフィック・シンボル」に変換する。
顔レイヤーの10フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを作成する。空白キーフレームにライブラリパレットからやや右向き画像(right01.gif)をドラッグし、中央の枠に合うように配置する。配置したらメニューの「修正」→「シンボルに変換」で「グラフィックシンボル」に変換する。続いて11フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを挿入し、右向き画像(right02.gif)を同じ場所にドラッグする。配置したら同様に「グラフィック・シンボル」に変換する。
顔レイヤーの15フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを作成する。空白キーフレームにライブラリパレットからやや右向き画像(up01.gif)をドラッグし、中央の枠に合うように配置する。配置したらメニューの「修正」→「シンボルに変換」で「グラフィックシンボル」に変換する。続いて16フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを挿入し、右向き画像(up02.gif)を同じ場所にドラッグする。配置したら同様に「グラフィック・シンボル」に変換する。
顔レイヤーの20フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを作成する。空白キーフレームにライブラリパレットからやや右向き画像(down01.gif)をドラッグし、中央の枠に合うように配置する。配置したらメニューの「修正」→「シンボルに変換」で「グラフィックシンボル」に変換する。続いて21フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを挿入し、右向き画像(down02.gif)を同じ場所にドラッグする。配置したら同様に「グラフィック・シンボル」に変換する。
ボタンレイヤーの1フレーム目を選択し、ツールバーの楕円ツールを利用して図のように4つのボタンを描く。正円を描くにはキーボードのshiftキーを押しながらドラッグすると正円が描ける。枠線は無しで塗りだけで円を描くこと。描いたらそれぞれメニューの「修正」→「シンボルに変換」で「ボタンシンボル」に変換する。名前はleft_bt(左)、right_bt(右)、up_bt(上)、down_bt(下)とつけることとする。
タイトルレイヤーを選択してから「レイヤーの追加」ボタンをクリックし、タイトルレイヤーの上に新たなレイヤーを作る。レイヤー名は「action」にしておこう。
actionレイヤーの1フレーム目を選択し、以下のようなスクリプトを書く。同様に、6フレーム目、11フレーム目、16フレーム目、21フレーム目にメニューの「挿入」→「タイムライン」→「キーフレーム」でキーフレームを作成し、同じスクリプトをフレームに書く。Flashでは基本的にストップという命令を与えない限り、フレームは自動再生されるようになっている。したがって、このスクリプトはフレームの最初とそれぞれ顔が振り向き終わったところでストップする命令ということになる。
left_btボタン・シンボルをクリックして選択し、アクション・ウィンドウを表示する。アクション・ウィンドウに以下のようなスクリプトを書いてみよう。「rollOver」はマウス・カーソルがボタン上に入ったら、「rollOut」はマウス・カーソルがボタン上から出たら、ということを表している。つまり、ここでのスクリプトには、マウス・カーソルがボタン上に入ったら5フレームへ行け、マウス・カーソルがボタン上から出たら1フレームに行け、という命令が書いてあることになる。(注:ここではボタンに書く。間違ってフレームにスクリプトを書かないように。必ずステージにあるleft_btボタン・シンボルをクリックしてからアクション・ウィンドウを開くこと。)
right_btボタン・シンボルをクリックして選択し、アクション・ウィンドウを表示する。アクション・ウィンドウに以下のようなスクリプトを書いてみよう。(注:ここもボタンに書く。必ずステージにあるright_btボタン・シンボルをクリックしてからアクション・ウィンドウを開くこと。)
up_btボタン・シンボルをクリックして選択し、アクション・ウィンドウを表示する。アクション・ウィンドウに以下のようなスクリプトを書いてみよう。(注:ここもボタンに書く。必ずステージにあるup_btボタン・シンボルをクリックしてからアクション・ウィンドウを開くこと。)
down_btボタン・シンボルをクリックして選択し、アクション・ウィンドウを表示する。アクション・ウィンドウに以下のようなスクリプトを書いてみよう。(注:間違ってフレームにスクリプトを書かないように。必ずステージにあるdown_btボタン・シンボルをクリックしてからアクション・ウィンドウを開くこと。)
すべてのボタンにスクリプトが書けたら、ボタンレイヤーの21フレーム目を選択しメニューの「挿入」→「タイムライン」→「フレーム」でフレームを挿入する。これでボタンが最後のシーンまで登場することになる。
窓枠レイヤーの21フレーム目を選択しメニューの「挿入」→「タイムライン」→「フレーム」でフレームを挿入する。これで窓枠も最後のシーンまで登場することになる。
タイトルレイヤーの1フレーム目にあるテキストを書き換えてタイトルをつけよう。ここでは練習なので任意のものでよい。本番の作品では相応しいタイトルをつけること。タイトルが書けたら、タイトルレイヤーの21フレーム目を選択しメニューの「挿入」→「タイムライン」→「フレーム」でフレームを挿入する。これでタイトルも最後のシーンまで登場することになる。
ここまでできたら、メニューの「ファイル」→「保存」でまずflaファイルを保存しよう。次に、「ファイル」→「パブリッシュプレビュー」→「Flash」でプレビューして動作を確認しよう。マウスカーソルに合わせて顔が上下左右に動けばOKである。
プレビューで確認できたら、パブリッシュ設定を行う。メニューの「ファイル」→「パブリッシュ設定」で形式タブの「Flash」と「HTML」のチェックボックスにチェックを入れる。次に、Flashタブを選択し、Flash Playerのバージョンを確認する。チェックが済んだら、「ファイル」→「パブリッシュ」を選択しよう。flaファイルと同じディレクトリに同じファイル名のhtmlファイルとswfファイルが書き出されるはずである。書き出されたhtmlファイルをダブルクリックしてみよう。ブラウザが自動で起動しswfファイルが読み込まれるはずである。これで問題なく動作すれば完成である。
本日の課題もある情況をどのようにカットしてくるかがポイントになるが、その練習として編集の練習をしてみよう。専修大学に入学して早くも2ヶ月が過ぎ、大学の雰囲気もなんとなくつかめてきたことだろうから、「大学」というお題で5, 7, 5, 7, 7の短歌を作りなさい。