Cafi Netつながる情報技術

HTMLアニメーションの作り方

Adobe Edge Animate CC の使い方を解説します。

HTMLアニメーション | Edge Animate CCをダウンロード | Adobe&HTML

作成したサンプル

解説で作成したスライドショーはこちらです。

スライドショー(レスポンシブ Web デザインに変更)はこちらです。

イラストから作成したアニメーションはこちらです。

アクセサリーの商品紹介ページ(サンプル)はこちらです。

Adobe 公式サイトの紹介

Learn Edge Animate CC | Adobe TV
Adobe Edge Animate CC の使い方を動画で学習できます。

バナーデザインチュートリアル | Edge Animate CCでWebバナーを作成する方法
こちらも、Adobe Edge Animate CC の使い方を動画で学習できます。

Adobe Edge Animate とは

Adobe Edge Animate とは、アニメーションコンテンツを作成するソフトウェアです。

アニメーションコンテンツは HTML・CSS・JavaScript を利用して作成しますが、これらの言語が分からなくてもアニメーションを作成できます。

パーツを配置して設定を行っていくだけで、アニメーションコンテンツが作成できるように作られています。

※直接コードも編集できるので、HTML・CSS・JavaScript を理解していた方が利用の幅は広がります。

JavaScript を利用しているので、多くの環境に対応できます。

つまり、Android・iOS(iPhone・iPad)・Google Chrome・Internet Explorer・Firefox・Safari などに対応したアニメーションコンテンツを作成できます。

※Internet Explorer 6・7・8 といった HTML5 非対応ブラウザには、Google Chrome Frame のダウンロードをナビゲーションするといった対応が設定できます。

また、ピクセル単位ではなく、パーセント単位でデザインすることで、レスポンシブ Web デザインにも対応することができます。

Web 用に最適化して書き出すこともできるので、ウェブコンテンツの作成に便利なソフトウェアです。