Information Expression Seminar.

5月22日|Flashによる動的表現1

Flashはweb上のインタラクティヴなコンテンツ作りに必須のスキルになっています。この授業の1コマではとても全部は紹介できません。ぜひ、書店で参考書を購入し、いろいろな機能を試して表現の幅を広げる努力をすることをお勧めします。また、web上にもたくさんのサンプルや ActionScriptの書き方が掲載されていますので、検索してチェックしてみてください。

1|Flashによる動的表現

1.1 Flashとは

web上でアニメーションやインタラクティブなコンテンツを作成するアプリケーションである。Flashで作られたファイルを見るためには、 Flash Playerやプラグインが必要となるが、無償配布されており広く普及している。また、PhotoshopやIllustratorのデータも読み込むことが可能である。最近のバージョンでは映像や3Dも扱えるようになり、オーサリングツールとしての役割も担えるまでに発展してきている。

端末室ごとにFlashのバージョンの違いがあるが、今回の課題を行うような基礎的な使い方ではそれほど差はないので、まずは動きのある表現を行う場合の基本を身につけよう。

※最近ではHTML5の普及によりインタラクティブコンテンツの制作手法の選択肢が広がっているが、柔軟なアニメーション表現などオーサリング時の強みも多いため、入門として本講義ではFlashを扱う。

1.2 Flashによる表現

地球ガイド  エコだ!動物園

*表現を研究するために見るのであって、授業中にサイト閲覧にはまらないように。

1.3 Flashの起動:新規ドキュメント設定時の注意

Flash CS3, CS4では、新規作成時にActionScript3.0や2.0などの形式を選べるようになっていますが、今回のサンプルを元に制作する時には「Flashファイル(AS 3.0)」を選んでください。

1.4 FlashCS4の初期画面

(1)画面設定

CS4を使う場合は、メニューの上にある検索スペースのとなりのボタンをクリックし、画面設定を「初期設定」から「クラシック」に変更する。 慣れてきたら各自好きな設定を選んでよい。ステージのサイズは初期設定(550×400px)のままとする。

flashCS4画面

 

(2)ガイド、グリッドの表示

まず、メニューの「表示」→「ルーラー」および「グリッドの表示」にチェック入れ、ステージ上にルーラーとグリッドを表示させる。次に「プロパティ」が表示されていなければ(CS4はデフォルト表示)、メニューの「ウィンドウ」→「プロパティ」を選択しプロパティウィンドウを表示する。

2| トゥイーンによるアニメーション

2.1 モーショントゥイーン

(1)円を描く→シンボルに変換

楕円ツールで塗りあり、枠線なしの小さい「円」を1つ作る(正円を描くにはshiftキーを押しながらドラッグする)。塗りの色は自由に選択する。描いたら右クリックして「シンボルに変換」を選択。または、メニューの「修正」→「シンボルに変換」を選択。

 

「ball」と名前をつけて、タイプを「ムービークリップ」に変換し、基準点は真中にする。

 

(2)トゥイーンの作成(CS4) *CS3は2.2 モーショントゥイーン(CS3)へ移動

タイムラインの1フレーム目を右クリックし、「モーショントゥイーンを作成」を選択。または、プロパティウィンドウの「トゥイーン」→「モーション」を選択する。タイムライン上の背景色が青くなり、自動的にフレームが伸びる。

 

(3)シンボルの移動(CS4)

シンボルをドラッグして、最初にあった位置から移動させる。するとCS4では自動的にパスが描かれるようになっている。移動できたら、メニューの「ウィンドウ」→「ツールバー」→「制御パネル」で「制御パネル」を出して再生ボタンを押してみよう。アニメーションしているはずである。

 

(4)パスの調整(CS4)

ペンツールを長押しして「アンカーポイントの切り替えツール」に切り替え、アンカーポイントをドラッグすると直線だったパスを曲線へと変更することができる。また、パス上の点を選択ツール(黒矢印)でドラッグすると、さらに曲線を細かく調整することができるようになる。

 

(5)イージングの調整(CS4)

パスをクリックしてからプロパティウィンドウにあるイージングの値を変えてみよう。イージングはトゥイーンの速度に変化をつける機能である。例えば、車の動きをイメージすると分かりやすい。車がスタートしたらスピードは徐々にあがり、止まるときには徐々に減速して止まる。そのような加速・減速の調整をするのがイージングである。イージングを調整することにより、動きがより自然に見えるようになる。値を100から-100まで変えて、動きがどのように変わるか試してみよう。

 

(6)アルファの調整(CS4)

タイムラインを1フレーム目に戻した後に、一度シンボルをクリックしてからプロパティウィンドウの「カラー効果」→「スタイル」の「アルファ」を選択し、値を変更してみよう。0にすると透明になるはずである。モーショントゥイーンが設定されていれば、1フレーム目に透明であったシンボルがタイムラインが進むにしたがって徐々に現れるようになるはずである。逆に最終フレームにアルファ:0を設定すれば徐々に消えるアニメーションになる。

 

*ここまできたらCS4は、「3|ボタンによるコントロール」へ。

 

2.2 モーショントゥイーン(CS3)

(1)キーフレームを作る(CS3)

タイムラインの30フレーム目を右クリックし、「キーフレームの挿入」を選択。または、メニューの「挿入」→「タイムライン」→「キーフレーム」を選択する。

 

(2)シンボルの移動(CS3)

タイムラインの30フレーム目をクリックしてから、シンボルを最初にあった位置から別の場所へ移動する。

 

(3)モーショントゥイーンの作成(CS3)

次に、1フレーム目を右クリックし、「モーショントゥイーンを作成」を選択。または、プロパティウィンドウの「トゥイーン」→「モーション」を選択する。正しくできるとタイムライン上の背景色が青くなり、最初のフレームから最後のフレームまで矢印が引かれる。矢印が点線になった場合は失敗なので、やり方をもう一度確認してやり直すこと。正しくできたら、メニューの「ウィンドウ」→「ツールバー」→「制御パネル」で「制御パネル」を表示して再生ボタンを押してみよう。アニメーションしているはずである。

 

(4)モーションガイドレイヤー(CS3)

レイヤー1を選択し、「モーションガイド追加」ボタンをクリックする。クリックするとレイヤー1の上にモーションガイドレイヤーが追加される。

 

(5)パスの描画(CS3)

ガイドレイヤーの1フレーム目を選択しペンツールでパスを描く。パスを曲線にする場合には、ペンツールを長押しして「アンカーポイントの切り替えツール」に切り替え、アンカーポイントをドラッグする。

 

(6)パスの調整(CS3)

アンカーポイントのハンドルを回転・伸張すると曲線の曲がり具合が変化するので調整する。

 

(7)パスの始点への吸着(CS3)

レイヤー1の1フレーム目を選択し、ステージにあるシンボルをドラッグして、シンボルの中心点と先ほど描いたモーションガイド・パスの始点を吸着させる。

 

(8)パスの終点への吸着(CS3)

レイヤー1の30フレーム目を選択し、ステージにあるシンボルをドラッグして、シンボルの中心点と先ほど描いたモーションガイド・パスの終点を吸着させる。「制御パネル」を出して再生ボタンを押してみよう。パスに沿ってアニメーションしているはずである。

 

(9)イージングの調整(CS3)

パスに沿って動くアニメーションが確認できたら、動きに加速・減速を加えてみよう。イージングはトゥイーンの速度に変化をつける機能である。例えば、車の動きをイメージすると分かりやすい。車がスタートしたらスピードは徐々にあがり、止まるときには徐々に減速して止まる。そのような加速・減速の調整をするのがイージングである。イージングを調整することにより、動きがより自然に見えるようになる。レイヤー1の1フレーム目を選択してからプロパティウィンドウの「イージング」の値を変えてみよう。100から-100までの値で設定できるので、アニメーションの動きがどのように変るか試してみよう。

 

(10)アルファの調整(CS3)

タイムラインを1フレーム目に戻した後に、一度シンボルをクリックしてからプロパティウィンドウの「カラー効果」→「スタイル」の「アルファ」を選択し、値を変更してみよう。0にすると透明になるはずである。モーショントゥイーンが設定されていれば、1フレーム目に透明であったシンボルがタイムラインが進むにしたがって徐々に現れるようになるはずである。逆に1フレーム目はアルファ:100、最終フレームにアルファ:0を設定すれば徐々に消えるアニメーションになる。

 

 

▲TOPへ

3| ボタンによるコントロール

作成の手順

(1)ボタンの作成

ボタンを作成して、クリックするとアニメーションが始まるようにしてみよう。
まずレイヤーをひとつ増やして(*CS3の場合はモーションガイドレイヤーより上に作成すること)、1フレーム目に長方形ツールを使い四角いボタンのグラフィックを描く。テキストで「START」と文字を書き長方形の上に置く。ボタンのグラフィックとテキストを両方選択して、右クリックから「シンボルに変換」で名前を「start_btn」と付けて「ボタン」シンボルに変換する。または、メニューの「修正」→「シンボルに変換」で「ボタン」シンボルに変換しよう。

 

(2)インスタンス名をつける

ボタンシンボルをクリックし、プロパティウィンドウのインスタンスに「start_btn」とインスタンス名をつける。ActionScriptから制御するには、シンボル名だけではなく、インスタンス名をつける必要がある。

 

(3)ActionScriptの記述 

ActionScriptはFlashにおけるプログラミング言語である。ActionScriptを書くことによって、よりインタラクティブな仕掛けのあるコンテンツを作成することができる。現在の最新バージョンは3.0である。バージョン2.0までは、ボタンやムービークリップなどのそれぞれのシンボルごとに直接スクリプトを書くことができたが、3.0からは1カ所にまとめて記述したり、外部ファイルとして書いておき、それを読み込むという方法になった。今回は、先ほど作成したボタンをクリックするとアニメーションが再生するというスクリプトを書いてみる。

ボタンを作成したレイヤーの上に新たにレイヤーを作成し、レイヤー名を「as」としてActionScriptを記述するレイヤーとする。レイヤーが追加できたら、メニューの「ウィンドウ」→「アクション」で「アクション」ウィンドウを表示する。下記の図を参考に同じように書いてみよう。スクリプトが記述されると、タイムライン上のフレームに「a」の表示がされる。この「a」があるフレームがスクリプトが書かれた印である。なお、Flashのタイムラインは自動再生のため、最初のフレームにstop();という命令を書かないと自動的に再生を始めてしまうので気をつけよう。

 

(4)保存

ここまで完成したら、自身のネットワークドライブに「fla_animation」というディレクトリ(フォルダ)を作成し、メニューの「ファイル」→「保存」で半角英数小文字でファイル名をつけてFlashドキュメントファイルを保存する(拡張子は.fla)。なお、flaファイルは編集段階のファイルなので、このままではweb上で見ることはできない。ブラウザ等で見る場合には(5)のパブリッシュを行う必要がある。

 

(5)パブリッシュ

web上で見るためには、「ファイル」→「パブリッシュ設定」を選択し、形式タブの「Flash(.swf)」と「HTML(.html)」のチェックボックスにチェックする。次に、Flashタブを選択しバージョンを「Flash player10」(またはFlash player9)を選択し、パブリッシュボタンを押す。 swfファイルとhtmlファイルが自動でflaファイルと同じ場所に書き出される。書き出されたswfファイルがweb上で実行可能なファイル形式である。なお、パブリッシュは自動ファイル書き出しのため、ソースコードにファイル名を自動で埋めこんでいる。パブリッシュ後にファイル名を書き換えるとリンクが切れてしまうので注意が必要。あらかじめ、flaファイルを保存する時点でファイル名をちゃんと付けておこう。 パブリッシュができたらhtmlファイルをブラウザで開き、ちゃんとswfファイルが読み込まれ正しく実行されるか確認しよう。

 

(6)その他の使い方

Flashの表現は幅広く、今回紹介したのは一部である。参考書やweb上でもたくさんの使い方や表現方法が掲載されているので各自で研鑽してもらいたい。基礎的な使い方として、以下の教材も参考になるので参照のこと。

【過去のバージョンの使用例】

 

▲TOPへ

 

4|本日のまとめ

演習のまとめ

ミニレポート

FlashでつくられたWebコンテンツは多く見られるが、なぜか「気持ちいい」動きと「気持ち悪い」動きがある。つまり、ただ動かしただけではダメで、その精度を細かくチューニングしていく必要がありそうだ。MOMAの「Design and the Elastic Mind」のサイトを見て、この動きはなぜ多くの人にとって気持ちいいかを考え、あなたなりに推測した理由を二つ以上述べなさい。

本日の課題

▲TOPへ □ HOME