2013年12月16日月曜日

PHPで動的に表示できるHTML5グラフアニメーション

 アニメーションなどのHTML5コンテンツを手軽に制作できるオーサリングツール「Adobe Edge Animate」。前回は、Edge Animateで制作したトップバナーを既存のサイトに埋め込む方法を紹介しました。
 今回は、Edge Animateでグラフアニメーションを制作します。Edge Animateを使えば、簡単にリッチなグラフアニメーションを作れます。また、PHPで作成した既存のページにアニメーションを埋め込んで、グラフの値を動的に変化させる方法も解説します。
 完成サイトは以下のリンクを参照してください。
完成サイト。画像クリックでサンプルを表示します
完成サイト。画像クリックでサンプルを表示します

グラフアニメーションを制作する

 最初に、Edge Animateで元になるグラフアニメーションを制作します。

Step 1. ステージを設定する

 Edge Animateを起動し、新規プロジェクトを作成しましょう。ステージの大きさは、幅880×高さ320pxです。
ステージの大きさ
ステージの大きさ
 ステージの色は白(#ffffff)に設定します。
ステージの大きさ
ステージの色


...続きはこちら >>
http://ascii.jp/elem/000/000/839/839892/
─情報元:Edge Animateで作るHTML5リッチコンテンツ入門サイト様─