メグとジョー


 
シオノギ製薬 ポポンピュメリスペシャルサイト「メグ&ジョー」サイトを会社の仕事で制作しました。

8月もあっという間に終わり、明日から9月だというのに、5月に公開されたサイトに関するエントリー。今更感ありすぎですが、会社のサイトのWorksに載せてもらえたのと、個人的にとても楽しくてやりがいのあった仕事なのでやはりブログに載せておこうと。
私はFlashを担当しました。デザインはyuuri

タイムラインアニメーションが見所のサイトです。線がぷるぷるしているのもスクリプトですか?と良く聞かれましたがタイムラインです。線を少しずらした2コマの絵を入れ替えています。スクリーンセーバーはとても気に入っていておすすめ。今でもノートパソコンで使っています。
 
シオノギ製薬 ポポンピュメリスペシャルサイト「メグ&ジョー」
http://www.pumeri.jp/
 

ホネホネ・クロック JS がJAMでSilverをいただきました

wonderflと、wonderflのjavascript、HTML5、css版であるjs do it共同でJAMというイベントが現在開催中です。
それの第一回のお題がなんと「人の動作をモチーフに時計を作ってください」というもので、これはホネホネ・クロックを出さないわけにはいかないと思い、ホネホネ・クロックのJS版を作ってエントリーしていたのですが、昨日結果発表がありまして、嬉しいことにSilverをいただくことができました!

JAM Session1 Result Presentation

ありがとうございます!これで一桁秒のホネホネちゃんのがんばりも報われたと思います。(js do itのshareコードを貼ってみたけど、コードしか見えない↓)
 

ホネホネ・クロック JS - forked from: Human Clock - jsdo.it - share JavaScript, HTML5 and CSS

 
今回ホネホネ・クロックのJS版を作ろうとしてわかったのは、パラパラ漫画の手法のアニメーションをCanvasを使ってやるのは簡単ではないということ。結局gifアニメを使うお手軽な手法をとってしまったのですが、gifアニメだとfirefox以外のブラウザではフレームレートに制限があるようで、アニメーションがすごくゆっくりになってしまいました。
しかし例えゆっくりでもホネホネ・クロックJS版ならiPhoneやiPadでも見られるんですよね・・・。
また時間のあるときにCanvasを使ったホネホネ・クロックも完成させたいと思ってます。

useOwnContainer=trueにaddChildしたらuseOwnContainer=trueできない

Papervision3Dのオブジェクトに透明度つけたりフィルターかけたりしたいときはuseOwnContainerというプロパティをtrueにしなければならないのですが、useOwnContainer=trueにしたオブジェクトにaddChildしたら、そのオブジェクトはuseOwnContainer=trueにできないという話。
どちらかには効くのでやりたいことができない!ということはないと思うけど、知らなかったらはまるかもしれないのでメモ。
 
以下がwonderflで検証したもの。
左が普通のPlane。右はuseOwnContainer=trueにしたDisplayObject3DにaddChildしたPlane。

 
・_containerのalphaは変えることができる
・_container.useOwnContainer = true;をコメントアウトすれば_plane2のalphaを変えれるようになる。
・ちなみにalphaとかを有効にするのはuseOwnContainer以外に、ViewportLayerを使う方法もある。そっちのほうが軽いらしい。

FLVPlaybackのSeekBarHandleにハマりまくりました


 
何回使っても良くわからないFLVPlaybackに今回もどっぷりハマりました。

FLVPlaybackのSeekBarHandleはムービーの再生位置を示してくれるもの。ドラッグして左右に動かすとビデオの巻き戻しや早送りができます。自分でこの機能を実装しようと思ったら少々面倒くさい(というかできるかあんまり自信ない)ので、FLVPlayback備え付けのSeekBarHandleがちゃんと使えれば便利なのですが、このSeekBarHandle、ちゃんと指定しているのに出てこないことが度々あったのです。

その原因が今まで解明できていなかったので、SeekBarHandleを仕事で使うのは極力避けていたのですが、つい最近原因を解明せざるを得ない場面に遭遇したので、この機会にきちんとSeekBarHandleと向かい合ってみました。
 
まず以下のような、FLVPlaybackを使用してムービーを再生させるFlvPlayerクラスを作成しました。FLVPlaybackおよびPlayPauseButtonなど各FLVPlaybackカスタムUI コンポーネントをnewして、割り当てているだけのシンプルなものです。

[以下のページなどを参考に]
FLV Playback カスタム UI コンポーネントの使用
http://www.gcommerce.com/jp/devnet/flash/articles/custom_flvcomp_03.html

ACTIONSCRIPT:
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     import flash.events.MouseEvent;
  5.     import fl.video.MetadataEvent;
  6.     import fl.video.FLVPlayback;
  7.     import fl.video.VideoEvent;
  8.    
  9.     public class FlvPlayer extends Sprite {
  10.         private var _path:String;
  11.         private var flvplayback:FLVPlayback;
  12.         private var playpauseBtn:PlayPauseButton;
  13.         private var mutebtn:MuteButton;
  14.         private var seekbar:SeekBar;
  15.        
  16.         public function FlvPlayer(path:String) {
  17.             _path = path;
  18.             addEventListener(Event.ADDED_TO_STAGE, _onAdded);
  19.         }
  20.        
  21.         private function _onAdded(e:Event):void {
  22.             removeEventListener(Event.ADDED_TO_STAGE, _onAdded);
  23.            
  24.             flvplayback = new FLVPlayback();
  25.             flvplayback.width = 400;
  26.             flvplayback.height = 300;
  27.             flvplayback.x = 50;
  28.             flvplayback.source = _path;
  29.             //自動再生
  30.             //flvplayback.autoPlay = false;
  31.            
  32.             // playpauseBtn
  33.             playpauseBtn = new PlayPauseButton();
  34.             playpauseBtn.buttonMode = true;
  35.             playpauseBtn.x = 50;
  36.             playpauseBtn.y = 310;
  37.             //seekbar
  38.             seekbar = new SeekBar();
  39.             seekbar.x = 89;
  40.             seekbar.y = 317;
  41.             //mutebtn
  42.             mutebtn = new MuteButton();
  43.             mutebtn.buttonMode = true;
  44.             mutebtn.x = 427;
  45.             mutebtn.y = 310;
  46.            
  47.             flvplayback.playPauseButton = playpauseBtn;
  48.             flvplayback.muteButton = mutebtn;
  49.             flvplayback.seekBar = seekbar;
  50.            
  51.             addChild(playpauseBtn);
  52.             addChild(mutebtn);
  53.             addChild(seekbar);
  54.             addChild(flvplayback);
  55.            
  56.             addEventListener(Event.REMOVED_FROM_STAGE, _onRemoved);
  57.         }
  58.        
  59.         private function _onRemoved(e:Event):void {
  60.             removeEventListener(Event.REMOVED_FROM_STAGE, _onRemoved);
  61.             flvplayback.stop();
  62.             removeChild(seekbar);
  63.             removeChild(playpauseBtn);
  64.             removeChild(mutebtn);
  65.             removeChild(flvplayback);
  66.             seekbar = null;
  67.             playpauseBtn = null;
  68.             mutebtn = null;
  69.             flvplayback = null;
  70.         }
  71.        
  72.     }
  73. }

 
各コンポーネントはFlashデフォルトのものです。それぞれ1フレーム目に書き出す、にチェックをつけるのを忘れずに。
これでFlashの1フレーム目に以下を書いて書き出したものが

ACTIONSCRIPT:
  1. var flvplayer:FlvPlayer = new FlvPlayer("mov01.flv");
  2. addChild(flvplayer);

 
Read more »

箕面のIMAXシアターでアバター見てきたんですが、すごかったです

ちょっと前にIMAXシアターでアバター見てきたんですが、すごかったです。
映像表現のストレートな進化のかたちだと思いました。

画面に奥行きがあるだけで、今までの映画館のスクリーンとは比べものにならないくらい、空間が広く感じられ、大きいものが大きく見えます。人間の目ってどうなってるの。疑似体験度はんぱない。ものすごい没入感。

これから3D映画が普及するなんて、正直眉唾もんと思っていたけれど、見たら手のひらを返したように納得。これからいっぱい3D映画作られて、どんどん体験できる機会が増えるのでしょう。
ただ、ちょっとでも見え方の具合が悪いと違和感を感じたり酔ったりしそうな映像ではあるので、一番最初に体験するならIMAXシアターとか設備が良いといわれてるようなところで見るのが良いと思います。