Flash Lite 2.0 携帯フルフラッシュサイト制作。XMLはCasaframeworkで。

Flash Lite 2.0 携帯フルフラッシュサイト制作で、事前に知っておいたほうが良い事のメモ。
 

遅いし。画面ちっさいし。不便だし。って理由で
昔から携帯ではインターネットをしないオレ。
携帯サイト作るのは制限やら機種依存やらが多すぎてやってられない・・・。
って思ってました。

携帯専門でやってれば常識になるんだろうけど、
PCサイト作ってる方が断然楽しいし!

でもHTML5の登場でGeoLocationとか。楽しくなりそうだけど、
そちらはスマートフォンで覚えようと思います!

さて。本題。

携帯用フラッシュサイトを Flash lite 2.0 で作った。
サイトではないが、フルフラッシュでチラシが表示されるというもの。

mobile03.jpg

そぅ。マクドナルドのクーポンのようなもの。

今回作った物の特徴は、CMSをかまして、XMLでデータを拾い、
携帯の2キーと8キーで表示されている商品を切り替えるというもの。

携帯の世界は知らないことばかり。
書籍を買いに行っても携帯FLASH関連のものは置いてありませんでした。
 
■まず、Flash liteのバージョンを見定める。
 
2011年4月現在、リリースされている携帯Flash Playerのバージョンは、
Flash lite 1.x 2.x 3.x の3パターン。
 
3.xに関してはDocomoの最新機種と認識。カバー率も低いとのこと。
 
1.xまで下げるとなると、Actionscript1.0になるのかな。
とにかく使用不可な関数ばかり。。。とてもじゃないけど1.xではやってられない。
当然のことながらXML経由での画像は読み込めないとのこと。
 
なので切捨て。
今回の必須環境はFlash Lite 2.0が搭載端末。
 
 
■解像度で悩む。
 
携帯の解像度って聞かれると、240*320でいんじゃない?
って答えちゃうくらい携帯知識は大昔。
 
でも調べると、今の時代でも240で作れば間違いないらしいのです。
 
でも個人的に古い携帯好きじゃないし、新しいもの好きなので、
どーんと 480*640で作りました。
 
.swfへの直アクセスだし、勝手に縮小されるし。いいかなと思って。
 
 
■その次に、FLASHの表示モード選定
 
携帯でFLASHを表示させるには2パターンあって、
・インラインモード
・インタラクティブモード
 
インラインはその名の通りよくある部分的FLASH。
キー操作等が受け取れないので今回は使えない。
 
インタラクティブモードは埋め込みタグ(Embed等)が必要なく
直接 .swfへアクセスさせればOK。
全画面FLASHやゲームなんかはこっち。
 
というわけで表示モードはインタラクティブで。
 
詳しくは
 
-------------------------------------------------------------------------------
-------------------------------------------------------------------------------
 
に載ってました。
 
 
■XMLはCasaFrameworkで。
 
携帯FLASHといえど、Player Lite 2.0~は、PCのFlash Playerでいう7.0に相当するらしい。
言語はActionScript 2.0 で記述できるということで、
ならCasaFrameWork使えるかもと思って試したところ普通に使えた。
 
CasaFrameWorkについては
Actionscript2.0 で、CASAを使用し苦労せずFLASHにRSSを読み込む
の記事ご覧ください

 

Casaが使えて、XMLパースがとっても楽になった。
実機では検証してませんが、Tweenerも使えました。(重くなるけどね)
 
ただ、ここで1つ問題。
 
携帯FLASHサイトは、パケット通信料が跳ね上がるの防止のため、
外部ファイルへのアクセスには1クッション(キーに関連付ける)挟まないと通信できないとのこと。
 
無理してやっても、
FTPA018: キー入力に関連付けられていなかったため、XXXXXXXに対する loadVariables の呼び出しは無視されました。」
って警告されるだけっす。
 
※docomoの機種Flash lite3.0からはダイレクトに通信可能なようです
 
という制限もあって、下記のような流れになってしまった。
 
 
①FLASH最初の画面に操作説明と位置づけて、バナーをクリックさせる。
(外部XMLファイルを読みに行かせるためのクッション)
 
mobile01.jpg
 
 
②次の画面ではチラシを見るボタンを設置。
(チラシ最初の画面でXMLから取得した画像を表示させるため)
 
mobile02.jpg
 
 
③本来ならこれが①であってほしい画面です。
 
mobile03.jpg
 
 
後は携帯数字キーのイベント取得して商品を切り替えていきます。
 
 
■携帯の十字キー上下で画面を切り替えたかったのに。。。
 
またもここで問題発生。
マクドナルドのクーポンFLASH版では上下キーでクーポンが入れ替わるのですが。
上下キーのDownイベント取れないのです・・・。
 
外部画像ではなく、FLASH内部の画像にしてしまえば、
上下キーでのフォーカス利用してRollOver割り当てることでなんなく出来るけど、
今回はCMSがあるので、外部との通信が必須。
 
粘ったが解決できず、携帯ユーザー独特の「2」と「8」キーを利用することにしました。
 
 
■そして容量制限を気にしなければ・・・。
 
幅広く出回ってる携帯機種。機種によってそれぞれ容量が違う。
docomoの機種はFlash lite2.0積んでるものないですが、
 
docomo 最大100KB ※外部load分含む (Flash lite 3.0)
au : 最大100KB ※1セッションにつき
SoftBank:最大150KB※1セッションにつき
 
 
ってことなんで100KB以内に収めることにしました。
 
以上。
 
これら+ケータイFLASH概要をてっとりばやく把握したい人には
 
ま。正直めんどくさかったけど、
Flash lite 2.x は FlashPlayer 7 相当とのことなので。
容量制限さえクリアすればかなりリッチな携帯フルフラッシュサイト作れることを知れたので良かったかな。
 
 
外部との絡みのないサイトなら作ろうと思った。今日この頃でした。
 
もっと効率が良い作り方やノウハウご存知でしたら教えてくださいっ。
 
最後に、今回作ったやつ丸ごと置いておきます。
 
↓のダウンロードから持っていってください。
 
悩みながら書き直し行ってたので、ちょー解読不能と思われますっ!
 
 / coupon ← XMLで読み込む画像
 / org ← CASA関連
 / src ← Twinner関連
sample.as  ← Twinner関連
Sample.as2proj  ← FlashDeveloperのプロジェクトファイル
sample.fla  ← flaファイル
sample.swf  ← SWFファイル
sample.xml ← 読み込む情報
 
最後に、FLASHのパブリッシュ設定で Flash lite2.0 選択すると、
パブリッシュで Device Central 立ち上がりますが、
動作がおかしかったので完全シカトしました。
 
検証には I-mode シミュレータⅡ使ってます。
 

 
Check |

prev entry

next entry

Comment