FlashからEdge?Adobe Edgeを使ってみる! 『インストール方法からサンプルコンテンツ作成まで』

Adobe Edgeとは

先月の1日(※現在は2011年9月)アドビがHTML5対応のインタラクションデザインツール「Adobe Edge」のパブリックプレビュー版をリリースしましたが、皆さんはもう使ってみましたか?

リリース後、私の周りでもとても話題になっていました。
この「Adobe Edge」はFlashで行っていたアニメーションなどのインタラクティブコンテンツを『 HTML5・CSS3・JavaScript 』などの標準規格を使用して制作することができるツールになっているようです。

思えば、去年ぐらいから私自身もFlashを使う機会が減ってきたように思います。今後どうなっていくのだろう?と考えていたところでのリリースでしたのでとても興味があります。

また「Adobe Edge」の登場で、HTML5を取り巻く環境も今後急速に変化していくのでしょうか?そういったことにも興味はありますが、まずはインストールして触ってみないことには始まらないと思いますので、今回はインストール方法とファイル作成・保存方法、インターフェイスの確認と簡単なサンプルを制作してみたいと思います。私もこれから勉強していきますので、よかったら一緒にはじめましょう!!

Adobe Edge インストール方法

Step1:Adobe Edge Previewページへ

「Adobe Edge」はAdobe LabsのAdobe Edge Previewページからダウンロードします。

Adobe Edge Previewページ
http://labs.adobe.com/technologies/edge/

Adobe Edge Previewページにいくと下記画像のような画面が表示されるのでダウンロードボタンをクリックしてください。

Step2:Adobe IDとパスワードの入力

次にAdobe IDとパスワードを求められる画面に移動しますので、登録しているIDとパスワードを記入します。
※尚、登録がまだの場合は『Create an Adobe Account』ボタンをクリックして新規に登録してください。

Step3:Adobe Edgeのダウンロード

IDとパスワードを入力すると『Adobe Labs Downloads』ページが表示されるので、ここでMac版かWindows版かを選択してダウンロードします。(※私はwindows版を使用します。)

Step4:Adobe Edgeのインストール

ダウンロードしたファイルを解凍したら、『Set-up.exe』ファイルがあると思いますのでダブルクリックしてインストールを開始してください。

インストールが終了しましたら、『完了』ボタンをクリックします。

以上でインストールは完了です。

Adobe Edgeのファイル作成と保存方法

インストールが終わりましたら、新規ファイル作成と保存方法を確認していきたいと思います。

Step01:「Adobe Edge」の起動

インストールが完了しましたら、「Adobe Edge」を起動したいと思います。windowsの場合は「すべてのプログラム」の中に『Adobe Edge Preview』がありますのでクリックしてください。もし見つからない場合はインストールしたフォルダ内に『Edge.exe』ファイルがあるのでこちらをクリックしても大丈夫です。※Macの方は『Edge.app』をクリックしてください。

Step02:新規ファイル作成

「Adobe Edge」を起動したら、新規ファイルを作成します。左上の『File』ボタンをクリックして『New』を選択してください。ショートカットは『Ctrl+N』で、他のアドビ製品と同じみたいですね。

Step03:画面の確認

表示された画面構成を確認してみます。尚、私自身も使い始めたばかりですので間違っている箇所などございましたら教えほしいです。よろしくお願いします。

※クリックすると等倍に拡大されます。

Step04:テキストの入力と表示

まず左上にある『T』ボタンをクリックしてテキストツールを選択してください。

テキストツールを選択したらステージをクリックして、表示された入力欄にテキストを記入してください。その内容がステージに反映されます。

Step05:ファイルの保存

次にファイルを保存したいと思います。左上の『File』から『Save』をクリックして保存先を指定してください。尚、ショートカットは『Ctrl+S』になっています。

Step06:保存したファイルの確認

最後に保存した先の構成ファイルを確認してみたいと思います。ファイル内には『index.html・index_edge.css・index_edge.js』と『edge_includes』フォルダ、そして『index.edge』が入っていました。

  • 『index.html・index_edge.css・index_edge.js』のファイルは今回作成した内容の『HTML・CSS・JS』ファイルです。
  • 『edge_includes』の中に入っているのはjQueryなどのアニメーションなどを実行するための核となるファイル郡です。
  • 最後の『index.edge』は「Adobe Edge」の作業ファイルです。開くことで保存した状態から作業を続けることができます。

実際にindex.htmlを開いてみると、ブラウザ(FireFox6.0)にちゃんと表示されました。

これらのファイルをサーバーにアップしたので良かったら確認してみてください。
ここまでのサンプルを見る

Adobe Edgeのアニメーションとイベント登録

ここまででファイル作成と保存方法を確認したので、次は簡単なコンテンツを作成してみたいと思います。

STEP01:新規ファイル作成後にステージサイズ・背景色を変更

新たに『Ctrl+N』(※左上のFileからNewでも同じです。)で新規ファイルを作成しステージサイズと背景色を調整します。

ステージサイズは画面左『Propertise』タブ内にStageという項目が表示されているので、下の画像を参考にWとHの値をそれぞれ変更してください。また、その右隣にある四角いボックスをクリックして背景色を変更します。サンプルでの色は『#4db6ff』の青系にしました。

ステージカラー

STEP02:ステージに矩形要素を配置

ステージのサイズを変更したら『Ctrl+S』(※左上のFileからSaveでも同じです。)で一度ファイルを保存しておきます。保存したらステージと同じサイズの矩形を配置します。

※クリックすると等倍に拡大されます。

ここで、ステージに設置した矩形のx,y位置を(0,0)としても綺麗にステージが隠れなくて戸惑いました。何回か触って気づいたのですがどうやら最初に矩形を設置した位置がその要素の基準位置になるようです。ステージ基準じゃないの?と思いつつ今回はプレビュー(Ctrl+Return)を繰り返してステージに重なるように設置しました。もし、ステージ基準にする使い方知っている方いましたら教えてください。

また、タイムラインからでもサイズや位置を指定できるようです。詳しくは上の画像をクリックして確認ください。

STEP03:テキスト要素をステージに配置

テキストツールを選択してテキスト要素を3っつステージに配置しました。下の画像も参考にしてください。(※テキスト内容はお好みでお願いします。)

テキストの配置

STEP04:テキストのアニメーションを作成

テキストの透明度を変更して順番に表示させるアニメーションを作成したいと思います。まずは各要素の透明度を0%にします。

透明度

続いてタイムラインのマーカーを1秒後にずらします。

ずらした位置でテキストの透明度を100%にします。するとタイムラインでアニメーションが設定されます。

※クリックすると等倍に拡大されます。

最後に各テキストのタイムラインをずらしていきます。タイムラインはマウスのドラック&ドロップで移動することができます。

ここまでのサンプルを見る

STEP04:背景のアニメーションを作成

テキストのアニメーションが完了したら背景が徐々に縮むアニメーションを追加したいと思います。

タイムラインで0.430の位置で幅10pxになるように設定し、『Properties』タブでイージング設定をデフォルトの『linear』から『swing』に変更しました。※イージングはjQuery 日本語リファレンスのjQuery Easingページで確認できます。

※クリックすると等倍に拡大されます。

続いてテキスト同様に背景のタイムラインをずらして完了です。

ここまでのサンプルを見る

STEP05:イベントの登録

アニメーションの完了の後に何かクリックやロールオーバーの処理を設定したかったのですが、dustboxxxさんの『Adobe Edge Previewでループ処理』の記事でアニメーションをループさせる方法が載っていたので、こちらを参考にアニメーションが完了後にjQueryでロールオーバーのアニメーションをを設定してみました。(※jQuery読込んでるから勝手にイベントつけても大丈夫ですよね?ちょっと不安ですが練習ということでつけてみました。)

$(window).ready(function() {
	$.Edge.symbol.get($("#stage"))._getTimeline("Default Timeline").addObserver({ onComplete: function() {
	   $('#stage').hover(function(){
			$("#Rect").stop().animate({width:'550px'},{queue:false,duration:100});
		}, function() {
			$("#Rect").stop().animate({width:'10px'},{queue:false,duration:600});
		});
	}});
});

これでイベント完了後にステージをロールオーバーすると背景が元のサイズに戻り、ロールアウトでまた縮むようになります。下のURLで最終的なコンテンツの完成を確認できます。

ここまでのサンプルを見る

まとめ

今回はじめてAdobe Edgeを使ってみて機能や使い勝手もまだ深く理解していないのと、パブリックプレビュー版ということもあると思いますが、Flashと比べたら機能性や完成度はまだまだな印象をうけました。ですが、独自のコードが無くHTML・CSS・JSが自動生成されるのは本当に魅力的だと思います。それに今はAdobe Edgeのみで作った場合はdiv要素で作らせますがp要素に変更したり複雑な入れ子の構造に対応するようになったらまた違う印象を受けたのかもしれません。

ブラウザごとの描画についてですが、Adobe EdgeのステージはWebkitを搭載しているようなのでCromeでの表示は綺麗なのですが、例えばFireFox6で見るとアニメーション時に矩形が綺麗に伸縮しないで一番下に色が残る現象を確認しました。

まだまだ浸透するには時間がかかると思いますが、Adobe Edgeの登場でHTMLで作る簡単なアニメーション作成は凄く早くなると思いますし、今後も凄く注目のツールの1つであるのは間違いないと思いました。

まだ使いはじめなので今後もいじりながら少しずつ覚えていきたいと思います。

他にも便利な使い方などありましたらぜひ教えてください。

参考サイト:

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事