WCAN mini AS vol.9でしゃべりました。今回は「アニメーション」がテーマ。昔得た知識と左の画像のようなのが簡単に作れるツールを作りました。詳細は下の方に…。
そもそもアニメーションって
animation（アニメーション）は、ラテン語で霊魂を意味するanima（アニマ）から由来しており、生命のない動かないものに命を与えて動かすことを、意味する。
アニメーション - Wikipediaには上記のように書いてあって、ll_koba_llさんに先に言われちゃったけど、アニミズムと語源は同じ。
１コマ１コマではただの静止画だったりグラフィックだったりするものが、パラパラとコマを動かすことで、あたかもそこに生命を宿しているかのごとく生き生きと動き出すってことだと思います。
初期のアニメーション作品の紹介
アニメーションの基本的な部分を見つめ直すために、初期のアニメーション作品を紹介しました。
ソーマトロープ 1824年
円形の紙の表と裏に違う絵が描かれており、紐でくるくるとまわすことで、絵がパラパラと動くものです。２コマでもアニメーションとして成立する好例だと思います。
フェナキスティスコープ 1831年
これも円形の画用紙のような厚手の紙にこのように絵が描かれており、鏡に向けてくるくるとまわしながら、スリットから鏡をのぞくとイラストがアニメーションするものです。例えば映写機なんかを思い浮かべてもらうと分かりやすいのかなと思うんですが、あれって、ものすごいスピードで光が点滅しているから流れてくるフィルムが映像として投影されているわけじゃないですか、その原理をわかりやすく教えてくれる装置だと思います。
リュミエール兄弟映画の発明 1895年
初期の段階でコンテンツとしてお笑いが入ってるってのが興味深いです。日本にも来てたりするし、コンテンツの豊富さがリュミエールを有名にしたような気がします。
ファンタスマゴリー 1908年
ブラックトンに影響を受けたといわれるエミール・コール。シリーズもので150本、全作品で200とか400作品とか言われているらしいです。みればみるほどよくできてる。フランス。
恐竜ガーティ 1914年
こちらはアメリカのイラストレーターのウィンザー・マッケイの初の興行を目的とした作品。画力が半端なくて、この作品はまだセルがあった時代ではないので、動かない背景も一枚一枚描いているようです。
アニメーションの魅力
およそ100年前の作品なんですが、アニメーションは誕生したこの段階ですでに基本的な部分は完成されていると言えるのではないか、つまり紙とペンと撮影装置があれば簡単に作ることがアニメーションの最大の魅力だと考えました。
ASでアニメーションを作っていると陥りやすい罠
ASでアニメーションを書いていると、Tweenerに頼ってしまったり、数式の計算で動きをつけたりするので、手描きの生き生きとした表現・動きというのが再現しずらいのかなと思いました。
シンプル手描きアニメーションツール
そこで、もう少し手描きの楽しさみたいなものを実現できないかなと思って、手描きアニメーションツールを作ってみました。
遊び方
- ひとふでがきのアニメーションツールです
- クリックして描いて離すと１フレームになります
- アニメーションは２フレーム書くと自動で再生されます
- スライダーよりスピードを調節できます
- 色の変更より色をランダムに変更できます
- クリアボタンを押すと全消去できます
- gif書き出しよりアニメーショGIFに書き出しできます（フレーム数が多いと途中で処理が中断してしまう可能性もありますのでご注意を）
- ペンタブレットを使うと描きやすいです
- 別ページで開きたい場合はこちらから
ソース
http://ra66it.net/lab/ex200812/drawAnimation/drawAnimationEx.zip
GIFに書き出す部分はAS3 GIF Animation Encoding Class 0.1 [ by Thibault Imbert ] < ByteArray.org にある as3gif を利用しました。
サンプル
試しにいろいろ描いてみました。GIFに書き出すと色が一部おかしかったり、そもそもスピードも微妙に違うような気がしますが、おもしろい感じにはなったのかなと思っています。
参考資料：
IAMASのCGI特論に毎年来られている大口孝之さんの資料は内容がめちゃめちゃ充実してます。ちなみにCGI特論、2009年1月20日（火）は倉地紀子さん（CGテクニカルライター・ジャーナリスト／CGWORLD記者）による「映画におけるコンピューターグラフィックスの最新の動向 2」のようです。
シンプリシティの法則
作る直前に読んでました。
tags：*ソース WCAN mini AS アニメーション ツール
WCAN mini AS vol.8はFFmpegをやります。それで今回は勉強会のバナーを作ってみました。FFmpegの会ということで、カラーバーとビデオっぽいエフェクトがやっぱいいと思って、うねうねする所は、ここで使っていたような、音の波形とか使えないかなぁと思って、音源を再生してその波形を頭から３秒ぐらいを配列に突っ込んで、クリップボードにコピーして、で、パラメーター用のクラスの配列につっこむという、力技で作ってみました。波形のパターンは３種類ほど用意しておいて、ロールするたびにランダムで３種類の波形をR、G、Bにそれぞれあてて混ぜて表示しているという感じです。
- パラメーターを作る用のソース：getParameter.zip
- バナーのソース：wcanminiasBanner.zip
ボールの消し方がいまいち良く分かってなかったんですが、DestroyBodyってのをつかうっぽい。あってるかな？
public function Update(event:Event):void
{
trace('numChildren:'+numChildren);
m_world.Step(m_timeStep, m_iterations);
for (var bb:b2Body = m_world.m_bodyList; bb; bb = bb.m_next)
{
if (bb.m_userData is Sprite)
{
bb.m_userData.x = bb.GetPosition().x * 30;
bb.m_userData.y = bb.GetPosition().y * 30;
bb.m_userData.rotation = bb.GetAngle() * (180/Math.PI);
if(bb.m_userData.y > 350)
{
removeChild(bb.m_userData);
m_world.DestroyBody(bb);
}
}
}
}
tags：*ソース Box2DFlashAS3 TeraClock
せっかくなので、パラメーターをいじれるようにしてみた。ただ、出力するボールが多くなりすぎて処理しきれなくなるとエラーがでるっぽいです。ワールドの重力の変更はSetGravity()ってのを使えばいいみたい。以下のような感じ。
tags：*ソース Box2DFlashAS3 TeraClock 時計
生成するボールに初速度をあたえたかったんだけど、やり方がわからずにいろ調べたらどうやらSetLinearVelocityってのを使うみたい。手こずった。
tags：*ソース Box2DFlashAS3 TeraClock 時計
てら子のお題が時計ということで（大阪てら子もですね。）、僕もつくりたーいと思って作ってみた。とりあえず１個目。Box2DFlashAS3で時計できないかなぁと思って、ごにょごにょやってみた。前Box2DFlashAS3使った時もそうだったけど、生成したオブジェクト（この場合だと赤いボール）を消す方法がいまいちよくわからない。どんどん重たくなってノートのファンが…。ソースは以下です。別途TeraClockとBox2DFlashAS3が必要です。
tags：*ソース Box2DFlashAS3 TeraClock てら子 時計
昨日のWCANのLightning Talks用のカウントダウンつっこみツールを作りました。昨日は5分限定でしたが、1分から10分（10分でスタートすると0:00から始まるけど…）までセットできるようにしたのと、フォント部分を修正しました。
使い方としては、カウントダウン表示部分を開いて、つっこみ部分の方からつっこみます。タイマーは1分から10分まで設定できて、テキスト入力の部分に発表者の名前を入れて、スタートを押すと発表者の名前が表示されて、カウントダウンが開始されます。つっこみ部分は携帯とかからもアクセスできると思うので、PCを持ってない人には携帯からつっこんでもらいました。ソースは以下にあります。別途Tweenerが必要です。
もともとWCAN mini AS Vol.3の時に、にとよんさんが見せれくれたニコニコメソッドプレゼンをカウントダウンの時計に組み込んだもので、ソースも一部使わせてもらいました。ありがとうございます。asの作りとしては、定期的に1秒間に1回、テキストファイルを見に行って、新しい行が追加されていたら、それをテキストで流すという感じです。会場には100人以上の人がいたんですが、特に途中で動作がとまるとかもなく、順調に動作してました。トータルで600近いつっこみが10人の発表中にあったので、ひとりあたり60つっこみぐらいあったことになるんですかね。予想以上に盛り上がって、コメントしてくださった方には感謝感謝です。これ次回もつかうんですかね？
1 - 7 / 7
