2. 入門講座 - 2. 「DigitalWatch」

 簡単な時計を作りながら、フラッシュの特徴を覚えていきましょう。

2- 2- 0. テキストフィールドの用意

時間を表示するためのテキストフィールドを用意します。今回のテキストフィールドの種類は「ダイナミックテキスト」です。これを3つ用意します。



2- 2- 1. テキストフィールドの設定

ダイナミックテキストフィールドには、何も書かれていません。今回は、変数を設定します。変数の欄にそれぞれ「hour」「minute」「second」と書いておきます。

2- 2- 2. フォント、その他の設定

入力されたテキストのフォントやサイズ等を設定します。これは自由に設定して構いません。

2- 2- 3. 新しいレイヤーの準備

新しくレイヤーを追加します。レイヤーとは「層」という意味の単語です。「透明のシート」をイメージして下さい。その「透明のシート」が幾重にも重なり「層」となって、一つのシーンを表現することができるのです。
ここでは、テキストを配置する「レイヤー1」と、テキスト内(ダイナミックテキスト)を制御する「レイヤー2」を用います。今回の場合、レイヤーの重なり順「階層」は関係ありませんが、タイムラインウィンドウで上に配置すればシーンの前面に、下に配置すれば背面に配置されます。

2- 2- 4. ActionScriptの記述

いよいよActionScriptの登場です。先ほど準備した「レイヤー2」の1フレーム目を選択して下さい。[ウィンドウ] - [アクション]を選択し、アクションウィンドウを開きます。アクションウィンドウに下のように記述して下さい。「hour」「minute」「second」は、ダイナミックテキストで設定した変数です。「fscommand2("*****")」はFlashLite特有のコマンドです。詳しくは、ActionScriptリファレンスを見て下さい。
例えば一行目は「"GetTimeHours"という関数の結果を変数"hour"に代入」という意味です。
ActionScriptが記述されたフレームには「a」と印が付きます。



2- 2- 5. ムービープレビュー

早速、ムービープレビューをしてみます。今の時間(あなたのPCの時計の時間)が出たと思います。しかし、動きません。これでは、時計とは言えませんね。

2- 2- 6. フレームの追加

「フレーム」は、パラパラ漫画をイメージすると分かり易いと思います。(特に何の指定もなければ)時間の遷移と共にフレームも遷移していきます。
先ほど作った時計(?)は1フレームしか用意していませんでした。パラパラ漫画も一枚では「動き」ません。ActionScriptも一度実行されるだけですので、「動き」が表現できなかったのです。
その「動き」を表現するため、新しくフレームを用意しましょう。
「レイヤー1」の2フレーム目を右クリックし、「フレームの挿入」を選択して下さい。これで2フレーム目にテキストを配置する「レイヤー1」が追加されました。
「レイヤー2」の2フレーム目を右クリックし、「キーフレームの挿入」を選択して下さい。

2- 2- 7. ActionScriptの記述

レイヤー2の2フレーム目に「2- 2- 4. ActionScript」と同様にActionScriptを記述します。さらに、そこに「gotoAndPlay(1);」と書き加えます。
gotoAndPlay()…()内に指定したフレームへ飛び、再生。



2- 2- 8. もう一度、ムービープレビュー

再度チャレンジしてみましょう。動きましたか?

2- 2- 9. 発展

今回は簡単な時計を作りましたが、これを発展させれば、カレンダーなども作れるはずです。挑戦してみて下さい。