HTML5のインタラクティブアニメーション - Adobe Animateのチュートリアル

このレッスンでは、 Animate CC 2017 を使って どのようなコンテンツが作れるのか、 そしてそのファイルの中身について 簡単に紹介します。 現在開いているファイルは sample.fla で fla ファイルという 呼ばれ方をするんですが これがファイル名です。 （Canvas）とあるのは HTML5 Canvas の 設定でこの書き出しがされるという事です。 その他に Flash Player での書き出しを する設定もあります。 まず、この左上真ん中にあるのが ステージと呼ばれますが ここにアニメーションを作ったり インタラクションを加えたり、 という事を行っていきます。 そして、右側、これは他のソフトでも よく使われていますが プロパティパネルです。 選んだものによって、 その設定内容が表示されます。 下の方の画面なんですが その更に左側、 これは描画のアプリケーションでは よくありますが、レイヤーになります。 レイヤーが４つ、上に行くほど 手前ということになります。 それから、この右側は描画のソフトでは あまり見かけないかもしれません。 Premiere とかの映像ソフトですと、 タイムラインと言いますけど 時間軸のコントロールになります。 もっとも、このコンテンツは 非常に簡単な作りですので 一列分、これをフレームと言うんですが １フレーム分しかありません。 けれども、簡単な動きとかインタラクションと いった作り込みは既に行われています。 それから、このプロパティのパネルで ライブラリに切り替えると このステージで使われている 様々なパーツが表示されています。 例えば、１番上 Background と ありますが背景画像ですね。 そして次に pen_animation とありますが 実はこのペンギンのキャラクターに アニメーションが仕込んであります。 アニメーションはこの小さい三角の 再生ボタンで簡単に動きを確認できます。 このアニメーションのパーツは シンボルと言うんですが このシンボルの中でまた様々な 細かいパーツが使われていて この辺がそうですね。 胴体だけとか、幾つかパーツがあります。 そして今度１番下、これはサウンドです。 波形が出ていますが、これも再生ボタンが あるので再生してみましょう。 （再生音） ちょっと長いので停止します。 このようにサウンドもパーツとして このライブラリに含めることができます。 では、改めてまたレイヤーの方に 戻ってみましょう。 レイヤーがあると大抵 コントロールがありますけれども この１番上の目のアイコンをクリックすると 一旦全部のレイヤーが非表示になります。 １番下のこれは何かと言うと ちょっと切れていますが Background、 背景画像がおいてあります。 その上のレイヤーには pen とありますが ペンギンのキャラクターです。 あと、その上の２つはバッテンの チェックを外しても見えてきません。 ここはサウンドです。 サウンドは置いてはあるんですが このステージ上は勿論 サウンドは見えません。 １番上 scripts と書いてありますが これはプログラムが書いてあります。 これもやはり見えません。 では、簡単なコンテンツが、動きを 仕込んであると言いましたので それを確認してみましょう。 確認は「制御」メニュー＞ 「ムービープレビュー」＞ 「ブラウザを使用」します。 （再生音） ペンギンのアニメーションを 仕込んであると言いましたので ペンギンが背景画像の手前で 足踏み、歩いていますね。 それからプログラムが書いてありました。 これにはインタラクションの 仕込みがしてありますので このペンギンをクリックすると 上から落ちてきてバウンドする、 クリックすると、 上から落ちてバウンドする、 このようなプログラムが書き込んであります。 では閉じましょう。 このレッスンでは、 Animate CC 2017 を使って作れる HTML5 Canvas のコンテンツ、 インタラクティブな アニメーションを紹介し そのファイルの中身が どのような作りになっているのか ざっとご紹介しました。