Flashの代替?!Adobe Edge Animateは凄い vol.1

      2016/06/30

edge-animate_main

◇Adobe Edge Animate って何?

「HTML5アニメーション・オーサリングツール」
この言葉から分かる通り、HTML5のソースです。
ただ、画面はFlashなどのアニメーションツールに似てます。

edge-animate01

上の画面からキーフレームやJS、CSSフィルターを付けたりと色々遊べます。

JSが苦手な人にも有り難いことに、スニペットからワンタッチで入れることも出来ます。
edge-animate-js

名前を付けて保存をすると色々なファイルが出力されます。
画像では「onmouse」と名前を付けました。

edge-animate03

パブリッシュ「ファイル>パブリッシュ」すると、更にこんな感じのファイルが出来ます。

publish > web > 色々
edge_animate_publish

内部編集も外部編集もどちらも可能です。

既存サイトにモーションを追加することもアニメーション画像を追加することも出来ます。
シーン制御やギミックをつけることが出来、マウスの動きやmouseoverなどのイベントに応じてコンテンツが変化します。

※Flashの「ような」動きを一から作ることが出来ますがFlash(.swf)を「変換」することは出来ません。
変換ですと、Flash Professional CS6の拡張機能Adobe Falsh Professional Toolkit for CreateJSがあるようです。
どちらが良いというわけではなく、自分に向いている方をチョイスするのが良さそうです。

◇スマートフォンでも見れるの?

iPhoneや最近のAndroidはFlash非対応ですが、Edge Animateはソースファイルとなるので問題ありません。

以下、公式サイトでも明確に書かれています。

WebKitをベースにした環境でデザインするため、開発したコンテンツを最新ブラウザや各種モバイルデバイスで確実に表示できます。

(引用:Webデザインツール&サービス | HTML, CSS, JavaScriptなど | Adobe Edge)

そう。確実なんです!!
スマートフォンでも表示出来るなんて嬉しいです。

◇IE8以下のことを考えると使えないのでは?

HTML5と聞くと、
「対応していないブラウザがあるから使えないのでは?」
そう思う方も少なくないかと思いますが、

なんと!

IE8以下(下位ブラウザ)もサポートされています!
2つ方法があります。

方法1:Internet Explorer 向けの Google Chrome Frame 拡張機能を使用
Google Chrome Frameへ誘導することでIE6・IE7・IE8のレンダリングをGoogle Chromeと同じにし、
表示させることが出来ます。

方法2:動かない画像(ポスターイメージ)を表示し、コンテンツを見せる。
任意に指定することが出来ます。

※どんなブラウザでも真っ白な画面が表示されるなんてことは起きません。

◇Flashとの違い

大きな相違点として、Edge Animateはカーブに弱いこと。
あとは、Flashよりもまだ機能が少ないようです。
(当方Flashの機能についてあまり得意ではありません。)

改名前の「Edge」を試してみて、出来そうなことが機能としてなくて満足できなかったあの日から1~2年。
こんなにも素晴らしいものがリリースされるとは思っていなくて驚きました。
この劇的改善からも今後のアップデートに期待出来ます!

◇無料です。(2013年3月現時点では)

Adobe Edge AnimateはAdobe Creative Cloudに登録すると使えるツールです。
無償メンバーシップでもフルで機能が使えます。

他のEdgeシリーズの無料/有料のご確認はこちらから

edge-animate-free

◇どんな作品を作れるの?

サンプルを見た方が言葉で説明するよるも早いですね。
色々紹介します。

Edge Animate サンプルショーケース(Demo)

URL先では以下4つのサンプルが紹介されています。

edge-animate-cracidae
ゲームです!始め気づかなくて0点でしたXD

edge-animate-c
こんなことも出来るのかと創作意欲が上がります。

edge-animate-map
シンプルな動きですぐに真似して使えそうで参考になります♪

edge-animate-bubble
動きが滑らかで惚れ惚れします。

以下からファイルをDL出来ます。どのように作成しているのか参考になりますね!
Edge Animateサンプルショーケース

他にはこちらもあります。

文字がジャンプ
edge-animate-moji

忍者

edge-animate-Fruit-Ninja

さらに、おすすめサイトとして、
Edge Animateで作るHTMLモーショングラフィック

ここでモーショングラフィック作成方法が分かりやすく紹介されており、
サンプルをダウンロードすることも出来ます。

◇楽々使用!Webフォント

※Adobe Edge Codeに統合されているため、Edge Animate内から直接呼び出し組み込むことが出来ます。
お手軽です〜
ただし、β版は今のバージョンほど簡単には組み込めません。
やり方はありますが、新しい方を入れ直した方が他のことも考えると楽で時間短縮でその分得です。
β版をアンインストールの後に新しい方をインストールして下さい。
Adobe Application Managerからもアンインストールするよう説明文が表示されます。

このEdge Web Fontsの凄いところは、組み込みやすさだけでなく、
・代替フォントを指定出来るところ
・500以上ものフォントの多さ
・商用利用可能で無料

ですです。

◇ソース、汚くなるんじゃないの?

DOMの操作で作り上げていくもので、classが追加され、数行ごそっと入ります。

◇どうやって勉強しよう?

新しいもののネックなところは、昔からあるものに比べて学習材料が少ないところですよね。
Edge AnimateはFlashやAfter Effectsの操作に似ていますが、それらアニメーションツールを扱ったことの無い人には少しばかり難しいかもしれません。
上で挙げたサンプルでも勉強出来ますが、、、
土台からしっかり学びたい時には勉強しづらいかもしれません。
そういう私もアニメーションツール系は初心者で、Edge Animateのピン操作は手探りで四苦八苦でした。
そんな私のような初心者でも、一通りの使い方を学べるのはEdge Animateを起動した後に出てくるこの画面

edge-animate02

(普通の紹介ですみません。)

他に学習出来るサイトですとやはりAdobeさんのサイトが豊富です。

Adobe Edge ヘルプとチュートリアル

Adobe TV
英語ですが、見てるだけで学べます。

特にアインシュタインのビデオは可変に出来たり画像が変わったり・・・
面白かったです♪(Adobe Edge Animate: Creating and Importing)

可変についてはこちらの記事でも分かりやすく説明されています。

Edge Animateでレスポンシブなバナーを作ろう

アインシュタインのビデオにはない、コンテンツ幅に応じて表示を変える方法も紹介されています。
難易度高そうですがやってみたいです!

あとは、FAQページがEdge Animateについて分かりやすく説明されています。
FAQ

ちなみに、余談ですが・・・
みま&たまで主催しているハンズオン式勉強会の次題として、この「Edge Animate」を取り上げることが決まりました★

日時と場所はまだ未定ですが、や・・・やるんだからね!!

このブログでもAdobe Edge Animateのダウンロード方法について説明し、
機能や操作方法に焦点を当てて取り上げたいと考えています。

ただ、私の傾向として半年放置することが容易に考えられるので、
続きを読みたいと思って頂ければ「いいね!」など押して頂けますと、やる気に繋がり頑張れます ;D

 -Web制作

スポンサー リンク

  関連記事

jsCafe12回目に参加してきました。

jsCafe12回目に参加してきました。
今回はNode.js入門(ハンズオン)とLESSについてでした。
メモをとったところ、感想を書き連ねたいと思います。

MAMPにバーチャルホストを設定してWordPressのサイトを見る方法

MAMPは数年前から使っていましたが今のMacではデフォルト設定のままで、そこにWordPressを

Adobe Edge Animateをインストールしよう vol.2

前回、大絶賛したAdobe Edge Animate
今回はインストール方法をご説明します。

NetBeansを使いこなそう!ーインデントタブで空白文字を入れない方法ー

<使用バージョン:NetBeans IDE 7.1> Netbeansは無償のオープンソースソフトウ

CSS Nite 「HTML5+CSS3 Web Camp 2012」行ってきました。

CSS Nite in Shinagawa, Vol.2「HTML5+CSS3 Web Camp 2

【it_ichigo開催】第1回「いまはじめよう Adobe Edge Animate」

勉強会を開催しました。内容はAdobe Edge Animateです。ご参加頂いた方々、協力して下さった方々、ありがとうございました。

CSS Sprite × スマフォでハマったこと

複数の画像を一つにまとめることでHTTPリクエストを減らし、表示速度を上げる手法「CSS Sprit

jsCafe勉強会でjQuery animationについて発表させて頂きました。

jsCafe勉強会にてjQuery アニメーションについて発表させて頂きました。
この勉強会は、約2週間ごとに行われ次の発表者を決めて準備するといった、ゼミのような特徴があります。
主催者の方の実演(コンソールとかconsoleとか)されながらの説明がとても面白く興味テンション全てが上がるような勉強会です。

思わずWeb APIを使った「何か」を作りたくなる★Web API紹介

9/21にWeb APIを使ってWebサービスを作るハッカソンを行います!!
色々と調べたのでブログ記事にまとめようかと思います。

twitterのウィジェットデザインをカスタマイズしてみた

ウィジェットのデザインをcssなどで変更したのでその備忘録に。 twitterは大きく分けると以下の

スポンサー リンク

  Comment

  1. プログラミング参考サイト | android manifest configChanges より:

    […] Flashの代替?!Adobe Edge Animateは凄い vol.1 […]

  2. […] Flashの代替?!Adobe Edge Animateは凄い vol.1 […]

  Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スポンサー リンク

今までとこれからについて – 2016年

目次1 個人事業になるまでの経緯2 Webの仕事はどんなところからスタートしたか。3 個人事業はどう

はじめてのハッカソンでうまく進めるために事前に説明していること。

3年目に突入したはじめてのハッカソンは次回で16回目を迎えます。 どう運営すれば良いかあれこれ悩む日

瀬戸内海にある島★小豆島シャルソンに参加してきました!(小豆島ギルドハウス!!)

目次1 小豆島(しょうどしま)に行ってきました2 小豆島シャルソン2.1 世界一狭い海峡が小豆島に!

2015年を振り返って。

2015年は変化の年でした。 今年始めたこと★ 1. 東京から福岡へ10年ぶりに戻りました。 2.

MovableType.netでアロマのサイトをリニューアルしました。

お久しぶりです。前回の更新から結構経ってしまいました。 よく人から「忙しそう」と言われますが、フリー