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

ボタンの作成とタイムラインコントロール

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
イベントとアクション、そしてEdge Animate APIを利用して、ボタンを押したらアニメーションが再生されるように、作ってみましょう!
講師:
08:42

字幕

このレッスンでは、EdgeAnimateのイベントとアクションそしてEdge Animate APIを使ってボタンで、タイムラインコントロール行うための基本的な部分を実際に、実装作業を行いながら解説していきます。まずは、ダウンロードしてきたファイルの中にある「New Project」フォルダーの中にある「New Project.an」のファイルをダブルクリックしてEdge Animateで開いておいてください。そして、これがそのファイルを開いた画面です。このファイルを使いながら解説を進めていきます。また、今回実際の実装作業を通して解説していきますがその際の完成サンプルを予め確認していきましょう。ダウンロードしてきたファイルの中にある「完成サンプル」というフォルダーの中の「New Project.HTML」これを一度ブラウザーで開いてみてください。この様に表示されました。この「スタート」ボタンを押してみましょう。「スタート」ボタンを押すとこの様にアニメーションが開始されましたね。ポイントは大きい二つです。まず、この「スタート」ボタンを押したらアニメーションがスタートすることそして、同じくこの「スタート」ボタンを押したらこの「スタート」ボタン自体が消えるというこの二点ですね。 この様な形になります。この二点に注目しながら実際に、この処理を実装していてみましょう。それではやっていきます。まずは、こちらのボタンこちらのボタンをクリックしたらアニメーションをスタートするという処理を入れないといけないですね。ですので、こちらのボタンボタン要素ですねシンボルです。こちらに対してアクションとイベントを設定しましょう。まずは、この括弧アイコンをクリックします。そうするとイベントの登録画面になりますのでこちらはClickですね。すると、コードパネルが開きます。ここで、ボタンを押したらボタンをクリックしたらタイムラインを再生ですので今、Clickのイベントは登録しましたね。この中で「再生の開始位置」を選択します。すると、sym_playが挿入されますのでここに、こちらの0秒にあるラベル「start」と書いてますね。このstartと書きましょう。startこれで、このボタンをクリックしたらラベルがスタートの位置からアニメションを開始するという命令ができました。この状態でコードパネルを閉じます。そして、こちらの状態で一度プレビューして見ましょう。すると、どうでしょうまだ何にもしてないのにアニメーションが開始されましたね。 ということは、このボタンを押すまでこのアニメーションは止めておく必要がありますね。それでは戻ります。では、このボタンが押されるまでこのアニメーションを止めるという処理を入れ込んでいきます。タイムラインのアニメーションを止めるという処理はここにあるタイムラインの「トリガー」を挿入することによって実装できます。止めたい位置0秒ですね、今回の場合は0秒ですので、こちらに再生ヘットがあることを確認して押します。すると、コードパネルが出てきますのでこちらに「停止」という「スニペット」パネルをクリックして挿入します。これで、タイムラインがストップされました。コードパネルを閉じて「ブラウザーでプレビュー」を選択します。そうすると、この様に止まっていますね。止まっていますが後ろのシンボルは動いたままです。まず、こちらを解決いたしましょう。戻ります。さて、なぜタイムラインに停止処理をいれているのに関らずこちらの後ろのシンボルが動いてしまったのか。それは、こちら後ろのシンボルの再生処理ですね。再生処理がこちらのタイムラインを止めるタイミングと同じタイミングでアニメーションが開始されています。つまり、このタイムラインを止めるという処理が走る前にこちらのシンボルのアニメーションの開始が走ってしまうわけです。 ですので、これを解決するためにはそもそもこのアニメーションがスタートするこのタイミングを少し後ろの時間軸に置いてあげる必要があります。ここでは、試しにこの1秒の所にアニメーションの開始を持っていきましょう。まずは、このスタートをこちらに持って行きます。そして、その他諸々のアニメーショントランジションをこの様に、タイムライン上でドラッグして全てを選択します。こうですね。これを、そのままドラッグして1秒までずらします。更に、こちらのアニメーション最終時点こちらは、この様にリピートの処理が入っていますがこちらも、一緒に1秒分ずらしてあげます。この様に0秒から1秒までの間はアニメーションの指定ハジメーションの開始はさせないようにしてこの様に、sym_stopタイムラインの停止を入れておくことによって必ず、停止の方が先読み込まれますので後ろのシンボルが動いてしまったりということは起こらなくなります。この状態でブラウザーで確認してみましょう。すると、この様に後ろのシンボルも一緒に止まりましたね。それでは「スタート」ボタンを押してみます。この様に、「スタート」ボタンを押すと動き始めました。ただ、まだ「スタート」ボタンを押してもボタン自体は残っていますね。 次は、こちらを消して見ましょう。戻りましてボタンを選択してこちらのアクションを開くですね。ここにあるアイコンはここの「エレメント」パネルの中にあるアイコンと全く同じ意味です。クリックするとコートパネルが開きます。そして、今クリックこのボタンがクリックされた時にアニメーションをスタートのラベルの位置から開始するという命令が入っていますのでその後に、次はこちらの非表示こちらをクリックして「エレメントを非表示にします」と書いていますがエレメントを非表示にするためのEdgeAnimate APIが挿入されます。そして、今ここに「テキスト位置」と書いてある所に消したい要素の名前を入れます。ここでは、ボタンですね。ですので、ここに「ボタン」と入力します。と入力してそして、この状態でもう一度プレビューしてみましょう。すると、アニメーション開いた段階ではアニメーション止まっていますね。そして、「スタート」を押します。すると、アニメーションが開始されてこの様に、ボタンが非表示になりました。この様に、イベントとアクションそして、Edge Animate APIを組み合わせてボタンから、タイムラインをコントロールすることが可能になりました。 以上で、レッスンは終了です。今回は、実際の実装作業としてイベントとアクションそしてEdge Animate APIを使ったボタンでのタイムラインコントロールの基本について解説いたしました。

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

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

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

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

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

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