Edge Animate 基本ワークフロー講座

タイムライントリガーとアクション⟨ループ再生処理⟩

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、アニメーションのループ再生の実装を通して、タイムライントリガーとアクションについて、学んでいきます!
講師:
06:45

字幕

このレッスンではEdge Animateのタイムライントリガーとアクションについて解説していきます。まずは、ダウンロードしてきたファイルの中にある「new_project.an」をEdge Animateで開いておいて下さい。これがその画面です。このファイルを使いながら解説を進めていきます。タイムライントリガーとアクションとは例えば、アニメーションの再生で5秒目に達した時、〇〇の処理を行うといった、アニメーションをプログラムで制御させることが可能な機能です。このレッスンでは例としてアニメーションのループ再生処理の実装を行いながらその仕組みを理解していきます。それでは実際に見ていきましょう。まずタイムライントリガーの設定ですがタイムライントリガーの設定はここのアイコンをクリックすることで設定することが可能です。今回は、アニメーションが最後まで再生されたらまた最初の「0秒」に戻るというループ再生の機能を実装していきたいと思いますのでまずはこの再生ヘッドをアニメーションの最後今回は「4秒」の時点ですね。に持っていきます。次にトリガーの登録ですがこちらをクリックすることで登録することができます。 クリックします。この様に「コード」パネルが出てきました。ここの「コード」パネルにJavaScriptで処理を記入することによってこのトリガーが登録された「4秒」の時点にアニメーションが達した時にここの内容が実行される様になります。今回は、ここにそのループ処理をさせるための処理を記述していく形になりますがこのループ処理は、こちらの「スニペット」パネルの中に既に用意されているものを利用する事によって実装することが可能です。今回は、この「スニペット」パネルの中にある「再生の開始位置」というものをクリックしてコードを挿入しましょう。この様に「再生の開始位置」をクリックするとこの様な内容が挿入されました。「ラベルまたは特定の時間でタイムラインを再生します。」と書いていますね。再生の設定の仕方も書いています。いま、実際のコードにはこの様に「sym.play(1000);」となっています。この括弧の中に特定の時間を入れることによってその位置から再生させることが可能です。今回は、アニメーションが最後に行ったら最初に戻る、という処理を入れたいのでこちらに「0」と入力しておきます。この状態で「コード」パネルの「×」を押して、閉じてファイルを保存しておきます。 保存しました。そして一度ブラウザでプレビューしてみましょう。プレビューは「ファイル」>「ブラウザでプレビュー」ですね。クリックします。すると、この様にアニメーションが再生されていまループ再生されていますね。これで、アニメーションのループ再生の実装は完了です。とても簡単でしたね。ただ、よく見てみるとこのループ再生している箇所すこし違和感を感じますね。ちょっとこの辺り手を加えていきましょうか。ループ再生の時に違和感を感じているのはループ再生された前後でこの魚の位置が微妙に異なっているのでつなぎ目がはっきりと出てしまって違和感を感じてしまいます。そこをつなぎ目の無い様に修正してみたいと思います。修正する箇所はアニメーションの最後か最初どちらかになるかと思いますが今回は最初の方でやってみましょう。再生ヘッドを「0秒」に持っていきます。そしてここ「0秒」の段階での魚の位置を最後に魚がいる位置に合わせます。今回見てみますとまず「左端:164」ですね。「左端」いま「0秒」が「64」になっているのでこちらを「164」に変更します。次に「上端」ですがまず、アニメーション最後は「295」となっています。こちらの「上端」はアニメーション開始時も一緒なので、変更は不要ですね。 あとは回転はどうでしょう。最後のところの回転を見てみると「-1」となっているのでこちらも「-1」にしておきましょう。この状態で一度ファイルを保存します。そしてブラウザでプレビューしてみましょう。この様にどうでしょう。スムーズにループされていますね。これでアニメーションのループ実装は完了です。以上でレッスンは終了です。今回はEdge Animateでアニメーションのループ再生の実装を通してタイムライントリガーとアクションについて解説しました。タイムライントリガーやアクションなどは別のレッスンで取り上げるイベントなどにも関連してきますのでそちらも合わせて確認しておきましょう。

Edge Animate 基本ワークフロー講座

このコースではEdge Animateでアニメーションを制作していくさいの基本的なワークフローを実際に作りながら学習していきます。新規プロジェクトの作成からタイムラインアニメーションの制作、シンボルの使い方やオーディオの利用、各種デバイスに対応させる方法などについて解説します。

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

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

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

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