#edgeanimate

These are instructions on downloading Adobe Edge Animate, the only software that I will be supporting this semester (in other words, use whatever you want to make whatever you want, but this is the software I will teach in class).

Unfortunately, it's not a simple download. You'll need to set up a Creative Cloud account (it's free).

More unfortunately, it's no longer as easy as that. What you'll need to do is, first, go to https://creative.adobe.com/join/starter and set up a creative cloud account.

Next, go to https://creative.adobe.com/products/animate to download Adobe Edge Animate,

It's a little info page on Edge Animate and in the upper right corner there is a link that says "Download Trial." Don't click it! Instead, scroll down to the section titled "In This Version" (fig 1).

Change the dropdown menu to  Animate 1.5 (fig 2).

(use the arrows to see both images)

The Download Trial button has now become Download Animate 1.5. Now click it. It should install Adobe Creative Cloud and then install Edge Animate.

That's it! For more on why this was so tough, keep reading. Otherwise, ignore it and get animating!

こんにちは、@mouri45です。

@roothybrid7がAdobe Edge Animateの記事を書いてくれたので目次ページを作ってみました。

Adobe Edge AnimateはHTML5やCSS3などを使ったインタラクティブなコンテンツ制作するオーサリングツールです。このジャンルでは、これまで決定版といえるツールが無かったように思いますが、私はAdobe Edge Animateが、このジャンルのスタンダードなると期待しています。

下記の記事が、Adobe Edge Animateを始める方の学習の一助になれば幸いです。また、今回の記事は少し技術者寄りですが、もうすこし軽めの記事も追加して行けたらと考えています。

目次

HTML5アニメーションツール「Adobe Edge Animate」のご紹介

Adobe Edge Animateを使って簡単なアニメーションを作ってみる

Adobe Edge AnimateのSymbolを使ってみる

Sprite画像を用意して、CSSで画像位置の変更と切り抜きを利用してアニメーションを作成します。

前提環境

本記事は、Adobe Edge Animate preview 7 をベースにしています。またサンプルは、MacOSX環境で作成したので、Windowsをお使いの場合、コマンド操作に違いがあるかもしれませんので、適宜読みかえてください。

動作サンプル

このサンプルでは、Sprite画像をシンボル化し、Timelineで切り抜きと画像位置の変更を駆使して、アニメーションしているように見せます。また、シンボル化したSprite画像を別のSymbolで組み合わせて移動アニメーションを新たに作ります。

サンプルが表示されない場合はこちらからアクセスしてみてください。

ソースコードは下記からダウンロードできます。

SpriteImageダウンロード(zip)

SpriteImageダウンロード(tar.gz)

SpriteImageソースコード(github)

Sprite画像

下記は一枚の画像で、これをそれぞれ切り抜いてアニメーションに使います。通常は、CSSを使い表現するのですが、Edge Animateでも同じように、切り抜きと位置の変更、そしてTimelineを使って表現することができました。

Sprite画像でCSSスプライトと同じようなことをする

Edge AnimateでCSSスプライトと同じようなことをするには、Sprite画像をシンボル化してTimelineに切り抜き画像を並べることでできました。やることとしては、プロパティパネルの背景イメージの位置と切り抜きサイズを決定すること、そしてこの切り抜き画像のTimeline上の位置を決めることです。

使うときには、下記のようにJavascriptからEdge APIのstopとラベルを使ってアクセスすることになります。

// Stageや親SymbolのTriggerやEventのアクション関数内でのコード例 // running画像にアクセスする場合 sym.getSymbol("blackcatSprite").stop("running"); // Javascriptで猫を左へ移動 sym.getSymbol("blackcatSprite").$("cat").animte({left: "-=50px"}); // OR: 事前定義したEdge Timelineで再生 sym.play("catRun"); // 猫はrunning画像にした上で、catRunというラベル位置から定義してあるアニメーションを再生する

左から1番目の画像のプロパティの設定とTimelineの位置を決定します。

背景イメージの位置は、(0,0)

猫画像のサイズで切り抜き

Timelineの位置を決め、ラベルsittingを追加します。

これによって、この画像は下記のコードでアクセスできるようになりました。

// sitting画像の位置で停止する sym.getSymbol("blackcatSprite").stop("sitting");

左から2番目の画像のプロパティの設定とTimelineの位置を決定します。

背景イメージの位置は、(-90, 0)

猫画像のサイズで切り抜き

Timelineの位置を決め、ラベルrunningを追加します。

これによって、この画像は下記のコードでアクセスできるようになりました。

// running画像の位置で停止する sym.getSymbol("blackcatSprite").stop("running");

左から3番目の画像のプロパティの設定とTimelineの位置を決定します。

背景イメージの位置は、(-205,0)

猫画像のサイズで切り抜き

Timelineの位置を決め、ラベルstandupを追加します。

これによって、この画像は下記のコードでアクセスできるようになりました。

// standup画像の位置で停止する sym.getSymbol("blackcatSprite").stop("standup");

左から4番目の画像のプロパティの設定とTimelineの位置を決定します。

背景イメージの位置は、(-300, 0)

猫画像のサイズで切り抜き

Timelineの位置を決め、ラベルstandingを追加します。

これによって、この画像は下記のコードでアクセスできるようになりました。

// standing画像の位置で停止する sym.getSymbol("blackcatSprite").stop("standing");

切り抜き画像の切り替え用コード例

サンプルでは、白い四角の中でTimelineのTriggerで4種類のSprite画像を2秒毎に切り替えを行っていますので、確認してみてください。

Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 0, function(sym, e) { sym.getVariable("switchPose")("sitting"); }); //Edge binding end Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 2000, function(sym, e) { sym.getVariable("switchPose")("running"); }); //Edge binding end Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 4000, function(sym, e) { sym.getVariable("switchPose")("standup"); }); //Edge binding end Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 6000, function(sym, e) { sym.getVariable("switchPose")("standing"); }); //Edge binding end Symbol.bindTimelineAction(compId, symbolName, "Default Timeline", "complete", function(sym, e) { sym.play(0); }); //Edge binding end Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) { /** * Switch cat pose * @param {string} label A edge timeline label. */ function switchPose(label) { sym.getSymbol("blackcatSprite").stop(label); sym.$("Text").html(label); } sym.setVariable("switchPose", switchPose); }); //Edge binding end

Sprite画像のSymbolを使って移動アニメーションを作る

この画像を使って地面を走るアニメーションを作ってみます。先ほどは、各画像を表示するのに、Javascriptで切り替えてましたが、実はTimelineエディタで停止位置をスタティックに設定することも可能です。

Edge AnimateでTimelineのプレビューをする場合、Javascriptでアニメーションコードを記述してしまうと、Edge Animateの再生プレビュー機能では確認できず、ブラウザプレビューを使うしかなくなってしまうので、使い分けるとよいでしょう。

地面を走るアニメーションとしてSprite画像のSymbolと地面の図形をシンボル化します。

そして、このSymbolのTimelineをTimelineエディタで定義します。

下記で、左右の移動とSpriteの各画像きりかえを設定します。行きと戻りを表現するため伸縮(x)を100% -> -100% -> 100% で左右反転を設定しています。

なお、TimelineエディタでのSymbolの停止位置の設定方法は下記の通りです。

猫が地面を走るアニメーションを再生する

最後に猫が走るアニメーションをボタンクリックで再生するように設定します。これは単にボタンのclickイベントが発火したら、Edge APIで再生するだけです。

// Button click. var catRunAction = sym.getSymbol("catRunAction"); if (!catRunAction.isPlaying()) { catRunAction.play(0); }

終わりに

CSSを書かずに、CSSスプライト風な機能をEdge Animateで作ってみました。アイデア次第でいろいろなアニメーションを作成することが可能です。

Preview7では、可変レイアウトにも対応できるようになりましたし、今後が楽しみなツールです。

参考

サンプルコード

Symbolで要素をまとめると、アニメーションを独立したTimelineで再生でき、複数インスタンス化して再利用することが可能になります。

前提環境

本記事は、Adobe Edge Animate preview 7 をベースにしています。またサンプルは、MacOSX環境で作成したので、Windowsをお使いの場合、コマンド操作に違いがあるかもしれませんので、適宜読みかえてください。

動作サンプル

Symbolを使っていろいろなカラーのボールを落とすサンプルを作成してみました。サンプルが表示されない場合はこちらからアクセスしてみてください。

赤・緑・青の三種類のボールがシンボルになっていて、ランダムに一つのボールをEdge APIで動的にインスタンス化してアニメーションを再生するようになっています。ボールのSymbolでは上から下へ移動するアニメーションを設定しているだけで、ボールを落とす図形が移動することによって、若干左右に揺れ動いています。

このアニメーションは下記のように動作します。

ボールを落とす図形は、左上から左右に移動するアニメーションを繰り返す。

図形アニメーションが動作している間、赤・緑・青のボール図形のいずれかのSymbolインスタンスを作成し、下に向かって落とす。

ボールが下に落ちたら、そのSymbolインスタンスが削除される。

ボールを落とす図形をクリックすると、図形アニメーションが停止し、ボールのSymbolインスタンス作成も停止する。

サンプルコードは下記のURLでチェックアウト可能です。Edge Animateをインストールしている場合は、symbolballs.edgeファイルがプロジェクトファイルとなっていますので、確認することができます。

SymbolBallsサンプルダウンロード(zip)

SymbolBallsサンプルダウンロード(tar.gz)

SymbolBallsサンプルコード(github)

ボールを落とす図形の繰り返しアニメーション

今回は、Triggerを使わず、一連の左右に移動するアニメーションが完了したあとに再度再生するため、Stageのcompleteイベントのアクション中でsym.play(0)を呼び出して再度再生しています。

// Stage timeline complete. sym.play(0);

要素のシンボル化

シンボル化したい要素を一つまたは複数選択して変換することで作成できます。

Symbol変換後、Symbolはdivコンテナとなっているので、その中に選択した要素が入り、そのSymbolのTimelineが一つ作成されます。下記は、Stage上にスタティックに配置しています。

動的にインスタンス化する場合は、エレメントパネル等で配置せず、Edge APIをJavascriptで呼び出すことでインスタンス化できます。

シンボルの作り方

シンボルの作り方は、シンボル化したい要素を選択して、ステージパネルかエレメントパネルの選択要素を右クリックして、シンボルに変換で作成することができます。変換したあとは、再利用が可能になっているのでStage上から削除しても問題ありません。改めて配置したい場合は、ライブラリパネルのシンボルからD&Dすればよいです。

各ボールのSymbolアニメーションについて

上から下へ落ちるアニメーションを設定しています。下まで行ったら透明になり、イージングも設定しています。

アニメーション後にシンボルを削除するので、再生完了後のアクションでEdge APIを使って自分自身を削除しています。

Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) { sym.$("Ellipse").css({position: "absolute"}); }); //Edge binding end Symbol.bindTimelineAction(compId, symbolName, "Default Timeline", "complete", function(sym, e) { sym.deleteSymbol(); }); //Edge binding end

動的なSymbolインスタンスの作成について

SymbolはStageやSymbolにスタティックに配置することも可能です。ただ今回は、Edge APIを使って動的にSymbolインスタンスを生成して、アニメーションを再生するようにしました。

下記のコード例では、乱数でボールSymbolをランダムに選んでインスタンス化し、その場でアニメーション再生しています。

// creationComplete /** * Ball symbol names. * @type {Array.<string>} */ var balls = ["redBall", "blueBall", "greenBall"]; /** * Drop a ball at random. */ function drop() { var ballIndex = Math.floor(Math.random() * 9999) % balls.length, ball = sym.createChildSymbol(balls[ballIndex], "RoundRect"); ball.play(); }

Symboleの動的生成のコード例

compositionReady(読み込み後Edgeコンポジションの再生準備が整った状態)のところで、

ボールを落とす処理を行う関数を実行しています。ボールを落とす図形が左右に移動するアニメーションが動いているときは、ボールを落とし、図形が止まったときは、ボールを落とすのを中止しています。

Stage: TimelineのTriggerでボール作成

// Stage triggers function. sym.getVariable("updateDrop")();

Stageコード全体

Symbol.bindTimelineAction(compId, symbolName, "Default Timeline", "complete", function(sym, e) { sym.play(0); }); //Edge binding end Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) { /** * Ball symbol names. * @type {Array.} */ var balls = ["redBall", "blueBall", "greenBall"]; /** * Drop a ball at random. */ function drop() { var ballIndex = Math.floor(Math.random() * 9999) % balls.length, ball = sym.createChildSymbol(balls[ballIndex], "RoundRect"); ball.play(); } function updateDrop() { if (sym.isPlaying()) { drop(); } } sym.setVariable("updateDrop", updateDrop); }); //Edge binding end Symbol.bindElementAction(compId, symbolName, "${_RoundRect}", "click", function(sym, e) { if (sym.isPlaying()) { sym.stop(); } else { sym.play(); } }); //Edge binding end Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1000, function(sym, e) { sym.getVariable("updateDrop")(); }); //Edge binding end Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 3500, function(sym, e) { sym.getVariable("updateDrop")(); }); //Edge binding end

Edge AnimateのEventアクション 

creationComplete Stageが作成され初期化が完了した後に発火されます。このサンプルではアニメーション再生に必要な関数を定義しています。 シンボル変数に関数を設定していますが、変数の値は何でもOKなので問題ありません。 主に別のEventやTriggerで関数を実行したい場合に使います。

// creationComplete function updateDrop() { // sym.getLabelPosition("moveEnd") OR sym.getDuration() var timeout = Math.random() * sym.getLabelPosition("moveEnd") / 4; if (sym.isPlaying()) { drop(); } setTimeout(updateDrop, timeout); } sym.setVariable("updateDrop", updateDrop);

compositionReady Edgeコンポジションの再生準備が整ったときに発火されます。このサンプルでは、DOMReadyのような使い方で、creationCompleteで事前定義された関数を使って、ボールを落とすアニメーションを再生開始しています。

// document.compositionReady // シンボル変数から関数を取得して実行 sym.getVariable("updateDrop")();

Symbolインスタンス作成と削除 API

Symbolインスタンス生成と削除に関するAPIは、下記のものがあります。

sym.createChildSymbol(symbolName, parentElementName, index) Symbolインスタンスを作成し、指定した親要素に追加します。symbolNameには、定義したSymbol(ライブラリパネルのシンボル)の名前を指定します。parentElementNameには、親となるDOM要素を指定します。SymbolコンテナもDOM要素なのでシンボルの中に指定することも可能です。

sym.deleteSymbol(options) Symbolインスタンスを削除します。サンプルでは、ボールアニメーションの再生が完了した時に自分自身を削除する時に使用しています。

// redBall, greenBall OR blueBall Timeline complete. sym.deleteSymbol();

Symbol Animation API

sym.play(position, executeTriggers) Timelineを再生します。引数のpositionなしの場合、Playheadの位置から再生します。PlayheadがTimelineの最後にある場合は、はじめから再生を開始します。positionはラベルも指定できます。これによって、繰り返しアニメーションを再生したり、任意の位置に飛んで特定のアニメーションを再生したりすることが可能です。 executeTriggersは、再生開始位置にあるTriggerを実行するかしないかを設定できるようです。

sym.stop(position) Timelineを停止します。引数のpositionなしの場合、Playheadの位置で停止します。playの場合と同じく、positionはラベルも指定できます。

sym.isPlaying() Timelineが、再生中かどうかを確認することが可能です。サンプルでは、Stageのボールを落とす要素アニメーションの再生状態によって、ボールを落とすアニメーションを実行するのに使いました。

sym.getPosition() Timeline上のPlayheadの位置がどこにあるかを確認する場合に使います。

sym.getDuration() Timelineの長さ(時間)を取得します。

sym.getLabelPosition(aLabel) Timeline上に設定したラベルの位置を取得します。ラベル位置の時間が取得できるので、時間計算などにも使用できます。

まとめ

Symbolを使うことで、アニメーションを再利用することが可能です。今回のように多数ボールを生成するような場合に使えると思います。また、Edge APIを使用することでアニメーションの再生/停止の制御も行えます。次回は、Sprite画像とSymbolを使ったアニメーションを作成する方法をご紹介します。

参考

Edge API

サンプルコード