Animate の新バージョンが公開されました。今回は新機能が盛りだくさんです。
主な新機能については、レッスンパネル内にサンプルが提供されています。解説を見ながら実際に手を動かして動くサンプルを完成させることができます。時間があればぜひお試しください。
Edge Amimate のアップデートが公開されました。IE 11 への対応が目的の更新です。ダウンロードは、 https://creative.adobe.com/products/animate です。
まだ正式に公開されていない IE 11 ですが、あとからコンテンツを IE 11 のためにに置き換えるのも面倒そうですし、早めに更新するのが良さそうです。
これまでに Edge Animate CC で制作したコンポジションは、一旦 Animate 2.0.1 で開いて、保存して、パブリッシュすれば、IE 11 互換になります。
今回問題となった非互換性は、Animate がコンテンツのプリロードに使用する yepnope に起因するものです。Animate を更新すると yepnope の新しいバージョンからの修正が適用されます。
先日公開された Edge Animate CC のバージョンは 2.0 と、メジャーバージョンアップ扱いです。
古い話ですが、バージョン 1.0 公開時に予告されていた通り、無償での製品提供はバージョンアップにより終了となりました。
Edge Animate のバージョン 1.x とは異なり、バージョン 2 からは、有償 Creative Cloud メンバーシップの一部、もしくは単体のサブスクリプションとして提供されます。 （または、３０ 日の無償お試し版）
また、今後提供されるの製品アップデートは、Creative Cloud 経由のみとなります。つまり、今後の更新は、全て有償のサブスクリプションの一部という位置づけになるようです。
ところで、これまで提供されていたバージョン （1.0, 1.01, 1.5） をインストール済みの方は、今後もずっと使い続けることができます。ライセンスが期限切れになることはありません。
既にご存知の方も多いと思いますが、Adobe MAX 2013 の基調講演で、Edge Animate CC が、他の製品と同時に公開されることが発表されています。
基調講演では、Web 系の製品の話に割り振られた時間は 12 分だけでしたので、紹介された内容は、一部の製品の一部の新機能のみの限られたものでした。Edge Animate CC で追加される機能の情報が公開されていましたので、ご紹介しておきます。
基調講演でデモされていたモーションパスの機能を含め、以下の 4 つが主な追加機能となるようです。
Edge Animate のアップデートが公開されました。今回もまだ無償のまま使えるようです。Creative Cloud からダウンロードできます。
主な新機能は以下の通りです。表現力の強化がメインな感じです。
操作性に関する機能拡張もいくつか行われています。
Edge Animate の最初のアップデートが公開されました。更新版のバージョンは 1.0.1 となっています。
主要な変更点は以下の通りです。
更新は、アプリ内に表示されるバナーもしくは Application Manager 経由で行います。プレビュー版からの更新は出来ないので、ご注意ください。
それから、サポートされる環境は以下の通りです。
今回から、Edge の名前が変更されました。新しい名前は Edge Animate だそうです。
ということで、Edge Animate プレビュー 7 が Adobe Labs に公開されました。 （Edge Animate@Labs）
プレビュー 6 から 3 ヶ月近くの期間をかけただけあって、いくつも機能追加が行われています。また、サポートするシステムには OS X 10.8 が追加されました。ダウンロードはこちらです。
以前のバージョンの Edge がインストールされていたら、必ずそれをアンインストールしてから、プレビュー 7 のインストールを行うように注意してくださいとのことです。
今回の新機能で目を引くのは、オブジェクトの位置や大きさを % で指定できるようになったことです。まだバグが多いこともあり使い辛かったりはしますが、実用的なレベルになれば便利そうな機能です。
Edge のプレビュー版 6.1 が Adobe Labs に公開されました。 （Adobe Edge Preview@Labs）
数字からも分かるように、大きな変更はありません。FireFox 14 で以前のバージョンから仕様が変わったことにより、Edge で制作したアニメーションの一部が動作しなくなった、という問題に対応したものです。
ただし、代わりに、Chrome、Safari といった WebKit ベースのブラウザでの表示が乱れるケースがあるとのことです。HTML アニメーションが安心して使える日は来るのでしょうか。
プレビュー版 6.1 をインストールする前に、既存のバージョンをアンインストールする必要があるのでご注意ください。ダウンロードはこちらです。
ちょっと前に公開された Edge プレビュー版 6 （Adobe Edge プレビュー 版 6 公開） から追加された API のご紹介です。
最新の Edge ランタイムでは、Edge のシンボルから 2 つのイベントが利用できる様になりました。それぞれ、シンボルの生成時と削除時に発行されるイベントです。
creationComplete は、特にタイムラインを自動的に再生しない場合、初期設定を行うのに役立ちそうです。
他には特に変更は無いようでした。あまり大きな変更が無かったということは、正式に公開される日が近づいているということかも？しれません。
HTML5 のモーションデザインツール Edge のプレビュー 6 が Adobe Labs に公開されました。 （Edge@Labs）
今回から、日本語の UI が提供されるようになりました。今まで様子見だった人もそろそろ試し時かもしれません？ ダウンロードはこちらです。 （Edge@Labs Download）
ランタイムの API に若干変更があるようなので、以前のバージョンで制作したコンポジションはそのまま使わない方が良さそうです。
プレビュー 6 の主な新機能は以下のとおりです。
Fireworks の有名人の John Dunning が、Fireworks で制作したデザインレイアウトを、Edge が読み込める形で書き出す機能拡張が公開したようです。
http://johndunning.com/fireworks/mxp/Edge
MXP ファイルをダウンロードしてダブルクリックすると、Fireworks から利用可能になります。Fireworks を起動後、「コマンド」 → 「Edge」 → 「Export to Edge」 とたどると、Edge 用の HTML ファイルや JS ファイルが生成されます。
書き出し時には既存のファイルが上書きされるので注意が必要です。書き出したのをそのまま Edge で編集していた場合、再書き出しによりせっかくの修正作業が全て消えてしまうかもしれません。
書き出すフォルダの変更は、「Edge」 → 「Change Export Folder」 からできます。
先日公開されたばかりの Edge プレビュー 5 のアップデートの Edge プレビュー 5.1 が Adobe Labs に公開されました。 （Edge@Labs）
2 つのバグ修正が行われていて、全てのユーザにアップデートが推奨されています。
機能面の変更は特に無いようです。
Edge プレビュー 5 から、ランタイムも v 0.1.5 にバージョンアップしました。それに伴い追加あるいは置き換えられた API がいくつかあります。
プレビュー版 4 以前のバージョンで制作したコンポジションは、変更が必要なケースもあると思いますので、ご注意ください。
まず、新規に追加された API は、以下の 3 つです。いずれも、シンボルのインスタンスから利用するものです。
sym.getParentSymbol()
sym.getLabelPosition("ラベル名")
sym.createChildSymbol("シンボル名", "親要素名", インデックス)
最初の getParentSymbol() は、シンボルのインスタンスの親にあたる要素を返します。今までなかったのが不思議なくらいです。
HTML5 アニメーション作成ツールの Edge プレビュー 5 が Adobe Labs に公開されました。 （Edge@Labs）
HTML5 に対応しないブラウザのサポートなど、数多くの機能が追加されています。リリースノートによるとサポート環境は少し減りました。サイトの記述では変わってませんが、Vista をお使いの方は注意した方がよいかもしれません。
ダウンロードはこちらです。 （Edge@Labs Download）
プレビュー版 4 からランタイムが変更されているため、以前のバージョンで制作したコンポジションは、そのまま動かないこともありそうです。
プレビュー版 5 の主な新機能は、以下の通りです。
前回は、シンボル内の要素を利用する API をご紹介しました。jQuery オブジェクト、DOM 要素、Edge シンボルのインスタンス、が代わる代わる登場してややこしかったですね。
Edge は jQuery に完全に依存しているわけではありませんが、インタラクションが必要な場合は jQuery を避けて通るのは難しいかもしれません。今後 Edge の開発が進むにつれて、このあたり改善があるかもしれませんが。
さて、今回は、シンボル （sym） の外部の要素を取得する方法です。Edge には、同じコンポジション内の他のシンボルのインスタンスや、ページ内のコンポジションのインスタンスを取得する方法が提供されています。
前回の記事で書いたように、Edge のアクションが呼び出されると、引数に "アクションの定義されているシンボル" のインスタンスが渡されます。
function(sym, e)
{
// ここに必要な処理を記述する
}
ここで、具体的な例を確認しておきます。
例えば、MySymbol というシンボルのインスタンス MyInstance をステージ直下に配置して、MyInstance にアクションを定義した場合を考えます。
この場合、定義されたアクションは、ステージの定義の一部です （ステージもシンボルの 1 種でしたね）。 MySymbol の定義には含まれません。 従って、アクションの引数の sym が指すシンボルのインスタンスは、ステージ （stage） ということになります。
ちょっと紛らわしいでしょうか？ AS3 であれば、あるオブジェクトにイベントリスナを追加したとき、リスナにはそのオブジェクトの親オブジェクトが渡される、に近い状況です。
アクション内部では、sym すなわちシンボルのインスタンスを使って、様々な制御ができます。今回は sym から利用できる API をご紹介します。
コンポジション、シンボルに続いて、今回はアクションの話題です。アクションは、プレビュー 3 から追加された機能です。
Edge では、イベントの発生と紐付けて実行される処理を "アクション" と呼びます。一定の時間が経過したら表示を切り替えるとか、ユーザが画面にタッチしたら別の URL を開くとか、等の目的に使われます。
アクションはシンボルまたはシンボル内の要素に対して定義され、その実体は JavaScript で記述された関数です。通常は Edge のコードパネル内で記述することになると思われます。
記述されたアクションは、xxx_edgeActions.js ファイル内に保存されるため、後で別途修正することもできます。 コメントの削除は Edge の動作に影響するため避けましょう。
アクションを呼び出すイベントの発生元には、DOM、タッチ操作、タイムラインがあって、おのおの利用できるイベントが決められています。 Edge 内でアクションを定義する場合は、対象に応じて使用可能なイベントだけがリストされるので、いちいち覚えなくても大丈夫そうです。
Edge プレビュー 4 からサポートされた "シンボル" は、登場したばかりにもかかわらず、Edge コンポジションの中核を成す重要な要素です。
シンボルを作成するには、Edge ツール内でオブジェクトを選択した状態で ctrl-y を押して （あるいは右クリックして） "convert to symbol..." を選択します。
Edge では、"シンボル" を拡張したり組み合わせたりしてアニメーションを実現します。シンボルは、グラフィックス、タイムライン、アクション、などから構成されます。Flash のシンボルよりはちょっとシンプルな感じです。
それぞれのシンボルは、子のシンボルを持つことができます。子シンボルは、その状態を変化させてアニメーションに使われることから、"アクター" と呼ばれたりもします。
ということから分かるように、Edge のコンポジションは、ツリー構造をしています。ツリーの頂点は "ステージ" と呼ばれるシンボルです。Edge で新規にコンポジションを作成する場合は、まず、ステージだけの状態から始めることになります。
ステージ以外のシンボルは、コンポジション内で再利用可能 （複数インスタンスを使用できる） です。
Edge を使って制作するアニメーションを "コンポジション" と呼びます。Flash での SWF に相当するものです。
Edge で作ったコンポジションは、そのまま既存の HTML ファイルに組み込めます。もしくは、Edge で既存の HTML ファイルを開いて、その中にコンポジションを制作するという使い方もできます。
現時点の Edge プレビュー 4 では、複数のコンポジションを同時に扱うことができません。そのため、今のところ 2 つ以上の Edge のアニメーションをページに埋め込む場合は、個々にコンポジションを作成しておいて、HTML への組み込みは Dreamwaver なりテキストエディタなりで行うことになります。
さて、Edge でコンポジションを作成すると以下のファイルが作られます。
Edge プレビュー 4 が Adobe Labs に公開されました。昨年の秋にプレビュー 3 が公開されてから久しぶりの更新になります。 （Edge@Labs）
ダウンロードはこちらのリンクです。ダウンロードには Adobe ID が必要です。サポートされる OS は、以下の通りです。
時間をかけただけあって、今回はいくつもの新機能の追加やユーザビリティの改善が行われています。以下がその主な項目です。
