mieki256's diary

個人的に、この手のツールは以下の2点が気になっていて。

• 連番画像をレンダリングできるか。これができれば、動画編集ソフト等に渡す素材や、スプライトシートが作れる。
• 出力したファイルを、Webブラウザ以外でも再生することができそうか。

要するに、他の何かと連携できるかどうかが気になるわけで。

連番画像を出力する機能はどちらも持ってなかった。しかしこれは、ツールの性質からして仕方ないのかも。

これらのツールは、Flashと違って、タイムラインには時間しか表示されてなくて。つまり、「フレーム」「コマ」という概念が無い。フレームが無いのだから、フレームを連番画像として出力できるはずもなく。 *1 なので、現状では本質的に、既存のアニメ制作ツールと異なる存在かもしれないなと。「アニメ制作ツール」として紹介されることが多いけど、コレは、アニメ映像ではないアニメを作るツールではないかと。

また、出力ファイルは html だったり js だったりするのだけど…。出力ファイルは難読化がされていたりして、さっぱり読めないのだけど。作業ファイル自体は難読化がされてないので、まだなんとか頑張れば解析できそうな気もしたり。

_Google Web Designer から、googlewebdesigner_win.exe をDL。897KBのファイルなので、たぶんダウンローダーなのだと思う。実行したら、おそらくは本体のダウンロードとインストールが行われた。

インストール直後の現在のバージョンは、1.0.6.0428。

アニメ作成作業は簡単。

• 下のサムネイル横の「+」ボタンを押していけばキーフレームを増やせる。
• そのキーフレームでオブジェクトの位置変更等をすれば、その間の位置移動等を補間してくれる。
• サムネイルとサムネイルの間のボタンを押せば、何秒間、どんな動きをさせるのかグラフ表示してくれる。
• 秒数の変更もできるし、グラフ部分をマウスでクリックすれば動きの種類も順々に変わっていく。

最初はクイックモード？とやらで作業してたけど、下の方に小さく「詳細」と書かれたボタンをクリックしたら、クイックモードが解除されてタイムライン表示がされるようになった。各オブジェクトがレイヤーのような状態でタイムラインに表示されてるので、このほうが分かりやすいような気もする。

• タイムライン上で右クリックすれば、キーフレームの挿入、動きの種類の変更などができる。
• タイムライン上でキーフレームのマークをドラッグすれば、キーフレーム位置を変更できる。

ファイル → 公開を選べば、htmlファイルとして保存できる。何を出力してくれるのか、そこがそもそも分かってなかったのだけど。どうやらhtmlファイルを1つ出力するツールだった模様。

出力されたhtmlを眺めてゲロを吐きそうに。チンプンカンプン。

作業用に保存される html ファイルをぼんやり眺めていたら、なんだかちょっと分かってきた。

• @-webkit-keyframes なる記述がキーフレームの情報だと予想。
• キーフレームに、12.7451% とか 49.0196% とか書いてあるのは、全体時間に対してどこにキーフレームがあるのかを割合で示しているのではないか。
• html本体部分の canvas てのがシェイプに相当するらしい。シェイプの形状はcssで定義。

よくよく見てみると、「公開」で出力されたhtmlファイルも、css部分に、アニメをするために必要な情報が列挙されているように思えてきた。css内がデータみたいなものなのかな…。

解析してどうにかしようという気にはならないけれど、やろうと思えばどうにかできるのかもしれない。バイナリファイルではなくテキストファイルで保存されてると、こういう時にありがたい。今時、バイナリファイルで出力することは極力避けるべきなのだと再認識しました。

連番画像の出力機能は無し。

現状、広告制作ツールのベータ版として公開されているのだし、CGツールとして捉えるほうが間違ってる気もしてきたり。見た目それっぽいけど、ヨチヨチ歩きみたいなものだよな…。どこかのまとめサイトで、「GoogleがAdobeとWebデザイナー殺しに来た」なんて煽りタイトル記事を見かけたけど。仮にそうだとしても、幼児が水鉄砲でピュピュッと撃ってる段階のような…。今後の成長に期待、みたいな。

最新版の Adobe Edge Animate CC はおそらく有償ソフトらしいのだけど。Adobe Edge Animate 1.5 までは、Adobe ID を持ってる人なら無料で使えるらしいので、試しにDLしてインストールしてみたり。ちなみに、そのうちDLできなくなるという話も見かけました。

インストール時に、「PCの再起動が要求されてる」云々のエラーメッセージが表示されて。OS再起動しないとダメなのかなと再起動してから試したけれど、やはり同じメッセージが。とりあえず「無視」ボタンを押したら、インストールが先に進んだ。何だったんだろう…。まあ、以前 Flash CS5 をインストールした時も、謎のエラーが出てなかなか解決できなかったし。 *2 Adobe製だから、どうせこんなもんだろう…。

Google Web Designer に比べると、さすがに随分作り込んである印象。操作方法は Flash のノリに近いので、戸惑う部分はほとんど無かった。

こちらも、連番画像の出力機能は無し。

パブリッシュされたファイルを確認したら、1つの html と、複数のjsになっていた。jsファイルは難読化されていて何が何だか。

作業用ファイルは難読化がされてなかったので、なんとか理解できそう。hoge_edge.js を開くと、timelines なる記述が見えたので、たぶんこのファイルにアニメさせるための情報が入っているのではないかなと。もしかして、これって json だったりするのかな？

今思い出したけど、もしかして Adobe は、この手のファイルフォーマットの解析作業を禁止してたりしないかな…。禁止してるのだとしたら、そういう面から、他のソフトとの連携は無理ってことになりそうな。