Information Expression Seminar.

6月2日|Flashによる動的表現2

FlashはActionScriptというプログラムを書くことにより、インタラクティヴな表現が可能になります。今回は簡単なActionScriptを書いてマウス操作に合わせて動きの変わる作品を制作してみましょう。本日は少し難易度があがりますので、先生の操作説明を集中して聞くようにしてください。

1|インタラクティブな表現

マウス操作によって映像が切り替わる

下記のリンクからWeb Dramaとして制作された作品を参照してみよう。作品はいずれも映像作家の宇田敦子氏。Flashを用いて新しい映像作品の領域を作りだしている。通常の映像ではなく、ユーザがマウスを操作する時に映像の中に時間が発生しているのがわかるだろう。

新規ドキュメント設定時の注意

現在インストールされているFlash CS3では、新規作成時にActionScript3.0や2.0などの形式を選べるようになっているが、今回のサンプルを元に制作する時には「Flashファイル(AS 2.0)」を選ぶ。また端末機によっては以前のバージョンのFlash8が入っているが、その場合そちらを使っても構わない。

2|素材作りとタイムラインへの配置

2.1 素材の準備

(1)素材の準備

自分の保存領域に、Flash2_Sampleというディレクトリ(フォルダ)を作り、下記の9つの顔画像をドラッグしてダウンロードしよう。 授業ではとりあえず使い方を覚える為に、下記の画像を使用して進めることとする。

 

課題作品として提出する作品には、下の画像のように9つの角度の顔画像を携帯電話のカメラ等で撮影し(友人に協力してもらい、なるべく自分の顔画像を撮影する)、自分のメールアドレスに送って使用する。その際、画像サイズはPhotoshopで切り抜くなどの加工をする。解像度72dpi、サイズは縦横ともに100px。保存形式はJPEG。ファイル名は任意だが、半角英数字で分かりやすい名前にしよう(例:middle.jpg, right.jpg, left.jpgなど)。また、顔の動きがあまり大き過ぎると不自然なので注意すること。

 

(2)テンプレートのダウンロード

下記のリンクからテンプレートをsampleディレクトリ(フォルダ)にダウンロードしFlashで開いてみよう。

→ テンプレート

 

 

(3)素材の読み込み

テンプレートが開けたら、先ほどの素材をメニューの「ファイル」から「読み込み」→「ライブラリに読み込み」ですべて読み込む。ライブラリパレットに画像が追加されるはずなので確認しよう。

 

 

2.2 タイムラインへの配置

(1)新規レイヤーの作成

タイムラインに新たなレイヤーを追加する。ボタンレイヤーを選択した上で、「レイヤーの追加」ボタンをクリックしてボタンレイヤーの上に新たなレイヤーを作成する。レイヤーの名前を「顔」にしておこう。

 

 

(2)タイムラインへの顔の配置

メニューの「表示」から「ガイド」→「ガイドを表示」でガイドを表示させてみよう(テンプレートにはあらかじめガイドが作成してある。このガイドを描くにはステージの上と左に表示されているルーラー(定規)からドラッグすることで描くことができる)。ガイドが表示されたら顔レイヤーの1フレーム目を選択し、ガイドに沿って真中の枠に合うように正面を向いた画像(middle.gif)をライブラリパレットからドラッグして配置する。配置したら、メニューの「修正」→「シンボルに変換」で「グラフィック・シンボル」に変換する。基準は真中にしておこう。

 

 

(3)左向きの画像の配置

1、顔レイヤーの5フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを作成する。空白キーフレームにライブラリパレットからやや左向き画像(left01.gif)をドラッグし、中央の枠に合うように配置する。配置したらメニューの「修正」→「シンボルに変換」で「グラフィックシンボル」に変換する。続いて6フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを挿入し、左向き画像(left02.gif)を同じ場所にドラッグする。配置したら同様に「グラフィック・シンボル」に変換する。

 

 

(4)右向き画像の配置

顔レイヤーの10フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを作成する。空白キーフレームにライブラリパレットからやや右向き画像(right01.gif)をドラッグし、中央の枠に合うように配置する。配置したらメニューの「修正」→「シンボルに変換」で「グラフィックシンボル」に変換する。続いて11フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを挿入し、右向き画像(right02.gif)を同じ場所にドラッグする。配置したら同様に「グラフィック・シンボル」に変換する。

 

 

(5)上向き画像の配置

顔レイヤーの15フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを作成する。空白キーフレームにライブラリパレットからやや右向き画像(up01.gif)をドラッグし、中央の枠に合うように配置する。配置したらメニューの「修正」→「シンボルに変換」で「グラフィックシンボル」に変換する。続いて16フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを挿入し、右向き画像(up02.gif)を同じ場所にドラッグする。配置したら同様に「グラフィック・シンボル」に変換する。

 

 

(6)下向き画像の配置

顔レイヤーの20フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを作成する。空白キーフレームにライブラリパレットからやや右向き画像(down01.gif)をドラッグし、中央の枠に合うように配置する。配置したらメニューの「修正」→「シンボルに変換」で「グラフィックシンボル」に変換する。続いて21フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」で空白キーフレームを挿入し、右向き画像(down02.gif)を同じ場所にドラッグする。配置したら同様に「グラフィック・シンボル」に変換する。

 

 

2.3 ボタンをつくる

(1)ボタンの配置

ボタンレイヤーの1フレーム目を選択し、ツールバーの楕円ツールを利用して図のように4つのボタンを描く。正円を描くにはキーボードのshiftキーを押しながらドラッグすると正円が描ける。枠線は無しで塗りだけで円を描くこと。描いたらそれぞれメニューの「修正」→「シンボルに変換」で「ボタンシンボル」に変換する。名前はleft_bt(左)、right_bt(右)、up_bt(上)、down_bt(下)とつけることとする。

 

 

3|ActionScriptによるコントロール

3.1 フレームへのActionScriptの記述

(1)ActionScriptを書くレイヤーを用意する

タイトルレイヤーを選択してから「レイヤーの追加」ボタンをクリックし、タイトルレイヤーの上に新たなレイヤーを作る。レイヤー名は「action」にしておこう。

 

 

(2)フレームへのスクリプトの記述

actionレイヤーの1フレーム目を選択し、以下のようなスクリプトを書く。同様に、6フレーム目、11フレーム目、16フレーム目、21フレーム目にメニューの「挿入」→「タイムライン」→「キーフレーム」でキーフレームを作成し、同じスクリプトをフレームに書く。Flashでは基本的にストップという命令を与えない限り、フレームは自動再生されるようになっている。したがって、このスクリプトはフレームの最初とそれぞれ顔が振り向き終わったところでストップする命令ということになる。

 

 

3.2 ボタンへのActionScriptの記述

(1)left_btにActionScriptを記述する

left_btボタン・シンボルをクリックして選択し、アクション・ウィンドウを表示する。アクション・ウィンドウに以下のようなスクリプトを書いてみよう。「rollOver」はマウス・カーソルがボタン上に入ったら、「rollOut」はマウス・カーソルがボタン上から出たら、ということを表している。つまり、ここでのスクリプトには、マウス・カーソルがボタン上に入ったら5フレームへ行け、マウス・カーソルがボタン上から出たら1フレームに行け、という命令が書いてあることになる。(注:ここではボタンに書く。間違ってフレームにスクリプトを書かないように。必ずステージにあるleft_btボタン・シンボルをクリックしてからアクション・ウィンドウを開くこと。)

 

 

(2)right_btにActionScriptを記述する

right_btボタン・シンボルをクリックして選択し、アクション・ウィンドウを表示する。アクション・ウィンドウに以下のようなスクリプトを書いてみよう。(注:ここもボタンに書く。必ずステージにあるright_btボタン・シンボルをクリックしてからアクション・ウィンドウを開くこと。)

 

 

(3)up_btにActionScriptを記述する

up_btボタン・シンボルをクリックして選択し、アクション・ウィンドウを表示する。アクション・ウィンドウに以下のようなスクリプトを書いてみよう。(注:ここもボタンに書く。必ずステージにあるup_btボタン・シンボルをクリックしてからアクション・ウィンドウを開くこと。)

 

 

(4)down_btにActionScriptを記述する

down_btボタン・シンボルをクリックして選択し、アクション・ウィンドウを表示する。アクション・ウィンドウに以下のようなスクリプトを書いてみよう。(注:間違ってフレームにスクリプトを書かないように。必ずステージにあるdown_btボタン・シンボルをクリックしてからアクション・ウィンドウを開くこと。)

 

 

3.3 各レイヤーのフレームを合わせる

(1)ボタンレイヤーにフレームを挿入する

すべてのボタンにスクリプトが書けたら、ボタンレイヤーの21フレーム目を選択しメニューの「挿入」→「タイムライン」→「フレーム」でフレームを挿入する。これでボタンが最後のシーンまで登場することになる。

 

 

(2)窓枠レイヤーにフレームを挿入する

窓枠レイヤーの21フレーム目を選択しメニューの「挿入」→「タイムライン」→「フレーム」でフレームを挿入する。これで窓枠も最後のシーンまで登場することになる。

 

 

(3)タイトルレイヤーにフレームを挿入する

タイトルレイヤーの1フレーム目にあるテキストを書き換えてタイトルをつけよう。ここでは練習なので任意のものでよい。本番の作品では相応しいタイトルをつけること。タイトルが書けたら、タイトルレイヤーの21フレーム目を選択しメニューの「挿入」→「タイムライン」→「フレーム」でフレームを挿入する。これでタイトルも最後のシーンまで登場することになる。

 

 

3.4 パブリッシュ

(1)flaファイルの保存

ここまでできたら、メニューの「ファイル」→「保存」でまずflaファイルを保存しよう。次に、「ファイル」→「パブリッシュプレビュー」→「Flash」でプレビューして動作を確認しよう。マウスカーソルに合わせて顔が上下左右に動けばOKである。

 

 

(2)設定の確認とパブリッシュ

プレビューで確認できたら、パブリッシュ設定を行う。メニューの「ファイル」→「パブリッシュ設定」で形式タブの「Flash」と「HTML」のチェックボックスにチェックを入れる。次に、Flashタブを選択し、Flash Playerのバージョンを確認する。チェックが済んだら、「ファイル」→「パブリッシュ」を選択しよう。flaファイルと同じディレクトリに同じファイル名のhtmlファイルとswfファイルが書き出されるはずである。書き出されたhtmlファイルをダブルクリックしてみよう。ブラウザが自動で起動しswfファイルが読み込まれるはずである。これで問題なく動作すれば完成である。

 

 

4|本日のまとめ

演習のまとめ

本日のミニレポート

本日の課題もある情況をどのようにカットしてくるかがポイントになるが、その練習として編集の練習をしてみよう。専修大学に入学して早くも2ヶ月が過ぎ、大学の雰囲気もなんとなくつかめてきたことだろうから、「大学」というお題で5, 7, 5, 7, 7の短歌を作りなさい。

本日の課題

▲TOPへ □ HOME