2008 Information Literacy Seminar.
Flashはweb上のインタラクティヴなコンテンツ作りに必須のスキルになっています。この授業の1コマではとても全部は紹介できません。ぜひ、書店で参考書を購入し、いろいろな機能を試して表現の幅を広げる努力をすることをお勧めします。また、web上にもたくさんのサンプルや ActionScriptの書き方が掲載されていますので、検索してチェックしてみてください。
web上でアニメーションやインタラクティブなコンテンツを作成するアプリケーションである。Flashで作られたファイルを見るためには、 Flash Playerやプラグインが必要となるが、これは無償配布されており、広く普及している。また、PhotoshopやIllustratorのデータも読み込むことが可能である。Flash8からはビデオの画像も簡単に扱えるようになり、オーサリングツールとしての役割も担えるまでに発展してきている。
表現を研究するために見るのであって授業中にGAMEにはまらないように。

まず、メニューの「ウィンドウ」→「プロパティ」→「プロパティ」を選択しプロパティウィンドウを表示する。次に、メニューの「表示」→「ルーラー」、「グリッドの表示」にチェック入れ、ステージ上にルーラーとグリッドを表示させる。
楕円ツールで塗りあり、枠線なしの「円」を1つ作る(正円を描くにはshiftキーを押しながらドラッグする)。色は自由に選択する。メニューの「修正」→「シンボルに変換」を選択。タイプを「ムービークリップ」に変換し、基準点は真中にする。

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

30フレーム目のシンボルを最初にあった位置から別の場所へ移動する。

タイムラインの1フレーム目を選択し、プロパティウィンドウの「トゥイーン」→「モーション」を選択する。

タイムライン上に1フレーム目から30フレーム目まで自動的に矢印が引かれ、背景が青色になる(矢印が点線になっている場合は正しくできていないので、もう一度手順をよく確認してやり直す)。メニューの「ファイル」→「パブリッシュプレビュー」→「Flash」でプレビューして動きを確認してみよう。

タイムラインのレイヤー追加ボタンをクリックしレイヤーを1つ追加する。

レイヤー2のタイムラインの1フレーム目を選択し、楕円ツールで円を描く(注:シンボルには変換しない)。レイヤー1の円と混同しないように異なる色で描こう。

タイムラインの30フレーム目を選択し、メニューの「挿入」→「タイムライン」→「空白キーフレーム」を選択する。

タイムラインの30フレーム目に矩形ツールで色違いの四角を描く(注:シンボルには変換しない)。

タイムラインのレイヤー2の1フレーム目を選択し、プロパティウィンドウの「トゥイーン」→「シェイプ」を選択する。

タイムライン上に1フレーム目から30フレーム目まで自動的に矢印が引かれ、背景が緑色になる(矢印が点線になっている場合は正しくできていないので、もう一度手順をよく確認してやり直す)。メニューの「ファイル」→「パブリッシュプレビュー」→「Flash」でプレビューして動きを確認してみよう。

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

ガイドレイヤーの1フレーム目を選択し、ペンツールでパスを描く。パスを曲線にする場合には、ツールの「ダイレクト選択ツール(白矢印)」でアンカーポイントをキーボードの「Alt」キーを押しながらクリックする。ハンドルが出てくるので、のばしたり回転させて曲線の描き方を調整する。

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

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

メニューの「ファイル」→「パブリッシュプレビュー」→「Flash」で動きを確認してみよう。パスに沿ってアニメーションが動くはずである。
(注意:モーションガイド・パスに沿ったアニメーションは、オブジェクトがシンボルに変換されていないとできません。)
パスに沿って動くアニメーションが確認できたら、動きに加速・減速を加えてみよう。レイヤー1の1フレーム目を選択し、プロパティウィンドウの「イージング」の値を変えてみよう。100から-100までの値で設定できるので、アニメーションの動きがどのように変るかプレビューして試してみよう。

徐々にオブジェクトが現れたり、徐々に消えたりする透明効果の設定をすることも可能である。レイヤー1の1フレーム目にあるステージ上のシンボル(例では赤い円)をクリックし、プロパティウィンドウの「カラー」→「アルファ」を選択する。100%から0%の値で設定できるので、0%にしてプレビューして確認してみよう。徐々にシンボルが現れるはずである。

ボタンを作成して、クリックするとアニメーションが始まるようにしてみよう。
まずレイヤーをひとつ増やして、1フレーム目に長方形ツールを使いボタンのグラフィックを描く。テキストで「START」と文字を書き長方形の上に置く。ボタンのグラフィックとテキストを両方選択して、メニューの「修正」→「グループ」でひとつのグループにする。グラフィックが完成したら、選択してメニューの「修正」→「シンボルに変換」で「ボタン」に変換しよう。

シンボルに変換したボタンを選択し、メニューの「ウィンドウ」→「アクション」でアクションウィンドウを表示する。アクションウィンドウに下記の図のように記述する。

FlashではActionScriptでstopをかけないかぎりフレームは自動再生されるようになっている。そこで、新たにレイヤーを作りフレームにActionScriptを書くことで自動再生を制御してみよう。他のレイヤーと区別がつくように名前を「action」にしておこう。

actionレイヤーの1フレーム目を選択し、アクションウィンドウに下記の図のように「stop();」と記述する。記述したら「パブリッシュプレビュー」→「Flash」で、STARTボタンをクリックするとアニメーションが再生されるかどうかを確認しよう。

完成したら、自身のネットワークドライブに「flash」というディレクトリを作成し、メニューの「ファイル」→「保存」で半角英数字でファイル名をつけてFlashドキュメントファイルを保存する(拡張子は.fla)。なお、flaファイルは編集段階のファイルなので、このままではweb上で見ることはできない。ブラウザ等で見る場合には(6)のパブリッシュを行う必要がある。
web上で見るためには、「ファイル」→「パブリッシュ設定」を選択し、形式タブの「Flash(swf)」と「HTML(html)」のチェックボックスにチェックする。次に、Flashタブを選択しバージョンを「Flash player8」を選択し、パブリッシュボタンを押す。 swfファイルとhtmlファイルが自動でflaファイルと同じ場所に書き出される。書き出されたswfファイルがweb上で実行可能なファイル形式である。

(注意:端末室のFlash playerのバージョンに合わせる必要がある。Flash playerのバージョンが低い場合には、バージョンダウンしてパブリッシュしよう。)
パブリッシュしたhtmlファイルをブラウザで開き、ちゃんとswfファイルが読み込まれ正しく実行されるか確認しよう。
Flashの表現は幅広く、今回紹介したのは一部である。参考書やweb上でもたくさんの使い方や表現方法が掲載されているので各自で研鑽してもらいたい。基礎的な使い方として、以下の教材も参考になるので参照のこと。
FlashでつくられたWebコンテンツは多く見られるが、なぜか「気持ちいい」動きと「気持ち悪い」動きがある。つまり、ただ動かしただけではダメで、その精度を細かくチューニングしていく必要がありそうだ。MOMAの「Design and the Elastic Mind」のサイトを見て、この動きはなぜ多くの人にとって気持ちいいかを考え、あなたなりに推測した理由を二つ以上述べなさい。