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

3分計を完成させる

前回までに作成してきたシンボル「1-0_g」を組み合わせて60秒分のカウンターを作成しよう。 この回で使用するflaファイルは、こちらでダウンロードできる。

このシンボルは1～9、0を表示する10個のフレームを持っている。つまり、1から10まで数えることができるというわけだ。これを6回繰り返して60まで数えさせよう。

まず、なにもないステージに「1-0_g」を置いたら、これをシンボルに変換しよう。(※この段階のFlaファイルが3min_watch_firststep.flaとなっている)

修正＞シンボルに変換を選択する。名前は「60秒_g」、タイプをグラフィックとして、シンボルを作成しよう。シンボル名とインスタンス名は別なので、「60秒_g」のようにシンボル名である場合は数字ではじまっても良い。

シンボルを作成したらダブルクリックして、そのシンボルの編集モードにいき、「60秒_g」の中に1フレーム目から60フレームまでのフレームを作成する。

そのレイヤーには、「1-0_g」だけがあるはずだ。「1-0_g」をクリックしてプロパティパネルで「ループ」を選択しよう。開始フレームは1とする。

再生ヘッドをドラッグすると、数字が1、2、3、4、5、6、7、8、9、0、1……と繰り返し表現されるのがわかるだろう。11フレーム目ではキーフレームがなくても、再び表示する数字が「1」に戻っているのがわかる。これは、グラフィックシンボルの「ループ」を利用しているためだ。「ループ」はフレームが続くかぎり、繰り返し表示を行うという特性がある。その他にも、ループオプションには、1回再生と単一フレームがあり、選択すると次のような特性になる。

「1回再生」……最初の1回目はアニメーションを表示するが、最後のフレームに行くと、先頭にもどらずに最後のフレームだけを表示しつづける。
「単一フレーム」……1フレームだけを静止して表示する。

これで1～9、0、1～9、0という繰り返しを60フレームまで続けることができた。これが一の位の表現になる。

十の位の数字も使用して、2桁目を表示する。十の位用に、今と同じシンボル内にレイヤーを追加する。10フレーム目にキーフレームを挿入して、同じ「1-0_g」というシンボルを配置する。

次にグラフィックのループオプションに「単一フレーム」を表示する。

これは、アニメーションではなく、1つのフレームを静止フレームとして表示することを意味している。

次に十の位が切り替わる10、20、30、40、50、60フレーム目でキーフレームを作成し、十の位の数字が変化するように単一フレームの開始フレームを1フレームづつ変化させていく。ただし、60秒目は桁が上がり、下2桁は00秒になるようにしよう。これで、1～60までのカウンタができる。

1フレームを1秒で再生する計算なので、このシンボルの60フレーム＝60秒＝1分という計算になる。さらに、この「60秒_g」というシンボルを3回繰り返せば3分で1周するシンボルを作成できることになる。では、実際に作ってみよう。

今の状態のままで、ステージには「60秒_g」というシンボルがあるはずだが、なければ、ライブラリからドラッグすればよい。ステージのシンボルを選択したら「3分_g」というシンボルに変換しておこう。タイプはグラフィックだ。

「3分_g」の編集画面で「60秒_g」のあるレイヤーを180フレームまで伸ばそう。これは、60秒×3分から、180と計算できる。

さらに、「60秒_g」シンボル作成と同じ要領で、分の数字を置く予定のレイヤーを作成し「1-0_g」を配置する。タイプはグラフィックで、単一フレームにする。

分を表すレイヤーの最初の60フレームまでが、1つのキーフレームとする。このキーフレームにある「1-0_g」シンボルは、10フレーム目の「0」を示すように、グラフィックタイプで、単一フレームを選択し、開始フレームは10と入力する。2つ目のキーフレームは、60フレーム目にあり、同じくループオプションは単一フレーム、開始フレームは1、3つ目のキーフレームは120フレーム目にあり、ループオプションは単一フレーム、開始フレームは2にする。最後に180フレーム目には、単一フレームで開始フレーム３とする。これで、180フレーム目は、300と表示されるはずだ。

これで、3分を計るシンボル「3分_g」が作れた。これをステージに配置するときも、3分＝180秒＝180フレームの長さを必要とするので、ステージのフレーム数を180にして完成だ。

さらに、背景を追加し、数字の色を変更したものがこれだ。(背景を追加して10倍速で再生している)ソースは、3min_watch.flaだ。

サンプル動画

グラフィックシンボルの特徴をまとめると次のようになる。

1.グラフィックシンボルには、ループ、1回再生、単一フレームがあり、スタートフレームを指定できる。
2.グラフィックシンボルはムービークリップとは違いアニメーション(複数フレーム)を再生するためには、まとまったフレームが必要。

今回作成したサンプルは、グラフィック・シンボルを入れ子にして作成しており、カウンターは元をたどれば10種類の数字のシンボルに行き着く。つまり、この数字のグラフィック・シンボルを変更することで容易にオリジナルが作成可能なのだ。フォントを変更するなど、いろいろ試してみてほしい。背景のイメージや「3分_g」の色を変更するだけでも、ずいぶん印象も変わると思う。

次回からは、Flashのシンボルで、インタラクティブ要素を受け持つ「ボタン」を解説していこうと思う。アクションスクリプトも出てくる予定だ。

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