アニメーション：水平方向にアニメーション化

/* 水平方向にアニメーション化
Tick イベントが発生するたびに、x プロパティを増減して、ステージの左または右方向にシンボルインスタンスを移動させます。

手順 :
1. アニメーションの方向は、デフォルトでは右になっています。
2. アニメーションの方向を左に変更するには、以下の数値 10 を負の値に変更します。
3. シンボルインスタンスの移動速度を変更するには、以下の数値 10 を、フレームごとにシンボルインスタンスを移動させるピクセル数に変更します。
4. アニメーションでは、Tick イベントが使用されているので、再生ヘッドが新しいフレームに移動するときにアニメーションが進行します。アニメーションの速度はドキュメントのフレームレートの影響も受けます。
*/

this.addEventListener("tick", fl_AnimateHorizontally.bind(this));

function fl_AnimateHorizontally()
{
this.instance_name_here.x+=10;
}

アニメーション：連続回転

/* 連続回転
Tick イベントの rotation プロパティを更新して、シンボルインスタンスを連続回転させます。

手順 :
1. 以下のコードでは、デフォルトの回転方向は右回りになっています。
2. 回転方向を左回りに変更するには、以下の数値 10 を負の値に変更します。
3. シンボルインスタンスの回転速度を変更するには、以下の数値 10 を、フレームごとにシンボルインスタンスを回転させる度数に変更します。 大きな数値を指定するほど、回転速度は速くなります。
4. アニメーションでは、Tick イベントが使用されているので、再生ヘッドが新しいフレームに移動するときにアニメーションが進行します。アニメーションの速度はドキュメントのフレームレートの影響も受けます。
*/

this.addEventListener("tick",fl_RotateContinuously.bind(this));

function fl_RotateContinuously(){
this.movieClip_1.rotation+=10;
}

アニメーション：角度を変更

/* 角度を変更
rotation プロパティを更新して、指定した角度だけシンボルインスタンスを回転させます。

手順 :
1. 以下のコードでは、デフォルトの回転方向は右回りになっています。
2. シンボルインスタンスを左回りに回転させるには、以下の数値 45 を負の値に変更します。
3. シンボルインスタンスの回転角度を変更するには、以下の数値 45 を、回転させる角度に変更します。
*/

this.instance_name_here.rotation+=45;

アニメーション：垂直方向に移動

/* 垂直方向に移動
y プロパティを増減して、指定したピクセル数だけシンボルインスタンスを上下に移動させます。

手順 :
1. このコードでは、デフォルトの移動方向は下になっています。
2. シンボルインスタンスを上に移動させるには、以下の数値 100 を負の値に変更します。
3. シンボルインスタンスの移動距離を変更するには、以下の数値 100 を、シンボルインスタンスを移動させるピクセル数に置き換えます。
*/

this.instance_name_here.y+=100;

アニメーション：水平方向に移動

/* 水平方向に移動
x プロパティを増減して、指定したピクセル数だけ特定のシンボルインスタンスを左右に移動させます。

手順 :
1. このコードでは、デフォルトではシンボルインスタンスが右に移動します。
2. シンボルインスタンスを左に移動させるには、以下の数値 100 を負の値に変更します。
3. シンボルインスタンスの移動距離を変更するには、以下の数値 100 を、シンボルインスタンスを移動させるピクセル数に置き換えます。
*/

this.instance_name_here.x+=100;

ダブルクリックイベント

/* ダブルクリックイベント
関数でカスタムコードを作成します。
*/

this.instance_name_here.addEventListener("dblclick",function(){
alert("clicked");
});

マウスアウトイベント

/* マウスアウトイベント
シンボルインスタンスの外にマウスが移動すると、独自のカスタムコードを追加できる関数が実行されます。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
   シンボルインスタンスの外にマウスが移動すると、コードが実行されます。
*/
var frequency = 3;
stage.enableMouseOver(frequency);
this.instance_name_here.addEventListener("mouseout", fl_MouseOutHandler);

function fl_MouseOutHandler()
{
// カスタムコードを開始
// このコード例では、出力パネルに "マウスアウト" という用語が表示されます。
alert("マウスアウト");
// カスタムコードを終了
}

マウスオーバーイベント

/* マウスオーバーイベント
シンボルインスタンス上にマウスが移動すると、独自のカスタムコードを追加できる関数が実行されます。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
   シンボルインスタンス上にマウスが移動すると、コードが実行されます。
frequency は、イベントをトリガーする回数です。
*/
var frequency = 3;
stage.enableMouseOver(frequency);
this.instance_name_here.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler()
{
// カスタムコードを開始
// このコード例では、出力パネルに "マウスオーバー" という用語が表示されます。
alert("マウスオーバー");
// カスタムコードを終了
}

マウスクリックイベント

/* マウスクリックイベント
特定のシンボルインスタンス上でクリックすると、独自のカスタムコードを追加できる関数が実行されます。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
シンボルインスタンスをクリックすると、コードが実行されます。
*/

this.instance_name_here.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
// カスタムコードを開始
// このコード例では、出力パネルに "マウスクリック" という用語が表示されます。
alert("マウスクリック");
// カスタムコードを終了
}

これをfunctionを一体にした形で書いてみます。

this.instance_name_here.addEventListener("click", function(event) {

    alert("マウスでクリック");

})

こんな書き方になります。

クリックしてテキストフィールドを表示

/* クリックしテキストフィールドを表示

特定のシンボルインスタンス上でクリックすると、指定の x 座標、y 座標にテキストフィールドが作成され、表示されます。

手順 :

1. 値 200 を、テキストフィールドの配置先の x 座標に置き換えます。

2. 値 100 を、テキストフィールドの配置先の y 座標に置き換えます。

3. ストリング値 "テキストを置き換えてください" を、そのテキストフィールドに表示する文字列に置き換えます。引用符は付けたままにします。

*/

this.instance_name_here.addEventListener("click", fl_ClickToPosition.bind(this));

var fl_TF = new createjs.Text();

var fl_TextToDisplay = "テキストを置き換えてください。";

function fl_ClickToPosition()

{

    fl_TF.x = 200;

    fl_TF.y = 100;

    fl_TF.color = "#ff7700";

    fl_TF.font = "20px Arial";

    fl_TF.text = fl_TextToDisplay;

    this.addChild(fl_TF);

}

クリックしてオブジェクトを移動

Animate CC コードスニペットで用意されているスクリプトです。

/* クリックしてオブジェクトを移動
指定したシンボルインスタンスを、指定の x 座標、 y 座標に移動します。

手順 :
1. 値 200 を、オブジェクトの移動先の
    x 座標に置き換えます。
2. 値 100 を、オブジェクトの移動先の y 座標に置き換えます。
*/

this.instance_name_here.addEventListener("click", fl_ClickToPosition.bind(this));

function fl_ClickToPosition()
{
this.instance_name_here.x = 200;
this.instance_name_here.y = 100;
}

オブジェクトを表示

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

/* オブジェクトを表示

指定したシンボルインスタンスを表示します。

手順 :

1. このコードを使用して、現在非表示のオブジェクトを表示します。

*/

this.instance_name_here.visible = true;

クリックしてオブジェクトを隠す

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

/* クリックしてオブジェクトを隠す
特定のシンボルインスタンス上でクリックすると、そのオブジェクトが非表示になります。

手順 :
1. 現在非表示のオブジェクトにこのコードを使用します。
*/
this.instance_name_here.addEventListener("click", fl_ClickToHide.bind(this));

function fl_ClickToHide()
{
this.instance_name_here.visible = false;
}

ムービークリップを停止

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

/* ムービークリップを停止

ステージ上の指定したムービークリップを停止します。

手順 :

1. 現在再生中のムービークリップで、このコードを使用します。

*/

this.instance_name_here.stop();

ムービークリップを再生

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

/* ムービークリップを再生

ステージ上の指定したムービークリップを再生します。

手順 :

1. 現在停止中のムービークリップに、このコードを使用します。

*/

this.instance_name_here.play();

私の場合、結構これは使いそうです。

カスタムマウスカーソル

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

/*カスタムマウスカーソル
デフォルトのマウスカーソルを指定したシンボルインスタンスに置き換えます。
*/
stage.canvas.style.cursor = "none";
this.instance_name_here.mouseEnabled = false;
this.addEventListener("tick", fl_CustomMouseCursor.bind(this));

function fl_CustomMouseCursor() {
this.instance_name_here.x = stage.mouseX;
this.instance_name_here.y = stage.mouseY;
}
//マウスポインタをデフォルトに戻すには、以下の行を非コメント化します :
//this.removeEventListener("tick", fl_CustomMouseCursor.bind(this));
//stage.removeChild(instance_name_here);
//stage.canvas.style.cursor = "default";

クリックして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%です

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

やってまいりました。AnimateCC

ついにFlash Professional CC からAnimate CCに変わりました。
2月10日に気がつきました。

Animate CC のラーニングとサポートを見ることにします。英語での解説になっていますが、ちゃんと字幕も付いています。でも中身はFlash Professionalの時と同じようです。
全部で４つのコンテンツがあります。

まずは『ベクターアートブラシの使い方』。

自分の場合、直接AnimateCCで絵を描くことはあまりないかもしれませんが、ブラシをうまく使うことで、グラフィックの印象が劇的に変わります。スマートスケッチの頃を思い出します。

次は『モーションエディターでアニメーションを作成』。
モーションエディターという機能が追加されたようです。
細かく、動きをコントロールすることができます。簡単なモーションを作って、そのモーションから右クリック。するとモーションエディタが開きます。
思い通りの動きにするにはなかなか大変だと思いますが、強力なツールです。

そして、『Flashのコンテンツをマルチプラットフォーム向けに配信する』です。
このコンテンツは細分化されていて、その中の一つ目は「HTML5 Canvasにパブリッシュする」。自分の目的はこれが一番興味があり、使いたいパブリッシュです。

それから「WebGLにパブリッシュする」。
WebGLはそのうちって感じでしょうか。

この章の最後の節は「カスタムプラットフォーム向けにパブリッシュする」。です。この節は動画もなく、英語のページに飛ばされるだけです。

Animate CC のインフォメーション的なページのようです。そのページの最後には「MAX ONLINE」として 様々なムービーがあります。アニメーションの細かさにびっくりするようなムービーもありました。

そしてこの章の最後が『ステージのサイズ変更、アートワークの拡大・縮小、ビデオ解像度のコントロール』です。
これはテキストしかないのですが、わかりやすく説明しています。

コンテンツを拡大／縮小オプションを使うと画面サイズに合わせて中身のサイズも変更してくれます。

この機能も超強力ですよね。
これから、ビシバシと使っていきたいと思います。

FlashからAnimate CCヘ

2016年、FlashからAnimate CCへ変わります。
これを機にAnimate CCを使ってWEB Game、インタラクティブなサイトなどを作ってみたいと思います。

現在最新のFlash CC 2015にHTML書き出し用のサンプルがあったので、動作チェックをしてみました。

MacではSafari、Chrome、Firefoxでの動作チェック。
WindowsではIE11、Chrome、Firefoxで動作をチェックしてみました。

結論は、ローカルで試したIE11では全く何も出ない状態でした。その他のブラウザはすべて大丈夫でした。IEの設定を変更したり、いろいろやってみたのですが効果はありません。
で思ったのがもしかしてサーバにアップロードして試してみよう。
早速やってみるとこれがビンゴでした。

IE11でもちゃんと表示されました。

それぞれのブラウザ用に変更することなく、ワンソースでいけたのです。
これはいいです。
いろいろ、コンテンツを作りながらマスターしていきます。