Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Flashプログラマーによる「Adobe Edge」プレビュー
~インストールから基本的な操作方法まで

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/03/08 14:00

 Adobe Edgeは、HTML5ベースのアニメーション、インタラクションを、Flashアニメーションに近い感覚で作成できるオーサリングツールです。現在、使用期限付きですが、無償で利用できるプレビュー版が公開されています。ベータ版以前の段階ですので、まだ一部の機能しか使用できませんが、Flashとの比較も交えつつ、その機能や操作方法を紹介していきたいと思います。

目次

インストールと起動

 Adobe Labsから、Adobe Edge(以下、Edge)のインストーラーをダウンロードします。今回使用するバージョンは、preview 4(Windows)です。ダウンロードには、Adobe Account(無償)の作成が必要です。Edge以外にも、様々な製品の体験版などがダウンロードできるので、作っておいて損は無いと思います。ダウンロードしたzipファイルを展開し、Set-up.exeを実行してインストールを開始します。利用許諾契約書に同意し、必要があればインストール先を変更して、インストールボタンをクリックしてください。インストールが完了したら、スタートメニューの「Adobe Edge Preview」を選択して、起動します。

Edgeの基本操作

新規作成~保存

 起動後の画面は以下の通りです。

起動直後の画面
起動直後の画面

 この状態ではほとんど何も操作できないので、とりあえず新規にファイルを作成します。[Get Started...]パネルの[Create New]をクリックするか[File]メニューから[New]を選択します。[Get Started...]パネルの位置に[Untitled-1.html]というパネルが現れました。

新規HTML作成
新規HTML作成

 まだ何も作り込んでいませんが、いったんファイルを保存します。保存先には、とりあえず新しくディレクトリを作って、そこを選択します。

 Edgeは、HTMLファイルだけではなく、付随するJSファイルやサブディレクトリをいくつか自動的に作成します。これらの構成を把握しないまま、迂闊にデスクトップなどに保存すると、どれがEdgeに関係するファイルなのか分からなくなってしまう可能性があるので、専用のディレクトリを用意した方が良いでしょう。

作成されたファイル群
作成されたファイル群

 いくつかファイルが作成されました。このうち、拡張子が「.edge」のファイルが、Edgeに関連付けされています。もしこのファイルをいったん閉じた後、再度編集を開始する場合は、拡張子が「.edge」のファイルを開くと、関連する一連のHTMLやJSなどのファイルを自動的に読み込んでくれます。

各パネルの役割

 実際に使っていく前に、画面を構成しているパネルについて説明しておきます。

  • ツールパネル

     メニューバーの下に7個ボタンが並んでいるのが「ツールパネル」です。Flashや、各種ペイント・ドローツールと比較すると、かなり少ないです。今後のバージョンでどのようになっていくかは分かりませんが、現段階で使用できるツールは、「選択」「変形」「矩形描画」「角丸矩形描画」「テキスト描画」の5個です。右側の2つは、塗りの色と線の色を指定するパレットを表示するボタンです。

  • プロパティパネル

     画面左側のパネルは、プロパティパネルです。選択ツールで選択中の要素のプロパティを編集できます。何も選択していない場合は、HTMLのタイトルと、最上位要素であるステージのプロパティが表示されます。

  • エレメントパネル

     画面右側のパネルは、エレメントパネルです。ステージと、ステージ上に配置されている要素が表示されています。このパネル上で、それぞれの要素の重なり順をドラッグして変更したり、一時的に非表示や編集ロック状態にしたりする機能があります。Flashのタイムラインパネルにあった機能とよく似ています。

  • ライブラリパネル

     エレメントパネルの下にあるのは、ライブラリパネルです。読み込んだ画像や、シンボル化した要素がパネル内に表示されます。Flashではおなじみのシンボル化については、後ほど説明します。

  • タイムラインパネル

     画面下側のパネルは、タイムラインパネルです。要素のトランジション(状態遷移 ≒ アニメーション)の編集を行う機能を持ちます。Edgeの中心となる機能がこのパネルにあるため、少し複雑な操作が必要ですが、後ほど詳しく解説します。Flashとは異なり、タイムラインの行はレイヤーではなく、トランジションを表しています。横軸は、Flashと同じくフレームを表していますが、Edgeにはフレームレートの概念は無いため、目盛りの数字はフレーム数ではなく経過時間を示します。

パネルの説明
パネルの説明

 以上のパネルは、パネルタイトル部分をドラッグすると自由に移動できます。また、×マークをクリックすると非表示になります。非表示になったパネルは、Windowメニューから選択すると再度表示できます。レイアウトを初期状態に戻したい場合は、Windowメニューの一番下の[Reset “Default”...]を選択します。

 また、[New Workspace...]を選択すると、現在のレイアウトを自分のワークスペースとして保存できます。このあたりの操作は、近年の他のAdobe製品と大体同じです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 石上 慎太郎(イシガミ シンタロウ)

    クラスメソッド株式会社(http://classmethod.jp)所属ソフトウェアエンジニア。 主にAdobe Flash Platformの各種技術を用いたユーザーインターフェイス設計/実装を担当している。 学生時代よりFlashをこよなく愛すプログラマー。

バックナンバー

連載:Flashプログラマーによる「Adobe Edge」プレビュー
All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5