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

フレームをループさせるスクリプト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
シンボルのタイムラインにフレームラベルをつけて、簡単なスクリプトでアニメーションをループ再生させます。
講師:
07:15

字幕

このレッスンではシンボルを 素材として使う準備として シンボルのタイムラインに フレームラベルを付けてみます。 そして、簡単なスクリプトで アニメーションを ループ再生させてみたいと思います。 今 Animate で開いている HTML Canvas のドキュメントなんですが 「シーン1」のメインタイムラインには 1フレームしかありません。 下のレイヤーは これは背景なんですけれど 上のレイヤーに ペンギンのキャラクターがあります。 ここでは既にシンボルにしてあって ダブルクリックでシンボルを開けます。 そうすると、「pen_animation」 というシンボル名なんですけど アニメーションが2つの パートに分かれています。 最初の部分は、ペンギンが歩く という所ですね。 そして、次に上から落ちてくる。 全然別々のアニメーションです。 でもそれが単純に一本に 繋げてありますから。 このまま再生すると、当然 「制御」>「プレビュー」で 見てみますけれど 非常にせわしない アニメーションになりますね。 歩いて、すぐ落ちてくると。 これを、歩く部分をループ再生させる という風にしたいと思います。 ループ再生のスクリプトを書く前に 2つのパートをフレームラベルで分けます。 フレームラベルというのは どこから新しいアニメーションが 開始しますよ、という印をつけるのですけど キーフレームに設定します。 最も、キャラクターがすでに置いてある アニメーションが作ってある キーフレームに置いてしまうと わかりにくいので、 フレームを分けましょう。 新規のレイヤーを作って、 ダブルクリックでそれらしい名前として 「labels」という風にします。 そして、せっかくラベル用のレイヤーです。 うっかりここに何か書いてしまわない様に ロックをしてしまいましょう。 ロックをかけてあっても フレームラベルは設定できます。 そして、最初のアニメーションの 開始はここですね。 ここは空ですけど キーフレームになっています。 次は2つ目のアニメーションの開始時点 キーフレームにしますので ここを「キーフレームに変換」します。 フレームラベルの付け方は、 フレームラベルを 付けたいキーフレームを選択した上で 「プロパティ」のパネルで 名前を付けます。 ここがフレームラベルになります。 ではstart にしましょう。 「start」と、Enter キーを押します。 次に2つ目のパートですね。 これは落ちてくるので drop としましょう。 これでスクリプトでコントロールするための 準備が出来ました。 今回は、この中で 歩く部分をループ再生しますけれど 別に書いた JavaScript コードで このフレームラベルをキーにして いろいろコントロールすることが できるようになります。 ですから素材には 要所要所に、この様に フレームラベルを付けておくと 良いでしょう。 今回はこの中に 簡単なスクリプトも書き加えます。 スクリプトもやはり、レイヤーは 分けた方が良いです。 新規レイヤーにして やはり名前を付けましょう。 script としましょう。 ここも、ロックをかけてしまいます。 スクリプトの場合も、ロックをかけても スクリプトを書くことはできます。 スクリプトもやはり キーフレームに書きます。 今回は、この歩く部分の アニメーションをループさせたい ですから、この6フレーム目で またスタートに戻れと いうスクリプトを書きます。 ここはキーフレームになっていません。 スクリプトもやはり キーフレームでないといけませんので ここにキーフレームを作ります。 「キーフレームに変換」ですね。 そして、アクションパネルを出しましょう。 アクションパネルの出し方に いくつかあるのですけど メニューから出す場合は 「ウィンドウ」で そして「アクション」です。 Function 9 番ということになります。 あるいは、右クリックで 出すこともできます。 こちらの方が簡単でしょうね。 一番下が「アクション」になっています。 ここに、スクリプトを書きます。 ちょっと狭いですから こちらに持ってきて そんなに長いスクリプトを 書くわけがないですけど ここに書いていきます。 スクリプトを書く場合 命令なんですけど、 それを誰に命令するか、と。 今 pen_animetion が開いています。 この pen_animation に対して 命令をしたい。 これ、ということを指す場合には this というキーワードになります。 そして、それに対して という意味なんですけれど 「.」ドットということで この this に対して何か命令を発したり あるいはプロパティにアクセスしたり ということになります。 今回はスタートに戻れ、と goto という命令なんですが 行った先で止まるのか、再生を続けるのか という選択肢になります。 コードヒントと言いますけれど ここに goto というのだったら もしかすると gotoAndPlay を選びたいんじゃないか ということで、気を利かせて 選んでくれています。 goto の系統の命令にはもう1つ gotoAndStop というのがあります。 これが行って、止まるです。 今回は行って、ループ再生ですから 再生を続けたいわけですから この gotoAndPlay を 選択します。 マウスで選んでも結構ですし あるいは、現在ここが ちょっと見にくいかもしれませんけど ハイライトしています。 Enter キーを押せば gotoAndPlay が入ります。 そして、命令の場合には 丸括弧 () で囲むんですけれど この () の中に、フレームラベル start に行けということで クォテーション「'」 で囲みます。 「'」はダブルでもシングルでも結構ですが 今回、ダブルを使います。 start と そして命令の最後 ここには、ここで終わりですよと 句読点みたいなものですね。 セミコロン「;」で命令一行 終わりという意味になります。 これで設定はできました。 では、一旦閉じましょう。 これ閉じなくても動きますけれど 後ろが見えないので 閉じることにします。 そうすると、A というマーク ちょっと見にくいかもしれませんが A というマークが付きました。 ここにアクションスクリプトが 書かれましたよ、という 元々は意味だったのですが 現在は HTML5 Canvas ですから JavaScript です。 JavaScript が書かれました。 これも所謂アクションの1つだと いうことでしょうね。 ここに来ると start に戻ります。 確認しましょう。 「制御」メニューから 「プレビュー」です。 今度は歩いている、ずっと歩いていますね 上から落ちてきません。 何故かというと 落ちてくる前に start に戻れ ということになっているからです。 このレッスンでは、シンボルを 素材として使うための準備として フレームラベルを付けました。 フレームラベルは 別レイヤーにした方が良いです。 そしてキーフレームに設定して プロパティパネルに その名前を入力します。 それから、簡単なスクリプトで ループのアニメーションを作りました。 やはりスクリプトもレイヤーに分けて その命令を発したいフレームを キーフレームにした上で アクションパネルを開き そして命令の相手、ここに対して ループ再生の場合には gotoAndPlay で、行き先のフレームラベルを 指定するということでした。

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

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

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

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

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

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