ここ数日、連日連夜FlashLite1.1にかかりっきり。
AS3でなまった体を鞭打つその機能の少なさに正直先週の金曜日、
「これはもう、あれかもしれん」
と久々に思ったわけですが、何とか週末FlashLite1.1の性格がわかってきて、
必要なコンポーネントの実装が出来、今日作りたいコンテンツを1つ実装し終わった。
コンテンツの内容としては、質問に答えながら進むと回答によって結果が変わり、
最後に円グラフを描画するというものだ。
AS3なら1、2時間程度の内容だろう。
FlashLite1.1でこれを作るには、まず「ラジオボタン」と「チェックボックス」が必要。
FlashLite1.1にはUIコンポーネントというようなハイテクなものはなく、用意されているのは
・ムービークリップ
・ボタン
・グラフィックス
・テキストインプット
のプリミティブな道具4つ。
ラジオボタンとチェックボックスはこのうちムービークリップとボタンを組み合わせる事で作成する。
ムービークリップはタイムラインがあり、フレームごとにグラフィックスやボタンなどを
配置できる。またスクリプトを記述することが出来、変数を保持することができる。
ただし、「フォーカスが当たらない」「イベントをハンドリングできない」という欠点がある。
ボタンは、4つの状態(アップ、オーバー、ダウン、ヒット)のフレームしかなく、それぞれ
マウスとフォーカスの状態によって、そのフレームが表示される。ボタンは変数を保持することが
出来ず、またインスタンスにしかスクリプトを書けない。ただしインスタンスに書くスクリプトで
マウスダウンやマウスリリースなどのイベントをハンドリングできる。
この為、例えばチェックボックスの場合は、まずチェックされているかどうかの変数と、
チェック有無によって変化させる見た目はムービークリップに配置する。
そのムービークリップの中にボタンを配置し、ボタンでイベントを受け取った後、チェックされているか
どうかの変数を見てムービークリップのフレームを変える、というようなコーディングをすると、実現できる。
ラジオボタンの場合はもう少し複雑で、イベントハンドリング時に同じグループのラジオボタンを探し、
その中でチェックがついているもののチェックをはずす、という実装が必要になる。
(今回の実装では、ラジオボタンのインスタンスの名前のプレフィックスが同じものをグループとみなすようにした)
ちなみに、ドコモのCDKにコンポーネントのサンプルがあるので、それが参考になる。
ただしこのサンプル、ラジオボタンは1つのラジオボタンしか対応してないし、チェックボックス
はチェックするとそのコンポーネントからフォーカスが外れてしまうので、実践投入するには
加工が必要。
あと、円グラフについてはこれまた面倒くさい。なぜなら、FlashLite1.1には描画関数が用意されていないからだ。
グラフのようなものを書きたい場合は、グラフの1部分をムービークリップ化しておき、それを複製したり
伸ばしたりすることで「グラフのようなもの」を作成する必要がある。
例えば棒グラフの場合は、四角いムービークリップを引き伸ばすことでそれっぽく見えるし、
円グラフの場合は、1/360の円弧を角度を変化させながら360個複製して配置すると、それっぽく見える。
さらに描画の様子をアニメーションさせたい場合は、タイムラインのループを利用して少しづつ描画すればいい。
(FlashLite1.1にはsetIntervalが無い為、タイムラインループを使うしかない)
無事swfが出来たら、インターネットにつながっているサーバに乗せて、携帯端末でアクセスすればOK。
今回はFlashCS3を使ってFlashLite1.1向けにコンパイルし、会社の人から端末を借りて試してみたが、
ドコモの903(パナとソニー)904(NEC)、ソフトバンクの815SH、703SH、あとauでも動いた。
機種によって画面サイズがまちまちだが、Flashをフルサイズ指定しておくと、縦横比を保ったまま
縦横どちらかがいっぱいになる大きさまで拡大(縮小)してくれる。
ベクトルシェープの部分はきれいにスケーリングされるので、どの端末で見ても違和感の無いきれいな
画面で表示できていて、これは結構利点かなと思った。
ということで明後日までにもう1コンテンツ作成しないといけないが、何とか乗り切れそうだ。