WEBアニメが動画編集の感覚で作れるAdobe Edge Animate

Adobe CCを利用しているのですが、普段はPremiereやAfter effects 、Photoshop、Illustrator くらいしかつかっていません。せっかく利用できるのに勿体ないので他のアプリケーションはどんなものかと触ってみたらEdge Animateがかなり使えそうな感じがしました。

demo1
demo2

Edge AnimateはWEBアニメーションを作るためのアプリケーションで、動画編集をしているような感覚で作成できるのでPremiereに慣れている人ならすぐ使いこなせると思います。

jpgやpngの素材をインポートとしてキーフレームなどを使ってアニメーションを付けていくので動画編集と非常に操作が似ています。

アニメーションを組んだら、編集のパブリッシュで書き出します。

作成したアニメーションは１つのdivとjavascriptのファイルとして書き出す事ができます。


&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
	&lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"/&gt;
	&lt;title&gt;無題&lt;/title&gt;
&lt;!--Adobe Edge Runtime--&gt;
    &lt;script type="text/javascript" charset="utf-8" src="http://animate.adobe.com/runtime/6.0.0/edge.6.0.0.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        .edgeLoad-EDGE-379121079 { visibility:hidden; }
    &lt;/style&gt;
&lt;script&gt;
   AdobeEdge.loadComposition('09demo1', 'EDGE-379121079', {
    scaleToFit: "none",
    centerStage: "none",
    minW: "0px",
    maxW: "undefined",
    width: "550px",
    height: "400px"
}, {"dom":{}}, {"dom":{}});
&lt;/script&gt;
&lt;!--Adobe Edge Runtime End--&gt;

&lt;/head&gt;
&lt;body style="margin:0;padding:0;"&gt;
	&lt;div id="Stage" class="EDGE-379121079"&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!DOCTYPE html>

<html>

<head>

<style>

.edgeLoad-EDGE-379121079 { visibility:hidden; }

</style>

AdobeEdge.loadComposition('09demo1', 'EDGE-379121079', {

scaleToFit: "none",

centerStage: "none",

minW: "0px",

maxW: "undefined",

width: "550px",

height: "400px"

}, {"dom":{}}, {"dom":{}});

</script>

</head>

</div>

</body>

</html>

idがStageとなっているdivがアニメーションになります。1つのdivにまとまってくれるので、HTML上で都合のいい場所に配置できるのでかなり便利です。もちろんflashが動かない環境でも大丈夫ですし、videoタグのように容量もそれほど重くありません。

cssやcanvasを使わずにDOMの操作によってアニメーションを作るのでバグがほとんど起きません、つまりデバイスをあまり気にせずアニメーションを埋め込めるので重宝しそうです。

アプリ

WRITER

スターフィールド編集部

この著者の記事を見る

PREVルート相対パスを使ったHTMLの制作・確認をnode.jsのローカルな簡易サーバで効率的にする方法 NEXTGoogle Map APIでMapの表示とマーカーのコントロール

WEBアニメが動画編集の感覚で作れるAdobe Edge Animate

Related