「スマホにも対応したいからFlashの代わりにHTML5でアニメーションを作って」と頼まれることありませんか? Flash感覚でタイムラインベースのアニメーションを作れる「Edge Animate」の基本的な使い方から実践的なコンテンツ制作の方法までを解説します。
アニメーションなどのHTML5コンテンツを手軽に制作できるオーサリングツール「Adobe Edge Animate」。前回は、Edge Animateで制作したトップバナーを既存のサイトに埋め込む方法を紹介しました。 今回は、Edge Animateでグラフアニメーションを制作します。Edge Animateを使えば、簡単にリッチなグラフアニメーションを作れます。また、PHPで作成した既存のページにアニメーションを埋め込んで、グラフの値を動的に変化させる方法も解説します。 完成サイトは以下のリンクを参照してください。 グラフアニメーションを制作する 最初に、Edge Animateで元になるグラフアニメーションを制作します。 Step 1. ステージを設定する Edge Animateを起動し、新規プロジェクトを作成しましょう。ステージの大きさは、幅880×高さ320pxです。
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
ウォルト・ディズニー・カンパニーでも伝説的と言われる9人のアニメーター「ナイン・オールドメン」のうち2人がフランク・トーマスとオリー・ジョンストン。キャラクターの感情表現を頂点まで極めたとされる2人が生み出した「キャラクターに命を吹き込む12の法則」が立方体などを使ったムービーとGIFアニメーションで公開されています。 THE ILLUSION OF LIFE http://the12principles.tumblr.com/ ディズニーアニメに出てくるキャラクターの動き12原則は以下のムービーからでも確認できます。 The illusion of life on Vimeo ◆01:SQUASH&STRETCH(引き延ばしてペチャンコにする) これはキャラクターが動いている時に重さと質量を感じさせるようにする効果。 ◆02:ANTICIPATION(予備的な行為) キャラクターがメイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く