eye-catch-no-image

AdobeよりCCシリーズのダウンロードが始まったので、気になっていたEdge Animateを弄ってみた。初感として何気に良い感じ(Hypeと二刀流すればある程度実制作もケアできそう。)だったので、実験がてらAmiten inc.サイトのお問い合わせボタンを作ってみた。パーツはものの数分で仕上がったのですが・・・wordpressに設置するにはプラグインが必要だったりで調べるのに一苦労だったので備忘録メモ。(早く日本語の開設が増えるといいですね〜。)

Edge Animate CCについて
アニメーションやインタラクティブコンテンツの作成するウンヌンかんぬん素敵なアプリ。詳しくはAdobeのサイト

下記より設置方法

1)まずは、Edge Animate CCでパーツを制作。

01
※Edge Animateでのファイルの作り方は、アプリ自体にレッスンがついてるのでそちらを参照のこと。とてもわかりやすい。

2)パブリッシュ設定画面にてAnimateデプロイメントパッケージにチェックを入れてパブリッシュ。

0203
すると、「名前 .oam」ファイルが生成されます。04これで、Edge Animateでの作業は完了。次は、wordpressでの設定。

3)まずは、wordpress/themes内の設置したい箇所へ下記コードを記述。Amiten inc.サイトではフッター部分に記載しました。

05

設置コード

4)WordpressでEdge Suiteプラグインをダウンロードして有効化。

06
すると、サイドバーにEdge Suite項目が追加される。

5)Edge Suite項目のManage欄で、先ほど制作した「.oam」ファイルをアップロード。

07

6)Edge SuiteのSettings欄で、Default Compositionのプルダウンで先ほどアップしたファイルを選択。

08

これで、サイトへとEdge Animateで制作したファイルが反映されます。
(このページ下部のお問い合わせページヘの誘導ボタン(ハートマークのもの)がサンプルデス。)
とりあえず、wordpress/themes内への設置法のみのご紹介ですが、投稿記事への反映方法の動画(英語ですが。汗)がAdobeサイトに上がっていますので参考にしてみてはいかがでしょうか。

動画は下記より↓
Episode 5: Spice up your WordPress Site with Edge Animate

さて、次はIEでの挙動確認。要件のあうプロジェクトがあれば実戦投入してみよう。

page
1 / 1