FLASHのお勉強　ーケータイ（携帯） de FLASHー

(1) FlashLite でデジタル時計

2006/12/16
　私事になるが、ケータイは通話と簡単なメールぐらいにしか使わない。　それと時計代わりである（腕時計をするのが嫌い)。　しかし、手放せない。　持つのを忘れて出かけたりすると不安を感じる。　最近電車に乗る機会が増えると、つい携帯を取り出したくなる。　Webで何かを見るのはまどろっこしい。　それで、家族の写真や山で撮った写真を見ては楽しんでいる。　何枚かの写真をボタンで切り替えて見たいと思ったのがケータイFLASHに取り組もうと思ったきっかけである。
　今回のお勉強は、まず定番の時計である。　時計はそもそも最初から付いているし、Webを探せばいくらでも気の利いたものが手に入る。　しかし、自分手作りの画面をFLASHで作るのも面白そうである。　ケータイFALSHの入門としてもいい材料と思える。　と言うのが第1回のテーマにした理由である。
　ところが、取り掛かってみると、ＦｌａｓｈＬｉｔｅ1.1対応では、ちょっとしたaction script は使えないし、まことに原始的な手法を使わなければならない。　そこで、未来を見据えて、基本的には、FlashLite2 対応のお勉強としたいと思っている。
　今回については、1.1対応、及び、2.0対応の作成方法を勉強することにする。
　なお、確認は、softbankの811SH(FL2対応)、705SH(FL1.1対応)で行った。　いろんな機種でさまざまな制約がありそうであるが、作り方の基本は同じだと思っている。
SAMPLE
　このサンプルは、Ｆｌａｓｈ７でパブリッシュ設定したものを表示している。　Ｆｌａｓｈ７でパブリッシュしたものでも、ＦｌａｓｈＬｉｔｅ2.0対応スクリプトで書かれていれば、対応機種で見る分には支障が無い。　しかし、Flash8で作成したものを、スタンドアローンでプレビューさせたときに、パブリッシュ設定をFlashLiteに設定しておけば、対応していないスクリプトを指摘してくれるので、一般的には便利である。
　したがて、以下に示すようにflash作成前に、パブリッシュ設定をFlashLiteに設定しておくほうがいいようだ。

携帯用SAMPLE（swfファイル）は、http://flashde.syanari.com/ に。

　　flashede.syanari.comのQR-Code
　ここで作成するswfファイルは、携帯向けWebページに表示すれば、携帯で閲覧可能である。　しかし、携帯電話に読み込んで、見たり、壁紙に設定したりして使うのに向いているかも知れない。
　携帯電話には、メールに添付して送ればOKで、そのファイルを保存し、直接指定して見たり、壁紙に登録したりすることができる。（ただし、確認は、上記機種)
ステージの準備（ＦＬＡＳＨ８でＦｌａｓｈＬｉｔｅ2.0ファイルを作成する場合)
パブリッシュ設定（あらかじめMacromediaのサイトから"fl8_flashlite2_update_jp.exe"をDLしてインストールしておく）
●メニューから新規を選び、テンプレートのグローバル携帯電話・ＦｌａｓｈＬｉｔｅ1-1を選ぶ
●次いで、ステージのサイズを240,260に変更する（本ＳＡＭＰＬＥの場合)
●パブリッシュの設定ウインドウを開き、バージョンをFlashLite2.0に、アクションスクリプトのバージョンをActionScript2.0に
●Ctrl＋Enterでプレビューさせるとデバイス選択画面が出るので、スタンドアローンプレイヤー、一般携帯電話を選択
ステージの準備
●フレームレートは１２fps
●上の設定で、ActionScriptとContentsの、2つのレイヤーができる。さらに、watchレイヤーをContentsの上層に作成
背景とアニメーション
●画面に動きをと言うことで、ここでは、蝶が左から右へと舞うアニメーションを入れてみた。　ここで使ったgifアニメーションはサイトFataNote（http://www5a.biglobe.ne.jp/~fata/Material/）からいただきました。
●「挿入」「新規シンボル」で名前を付けて（ここではageha）ムービークリップを作成し、編集画面に gifアニメーションを読み込み、agehaの編集画面を閉じる
●「挿入｣「新規シンボル」で名前を付けて（ここではｂack)編集画面に入る
●背景画像（ここでは、240×260のバラの写真)を配置する（中心座標を基準点に）
●新規レイヤーを追加して、ライブラリーからagehaをドラッグして、背景画像の左外にドロップする
●タイムラインで、agehaにモーショントウイーンを設定し、最終的には、画像の右側の外に移動するようにする
　（モーショントウイーンの設定は、本サイト(2)曲線運動などが参考になります）
●back編集画面を閉じる
なお、ここで示したアニメーションはほんの一例で、gifの挿入以外にも背景の切り替えなどを含め、アイディア次第でいろんなことが可能である。
デジタル時計
●「挿入」「新規シンボル」でDandTを作成する
●編集画面に、日付と時間表示用のダイナミックテキストボックスを２つ作成し、インスタンス名をつける（ここでは、whatDay、whatTime）　FlashLite1.1の場合は、変数として命名する
●テキストボックス表示フォントの大きさ、色、FONTを設定する（特殊なFONTを使う場合は、数字と：を埋め込む）
●シンボル編集画面のFRAME1に、以下のスクリプトを記入する
●FlashLite1.1の場合は、FRAME2にgotoAndPlay(1); と記入
FlashLite2.0 FlashLite1.1
//曜日の配列定義
var yobi:Array = new Array("日", "月", "火", "水", "木", "金", "土");

_root.onEnterFrame = function() {

//基本データ取得
var now:Date = new Date();
var day:String = yobi[now.getDay()];
var y = now.getFullYear();
var m = now.getMonth()+1;
var d = now.getDate();
var hr = now.getHours();
var mn = now.getMinutes();
var sc=now.getSeconds();





//表示桁数あわせ
if (m<10) {m = " "+m;}
if (d<10) {d = " "+d;}
if (hr<10) {h = "0"+hr;}
if (mn<10) {mn = "0"+mn;}
if (sc<10) {sc = "0"+sc;}

//表示
whatDay.text = y+"年"+m+"月"+d+"日"+"("+day+")";
whatTime.text=hr+":"+mn+":"+sc;
}		 //基本データ
y = fscommand2("GetDateYear");
m = fscommand2("GetDateMonth");
d = fscommand2("GetDateDay");
day=fscommand2("GetDateWeekday");
hr = fscommand2("GetTimeHours");
mn=fscommand2("GetTimeMinutes");
sc=fscommand2("GetTimeSeconds");

//曜日変換
switch (day) {
case 0 : day = "日"; break;
case 1 : day = "月"; break;
case 2 : day = "火"; break;
case 3 : day = "水"; break;
case 4 : day = "木"; break;
case 5 : day = "金"; break;
case 6 : day = "土"; break;
}

//表示桁数あわせ
if (m<10) {m = " " add m;}
if (d<10) {d = " " add d;}
if (hr<10) {hr = "0" add hr;}
if (mn<10) {mn = "0" add mn;}
if (sc<10) {sc = "0" add sc;}


whatDay = m add "/" add d add "(" add day add ")";
whatTime=hr add ":" add mn add ":" add sc;
表示
●ステージのcontentsレイヤーにライブラリーからbackをドラッグして画面いっぱいに配置する
●watchレイヤーにライブラリーからDandTをドラッグして好みの位置にドロップする。
●ActionScriptレイヤーに以下のスクリプトを書き込み、パブリッシュする
　　　fscommand2("FullScreen", true);
　　　fscommand2( "SetQuality", "high" )
HOME　　　お勉強総リスト