「FLash CS4」体験版ダウンロードはこちらから
「Adobe CS4」購入はこちらから

今回は、前回作成したシンボルを使って、カウンタを作成するところから始めていこう。前回、「1_txt」というシンボルを作成した。それを、複製して「1_txt」から「0_txt」まで、10個のシンボルを作成したが、今回は、さらにそれらを使い、作り込んでいく。

ライブラリの活用

作成したシンボルはライブラリに自動的に格納される。ライブラリに納められた要素をまとめて、「ライブラリアセット」と呼ぶ。Flashはライブラリのデータを使ってFlashムービーを実行するため、いったんライブラリアセットとして使用されたシンボルは、2回目からは、データのダウンロードが不要になり、ファイルサイズを節約できるという特徴がある。つまり、ライブラリを上手に利用すれば、ムービーのファイルサイズをどんどん小さくできるわけだ。また、ライブラリ内に作っても、Flashムービーで使用されないライブラリアセットは、最終ファイルのSWFには、書き出されないので、編集中のFlaファイルのサイズを気にする必要はない。シンボルはすべてライブラリに納められるので実際に確認してみよう。

ライブラリパネルは「表示メニュー＞ライブラリ(または、Ctrl+L)」で表示される。このライブラリからライブラリアセットを取り出したいときはステージにドラッグするだけでよい

さて、現在数字の1がライブラリアセットとして納められているが、基本パーツのカウンタを作るためには、0から9までの数字が必要だ。そこで、ステージ上にある「1_txt」のシンボルを「1-0_g」グラフィック・シンボルに変換する。

シンボル名:1-0_g、タイプ:グラフィック

現在のシンボルの状態をおさらいすると、次のようになっている。

ステージにはグラフィック・シンボル「1-0_g」がある。
シンボル「1-0_g」の1フレーム目には「1_txt」がある。

まず、「1-0_g」の中に10フレームまで作成しそれぞれのフレームには、フレーム番号と同じ数字のグラフィック・シンボルが入るようにする。以下の手順で進めていこう。

図:1 「1-0_g」の中で10フレーム目を選択して「右クリック>フレームの挿入」を実行すると10フレームまでフレームが増える

図:2 次にそのスパンを選択した上で「右クリック>キーフレームに変換」を実行すると1フレームごとにキーフレームが作成される。この段階では、すべてのキーフレームで「1」を表示したままだ

図:3 2フレーム目を表示し、ステージにある「1_txt」を選択して、プロパティパネルを開き「入れ替え」ボタンをクリックする。シンボルの入れ替えは位置・サイズ・回転角度などのパラメータを引き継ぐ点が便利だ

図:4 「入れ替え」ボタンをクリックして出てきた「シンボルの入れ替え」ダイアログにはライブラリに登録されているシンボルがすべて出てくる。ここから入れ替える対象の「2_txt」を選択して「OK」を押す

図:5 2フレーム目で表示しているシンボルは「2_txt」となる

図:6 編集を終えたら1つ上の階層に戻るため、左上の1-0_gのテキストをクリックする

図:7 ステージの2フレーム目は、キーフレームが無くても「2」が表示されるようになっている

同じ手順で、3フレーム目にあるシンボルは「3_txt」、4フレーム目にあるシンボルは「4_txt」となるように前回作成したシンボルを「入れ替え」る。作業しているシンボルの階層に気をつけながら、この作業を10フレームまで繰り返そう。ただし、10フレーム目は「0_txt」とし、表示するテキストは「0」とする。

グラフィック・シンボルの特徴

ステージの編集画面に戻ると「1-0_g」というシンボルがあるはずだ。これは、1から10フレーム目まであり、それぞれのフレームには1から9、0までの数字が配置されている。 ムービープレビューしてみよう。

ムービークリップ・シンボルのときならば、1から9、0まで数字のアニメーションが見られるはずだが、今回は、1を表示したままだ。確認のためにステージにある「1-0_g」を選択してからプロパティパネルで「ムービークリップ」に変更して、ムービープレビューしてみよう。今度は、普通にアニメーションしている。グラフィックの時は1で停止したままで、ムービークリップにするとアニメーションする。グラフィックシンボルは、フレーム数と同期してアニメーションする。これが、グラフィック・シンボルの特徴だ。

これを確認するために、再び、ステージ上にある「1-0_g」シンボルをグラフィックにしてから、ステージのフレーム数を4レームにしてムービープレビューして見て欲しい。今度は、ムービークリップの時と同じくアニメーションするはずだ。ただし、1から4までしか数字は出てこない。

シンボルのフレーム数と、貼ってあるタイムラインのフレーム数が同期するため「1-0_g」のように10フレームあるグラフィックシンボルを全部見せるには、10フレーム必要ということになる。最後に、ステージに10フレームまでフレームを追加してからムービープレビューしてみよう。今度は、1～9、0と数字がすべて表示されただろうか。次の3つの動画で比較してみると違いがわかりやすいだろう。※なお、動画では、数字が確認しやすいようにfpsを4にしてある。

サンプル動画1

サンプル動画1では、1しか数字が出てこない。グラフィックシンボルを1フレームだけ使用している。

サンプル動画2

サンプル動画2は、1～4までしか数字が出てこないアニメーション。グラフィックシンボルを4フレームだけ使用している。

サンプル動画3

サンプル動画3は、1～9、0とすべてのフレームが表示されるアニメーション。グラフィックシンボルを10フレームすべて使用している。

まとめ

2回にわたり、3分計の基本パーツであるカウンタを作成した。今回のポイントとなるのは「グラフィック・シンボル」だ。グラフィック・シンボルがムービークリップと異なるのは、ムービークリップは親のタイムラインが1フレームでもアニメーション可能なのに対して、グラフィックは、親のタイムラインにそのシンボルが使用しているフレーム数と同じ数のフレームを要求するということだ。

次回は、さらに「グラフィック・シンボル」の機能を使いこんでいき、3分計のアニメーションを完成させたい。楽しみにしていて欲しい。

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