Flash によるアニメーションの作成

Flash によるアニメーションの作成
1. Macromeida Flash とアニメーション
World Wide Web のごく初期から，GIF 画像ファイルは Web 上の静止画像の標準的な地
位を確立していた。Web サイトがまだ少なかった当時は，画像ファイルを Web ページ上で
表現できるだけでも大きな効果があった。しかし，時代が進むにつれて，単純な静止画像
だけでは飽き足らない場合が出始めるようになった。
これに対応して，GIF の拡張としてインターレース形式での GIF ファイル(GIF89a など)
が規格化されるようになった。これは，１つの GIF ファイルに複数の画像を含んでおき，
これを時間を置いて表示する仕組みであった。いわゆる「パラパラ絵」の仕組みによる動
画の表示である。この仕組みを使うことで静止画の連続表示によって擬似的に動画像を表
示できる仕組みが整えられたのである。このような GIF アニメーションを作成するツール
として有名なものに GIF Construction Set がある。
このパラパラ絵を用いたアニメーション/動画の表示は，現在の Web ブラウザ(たとえば
Internet Explorer や Firefox, Safari など)でも標準的な画像形式である GIF そのものの機
能を使用するため，Web ブラウザによらず表示できるなどの利点がある反面，複数の画像
を含むことによるファイルサイズの増加などの問題点も含んでいた。
一方，デスクトップ・パブリッシングの黎明期から PostScript という技術があった。
Adobe
Systems が特許を持つ PostScript は，GIF などのビットマップ形式での画像ファイルでは
なく，ベクトル形式の画像言語であり，ピクセル単位で画像をつくる代わりに，インスト
ラクションによって画像を作成するものであった。たとえば，
「直径 100 ピクセルの円」を
表示する場合，ビットマップではキャンバス全体を示す点の集合を用意し，各点の色をデ
ータとして保持する必要があるのに対し，ベクトル形式の画像は，表示プログラムに「直
径 100 ピクセルの真円を描け」とだけ命令すればいいだけである。このため，ビットマッ
プ形式のものに比較してファイル容量を小さくすることができ，また，ファイル容量や品
質を損なうことなく，あらゆるサイズに拡大となるなどの特徴がある。Flash は，この技術
を用いて画像を構成する各要素をプログラムによって変化させた画像を作りだし，時間に
応じて少しずつ異なる画像を表示することで動画として見えるようにしたものである。
Flash はもともと FutureSplash と呼ばれていた。Macromedia 社が，自社の主力製品
Director を補完するために，FutureSplash を開発した小さな企業を買収したのである。
Director は，ウェブの登場以前から存在しているインタラクティブなプレゼンテーション
やゲームを作成するための高度なスクリプタブルなプログラムであった。
Macromeida は，1995 年頃に Director のムービーをウェブに移植する手段として
Shockwave を投入した。ユーザーは無償のプラグインをダウンロードしてインストールし
Shockwave ムービーを再生した。これは，当時（そして今でも）画期的なことだった。し
かし Director はウェブを念頭に入れて開発されたものではないため，Director のムービー
は帯域幅を大きく占有しがちであった。
一方，標準的な GIF や JPEG は融通のきくものではなく，
ファイル容量の問題もあって，
これらに代わるものを作成するニーズも高まってきた。現在，Macromedia 社は Adobe 社
の一部門となっている。
Director ほどスクリプタブルではないが(実際に Flash で複雑な CD-ROM のゲームを作
成するのは非常に困難である)，Flash はかなり融通がきく。アニメーションの作成から，
インタラクティブ性の導入まで小回りのきいたアニメーションの作成に Flash は大きな威
力を発揮した。そんなこんなで，現在では Flash は事実上の Web アニメーションの一方の
標準作成ツールになってきている(そのほかに Live Motion なども存在する)。Internet
Explorer や Netscape にも標準のプラグインとして搭載されてきており，利用するための
ハードルは非常に低くなってきている。
2.
ラスターとベクター
画像には，ラスター画像とベクターという２種類の描画法が存在する。このうち，ラス
ター画像は，さまざまな色の小さな点(ドット)で点描画として構成された画像の事である。
Web 上で表示される png, jpg や bmp 画像などはラスター画像の例である。
それに対して，ベクター画像(ベクトル画像とも呼ばれる)は，「アンカー」と呼ばれる座
標の点を複数作り，そのアンカー同士を線で繋いだり、線で囲まれた部分を塗りつぶした
りして表示する手法です。ラスター画像で色の点がひとつひとつ全て記録されていたのに
対して，ベクター画像はアンカーの位置などの数値の情報しか記録しておらず，画像を表
示するソフトウェアが，その情報通りに計算をして図形を表示しているのである。ベクタ
ー画像は表示する度に計算されて表示されるので，拡大しても縮小しても輪郭の表示が綺
麗であるとされる。
ただし，ラスターとベクターのどちらかが良いということはない。特徴の違いというだ
けである。ラスターはさまざまな色の小さな点を並べることができるので、写真や風景な
どの複雑な絵を表示するのに適している。ただ，拡大すると小さな点が目立ってしまい画
像が雑に見えてしまうこととなる。ファイルサイズは一般に大きい。
逆に，ベクターは表示する度に計算されて表示されるので、拡大しても輪郭はとても綺
麗に表示される。その反面，表示のたびに計算を行うことによってパソコンの処理に負担
をかけてしまい表示に時間がかかってしまう場合もある。更に、ベクターはラスターのよ
うに複雑な絵を保存するのには適していない。どちらかというと人工的な絵（直線や曲線
などで構成される図形など）に向いているとされる。ファイルサイズは，一般に小さい。
２．Flash と Flash の画像
Flash は前述のように Macromedia のアニメーション作成ツールである。SWF という形
式のアニメーションファイルを作成し，Web 上で公開することができるほか，単体でアニ
メションを作ることも不可能ではない。Photoshop，PaintShopPro のようにビットマップ
画像を作成するのではなく，ベクトル形式の画像を作成し，利用する。
4．Flash CSx の使用方法[基礎編]
Ａ. 新規作成
ファイル -> 新規作成
ステージの大きさ変更 (修正 -> ムービー)
Ｂ．絵を描く
矩形/楕円ツール
矩形ツールと楕円ツールは同じボタンで長押しすることで切り替
えができる。
・下のカラーで外線の色と内部塗りつぶしの色が指定できる
・正円は Shift キーを押しながらドラッグ
・矩形ツールのサブツールとして多角形ツールがあるので星型
なども簡単に作成できる
鉛筆ツール
線ツール
ペンツール
始点をまずはクリック。曲線も簡単に引ける。塗りつぶしも OK
バケツツール
インクボトルツールと切り替えができる
スポイトツール
塗りの色を画面上から吸い出すことができる
ブラシツール
スプレーブラシツールに切り替えることもできる
下の方にブラシの色や太さを変更できる部分もある
消しゴムツール
Ｃ．絵の編集
選択ツールを選んで，編集したい図形を指定する
自由変形(直線や曲線の形を変えるなど)
マウスを右クリックして「自由変形」「歪曲」「エンベロープ」
「修正」メニュー中から「伸縮と回転」
「回転と傾斜」なども可能
色やカラー効果など
ツールパレット下部の色の変更
プロパティウィンドウの「カラー効果」を変更
明度，着色，詳細，アルファ値(透明度)
絵の合成 : Flash では，同じ色で塗られた図形は合体し，違う色で塗られた図形は切り
取られることになっている。そこで「選択ツール」を使用して同じ色の画
像を一部重ねると合成される。ただし，絵にふちどりがあると合成されな
いので，合成する場合はあらかじめふちどりなどがないようにする必要
Ｄ．文字の入力
テキストツール
文字を選択し文字パレットで大きさなどを決める。事前に指定も可。
Ｅ．アニメーション化(モーショントゥイーン)
1) タイムラインの先頭位置にカーソルをあわせる
2) 上記のツールを使用してアニメーションの初期画像を作成する
3) マウスの右ボタンをクリック
4) 「モーショントゥイーンを作成」を選択
5) 終了位置を指定して右ボタンをクリック
6) 「キーフレームの挿入」を選択
→
「位置」を指定
7) タイムライン上の終了位置にカーソルをもっていった上で，選択ツールを使って，オ
ブジェクトを終了位置に移動させる
Ｆ．レイヤーの追加
タイムラインで左下のボタンを押すか，レイヤーで右クリックすると追加できる
・各レイヤーごとに画像を作成することで複数の違う動きのオブジェクトを制御可能
・下のレイヤーから順に(数字が大きいものほど上に)表示される
・レイヤーを細かく何枚も重ね合わせることで，複雑な変化をするアニメーションを
作成する場合などに使われる
Ｇ. プレビューを見る
「制御」から「ムービープレピュー」「Flash Professional を利用」を指定
Ｈ．保存と Web 上での利用
1) そのまま保存すると，*.fla ファイルが作成される。
2) Web 上で公開するためには「ファイル」の「パブリッシュ」を選択(ファイル名は保
存時と同じ*.html と*.swf が同時に作成される)
3) html ファイル中の<OBJECT>...</OBJECT>部分を後で使用すればよい。
3) ただし，単純にパブリッシュした場合には無限にループすることになってしまう。こ
れを避けるためには，パブリッシュ前に「パブリッシュ設定」中の HTML タブで，
「ループ」チェックをはずしておくこと
Ｉ．ファイルの読み込み
「ファイル」メニューの「読み込み」で各種画像ファイルを読み込める
４．Flash CSx におけるアニメメーション[応用編(1)]
Ａ．Flash におけるアニメーション作成の基本概念
基本的には，タイムラインの先頭位置と最終位置における画像を作成し，その両画像が
変化の最初と最後であることを指定することで，その間の変化を自動的に補完してくれる
というのが，Flash の基本的な役割である。したがって，最初と最後で位置が異なれば自動
的に途中の移動状況の図を作成してくれるし，色が異なったり形が異なる場合にも，自動
的に途中の大きさや色を作成してくれることになる。
Ｂ．アニメーション化( いろいろな効果 )
<移動中の特殊効果の指定>
1) プロパティウィンドウ中で，以下が指定できる
・イージング : 加速度を増す・減速するなどの指定
・回転
: オブジェクトを移動中に何回回転させるか。回転方向も
<伸縮・回転(角度の変更)など>
1) 矢印ツールを使って，変化させたいオブジェクトをタイムライン上で指定
2)「自由変形」や「修正」+「伸縮と回転」を選んで大きさなどを変更する
) 変更された結果は指定したタイムラインから後ろは固定となるので，大きくし
たり小さくしたりする場合は，タイムライン上で何度も指定する
<透明度の変化，着色(違う色に変える)，明度の変化>
1) 矢印ツールを使って，変化させたいオブジェクトをタイムライン上で指定
2) プロパティウィンドウ中の「カラー効果」を変更
明度，着色，詳細，アルファ値(透明度)
<移動 : 曲線>
最も簡単には，モーショントゥイーンの移動経路が直線で指定されているので，
その軌跡上の各点を指定して動かすことで曲線に変更することができる。
それ以外の手法としてガイドレイヤーの作成がある。ガイドレイヤーとは軌跡だけ
を指定したガイドレイヤーを作成し，それと結合したレイヤー上のオブジェクトを軌
跡通りに動かす手法である。
1) 新しいレイヤーを挿入し，何かの絵を描く
2) レイヤー上でマウスを右クリックし「クラッシックモーションガイドを追加」
3) 新しくできたガイドレイヤー上で鉛筆で軌跡を描く。このとき，開始点はオブ
ジェクトの内側になるようにすること
4) レイヤーに戻ってタイムラインの開始位置で「クラッシックトゥイーンを作成」
5) タイムラインの最終位置で「キーフレームを挿入」する
<シェイプトゥイーン>
1) タイムラインの先頭位置で，マウスの右ボタンをクリック
2) 初期図形を作成
3)「シェイプトゥイーンの挿入」
4) タイムライン上の終了位置をクリック
5)「キーフレームの挿入」
5) 終了時図形を作成
6) これによって，形が変わっていく図形を作成することができる
7) 必要に応じてシェイプヒントを追加することができる。これは，元の画像と終
了画像における点の対応関係を指定するものである。
a) タイムラインの先頭位置にカーソルをあわせて，「修正」メニューの「シェ
イプ」「シェイプヒントの追加」を選択
b) (a)～(z)の記号を選んで，対応関係をつけたい図形上の位置に移動させる
c) タイムライン上の終了位置にカーソルを移動
d) b)で指定した(a)～(z)と対応する終了時の図形上の位置に移動させる

Download Report