今回は、Flashを使用しながら、Flashに関する基本的な12個の用語を解説する。使用するFlashのバージョンは、「CS4」。「CS4」をお持ちの方は、今回のテキストと図版、動画などをガイドに実際に操作してみてほしい。今回は2コマのパラパラマンガを作成する。

1 FLAファイル

FLAファイルとは、Flashを作成するときの編集ファイルのこと。拡張子が、「.fla」になる。Macを使っている人も、拡張子として.flaを最後につけておこう。このファイルはWindowsと共通。

2 SWFファイル

拡張子が「.swf」のファイル。FLAファイルは、直接ブラウザでは表示できない。かならずSWFファイルに変換する必要がある。このときの変換作業をパブリッシュという。「FLAをパブリッシュしてSWFを作成する」という使い方をする。

3 バージョン

Flashのバージョンには、3つの意味がある。ひとつは、オーサリングするFlashのバージョン。これは、「最新がCS4で、1つ前がCS3……」というように、商品名から判断できる。もうひとつは、出力するSWFのバージョン。こちらは、数字で示される。たとえば、バージョン10のSWFを再生するには、Flash Playerのバージョン10が必要だ。webブラウザでFlashコンテンツを見せたいときには、このバージョンを意識する。サイト訪問者のFlash Playerバージョンが合わずに見ることができないこともある。ただし、Flash Playerは、下位互換なので、最新バージョンがあれば現在までのすべてのバージョンのSWFが再生できる。3つ目のバージョンは、ActionScript(以下、AS)。現在、ASは、バージョン1.0/2.0とバージョン3.0がある。1.0と2.0の混合は可能だが、それらと3.0との混合はできない。最初の段階で、どのバージョンで作成するのかを決めておかなくてはおいけないだろう。また、AS3.0が使用できるのは、SWFのバージョン9.0以上である。この連載では、AS3.0を中心に扱う予定だ。

Flashのバージョンの関係

Flashオーサリングツール Flash Player(ブラウザプラグイン) AS1.0/2.0 AS3.0
MX 6 ○ ×
MX2004 7 ○ ×
8 8 ○ ×
CS3 9 ○ ○
CS4 10 ○ ○

それでは、実際にFlashを操作してみよう。まず、ファイルメニューから新規ファイルを作成する。すると、ASのバージョンによって作成するFlaファイルが異なるため尋ねられる。新規ドキュメントダイアログでは、一番上の「Flash ファイル (AS 3.0)」を選択しよう。

まずは一番上の「Flash ファイル (AS 3.0)」を選択

4 ステージ

Flashにおけるステージとは、画面中央の白いエリアのことを指す。ここに描かれたイラストや図形、配置された写真などがブラウザでも見えるようになる。ステージの外にもこれらを配置できるので、表示するまでもないが準備しておきたい画像などを置くこともある。

ステージが正しく表示されない場合や、各パレットのレイアウト表示がおかしくなったら「右上のワークスペース」を選択し直したり「リセット」を実行すると良いだろう。

ステージの拡大率は、ステージ右上にあるドロップダウンリストを使用すると、簡単にリセットできる。

ステージに図形を描いてみよう。右端にある図形ツールを選択し、ステージ上をドラッグする。色はバケツのアイコンになっている塗りつぶしツールで塗ることができる。

また、その下の鉛筆ツールやブラシツールでも描くことができる。まずは、中心に大きな「○」を描いてみよう。SHIFTキーを押しながらドラッグすると、縦横比率を維持して1:1の状態で描くことできる。色もバケツツールなどを使って図のように着色してみよう。

5 タイムライン

Flashはアニメーションを作るために時間の概念を持っている。これをコントロールするのがタイムラインだ。タイムラインは、始まりが左端で、右へいくほど、時間が経過した状態を示す。

6 フレーム

タイムラインには、四角のマスがならんでいる。この1マスを1フレームという。

新規作成したばかりのファイルでは、フレームは1個しかない。そこで、フレームを延ばすには、タイムライン上の延ばしたいフレーム数の位置で右クリックして「フレームの挿入」を実行する。24フレームまで延ばしてみよう。

7 再生ヘッド

タイムラインにある、縦の赤い線と、それにつながる赤い四角を再生ヘッドと呼ぶ。Flashのタイムラインは時間の経過とともに右へ移動するが、そのときの現在時間を示すのが再生ヘッドの役割だ。これをドラッグすれば、実際のアニメーションの様子を再現することもできる。

8 フレームレート

フレームレートとはFlashの再生速度のことで、1秒間に何フレーム分、再生ヘッドが進むかを示す。単位にfps(Frames Per Second)を使用する。たとえば、CS4のデフォルトは、24fpsなので、1秒間に、24フレーム進む。もし、60fpsという数値を設定すれば、1秒間に60フレーム進むことを示しているが、マシンの性能によっては、1秒間に60フレーム表示できない場合もある。そのときは、なるべく時間に対して忠実に再生しようとFlash Playerがフレームを間引いて再生する。逆に、1fpsの設定では、60フレームの長さはおよそ1分の長さを示すことになる。

ここで、fps値を確認しよう。ステージの外(グレーの部分)をクリックしてからプロパティパネルを見ると、Flashドキュメントのプロパティとしてフレームレートが確認できる。変更するときは、そこをクリックして数値を入力する。

9 キーフレーム

キーフレームは、フレームの中でも特別なものだ。ここを境に表示している内容が、前後で異なるフレームとなる境界をキーフレームと呼ぶ。キーフレームは、縦線で区切られたところにある。フレームを右クリックで「キーフレームの挿入」とすると、作成できる。キーフレームの前後では、フレームの内容を変えることができる。

12フレーム目にキーフレームを挿入して、13フレーム目以降は、円が一部欠けた状態にしよう。操作方法はこのファイル(キャプチャ動画SWF)を参考にして欲しい。

10 レイヤー

レイヤーを使用すると、重なりを簡単に管理することができる。たとえば、人物が町を背景に立っているシーンでは、背景のレイヤーと人物のレイヤーに分かれて、ふたつを配置する。そこへ車が通りかかるなら、その車用にレイヤーを作成する。レイヤーをドラッグするだけで、通過する車を人物の後ろに配置するか、手前に配置するかを入れ替えることが可能なのだ。Photoshopなどの画像アプリを使ったことがある人なら、レイヤーの概念は理解しやすいだろう。レイヤーは、いくつでも追加できるので複雑な画面を作成するときなどに利用しよう。

レイヤーは、タイムラインにあるアイコンクリックで行う。ゴミ箱アイコンをクリックすれば削除も可能だ。

11 プロパティパネル(プロパティインスペクタ)

ステージ上のオブジェクト(置かれているものすべて)には、設定できる項目(プロパティ)があり、常に現在選択しているオブジェクトのプロパティ値を確認したり設定できる。ただし、選択している(クリックした)オブジェクトの種類によって設定できるプロパティは異なる。例えば、画面上のオブジェクトであれば、X、Y座標や横幅、高さを示す値、色情報などを持っている。各プロパティパネルは以下の通り。

ステージ選択時

シェイプ(ステージ上の図形)選択時

楕円ツール選択時

線ツール選択時

12 ムービープレビュー

Flashには、編集中のFLAファイル(拡張子が.fla)と、ブラウザなどで閲覧するためのSWFファイル(拡張子が.swf)がある。SWFファイルは、FLAファイルを元にして書き出されたファイルで、元のFLAファイルに比べれば、かなり小さくなる。実際に動作を確認するときは、SWFにする必要があるが、確認のたびにSWFを書き出してブラウザで確認しているのでは、手間がかかる。そのため、Flashの中ですぐに確認できる、「ムービープレビュー」という機能がある。「制御」のムービープレビューか、ショートカット「Ctrl+Enter」で動作する。

実際にムービープレビューしてみよう。映像のようにパクパク動くはずだ。

サンプル動画

今回作成したのは1秒毎に繰り返すアニメーションだが、フレームごとに表示する内容を変えているので、「フレーム・バイ・フレーム」アニメーションという。パラパラマンガの要領で長くたくさんつくれば立派なアニメーションもできるが、根気を必要とする作業である。CS4専用のサンプルファイルも用意したので、(ダウンロード)ぜひ参考にしてほしい。次回は、よりアニメーションが簡単なFlashならではの「トゥイーンアニメーション」を作成したいと思う。

伊藤のりゆき(NORI)
有限会社トゴル・カンパニー代表。オーサリングエンジニアとしてFlashとMovable Typeでの制作を中心に活動。ロクナナワーク ショップ講師、アックゼロヨン審査員、ライターとしてFlash関連書籍や雑誌記事の執筆を行うなど、幅広く活動している。また、写真家としての顔も持つ。フォトブログ「Snap || Nothing」はこちら。