スマート プレゼンター®でセミナー撮影
この講座は、Adobe Edge Animate CCを使用し、フラッシュを使わないでHTMLのインタラクティブなアニメーションを作成し、また、作成したコンテンツを、レスポンシブなレイアウトにしてタブレットデバイスで表示する、ということを目標に進めていきます。

今回は、全体の流れの説明をいたします。

講座全体の流れ

この講座の全体の流れは以下を予定しています。
  • 第1回 開始とステージの設定
    作成を始めてみましょう
  • 第2回 コンテンツの作成
    ビジュアルを完成させましょう
  • 第3回 Edge Web Fonts
    フリーのWebフォントを使ってみましょう
  • 第4回 アニメーションの基本
    簡単なアニメーションをつくってみましょう
  • 第5回 シンボルとアニメーション
    少し難しいアニメーションに挑戦してみましょう
  • 第6回 アクションの設定
    クリックやドラッグ等、簡単な操作で、もっと複雑なアニメーションをつくってみましょう
  • 第7回 レスポンシブレイアウト
    スマホにもパソコンにも見やすいレイアウトで作成しましょう

各回をいくつかの記事に分けてお届けいたします。
この講座に必要なファイルはこちらからダウンロードできます。

完成例を見てみましょう。
EdgeAnimate完成例
下に配置したボタンを押すと、対応したテキストが、横からスライドインしてきます。

また、ブラウザのスクリーンサイズを変更すると、
コンテンツがそれに合わせて、大きくなったり小さくなったりして、サイズが変化します。
このように、スクリーンサイズに応じて柔軟に変化するレイアウトを、レスポンシブレイアウトといいます。

レスポンシブレイアウト

モバイルファーストという言葉をご存知でしょうか。
モバイルのデザインを念頭において、webページのデザインをするという概念です。

昨今webページは、PCに限らず、タブレットやスマートフォンで見られる機会が多くなってきたため、
レスポンシブなレイアウトでwebページを作ることが求められることが多くあります。

この講座では、このレスポンシブでかつインタラクティブなアニメーションを作成することが最終目標です。

では、次の記事では、EdgeAnimateCCの画面を見てみましょう。
いくつかの領域名を説明しますので、今後の講座を見ていただく上で必須の記事となってきます。

<前のトピックへ || 次のトピックへ>



各種IT教材と販促支援物の制作承ります

講義、講演会の撮影承ります