Recomendados
Más contenido relacionado
Más de smallworkshop
Flash Lite
- 1. Flash Lite Flash Liteの仕様と簡単なデジタル時計 Katsumi Sekiya
- 2. Flash Liteについて ■Flash Liteとは アドビ システムズ社の Macromedia Flash Lite は、Adobe Flash Player のモバイルデバイス用に設計されたバージョン。 2003年に発表されたdocomo505iシリーズなどから対応され始めました。 Flash Liteのバージョン Flash Lite 1 には Flash Lite 1.0 と Flash Lite 1.1 という 2 つのバージョンがあり、まとめてFlash Lite 1.x と呼ぶ。現在バージョンは １.0/1.1/2.0/3.0/3.1があります。 しかし現状ではまだ1.1が主流です。 なぜバージョン1.1なのか 現在携帯端末の中で最も多く対応している（普及台数が多い）バージョンが1.1だからです。 9ページ目に各キャリア、バージョンごとの仕様を一覧にまとめました。 ※参考リンク（機種情報） docomo http://www.nttdocomo.co.jp/service/imode/make/content/spec/flash/ au http://www.au.kddi.com/ezfactory/tec/spec/new_win/ezkishu.html SoftBank http://creation.mb.softbank.jp/
- 3. ■Flash Liteを作成するためのツール Flash Liteを作成するためのツールバージョン毎に必要な作成ソフトが違います。 Flash Lite1.0、1.1コンテンツを作成する場合「Macromedia Flash MX2004 Professional」以降が必要。 Flash Lite2.0、2.1コンテンツを作成する場合「Adobe Flash CS3 Professional」以降または、「Macromedia Flash8 Professional」にパッ チをあてることで作成が可能。また、「Adobe Flash CS3 Professional」には「Adobe Device Central CS3」という携帯端末をエミュレート するツールが含まれています。 Flash Lite3.0、3.1コンテンツを作成する場合「Adobe Flash CS3 Professional」以降が必要。 「Adobe Device Central CS3」 Flash8の頃よりエミュレータが配布されるようになり、CS3では付属し携帯向けに設定してパブリッシュするだけで立ち上がりプレビューし てくれるエミュレーター。（23ページで解説） ドコモでは「iモード HTMLシミュレータ」というFlash Liteを含むHTMLをプレビューするドコモ専用のツールがある。 Flash Lite1.0、1.1コンテンツであれば、フリーソフトで作成することも可能。 「ParaFla!」、「Suzuka」 ※参考リンク ドコモ「iモード HTMLシミュレータ」 「ParaFla!」
- 4. Flash Liteの仕様 1.再生方式 Flash Liteには2種類の再生方式（インタラクティブ再生とインライン再生）がある。 ■インタラクティブ再生 ・ブラウザで直接swfを再生（自動縮小） ・上下キーやボタンアクションが利用できる ・ゲームやメニュー等ユーザーに操作させるコンテンツ向け ■インライン再生 ・<object>タグを使用してXHTML上にswfを組み込んで表示 ・アニメーションバナーや、簡単なムービーを再生する場合に向いている ・ボタンアクションや上下キーでムービーを操作することは出来ない ■その他 ・待ち受け画面 ・メールに挿入（Flash Lite3.x端末） 2.容量制限 Flash Lite1.1以降はSWFのファイルサイズは「100kb」。 最新の一部の機種ではこの100kbの制限はあるが、「loadMovie()」等をすることで外部からデータを読み増しすることが出来る。 docomo Flash Lite1.1の場合は外部データを含めて100kbを超えるとコンテンツの再生が停止する。 現時点では基本的に100kb（出来れば80KB）の範囲で作成することが望ましい。
- 5. 3.メモリの制限 Flash Liteに割り当てられているメモリの量はパソコン用のFlashに比べて貧弱。 キャリア バージョン 参考メモリサイズ ※機種毎に変動します docomo 1.0 200～400KB 1.1 2MB程度 3.0 3MB程度 3.1 3MB程度 3.1 iモードブラウザ2.0端末 15MB程度 au 1.1 1MB程度 2.0 3MB程度 3.0 3MB程度 SoftBank 1.1 1MB程度 2.0 2MB程度 3.0 3MB程度 ■なるべくメモリを使わず開発する 単純なオブジェクトで描画する。 メモリ管理・・・・Adobe Device Centralでヒープメモリをチェックしながらトライアンドエラーで対応。
- 6. 4.画面とフォントのサイズの制限 ・画面・・・横240px / 高さ240px～266px ・フォント・・・デバイスフォントのみで12px、24pxが一般的。 ■フォントの使用について ・携帯電話によって搭載しているフォントが違う。 ・携帯電話に搭載されているフォントは1種類しかない→フォントの埋め込み ■フォントの埋め込みとデバイスフォントについて フォントの埋め込みを使えば汎用デバイスフォント（_ゴシック / _明朝 / _等幅 / _sans / _serif / _typewriter）以外の文字を埋め込ん で表示する事ができる。 ・デバイスフォント・・・0.8KB ・数字のみ埋め込み（11文字）・・・2KB ・アルファベットの埋め込み・・・（27文字）・・・4KB ・日本語全て（7,517文字）・・・502KB ■デバイスフォント ・デバイスフォントは携帯電話に搭載されているフォントで表示→ファイルサイズを小さくする事が出来る。 ・利用できるフォントがそれぞれの機種に搭載された1種類しかない。 ・デバイスフォントは機種によってビットマップフォントまたはスケーラブルフォント。
- 7. 5.サウンド形式の違い docomoではMIDI方式、auとSoftBankではヤマハが提唱した「SMAF」という携帯電話に向いたサウンド形式が採用されている。 キャリア バージョン 参考メモリサイズ ※機種毎に変動します docomo 1.1～3.1 MIDI、SMF 3.1 iモードブラウザ2.0端末 MIDI、SMF、MP3 au 全バージョン SMAF（一部MIDI） SoftBank ・MIDI形式では機種の音源を使用 ・SMAF形式では波形データも扱える ・MIDI、SMAFのオーディオ形式は、Flashドキュメントに読み込ませることができない。 ・編集する際に読み込ませるサウンドデータは何でも構わない。 参考リンク Wav形式のファイルをSMAFへ変換するツール Wave to SMAFコンバータ（無料） http://smaf-yamaha.com/jp/tools/downloads.html#converter ■デバイスサウンドを使用する際に注意すべき点 サウンドの再生方法 ・ストリーミング再生は出来ない。 ・サウンドの再生方法（同期）は「イベント」または「開始」を使用する。
- 10. キャリアごとのFlash Liteの仕様 キャリア バージョン FlashPlayer 使用言語 容量制限 外部アクセス フォント 四方向キー docomo FOMA 最大 100KB 1.0 Flash4相当 Flash4スクリプト 使用不可 20px or 24px 上下のみ mova 最大 20KB 使用可能 12px or 24px 最大100KB 1.1 Flash4相当 Flash4スクリプト loadMovie()は、swf 機種により、16px 上下のみ ※外部load分含む のみ読込み可 20pxも可能 最大100KB 3.0 Flash7相当 ActionScript1.0,2.0 使用可能 スケラーブル 上下のみ ※外部load分含む 最大100KB ※外部load分含む 3.1 Flash8相当 ActionScript1.0,2.0 使用可能 スケラーブル 上下のみ ※ボタンアクションの場合、 1セッションにつき100KB 最大500KB ※外部load分含む 上下 or左右 3.1 Flash8相当 ActionScript1.0,2.0 使用可能 スケラーブル （メタデータで ※ボタンアクションの場合、 設定） 1セッションにつき500KB au WIN 最大 100KB 使用可能 12px or 24px 1.1 Flash4相当 Flash4スクリプト 1X 最大 48KB LoadMovie 機種により、16px 上下のみ ※1セッションにつき ※swfのみ読込み可 20pxも可能 使用可能 12px or 24px 最大 100KB 2.0 Flash7相当 ActionScript1.0,2.0 LoadMovie 機種により、16px 上下のみ ※1セッションにつき ※swfのみ読込み可 20pxも可能 12px or 24px 最大 100KB 3.0 Flash7相当 ActionScript1.0,2.0 使用可能 機種により、16px 上下のみ ※1セッションにつき 20pxも可能 SoftBank 使用可能 12px or 24px 1.1 Flash4相当 Flash4スクリプト 最大 100KB LoadMovie 機種により、16px 上下左右 ※swfのみ読込み可 20pxも可能 12px or 24px 2.0 Flash7相当 ActionScript1.0,2.0 最大 150KB 使用可能 機種により、16px 上下左右 20pxも可能 12px or 24px 3.0 Flash7相当 ActionScript1.0,2.0 最大 150KB 使用可能 機種により、16px 上下左右 20pxも可能
- 11. ちょっと何か作ってみた。 折角ここまで勉強したんだったら、という事でちょっくら携帯ならではの機能を使った待ち受けやゲームでも作ってみようかと思いまして。 で今回考えたのはやはり待ち受けでは時計ではないですかね。ここでFlash Lite特有のコマンドfscommand2が使えますから。ゲームは 簡単なものをと考えていましたが、間に合いませんでした。申し訳ございません。 これ見ればある意味でチュートリアルみたいな感じにもなりますしね、これを参考に皆さん各自の待ち受けやサイトを作ってみればいいか と思いますね。 ■デジタル時計の製作 今回は簡単な待ち受けのデジタル時計を作ってみました。 サンプルの完成品はこちらになります。 http://umaipage.com/dejital2.swf 携帯でDLしてみようという方は右のQRコードから読み取って 頂ければと思います。 このQRコードは「QRWindow」というフリーソフトを使用して作 りました。 「QRWindow」 http://www.vector.co.jp/soft/win95/net/se331759.html またこちらではブラウザ上でQRコードの作成が出来ます。 http://qrcode.jp/
- 12. ■ドキュメントの設定（Flash CS3) 新規作成から携帯待ち受け用データに設定します。 1.新規作成→新規ドキュメントの一般タブよりFlashファイル（モバイル）を選択。 2.するとAdobe Device Central CS3が起動し、右図2.の画面が出ます。 新規ドキュメントタブからプレーヤーバージョンをFlash Lite 1.1にします。 3.この画面の下部にある選択されたすべてのデバイスのカスタムサイズの横のチェックボックスにチェックを入れ、幅と高さを（今回 は）240pxにします。その後作成ボタンを押します。
- 14. 時計スクリプトの記述 ■時間の取得 各ダイナミックテキストに設定した変数「hour」「minute」「second」に現在の時刻が入るようにスクリプトを書いていきます。 「スクリプトレイヤー」を選択して「アクション」パネルを開き、1フレーム目と2フレーム目にスクリプトを入力します。 スクリプトレイヤー ： 1フレーム目 hour =fscommand2(“GetTimeHours”); minute =fscommand2(“GetTimeMinutes”); second =fscommand2(“GetTimeSeconds”); スクリプトレイヤー ： 2フレーム目 stop(); ■繰り返し時間を取得する 時間を取得させ続けるためには、1フレーム目のスクリプトが繰り返し実行される必要があります。 そこで2フレーム目のstop();を削除し、gotoAndPlay(_currentframe-1);と入力します。 2フレーム目のgotoAndPlayが現在の1フレーム目のスクリプトを実行、常に時間を監視し時計が動き出します。 スクリプトレイヤー ： 2フレーム目（修正） gotoAndPlay(_currentframe-1);
- 15. デジタル時計らしくする ■一桁の場合の処理 現在の時刻を指す数字が1桁の場合（0～9時、0～9分、0～9秒）、表示の バランスが崩れてしまいます。デジタル時計らしく「1」と1文字の表示でなく 「01」と2文字で表示するようにします。 「スクリプトレイヤー」の1フレーム目を選択して、「アクション」パネルを開 き、先ほどのスクリプトの次行以降に「もし秒が10より小さければ秒の前 に”0”を足しなさい」という意味の命令を追加します。 スクリプトレイヤー ： 1フレーム目（追加） if (hour<10) { hour = “0” add hour; } 0が表示されているか確認する if (minute<10) { minute = “0” add minute; } if (second<10) { hour = “0” add second; } ■動作の確認 これで時計についてはひとまず完成です。 Adobe Device Central CS3を使用して1桁の時に頭に0がきちんと表示さ れているか確認してみます。
- 16. 日付と曜日の取得・表示 ■カレンダー表示部の作成 新しくレイヤーを作成し「カレンダーレイヤー」とします。 「カレンダーレイヤー」上にダイナミックテキストを4つ配置します。それぞれ左から変数を「year」「month」「day」「weekday」と入力します。 日付の各ダイナミックテキストの間には「/」を静止テキストで配置しました。 変数「year」 変数「weekday」 変数「month」 変数「day」 ■カレンダースクリプトの記述 ： 日付・曜日の取得 各ダイナミックテキストに設定した変数「year」「month」「day」「weekday」にそれぞれ情報が入るようにスクリプトを書きます。 「スクリプトレイヤー」を選択して、「アクション」パネルを開き、1フレーム目にスクリプトを入力します。 スクリプトレイヤー ： 1フレーム目（追加） day =fscommand2(“GetDateDay”); month =fscommand2(“GetDateMonth”); year =fscommand2(“GetDateYear”); weekday =fscommand2(“GetDateWeekday”);
- 17. ■月・日が1桁の場合の処理 月、日に関しては1桁になる場合があるので、時計表示と同じ様に1桁→2桁処理をしておきます。 スクリプトを書いたら、一度ムービープレビューしてみます。年、月、日はきちんと表示されているのに曜日の箇所に数字が表示されていま す。 これは、fscommand2(“GetDateWeekday”)が現在の日付に該当する曜日を0～6の数字として取得しているためです。 変数「weekday」 これがプレビュー時数字で表示されている 変数「month」 スクリプトレイヤー ： 1フレーム目（追加） if (weekday == 0) { ■曜日を表示させる wd = “sun”; 取得した数字が0なら”sun”の文字列を、1なら”mon”の文字列をというように、 それぞれ曜日を示す”sun”、”mon”、”tue”、”wed”、”thu”、”fri”、”sat”を取得し } else if (weekday == 1) { た数字によって表示するようにします（下の表）。 wd = “mon”; } else if (weekday == 2) { 「カレンダーレイヤー」の曜日を表示するダイナミックテキストを選択し、変数名 を「weekday」から「wd」に変更します。 wd = “tue”; 「もし、変数weekdayの数字がｘであったならば、曜日を指すダイナミックテキス } else if (weekday == 3) { トwdを対応する文字列に変更しなさい」という意味のスクリプトを追加します。 wd = “wed”; } else if (weekday == 4) { wd = “thu”; 数字と曜日の対応表 } else if (weekday == 5) { wd = “fri”; 日曜 月曜 火曜 水曜 木曜 金曜 土曜 } else if (weekday == 6) { wd = “sat”; 0 1 2 3 4 5 6 }
- 18. 1フレーム目 電波状態と電池表示の取得・表示 ■電波状態表示部の作成 電波の状態を示すシンボルを作成します。 新規シンボルで新しくムービークリップを作り、「level」と名付けました。「level」内の 「レイヤー1」を「蹄鉄レイヤー」とし、新しくレイヤーを作成し「スクリプトレイヤー」とし ました。それぞれフレームの挿入で4フレーム目まで伸ばしておきます。 2フレーム目 ■ムービークリップの作成 「蹄鉄レイヤー」の1フレーム目を選択して、キーフレームに変換します。 今回はイラストレーターで製作した蹄鉄のマークを使い、これを配置しました。 2フレーム目もキーフレームに変換し、先ほど配置した蹄鉄のマークをコピー＆ペー ストし横に配置します。同様に3フレーム目、4フレーム目とひとつずつマークを追加 3フレーム目 していき、4つのマークが並ぶようにします。 「スクリプトレイヤー」を選択し、1～4フレーム目それぞれにstop();を書いておきま す。 4フレーム目
- 19. ■ステージへの配置 シーン1に戻り、新しくレイヤーを作成「シグナルレイヤー」とします。先ほど作ったムービークリップ「level」を「シグナルレイヤー」に配 置、levelのインスタンス名を「signal」とします。 このムービークリップの横に静止テキストで「Signal Level」と入力したものを配置しました。 またこのテキストはフォント（Losers）を使用していますので、どの携帯でも同じ様に見せる為に埋め込みにしました。 シンボルをドラッグして配置 フォントを埋め込み インスタンス名「signal」 ■電波状態の取得 スクリプトレイヤー ： 1フレーム目（追加） 電波状態の取得には、fscommand2(“GetSignalLevel”)を使用しま tellTarget (“signal”) { す。 fscommand2(“GetSignalLevel”)では、docomoが「0」～「3」、auと gframe = fscommand2(“GetSignalLevel”)+1; SoftBankが「0」～「4」と戻り値が異なります。「0」は圏外の状態を指 if (gframe>4) { します。 gframe =4; 「スクリプトレイヤー」の1フレーム目に「電波状態の戻り値が0の時 } にムービークリップ「level」の1フレーム目、1の時に同MC2フレーム 目、2の時に同MC3フレーム目、3以上であれば同MC4フレーム目」 gotoAndStop (gframe); を表示するスクリプトを入力します。 }
- 20. ■電池残量表示部の作成・ステージの配置 新しくレイヤーを作成「バッテリーレイヤー」とします。新規シンボルでは人参のマークを使用しムービークリップ「level1」とし、シグナルレイ ヤーと同様に4フレーム目までマークを順次追加し横並びになるようにしました。 同様にこのムービークリップの横に静止テキストで「Battery Level」と入力したものを配置しました。 シグナルレイヤー同様「バッテリーレイヤー」にシンボル「level1」を配置し、インスタンス名を「battery」とします。 シンボルをドラッグして配置 フォントを埋め込み インスタンス名「battery」 ■電池残量の取得 電池残量の取得には、fscommand2(“GetBatteryLevel”)を使用 スクリプトレイヤー ： 1フレーム目（追加） します。 fscommand2(“GetBatteryLevel”)では、docomo、au、SoftBank tellTarget (“battery”) { 共に「0」～「3」の戻り値をとり、「0」はバッテリーが空の状態を指 gotoAndStop = fscommand2(“GetBatteryLevel”)+1; します。 } 「スクリプトレイヤー」の1フレーム目に電波の時と同様に残量に よって表示を変更するスクリプトを入力します。
- 21. 電源状態の取得・表示 Flash Liteでは携帯電話がバッテリーの使用しているのか、外部電源を使用して いるのかの情報を取得する事が出来ます。 ■電源状態の表示部の作成 新規シンボルで新しくムービークリップを作り、「dengen」と名付けます。 dengen内の「レイヤー1」を「文字レイヤー」と名前を変更し、新しくレイヤーを作 成、「スクリプトレイヤー」とします。それぞれフレームを挿入し2フレームまで伸ば しておきます。 「スクリプトレイヤー」を選択し、1フレームと2フレーム目にstop();と書いておきま す。 次に「文字レイヤー」の2フレーム目をクリックし空白キーフレームを挿入します。 この空白キーフレームとなった「文字レイヤー」2フレーム目に静止テキストで充 電中を示す「now charging energy」という文字を配置しました。 ■ムービークリップの作成 先ほど配置した「now charging energy」を選択し、「右クリック→シンボルに変 換」してムービークリップにします。今回は「Charge_mov」としました。 「Charge_mov」をダブルクリックして編集します。充電中は文字が点滅を繰り返 すようにしました。特に難しい事は何もしてませんねぇ・・・ 充電中を示す文字 Charge_movのタイムラインの状態
- 22. ■電源状態の表示部の作成・ステージ配置 シーン1へ戻り、新しくレイヤーを作成し「充電レイヤー」とします。先ほど作ったムービークリップ「dengen」を「充電レイヤー」に配置、 「dengen」のインスタンス名を「charge」としました。 シンボル「dengen」 をドラッグして配置 ※シンボルに何も表示がないのは、 1フレーム目に何も表示がないからです。 インスタンス名「charge」 ■電池状態の取得 スクリプトレイヤー ： 1フレーム目（追加） 電現状態の取得には、fscommand2(“GetPowerSource”)を使用します。 ms = fscommand2(“GetPowerSource”); fscommand2(“GetPowerSource”)では「0：バッテリーを使用している」、 if (ms == 1) { 「1：外部電源を使用している」が戻り値となります。 tellTarget (“charge”) { 「スクリプトレイヤー」の1フレーム目に、電源の状態によって表示を変更す gotoAndStop(2); るスクリプトを入力します。 } } else { バッテリーを使用している時はムービークリップ「dengen」の1フレーム目 で止まり何も表示されません。外部電源を使用している時は2フレーム目 telltarget (“charge”) { へ移動し文字の点滅が始まります。 gotoAndStop(1); } これでデジタル時計は完成です。 }
- 23. デジタル時計スクリプト（サンプル） ■最後に これは今回のデジタル時計で1フレーム目に記述したスクリプトです。 これを使用すれば、今後この様なデジタル時計を使った待ち受け等を作 る際には画像やシンボルを変更するだけですので、色々なパターンがす ぐに出来る様になります。 今回は時間が無くて目を回したり、時間によって背景を変更したりする事 が出来ませんでしたが、そんなに難しい事はありません。 興味がありましたら自分の待ち受けを作ってみてはいかがでしょうか。
- 24. Adobe Device Central CS3解説 タ ー ファイルサイズの確認はここで出来ます。 ゲ （100kb以内収まるかどうか確認） ッ ト と キャリブレーションを行う前は携帯電話のパフォーマンス な ではなく、使用しているPCのパフォーマンス速度で エミューレートを行うため、まずはデバイスのキャリブレーション る を行い、シュミレートにチェックを入れておきます。 携 帯 電 デバイスステータス 日付や時間の変更はここで出来ます。カレン 話 ダーやカウントダウン、時間によって変化するア プリケーションに使用します。 の 選 バッテリーの残量はここで変更できます。 択 充電中の表示を確認するには「チャージャー」 にチェックを入れます。 ネットワークステータス 電波状態のテストに使用します。 このスライダーで電波の強さをエミュレート出来 ます。