Neutral Scent

App developments & Gadgets

Adobe Flash CS3でのchumbyウィジェットの作り方

ここのところ作ったchumbyウィジェットFlash CS3を使用して作成しました。
なので今回は、CS3を使った簡単なchumbyウィジェットの作り方の解説です。
Flashがあれば、極論すればActionScriptを一切書かなくてもchumbyウィジェットが作れます。手順そのものもここに書いたように全く複雑なものではなく、順を追っていけばいいだけのものなので、もしchumbyFlashをお持ちなら、一度ウィジェット作りに挑戦してみてはいかがでしょうか?
今更CS3もないだろ、って? ごもっともです。ただ、まぁ、大して使いもしないCSを都度Version Upしてもね、という単にこちらの都合です。
CS4のDevice Centralに標準でchumbyがあるのかも不明。

まず最初に、CS3が動く環境を用意します。

次に、その都度320x240の新規ファイルを作ってもよいのですが、今回は手軽にchumbyが目標なので、CS3とDevice Central用のテンプレートをdownloadしてきます。
Scott Janousek » Chumby Flash CS3 template & Device Central ADPP
http://flashmobile.scottjanousek.com/2008/01/23/chumby-flash-cs3-template-device-central-adpp/
ただし、なぜか本文中のzipファイルのリンクが切れているので、zipのdownloadは(こちらから)
相対pathは合ってるんですけど、サブドメインがね...。

zipを展開したら、同梱されている*.mxpと*.adppをそれぞれダブルクリックして登録していきます。CS3がインストールされていれば、拡張子は関連付けされてるはず。
まぁ、だいたい言われるまま[Ok][Ok]していく感じでOkです。




さて、ざっと登録が完了すると、使用可能なデバイスのリストの中にchumbyが登場するはずです。

ちゃんと、320x240でプレビューにchumbyも表示されていい感じですね。

登録が完了したらDevice Centralは終了してしまって構いません。
Flashを再起動してから、メニューで[ファイル]/[新規...]、[テンプレート]タブを選択、[コンシューマーデバイス]を選択すると、[デバイス]にchumbyが登場するので、[Ok]。

これでchumbyFlashファイル(*.fla)が完成です。

[Ctrl]+[Enter]するとDevice Centralが立ち上がってプレビューが見れます。

↑みたいになんだか謎のケータイっぽい枠が出たら、右側のリストからChumbyを選択しましょう。

いろいろムービーを編集してプレビューしてみてください。
ただし、ここで要注意なのは、Chumby特有のプロパティ値APIがこのDevice Centralで反映されるわけではない、ということです。
わかっちゃいても、うっかり忘れて「動かないな〜」という無限ループにハマりがちなので気をつけて。
また、プレビューとWeb上のバーチャルChumby、実機では細かく動きが違うところがぼちぼちあるので、そのあたりも気をつけて。SharedObjectの動きとか、かなりトリッキーでいまだに自分でもよくわかりません...。

作成されたムービーですが、一番下の3段目に[NOTE: You can modify or delete this specific layer]と書かれた不可視化されているレイヤーがあり、編集画面でもChumbyのフレームを付けたプレビューや、サンプル用に枠付きのムービーを出力することができます。気になるならレイヤーを削除してもいいでしょう。

また、このテンプレートを使用してムービーを作成すると、[ドキュメントプロパティ]に既定値でChumby Device Profileのクレジットが入りますので、ここを編集しておくことをお忘れなく。

ムービーが完成したら[ファイル]/[パブリッシュ]で*.swfを出力して、ChumbyのWebサイトからウィジェットの登録で非公開ウィジェットとして登録、登録したウィジェットを自分のチャンネルに追加するだけです。
登録画面から送信したら、chumbyでチャンネルの更新を行えば即座に変更が反映されます。

ウィジェットの公開はウィジェットの登録・編集画面で[公開]に設定するだけ。
だいたい1〜2営業日後に審査が終わって、メールが来ると同時に公開されます。
ただ、個人的には、その後のdebugのことを考えると、公開用は別のウィジェットとして登録した方がいいかも、と思います。

ざっと、CS3でchumbyウィジェットを作成するまでの基本的な手順は以上です。