1. ホーム
  2. Blog
  3. chumby検証：FlashLite3 でFuseKit と CASA Framework は動くのか？

chumby検証：FlashLite3 でFuseKit と CASA Framework は動くのか？

寺井 周平

寺井 周平

デザイン,技術

chumby.jpg

寺井です。前回のエントリでは chumby 全般の体験レポートでしたが、今回から Flash にフォーカスを当てていきます。

chumby のウィジェットは FlashLite3.0 で作ることになります。
巷では FlashLite3 は、ほとんど ActionScript2.0 だという話を聞きますが、実際にどこまで互換しているのか？自分が過去に作った ActionScript2.0 サンプルを FlashLite3.0 コンテンツに変更してみて、何が動いて何が動かないかを検証してみることにします。
※今回は chumby で動く FlashLite3 コンテンツを検証することになります。一部携帯で搭載されている FlashLite3（FLV動画等制限があるとか）コンテンツは仕様がちょっと違うのでご注意を。

既存の AS2 コンテンツを FlashLite3 に切り替える検証

過去にカーセンサーの車種データでクイズを出題する「インパネQ」という AS2 製の Flash コンテンツを作成しました。

これを FlashLite3 コンテンツにしてみます。どこまでそのまま（手間無く）移植・再現できるかに挑みますよー。

変更前のActionScript2.0状態

まず、AS2 の状態で、特徴的な実装点をリストアップしてみると：

  • ブログパーツなので swf ステージサイズが横160px×縦162px
  • CASA Framework の XmlLoad を使って、外部サーバーにあるカーセンサーのAPI(XML)をロードしている
  • FuseKit を使って、写真やタイムバーのトゥイーンアニメーションをしている
  • 音声は CASA の SoundLoad を使って、web 上にある intro.mp3 をロードしている。（外部MP3サウンドのロード）

という感じで、AS2 ライブラリの有名どころを使って、比較的スクリプト寄りの実装をしていました。タイムラインは使わない、いわゆる「.flaのルートは1フレーム目のみ使用」という構造です。ソースを配布していますのでご覧ください。
さぁこれがどこまで動くのでしょうか？？

まず、FlashCS3 上にて FlashLite3 に変換してみる

Flash IDE(CS3) のパブリッシュ設定で「FlashLite3」に切り替えてパブリッシュしてみます。これだけです。

chumby_fla.jpg

当然 DeviceCentral が起動します。プレビュー環境は特にいじらず、 Device Sets は「Flash Lite 3.0 16 240×320」、ContentType は「Standalone Player」です。表示サイズは、自動でフィッティングしてくれるので、今の場合は横幅いっぱいになるように拡大されています。

chumby_devicecentral.jpg

結果としては、ほぼ完璧に動きます。上のリスト2,3,4ともきちんと動いてくれました。
ピンクのボタンは下のように FuseKit のメソッドで変色させているのですが、

linkBtn.onRollOver = function(){
	//FuseKit の ZigoEngine+Shortcutsクラスの使用例：0.5秒で色をピンクに変更
	this.colorTo("#FE5FBE",.5);
}
linkBtn.onRollOut = function(){
	this.colorTo("#222222",.5);
}

これがちゃんと動いていることにちょっと感心しました。

外部 html ページへのリンクもあるのですが、DeviceCentral 上では指定ページをバックエンドでブラウザで開きます。

chumby 上で動かしてみる

さていよいよ chumby で動かしてみます。その前に、ある程度 chumby 向けにやっておくことがありますので、そちらは済ませておきます。

  1. フレームレートを15に変更。←chumby は15fps なのです。
  2. ウィジェットの設定ファイル「profile.xml」を作成する
  3. chumby ウィジェット選択画面で表示される時のサムネイルJPG画像（横80px×縦60px）を用意する。
  4. あえてステージサイズは変更しない←サイズ調整されるかを検証したいため

今回は手早く検証ができるように USB メモリにウィジェットファイル一式を入れて chumby に刺し、そこからウィジェットを呼び出す方法で検証してみます。

chumby_usb.jpg
※この3ファイルを USB メモリに入れて chumby に刺し、ウィジェットメニューの更新をかければ追加されるというわけです。ネット公開するならこれらをネット上に置くって寸法です。

このあたりのお作法は FlashLite ではなくて chumby のお作法ですので詳細は省きます。前回も紹介した書籍「chumby で遊ぼう!」に詳しく書かれています。

chumby_back.jpg

さて、アプリ選択画面。サムネイルはきちんと表示されています。これは当然。

chumby_menu.jpg

次にウィジェットを起動。chumby でも画面サイズにフィットされています。chumby は横320px×縦240pxですので、「インパネQ」は縦にフィットされて表示されています。

そしてその挙動ですが、

chumby_inpane.jpg
※写真画像がはみ出しているのはブログパーツだったため、マスクをかけてなかったのための想定内の表示です。

CASA Framework の XmlLoad →動きます！きちんとネット上から xml をロード＆パースしています。もちろん外部サーバー上の画像もロードできました。

FuseKit のトゥイーンアニメーションも動きました。

音声は CASA の SoundLoad を使った外部MP3サウンドのロード→これはうまくいきませんでした。音声自体はロードできているのですが「インパネ・キュー」と喋る音声ファイルが、「インガガガパガガガガガガ・・」みたいに、マシンガンをぶっぱなしているかのようなノイズが入りました。これは MP3 ファイル側の問題かもしれませんね。少なくともロードと再生はできています。

外部 html ページへのリンクは無反応です。ロールオーバー効果をつけていたボタンは、タッチパネルの chumby ではつじつまが合いませんので、使用は避けた方がよさそうですね。

今回分かったこと

ということで、僕が興味津津だった疑問ですが、

chumby(FlashLite3.0) で FuseKit、CASAFramework は動く！

もちろんきちんしたと Chumby ウィジェットにするために、多少の修正を今後かけていきますが、今回の場合は元ファイルに記述されていた ActionScript(AS2) は1行も変えていないということに注目です。これなら気軽に chumby ウィジェットが作れそうですね。

トップへ戻る