Creative Edge School Books

CREATIVE EDGE SCHOOL BOOKS 08

Pocket Guide Series

Introduction

Edge AnimateはFlashが担ってきた役割の一部を代替する

Edge Animateで作成したコンテンツは古いAndroidでも動く

レスポンシブ・ウェブデザインについて

たんに縮小するだけのレスポンシブ対応は逆効果の場合もある

Technical Description

Edge Animateの

レスポンシブ対応機能について

パブリッシュ設定について

Example

Sample01

固定レイアウトのページを読み込む

Sample02

リキッドレイアウトのページを読み込む

Sample03

Edge Animateで作成したコンテンツをウェブページに組み込む

Sample04

Edge Animateのパッケージファイルを

活用する

Sample05

複数のコンテンツをウェブページに組み込む

Sample06

レスポンシブ対応のコンテンツをウェブページに組み込む

Adobe Edge Animate CC 2014

スマートフォン対応

レスポンシブアニメーション完全習得

by YUUJI SAKAI 境祐司

EBOOK: Web

Adobe Edge Animete(エッジアニメート)は、モバイルに対応したコンテンツ制作のための「Adobe Edgeツール&サービス」の一製品で、ウェブアニメーションやインタラクティブコンテンツを制作するためのオーサリングツールです。

 

あらかじめ記述されているコードを選択しながらプログラミングできるコードスニペット機能がありますので、JavaScriptの知識は必要ありません。Adobe Museを使っている紙媒体のデザイナーやFlashで作品をつくっていたタイムライン派のクリエーターなど、スクリプトのスキルがない方でも使用することができます。

※Flashと同じように、JavaScriptが使える方はさらに高度なコンテンツ制作が可能です。

Edge Animteで実現できること:

ウェブの標準技術を使ったモバイル対応のアニメーションやインタラクティブコンテンツを制作したい

Designer Spotlight - Adobe Edge Animate Showcase

アプリ開発やウェブサービス開発などの上位工程で、実際に「動く」プロトタイプをスピーディに作成したい

※Edge Animateでプロトタイプ

メディアサイトや企業のプロモーションサイトなどで効果的なインパクトのあるインフォグラフィックを作りたい

ウェブの標準技術で、アプリと同等の表現を取り入れたウェブマガジンやインタラクティブブックを作りたい

※Edge Animate を使用

博物館や美術館などのキオスク端末向けコンテンツやイベント用のインタラクティブコンテンツを制作したい

※Edge Animate を使用

サンプル例

本教材の内容について

本教材は、テーマを絞り込み、詳細に解説するポケットガイドシリーズの第一弾です。

通常の解説書の1章分に相当するコンパクトな内容になっています。

「Adobe Edge Animate CC 2014 レスポンシブアニメーション完全習得」は、Edge Animateで作成したHTMLコンテンツのパブリッシュ、およびウェブページに組み込む方法について解説しています。

 

すでに基本操作が習得されている前提で書かれていますので、Edge Animateの基礎知識については解説していません。基本操作に関しては、どなたでも無料で学べるオンライン講座「4時間で学ぶ Adobe Edge Animte CC[基礎編]」をご活用ください。

 

ポケットガイドシリーズは、Web版とサンプルデータがセット、概論が中心のものはEPUB版で提供されます。本教材は、Web版とサンプルデータです。

Web版は、HTMLで構成されており、各ページにサンプルのリンクがありますので、動くサンプルを実際に確認しながら学ぶことができます。

 

ブラウザーは、Google Chrome、Firefox、Safari、IE 10以降、Operaを使ってください。Web版のデータをサーバに置いて、スマートフォンやタブレットで閲覧してもかまいません。iOSやAndroidのスマートデバイスなら、サンプルも確認できます。

Edge Animate の使いどころ

Edge Animate は、ウェブアニメーションやモーショングラフィック、インタラクティブコンテンツなどをHTMLで表現するためのツール。レスポンシブ対応の機能も搭載されていますので、レスポンシブウェブデザインのページに組み込むことも可能です。

ただし、固定幅のコンテンツでも、デスクトップ、スマートフォンどちらにも同等のエクスペリエンスを提供できます。レスポンシブが必ずしもベストではないケースもあります。

Appleのサイトは、レスポンシブデザインではありませんが、スマートフォンでアクセスすると、片手で持つ(縦向きで使う)デバイスに適応した、見やすく、効果的なデザインを表示します。

もし、たんに伸縮するだけのレスポンシブデザインなら、製品のインパクトに欠け、ビジュアルで訴求することもできません。Edge Animateであれば、コンテンツのメンテナンス性も高く、2種類のデザインを作り分けることも容易です。

舞台「紫式部ダイアリー」の特設サイトでは、ズームインアウトを使ったビジュアルや視差効果を採用し、視覚表現で訴求している。

紫式部ダイアリー|PARCO STAGE

Edge Animate は、Flashが担っていた領域をモバイルで代替可能な機能を持っています。プロモーションのための「特設サイト」やインタラクティブコンテンツ、ウェブアプリのプロトタイプなどで威力を発揮します。

Edge AnimateはDOMベースなので、3D表現などの高度な処理には、あまり適していません(HTML5 Canvasを使ったほうがよいでしょう)。

例えば、特設サイト(例:紫式部ダイアリー)の動的な表現を駆使したヒーローや視差効果と連動したモーショングラフィックなどは、得意領域です。映画や舞台などの、作品の世界観をビジュアルやモーションで伝えるような期間限定サイトで、Edge Animateは役立ちます。

デモ版のダウンロード

本教材は、サンプルデータが多いため、参照しながら学べるように、Web版で提供されます。教材もサンプルもHTML、JavaScriptですから、特に注意することはありませんが、念のために、確認用のデモ版(Edge Animateのサンプル)を用意しました。

※サンプルの閲覧は、IEの場合、10以降です。使用されているIEがバージョン9以下の場合は、Google Chrome、もしくはFirefoxを使用してください。

デモ版のダウンロード

Demo.zip/2.6MB

フォルダの中の「index.html」をブラウザーで開いてください

リリース日:2014年11月26日

価格:400円(税込)

Web版とサンプルデータがセットになっています

 

電子書籍の扱いになっていますが、読み物ではなくサンプルデータで構成された「教材」です。パブリッシュとウェブページ組み込みに絞り、Edge Animateを使いながら確認していく(書籍の1章分程度のコンパクトな)内容になっています。

購入終了

ボタンをクリックすると購入ページに移動します

※銀行振込をご希望の方は問い合わせフォーム、もしくは[ebookcast@gmail.com]までお知らせください

トップページに戻る

Open Education Platrorm - Creative Edge School

The Future of Design Digital Publishing Team

株式会社ズオン 東京都中野区2-30-9 ツバセス中野坂上 333

ebookcast@gmail.com

© 2014 The Future of Design Digital Publishing Team