続・Toolkit for CreateJSを試す

「Toolkit for CreateJSを試す」の続きです。

前回は、拡張機能のインストールだけで終わってしまいました(o^皿^o)ゞ。

マルチタッチコミック【ナナのかぼちゃパン】の2ページ目を作りながら、その中でToolkit for CreateJSを試すつもりでした。でも青葉の森ベーカリーというパン屋の店内のモデリングに時間がかかってしまい、その後のアニメにまで至ってないので、とりあえず有り物のアニメで「Toolkit for CreateJSを試す」の後半を書くことにしました。

上の画像は、【Wings ウィングズ】のアニメです。ただパタパタッと翼を羽ばたかせるだけのアニメなら、JavaScriptでもそう難しくはないので、少しだけ複雑にしてみました。


　１．まず翼を羽ばたかせるアニメのMC（ムービークリップ）を作る。

　２．次に、１のMCをモーショントゥイーンで、回転させながらステージの左から右に動かす。

　３．さらに回転移動しながら、ところどころでアルファ値（透明度）を変化させ、消えたり現れたりさせる。


このアニメをJavaScriptで書くと大変ですが、Flashならサクッできます。だから、Flash Professional Toolkit for CreateJSでFlashアニメをiBooks Authorに持っていくことが出来れば、ぐっと制作パワーがアップすると思うわけです。

さてまずは、Flash Pro CS6で上記のアニメを作りました。

以前作ったものを読み込むのではなく、新たに作り直しました。それは経験上、以前作ったものを利用しようとすると、何かとエラーが出たりしてかえって遠回りになってしまうからです。新たに最もシンプルに作ったほうが、うまくいかない場合でもすぐに原因が特定しやすいので。

次に、前回インストールした拡張機能を使って、アニメをパブリッシュしました。

ウィンドウ -> その他のパネル -> Toolkit for CreateJSパネルを開き、[パブリッシュ]ボタンをクリック。

その結果、以下のファイルが出力されました。

　・FlyingAnime.html （※FlyingAnimeというファイル名でFlashアニメを作成した）

　・FlyingAnime.js

　・imagesフォルダ

　・libsフォルダ

　・soundsフォルダ

まずはウェブブラウザでFlyingAnime.htmlの動作確認。

『よし、問題なし！』

羽ばたきながら、回転しつつ、左から右に動いているアニメが再生されました。ところどころで透明度も変化しています。

さて次は、iBooks AuthorのページにHTMLウィジェットとしてこのアニメを貼り付けるための準備です。

上記ファイルに、以下の三つのファイルを付け足して、FlashAnimeというフォルダにまとめました。

　・Info.plist

　・Default.png

　・Icon.png

このあたりの手順は、7月7日の「iBooks Author制作日記4」に詳しく書いたとおりです。

さてMac上でこのFlashAnimeフォルダに拡張子.wdgtを付けると、DashboardウィジェットFlashAnime.wdgtが完成。

さあいよいよ、iBooks Authorを起動。

適当なページに、HTMLウィジェットを配置します。私の場合は、以前練習用に作ったtestbook上のページに配置しました。

まずページ上に空のウィジェットオブジェクトを配置し、その中にFlashAnime.wdgtを読み込む。

次に、ウィジェットインスペクタのレイアウトタブをクリックし、「タイトル」「見出し」「背景」のチェックボックスのチェックをはずす。（背景の余白は０ポイントにしておく）

位置と回転インスペクタに移り、サイズを幅1024pt、高さ768ptに設定。位置は、X 0pt、Y 0ptに設定。

さあついに、iPadでの動作確認です。

iPadをMacに接続し、iBooksアプリが起動していることを確認したら、iBooks Authorのプレビューをクリック！

iPadにコンテンツが転送され、自動的にブックが立ち上がるので、HTMLウィジェットを貼り付けたページを開きタップ！

『あれ...？うんともすんともいわない..』『なんで？？...』

それから数時間悩みました。Toolkit for CreateJSによって出力された.jsファイルを開いて中身を確認してみたり、ネットで情報をさがしてみたり。

で結局、iBooks Authorのページに貼り付けたウィジェットオブジェクトがページのドキュメントエリアからはみ出していたんですね。つまり幅1024pt、高さ768ptに設定していたサイズを、幅1024pt、高さ748ptにしてドキュメントエリアに合わせたらうまくいきました。

『う～ん、この間は幅1024pt、高さ768ptでも問題なかったような気が...』

う～む、よくわかりません。

で、さらに問題があって、Flashアニメがみごと再生されたんですが、端っこが欠けるんですよね。

『これはたぶんウィジェットオブジェクトの中にある、HTMLウィジェット表示エリア（？）が狭いに違いない！』という読みは当たってました。

ウィジェットオブジェクトの下にある[HTMLを編集]ボタンをクリックし、HTMLウィジェット表示エリアのサイズを調節。Flashのステージサイズ（幅1024pt、高さ768pt）に合わせて、再度動作チェックしたところ、端が欠けることもなくちゃんと表示されました。

どうも、ウィジェットオブジェクトのサイズ・位置に、HTMLウィジェット表示エリアを合わせようとするとうまくいかないようです。

何となくよくわからない部分もありますが、Flashアニメをちゃんと表示してくれたので良しとしましょう。

Flashアニメという心強い味方を手に入れ、一気に短編マルチタッチコミック【ナナのかぼちゃパン】を完成させたいところです。