Adobe Edge Animateリリースされました

Pocket
[`evernote` not found]

Adobeのhtml5/css3アニメーション作成ツールEdge Animateがリリースされました。

css3のアニメーションは興味があっても、あれを手書きでつくる根気も能力もありませんから、こういったツールでできると楽です。さっそく簡単なアニメーションを作ってみました。

DEMO

センスがないアニメーションですがorz (これでも学生時代VJをたしなんでいたなんて口が裂けても言えない・・・)
これ、たったの数分でできました。flashのアニメーションやafter effectを使ったことがある方なら直感的に操作できるかと思います。アニメーションをタイムラインで管理して、アクションをつけるところで「キーポイント」を付けてあげて、動きをパラメータで指定するだけです。

しっかり使い込んでいませんが、fontもweb fontが使えますし、画像ファイルなんかも読み込めましたので、もっとしっかりしたアニメーションも実現可能です。

ちなみに上記のアニメーションのソースはこんな感じ。

/**
 * Adobe Edge: symbol definitions
 */
(function($, Edge, compId){
//images folder
var im='images/';

var fonts = {};


var resources = [
];
var symbols = {
"stage": {
   version: "1.0.0",
   minimumCompatibleVersion: "0.1.7",
   build: "1.0.0.185",
   baseState: "Base State",
   initialState: "Base State",
   gpuAccelerate: false,
   resizeInstances: false,
   content: {
         dom: [
         {
            id:'Rectangle',
            type:'rect',
            rect:['79px','199px','46px','200px','auto','auto'],
            fill:["rgba(146,214,154,1.00)"],
            stroke:[0,"rgba(0,0,0,1)","none"]
         },
         {
            id:'Rectangle2',
            type:'rect',
            rect:['146px','400px','46px','177px','auto','auto'],
            fill:["rgba(146,214,154,1)"],
            stroke:[0,"rgb(0, 0, 0)","none"]
         },
         {
            id:'Rectangle3',
            type:'rect',
            rect:['235px','236px','46px','164px','auto','auto'],
            fill:["rgba(146,214,154,1)"],
            stroke:[0,"rgb(0, 0, 0)","none"]
         },
         {
            id:'Rectangle4',
            type:'rect',
            rect:['341px','400px','46px','164px','auto','auto'],
            fill:["rgba(176,116,127,1.00)"],
            stroke:[0,"rgb(0, 0, 0)","none"]
         },
         {
            id:'Rectangle5',
            type:'rect',
            rect:['421px','191px','46px','210px','auto','auto'],
            fill:["rgba(254,117,86,1.00)"],
            stroke:[0,"rgb(0, 0, 0)","none"]
         }],
         symbolInstances: [

         ]
      },
   states: {
      "Base State": {
         "${_Rectangle5}": [
            ["style", "top", '400px'],
            ["style", "opacity", '1'],
            ["color", "background-color", 'rgba(254,117,86,1.00)']
         ],
         "${_Rectangle2}": [
            ["style", "top", '400px'],
            ["style", "opacity", '1'],
            ["style", "left", '146px'],
            ["color", "background-color", 'rgba(70,143,79,1.00)']
         ],
         "${_Rectangle3}": [
            ["style", "top", '400px'],
            ["style", "opacity", '1'],
            ["style", "left", '236px'],
            ["color", "background-color", 'rgba(120,176,116,1.00)']
         ],
         "${_Stage}": [
            ["color", "background-color", 'rgba(255,255,255,1)'],
            ["style", "width", '550px'],
            ["style", "height", '400px'],
            ["style", "overflow", 'hidden']
         ],
         "${_Rectangle}": [
            ["style", "top", '399px'],
            ["style", "opacity", '1'],
            ["transform", "scaleY", '1'],
            ["color", "background-color", 'rgba(146,214,154,1.00)']
         ],
         "${_Rectangle4}": [
            ["style", "top", '400px'],
            ["style", "opacity", '1'],
            ["color", "background-color", 'rgba(176,116,127,1.00)']
         ]
      }
   },
   timelines: {
      "Default Timeline": {
         fromState: "Base State",
         toState: "",
         duration: 10000,
         autoPlay: true,
         timeline: [
            { id: "eid63", tween: [ "style", "${_Rectangle3}", "opacity", '0', { fromValue: '1'}], position: 7377, duration: 2623, easing: "easeOutQuad" },
            { id: "eid24", tween: [ "color", "${_Rectangle3}", "background-color", 'rgba(120,176,116,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(120,176,116,1.00)'}], position: 7377, duration: 0, easing: "easeInOutQuad" },
            { id: "eid21", tween: [ "style", "${_Rectangle3}", "top", '244px', { fromValue: '400px'}], position: 656, duration: 5574, easing: "easeInQuad" },
            { id: "eid23", tween: [ "style", "${_Rectangle3}", "top", '286px', { fromValue: '244px'}], position: 6230, duration: 1148, easing: "easeInOutQuad" },
            { id: "eid62", tween: [ "style", "${_Rectangle4}", "opacity", '0', { fromValue: '1'}], position: 7377, duration: 2623, easing: "easeOutQuad" },
            { id: "eid13", tween: [ "style", "${_Rectangle2}", "top", '326px', { fromValue: '400px'}], position: 2131, duration: 2623, easing: "easeInQuad" },
            { id: "eid15", tween: [ "style", "${_Rectangle2}", "top", '230px', { fromValue: '326px'}], position: 4754, duration: 2623, easing: "easeInQuad" },
            { id: "eid51", tween: [ "style", "${_Rectangle5}", "opacity", '0', { fromValue: '1'}], position: 7377, duration: 2623, easing: "easeOutQuad" },
            { id: "eid40", tween: [ "style", "${_Rectangle5}", "top", '367px', { fromValue: '400px'}], position: 0, duration: 820, easing: "easeOutQuad" },
            { id: "eid42", tween: [ "style", "${_Rectangle5}", "top", '376px', { fromValue: '367px'}], position: 820, duration: 328, easing: "easeOutQuad" },
            { id: "eid44", tween: [ "style", "${_Rectangle5}", "top", '295px', { fromValue: '376px'}], position: 1148, duration: 1311, easing: "easeOutQuad" },
            { id: "eid46", tween: [ "style", "${_Rectangle5}", "top", '353px', { fromValue: '295px'}], position: 2459, duration: 2787, easing: "easeOutQuad" },
            { id: "eid48", tween: [ "style", "${_Rectangle5}", "top", '214px', { fromValue: '353px'}], position: 5246, duration: 2131, easing: "easeOutQuad" },
            { id: "eid32", tween: [ "style", "${_Rectangle4}", "top", '236px', { fromValue: '400px'}], position: 1475, duration: 2787, easing: "easeInOutQuad" },
            { id: "eid34", tween: [ "style", "${_Rectangle4}", "top", '325px', { fromValue: '236px'}], position: 4262, duration: 820, easing: "easeInOutQuad" },
            { id: "eid36", tween: [ "style", "${_Rectangle4}", "top", '271px', { fromValue: '325px'}], position: 5082, duration: 2295, easing: "easeInOutQuad" },
            { id: "eid64", tween: [ "style", "${_Rectangle2}", "opacity", '0', { fromValue: '1'}], position: 7377, duration: 2623, easing: "easeOutQuad" },
            { id: "eid65", tween: [ "style", "${_Rectangle}", "opacity", '0', { fromValue: '1'}], position: 7377, duration: 2623, easing: "easeOutQuad" },
            { id: "eid19", tween: [ "style", "${_Rectangle3}", "left", '236px', { fromValue: '236px'}], position: 656, duration: 0, easing: "easeInQuad" },
            { id: "eid7", tween: [ "style", "${_Rectangle}", "top", '200px', { fromValue: '399px'}], position: 0, duration: 4590, easing: "easeInQuad" },
            { id: "eid9", tween: [ "style", "${_Rectangle}", "top", '305px', { fromValue: '200px'}], position: 4590, duration: 2787, easing: "easeInQuad" }         ]
      }
   }
}
};


Edge.registerCompositionDefn(compId, symbols, fonts, resources);

/**
 * Adobe Edge DOM Ready Event Handler
 */
$(window).ready(function() {
     Edge.launchComposition(compId);
});
})(jQuery, AdobeEdge, "EDGE-43530650");

もはや普通の人間では到底理解できません(^^;

実務として、こういったアニメーションを扱うことはあまりないかもしれませんが、面白いツールだと思います。
むかし、必死でFlashを使って作っていたアニメーションを今は同じような操作でhtmlベースで作れるなんて・・・なんか感慨深いです。

このEdge、現在は無料で利用できます。(Creative Cloudに登録する必要あり)近い将来有料化するようですので、興味がある方は早めに使って操作感を確かめてみるといいかもしれません。

個人的には、同時に発表されたEdge Reflow(レスポンシブなレイアウトをデザインできるツール?)の方が興味があります。
発表のみなので詳細はわかりませんけどね。

HTML5 アニメーションソフト | Adobe Edge Animate

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。