AnimateでHTML5 Canvasコンテンツをつくる

素材をムービークリップシンボルにする

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メインタイムラインにつくったアニメーションを素材として使えるようにシンボルに移行します。
講師:
05:42

字幕

この レッスンでは メインタイムラインに作ったアニメーションを 素材として使えるようにシンボルに 移行する方法について説明します。 今開いている HTML 5 Canvas の Animate のドキュメントですが アニメーションが「シーン1」という メインタイムラインに作られています。 アニメーションは2つのパートに分かれていて 歩いてるところと 上から落ちてくるところです。 勿論1本のアニメーションとして 作りこんでしまうという場合でしたら このようにメインタイムラインにずうっと アニメーションを作っていい訳なんですが このペンギンのアニメーションを パーツとして CreateJS JavaScript で コーディングしようという場合には メインタイムラインに すべてのパーツを並べてしまうと 非常に管理がしにくくなります。 パーツは分けて シンボルにすると良いでしょう。 では、メインタイムラインに 作ってしまったアニメーションを どうやってシンボルにするか その場合に、これはパーツが 2つあるんですけども これを分けるか、1個にするかが 考え所なんですが 1つのキャラクターのアニメーションですから 纏めてしまっても良いでしょう。 纏めてしまった後で フレームに分けて JavaScript でコントロールすると いうことは可能ですので これを全て纏めて シンボルにしたいと思います。 では、シンボルにしたいフレームを 全て選択します。 そしてこれをカットして ペーストするんですが カット&ペーストは フレームに対して行うので 右クリックで「フレームをカット」です。 そうするとフレームが空っぽになりました。 カットされましたから。 ではこれを新たにシンボルにします。 シンボルの場合は 「挿入」>「新規シンボル」で シンボルの名前を入力します。 では pen_animation としましょう。 そして JavaScript 、CreateJS で コントロールしたい場合には 基本的に「種類」は 「ムービークリップ」にします。 そして「OK」ということで まだ空っぽです。 フレームには何もありませんが この第1フレームを選択して 右クリックで「フレームをペースト」します。 これで一応アニメーションは移ったんですが 基準点の位置を確認しておきましょう。 このペンギンのおでこの辺りが 基準点になっていますが 動きが上から落ちてきたりする動きなので 下端を基準点に持ってきた方が 良さそうですね。 なので、今この位置は どうなっているかと言うと プロパティのパネルで見てみると X 座標が0、これはいいですね。 Y が90、下に落ちちゃってますから これを0に戻します。 そうしてあげると 下端が、足がちゃんと0に戻りましたね。 今度はもう1個 初めの方の動きです。 ここも真ん中は大体良さそうですね。 ちょっとずれがありますけれども これは歩いてるアニメーションが あるもんですから 若干のずれ、ブレが含まれているので これは気にしない方がいいでしょう。 そして、もう1度確認しますが こちらも少しずれていますね。 では、先程の この落ちて来た時の終わり ここと位置合わせをする為には 先程90だったものを0にしましたね。 ということなので、こちらも 90引いてあげれば良いので Animate ではこのボックスの中に 「-90」と入力して Enter を押せば ぴったり90上に上がります。 大丈夫でしょうか 1フレーム目と 31、ちょっと半端ですけどね。 見てもズレが無いですね。 ですから、この2つのパートの アニメーションが きっちり揃ったということですので これでシンボルが出来上がりました。 メインタイムライン「シーン1」に 戻りましょう。 勿論ここは空っぽになっています。 でもライブラリには先程の pen_animation がありますから ここにドロップしてあげれば良いんですが こんなにフレームは要りません。 ですから第2フレームから31まで これらは全てフレームを削除しましょう。 その上でこの第1フレームに 今作った pen_animation の シンボルをドロップします。 勿論 位置あわせをしましょうね。 整列パネルを出して「ステージを基準」に 水平方向真ん中 垂直方向は基準点を下端にしたので 「下端」に合わせましょう。 これでアニメーションが出来上がりました。 確認してみましょう。 「制御」>「ムービープレビュー」です。 「ブラウザーを使用」します。 歩いていて上から落ちてくると。 こんなアニメーションを 普通にやったらおかしいですが 2つのパートを分けてコントロールするのは JavaScript で可能です。 この レッスンでは Animate で 作ったアニメーションを 素材として CreateJS で コントロールするという前提で 素材として扱う為にシンボルに移行する 方法について説明いたしました。 その場合にはフレームのカット フレームのペースト そしてシンボルは基本的に ムービークリップシンボルにする、と お考え下さい。

AnimateでHTML5 Canvasコンテンツをつくる

Animate CCではPCやモバイル、Webブラウザなどさまざまなデバイスとプラットフォームに向けたコンテンツが作れます。またHTML5に対応したダイナミックでインタラクティブな表現が可能です。このコースはAnimateで作った素材をJavaScriptでどのようにスクリプティングするのかを基礎から解説します。

2時間43分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年05月19日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。