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

Toolkit for CreateJSを試す

今回のタイトルは、「Toolkit for CreateJSを試す」です。

前回までの流れから言えば、「iBooks Author制作日記5」の予定だったんですが、番外編としてFlash Professional CS6 の拡張機能であるToolkit for CreateJSを取り上げることにしました。

というのはどうしてもこのタイミングで必要なんですよね、このToolkit for CreateJSというツールが。

現在制作中のマルチタッチコミック【ナナのかぼちゃパン】は、iBooks Authorで作っています。静止画ベースのマンガであれば、iBooks Authorだけで制作可能だと思いますが、画面をタップしたらアニメが始まったりマンガの中のキャラが喋りだすようなイベントドリブンなマンガは、それなりの便利ツールがないと何かと大変なので。

具体的には、HTMLとJavaScriptで苦労して作っていたアニメの部分を、このFlash Professional Toolkit for CreateJSで効率的かつ強力に肩代わりしてもらおうというわけです。

なにしろ【ナナのかぼちゃパン】の1ページ目の、ふきだしを表示して音声を再生するだけでもかなり手こずってしまったものでo(- -;*)ゞ 。

さて、アドビのサイトでダウンロードしたこのToolkit for CreateJSを、インストールしてみました。


　1. ダウンロードしたToolkit-for-CreateJS.zipを解凍

　2. Toolkit for CreateJS.mxiをダブルクリック

　3. Adobe Extension Manager CS6が起動し、拡張パッケージを保存するか訊いて来るので、Toolkit for CreateJS.zxpとして保存

　4. Adobe Extension Manager CS6の、[ファイル] → [拡張機能をインストール]を選択 → Toolkit for CreateJS.zxpを選択し[開く]をクリック → インストール

　5. インストール完了（Flash CS6の拡張機能欄にAdobe Flash Professional Toolkit for CreateJSの名前が表示された）

　6. Flash CS6を起動し確認　[ウインドウ] → [その他のパネル] → [Toolkit for CreateJS]が追加されていた、OK！


さあ、このToolkit for CreateJSが私が想い描くようなかんじで使えれば、グッと制作上の自由度が増し、パワーアップできるんですが...

つまりFlashで普通に音声入りのアニメを作り、Toolkit for CreateJSでパブリッシュ → 生成されたHTMLファイルをベースにHTMLウィジェットを作成 → iBooks Authorでコンテンツに配置。

という流れを想い描いてるんですが。

実際に、【ナナのかぼちゃパン】の2ページ目を作りながら試してみます。

iBooks Author制作日記4

マルチタッチコミック【ナナのかぼちゃパン】をiBooks Authorで制作中です。

現在、マンガの舞台である「青葉の森ベーカリー」というパン屋さんの店内を作成中で、上の画像は一部分をレンダリング後ちょっとレタッチしたもの。焼きたてパンの雰囲気を出すのは難しいけど、暖色系の色味を強調して冷えてない感じに出来ました。でもいかんせん品薄。もっといろいろな種類を用意しなくては。

ところで前回のブログ（6/29）では、HTMLウィジェットによる表示がうまくいかず行き詰っちゃってました。

iPadの画面をタップしてHTMLウィジェットを起動すると、ウィジェット内の画像の周りに余白が生じてしまう、という問題点でした。つまりウィジェット領域の角にマージン0できっちりと画像を置きたいわけなのに、余白ができてしまい困っていたわけです。

その問題は解決しました。

『たぶん原因はこれに違いない...』とか『こうやってみたらどうだろう...』とか思いつくままに試してみてもどうしても余白が出てしまうので、基本に立ち返ってDashboardウィジェットに必要なファイルを新たに一から揃えてやり直してみたわけです。


　・info.plist

　・Default.png

　・Icon.png

　・index.html

　・imagesフォルダ

　・voicesフォルダ


上記ファイルを新たに揃えました。imagesフォルダとvoicesフォルダには、それぞれ画像ファイルと音声ファイルが入っています。

info.plistのWidthとHeightはそれぞれ、<key>Width</key><integer>1024</integer><key>Height</key><integer>768</integer>と記述。

Default.pngの画像サイズがウィジェット実行時のサイズになるようなので、Default.pngの画像は、1024x768サイズで作成。Icon.pngも念のために同じく1024x768で作成。

それから、index.htmlの<body>要素のstyle属性でwidthとheightを style='width:1024px; height:768;' と記述。

上記ファイルをpage1フォルダに入れて、拡張子wdgtをつけ、page1.wdgtというDashboardウィジェットを作成。

『さあ、これでだめだったらもうわからん...』と思いつつ、iBooks Authorでオーサリング開始。

ウィジェットオブジェクトにpage1.wdgtをドラッグ＆ドロップし、ウィジェットインスペクタのレイアウトを開き、「タイトル」「見出し」「背景」のチェックボックスのチェックをはずす。

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

『ほんとにこれでだめだったら打つ手がないよな...』とか思いつつiPadをMacに接続。iPadでiBooksを起動して、iBooks Authorのプレビューをクリック。

コンテンツがiPadに転送され、自動的に開く。

iPadを横向きにして、セクション1のページをタップ。

『おおっ、なんてこった！ちゃんと表示されてるじゃないか！(≧▽≦)ノ』1ピクセルの余白もなく、ぴったりと1024x768のサイズで表示されてるではありませんか。

というわけで、この問題点は解決しました。

初めから上記のような普通の手順でちゃんと作成すれば、何ら問題は起こらなかったかもしれません。でも私の場合、iBooks Authorに期待するあまり、いきなりパラパラアニメを試してみたり、縦向き時・横向き時の見せ方をどうするか等、自分にとって必要な箇所ばかりに目がいってました。そのため、思いがけないところでつまずき時間を取られてしまったのかもしれません。

それからもう一つの問題点...と自分で勝手に思い込んでいた、背景画像とウィジェットの融合。

これはぜんぜん問題でも何でもありませんでした。

というのは、まず読者がページを開くと静止画が表示されている → その画面をタップすると、静止画の上に重ねられた透明なウィジェットが起動 → マルチタッチコミック開始

という流れが自分の頭の中に出来ていてしまったため、静止画の上にウィジェットを重ねなければならない、と決め付けていたんですね。

ウィジェットの中に静止画も含めてしまって、その静止画を背景としてその上でアニメを動かせば何ら問題ないわけです。ウィジェットは透明にして静止画の上に重ねると思い込んでいたため、そんな簡単なことも思いつきませんでした。

ちょっと頭が硬直化しているようです。いつもなら悩むような問題ではないはずですが。

少し気分転換が必要かもしれません。

玄関に置いてあるゴーヤの鉢植えを時々見に行って、『もう少し育ったらゴーヤチャンプルーにしよう』と眺めているだけでは、気分転換にはならないようです。