月曜2限(前期)情報と文化演習「Webアニメーション」・月曜2限(後期)基礎心理学特講・2「Webアニメーション応用」制作のために


 制作のために
キーワード
フラッシュアニメーションの作成によく使う言葉があります。
フラッシュは「場所、物、時間」を定義していくことでアニメーションを作成していきます。
それぞれの言葉はそれらと関連しているのでそれを意識するとわかりやすいです。
     
●ステージ ●オブジェクト、シンボル
場所。アニメーションの表示エリア。

大きさ、背景の色、フレームレートを定義できます。
授業では640×480ピクセル、
フレームレートは30FPSで制作してください。


  物。モノを表すデータ、シンボルとも言う。

フラッシュでは、用途に応じて3種類のオブジェクトタイプがあります。
 ・グラフィック(デフォルト的。使いやすい)
 ・ムービークリップ(プログラムを使う場合使用)
 ・ボタン(ボタン機能。簡単なプログラムに使いやすい)
目的に応じて使い分けますが、授業ではまずは「グラフィック」を使います。
     
●タイムライン ◎プロパティー
時間定義する場所。
フレームとレイヤーを持つ。


  シンボルが持つデータ。
大きさ、形、場所、色、透明度など。
     
◎フレーム ◎モーショントゥイーン・シェイプトィーン
1フレームはフラッシュの中の時間の最小単位。
30フレーム/秒(FPS)は1秒間に30フレーム。
つまり1秒間に30枚の画像が表示されるということ。
(映画24フレーム/秒、テレビ30フレーム/秒)
  キーフレームとキーフレームの間をコンピュータが補完してアニメーションを作ってくれます。
モーショントィーンは動きや色の変化(プロパティー)
シェイプトィーンは形の変化(モーフィング)
     
◎キーフレーム ◎レイヤー
フレームの中でシンボルのプロパティーが定義されている場所。タイムラインの中で黒い点で表示されます。


  フォトショップやイラストレータなどのグラフィックツールのレイヤーと同じです。上のレイヤーほど手前に表示されます。
フラッシュの場合レイヤー1つに一つのトィーン(アニメーション)を定義できます。
   
◎パブリッシュ ◎インポート
普段、作成中はフラッシュアプリケーデョンの中でプレビューして動きを確かめますが、実際にWEBに公開する場合は、パブリッシュという作業でswfファイルという公開形式のファイルを作ってネットワーク上に配置します。

データは小さく圧縮され編集用のデータはすべて外されて再生専用のデータを作ることで、データの転送や動きを軽くすることができ、WEB公開に最適化されたデータができます。
  フラッシュ内ではベクトルの画像データの作成はできますが、それ以外のデータは作れません。

ビットマップ画像、ベクトル画像、音声、音楽、動画など、様々なデータと様々なタイプのデータは別アプリケーションで作りフラッシュ内に取り込むことにより、いろいろな素材を利用することができます。
   
◎入れ子 ◎スクリプト
シンボルはシンボルを含むことができます。
これを入れ子(階層化)と言います。

シンボルの内側にシンボルを入れることにより、より複雑な動きを表現できます。例えば回転したり、色を一定間隔で変化さながら移動するオブジェクトなども、シンボルの入れ子を使ってより簡単に表現することができます。
  フラッシュはアクションスクリプトというオブジェクト指向のスクリプトを備えています。
ムービークリップやボタンのシンボルを使い、様々の複雑なプログラムを比較的簡単に組むことができます。
   
   

ショートカット
フラッシュの製作には何度も単純な繰り返しが必要な地道な作業が沢山あります。
1回ずつメニューやコンテクストメニューから操作を選んでいるととても時間がかかる作業も、
ショートカットキーを使うとずっと短い時間で作業できます。
効率よくショートカットキーを使って作品作りの手助けにしましょう。
     
【F5】フレームの挿入(※) 【SHIFT+F5】フレームの削除(※)
タイムラインにフレームを追加できます。
非常に良く使います。
  タイムラインからフレームを削除します。
非常に良く使います。
     
【F6】キーフレームの挿入(※) 【SHIFT+F6】キーフレームの削除(※)
タイムラインにキーフレームを追加できます。
非常に良く使います。
  タイムラインからキーフレームを削除します。
非常に良く使います。
     
【F7】空白キーフレームの挿入 【F8】シンボルに変換
タイムラインに空白のキーフレームを追加できます。
シンボルの表示を消したりする場合使います。
  描画オブジェクトや文字オブジェクトをシンボルに変換します。沢山のオブジェクトを一度に個別に変換が必要な時使います。
     
【CTRL+B】分解 【CTRL+ENTER】プレビュー(※)
シンボルやグループを分解して一番外側のコンテナを取り去ります。文字列をバラバラにしたり、インポートしたデータを整理するのに便利です。   ムービーをパブリッシュしてそのまま再生します。
非常に良く使います。
   
その他よく使うショートカット

編集系
【CTRL+A】すべて選択 【CTRL+C】コピー 【CTRL+X】カット
【CTRL+V】ペースト 【CTRL+SHIFT+V】同じ位置にペースト

【CTRL+Z】アンドゥ(取り消し)  【CTRL+Y】リドゥ(取り消しのやり直し)

タイムライン
【SHIFT+クリック】複数フレーム選択 【ALT+ドラッグ】フレーム(キーフレーム)をドラッグ先にコピー
 
ステージ
【(オブジェクト変形時)SHIFT+ドラッグ】縦横等倍で変形や、一定間隔で回転
【(オブジェクト選択時)SHIFT+ドラッグ】水平移動、垂直移動、45度方向移動
【(オブジェクト選択時)ALT+ドラッグ】移動しながらコピー

   
   
 素材データについて(インポート)

素材に使用できるデータと特徴を説明します。他にも色々ありますが、ここでは代表的なものを挙げます。
現在のバージョンはビデオなどムービーの取り込みも出来ます。要望がある場合掲示板でどうぞ。


画像データ
     
◎フォトショップPSD (ビットマップ) ◎イラストレータEPS(ベクトルデータ)
ビットマップとしてステージに挿入できます。
レイヤーをそれぞれ別のオブジェクトとして取り込むことが出来、非常に便利です。

  ベクトルデータとしてステージに挿入できます。
グラデーションやスタイル等はうまく取り込めない事があります。
うまく行かない場合、イラストレーターからSWFファイルを書き出してフラッシュにインポートして使用します。
     
◎BMP (ビットマップ) ◎イラストレータSWF形式(ベクトルデータ)
ビットマップとしてステージに挿入できます。
ビットマップでおそらく唯一アルファチャンネル付でファイルをインポートできます(WINDOWS)
アルファチャンネルを使ってマスク付のデータをインポートする場合必須です。(WINDOWS)
キャラクターのパーツなどをビットマップで作る場合、面倒ですが フォトショップなどのレイヤーを一つずつこの形式に変更してセーブしなおす必要があります。
  イラストレーターからデータのインポートを行う場合最も理想的な方法です。
「レイヤーをファイルに変換」 というオプションを使うことで、イラストレーターで作ったファイルをレイヤーそのまま、位置もぴったりステージに自動的に配置されます。

     
◎PING (ピング) ○JPEG (ビットマップ)

ビットマップとしてステージに挿入できます。
アルファチャンネル付でファイルをインポートできるため、一般的です。また、色の再現性が一番正確なのでPSD等からインポートして色がわずかに変わってしまったりする場合PINGに変換してインポートすることで解決できます。

 

ビットマップとしてステージに挿入できます。
特に特徴はありませんが、画像が劣化する可能性があるので、もともと他のファイル形式であるデータをわざわざこの形式に変換してインポートするのは推奨されません。

     
     
音声データ
     
◎WAVE (音声ファイル) ◎AIFF(音声ファイル)
使用可能です。(WINDOWS)
  使用可能です。(MAC)
     
◎MP3 (音声ファイル) ◎MID (MIDIファイル)
使用可能です。
現状ではもっともよく使われるデータ形式です。
  使用可能ですが、MP3などに変換が必要です。
授業では、MacのiTuneを使って変換してます。
知りたい事や質問は掲示板にもどうぞ。