ActionScriptを活用しデジタル時計を作成する -総集編

今回は過去数回に渡り掲載して来たデジタル時計の制作方法について整理してみた。

「Adobe CS5」体験版はこちらから

ステップ1:デザインを考える

まず、デジタル時計の作成に際して必要な部品を検討するためにデザインをする。Flashは、デザインとプログラムを平行しながら楽しめるツールなので、どちらかだけをしたいという人よりは、デザインをしっかりしたいという人が多いだろう。詳しくは「16回 ActionScriptを活用してデジタル時計を作成する(前編)」を参照して欲しい。

制作物のクオリティを左右する画面デザインに時間を掛けるためにも、デザインはある程度凝った方が良いだろう。ただし、機能的に凝り出すとあとで、大変な苦労をするので、自分のスキルとデザインとのバランスも、とても重要だ。

ステップ2:技術的検証を行う

デザインが固まったら、それを実現するための技術的な検証に入る。今回は、htmlテキストとCSSを使って画面をデザインした。詳しくは「17回 ActionScriptを活用してデジタル時計を作成する(中編)」を参考にして欲しい。

検証するときは、シンプルなFlaファイルを作成して単機能を作ろう。それを別ファイルにして残して置けば、将来同じような機能を利用したいときに、また開いて思い出すことができるので、オススメだ。

ステップ3:ActionScriptを組む

ひと言でいっても、デジタル時計を作るための前提として、いろいろな知識が要求される。たとえば、次のようなキーワードがあるが、みなさんは説明できるだろうか。

1. 変数・・・「18回 ActionScriptを活用してデジタル時計を作成する(後編) -変数について学ぶ」を参照。
2. Dateオブジェクト・・・「19回 ActionScriptでデジタル時計を作成 -Dateオブジェクトから日時を取り出す」を参照。
3. if文(条件)・・・「21回 ActionScriptを活用しデジタル時計を作成(その6) -曜日の数字を文字に変換」を参照。
4. イベント・・・「20回 ActionScriptを活用しデジタル時計を作成(その5) -htmlテキストを作る」を参照。
   イベントについては、さらに詳細を後述しているのでこの後の記事を読んで欲しい。
5. フォント埋め込み・・・「22回 ActionScriptを活用しデジタル時計を作成する(完結編) -フォントの埋め込み」を参照。

フローチャート

プログラムでは、処理の流れを整理するためにフローチャートを作成する。本来は、処理の内容によって、記号が複数あるが、とりあえず、処理の流れを把握することを目的にフローチャートを描いてみた。流れを整理するのに役立つだろう。

イベントについて

Flashでは、すべてのActionScriptがなんらかのイベント(ユーザーの動作など)に応じて動作する。たとえば、ボタンをクリックしたときはMouseEvent.CLICK、何かキーを押したときは、KeyEvent.KEY_DOWNなど、ユーザーの動作と連動しているものや、フレームレートに応じて再描画のキッカケが来るEvent.ENTER_FRAMEなどさまざまだ。このイベントとActionScriptを組み合わせることで、インタラクティブなコンテンツを作成できる。詳細はヘルプでも調べられるので、具体的な文法よりもどんなイベントがあるのかという事を知っておくと良いだろう。イベントを利用するには、次の命令を使用する。

addEventListener

この命令に必要な情報は、次のふたつだ。

1. どんなイベント?
2. なにを実行するか?

どんなイベントか?

どんなイベントかは、ヘルプ「flash.eventsパッケージ」などで調べる必要がある。たとえばマウス関連なら、イベントの一覧からMouseEventを見れば良い。この指定内容(MouseEvent.CLICK)をイベント定数と呼ぶ。

なにを実行するか?

実行内容は、functionという形式で記述する。functionは、日本語で関数と呼んでいる。functionには、名称をつけて、その名前を指定する方法と名称を付けずに、内容だけを記述方法があり、本編では、後者の名称を付けずに実行する方法を紹介した。名称がないので、匿名関数を使用しているとも言う。

fuunctionに名称を付ける場合は、次のようになる。

addEventListener(イベント定数,function名)
function function名(evt:イベント):void{
//イベント で実行したい内容
}

evtは、このfunctionの中だけで有効な変数になる。他の名称でも問題ないが、:の後ろには変数の型が必要で、EventやMouseEventなど、イベント定数のクラスを指定する。 イベント定数には、Event.ENTER_FRAMEやMouseEvent.CLICK、KeyboardEveny.KEY_UPなどを使用して、イベントを指定する。

また、このfunctionでは、1行目で「:void」としているので、void(＝戻り値なし)となる。

変数の型については、「18回 ActionScriptを活用してデジタル時計を作成する(後編) -変数について学ぶ」でも触れているが、へルプ「ActionScript 3.0 データ型」なども参考にして欲しい。

まとめ

おさらいとして、ASの基礎を学習しなおすには、どこを確認すれば良いかを紹介した。 デジタル時計は基本中の基本なので、Dateオブジェクトからの日付取得方法などをよく覚えておこう。デザインなどがまったく違うデジタル時計を練習に作成しても良いだろう。

次回は、作成したFlashコンテンツをhtmlの中に埋め込んで表示する方法(パブリッシュ)を紹介する。

伊藤のりゆき(NORI)
有限会社トゴル・カンパニー代表。ロクナナワークショップ講師。Flashアクセシビリティを得意とし、ライターとしてFlash関連書籍や雑誌記事の執筆を行うほか、AdobeTVでも解説。共著の「ActionScript3.0辞典」が発売中。また、先頃、写真家として初の写真集「Snap or Nothing写真集」(iTunes AppStoreにて)が発売された。内容のリクエストはTwitter(@nori_togoru)まで。