
Adobeの新しいWebモーションとインタラクションデザインツール「Edge」がプレビュー版として公開c
Adobe は本日、「Flash for HTML5」Web デザイン ツール Edge のベータ版をリリースしました。
Adobe® Edge は、HTML5、JavaScript、CSS3 などの Web 標準を使用して、デザイナーが Web サイトにアニメーション コンテンツを導入できるようにする新しい Web モーションおよびインタラクション デザイン ツールです。
このバージョンの Edge は、主に、デバイスやデスクトップ上で美しく実行されるリッチなモーション デザインを新規または既存の HTML プロジェクトに追加することに重点を置いています。
- Edge の描画ツールとテキスト ツールを使用して新しいコンポジションを作成します。
- SVG、PNG、JPG、GIF ファイルなどの一般的な Web グラフィックをインポートします。
- タイムラインエディターを使えば、アニメーションを簡単に演出できます。位置、サイズ、色、形状、回転などをプロパティレベルでアニメーション化できます。
- CSS ベースの HTML レイアウトの整合性を維持しながら、既存の HTML ファイルにモーションを加えて活気づけます。
- トランジションをコピーして貼り付け、反転し、25 種類を超える組み込みのイージング効果から選択して創造性を高めることができます。
[youtube=http://www.youtube.com/watch?v=8FnNtX73v8k]
以下に 2 つのサンプル ビデオと機能の詳細を示します (The Loop 経由)。
特徴 | 説明 |
---|---|
直感的なユーザーインターフェース | ユーザーインターフェースは、ステージ、タイムライン、そして要素とプロパティ用のパネルで構成されています。After EffectsやFlash Professionalといった、クラス最高のツールでお客様にご好評いただいている機能に着目しながらも、革新的な使いやすさを実現しています。アニメーションとタイミングは、WebKitベースのステージ上で制御することも、タイムライン上で直接プロパティを微調整することもできます。また、個々のオブジェクトまたは複数のオブジェクトを素早く編集することも可能です。 |
アニメーションコンテンツを視覚的に作成する | 基本的なHTMLビルディングブロック、テキスト、そしてインポートしたWebグラフィックを使って、ゼロから新しいコンポジションを作成できます。EdgeがjQueryベースのアニメーションフレームワークにネイティブに適用する、様々な変換オプションやスタイル設定オプションを使って、オブジェクトを操作できます。 |
既存のHTMLコンテンツにモーションを追加する | 既存のHTMLウェブドキュメントにモーション要素を追加します。Edgeはすべてのアニメーションを別のJavaScriptファイルに保存し、元のHTMLとEdgeのアニメーションコードを明確に区別します。Edgeは、生成したJavaScriptファイルとCSSファイルを参照するために、HTMLコードに最小限の変更を加え、邪魔にならないようにします。 |
Webグラフィックファイルをインポートする | SVG、JPG、PNG、GIF ファイルなどの既存の Web グラフィックをインポートします。 |
標準ベースの出力 | EdgeはHTML、CSS、JavaScriptファイルをネイティブに読み書きします。Edgeで生成されるアニメーションコンテンツは、CSSベースのレイアウトを維持するJavaScript Object Notation(JSON)データ構造で表現されます。JSONはJavaScript用の読みやすいフォーマットスタイルであり、ドキュメントとアニメーションコンテンツを個別に操作する際の柔軟性を高めます。 |
デスクトップとデバイス上の信頼性の高いコンテンツ | Edge で作成されたアニメーション コンテンツは、iOS および Android プラットフォーム、WebKit 対応デバイス、Firefox、Chrome、Safari、Internet Explorer 9 などの一般的なデスクトップ ブラウザーで確実に動作するように設計およびテストされています。 |
[youtube=http://www.youtube.com/watch?v=mCjBxzaRwUM]
[youtube=http://www.youtube.com/watch?v=HqnwtVLdx_M]
havebin.com を Google ニュース フィードに追加します。
FTC: 収益を生み出す自動アフィリエイトリンクを使用しています。詳細はこちら。