本連載の第1回目で「日本におけるFlash Liteの仕様」、第2回目で「Flash Liteの再生環境から見た注意点」と、制作に取り掛かる前に押さえておきたい基礎知識を解説しました。制限ばかりで少々窮屈でしたので、最終回となる今回は実際に手を動かしてみましょう。テーマは、気楽に作れる「待ち受け時計」にしたいと思います。ダウンロードサンプルを用意していますので、合わせて読み進めてください。

ダウンロードサンプル「wallpaper.zip」

このQRコードから、完成サンプルをダウンロードできます。実際に壁紙としてお使いいただけます。

制作サンプルの説明：LED風の待ち受け時計

待ち受け時計の機能

最近よく見かけるLED風の時計を作ります。この時計の機能別に分解していくと、以下の機能に分けられます。

図1 このサンプルでは、「SEVENBAR」フォントを使用させていただきました

時間
日付
電波の状態
電池の状態
カレンダー

こうした機能を実現するには、日付／時間／電波／電池の情報を取得する必要があり、FlashLiteには特有のコマンド「FScommand2」が用意されており、これらの情報を取得する際もこのコマンドを使います。その使い方は、後ほど解説していきます。

制作するサイズ

一般的にQVGAの横240×縦320ピクセルか、WQVGAの横240×縦400で制作します。このサイズにしておけば、VGA端末（横480×縦640ピクセル）で再生した場合でも、2倍に拡大されて再生されるので対応できる機種が多くなります。画面サイズについて詳しい説明は第2回「Flash Liteの再生環境から見た注意点」を参照してください。

図2 QVGAとVGAの比較

今回のサンプルでは、横240×縦320ピクセルで制作していきます。

各機能の実装方法

今回のサンプルでは、上記のように5つの機能を実装します。必要となる日付／時間／電波／電池の情報は、Flash Lite特有のコマンド「FScommand2」を使って取得します。なお、Flash Lite 2.0以降ではDateオブジェクトをサポートしており、ActionScriptと同様に日付や時間を取得することができます。

それでは、各機能の実装方法を解説していきましょう。

時間を取得する

通常、FScommand2コマンドを使いますが、Flash Lite 2.0以降ではDateオブジェクトを使うこともできます。時間を取得するスクリプトは以下のようになります。

        ●FScommand2の場合
v_hour = fscommand2("GetTimeHours"); //時
v_minutes = fscommand2("GetTimeMinutes"); //分
v_seconds = fscommand2("GetTimeSeconds"); //秒
●Dateオブジェクトの場合
date = new Date(); //Dateオブジェクトを作る。
v_hour = date.getHours(); //時
v_minutes = date.getMinutes();//分
v_seconds = date.getSeconds();//秒
    

時間を取得したら、表示させます。

        //時間：取得した値が10未満であれば、頭に0という文字を足す
if (v_hour<10) {
    v_hour = "0" add v_hour;
}
//分：取得した値が10未満であれば、頭に0という文字を足す
if (v_minutes<10) {
    v_minutes = "0" add v_minutes;
}
//秒：取得した値が10未満であれば、頭に0という文字を足す
if (v_seconds<10) {
    v_seconds = "0" add v_seconds;
}
//v_timeという変数に時間を代入する。
v_time = v_hour add ":" add v_minutes add ":" add v_seconds;
    

デジタル表示なので、取得した値が10未満であれば、頭に0という文字を足すようにします。addというのは文字列の連結の際に使用する演算子です。時間（v_hour）、分（v_minutes）、秒（v_seconds）のすべてに同じ処理を行います。

最後に v_hour、v_minutes、v_secondsの間にコロンで挟んで時間をデジタル表示の形式にします。テキストフィールドを用意し、変数を「v_time」にして画面表示します。

日付を取得する

時間と同様に、通常はFScommand2コマンドを使いますが、Flash Lite 2.0以降ではDateオブジェクトを使うこともできます。ただし、Dateオブジェクトを使用する場合、取得できる月が0～11となるので、1を足しておきます。日付を取得するスクリプトは以下のようになります。

        ●FScommand2の場合
    v_year =  fscommand2("GetDateYear"); //年
    v_month =  fscommand2("GetDateMonth"); //月
    v_day =  fscommand2("GetDateDay"); //日
    v_weekday =  fscommand2("GetDateWeekday"); //曜日
●Dateオブジェクトの場合
    date = new Date(); //Dateオブジェクトを作る。
    v_year = date.getYear();
    v_month = date.getMonth()+1;
    v_day = date.getDate();
    v_weekday = date.getWeekday();
    

日付を取得したら、表示させます。

        //月：取得した値が10未満であれば、頭に0という文字を足す
if(v_month < 10){
    v_month = "0" add v_month
}
//日：取得した値が10未満であれば、頭に0という文字を足す
if(v_day < 10){
    v_day = "0" add v_day
}
//v_dateという変数に日付を代入する。
v_date = v_year add " " add  v_month  add " " add v_day
    

時間と同じように、取得した値が10未満であれば、頭に0という文字を足すようにします。そして、テキストフィールドを用意し、変数を「v_date」にして画面表示します。

電波の状態を取得する

電波を取得するには、以下のFScommand2を使用します。ActionScriptでは代用できません。

        //電波の状態
v_maxSignal = fscommand2("GetMaxSignalLevel"); //最大受信レベル
v_signalLevel = fscommand2("GetSignalLevel"); //現在の受信レベル
    

電波の状態を示す値は、下図のようにキャリアとFlash Liteバージョンによって異なります。特にSoftBankのFlash Lite 1.1端末の場合は、0～100になるので注意が必要です。

図3 電波の状況を示す値

上記表に対応した電池のアイコンを表示するムービークリップ「signal_mc」を用意し、以下のようにフレームアニメーションを作成しました。

図4 signal_mcの中身。1フレーム：圏外、2～5フレーム：アンテナのアニメ（4段階）

電波の状態に合わせてsignal_mcのフレームを移動するようにします。

        //電波の状態
v_maxSignal = fscommand2("GetMaxSignalLevel"); //最大受信レベル
v_signalLevel = fscommand2("GetSignalLevel"); //現在の受信レベル

//ジャンプするフレーム番号を入れる変数
v_signalNum


if(v_maxSignal ==  100){ //SoftBank Flash Lite 1.1用
    if(v_signalLevel == 100){
        v_signalNum = 5
    }else if(v_signalLevel > 30){
        v_signalNum = 4
    }else if(v_signalLevel > 0){
        v_signalNum = 3
    }else if(v_signalLevel == 0){
        v_signalNum = 1
    }
}else{
    if(v_maxSignal == 4){ //au、SoftBank用
        v_signalNum = v_signalLevel + 1

    }else if(v_maxSignal == 3){ //docomo用
        if(v_signalLevel==3){
            v_signalNum = 5
        }else if(v_signalLevel==2){
            v_signalNum = 4
        }else if(v_signalLevel==1){
            v_signalNum = 3
        }else if(v_signalLevel == 0){
            v_signalNum = 1
        }
    }
}

//signal_mcのフレームをジャンプする。
tellTarget("signal_mc"){
    gotoAndStop(/:v_signalNum)
}
    

電池の状態を取得する

電池の場合もFScommand2を使用します。ActionScriptでは代用できません。電池のアイコンを作成する場合、まず充電中かどうかを判定し、充電中であれば充電アイコンを表示し、充電中でなければ電池の残量を表示するようにします。

まず、充電中かどうかを判定します。以下のFScommand2を使用します。

        //充電中かどうか？
v_charging = fscommand2("GetPowerSource");
//0：充電中ではない
//1：充電中 
    

次に電池の状態を調べます。

        //電池の状態
v_maxBatt = fscommand2("GetMaxBatteryLevel"); //電池の最大容量
v_nowBatt = fscommand2("GetBatteryLevel"); //現在の電池容量
    

電池の状態を示す値は、以下の表のように違いがあります。ほとんどのキャリアでは0～3の4段階で返してきますが、docomoのiモードブラウザ 2.0端末搭載端末では0～100の101段階で返してきます。

図5 電池の状況を示す値

上記表に対応した電池のアイコンを表示するムービークリップ「batt_mc」を用意し、以下のようにフレームアニメーションを作成しました。

図6 batt_mcの中身。1～4フレーム：最大容量3の電池のアニメ（4段階）、5～9フレーム：最大容量100の電池のアニメ（6段階）、10フレーム：充電中のアイコン

電池の状態に合わせてbatt_mcのフレームを移動するようにします。実際のスクリプトは以下になります。

        //充電中かどうか？
v_charging = fscommand2("GetPowerSource");

//電池の状態
v_maxBatt = fscommand2("GetMaxBatteryLevel"); //電池の最大容量
v_nowBatt = fscommand2("GetBatteryLevel"); //現在の電池容量

//ジャンプするフレーム番号を入れる変数
v_battNum

//充電中かどうか？
if(v_charging){//充電中
    v_battNum = 10
}else{

    if (v_maxBatt == 100) {//最大容量が100の場合
        if (v_nowBatt>80) {
            v_battNum = 9
        }else if (v_nowBatt > 60) {
            v_battNum = 8
        }else if (v_nowBatt > 40) {
            v_battNum = 7
        }else if (v_nowBatt > 20) {
            v_battNum = 6
        }else if (v_nowBatt > 0) {
            v_battNum = 5
        }

    }else if (v_maxBatt == 3) { //最大容量が3の場合
        v_battNum = v_nowBatt + 1
}

//batt_mcのフレームをジャンプする
tellTarget("batt_mc"){
    gotoAndStop(/:v_battNum)
}
    

FScommand2は、時間や日付の取得以外にもいろいろな用途に使えます。よく使うFScommand2を紹介しましょう。

        //再生クオリティーの変更
status = fscommand2("SetQuality", "high"); //高
status = fscommand2("SetQuality", "medium"); //中
status = fscommand2("SetQuality", "low"); //低

//バイブレーションを鳴らす
status = fscommand2("StartVibrate", 2500, 1000, 2); //2.5秒のバイブを1秒間隔で、2回鳴らす
status = fscommand2("StartVibrate", 1000, 500, 5); //1秒のバイブを0.5秒間隔で、5回鳴らす

//使用メモリ量を計算する
useMemory = fscommand2("GetTotalPlayerMemory") - fscommand2("GetFreePlayerMemory");
trace(useMemory)
→出力結果　メモリの使用量

//URLエンコード・デコード
txt = "エンコードテスト"
status = fscommand2("escape", txt, "escapeTxt");//エンコード
trace(escapeTxt)
→出力結果：%83G%83%93%83R%81%5B%83h%83e%83X%83g

txt = "%83f%83R%81%5B%83h%83e%83X%83g"
status = fscommand2("unescape", txt, "unescapeTxt");//デコード
trace(unescapeTxt)
→出力結果：デコードテスト
    

カレンダー機能

この機能はFlash Liteというより、スクリプトの説明になってしまいますので、手順だけを簡単に紹介します。詳しくはダウンロードサンプルをご覧ください。手順としては以下のようなやり方で作成します。

現在の月を取得
その月が何日間であるかを取得（うるう年の判定も行う）
月の1日の曜日を取得（Zeller(ツェラー)の公式）
順番に並べる

functionの代わりにcall関数を代用する

ここまで機能ごとに小分けにして説明してきました。PCの場合は、機能ごとにfunctionや、classで管理すると思います。しかし、Flash Liteでは、functionなどは使えないため、call関数で代用します。call関数というのは、フレームに書いてあるスクリプトを呼び出す関数です。

        call("フレームラベル名")
例）フレームラベル「test」に書いてあるスクリプトを実行する。
call("test")
    

呼び出せるのはフレームスクリプトなので、再生ヘッドが通らないような箇所に書くようにして下さい。今回の待ち受けでは以下のようなフレーム構成で作成しました。

図7 call関数を使ったタイムライン

1フレーム目：call関数の実行・gotoAndPlay(2)
2フレーム目：call関数の実行
3フレーム目：gotoAndPlay(2)
4フレーム目以降：関数の定義（再生ヘッドが通らない）

Flash Lite 1.1の場合、onClipEventやonEnterFrameなどはないため、フレームループでフレームアクションを実行しなければなりません。1フレーム目と2フレーム目で同じcall関数を実行しています。待ち受けの場合、1フレーム目のスクリプトは実行されますが、まれに描画が間に合わない問題が起こります。そのため、1フレーム目にはgotoAndPlay(2)と書き、すぐに2フレーム目にジャンプさせるようにします。3フレーム目にはgotoAndPlay(2)を書き、基本的に常に2フレーム目を実行させるようにします。

待ち受けでできること、できないこと

1～2回目の連載では、「できないこと」を中心に書いてきました。残念ながら、連載の最後でもできないことを書いておこうと思います。

待ち受けでできること
auのみですが、SherdObjectを読み込むことが可能です。例えば、待ち受けを表示させた回数を取得したり、データフォルダでもFlashの操作が可能なので、「たまごっち」のような育成ゲームを作ることができます。
待ち受けでできないこと
外部への通信ができません。例えば、天気予報など、外部からの情報を取得してFlash上で表示することはできません。

バイブやサウンドを鳴らすことはできません。例えば、決まった時間にバイブやサウンドを鳴らしたりすることはできません。

最後に

3回に渡りFlash Liteの解説をしてきましたが、皆さんはどう思われましたか？　おそらく、非常に制限が多くやりづらい印象で、開発者目線で言うと、Flash Lite単体では面白くないものに映ると思います。「できないこと」はこの連載で散々書きました。ただし、できないことが分かっていれば、おのずとできることも分かってくると思います。

大事なのは、制限が多いFlash Liteではなく、あなたが持っている「制限のない、素晴らしいアイデア」です。できないのであれば、サーバサイドとの組み合わせでやってしまえばいいし、何もFlashだけで解決する必要は全くないのです。ぜひ、あなただけの組み合わせを見つけて下さい。この連載がそのきっかけになれば幸いです。

Flash Lite入門講座　第3回　待ち受け時計を作ろう！

著者岡田昇三氏

作成日

ページツール

Tags

必要条件

ユーザーレベル

制作サンプルの説明：LED風の待ち受け時計

待ち受け時計の機能

制作するサイズ

各機能の実装方法

時間を取得する

日付を取得する

電波の状態を取得する

電池の状態を取得する

カレンダー機能

functionの代わりにcall関数を代用する

待ち受けでできること、できないこと

最後に

関連情報

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

Flash Lite入門講座 第3回 待ち受け時計を作ろう！

著者 岡田 昇三氏

作成日

ページ ツール

Tags

必要条件

ユーザーレベル

制作サンプルの説明：LED風の待ち受け時計

待ち受け時計の機能

制作するサイズ

各機能の実装方法

時間を取得する

日付を取得する

電波の状態を取得する

電池の状態を取得する

カレンダー機能

functionの代わりにcall関数を代用する

待ち受けでできること、できないこと

最後に

関連情報

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

Flash Lite入門講座　第3回　待ち受け時計を作ろう！

著者岡田昇三氏

ページツール