iPhotographer

最近タイムラインアニメーション的要素の多いHTML+javascriptペースのWebマガジンを制作する仕事がありました。普段HTMLやjavascriptを書くときは、テキストエディタを使っていますが、この仕事は量的に手で書いていたら終わらないなと察し、何らかのフレームワークを急いで探す必要がありました。

そこで、Webマガジンの制作ツールとしてAdobeのEdge Animateが使われてはじめている、との情報を思い出し、Edgeを一通り使って評価してみようということになりました。

KindleとiBookstoreが一段落して、1年ほど中断していたウェブベースの電子書籍、マガジンを来月（明日）から再開。あちらの現場では、Adobe Edgeがメインツールになっていて、昨年とはまったく異なっている！ twitter.com/commonstyle/st…

— common styleさん (@commonstyle) 2013年2月28日

Edge AnimateはHTML5&javascriptアニメーションのオーサリングツールです。Stageやsymbolの概念がありFlashに似ていると言われたりしますが、アニメーションはJSONで記述され、動作は jqueryに依存するjavascriptなツールです。Adobeのクリエイティブクラウド利用者であれば（無償メンバーであっても）ダウンロードできます。

使いはじめてみると、タイムラインアニメーションを作るには便利でリソース管理も簡単になるし、なかなか良いツールだと感じてきているのですが、既存のjquery pluginと一緒に使おうとすると、まだドキュメントも少なく戸惑うことが多いかもしれません。今回Webマガジンを制作する際にはそのあたりを調べながらの作業となったため、一段落したところで、資料的にEdge Animate の使い方をまとめておこうと思います。

サンプルとして、「この２ヶ月あまりに忙しすぎて遊びにいきたいという欲求が徹夜明けの頭に何度も再生された」という体で、僕の煩悩を走馬灯のように廻してみることにします。

■走馬灯のガワを作る
諸々の煩悩を映すための直方体をまず作っておきます。



・矩形を４つステージ上に作成しそれをグループ化します（まとめて選択し右クリックで）。
・レイアウトはCSSで動的に行うので、この矩形は重ねて作っておきます。
・ルートになる要素の"Stage"にレイアウトを動的に指定するコードをバインドします。
・IDEの右側にあるエレメントペインで{}をクリックするとイベントが選択できます。今回はStageの"document.compositionReady"にコードをガツガツ書いていくことにします。

wsize = $(window).width();

hsize = $(window).height();

mleft = (wsize-560)/2;

mtop = (hsize-315)/2;

if(mleft<=0){

	mleft=0;

};



//ブラウザをリサイズした時のレイアウト変更処理

$(window).resize(function(){

	wsize = $(window).width();

	hsize = $(window).height();

	mleft = (wsize-560)/2;

	mtop = (hsize-315)/2;

	if(mleft<=0){

		mleft=0;

	};

	sym.$("cube").css({'position':'relative','left':mleft,'top':mtop});

});





//４つの矩形を直方体の側面になるようにtransformします

sym.$("cube").css({'position':'relative','left':mleft,'top':mtop,'-webkit-transform':'rotateX(-10deg) rotateY(15deg)'});

sym.$("cube").css({'-webkit-transform-style':'preserve-3d','-webkit-transform-origin':'280px 280px 0'});

sym.$("p1").css({'-webkit-transform':'translateZ(280px)'});

sym.$("p2").css({'-webkit-transform':'rotateY(90deg) translateZ(280px)'});

sym.$("p3").css({'-webkit-transform':'rotateY(180deg) translateZ(280px)'});

sym.$("p4").css({'-webkit-transform':'rotateY(-90deg) translateZ(280px)'});

次回からここで作った直方体の４つの側面に外部サービスのコンテンツなどを配置していこうと思います。