Animation

最近
aftereffectsとAIR漬けのhidakaです。YUREXもヨロシク。

以前にパーティクルにFLVも検討するといいよ。と書きましたが、動画をFlashにコンバートして使う際にFLVにするか、PNGシーケンス（画像コマアニメ）にするか、という選択があります。

終わらない夏2008！！
今日も半そでのshimadaです。

ようやく春一番が吹き、良心的な寒さになってきましたね。
いいことあるかなと思っていたら、PCが壊れました・・。
_level0用に作っていたサンプルも・・。

そんなこんなで今回は残ったファイルで凌ぎます。

それではいってみましょう

Here We Go・・

遅かれ今年初エントリーなので、改めまして明けましておめでとうございます！

今回はデータの軽量化についての策を出していこうと思います。

アニメーションベースのサイトを制作すると、いつも頭を悩ますのが”重さ”です。

せっかくアニメを作って組み上げたはいいもの、サーバに上げてみると重くて観れたものじゃないってことがあります。

その原因は大きく分けて3つ…

なにやらkijimaにパーティクルブームがきているようなので乗っかってみます。

こんにちは、いまさらながらTwitter(otoyasumi)始めてみました、kijimaです。

前回のエントリーに引き続き、キラキラエフェクト（パーティクル、Particleとよく呼ばれますね）を改良していきましょう。

キラキラエフェクト、といっておきながらなんですが、前回もちょろっと触れたように、これ系のエフェクトはじつは少しパラメータをいじるだけでいろんな効果に様変わりするんです！

たとえば、落ちる方向を逆、上向きにしてちょちょっといじれば、「泡」のような効果になったり。

今日は、前回作成したクラスの問題点を洗い出しつつ、汎用的に使いまわすクラスを作るために必要な要素を絞り込みます！（自前じゃないパーティクルライブラリも紹介します）

ハロウィンが終わったと思ったら、その翌日からもうクリスマス雰囲気に衣替え。12月に入り、どこもかしこもクリスマスクリスマスな今日この頃。

クリスマス的な雰囲気に合いそうなキラキラエフェクトを作ってみました。

目標としては汎用性重視で、再利用できるように「これ書くだけでOK！」って感じで使いたいなぁ～と思ってますが、とりあえず現状ではこんな感じ。別に降らせるのはキラキラじゃなくても雪とかでもいいかなぁなんて思ったり。

黄色い四角の点から、キラキラがあふれてます。swf内にマウスカーソルを載せると、カーソルに追従します。

それでは、サンプルコードについて解説します。

以前高橋酒造さんの案件を紹介させてもらったんですが、技術的なことが紹介できていなかったので今回アニメーション部分の解説を書こうと思います。

当初の予定では基本トゥイーンアニメーションで制作する予定でした。

ですがキャラクターのデザインが変更になったりアウトラインに動きをつけたいなどの仕様変更があったので、トゥイーンでの表現では不可能と判断しコマアニメーションで制作することにしました。

ちなみにおさらいとしてトゥイーンとコマの違いを簡単に説明しておくと…

・トゥイーン 始点と終点を中割計算してくれる ・コマ 1フレームごとにアニメを制作し配置していく

といったところでしょうか。

ちょっとはまってしまったので、メモメモ。

アニメーションを作るときとかに、よくMovieClipを入れ子にしたりしますが、 子であるMCがトゥイーンで移動など再描画されるような処理をしている場合、親であるMCのvisibleをfalseにしても、描画されてしまうようですね。

以下はちょっとしたサンプルです。

flashCS4の日本語版がついに発表されましたねー！

タイムライン大好きな自分にはウハウハな新機能が満載なので、
発売が待ち遠しいです！！

新機能の中でも一番気になっていたのが「ボーンツール」。

AIRエアギターを作ってから人の間接を動かす仕事が増えて、
まさにこういう機能を待ち望んでいました。

ただ、
書き出した際のデータの容量や、
表示出来るflashplayerのバージョンなど、
色々と気になる所があるのも事実。
ということでCS4の体験版（英語）で試してみました。

まず今までの作業から楽になったポイントを３つ
・中心点をずらす必要が無い（ボーンツールで回転軸が決まる）
・キーフレームを挿入する必要がない（フレーム移動してシンボルを動かすと自動で生成される）
・ガイドを使わなくても間接が離れない

シンボルが多いとき中心点をずらす作業がなにげに大変で、
この作業が短縮出来る事が予想外だったので嬉しいです。
あと、タイムラインがまとまるのも見やすくてありがたいですね。

使い心地もいいです！
最初動かしたくない関節も一緒に動くので、使いにくいかもと思ったんですが
Shift押しながらドラッグすると、特定のシンボルだけ動かすという事ができました。
Alt押しながらで、ボーンを無視してシンボル移動もできます。
イヤー便利！

気になるのはデータサイズ
やはり従来のモーショントゥイーンより重くなりますね。

あと古いバージョンのflashplayerでもちゃんと表示できました。

表示できたのはありがたいけど、どういう状態で書き出されているんだろ？
もしかしてシンボルを１フレームずつ配置した状態で書き出しているのかな？と
試しにflaのバージョン下げてCS3で開いてみると・・・

やっぱり！!
そのまま書き出してみても4KBのswfが書き出されました。

だから古いバージョンのプレイヤーでも表示できるのか。
タイムラインが長い時はデータサイズを注意しながら使用する必要がありそうです。

最近、3D制作に手を出し始めました嶋田です。
色んなソフトを少しずつ試しているんですが、
Blenderというソフトが高機能なのにフリーですばらしいです。

Blenderを触るようになってからSwift3Dにしばらく手を付けていなかったんですが、
最近になってSwift3Dのバージョン5からPapervision3D対応のファイルを書き出せる事を知りました。

ちょっと調べてみると3Dプレビューも簡単に作れるらしい。

実際やってみると本当に簡単だったのでご紹介。

アニメーションを作る際にTweenerなんかをよく使いますが、始点と終点を同じに
したい事がよくあり、何度かに動きを分けてやればいいんですが面倒なのでその場
で動くだけのものをいくつか作りました。
ずーっとプルプルさせるのも、マウスに反応させるのもありです。
使う場面はいろいろですが今回はマウスに反応させてあります。

今、巷で話題のAIRエアギター
単なる駄洒落ガジェットですが、
色んなところで取り上げていただいてうれしい限りです。


画像を使ったアニメーションは得意としているところなんですが、
髪の長いモデルは初めてで、髪の表現で苦労しました。

画像だと切り抜いたときにどうしても縁が汚くなってしまうので、
髪の毛のような細かい表現が求められる部分は、マスクを使ってパスで描いています。

画像の髪の色の上にマスクをかけると不自然になったので、
髪の先端の色を一色に塗りつぶし自然に見えるようにしています。
髪だけでなく腕のパーツなどもマスクをかけました。


余談ですが実はこのガジェット KAYACの旅する支社で
フィレンツェに行っている時に制作したもので、
メイド・イン・イタリーだったりするんです。

ブログパーツ版もあります。

ASでラインアニメーションを作る際、線の途中で色変えたりアルファいじったり
する時には当たり前のようにあー細切れにしてlinetoでつないであれねー、と
やっていましたが、昔はそういえばシェイプトゥイーンでグラデーション変えて
簡単にできてた事を思い出したので調べてたらありました。

個人的な意見なんですがスクリプトベースとタイムラインベースのアニメーションどちらかを選択するとすれば、自分はタイムラインベースを選択すると思います。

タイムラインベースの良さといえばまず直感的に動きをとらえることができ、細かい調整が効くというのが魅力です。

修正などが大変というデメリットもありますが、ケースバイケースで使用すると表現力のアップに繋がります。

そこで今回はタイムラインでの物理系アニメーションを制作してみました。

梅雨入りしてじめじめしてるのでsaburoの記事に習ってさっぱり蛍を作ります。
今回は光の軌跡・瞬きの処理を追加しました。
キャプチャしてぼかし＆グローすることで軌跡を描いています。
動きと色を変えて調整すると花火のようにもなるのでこれからの季節おすすめです。

今回のソース

前回の投稿に引き続き今回も最近気になっているサイトを紹介してみようと思います。

 

■harmonic313

http://www.harmonic313.com/wordproblems/

コチラのサイトは上に並んでいるアルファベットの中からある法則で文字を選択してクリアーしていくゲームのようです。

オープニングのタイポアニメーションはサイトとのバランスも取れていて、、音なんかもサイトのデザインとすごく合ってますね。

ビットマップデータは使い方によっていろいろな見せ方ができて、便利ですよね。 今回はビットマップの色特徴をパーティクルの動きに反映させる事でパーティクルで絵を浮き上がらせる事をやってみたいと思います。

・今回作成してみたのはこちら（マウスダウンするとパーティクルが発生します。）

どうも
旧日本兵の様なステキなアイコンのさぶろうです

単純な円の動きを少し改良した
ぼつった蛍の動きアップします

ムービークリップの中にを状況に応じて変更する場合、 キーフレームごとに切り分けておいて、 状況に応じてムービークリップの表示フレームを切り替えていくと思います。

こんな感じにしといて、gotoAndStop(hoge)みたいな感じ。

上は８枚の画像を8フレームにわけたものですが、これが100枚とかになって、いちいち１フレームずつずらして・・・ってだるいことこのうえないですね。

そこで現在選択中レイヤーを下から１フレームずつずらしていってくれるJSFLを作成してみました。

想定した作業の流れはこちら。

1.振り分けたい画像群をまとめて読み込みます。

2.レイヤーに配分(Cmd+Shift+D)を使って読み込んだ画像をそれぞれのレイヤーに配分します。

3.振り分けられたレイヤーを選択して

4.今回作成したコマンドを実行(ちなみに私はCmd+Alt+Zにわりあててます)

5.一気に連番フレームにふりわけてくれます

今回作成したコードは以下のようなものです

var doc = fl.getDocumentDOM();
var tl = doc.getTimeline();
var layerArray = tl.getSelectedLayers();
var tmp = layerArray.shift();
layerArray.push(tmp);
var layerNum = layerArray.length;
for(var i = layerNum - 1; i >= 0; i--){ tl.setSelectedLayers(layerArray[i]); tl.insertKeyframe(layerNum - i);
tl.convertToBlankKeyframes(1);
tl.removeFrames(0);
}

例えが画像なのでイメージシーケンスを使えばいいじゃんて思っちゃいましたが、 今回のは画像だけに限らないので結構使えるのではないでしょうか・・・。

その～と名前付けておいて2回目忘れていました。
今回は球面上の移動サンプルです。かなり昔のソースをAS3に移植しました。

うろうろするものが作りたかったんですが、XY平面で普通にやっちゃうと直線的だしなんか
奥行きも欲しいよね、ということでZ軸をもたせて球面上を動き回るものにしました。

サンプル１
サンプル２(ボール増やしたもの)

Flash8から実装されたけど、Fuseやtweenerが出てきてあまり使われない気がするモーショントゥイーンのイージングの編集機能が便利です。

イージングがパスで描けるようになっているのは有名ですが、上のチェックボックスを外すと色・位置・回転・フィルタを別々に設定できるようになります。

これでひとつのモーショントゥイーンで位置移動はゆっくり加速しつつアルファ(カラー)はすぐ終わらせてフェードイン、そしてフィルタは移動終了後に一気に、などまでここだけで細かく設定できます。
途中で100％までしてしまえば移動後に色変化など連続したトゥイーンが可能です。
しかも実際に動くので各フレームの状態がオーサリング画面で確認できます。

flashの製作者って大きく分けてアクションスクリプト派とタイムライン派の２つの分類に分かれると思います。

自分は学生のころAfterEffectsを触っていたこともあってタイムライン派で、タイムラインの良さっていうのは直感的に演出を実装出来たり、細かい調整が利くとかだったりです。

webサイトでのAnimationの力をフルに出せるのがやっぱりオープニングで、製作者の持ち味が発揮される部分です。

そこで今回は自分が勉強にさせてもらっているサイトを少し紹介しようと思います。

 

【greatexposures】

海外のweb制作会社で７人のスタッフで運営しているようです。

制作実績を見ると分かるようにモーショングラフィックスに力を入れているようで、ちゃんとSE担当者もいますね。

すべての制作物においてユーザーを飽きさせない演出と素材の良さなどかなり計算されていてすごいの一言です。

この会社の制作物で個人的に好きなのがdarrellredleafとJerry Avenaimです。

http://www.greatexposures.com/

 

【fakepilot】

次に紹介するのが以前FICCとかでも紹介されていたスウェーデン人の方のポートフォリオサイトで、画面構成やレイアウトあと画像の使い方なんかかなりすごいです。

演出の見せ方もそうですが、素材のクオリティーも高くないとここまでの一流にはなれないと改めて感じました。

この方の作品の中で好きなのがThe Bryant Park HotelやSean Jhon（これが一番好き）のオープニングです。

swfをネットから落としてきてDecompilerでflaを見たんですがタイムライン制御とイージング調整あとマスキングなんかかなりすごかったです。

レイヤー数も５００くらいあったし。

http://www.fakepilot.com/

 

２つの作品に共通して言えることが素材１つ１つのクオリティーやコンセプトあと演出の独創性やユーモア

性が高いというのとブラッシュアップが行き届いているんだろうなと思いました。

 

【netdiver】

あとおまけでこのデザインポータルサイトは更新頻度もそこそこあって、いろんな作品を見ることが出来るので結構いいですよ。

http://netdiver.net/

最近、基本機能をいじりなおしていたので掘り返したものをひとつ。
マスクを使って中に虹色の表現をするものです。今回はスクリプトなしです。
ポイントは多少の規則性を持たせること。虹は色の移り変わりがキモなので。



ソース

AS3に移行ついでにお約束的なコードを書き溜めていたのでその中のひとつ。
画面全体に散らばらせたり花火のように一点から広がらせるサンプル。
動きやエフェクトは変えてもベースはそんなに変わらなかったりするのでいじり元として。

基本的な流れはこんな感じ。

1.生成
2.配列に保持
3.addChildでステージに表示
4.配列内のオブジェクトをループで動かす
5.消えるものは配列から削除

以下サンプル。

大学時代では映像を専攻していて、その時よく参考にしていたサイトを少しだけ紹介したいと思います。

【ayato@web】After Effectsでのアニメションの紹介サイトです。

凄く勉強になります！ （flashもタイムラインでの制御があるので,通じるものはあると思います）

http://www.ayatoweb.com/

【psyop】世界のアーティスティックなcmを集めたサイトです。

（全体的にかなり凄いです！個人的に好きなのはコーラのNo,01のcmです）

http://www.psyop.tv/main.php

まだ他にもあるんですが小出しにしていこうと思います！

実は、_level0.KAYACのアイコンには隠しコマンドがあります。
アイコンをクリックするとページが変わりますが、
マウスを放さずにクリックしっぱなしで、アイコンのキャラの頭文字をキー入力してみてください。
(shimadaの場合"Ｓ")
ちょっとしたオマケが見れます。

ちなみに他のメンバーには何の断りも入れずに作っちゃってます。