クリックしてWebページに移動

AnimateCC がコードスニペットで用意しているコマンドです。

/* クリックして Web ページに移動
特定のシンボルインスタンス上でクリックすると、新しいブラウザーウィンドウに URL がロードされます。

手順 :
1. http://www.adobe.com を目的の URL アドレスに置き換えます。
   二重引用符 ("") は付けたままにします。
*/

this.movieClip_1.addEventListener("click", fl_ClickToGoToWebPage);

function fl_ClickToGoToWebPage() {
window.open("http://www.adobe.com", "_blank");
}

これだけでも使えますよね。

クリックして特定のフレームに移動し、再生

AnimateCC がコードスニペットで用意しているコマンドです。

/* クリックして特定のフレームに移動し、再生
特定のシンボルインスタンス上でクリックすると、再生ヘッドがタイムラインの指定フレームに移動し、そのフレームから再生が継続されます。
メインタイムラインまたはムービークリップタイムライン上で使用できます。

手順 :
1. 以下のコード内の数値 5 を、シンボルインスタンスのクリック時に再生ヘッドが移動するフレームの番号に置き換えます。
2. EaselJS のフレーム番号は、1 ではなく 0 から始まります。
*/

this.movieClip_1.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

function fl_ClickToGoToAndPlayFromFrame()
{
this.gotoAndPlay(5);
}

クリックしてフレーム移動、そして停止

AnimateCC がコードスニペットで用意しているコマンドです。

/* クリックして特定のフレームに移動し、停止

特定のシンボルインスタンス上でクリックすると、再生ヘッドがタイムラインの指定フレームに移動し、ムービーが停止します。

メインタイムラインまたはムービークリップタイムライン上で使用できます。

手順 :

1. 以下のコード内の数値 5 を、シンボルインスタンスのクリック時に再生ヘッドが移動するフレームの番号に置き換えます。

2. EaselJS のフレーム番号は、1 ではなく 0 から始まります。

*/

this.movieClip_1.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

function fl_ClickToGoToAndStopAtFrame()

{

this.gotoAndStop(5);

}

こんなスニペットがあります。

フレーム番号を取得する

AnimateCC がコードスニペットで用意しているコマンドです。

/* 現在のフレームのフレーム番号を取得するコード

*/

var frameNumber = this.currentFrame;

フレームで止めるプログラム

AnimateCC がコードスニペットで用意しているコマンドです。

/* このフレームで停止

 タイムラインは、このコードが挿入されたフレームで停止 / 一時停止します。

ムービークリップのタイムラインの停止 / 一時停止にも使用できます。

*/

this.stop();

これだけでいいんですって。

Animate CC でプログラムを書いてみる

HTML5 Canvasを新規作成し、クリックするとWebページに飛ぶプログラムを書いてみます。

まずはボタンを作って

シンボル化します

すると上記のようなエラーが出ますが、Animate CC に勝手に名前をつけてもらいます

ツールからコードスニペットを選びます。

その中のアクション、クリックしてWebページに移動

初期設定のままでいきます。Adobeに飛ぶことになるのですが

パブリッシュします。

以下のようなエラーが出ますが、問題なくAdobeのページに飛びます。

簡単にWebページへのジャンプができました。

テキストが徐々に現れてくるアニメーション

Animate CC でテキストが徐々に現れてくるアニメーションを作ってみます。

まず用意するのはテキスト

シンボルに変更したら

カラー効果のスタイルを変更

アルファにします

アルファ値を０にしてみます。

すると見事に文字は消えています。

次は29％

72%

100%です

こんな感じで、テキストのアルファ値を変更すると文字が浮かび上がってきます。