Posted by & filed under 作品紹介.

コミュニケーションプラス様ご依頼で
ひぐらしCMジェネレーターの制作を行いました!

企画・デザインをコミュニケーションプラス様から頂いた時点で、

  • 対象の世界観に沿ったTVCMふうの映像作品を誰もが楽しみながら作れること
  • そのCMを簡単にブログ等で紹介できること

という条件の中で、以下の点に工夫を凝らしました。

先ずは制作する対象となる作品が既に一定のファンを抱えていること。
作品そのものをとても大切に思っているファンを既に沢山抱えているという状況での広報作品を作り上げることは、いろんな意味で勉強になりました。
コンシューマー向けのゲーム作品であること。
ゲームというインタラクティブ性の高い商品の広告である以上、興味を持ったユーザーがまず最初に触れる部分だけに、いくら広告といえどここにバグや完成度の低さを見せるわけにはいかないので、極力実験的なことや難しい事を廃して面白く仕上げるかに腐心しました。
アクセスに対してサーバーの負荷を下げること。
いくら面白くても、サーバーに負荷がかかって落ちてしまっては意味がないので、与えられたサーバーのスペックの範囲内でジェネレートできる最短の方法をとりました。

ユーザー様から見て面白いと思うことと、
クライアント様から見て面白いと思うこと、
必ずしも一致しない場合も多いのですが、かといって正反対というわけでもなく、
ユーザーが全てをコントロールできたら面白くなるというわけでもなく、
クライアント側で締め付けたら面白いものができないわけでもなく、
僕らはそのギリギリのラインで、誰もが遊べるような楽しい何かを作り続けているわけですが、
今案件も先ずは触ってみて、楽しんで頂ければ何よりです。

Posted by & filed under 未分類.

前回の
●透過画像について
でpng24って書いちゃってました。正しくはpng32。

間違いついでに気になってた疑問。
png32よりも同じく透明書き出しのできるpng8の方がいいんじゃないの?ってことなんですが、はっきりさせるために実験。
▼元画像ファイルサイズ
・png8... 30.4kb
・png32...319kb

と歴然の差のpng兄弟。flash上でどちらとも写真画質(画質80)に圧縮してみましたところ・・・
▼パブリッシュ後のswfファイルサイズ
・png8... 20kb(20834b)
・png32...20kb(20553b)

わずかにpng32が軽い!
しかしこの後サイズの小さなpng両者で試すとpng8が200bほど軽かった。何なの?大きさなの?
この辺はケースバイなのかもしれないけれど、レギュレーションバナーでb単位のチマチマ詰めが必要じゃないなら、減色のないジャギーもないpng32の方が私は好きだ!
※ちなみにこの実験では両者に目立ったCPU負荷の差は見られず。

Posted by & filed under お知らせ, 作品紹介.

お絵かきができる!にじいろジーン番組ホームページが開設されました!

最初にktv様から企画を頂いて、ポイントは

  • サイト上で直接お絵かきができること
  • 描いた絵は直接番組に送れること
  • ブラウザを閉じたり別のページに移動しても描きかけの絵が自動的に保存されてて、またサイトに再来して貰ったときに途中からお絵かきが続けられること
  • 番組の性質上、大人から子供まで楽しんでもらえるよう現実のものをメタファーにしたわかりやすい表現であること

でありましたので、いずれも当制作所得意中の得意分野としてこだわりのある制作をさせていただけました。

デザインに関しては、最初の段階から表情豊かな楽しいタレントさんが揃っていますので、ユーザーにとっつきやすい印象を与えることに苦労はなかったのですが、こだわりポイントとしては操作系に関するところになるでしょうか。
ユーザーが触れる部分はできるかぎり現実に即したものとするために、例えば「筆の太さを選ぶ」のではなく「太い筆を選ぶ」「細い筆を選ぶ」ようにひとつひとつ言葉に置き換えてわかりやすいほうをデザインとして反映していきました。

また、「このサイトは、画面上で直接お絵かきができるんですよ」って事は言葉で説明しないといけない部分で、実際にユーザーがこのサイトで何が出来るかを理解してもらうためには最低でも一回はキャンバス上でマウスをクリックしてヌリヌリしてもらう必要があります。
キャンバスをただ置いただけでは「なんだかえらい余白の多いサイトだな」とだけ思われて何もしてもらえずに別のページに移動される可能性が高いので、出来る限り見た目で「このサイトは絵が描ける」ということをわかってもらうために一番最初はぬり絵ふうの素材を置くことにしました。
このあたりは「こくばん.in」さんのようにただ黒板とチョークを置いただけでユーザーが一発で何が出来るサイトなのか理解するという素晴らしいアイデアをお手本にさせて頂きました。

プログラムに関しては特に目新しいことはしていません。Flashの描画機能を使えば結構高度なことは出来るのですが、では高機能なWEBドローツールを作れば案件は成功なのか、ということではないのでもの凄く真っ当にに「ユーザーが思った通りの動きをする」ことにのみ注力しました。
例えば描いた絵を番組に送るときの確認画面に、実際に描いた絵がサムネールで見えた方がいいのでそこに再描画させる処理など、見えないところでけっこう頑張っています。あとはページ下部でタレントさんがいかに遊んでる風に動かせるか、とか。

裏方の部分では、番組制作ってかなりな忙しさだと聞いていますので、ユーザーから投稿された絵を小難しい管理画面で処理してもらうよりは、ざっくりとjpeg画像としてダウンロードできて、ファイル操作で選びながらプリントアウトなども出来るように、Flashで描画された画像をファイルとして送信保存できるようにするなど、小難しい操作をさせないための小難しい技術、ってやつをふんだんに取り入れています。

制作全般において、こちらの自己満足で終わることがないよう、出来るだけ沢山の方に楽しんでもらいたいと願いを込めて作ったことが自己満足な、楽しいサイトに仕上がりました!
サイト制作者側としても、番組への素敵な投稿を願っています!

Posted by & filed under 未分類.

毎回フンフン言いながら作ったものがいざパブリッシュしてみるとCPUを圧迫しまくっていて、泣く泣く削る、なんてのが私の場合よくあるのでメモメモ。羽のように軽いflashをさらさらりと作るのが目標ですよ。
今回は間接アニメーション。ついつい楽しくて動きを足してしまう。

●全身写真1枚を間接ごとにマスク切り分け
元写真は一枚だからファイルサイズは小さいだろうと思って油断してたらすごい負荷。結果×。

●透過画像について
透過にする場合、gifよりもpng24png32の方がflashが軽く圧縮してくれる。しかもpngの方がキレイだし。

●ジャギーと圧縮との付き合い方
間接ごとに切り分けた画像それぞれにスムージングなしで圧縮すると、許せないくらいのジャギーが発生し見栄えが悪くなるが、全身アニメーションをpng連番書き出しをし、そのpngに圧縮をかけても、全体にほどよいノイズが乗るような感じでまだ許せる。

●連番書き出しのお得な点
一枚一枚透過の部分を切り捨てて再配置すると体の軸がズレるため、タイムラインでアニメーション制御する場合では絶対やりたくないくらいの奇妙なブレやせわしなさが演出できる。コマ落ちアニメーションには最適かも。

今回通してわかったのは、私でもややこしくて考えたくないことはflashも嫌なんだなと。両手・両足・胴・頭それぞれマスクかけて、これを反転させたやつをこのタイミングでアニメーション、とかそらCPUもウーン言いますわ。

追記2008/07/10-------------------------------

●透過画像について
png24って書いちゃってました。正しくは透過png32。

Posted by & filed under 未分類.

FlashのAS3でのガベージコレクションについて、ちょっと腑に落ちない点があったので実験してみた。
たぶんFLASH-JP - フォーラム:AS3.0 ガベージコレクションの対象についてと同じ事なんだと思うけど、実際にやってみないと理解が出来ないので。

  1. var stgH:Number =stage.stageHeight;
  2. var stgHH:Number = stgH/2;
  3. var stgW:Number = stage.stageWidth;
  4. function init():void {
  5. var timer:Timer = new Timer(10);
  6. timer.addEventListener(TimerEvent.TIMER, xOnTimer);
  7. timer.start();
  8. }
  9. function xOnTimer(e:TimerEvent):void {
  10. var sy:Number = Math.sin(Math.PI/180 * e.target.currentCount)*stgHH;
  11. sy += stgHH;
  12. var sprite:Sprite = new Sprite();
  13. var r:uint = Math.floor(Math.random()*255);
  14. var g:uint = Math.floor(Math.random()*255);
  15. var b:uint = Math.floor(Math.random()*255);
  16. var col:uint = r<<16 | g<<8 | b;
  17. sprite.graphics.lineStyle(0, col, 1);
  18. sprite.graphics.drawCircle(0,0,10);
  19. sprite.addEventListener(Event.ENTER_FRAME, xOnEnterFrame);
  20. sprite.x = 1;
  21. sprite.y = sy;
  22. stage.addChild(sprite);
  23. }
  24. function xOnEnterFrame(e:Event):void {
  25. e.target.x += Math.floor(Math.random()*50);
  26. if (e.target.x > stgW) {
  27. e.target.removeEventListener(Event.ENTER_FRAME, xOnEnterFrame);
  28. e.target.stage.removeChild(e.target as Sprite);
  29. //Object(e.target) = null
  30. }
  31. }
  32. init();

これをそのままFlashにコピペすれば動きます。たぶん。FlexやFlexSDKは知らない(たぶん動かん)。

やってること
  • init関数(4行目〜8行目)

    兎に角めちゃくちゃ速く、100分の1秒くらいの間隔でアホみたいにxOnTimer関数を実行しなさいよ!

  • xOnTimer関数(9行目から23行目)

    とにかく丸い輪っかを書きなさいよ!

  • xOnEnterFrame関数(24行目〜31行目)

    丸い輪っかは兎に角右に移動しなさいよ!
    画面はしまで移動したら用済みなんでとにかく消えてしまいなさいよ!

というようなことを書いちょるわけです。
ここで調べたいことは、29行目コメントアウトしたように丸い輪っか(Sprite)の参照は消さなくても大丈夫なん?って事。
モチのロン、ここのコメントアウトを外すと怒られるわけで、怒られるのは嫌だからコメントアウトしてるわけで、「そしたらSpriteの参照は画面からはremoveChildしてるけどメモリには残ったままなんじゃない?」と思って不安でたまらないわけです。
xOnTimer関数の中でSpriteの参照をグローバルなものにしてやってもいいんだけど、え〜それってAS2より酷くないか?メモリ管理したいからグローバルな参照にメモリを割り当てるって、何か本末転倒っぽくて気持ちが悪い。

ということで何とかしてxOnEnterFrame関数の中だけでSpriteの参照が消せないか、シコシコとコードを試してみたんですが、結果
ここは参照そのままに残しててもあとで必要に応じてガベージコレクタが消してくれるっぽい。
ず〜っと立ち上げててもメモリの使用量はある一定の量からは使わなくなったもん。よくできてますな。

というわけで無駄な悩みで一日つぶしたというお話しでした。ギャフン