ちゃぶ台メモ http://chabudai.org/blog chabudai memo: flash, actionscript, web Mon, 30 Aug 2010 17:04:33 +0000 http://wordpress.org/?v=2.6.3 ja メグとジョー http://chabudai.org/blog/?p=276 http://chabudai.org/blog/?p=276#comments Mon, 30 Aug 2010 17:04:33 +0000 chabudai http://chabudai.org/blog/?p=276
　
シオノギ製薬 ポポンピュメリスペシャルサイト「メグ＆ジョー」サイトを会社の仕事で制作しました。

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

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

]]> http://chabudai.org/blog/?feed=rss2&p=276 ホネホネ・クロック JS がJAMでSilverをいただきました http://chabudai.org/blog/?p=274 http://chabudai.org/blog/?p=274#comments Sun, 08 Aug 2010 11:47:54 +0000 chabudai http://chabudai.org/blog/?p=274 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を使ったホネホネ・クロックも完成させたいと思ってます。

]]> http://chabudai.org/blog/?feed=rss2&p=274 useOwnContainer=trueにaddChildしたらuseOwnContainer=trueできない http://chabudai.org/blog/?p=272 http://chabudai.org/blog/?p=272#comments Sat, 15 May 2010 16:24:30 +0000 chabudai http://chabudai.org/blog/?p=272 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を使う方法もある。そっちのほうが軽いらしい。

]]> http://chabudai.org/blog/?feed=rss2&p=272 FLVPlaybackのSeekBarHandleにハマりまくりました http://chabudai.org/blog/?p=270 http://chabudai.org/blog/?p=270#comments Sun, 09 May 2010 16:59:56 +0000 chabudai http://chabudai.org/blog/?p=270
　
何回使っても良くわからない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

PLAIN TEXT
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フレーム目に以下を書いて書き出したものが

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

　

↓このswfです。きちんと三角のSeekBarHandleが表示されています。（autoPlayはflaseにしています）
　

　
ところがMouseEventのイベントハンドラに同じことを書いた場合はSeekBarHandleが表示されなくなるのです。

PLAIN TEXT
ACTIONSCRIPT:
  1. movie01_btn.addEventListener(MouseEvent.CLICK, _onClick);
  2. function _onClick(e:MouseEvent):void {
  3.     var flvplayer:FlvPlayer = new FlvPlayer("mov01.flv");
  4.     addChild(flvplayer);
  5. }

　
↓書き出したswf。
　

　
で、結論まで長かったですが試行錯誤した結果、クリックしてすぐFlvPlayerをnewするのではなく、1フレーム間を置いてからFlvPlayerをnewすれば回避できることがわかりました。

PLAIN TEXT
ACTIONSCRIPT:
  1. movie01_btn.addEventListener(MouseEvent.CLICK, _onClick);
  2. function _onClick(e:MouseEvent):void {
  3.     addEventListener(Event.ENTER_FRAME, _onEnter);
  4. }
  5. function _onEnter(e:Event):void {
  6.     removeEventListener(Event.ENTER_FRAME, _onEnter);
  7.     var flvplayer:FlvPlayer = new FlvPlayer("mov01.flv");
  8.     addChild(flvplayer);
  9. }

　
以下のような感じでSeekBarHandleがちゃんと出てくるようになりました。最終的には2つのムービーを切り替えれるようにしています。
　

PLAIN TEXT
ACTIONSCRIPT:
  1. var flvplayer:FlvPlayer;
  2. var path:String;
  3. var moviePath:Object = {movie01_btn:"mov01.flv", movie02_btn:"mov02.flv"};
  4.  
  5. movie01_btn.addEventListener(MouseEvent.CLICK, _onClick);
  6. movie02_btn.addEventListener(MouseEvent.CLICK, _onClick);
  7. function _onClick(e:MouseEvent):void {
  8.     if (flvplayer!=null) {
  9.         removeChild(flvplayer);
  10.         flvplayer = null;
  11.     };
  12.     path = moviePath[e.target.name];
  13.     addEventListener(Event.ENTER_FRAME, _onEnter);
  14. }
  15. function _onEnter(e:Event):void {
  16.     removeEventListener(Event.ENTER_FRAME, _onEnter);
  17.     flvplayer = new FlvPlayer(path);
  18.     addChild(flvplayer);
  19. }

　

※サンプルの動画は、ニコニ・コモンズにアップされているものを使わせていただきました。

]]> http://chabudai.org/blog/?feed=rss2&p=270 箕面のIMAXシアターでアバター見てきたんですが、すごかったです http://chabudai.org/blog/?p=267 http://chabudai.org/blog/?p=267#comments Tue, 16 Mar 2010 18:03:35 +0000 chabudai http://chabudai.org/blog/?p=267

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

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

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

]]> http://chabudai.org/blog/?feed=rss2&p=267 Papervision3Dで画像がゆがむの回避する方法、どっちがいい？ http://chabudai.org/blog/?p=265 http://chabudai.org/blog/?p=265#comments Sun, 28 Feb 2010 21:27:19 +0000 chabudai http://chabudai.org/blog/?p=265 Papervision3Dでオブジェクトにビットマップ画像を貼り付けたとき、画像がゆがんでしまうのを回避するにはオブジェクトのセグメント数を上げるしかないと思っていたのですが、先日会社で隣の席に座っている@morikenさんにbitmapMaterialなどの引数“precise”をtrueにすることでもゆがみを解消できることを教わったので、せっかくだしちょっと比較検証してみることにしました。
　
まずは画像のゆがみの比較です。
一番左は、普通に貼り付けただけのもの。
真ん中はnew Plane(_material, _w, _h, 4, 4)のような感じでセグメントを4つずつ分割したもの、
一番右はnew BitmapMaterial(bitmap, true)のような感じで、2つ目の引数preciseをtrueにしたものです。
何もしてないのは論外として、真ん中と右を比べると、precise=trueの方が角度によって若干ガタつきが起こっていることが分かります。


　

スピード比較

大量にオブジェクトを作ってスピード比較してみました。上がPlaneのセグメント数を4,4にしたもの、下がmaterialのpreciseをtrueにしたものです。
あからさまにpreciseをtrueにしたものの方が速いことが分かります。
　

　

　
segmentの数を2,2まで減らせばprecise=trueにしたものより速くすることができますが、その場合はprecise=trueの方がゆがみが少なく、表示がきれいになります。
　

　

結論

ほとんどの場合、セグメント数を増やすよりprecise=trueを使う方が良さそうです。セグメント数を増やすのはprecise=trueにしたものよりさらにゆがみを少なくしたい場合でしょうか。スピードは犠牲にすることになりますが、４,４以上のセグメント数にすればprecise=trueより見た目を良くできます。
　
[追記 10/03/17]
soundkitchenさんが検証ソースをwonderflでも動くようにしてくれたので、実際に試してみたい方は以下からFork

　
ソースは以下。
　

■アニメーションの見え方比較

PLAIN TEXT
ACTIONSCRIPT:
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     import org.papervision3d.cameras.Camera3D;
  5.     import org.papervision3d.render.BasicRenderEngine;
  6.     import org.papervision3d.scenes.Scene3D;
  7.     import org.papervision3d.view.Viewport3D;
  8.     import org.papervision3d.materials.BitmapAssetMaterial;
  9.     import org.papervision3d.objects.DisplayObject3D;
  10.     import org.papervision3d.objects.primitives.Plane;
  11.    
  12.     public class Main extends Sprite {
  13.        
  14.         private var camera:Camera3D;
  15.         private var scene:Scene3D;
  16.         private var viewport:Viewport3D;
  17.         private var renderer:BasicRenderEngine;
  18.        
  19.         private var _plane1:Plane;
  20.         private var _plane2:Plane;
  21.         private var _plane3:Plane;
  22.        
  23.         public function Main() {
  24.             scene = new Scene3D();
  25.             viewport = new Viewport3D(510, 240, true, true);
  26.             renderer = new BasicRenderEngine();
  27.             camera = new Camera3D();
  28.             addChild(viewport);
  29.            
  30.             camera.focus = 100;
  31.             camera.zoom = 2;
  32.             camera.y = -80;
  33.             camera.z = -600;
  34.            
  35.             init();
  36.         }
  37.        
  38.         private function init():void {
  39.             var _picmaterial1:BitmapAssetMaterial = new BitmapAssetMaterial("Pic");
  40.             var _picmaterial2:BitmapAssetMaterial = new BitmapAssetMaterial("Pic", true);
  41.             _picmaterial1.doubleSided = true;
  42.             _picmaterial2.doubleSided = true;
  43.             _plane1 = new Plane(_picmaterial1);
  44.             _plane2 = new Plane(_picmaterial1, 300, 300, 4, 4);
  45.             _plane3 = new Plane(_picmaterial2, 300, 300);
  46.            
  47.             _plane1.x = -450;
  48.             _plane3.x = 450;
  49.             scene.addChild(_plane3);
  50.             scene.addChild(_plane1);
  51.             scene.addChild(_plane2);
  52.            
  53.             addEventListener(Event.ENTER_FRAME, renderHandler);
  54.         }
  55.        
  56.         private function renderHandler(e:Event):void {
  57.             _plane1.rotationY += 2;
  58.             _plane2.rotationY += 2;
  59.             _plane3.rotationY += 2;
  60.             renderer.renderScene(scene, camera, viewport);
  61.         }
  62.     }
  63. }

　
　
■セグメント数４,４にした時のスピード検証

PLAIN TEXT
ACTIONSCRIPT:
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     import org.papervision3d.cameras.Camera3D;
  5.     import org.papervision3d.render.BasicRenderEngine;
  6.     import org.papervision3d.scenes.Scene3D;
  7.     import org.papervision3d.view.Viewport3D;
  8.     import org.papervision3d.materials.BitmapAssetMaterial;
  9.     import org.papervision3d.objects.DisplayObject3D;
  10.     import org.papervision3d.objects.primitives.Plane;
  11.    
  12.     import net.hires.debug.Stats;
  13.    
  14.     public class Main2 extends Sprite {
  15.        
  16.         private var camera:Camera3D;
  17.         private var scene:Scene3D;
  18.         private var viewport:Viewport3D;
  19.         private var renderer:BasicRenderEngine;
  20.         private var _planeList:Array = [];
  21.        
  22.         public function Main2() {
  23.             scene = new Scene3D();
  24.             viewport = new Viewport3D(510, 280, true);
  25.             renderer = new BasicRenderEngine();
  26.             camera = new Camera3D();
  27.             addChild(viewport);
  28.            
  29.             camera.focus = 50;
  30.             camera.zoom = 1;
  31.             camera.x = 2000;
  32.             camera.y = 1100;
  33.             camera.z = -700;
  34.            
  35.             init();
  36.         }
  37.        
  38.         private function init():void {
  39.             //メモリ表示
  40.             addChild(new Stats());
  41.            
  42.             var _picmaterial:BitmapAssetMaterial = new BitmapAssetMaterial("Pic");
  43.             _picmaterial.doubleSided = true;
  44.            
  45.             for (var i:int = 0; i <= 6; i++) {
  46.                 for (var j:int = 0; j <= 8 ; j++) {
  47.                     var plane:Plane = new Plane(_picmaterial, 300, 300, 4, 4);
  48.                     plane.x = 500 * j;
  49.                     plane.y = 420 * i;
  50.                     scene.addChild(plane);
  51.                     _planeList.push(plane);
  52.                 }
  53.             }
  54.             addEventListener(Event.ENTER_FRAME, renderHandler);
  55.         }
  56.        
  57.         private function renderHandler(e:Event):void {
  58.             renderer.renderScene(scene, camera, viewport);
  59.             for (var i:int = 0; i <_planeList.length; i++) {
  60.                 _planeList[i].rotationY += 2;
  61.             }
  62.         }
  63.     }
  64. }

　
　
■presize=trueにした時のスピード検証

PLAIN TEXT
ACTIONSCRIPT:
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     import org.papervision3d.cameras.Camera3D;
  5.     import org.papervision3d.render.BasicRenderEngine;
  6.     import org.papervision3d.scenes.Scene3D;
  7.     import org.papervision3d.view.Viewport3D;
  8.     import org.papervision3d.materials.BitmapAssetMaterial;
  9.     import org.papervision3d.objects.DisplayObject3D;
  10.     import org.papervision3d.objects.primitives.Plane;
  11.    
  12.     import net.hires.debug.Stats;
  13.    
  14.     public class Main3 extends Sprite {
  15.        
  16.         private var camera:Camera3D;
  17.         private var scene:Scene3D;
  18.         private var viewport:Viewport3D;
  19.         private var renderer:BasicRenderEngine;
  20.         private var _planeList:Array = [];
  21.        
  22.         public function Main3() {
  23.             scene = new Scene3D();
  24.             viewport = new Viewport3D(510, 280, true);
  25.             renderer = new BasicRenderEngine();
  26.             camera = new Camera3D();
  27.             addChild(viewport);
  28.            
  29.             camera.focus = 50;
  30.             camera.zoom = 1;
  31.             camera.x = 2000;
  32.             camera.y = 1100;
  33.             camera.z = -700;
  34.            
  35.             init();
  36.         }
  37.        
  38.         private function init():void {
  39.             //メモリ表示
  40.             addChild(new Stats());
  41.            
  42.             var _picmaterial:BitmapAssetMaterial = new BitmapAssetMaterial("Pic", true);
  43.             _picmaterial.doubleSided = true;
  44.            
  45.             for (var i:int = 0; i <= 6; i++) {
  46.                 for (var j:int = 0; j <= 8 ; j++) {
  47.                     var plane:Plane = new Plane(_picmaterial, 300, 300);
  48.                     plane.x = 500 * j;
  49.                     plane.y = 420 * i;
  50.                     scene.addChild(plane);
  51.                     _planeList.push(plane);
  52.                 }
  53.             }
  54.             addEventListener(Event.ENTER_FRAME, renderHandler);
  55.         }
  56.        
  57.         private function renderHandler(e:Event):void {
  58.             renderer.renderScene(scene, camera, viewport);
  59.             for (var i:int = 0; i <_planeList.length; i++) {
  60.                 _planeList[i].rotationY += 2;
  61.             }
  62.         }
  63.     }
  64.    
  65. }

]]> http://chabudai.org/blog/?feed=rss2&p=265 ENDLESS NIGHTMARE http://chabudai.org/blog/?p=242 http://chabudai.org/blog/?p=242#comments Sun, 06 Sep 2009 05:49:38 +0000 chabudai http://chabudai.org/blog/?p=242
　
yuuri.co.uk の人と『ENDLESS NIGHTMARE』というプライベートサイトを作りました。ちょっと重いサイトなのですが、良かったら見に行ってみてください。
　
初めて人と一緒にプライベートワークをしましたが、最初にぼんやりとしかないイメージが何倍も良い形のデザインとなって返ってくるのはなかなかすごい体験でした。とても楽しく制作することができました。

ボタン音はMarkさん作。
その他、SEの一部はsoundbible.comのものを使用しています。
　
　
Credit
Design： yuuri (yuuri.co.uk)
Flash： chabudai
Special thanks：Mark

http://endlessnightmare.net/

]]> http://chabudai.org/blog/?feed=rss2&p=242 山と川と緑をもとめて丹波篠山へ http://chabudai.org/blog/?p=240 http://chabudai.org/blog/?p=240#comments Sun, 23 Aug 2009 16:17:46 +0000 chabudai http://chabudai.org/blog/?p=240

起きている間中パソコンやって、ちょっと寝るだけの生活が続いた8月。突発的に体が自然を要求し、遅いお盆休みを利用して日帰りで丹波篠山方面へ。
山と緑に囲まれて、命の洗濯をしてきました。
　
上の写真は着いてすぐお昼を食べに行ったお蕎麦屋さんからの景色。風の通る涼しい日本家屋で蕎麦を食べながら、ふと横を見ると見える風景がこれ。蝉が鳴いてて、小川の水音がして、風鈴が時々鳴ってて、夏。
　

そばがきというものを初めて食べました。
　

陶の郷方面へ。山、山！
　

一本の木陰に、駐車一台スペースという、空間を贅沢に使った駐車場。
　

子供のころに一度だけ捕まえたことがあって、いつかまた見たいと思っていた羽が黒くて体がエメラルドグリーンのトンボ。川べりの山道に全くありがたくないほど大量に飛んでた。実物は装飾品のように奇麗。見とれながらシャッターチャンスをうかがっている間にあちこち蚊にかまれる。
　

山、川、緑。
　

池。ほかに人は誰もいないので、完全に景色をひとり占め。
　
きっちり体の空気を入れ替えることができた、良い一日でした。

]]> http://chabudai.org/blog/?feed=rss2&p=240 FLARToolKitとPapervision3Dをもうちょっとだけがんばってみる http://chabudai.org/blog/?p=237 http://chabudai.org/blog/?p=237#comments Sun, 10 May 2009 19:55:46 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=237 前の記事から一ヶ月以上経ってしまいました…。

AS3.0が少しだけわかってきたので、FLARToolKitとPapervision3Dをもうちょっとだけがんばってみる。

今までこのブログに載せていたFLARToolKitは、すべてFLARToolKitに備え付けのサンプル、SimpleCube.asをもとにしていて、認識したマーカーと常に同じ座標に3Dオブジェクトが表示されているというものでした。これをもう少しだけ変更して、3Dオブジェクトを常にマーカーと同期させるのではなく、マーカーの座標を利用しながら3Dオブジェクトの動きを変化させることができるようにしたいと思います。

言葉だけではわかりにくいですが、以下のようなことがしたいわけです。
　

　
今回もFLARToolKitのサンプル、SimpleCube.asをもとに変更していきます。
（SimpleCube.asの動かし方はSaqoosha.net :: FLARToolKit スタートガイドから）
　
SimpleCube.asの44行目

this._baseNode.addChild(this._cube);

を見ると、cubeが_baseNodeにaddChildされていることがわかります。
_baseNodeとは何かとPV3DARApp.asを見ると、57行目で_sceneにaddChildされており、その一行上で_sceneというのはただのScene3Dということがわかるので、この_baseNodeがマーカーを認識して座標を変更しているものなのだな、と推測することができます。
　

そこでSimpleCube.asの44行目を_sceneにaddChildするように変更します。
ここでパブリッシュしても何も表示されません。
ENTER_FRAMEリスナーを作って、_cubeのx、y、z位置を_baseNodeと同じにするように書いてみます。

PLAIN TEXT
ACTIONSCRIPT:
  1. //44行目を以下に変更
  2. this._scene.addChild(this._cube);
  3.  
  4. //ENTER_FRAMEリスナーを作る
  5. this.stage.addEventListener(Event.ENTER_FRAME, onEnterframe);
  6.  
  7. private function onEnterframe(e:Event):void {
  8.     this._cube.x = this._baseNode.x;
  9.     this._cube.y = this._baseNode.y;
  10.     this._cube.z = this._baseNode.z;
  11. }

　

　
デモFlashはこちら
　
マーカーと同じ位置に_cubeが表示されています。
角度も同じにしたいので以下のように記述を変更してみます。

PLAIN TEXT
ACTIONSCRIPT:
  1. private function onEnterframe(e:Event):void {
  2.     this._cube.x = this._baseNode.x;
  3.     this._cube.y = this._baseNode.y;
  4.     this._cube.z = this._baseNode.z;
  5.     this._cube.rotationX = this._baseNode.rotationX;
  6.     this._cube.rotationY = this._baseNode.rotationY;
  7.     this._cube.rotationZ = this._baseNode.rotationZ;
  8. }

ところがこれでパブリッシュしても角度は変わりません。_baseNodeの各rotation
の値をtraceしてみるとすべて0のままです。なぜなんでしょう。わかりません。
　
もう少し調べてみると、Papervisionはオブジェクトの座標をMatrix3Dというので管理していることがわかります。

オブジェクトのtransformというプロパティがMatrix3Dのようなので、試しに以下のように記述を変更してパブリッシュしてみます。

PLAIN TEXT
ACTIONSCRIPT:
  1. private function onEnterframe(e:Event):void {
  2.     this._cube.transform = this._baseNode.transform;
  3. }

　

　
デモFlashはこちら
　
一応思い通りに動くようになりました。
ただこれではFLARToolKitのサンプルとほとんど同じなので、イージングをつけてみることにします。

Matrix3Dはなんかこんなのに↓それぞれ座標の値が入っていて

n11,n12,n13,n14,
n21,n22,n23,n24,
n31,n32,n33,n34,
n41,n42,n43,n44,
　
ちゃんと理解するのは難しいですが、
・n14=x座標、n24=y座標、n34=z座標
・角度に関係してそうなのは、n11～n13、n21～n23、n31～n33。

のようです。
　
とりあえず目標値から現在値を引いて、適当な数値で割ってみるという古典的な方法でイージングをつけてみました。

PLAIN TEXT
ACTIONSCRIPT:
  1. private function onEnterframe(e:Event):void {
  2. 　var speed:uint = 4;
  3.            
  4. 　this._cube.transform.n11 = this._cube.transform.n11+(_baseNode.transform.n11-this._cube.transform.n11)/speed;
  5. 　this._cube.transform.n12 = this._cube.transform.n12+(_baseNode.transform.n12-this._cube.transform.n12)/speed;
  6. 　this._cube.transform.n13 = this._cube.transform.n13+(_baseNode.transform.n13-this._cube.transform.n13)/speed;
  7. 　this._cube.transform.n14 = this._cube.transform.n14+(_baseNode.transform.n14-this._cube.transform.n14)/speed;
  8.            
  9. 　this._cube.transform.n21 = this._cube.transform.n21+(_baseNode.transform.n21-this._cube.transform.n21)/speed;
  10. 　this._cube.transform.n22 = this._cube.transform.n22+(_baseNode.transform.n22-this._cube.transform.n22)/speed;
  11. 　this._cube.transform.n23 = this._cube.transform.n23+(_baseNode.transform.n23-this._cube.transform.n23)/speed;
  12. 　this._cube.transform.n24 = this._cube.transform.n24+(_baseNode.transform.n24-this._cube.transform.n24)/speed;
  13.            
  14. 　this._cube.transform.n31 = this._cube.transform.n31+(_baseNode.transform.n31-this._cube.transform.n31)/speed;
  15. 　this._cube.transform.n32 = this._cube.transform.n32+(_baseNode.transform.n32-this._cube.transform.n32)/speed;
  16. 　this._cube.transform.n33 = this._cube.transform.n33+(_baseNode.transform.n33-this._cube.transform.n33)/speed;
  17. 　this._cube.transform.n34 = this._cube.transform.n34+(_baseNode.transform.n34-this._cube.transform.n34)/speed;
  18. }

　

　
デモFlashはこちら
　
　
最終ソースコード

PLAIN TEXT
ACTIONSCRIPT:
  1. package net.saqoosha.flartoolkit.example {
  2.    
  3.     import flash.events.Event;
  4.     import flash.events.MouseEvent;
  5.    
  6.     import org.papervision3d.lights.PointLight3D;
  7.     import org.papervision3d.materials.WireframeMaterial;
  8.     import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
  9.     import org.papervision3d.materials.utils.MaterialsList;
  10.     import org.papervision3d.objects.primitives.Cube;
  11.     import org.papervision3d.objects.primitives.Plane;
  12.    
  13.  
  14.     [SWF(width=640,height=480,frameRate=10,backgroundColor=0x0)]
  15.  
  16.     public class SimpleCube2 extends PV3DARApp {
  17.        
  18.         private static const PATTERN_FILE:String = "Data/patt.hiro";
  19.         private static const CAMERA_FILE:String = "Data/camera_para.dat";
  20.        
  21.         private var _plane:Plane;
  22.         private var _cube:Cube;
  23.        
  24.         public function SimpleCube2() {
  25.             this.addEventListener(Event.INIT, this._onInit);
  26.             this.init(CAMERA_FILE, PATTERN_FILE);
  27.         }
  28.        
  29.         private function _onInit(e:Event):void {
  30.             this.removeEventListener(Event.INIT, this._onInit);
  31.            
  32.             var wmat:WireframeMaterial = new WireframeMaterial(0xff0000, 1, 2);
  33.             wmat.doubleSided = true;
  34.             this._plane = new Plane(wmat, 80, 80);
  35.             this._baseNode.addChild(this._plane);
  36.            
  37.             var light:PointLight3D = new PointLight3D();
  38.             light.x = 1000;
  39.             light.y = 1000;
  40.             light.z = -1000;
  41.             var fmat:FlatShadeMaterial = new FlatShadeMaterial(light, 0xff22aa, 0x0);
  42.             this._cube = new Cube(new MaterialsList({all: fmat}), 40, 40, 40);
  43.             //this._cube.z = 320;
  44.             this._scene.addChild(this._cube);
  45.            
  46.             this.stage.addEventListener(MouseEvent.CLICK, this._onClick);
  47.             this.stage.addEventListener(Event.ENTER_FRAME, onEnterframe);
  48.         }
  49.        
  50.         private function onEnterframe(e:Event):void {
  51.             var speed:uint = 4;
  52.            
  53.             this._cube.transform.n11 = this._cube.transform.n11+(_baseNode.transform.n11-this._cube.transform.n11)/speed;
  54.             this._cube.transform.n12 = this._cube.transform.n12+(_baseNode.transform.n12-this._cube.transform.n12)/speed;
  55.             this._cube.transform.n13 = this._cube.transform.n13+(_baseNode.transform.n13-this._cube.transform.n13)/speed;
  56.             this._cube.transform.n14 = this._cube.transform.n14+(_baseNode.transform.n14-this._cube.transform.n14)/speed;
  57.            
  58.             this._cube.transform.n21 = this._cube.transform.n21+(_baseNode.transform.n21-this._cube.transform.n21)/speed;
  59.             this._cube.transform.n22 = this._cube.transform.n22+(_baseNode.transform.n22-this._cube.transform.n22)/speed;
  60.             this._cube.transform.n23 = this._cube.transform.n23+(_baseNode.transform.n23-this._cube.transform.n23)/speed;
  61.             this._cube.transform.n24 = this._cube.transform.n24+(_baseNode.transform.n24-this._cube.transform.n24)/speed;
  62.            
  63.             this._cube.transform.n31 = this._cube.transform.n31+(_baseNode.transform.n31-this._cube.transform.n31)/speed;
  64.             this._cube.transform.n32 = this._cube.transform.n32+(_baseNode.transform.n32-this._cube.transform.n32)/speed;
  65.             this._cube.transform.n33 = this._cube.transform.n33+(_baseNode.transform.n33-this._cube.transform.n33)/speed;
  66.             this._cube.transform.n34 = this._cube.transform.n34+(_baseNode.transform.n34-this._cube.transform.n34)/speed;
  67.         }
  68.        
  69.         private function _onClick(e:MouseEvent):void {
  70.             this.mirror = !this.mirror;
  71.         }
  72.        
  73.     }
  74. }

]]> http://chabudai.org/blog/?feed=rss2&p=237 背景が黒いWebページにQRコード載せるときは注意が必要 http://chabudai.org/blog/?p=235 http://chabudai.org/blog/?p=235#comments Sun, 22 Mar 2009 17:33:22 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=235 QRコードを配置したページの背景が黒い場合、携帯電話のQRコードリーダーの認識が悪くなることがあるようです。これは良く考えれば当たり前なのですが、画面が暗いとQRコードを読み取るカメラが明るさを勝手に調整して白い部分が光ったようになってしまうからです。

以下は背景が黒い場合と白い場合のQRコードを読み取った画面の比較画像です。背景が黒いと左のように光って、QRコードがほとんど見えなくなっています。


　
実際に試したい場合は以下のサンプルページから。
画面クリックで黒いページと白いページが切り替わるので、携帯電話をかざしたままクリックすると、カメラが自動的に明るさを調整する様子が良くわかると思います。
※トリニトロンのモニターだと輝度が低いため、この現象が起こらないようです。

サンプルページ01 （画面クリックで切り替わります）
　
以下のように、QRコードの明度を下げたり色をつけたりしてコントラストを低くくすれば回避することができます。

サンプルページ02 （画面クリックで切り替わります）
　
もちろんQRコード自体を大きくすることでも認識を上げることができます。ただ多少大きくするよりかは、明度を下げる方が認識度が高いです。

携帯の機種やモニターの明度にも関係して必ず起こる現象ではありませんし、QRコードリーダーの明るさ調整で調整すれば読み取ることもできますが、背景が黒いWebページにQRコードを載せる時はデザインに注意が必要そうです。

]]> http://chabudai.org/blog/?feed=rss2&p=235 FLARToolKitを使った素敵コンテンツ http://chabudai.org/blog/?p=233 http://chabudai.org/blog/?p=233#comments Tue, 24 Feb 2009 19:25:29 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=233 FLARToolKitを使った素敵コンテンツを2つご紹介。

bow

ひとつ目はボストーク株式会社さんの名刺連動コンテンツ『BOW』。
シンプルなキャラクターの可愛さ、小学校の図工の時間を思い出させるような楽しいデザインが素敵なサイトです。
BOWさんの名刺に印刷されているマーカーでサイト内のFLARToolKitコンテンツを体験することが基本になっていますが、名刺がなくても自分でカスタムデザインしたFLARToolKit用アバターを作って遊ぶことができたり、FlickerやTwitterと連携させる仕組みも用意してあったりと、目一杯工夫がこめられたコンテンツです。
その他、FLARToolKitでマルチマーカー（複数のマーカーで複数のモデルを表示する）を使ったコンテンツは珍しいので、そこも見所。
　
　
aid-dcc

二つ目は既にご存知の方も多いと思いますがAID-DCC/カタマリの年賀コンテンツ『HAPPY NEW YEAR '09』。
こちらはAID-DCC/カタマリから送られたFLARToolKit用マーカー付きの年賀状を用意してサイトにアクセスすると、今年一年のメッセージを含んだ3Dアニメーションが見られるというものです。
　

FLARToolKitは、初めて見た人にインパクトのある体験と驚きを与えることの出来る面白い技術ですが、素敵コンテンツに仕上げるためには
・体験するためにはWebカメラとマーカーが必要
・FLARToolKitはFlashにとっては負荷の高い処理なので、動きが重い
という2点のハードルをクリアしなければなりません。
　
紹介した2つのコンテンツは1点目に関しては、
前者は名刺を利用する、後者は年賀状を利用することでマーカーを用意しなければならないというユーザーの負担を軽くし、
2点目に関しても、
前者はローポリゴンで上手にデザインされたキャラクターを使い、カスタムできたり、マルチマーカーを使ったりすることで処理の重さを上回る楽しさを演出しています。
後者はマーカーから飛び出すラインやテキストのスピード感や軽快さが失われないように配慮されており、途中でマーカーとの同期が外れても気にならない作りのアニメーションになっています。

これらをお手本にして、デモどまりのものしか作れていない私も、FLARToolKitを使った楽しいコンテンツを作りたいなあと思っています。
FLARToolKitはGPLライセンスで配布されているため、使用しているコンテンツはソースコードの公開が義務付けられており、クライアントワークでは使いづらい事情があったのですが（紹介したコンテンツは2つとも自社コンテンツですね）、つい最近商用ライセンスで使用できる準備が整ったみたいなので、今年はFLARToolKitを使用した面白い商用コンテンツも目にする機会が増えるかもしれません。
　

ついでにおまけ

せっかくGPLライセンスなので、公開されているソースコードはぜひ自分で試さなければ！と思ってやってみたら引っかかってしまったことをメモしておきます。
さくーしゃさんのブログでも触れられているように、コンパイラ？のメモリ不足でFlashがうまくパブリッシュできないときは、環境変数を設定することで回避できるようなのですが、この記事どおり設定してもWindowsの場合「JRE（Java Runtime Environment）の初期化時にエラーが発生しました。」というエラーが出てパブリッシュできないことがあります。
　

　
これは設定する1024Mという値が大きすぎることから起こるようで、以下のようにもっと小さな値に設定すれば出なくなります。自宅のマシンでは低めに128Mと設定しましたが、これでも問題なくパブリッシュできました。
　

]]> http://chabudai.org/blog/?feed=rss2&p=233 このあいだのFLARToolKit使ったやつのソースと、その動かし方の解説 http://chabudai.org/blog/?p=225 http://chabudai.org/blog/?p=225#comments Mon, 26 Jan 2009 14:45:03 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=225 いまさらな感じですが、12月のてら子で発表したFLARToolKitの使ったやつのソースを公開しました。

xmas_sample_flartoolkit.zip

FLARToolKitの中に入っているサンプルファイルとほとんど同じで、公開するほどのものでもない･･･て感じなのですが、以前解説したFlexBuilderでFLARToolKit動かす記事が古くなっててあまり参考にならないというのもあり、今回公開したソースファイルを動かすまでの手順を書いておきます。FLARToolKit備えつけのサンプルファイルも同じ手順で動かせます。
今回はFlexBuilderもFlashDevelopも使わず、Flash CS3単体で動かしてみます。

必要なライブラリのダウンロード

・FLARToolkit（TortoiseSVNなどでダウンロード）

・Papervison3D

・Tweener

FLARToolkitとPapervison3Dは必須です。Tweenerは、FLARToolKit備えつけのサンプルファイルでは必要ないですが、今回動かすソースで使っているのでダウンロードしてください。
　
FLARToolKitのtrunk以下をダウンロードすると以下のようになっています。


　

Papervision3DとTweenerを解凍し、中身のファイルをsrcフォルダ内にコピーします。
　

　
今回実際に動かすxmas_sample_flartoolkit.zipを解凍して出来たsamplesフォルダの中身を、FLARToolKitのsampleフォルダ内へコピーします。
　
このようなファイル構造になります。


　
samplesフォルダ内のSimpleXmas01.flaを開きます。

「パブリッシュ設定」-「ActionScriptのバージョン 設定」を開き、ドキュメントクラスが「net.saqoosha.flartoolkit.example.SimpleXmas01」になっていること、FLARToolkitのsrcフォルダにクラスパスが通っていることを確認します。（最初からそうなっているはずです）


　
パブリッシュすると動きます。
　

　
左上のステータス表示は
samples/net/saqoosha/flartoolkit/example/PV3DARApp.as
ファイルの61行目、
this.stage.addChild(new StatsView(this._renderer));
をコメントにすると消えます。
　
雪を降らしたり、クリスマスツリーのモデリングデータを読み込むスクリプトは
samples/net/saqoosha/flartoolkit/example/SimpleXmas01.asファイルに書いてあるので、興味のある人は見てみてください。
　
ドキュメントクラスを「net.saqoosha.flartoolkit.example.SimpleCube」に変えると、FLARToolKitに備え付けのキューブを表示するだけのシンプルなサンプルを動かすことが出来ます。自分でいろいろ試してみたい場合はこちらのファイルを変更していくと分かりやすいと思います。

]]> http://chabudai.org/blog/?feed=rss2&p=225 注文してたものが届いた http://chabudai.org/blog/?p=220 http://chabudai.org/blog/?p=220#comments Wed, 31 Dec 2008 12:31:16 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=220

三ノ宮の革靴職人さんに注文していたものが届いた。
とても気に入ったので写真撮ってブログにアップ。
　

　

これ何かというとPCのキャリングケースです。皮でつくってもらいました。
　
　

あつらえたようにぴったりです。（あつらえたので）
しまうときにふたを開ける手間が面倒くさいので、ふたなしのものを頼みました。サイズがぴったりなのでふたがなくても出てきたりしない。このまま充電もできる。
　
　

PCのななめのところもちゃんと作ってあるー。
　
　

PCを持っているようにはとても見えない。
　
　

（手前に植物などを入れてぼかすとそれっぽい写真が撮れる、というのを鵜呑みにして実践してみた。）PC入れるケースって黒とかグレーばっかりなのでオーダーメードで頼んでみたけど全然高くなかったし、ほんと作ってもらってよかったです。来年はPCをこれに入れて勉強会とか行く！
　
　
それではFlashと全く関係ないエントリーで2008年を締めくくりつつ、皆様良いお年を。

]]> http://chabudai.org/blog/?feed=rss2&p=220 Blenderのアニメーション付きファイルをPapervision3Dで表示する http://chabudai.org/blog/?p=217 http://chabudai.org/blog/?p=217#comments Thu, 18 Dec 2008 14:31:38 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=217
　
Blenderで作ったアニメーションを、Papervision3Dで使う方法の解説です。
Flashで3Dアニメーション付きのファイルを扱う場合、3DソフトはフリーソフトのBlender、FlashはPapervision3Dのライブラリを使用するのがポピュラーみたいです。

Papervison3Dでアニメーション付きの3Dファイルを読み込む場合は、Collada形式（拡張子.dae）のファイルを使用するのですが、BlenderからPapervision3Dで使えるdaeファイルを書き出すのが、ちょっといやかなりやっかいで、この工程が作業の中で一番のポイントとなります。私もうまくいくまでほんと何度も失敗しました。
試行錯誤した結果、重要だったのは以下の2点でした。
　
・Blenderの最新安定版（12月18日現在2.48a）をインストールすること
・Python2.5.2（←最新版ではないので注意）をインストールすること
　
↑の環境以外では以下に記述するとおり作業を進めても、daeファイルをエクスポートできません。逆に言えばこの2点を押さえておけばできたも同然です。

注意：BlenderもPapervision3Dもしょっちゅうバージョンアップされるので1～2ヶ月も経てば最適な環境は変わってくると思います。気が付いた時点で追記していくつもりですが、新しいバージョンが出てる場合はそちらを試してください。

それでは以下から順を追って説明していきます。
　

Blenderのインストール

まずはBlenderとPythonのインストールです。以下のページからBlender 2.48aとPython2.5.2をダウンロードし、インストールしてください。

blender.org - Get Blender
Python 標準リリース
　
Blenderの基本的な使い方は以下のページから。
・http://jp.youtube.com/profile?user=KyusanForestCreators&view=videos
・Blenderチュートリアル - WBS+(Web/Blender Studio+)
　

BlenderからCollada(dae)形式にエクスポートする

Blenderをインストールしたら、適当にアニメーションを付けたファイルを用意します。

チュートリアルなんか読んでられない、とりあえず手っ取り早く動かしたいという人は、以下のサンプルファイルをダウンロード。（キューブを回転させてるだけのファイルです）

・cube.blend.zip
　
daeファイルをエクスポートします。
アニメーションを付けたオブジェクトを右クリックで選択した後、
　

　
[File]-[Export]-[COLLADA 1.4(.dae)]を選択。
　

　
1. [...]を選択して書き出し先を指定。ファイル名には.daeという拡張子を忘れずに。
2. 3. 「Only Export Selection」と、「Sample Animation」を選択。
4. Exportボタンをクリック。「Export Successful」と出れば成功！！
　
解説： 「Only Export Selection」 - 選択したオブジェクトだけをエクスポートする
「Sample Animation」 - キーフレーム間の補完したアニメーションをエクスポートする
その他、書き出しパネルについては以下の記事が詳しいです。
Blender 2.48aにおけるColladaのエクスポート（アニメーション無し編） - 戸袋に手を挟まれないように
　

Papervision3DでCollada(dae)ファイルをインポート

Papervision3DはこのページのFeatured Downloadsからダウンロードできます。
Papervision3Dの基本および、アニメーションなしの（daeファイル読み込みについてはアニメーションありもなしも一緒なので記述を修正）daeファイル読み込みについては以下のブログを参考にしてください。

Papervision3Dやってみるシリーズ | [FlaTech+]WebDesign Rainyday
　
flaファイルを作ります。先ほど書き出したdaeファイルも同じ場所に置いてください。
Main.asというドキュメントクラスを作って以下のソースをコピペします。

PLAIN TEXT
ACTIONSCRIPT:
  1. package {
  2.     import org.papervision3d.objects.parsers.DAE;
  3.     import org.papervision3d.view.BasicView;
  4.  
  5.     public class Main extends BasicView {
  6.         private var daeObj:DAE;
  7.         public function Main() {
  8.             camera.x = 4;
  9.             camera.y = 3;
  10.             camera.z = -4;
  11.             daeObj = new DAE();
  12.             //Loopさせたい時は↑をコメントアウトして、↓のコメント外す
  13.             //daeObj = new DAE(true,null,true);
  14.             daeObj.load("cube.dae");
  15.             scene.addChild( daeObj);
  16.  
  17.             startRendering();
  18.         }
  19.     }
  20. }

　

パブリッシュしてうまく行くとこんな感じになります。
　

　　
flaファイル、asファイル、daeファイルをまとめたzipファイルもアップしておきます。
・cube.zip

（おわり）
　
なんかリンク貼りまくりな記事になってしまいました。リンクを貼らせていただいたページにはとてもお世話になりました。ありがとうございました。
その他、note.xさん、タロタローグさんも、かなり参考にさせていただきました。
どの記事がなくても前回のエントリーの動かすのできなかっただろうな･･･。

]]> http://chabudai.org/blog/?feed=rss2&p=217 大阪てら子 18 「Flasherのクリスマス大喜利」で発表してきたもの http://chabudai.org/blog/?p=214 http://chabudai.org/blog/?p=214#comments Sun, 14 Dec 2008 08:30:15 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=214
　
先週の土曜、12月6日の大阪てら子で、BlenderとFLARToolKitを使ってクリスマスにちなんだものを作り、発表してきました。
6月の大阪てら子で発表したやつの続編です。6月の発表では3Dソフトで作成したモデルデータをFLARToolKitで表示するだけだったのですが、今回はそのモデルデータを動かすところまで挑戦してみました。

まずは以下が最初に作ってみたもののデモ。
WebカメラとFLARToolKit用のマーカー（→こちらから）が必要です。
　
FLARToolKitで3Dモデル動かすデモ01
　
Webカメラ持ってねーよもしくはマーカー印刷すんのめんどいって方のためのデモ動画。


　
一応モデルデータや雪を動かしてますが、これはスクリプトで回転させたり移動させたりしているだけなので、技術的には前回の発表とほとんど変わりないです。

今回初挑戦したのはBlenderで作成したアニメーションをFLARToolKit上で動かすというもの。以下がそのデモです。
　

FLARToolKitで3Dモデル動かすデモ02
　
Webカメラ持ってねー以下略の方のためのデモ動画。


　
箱から出てきてるのはこれの"O"なんですけど、誰も気付いていませんでした。

こういったキャラクターの動きみたいなのはスクリプトだけで作ろうとしてもなかなか難しいので、3Dソフトで作ったアニメーションをFlashに取り込めれば、表現の幅を広げることができそうです。
Blenderで作ったアニメーションをFlashで動かす方法は、このブログで次の記事から書いていきます。
　
[追記]上記デモのソースファイル公開しました。
xmas_sample_flartoolkit.zip (source code) 解説はこちら
　

最後に大阪てら子18で発表された他の方のブログ記事へのリンクなど。

みのんさん
minomix blog » 大阪てら子 18 で発表したやつなど
今回のクリスマス大喜利で1番に選ばれたみのんさんの作品が見られます。Spaceボタンを押すとカタルシスが！！
　
パンツカムヨさん
崖っぷちWEBデザイナーブログ | 大阪てら子 18「 Flasherのクリスマス大喜利」で作ったもの
いつも可愛くてどこか毒のある作品を作るパンツカムヨさんのクリスマスけしからん！Flash。おまけ動画が無駄にリキ入っていてかなり見もの。
　
idoさん
簡単に雪が作れるライブラリを紹介してくれました。
FLiNT particle sysytem
雪だけではなく、炎とか、パーティクルで作れそうなものはなんでも作れるそうです。デモとして見せてくれたクリスマスツリーのある景色きれいだった。

]]> http://chabudai.org/blog/?feed=rss2&p=214 TeraClockのAS2版を使ってみよう http://chabudai.org/blog/?p=72 http://chabudai.org/blog/?p=72#comments Sun, 30 Nov 2008 14:09:08 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=72 Web Designing 12月号、連載「ActionScriptライブラリ」のTeraClock編で、TeraClock使用例として、他のTeraClockerさん達の作品とともに、ホネホネ・クロックを紹介していただきました。とてもとても嬉しいです。
Webサイトにも載っけていただいてる様子･･･。teraさん、Web Designingさん、ありがとうございます！

さて、そんな素敵ライブラリのTeraClockですが、uranodai さんという方が移植してくださっていて、AS2でも使えます。ただAS2版の使い方が解説されてなく、使ってみたときにちょっととまどったのでメモしておきます。

TeraClock AS2版のダウンロードは以下から。
http://www.libspark.org/svn/as2/TeraClock/

使い方

と言っても使い方はAS3版とほとんど同じです。
違うのは1箇所だけ！TeraClockインスタンスを作成する際に引数としてMovieClipを渡すことです。一番シンプルな書き方は以下のような感じでしょうか。

var clock:TeraClock = new TeraClock(this);

ただTeraClockAS2版は、渡したMovieClipに対してonEnterFrameを使うので、その後this.onEnterFrameを使ってしまうとTeraClockが動かなくなります。なのでthisを渡すよりは、TeraClock専用のMovieClipを作ってそれを渡す方が無難でしょう。

TeraClock AS3版に付いているサンプルコードと同じようなことをAS2版でする場合のスクリプトは以下のようになります。

PLAIN TEXT
ACTIONSCRIPT:
  1. import uranodai.utils.TeraClock;
  2.  
  3. var mc:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth());
  4. var clock:TeraClock = new TeraClock(mc);
  5. clock.addEventListener(TeraClock.SECONDS_CHANGED,secondsListener);
  6. clock.addEventListener(TeraClock.MINUTES_CHANGED,minutesListener);
  7. clock.addEventListener(TeraClock.HOURS_CHANGED,hoursListener);
  8.  
  9. function secondsListener():Void {
  10. trace(clock.seconds+"秒です。現在："+clock.hours+":"+clock.minutes+":"+clock.seconds+" です。");
  11. }
  12. function minutesListener():Void {
  13. trace(clock.minutes+"分になったよ。");
  14. }
  15. function hoursListener():Void {
  16. trace(clock.hours+"時になったよ。");
  17. }

上記のスクリプトを、Flashファイルのフレームにコピペしてください。
newする時以外はAS3版と全く同じ書き方で動くので、その他詳しい解説はTeraClock作者teraさんのブログの記事かWebDesigning12月号を参考にしましょう。

trick7.com - Flashで時計作る時に - 「TeraClock」ライブラリ作りました

AS3版と同じでアナログ時計も作れるよ

AS2でもEventDispatcherというのを使えば、AS3と全く同じようにイベントリスナーが使えるんですね。本当に良く出来てます！その他AS3版に付いているアナログ時計の機能なども、まるコピーするだけで使えるようになります。
そのコピペしただけのものをこっそりコミットしておいたので、アナログ時計を作りたい方は使ってみてください。（こんなのコミットしてもいいのだろうか。。。）
使い方はAS3版と同じなので以下の記事か、WebDesigning12月号を参考に。

trick7.com - TeraClock でアナログ時計も簡単に作れます

]]> http://chabudai.org/blog/?feed=rss2&p=72 swap symbols in the same layer をフォルダ内のシンボルにも使えるように http://chabudai.org/blog/?p=138 http://chabudai.org/blog/?p=138#comments Tue, 18 Nov 2008 12:46:41 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=138 前回の記事のコメントでFlashのExtension「swap symbols in the same layer」のエラーの原因（ライブラリのフォルダの中にあるシンボルを置き換え先として指定するとエラーが出る）を教えてもらったので、もしかしたら自分で直せるかなと思い、調べてみたら本当に簡単に直せたのでメモとして残しておきます。
　
まずインストールしたswap symbols in the same layerのjsflを探します。
jsflファイルはWindowsなら

C:\Documents and Settings\ユーザー\Local Settings\Application Data\Adobe\Flash CS3\ja\Configuration\Commands

または

C:\Documents and Settings\ユーザー\Local Settings\Application Data\Macromedia\Flash 8\ja\Configuration\Commands

のような場所にあります。

※フォルダオプションで「すべてのファイルとフォルダを表示する」にしておかないと見つかりません。
※場所が良くわからない場合は「swap symbols in the same layer.jsfl」をDocuments and Settingsとかから検索すればOK。

　
jsflファイルが見つかったら、テキストエディタなどでjsflファイルを開きます。
104行目を以下のように変更します。

PLAIN TEXT
JAVASCRIPT:
  1. doc.swapElement(libItem[0].name);

↓

PLAIN TEXT
JAVASCRIPT:
  1. doc.swapElement(libItem.name);

　
なんかこんな大げさに書くこともないというか、[0]を取るだけです。これで保存して、Flashでswap symbols in the same layerを使うと、ライブラリのフォルダ内のシンボルにも置き換えできるようになっていると思います。
バージョンは8でもCS3でも同じです。修正は自己責任でお願いします。

　
修正するにあたっては以下のPDFファイルを参考にしました。
（結局ほとんど必要なかったけど･･･）
http://livedocs.adobe.com/flash/9.0_jp/main/flash_cs3_extending.pdf

[ 参考ブログ ] JSFLとJSF - FICC LABS
　
修正したjsflファイルをmxpファイルにもしてみたのですが、mxpファイルの作り方は以下のブログの記事が参考になりました。
[ 参考ブログ ] Tanablog: MXP ファイルの作り方

]]> http://chabudai.org/blog/?feed=rss2&p=138 Extension（JSFL）を使うとFlashがもっと便利になるよ http://chabudai.org/blog/?p=61 http://chabudai.org/blog/?p=61#comments Sun, 02 Nov 2008 13:43:20 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=61 Flashを使い始めて間もない人の中には、Flash Extension（JSFL）というものがあることを知らない人がいるかもしれません。
Flash ExtensionはFlashの機能を拡張するプラグインのようなものです。自分で作ることができるので、多くの人が便利なExtensionをWeb上で公開されています。
Flashはデフォルトのままだと細かいところで融通が利かず、面倒くさい作業を繰り返しおこなわなければならないことが多々あります。そういった作業を自動的にやってくれるExtensionを見つけてインストールすれば、Flashの使い勝手が格段に良くなります。
　
まずは私が実際に使っていて、もうこれなしでは作業できないというExtensionをいくつかご紹介。（ExtensionをインストールするにはExtension Managerが必要です）
　

  • EachTransformer（Flash cs3のみ）
    illustratorでいうところの「個別に変形」を実現してくれるツールです。
    eachtransform.png
  • [JSFL] setInstanceNames
    キーフレームたくさんのアニメーションを付けてしまった後でもMovieClipに一発で名前を付けてくれるExtension。eachtransform.png
  • [JSFL] swap symbols in the same layer
    キーフレームたくさんのアニメーションを付けてしまった後でも、シンボルの置き換えが一発できるExtension。（実はこれ一番良く使ってたのですが、最近エラーが出て使えなくなってしまってとても困ってます。誰か似た機能で使い方シンプルなExtension知っていたら教えてください。）
    [追記] どうやら置き換え先として指定するシンボルが、ライブラリのフォルダの中に入っている場合にエラーが出るようです。フォルダから出して指定すると使えました。（ちくわさん、教えていただいてありがとうございました。）

　
　
その他Flash Extensionがたくさん紹介されているページ

ステージ上のMCの位置を整数値にまるめる、ライブラリのプロパティを一括設定するなど、誰もがほしいと思う機能のExtensionは似たようなものがたくさんあります。（リンケージを一括設定する機能は、Progression3にも付いています。）使い比べて自分にしっくりくるのを探すのも良いでしょう。

　
Flash Extensionが紹介されている本

FLASH OOP for ActionScript 3.0の第3章にも便利なFlash Extensionがいくつか紹介されています。いまさら紹介するまでもない有名な本ですが、とても良い本なのでまだ持っていない方はぜひ。
この本に載っている「this_codehint」というExtensionも便利でおすすめです。
]]> http://chabudai.org/blog/?feed=rss2&p=61 Progression３都物語 workshop in Kyoto, Osaka, Kobe に参加します http://chabudai.org/blog/?p=60 http://chabudai.org/blog/?p=60#comments Fri, 17 Oct 2008 17:48:38 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=60
　
巷で話題のFlashフレームワーク「Progression」のワークショップが関西3都市でおこなわれることになったので参加しようと思っています！
　
ワークショップの詳細ページはこちら
Progression３都物語 - workshop in Kyoto, Osaka, Kobe -
（参加申し込みページも↑からリンクされています）

大阪と神戸は参加枠にまだ余裕があるので、AS3ビギナーで参加を迷ってるような方もどんどん参加すればいいんだと思います。私もAS3超ビギナーです（涙目）。
　
Progressionフレームワークを使えるようになると、高度に設計されたフルFlashサイトがかなり制作時間を短縮して作れるようになる、と素人考えで理解しています。
わかりやすいところで言うと、前にこのブログでも取り上げたswfAdressや右クリックメニューのカスタマイズが標準でサポートされていたりします。
制作時間を短縮できるだけでなく、Flashエキスパートでない人間では実装がかなり難しいっていうか無理ってゆーぐらいレベルの高いFlashサイトが作れるようなので、頑張って覚えたいと思っています。
　
ハンズオンてきなワークショップなので参加にはノートパソコンとFlashCS3が必要です。
FlashCS3持ってないよという人はとりあえず、体験版をインストールすれば大丈夫。

私は1ヶ月ほど前に体験版をインストールして使用期限が過ぎてしまったので、買わざるを得ないんですが･･･。Flashブログみたいなものを書いていながらCS3持っていなかった私もついに個人でCS3を購入しなければならない日がやってきたわけですが、今CS3買ったら無料でCS4にアップグレードできます！みたいなのになるのっていつですかね！？できればそうなってから買いたかったんですけどもう間に合わなそうなので明日あたりヨドバシいって買ってこようと思ってます。

]]> http://chabudai.org/blog/?feed=rss2&p=60 ホネホネ・クロック [時計・ブログパーツ] http://chabudai.org/blog/?p=59 http://chabudai.org/blog/?p=59#comments Mon, 22 Sep 2008 21:07:24 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=59
　
大阪てら子17で発表した時計、ホネホネ・クロックです。honehoneちゃんというもじもじくんみたいなキャラクターが数字になっているという時計です。
1→2→3・・・9→0　という一方向のみのアニメーションしか作ってないので、59秒から00秒になるとき、24時から00時になるときなどが見所です。
　
小さくしたら、まあ、か・可愛いかな・・・と思いブログパーツにしました。
　

背景透明バージョン
白とか薄い背景におすすめ		 背景白バージョン
黒とか濃い背景におすすめ

　

貼り付けるコードはこちら↓

PLAIN TEXT
JAVASCRIPT:
  1. <script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>

背景透明バージョン
　

PLAIN TEXT
JAVASCRIPT:
  1. <script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"></script>

背景白バージョン
　
　
時間、分、秒をロールオーバーすると拡大するユニバーサル機能？付きです。

]]> http://chabudai.org/blog/?feed=rss2&p=59 大阪てら子17、テーマは東京てら子5と同じ「Flash で時計大会」！ http://chabudai.org/blog/?p=58 http://chabudai.org/blog/?p=58#comments Sun, 21 Sep 2008 20:04:48 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=58 9月20日大阪てらこ17、お題は「Flash で時計大会」。
先週のFPSでタイムラインの楽しさを思い出した私は（FPSに関してはまたブログに書きます）、今回はFlashでタイムラインアニメーションばりばりのものを作ることをテーマに発表してきました。

発表に使用したスライドはこちら↓。
（右半分をクリックすると進む、左半分をクリックすると戻ります）


　
ASも好きだけどタイムラインもね。
その他の方々の発表の感想と、ブログ等へのリンクは以下に。
　

1.シナチクさん

SAKOTSU INSPIRE - 阪てら子17 には参加できなかったけどTeraClock使って時計は用意しといたよ

今回シナチクさんは用事があるため出席できなかったのですが、作品は用意してくれてました。相変わらずのシナチクワールド炸裂。でもシナチクさんの撮る写真はなかなか美しいんですよね。その写真とFlashのグラフィックを組み合わせて独特の世界観を構築していました。
　

2.みのんさん

minomix blog - 大阪てら子17に作ったやつとか

Marilenaの顔認識ライブラリを使って時計のグラフィックに落とし込んでいました。カメラで写真を取り込んだら顔がどんどん増えていくのが面白い。写真は50枚までキャッシュできるそう。せっかくなのでその場にいる人全員の顔を取り込んだとこが見たかった！
　

3.ノブヒデさん

NBHD6119 - TERACO

Flashのアニメーションをうまく利用して、新しいデザインの時計を作る。今回のお題に対して一番正統派な解の切り口ではないでしょうか。私もここ何週間かずーっと新しい時計の仕組みを考えていたのですが結局思いつかず･･･。既存のアナログ時計のデザインってまじすごいなーとか思ったのみで終わり。難題をやりきったノブヒデさんはさすが。
このアニメーションをTweenerなどのアニメーションライブラリを使わずに作ったという謎の苦労話が素敵でした。
　

4.パンツカムヨさん

崖っぷちWEBデザイナーブログ - 大阪てら子 17 Flash で時計大会

Flashでドラムマシーン。もうその可愛さと完成度の高さはパンツカムヨさんのブログを見ればわかるかと思います。
この作品も良いのですが、発表時に使ってたスライドの凝りように驚いた。微妙に光ったテキストが宇宙の星のようにちりばめられていて、それが中心に集まって文章になるというもの。ぜひこのスライドも公開してほしいです。
この後に発表した私のスライドがテキスト打っただけの冒頭のあれ↑だったわけで・・・悲惨。

[追記] スライドについての記事もアップされています。
崖っぷちWEBデザイナーブログ - 大阪てらこ17 おまけ　自己紹介用のやつ
　

5.ちゃぶ台

もじもじくんのようなキャラクターが各数字になっているデジタル時計を作りました。アニメーションの中ではキャラクターアニメーションを作るのが一番好き。スクリプト書いてた時間は全制作時間の5％くらいですね。
作ったものは次の記事で。
　

6.カッシーさん

stid blog - 大阪てら子 17 Flash で時計大会

時間がくるくるまわって出てくるきれいな時計でした。文字をFlashでアニメーションさせたり効果つけたりするときは一回ビットマップに変換してからアニメーションさせると。テキストにロールオーバーすると文字が炸裂してましたw。
　

7.さくーしゃさん

Saqoosha.net - Sonicode Clock

Flash Player 10 から音をごにょごにょできる機能が追加されるらしく、それを使って音の波形をエラいことにしていました。あとそれをiPhoneでも操作していました。私に解説できるようなシロモノでないので詳細はさくーしゃさんのブログで。
　

8.hoehoeさん

hoelog - Flash : 画像認識でアナログ時計をデジタル時計に変換する

リアルのアナログ時計をWebカムで認識して、PC上でデジタル時計に変換させるという、恐ろしく無駄に高度な技術の作品を見せてくれました。ハフ変換というのを使ってアナログ時計の針の傾きを認識するそうですが、半周分の角度の計算しかできないことと、短針と長針が重なったときにどう認識するかが課題だそうです。ハフ変換という言葉は覚えた。ハフ変換。
　

9. slnsyndicateさん

5 1 G N W 4 V 3 C L 0 C K V 3 R . 0 . 1

音の時計のスクリーンセーバ。音の高低で時間が表現されています。私は音感が全然ないのですが、絶対音感があると割と正確に時間がわかったりするのでしょうか。家のPCにインストールしたかったんですけどできなかった･･･（WindowsXP SP2）。
　

ケンタロウさん

FICC

その後、飛び入りのような感じでケンタロウさんが、FICCの制作物の紹介や制作秘話などを話してくれました。ものすごく話が上手くて引き込まれたんですけど、全部アドリブ、、、なんだぜ・・・？
ケンタロウさんの何分の一かで良いのでうまく話せる能力がほしいです。
　
　
・USKさんのブログにもレポがアップされています
trace | Mr.littleBIG - 大阪てらこ１７

]]> http://chabudai.org/blog/?feed=rss2&p=58 クラスファイルを保存するフォルダ名について、あとWebDesigningとか http://chabudai.org/blog/?p=57 http://chabudai.org/blog/?p=57#comments Fri, 05 Sep 2008 17:26:57 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=57 少し前に自作のasファイルを公開してみたりしたわけですが、その時に悩んだのがクラスファイルを保存するフォルダ名（パッケージとか言う）をどうしたらいいのかということ。

ライブラリとしてまとめられ一般に公開されているasファイルは、そのクラスが公開されているドメインの名前のフォルダに保存されているようです。
　
例えばAS2.0の有名なライブラリであるFuseKitは
http://www.mosessupposes.com/Fuse/で公開されているのでasファイルは
com/mosesSupposes/fuse/～

というフォルダ下に保存されています。

http://casaframework.org/で公開されているCasaFrameWorkは
org/casaframework/～

というフォルダ下に保存されています。このルールでいけば、どんなにたくさんのライブラリを使っても、同じ場所にまとめて保存した複数のファイルのフォルダ名がかぶることはありません。良く考えられています。
　
ということで私が作るクラスファイルは
jp/ne/sakura/chabudai/～

というフォルダ下に保存されるわけですが、これはなんかやたら階層深くていやです。クラスを公開するなら独自ドメインは必須ということなのか。
　
私はFuseKitなどのライブラリを使い始めて1年くらいになるのですが、このルールに気が付いたのはほんの少し前、それこそブログでasファイルを公開する時で、自分の鈍感さにほとほと嫌気が差したのですが、そんな話はどうでも良くて、WebDesigning8月号から始まった『Flash開発の新機軸「ActionScriptライブラリ」』という連載がすごいという話なんですよ。
これはtrick7のteraさんがFlashの便利なライブラリについて焦点を絞って書かれた記事なのですが、Flashをこつこつ勉強しながら使っている人間にとって、今！そこにある疑問！に届くように本当に丁寧に書かれているというか、現場に即しているというか、とにかくFlashのエキスパートではないけどFlashする人にとっては永久保存版みたいな記事だと思います。冒頭に書いたクラスファイルを保存するフォルダ名についても述べられていました。最近は必ずしもドメイン名をフォルダ名にするわけでもないこととか。

9月号ではTweenerの使い方についてこれ以上ないくらい詳しく解説されていて、ライブラリを使ったことのない人でもこれを読めば必ず使えるようになると思います。私も今まではFuseKit使ってきたのですが、次からはTweenerに変えようと思っています。

空きをゆったり使ったスマートなデザインを鼻で笑うかのように、ぎっちりと密度の濃い情報でページを埋め尽くした記事は見所が山のよう。来月号も楽しみです。

]]> http://chabudai.org/blog/?feed=rss2&p=57 Flashとjavascriptでクッキー（Cookie）を扱う http://chabudai.org/blog/?p=56 http://chabudai.org/blog/?p=56#comments Mon, 25 Aug 2008 17:56:18 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=56

　
最近仕事でイントロムービーがあるFlashを作ったのですが

・1回目に見ときはイントロムービーが流れるように
・2回目以降はイントロムービーは流れずにスキップ
・ブラウザを終了させてもう一度開いたら、またイントロムービーが見れるように

という要望がありました。

まあ良くありがちな要望なのですが、今回それをブラウザのクッキーを使って判定させようと思って『flash クッキー』などで検索したのですが、Flash版のクッキーであるSharedObjectに関する記事ばっかり引っかかって、なかなかそのものずばりのページにいきつかなかったので、メモとして残しておくことにします。

（昔はFlashでクッキー扱う記事よく見たような気がするんですが。今はFlashでクッキーみたいなの使いたいときはSharedObeject使えば良いということなんでしょうか。そもそもイントロムービーがあるようなFlashも最近はあまり見かけませんね。）

サンプルはこちら。（上に貼っているFlashと同じですが取得してるクッキーは別です）

上のページに最初にアクセスすると最初は背景が黄色い画面が表示されます（ここでクッキーが保存されます）、更新ボタンを押すと緑の画面が表示され、以降黄色い画面を見ることは出来ません。ブラウザを一度終了させてからアクセスすると、また黄色い画面に飛びます。

スクリプトについて

html側には以下のjavascriptを記述します。

PLAIN TEXT
JAVASCRIPT:
  1. <script language="JavaScript" type="text/javascript">
  2. function setMyCookie(str) {
  3.     document.cookie = str;
  4. }
  5.  
  6. function getMyCookie() {
  7.     var c = document.cookie;
  8.     return c;
  9. }
  10. </script>

FlashのActionScript側には以下を記述します。

PLAIN TEXT
ACTIONSCRIPT:
  1. //クッキーを取得
  2. var returnValue:String = flash.external.ExternalInterface.call("getMyCookie").toString();
  3. //解析
  4. var judge:Number = returnValue.indexOf("chabudai");
  5. if (!(judge == -1 || judge == undefined)) {
  6. gotoAndPlay("end");
  7. }

↑クッキーが保存されているかどうか判定させたいところに書くスクリプト
ExternalInterfaceで上記で記述したjavascriptを呼び出しています。
受け取ったクッキーの文字列から特定の文字列を探します。ユニークな文字列にしましょう。ここでは"chabudai"にしています。chabudaiという文字列があれば"end"というラベルのフレームまでジャンプするように指示しています。

PLAIN TEXT
ACTIONSCRIPT:
  1. // クッキーをセット
  2. var msg:String = "chabudai";
  3. flash.external.ExternalInterface.call("setMyCookie", msg);

↑クッキーを保存したいタイミングのところに書くスクリプト
ここでもExternalInterfaceでjavascriptを呼び出しています。
この時点でクッキーに"chabudai"という文字列が保存されます。

flaファイルも一応アップしておきます。（flash8以上）

ローカルで試すときはFlashを貼るhtmlソースにallowScriptAccess="always"のパラメータを足さないと動かないと思います。

]]> http://chabudai.org/blog/?feed=rss2&p=56 やっぱり癖になる、Daft Bodies http://chabudai.org/blog/?p=55 http://chabudai.org/blog/?p=55#comments Wed, 06 Aug 2008 17:33:25 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=55 Daft handsやDaft Bodiesなどの名作動画を生んだDaft Punkの「Harder, Better, Faster, Stronger」ですが、久しぶりにYou Tube見たら、ナイスでアホなパロディ動画たちが増えていたよ。
　
Daft Punk Harder Bodies (Male version) Harder Better Faster.

兄貴編。
　
　
Daft Bros

メタボ編。
　

]]> http://chabudai.org/blog/?feed=rss2&p=55 Stageサイズが変わったときにMovieClipを動かすクラス [AS2] http://chabudai.org/blog/?p=54 http://chabudai.org/blog/?p=54#comments Tue, 29 Jul 2008 14:46:39 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=54 クラスを書くのに少しずつ慣れてきたところで、拙いクラスを開き直って公開してみようと思います。※注意！AS2です。

横幅、縦幅が100％のFlashで、Stageサイズを変えたときにムービークリップの位置をアニメーションで移動させる効果を使うことがよくあると思います。
例えば有名なHYBRIDWORKSさんのサイトがそうですね。
やり方はStage.onResizeリスナーイベントを使って、リサイズされたときにムービークリップを動かすよう指示するだけで特に難しくないのですが、動かしたいムービークリップがひとつだけならともかく、何個ものムービークリップをそれぞれ左上、右上、左下、右下のような位置に動かしたいとき、いちいち計算して指定するのもなかなか面倒です。
　
そこでそれを簡単に指示するためのクラスを作りました。

サンプルはこちら。

flaファイルとソースファイル一式はこちら。
（fusekitつかっています。）
　

使い方

ダウンロードして解凍したファイルの中から「stageresize_test.fla」を開いてください。srcフォルダにクラスパスを通してパブリッシュすれば動きます。

動かしたいムービークリップは、好きな場所に配置できます。
右上に置きたいものは右上をムービークリップの中心点に、左下は左下、右下は右下、その他は左上に設定してください。

タイムラインに書くスクリプトは「script」レイヤーの1フレーム目を参考に。
　

PLAIN TEXT
ACTIONSCRIPT:
  1. var stageObj:StageOnResize = new StageOnResize(_root, 800, 520);

StageOnResizeクラスのインスタンスを作ります。引数は1つ目が動かしたいムービークリップを置いているムービークリップ名（ここでは_root）、２つ目と3つ目はStageの横幅と縦幅です。
　

PLAIN TEXT
ACTIONSCRIPT:
  1. stageObj.addMovie({m:"right_mc", pos:"right"});

stageObj.addMovieで動かしたいムービークリップを登録してください。ムービークリップは何個でも登録できます。mはムービークリップの名前、posは置きたい場所。
・"right"　右付
・"bl"　左下
・"br"　右下
・"center"　横も縦も中央
・"cw"　横だけ中央
・"ch"　縦だけ中央
・"cr"　右付で縦の中央
・"cb"　下付で横の中央
左付のムービークリップはStageサイズが変わっても動かないので登録する必要はありません。
　

PLAIN TEXT
ACTIONSCRIPT:
  1. stageObj.setEase(0.7, "easeOutQuint");

移動スピードを設定します。省略するとデフォルトのスピードで動きます。
引数の1つ目は移動終了までの時間（秒）、ふたつめはイージングの種類です。FuseKitのPennerEasingです。イージングの違いは以下のページなどを参考にしてください。

にゃあプロジェクト - ウェブログ - FuseKitのイージング

一応、StageOnResize.asのソースは以下。
　

正直、もっとスマートな書き方があると思います。
特にcase文のあたり。だらだらと分岐で計算しているだけです。
赤ペン先生募集中。

PLAIN TEXT
ACTIONSCRIPT:
  1. import com.mosesSupposes.fuse.ZigoEngine;
  2. import com.mosesSupposes.fuse.Shortcuts;
  3. import com.mosesSupposes.fuse.PennerEasing;
  4.  
  5. class usr.StageOnResize {
  6.  
  7.  private var root:MovieClip;
  8.  private var mcList:Array = new Array;
  9.  private var stagew:Number;
  10.  private var stageh:Number;
  11.  
  12.  private var fuseSec:Number = 0.8;
  13.  private var fuseEase:String = "easeOutCubic"
  14.  
  15.  function StageOnResize(mc:MovieClip, w:Number, h:Number) {
  16.   
  17.   // FuseKit
  18.   ZigoEngine.simpleSetup(Shortcuts, PennerEasing);
  19.   ZigoEngine.SKIP_LEVEL = 2;
  20.   
  21.   root = mc;
  22.   stagew = w;
  23.   stageh = h;
  24.   
  25.   // Flashムービーを左上に配置
  26.   Stage.align = "TL";
  27.   // 伸縮を拡大/縮小なしに
  28.   Stage.scaleMode = "noScale";
  29.   // MovieClipをリスナーに登録
  30.   Stage.addListener(root);
  31.   var scope = this;
  32.   root.onResize = function():Void {
  33.    scope.moveMovie();
  34.   }
  35.   
  36.  }
  37.  
  38.  //動くスピード
  39.  public function setEase(sec:Number, ease:String):Void {
  40.   fuseSec = sec;
  41.   fuseEase = ease;
  42.  }
  43.  
  44.  //動かすMovieClipを登録
  45.  public function addMovie(obj:Object):Void {
  46.   //xy初期値
  47.   obj.x = root[obj.m]._x;
  48.   obj.y = root[obj.m]._y;
  49.   //配列化
  50.   mcList.push(obj);
  51.   //ターゲット位置取得
  52.   getPosition(obj);
  53.   //初期位置へ移動
  54.   root[obj.m]._x = obj.nx;
  55.   root[obj.m]._y = obj.ny;
  56.  }
  57.  
  58.  private function moveMovie():Void {
  59.   for (var i:String in mcList) {
  60.    //ターゲット位置取得
  61.    getPosition(mcList[i]);
  62.    //移動（Fusekit）
  63.    root[mcList[i].m].slideTo(mcList[i].nx, mcList[i].ny, fuseSec, fuseEase);
  64.   }
  65.  }
  66.  
  67.  private function getPosition(p_obj:Object):Void{ 
  68.   switch(p_obj.pos) {
  69.    case "right": //右付
  70.     p_obj.nx = Math.round(Stage.width - (stagew-p_obj.x));
  71.     p_obj.ny = p_obj.y;
  72.    break;
  73.     
  74.    case "bl": //左下
  75.     p_obj.nx = p_obj.x;
  76.     p_obj.ny = Math.round(Stage.height - (stageh - p_obj.y));
  77.    break;
  78.     
  79.    case "br": //右下
  80.     p_obj.nx = Math.round(Stage.width - (stagew-p_obj.x));
  81.     p_obj.ny = Math.round(Stage.height - (stageh - p_obj.y));
  82.    break;
  83.     
  84.    case "center": //縦も横も中央
  85.     p_obj.nx = Math.round((Stage.width - root[p_obj.m]._width) / 2);
  86.     p_obj.ny = Math.round((Stage.height - root[p_obj.m]._height) / 2);
  87.    break;
  88.     
  89.    case "cw": //横だけ中央
  90.     p_obj.nx = Math.round((Stage.width - root[p_obj.m]._width)/2);
  91.     p_obj.ny = p_obj.y;
  92.    break;
  93.    
  94.    case "ch": //縦だけ中央
  95.     p_obj.nx = p_obj.x;
  96.     p_obj.ny = Math.round((Stage.height - root[p_obj.m]._height) / 2);
  97.    break;
  98.    
  99.    case "cr": //右付で縦の中央
  100.     p_obj.nx = Math.round(Stage.width - (stagew-p_obj.x));
  101.     p_obj.ny = Math.round((Stage.height - root[p_obj.m]._height) / 2);
  102.    break;
  103.     
  104.    case "cb": //下付で横の中央
  105.     p_obj.nx = Math.round((Stage.width - root[p_obj.m]._width) / 2);
  106.     p_obj.ny = Math.round(Stage.height - (stageh - p_obj.y));
  107.    break;    
  108.   }
  109.  }
  110. }

]]> http://chabudai.org/blog/?feed=rss2&p=54 ごはんとFlash ～おいでやす京都～ 行ってきたよ！！レポ （後編） http://chabudai.org/blog/?p=53 http://chabudai.org/blog/?p=53#comments Tue, 22 Jul 2008 20:15:21 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=53

さてごはんとFlash ～おいでやす京都～後半は「Flashers'白書」コーナーからスタートです。
今回、参加者の方々には事前にかなり長ーいアンケートにメールで答えてもらっていて、それを美しいグラフで100スライド以上にまとめたのものを発表しました。

世のFlasherにとってはかなり興味深い内容になっていると思うのですが、参加者の方々もごはん食べてたり交流されてたりで、あまりじっくり見ることができなかったかもしれませんね。そのスライドどっかにアップされるのかな？えと・・・、アップされたらリンク貼ります。
→アップされました。Saqooshaさんのブログから見られます。
　

各項目について面白い回答をしていただいた方などにインタビューしました。
左端は参加者の平均年齢を調べる中でずば抜けて若い方代表ということでインタビューされるyossyさん。その隣は、Progessionの普及率を調べるアンケートの結果発表時に、作っている本人のtaka:niumさんにインタビューしているところ。ちなみに参加者の中でProgressionを知らない、という方はほとんどいませんでした。
　
宴もたけなわとなったところで、最後の出し物、プレゼントコーナー！！プレゼントは

・Saqooshaさん提供のPerfumeのアルバム「GAME」
・dokeさん提供の「鳩サブレ」
・Jr.さん提供の「AS3特製ビーチボール」
・Idoさん提供の「ごはんとFlash＆teracoロゴ入りオリジナルグラス」
・シナチクさん提供の「クマのクッション（お尻の小さい方向け）」
・ごはFla京都オリジナルスタッフTシャツ（Printed by KUMAYA）

とかなり盛りだくさん！！
シナチクさん力作のおもしろルーレットによりプレゼント当選者が決定します！
　

チャーチャラッチャ、チャーチャラッチャ、チャーチャラッチャ、チャラチャ♪
　

プレゼント当たった皆さん嬉しそう。うらやまし～！
　
　

最後に一本締め！皆さまお疲れさまでした～。
　
　

ごはfla京都運営スタッフと、大阪てら子のメンバーで集合写真的な。
この後こんなメンバーの話を聞けるチャンスは二度とない！と思い2次会も参加して、朝まで飲みました。そしてその中の半分くらいはその後、鎌倉のごはんとFlash2杯目に参加すべく東京へ向かったという。本当みんなタフだ。（私はおうちへ帰ったよ）
右は2次会の最後に食べたスイーツ。

]]> http://chabudai.org/blog/?feed=rss2&p=53 ごはんとFlash ～おいでやす京都～ 行ってきたよ！！レポ （前編） http://chabudai.org/blog/?p=52 http://chabudai.org/blog/?p=52#comments Mon, 21 Jul 2008 20:28:54 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=52
　
7月19日（土）18:30！ ついに、京都さらさ花遊小路にて「ごはんとFlash ～おいでやす京都」イベントが開催されました！！！

最終的にイベントに参加する予定人数はスタッフを含めて67名だったのですが、なんとキャンセルなしで全員の方が来られました！きっと皆さんこのイベントを楽しみにされていたんですね！私もこのイベントにかける意気込みたー、相当なもんだったので、頑張っていろんな方々に声をかけさせていただきました。

名刺を交換していただいた皆さま、ありがとうございました。今回は短い時間しか喋ることができませんでしたが、今度何かでお会いしたときはぜひもっといろいろお話を聞かせてください。
　
ところで冒頭の写真の看板、これはもともと「ごはんとコーヒー」という文字が書かれていたのをビニールテープで「ごはんとFlash」に変えたものなんですよ。佐藤修悦には遠く及ばないテープ文字ですが結構はまってませんか？え、気づかなかった！？そ、そうですか・・・。
　
イベントの写真とレポは以下からどうぞ。
　

18:30より受付開始
　
　

続々と運び込まれるごはん。乾杯前ですがあちこちで名刺交換が始まっています。
　
　
オープニングは1-10 designさん制作のバリバリお米エフェクトで作られたFlash Movieでスタート！！（お米エフェクトMovieはnagggさんのブログから見られます）
　

乾杯の後に、スポンサー紹介。株式会社カタマリさん、株式会社カラーズさん、genephics design.Inc.さん、株式会社ワン・トゥー・テン・デザインさん。
カタマリさんの時に写真を撮り忘れていたのですが、れんさんから写真提供していただきました（ありがとうございます！）。今katamariに採用された方から抽選で1名にiPhoneをプレゼント、ってばっちり写ってますね！！！
　
　

19:40分頃からFlashで一芸コーナーの始まり。発表者一人目はたけいひでゆきさん。インターネット越しにうちわを扇いでもらえるシステムです！
　

Wiiリモコンを振ったり、ノートPC自体を振ったりすることで「てら子」と名づけられたうちわ扇ぎマシーンのうちわがパタパタと動きます。これはすごい！エコなのかどうかは謎ですが！
　
　

発表者二人目は原真人さん。Flashで作られた作品をたくさん見せてくれました。クオリティたかーい。ビジュアルもきれい！
　

Swimmy Clockは周りでも可愛い！と評判高かったです。その他発表してくれた作品は、原さんのサイトのWORKSページより見ることができます。
　
　
眠くなってきたので、続きは後編で。

]]> http://chabudai.org/blog/?feed=rss2&p=52 1-10 designさんにお邪魔してきました！ http://chabudai.org/blog/?p=51 http://chabudai.org/blog/?p=51#comments Mon, 21 Jul 2008 14:55:59 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=51

7月19日土曜日の「ごはんとFlash ～おいでやす京都～」イベントの前に、京都の超素敵なweb制作会社「1-10 design」さんのところへ、Progression Frameworkのtaka:niumさんや、beinteractive!のyossyさんが来られる！ことになったので、1-10 designのnagggさんが皆さんもどーですかー、って流れになっていたのを聞きつけ、わわわたしもぜひ行きたい！と思っていたら、快く皆さんでどーぞーってことで、ほとんどのごはFla京都の運営スタッフがお邪魔できることになりました。結構な大人数だったのですが1-10さん、本当にありがとうございました！！

憧れの1-10さんは、どんな感じのとこなんだろう･･･！！
めちゃわくわくドキドキものでしたよ！！
　

入り口を入ると目に飛び込んでくるロゴ。おしゃれです。事務所はかなり広くてきれい！赤い高校ジャージの人がいる･･･。nagggさんですか！
　
　

オープニングムービーの確認などをします。
　
　

なんとその場にiPhoneを持っている人が3人も！
（紫のTシャツはごはFla京都のスタッフTシャツです）
　
　

「Saqoosha」の文字がアニメーションしているところ。
　
　

左は本日ごはんとflashで司会を務めるシナチクさん。右は事務所の奥でnagggさんと蜜月中のtaka:niumさん。
　
　

まったり。
　
　

なんか寝ようとしてる人が。
　
　

クローバーが生えてるのを発見。クローバーって1本だけ生えたりするの！？ラブリー。
　
1-10の何人かの方と名刺交換させていただいたのですが、皆さん素敵な方たちでした。呼ばれてもいないのに無理やり押しかけた私とも、それはもうにこやかに会話してくれたよ！
関西のwebクリエイティブを牽引している1-10 designさんのような会社の存在があるから、自分も関西でがんばるぜ！って思っていけてる気がします。
ほんまこんな会社で働きたい。そうそう！1-10 designさんは今求人してますよ！バリバリFlashやってクリエイティブなものを作りたい人はぜひ突撃すると良いと思います！

]]> http://chabudai.org/blog/?feed=rss2&p=51 ごはんとFlash ～おいでやす京都～ 追加募集するようです！ http://chabudai.org/blog/?p=50 http://chabudai.org/blog/?p=50#comments Sat, 05 Jul 2008 18:56:30 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=50 tuika.gif
　
ごはんとFlash ～おいでやす京都～ の追加募集が七夕の7月7日月曜日、朝7時7分という大変ラッキーな日時におこなわれるようですよ！！
ていうかもう6日なので、明日ですよ！！このあいだ申し込みそびれた人は、月曜日は早起きして「ごはんとFlash ～おいでやす京都～ 」公式ページまでGO！

]]> http://chabudai.org/blog/?feed=rss2&p=50 ピンバックって知っていますか？ http://chabudai.org/blog/?p=48 http://chabudai.org/blog/?p=48#comments Thu, 03 Jul 2008 17:12:27 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=48 最近何度かうちのブログに「ピンバック」というものが貼られることがありました。

ピンバック？聞いたことないけど、トラックバックのことをWordPressではそう言うのかなー。その証拠にエントリーの下のTrackBack:っていうところの数が増えてるし。

でも待てよ、と。
私のブログはトラックバックURLを公開していません。（トラックバックを受け付けてないわけじゃなくて、その部分のスタイルシートつくるのがめんどくさくて放っている）
それなのに、一体どうやってピンバックを貼ってるんでしょうか。
気になったので調べてみることにしました。すると今まで知らなかった事実が！

WordPress日本語 - ブログ入門 - ピンバック
　
・ピンバックとは
例えば私のブログのエントリーから他のブログのエントリーへリンクを貼ったとする。それで向こうのエントリーにもこちらのエントリーへリンクが貼られていたら（つまり相互リンクが成立していたら）、自動でそのエントリーにトラックバックする仕組み。
[追記] えーと、↑は嘘でした。相互リンクでなくても相手記事へリンクを貼るだけでトラックバックされるようです。

ここ、これは･･･！便利なのかそうでないのかよくわかりません。
　
WordPressのピンバックに関する設定は[設定]-[ディスカッション]の中にあるようです。（WordPress日本語2.3.3の場合）
　

　
一番上の「投稿中からリンクしたすべてのブログへの通知を試みる」にチェックを入れると、自分のブログの記事からリンクを貼ったブログへ自動的にピンバック申請するようです。そしておそらく相手先のブログが2番目の「他のブログからのリンク通知を許可する」にチェックを入れていると、ピンバックが成立する、と。

とりあえずなんだか面白そうなので、私も「投稿中からリンクしたすべてのブログへの通知を試みる」にチェックを入れて、様子をみてみることにしました。

 

でももしかしてこの機能って、知らない人結構いるんじゃないでしょうか。それともWordPressやってる人の中では普通に常識ですか？

]]> http://chabudai.org/blog/?feed=rss2&p=48 大阪てら子 16 「アイドル！アイドル！」で発表してきました http://chabudai.org/blog/?p=47 http://chabudai.org/blog/?p=47#comments Tue, 01 Jul 2008 16:44:27 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=47 6月21日大阪てら子16回、テーマはアイドル。
私はここのところブログで記事にしていた「FLARToolkit」をネタに発表してきました。

今回1番目に発表したのですが、他の方々のすごい発表を聞いてたらどんどん冷や汗が出てくるので、最初の方に発表する方がお得かもしれない･･･！

↓が発表に使用したスライド。
（右半分をクリックすると進む、左半分をクリックすると戻ります）
　

　
このスライドの後は実際にFLARToolkitのサンプルを使って、メタセコイアの3Dモデルデータを表示する解説をしました。解説っていっても、公開されているコードを使ってるだけなんですけどね。予定ではアニメーションをするところまでを発表するつもりだったのですが、静止したモデルデータを読み込むまで…。

このへんはまた「AS3書けないけど、FLARToolkit使ってみようとする日記」に書こうと思ってます。アニメーションさせるまでは続けます、多分。

その他の方々の発表は以下のような感じ。詳しくはそれぞれのブログで解説されていますので、そちらへのリンクと簡単な感想など。
　

2.みのんさん

minomix blog - 大阪てら子 16 の感想とか発表したやつとか

Marilena Object Detection in AS3という、顔認識などができるライブラリを使って、WebCamを使用した面白いサンプルを作って見せてくれました。
めちゃうけた！
世の中にすごい技術はたくさんあるけれど、それを使って皆に面白い！て思ってもらえるアイデアを考えるのは機械的にはできないし、Webがどんなに進歩しようと何かを作る上で一番大切なことですね！
　

3.USKさん

trace | Mr.littleBIG - Marilenaでアイドル(1)
trace | Mr.littleBIG - 大阪てら子 16 「アイドル！アイドル！」

USKさんもMarilena Object Detection in AS3を使った作品を、みのんさんとはまた違う切り口で見せてくれました。100チアガールを元ネタに、アイドルの画像を自動でエロく収集するスクリプトです。
アイドルといえばピンクだろう、とかチラリズムの意義について考えさせられました。
Marilenaを使うまでの解説は「Marilenaでアイドル(1)」のエントリーで、詳しーく書かれているので、試してみたい方はぜひ参考に。
　

4.パンツカムヨさん

崖っぷちWEBデザイナーブログ - 大阪てら子16 「アイドル！アイドル！」に参加してきた

Box2Dを使用したとってもかわいらしい作品。
きゃあきゃあする対象であるはずのアイドルに、逆にきゃあきゃあされる感じ。夜中に一人で動かしていると結構なごむんだそうです。自分が必要としているものを自分のために作る。創作ってそんなとこから始まるのかもしれません。
　

5.hoehoeさん

いつも非常にマニアック、というか彼しかやってないような技術を紹介して驚かせてくれるhoehoeさん。今回もいろんなものを複合的に使ったサンプルを紹介してくれました。

IRヘッドトラッキングと、
PaperVision3Dと、
テキストtoスピーチで、
バーチャルアイドルのようなものを作るという試み。

もうなんだかポカーンって感じ。IRヘッドトラッキングとはモーションキャプチャーみないなもんで、頭につけたLED3点を読み取って頭の動きをトラッキングしてくれるもの。
でそんなものFlashの機能としてはないのでFreeTrackというソフトを使うらしいのですが、それを最終的にFlashへ持ってくまでの流れは以下のような感じなんだって。（発表中に私が取ったメモのまま。誤字脱字の可能性有）

FreeTrack → GlovePIE → java（ソケット通信） → Flash

すると、Flash上にPapervision3Dで表示させたはちゅねミクが、トラッキングした動きの通りに動いてくれます。それだけでなく、テキスト入力（漢字もOK）した言葉をはちゅねミクが喋ってくれるという仕組みまで！その仕組みは以下のような感じなんだって！

Flash → yahooのなんとかっていうAPI → FreeTPS？ → javaの読み上げソフト

メモが中途半端ですみません！詳しくはhoehoeさんのブログでそのうち解説されると思うので、それを待つとしましょう。

[追記] 解説記事アップされています。
hoelog - Flash : バーチャルアイドルになる！（その１） - FreeTrack + GlovePIE + Papervision3D + TTS
　

6.シナチクさん

SAKOTSU INSPIRE - 大阪てら子 第16回『アイドル！アイドル！』

発表中、いきなりさくーしゃ先生によるAS3.0初心者講座のようなものに！
私もAS3.0超初心者なのですごいためになりました。勉強し始めの頃って、参照の問題とかイージーミスにとにかくはまりまくる。人事とは思えませんでした。シナチクさんはどんどんAS3.0書いていってるようなので、私も負けられないわ。
　

7.j.iidaさん

花見のときに、寝ないで「3日でAirアプリを作成する日記」を発表されてた方でした。
見せてくれたのは、栗山千明の髪をさらさらーっとすると、その髪の本数分メールが送られてくるという、なんだかフェティッシュな作品。髪がシャラン！ってなびく感じがとてもきれいでした。途中から栗山千明の顔がシナチクさんに変わってしまったので気持ち悪かったです。
j.iidaさんは栗山千明が大好きだそうで、以前より興味のあった栗山千明のファンの生態についてインタビューしてみたところ、期待通りのお答えをいただき、大変満足です。
　

8.さくーしゃさん

トリはさくーしゃ先生。
なんとこの時間内でスクリプトを仕上げられたそうで、写真画像のおっぱい部分をDisplacementMapでぼよんぼよんと揺らしておられました。これが実写の動画かと思うほどリアルなんですよ！どなたかが「才能の無駄遣い…」とつぶやいていましたが、私も心から同意いたします。
　

飛び入りゲスト. slnsyndicateさん

SLN:blog* - ロボットボイスのたのしみ

最後に豪華な飛び入りゲストとして、slnsyndicateさんがロボットボイスについて発表してくれました。

ActionScript3.0は音声データも動的に生成することが可能なので（なんか多分このへんのこと→ テキスケ - サウンドのリアルタイム生成（１））、Flashを使って今流行っているパフュームのようなロボットボイスを作り上げることもできるかもしれないんだそうです。そのロボットボイスがどのような仕組みで実現できるのか、トーキングモジュレーターの実演も交えながらホワイトボードで！解説してくれました。

ひとくちにロボットボイスと言ってもその手法は何種類かあるみたいで、耳慣れた言葉であるヴォコーダー、というやつと、今回slnsyndicateさんが実演してくれたトーキングモジュレーター（=talk box）は似たようで違う技術のようです。
この仕組みが、その機械的な音から想像してたのよりずっとアナログな感じだったので驚きました。基本的にはシンセから出てくる音を、そこらへんで売っているホースで口内へ導き、口と喉をしゃべる形に変えるだけで、ダフトパンクみたいな歌声になるんです！
意外とアナログな手法って書きましたが、それくらい人間の喉や舌が複雑で高機能なエフェクターであるということなんですかねー。これは目の前で見せてもらったので、より実感できました。とりあえず「ロボットボイスのたのしみ」のエントリー中のムービーは必見です！
Flasherって総じてマルチにいろいろ出来る人が多いですが、音が得意な人はなかなかいないのでこういう発表はすごくためになると思います。

]]> http://chabudai.org/blog/?feed=rss2&p=47 ごはんとFlash ～おいでやす京都～ 参加申し込み開始日迫る！ http://chabudai.org/blog/?p=46 http://chabudai.org/blog/?p=46#comments Sun, 29 Jun 2008 04:49:26 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=46 gohafla.jpg

5月に鎌倉で行われた、Flash大好きな人たちでごはん食べながら交流しようー、ってイベント「ごはんとFlash」が、関西でも7月19日に開催されることになりました！

参加申し込み開始日は7月1日なのですが、詳しい時間も決まったようですよ。
7月1日 0:00～受付開始です →定員に達したのでいったん締め切られました！
（6月30日月曜日～7月1日火曜日に変わる瞬間ですよー。間違えないでー。）
　
0:00になった瞬間から、告知ページにて応募先が公開されるようなので
月曜日の夜はパソコンにかじりついとかなきゃ！
　
ごはんとFlash ～おいでやす京都～ presented by teraco
開催日　7月19日（土） 19:00～22:00
場所　　さらさ花遊小路店（京都四条河原町）
参加受付は7月1日 0:00から
　
[協賛会社も超豪華]
株式会社カタマリ
株式会社カラーズ
株式会社ワン・トゥー・テン・デザイン
genephics design.Inc.
　
7月のこの連休中は他にもイベントが目白押し。
20日には鎌倉で「ごはんとFlash」2杯目が開催されます。
同じ日に「CSS Nite -Web on the Beach-」というイベントも開催されるようで、関東に足を運べる方はそちらもぜひ。

]]> http://chabudai.org/blog/?feed=rss2&p=46 AS3書けないけど、FLARToolkit使ってみようとする日記 3日目 http://chabudai.org/blog/?p=44 http://chabudai.org/blog/?p=44#comments Fri, 13 Jun 2008 18:14:07 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=44 [追記 09/01/26]
FLARToolKitもPapervision3Dも現在はバージョンアップされており、以下の記事とは変更されている部分があります。最新のFLARToolKitをFlash CS3で動かす記事を書いたので、こちらを参考にしてください。
　
ではFlexBuilder3を使ってFLARToolkitを動かす解説に入ります。
FlexBuilderを使う人にこんな解説は必要ないんじゃないかという、心の声が聞こえますが。一方で、AS初心者がAS3.0を始めてみるのにFlexBuilderは結構いいんじゃないかとも思っています。とりあえずインストールさえすればすぐに始められるので。

以下の記事の通りにすれば、誰でもFLARToolkitは動かせると思うので、AS初心者の方もぜひトライしてみてください。

FlexBuilder3でFLARToolkitを動かす

ポイントはタロタローグさんで解説されているFlashDevelopでの作業と同じ。

・必要なソースにパスを通す
・メインでコンパイルするasファイルを指定する

この2点です。
　

まず、「←ここ」って書いたとこにある大変押しにくい小さな三角をクリックして、新規ActionScriptプロジェクトを作成します。

　
　

適当なプロジェクト名を付けたらその他の設定は後回しにして、終了ボタンを押します。
　
　

新しいプロジェクトが出来ました。
　
　

いったんFlexBuilderはほったらかして、エクスプローラのMyDocumentを見ると、MyDocument - Flex Builder 3 フォルダの中に作ったプロジェクト名の「FLAR_test」フォルダが作成されています。
ここに先ほどダウンロードしたFLARToolkit - trunkフォルダ内にある「sample」フォルダと「scr」フォルダをコピーペーストします。
　
　

同様にPapervision3DのGreatWhiteフォルダ内にある「src」フォルダもコピペします。同名のフォルダがあるので当然「上書きしますか？」のダイアログが出ますが、気にせず上書きします。
　
　

FlexBuilderに戻って、プロジェクトの中に「samples」フォルダと、「src」フォルダが出来ていることを確認します。
この「samples」フォルダの中にあるFLARToolkitTest2.asが一番上のポイントで書いた、メインでコンパイルするasファイル、「scr」フォルダがパスを通さなければいけないソースファイル、ということになります。
　
　

「プロジェクト」-「プロパティー」を選択。
　
　

①「ActionScript ビルドパス」を選択
②メインソースフォルダの「参照」ボタンを押して「samples」フォルダを選択
③出力フォルダのデフォルトは「bin-debug」ですが、何でもいいので別の名前にしてください。私は「swf」にしました。
④「フォルダの追加」ボタンを押してエクスプローラから「src」フォルダを選択します。これでソースパスが通ります。

以上の作業を終えたら「OK」ボタンを押します。
　
　

すると、プロジェクトが更新され、このような構成に変更されるはずです。
　
　

「samples」フォルダを開き「FLARToolKitTest2.as」を右クリックして「デフォルトのアプリケーションに設定」します。
　
　

「FLARToolKitTest2.as」に緑色のマークが付いたら設定は終了です。
これでFLARToolkit動くはずだよ！早速試してみよう！

「FLARToolKitTest2.as」を右クリックして「アプリケーションの実行」を選ぶか、上記の画像の赤い四角で囲んだ緑色のボタンを押してみましょう。
　
　

ブラウザが立ち上がって上記のような画面になれば成功です。わーい、やったー！
　
　

　

FLARToolKitTest2.asを少しだけ改造

ここまでだといまいち、自分で設定したasファイルが動いている、という実感が薄いと思います。そこで少しだけasファイルをいじってみましょう。FlexBuilderの「FLARToolKitTest2.as」をダブルクリックすると、asファイルが開いて、右側にソースが表示されます。


　
　
81行目に、表示されている四角の色を指定している箇所があります。

var fmat:FlatShadeMaterial = new FlatShadeMaterial(light, 0xff22aa, 0x0);

この0xff22aaという数値を例えば0x3333ffに変えてFLARToolKitTest2.asを実行してみましょう。
　
　

おお～！四角の色が青に変わってる！
間違いなく確かに・・・、確かにこのasファイルが実行されているよ！
　
　
ちなみに出力されたswfファイルはどこにあるかというと、プロジェクトのプロパティーで設定した出力フォルダの中、今回の場合は「swf」フォルダの中にあります。
あ、あと一番上の階層のFLAR_test.asは使ってないので削除しても大丈夫です。
　

　
　
さらにソースをいじりたいという人は、タロタローグさんのブログを参考に。

タロタローグ ブログ | 電脳コイルももう間近！FlashDevelopとFLARToolKitで始める、お手軽簡単Flash拡張現実の世界(2)
　
　
さて、これでFLARToolkitを動かすことができたので、自分の作った3Dモデルを動かす段階に移行です。というかタロタローグさんのブログでさらにすごいことになってるようなので、公開されてるものを参考に、アニメーションする3Dモデルを動かすところまでは絶対にやりたい！
という気持ちだけはあります。
もう本当に、高い技術を惜しみなく公開してくれる素晴らしいFlasherさんたちの恩恵を受けまくりですよ。
私は高い技術はありませんが、せめて公開されているものを実際に使って、よりわかりやすく噛み砕いた記事を書けたらいいなあと思っています。

とりあえず、日曜日はモデリングをがんばろう。

多分続く。

]]> http://chabudai.org/blog/?feed=rss2&p=44 AS3書けないけど、FLARToolkit使ってみようとする日記 2日目 http://chabudai.org/blog/?p=43 http://chabudai.org/blog/?p=43#comments Thu, 12 Jun 2008 14:44:04 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=43 それでは実際にFLARToolkitを動かしてみるよ！
　
基本的にはこちらの記事の手順に沿って進めていきます。

タロタローグ ブログ | 電脳コイルももう間近！FlashDevelopとFLARToolKitで始める、お手軽簡単Flash拡張現実の世界(1)
　
まず動作環境ですが、タロタローグさんのブログでは「FlexSDK+FlashDevelop」の組み合わせでやっています。私の場合はできればDOSプロンプト使わないといけないようなFlexSDKよりも、馴染みのあるFlashを使って動かしたいところなのですが・・・、問題が。自宅のPCにFlashCS3が入ってない。
体験版インストールすればいいしー、とタカをくくってたら、FlashCS3体験版の配布は7月上旬まで停止中。（一部CreativeSuitesの体験版が6月以降に起動すると1日しか使用できなくなるバグが発見されたため）
　
早くも心が折れかけた。
でもそこで私は思い出しました。
そういえばFlexBuilder3、持っていることを。
2ヶ月ほど前、衝動買いしてほったらかしのまま、埃かむりまくりのFlexBuilderが日の目を見る時が・・・！

FlexBuilder3は体験版の配布の停止はされていないので、以下のページからダウンロードが可能です。
Adobe Flex Builder 3 Professionalのダウンロード

FlexBuilderは言うたらFlexSDKとFlashDevelopが最初から一緒になってるようなもんですよね。（適当）
FlexSDKを使うのに抵抗がない人は「FlexSDK+FlashDevelop」で、FlashCS3持っている人は「FlashCS3+FlashDevelop」で良いと思います。そしてこれ以降の記事は何の参考にもならないと思うのでタロタローグさんのブログへGO!すれば良いと思うよ。
　

FLARToolkit、Papervision3Dのダウンロード

動作環境が用意できたところで、必要なソースであるFLARToolkitとPapervision3Dをダウンロードします。
といっても普通の感覚のダウンロードとはちょっと違う。近頃のオープンソースのプロジェクトというのはSubversionというもので管理されていることが多いようで、ってSubversionって何？て話なのですが説明できないのでそれは聞かないでほしい、とりあえずはTortoise SVNっていうソフトを使ってソースをダウンロードするものなのだということさえわかってればいいと思います。
Tortoise SVNのダウンロード、インストール、使い方についてはタロタローグさんのブログでももちろん解説されていますが、以下のページもとてもわかりやすいので参考に。

lifelog - Spark Projectのソースをとりあえず使ってみる方法
　
Tortoise SVNがインストールできたら、右クリックメニューから「リポジトリブラウザ」を選択して、リポジトリブラウザを立ち上げます。

urlを入力するダイアログが立ち上がるので、以下のURLを入力します。

http://www.libspark.org/svn/as3/FLARToolKit/
　

FLARToolKitフォルダを右クリックしてエクスポートを選択。
　
　

適当なエクスポート先ディレクトリを指定すればダウンロードが始まります。
　
　
同様に、Papervision3Dは以下のURLを入力して、GreatWhiteフォルダをエクスポートしてください。

http://papervision3d.googlecode.com/svn/trunk/branches/GreatWhite/
　

　
　
これでやっと必要なものが全部そろったので、FlexBuilderでの作業に入れます。
　
　
なんか長くなりそうなので続きは3日目に。

]]> http://chabudai.org/blog/?feed=rss2&p=43 AS3書けないけど、FLARToolkit使ってみようとする日記 1日目～序章～ http://chabudai.org/blog/?p=41 http://chabudai.org/blog/?p=41#comments Mon, 09 Jun 2008 19:38:06 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=41

ARToolkitをFlashに移植したFLARToolkit。5月にさくーしゃさんが公開されてからずっと自分でも動かしたい！と思っていたのですが、ちょっと難易度が高そうでなんとなく二の足踏んでたところ、タロタローグさんのブログでものすごく詳しい解説が！
これを読みながらなら私にもできるかも…。というかやるしかない！！

目標

FLARtoolkitで自分が作った3Dモデルを動かす。できることならアニメーション付きで。

ちなみに私のスキルは
AS3→書けない。
3D→昔Lightwaveをやっていた。でもここ5年くらい触ってない。
というようなへっぽこぶり。
頑張ってやってみたけどできませんでした、というオチになる可能性も大ですが、とりあえず日記にしながら進めていくことにします。

1日目　まずはタロタローグさんで公開されてるサンプルを使って実験

なんか手順として間違ってる気もするけど、自分でFLARToolkitを試す前に、タロタローグさんで公開されてる素晴らしいサンプルを使って手っ取り早く自分が作ったモデリングデータを動かしてみよう！

タロタローグ ブログ | FLARToolKitで、あなたの隣にはちゅねミク、かぐぁみねリン、いやお好きなキャラを・・・！

このサンプルは、メタセコイアという3Dソフトで作ったモデリングデータならURLを打ち込むだけでFLARToolkit上にそのデータを表示することが出来るというもの。
メタセコイア…。触ったことないけど…聞いたことはあるよ！
　

メタセコイアでモデリングデータ作ってみる

メタセコイアは、半フリーでしかも日本語のとっても使いやすそうなソフト。
Metasequoia
しかも調べてみるとLightwaveとの親和性が結構高いみたいで、メタセコイアでモデリングしてLightwaveでアニメーション付け、というのは良くやられていることみたい。逆にLightwaveのオブジェクトデータをMetasequoiaで読み込むこともできる。

CG Factory Nagomi 「LightwaveからMetasequoiaへモデルファイルを出力する方法についてのお話。」

早速メタセコイアをインストール。テスト用に昔モデリングした適当なLightwaveのオブジェクトデータ（lwo）ないかな～とHDを漁ったらこんなん出てきた。
　

4500ポリゴン 2619ポリゴン（↑なんだこれ…）

（タロタローグさんのサンプルは1000ポリゴン以下推奨なのでポリゴン多すぎ）
　
lwoをMetasequoiaで読み込んでみる。

何にも表示されない。
　
なんでだろう。座標がずれてるのかな？
ちょっとズームインしてみる。

いた！ちっちゃ！！スケール感違いすぎ。
　
　
もう一度読み込んでみる。
　

　
今度は拡大率を自動調整ボタン押して設定、一応中心へ移動、にもチェック入れて読み込んでみる。
　
　

大きさがいい感じに。テクスチャ外れてるけど別にいいや。そのままmqoで保存。
これでメタセコイアのモデリングデータが用意できたよ。
　

タロタローグさんのサンプルにモデリングデータ読み込んでみる！ドキドキ！

さっきのデータを自分のサーバにアップ。
カエル　http://chabudai.sakura.ne.jp/sample/mqo/flog.mqo
どら　　http://chabudai.sakura.ne.jp/sample/mqo/dora.mqo

このページにあるようにクロスドメインファイルもアップロードする。
　
では…、FLARToolKit(URL入力版)にモデリングデータのURLを入力するよ！
　
　

　
　

　
　
うわー、出てきたよ！すごいすごい！！！

…なんか結局自力ではたいしたことしてない気もするけど、今日はここまで。
　
[2日目以降の課題]
・とりあえずまずは自分でFLARToolkit動かさないと。
・マーカーとモデルデータの同期がすぐ外れる…。なんかコツがあるのかな。マーカーの印刷の黒が薄い気はしている。紙がへろへろな気も。
・Metasequoiaってアニメーション付けれないよね…？アニメーション付けたかったらどうしたらいいんだろう。

]]> http://chabudai.org/blog/?feed=rss2&p=41 as-users.jpにコミットしよう！ http://chabudai.org/blog/?p=40 http://chabudai.org/blog/?p=40#comments Mon, 26 May 2008 19:22:37 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=40 as-users.gif

そんなことよりas-users.jpという面白そうなサイトが出来ていますよ！サイトの冒頭にはこのような記述があります。

/////以下引用/////
「YAPC::Asia 2008 で Michael Schwern は「SEO に有効な独自ドメインを取って、もっと Perl 初心者が集まりやすい nice な Perl の情報を集めたサイトを作れ！」といったそうです。そして「Perl-users.jp - 日本のPerlユーザのためのハブサイト」ができました。

これは ActionScript も同じではないのか？ そう思って as-users.jp ドメインを取り、ここに as-users.jp を開始します。」
/////引用終わり/////

事の発端は、5月20日に「Perl-users.jp」というハブサイト（ってなに？）ができるやいなや、あっという間に似たような名の付いたサイトが増殖し、4つだか5つだかのハブサイトがはてブの人気エントリーにずらりと並ぶという異様な現象からでした。（その時のはてブの人気エントリー）

これはなんなの？とas-users.jpサイトを見に行くと、立ち上げたのは日本のFlash界の若きエースyossyさん！Spark Projectとはまた別レイヤーの、超初心者から超上級者までのActionSciriptユーザのためのサイトということですよ。Spark Projectでは、変態スクリプターたちの所業を口をあんぐり開けながら見ることしか出来なかったへなちょこActionScripterも、こっちならば何か役立つことが出来るのかもしれません。これはコミットしなければ！

私も早速Spark Projectのアカウントを作って（as-users.jpにコミットするにはSpark Projectのアカウントが必要です）コミットする気まんまんなんですが・・・、小心者なので今はちょっと様子をうかがっています・・・。
皆と情報共有したい気ばりばりだけどSpark Projectはちょっと敷居が高い・・・、そんなことを思っていたあなた！ぜひ一緒にコミットしてas-users.jpを面白くしませんかー。
　
　
どうでもいいけど今、as-users.jpのみんなのブックマークにこのブログの前回の記事がリンクされてて鼻血が出るほど驚いた。

]]> http://chabudai.org/blog/?feed=rss2&p=40 SWFAddressでFash内ページにURL付けてみる（2） http://chabudai.org/blog/?p=37 http://chabudai.org/blog/?p=37#comments Sun, 25 May 2008 14:51:09 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=37 前回の記事のflaファイルについての説明。（説明するほどのものでもないですが…）
使用しているメソッドは基本的に以下の2つ。

SWFAddress.setValue()

URLを変更するときに使用。
例えばSWFAddress.setValue("about")とすると、URLが
http://～flashを置いてるURL#about
というように変わる。
単にURLを変えたいだけなら、これひとつでどうにかなります。ボタンを押したタイミングや、あるフレームに飛んだタイミングなど、URLを変更したいところでSWFAddress.setValue("なになに")と書くだけ。

SWFAddress.setTitle()

ページタイトルを変更するときに使用。
例えばSWFAddress.setTitle("blog | about")とすると、ページタイトルが
blog | about
に変わります。

以上2点を踏まえてflaファイルのスクリプトの解説。
　

PLAIN TEXT
ACTIONSCRIPT:
  1. var title_obj:Object = {top:"", about:" | 会社概要", works:" | 制作実績", recruit:" | 採用情報"};
  2. /////////////////////////////
  3. function makeTitle(ttl:String):String {
  4.  if (title_obj[ttl] == undefined) {
  5.   return "SWFAddressテストサイト";
  6.  } else {
  7.   return "SWFAddressテストサイト"+title_obj[ttl];
  8.   }
  9. }

3行目～11行目
ページタイトルを取得するためのスクリプト。
SWFaddressのサンプルファイルではだいたいページタイトルをsetValueで指定したvalue値をそのまま使っていますが、日本人なのでページタイトルには日本語を使いたい。でもsetValueで日本語は使えないので最初にtitle_objというオブジェクト作って、その中で全タイトルを指定しています。
　
13行目のSWFAddress.setStrict(false);はおまじないみたいなものでこれがないとちゃんと動きません。
　

PLAIN TEXT
ACTIONSCRIPT:
  1. SWFAddress.onChange = function() {
  2. var value = SWFAddress.getValue();
  3. if (_currentframe == 1 && value == "") {
  4. play();
  5. } else {
  6. gotoAndPlay("$"+value);
  7. }
  8. SWFAddress.setTitle(makeTitle(value));
  9. };

14行目～23行目
setValueしたときは同時にflash内の同じ名前のフレームラベルの場所に飛びたい。ページのタイトルも変えたい。それらをいちいちボタンやフレームに書くのは面倒なので、onChangeイベントにまとめて書いておきます。onChangeイベントはsetValueを使ったときや、こんなふうにディープリンクへ直接飛んだときにも呼び出されるので便利です。
　
24行目以降は省略しますが、ボタンを押したらsetValueするように指定しています。

ドルマークについて

このflaファイルはSWFAddressのサンプルsamples/adobeフォルダ内のflaファイルを参考に作ったものです。ファイルの中のフレームラベルの名前は最初にドルマークがついたものになっており、わざわざ
gotoAndPlay("$"+value)
とこのような書き方でドルマークつきのフレームラベルへ飛ぶようになってます。なぜわざわざドルマークを使っているのでしょうか。
ドルマークを使わないとこのようになります。（flaファイル）一見ちゃんと動いているようですが、こんなかんじでディープリンクへ直接飛ぶと、ナビゲーションボタンが効かなくなっています。１フレーム目で指定したボタンへのイベント指定が飛ばされてしまっているようです。
ドルマークを使った場合はディープリンクへ直接飛んでもちゃんとナビゲーションボタンが効きます。なぜこうなるのかasファイルとかjsファイルをちゃんと読めばわかるのかもしれませんが、それは…、また今度がんばろうと思います。

]]> http://chabudai.org/blog/?feed=rss2&p=37 SWFAddressでFash内ページにURL付けてみる（1） http://chabudai.org/blog/?p=36 http://chabudai.org/blog/?p=36#comments Sun, 18 May 2008 18:34:23 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=36 フルFlashサイトでもページ遷移した時に、カチって音が（音がするのはWinIEだけか）してURLが変わったりするサイトがありますよね。そのURLを打ち込んだらちゃんとFlash内部のページが表示されるやつ。（ディープリンクと言うらしい）

あれがやりたくて調べたらSWFAddressというのを使うのが一般的ぽかったので、使ってみることにしました。何をいまさらって感じもしますが、SWFAddress2.1を使った解説ページあんまりなかったので。

SWFAddressはこちらから入手>>SWFAddress

「Download SWFAddress 2.1」をクリックすると、サンプルファイルなどがわんさか入ったzipファイルをダウンロードできます。

ダウンロードして解凍すると中に入っているフォルダは以下の４つ。
・src　スクリプトファイルのみが入ったフォルダ
・dist　スクリプトファイルのみが入ったフォルダ
　　　　（srcフォルダと違うのは多分asファイルの階層だけ。importして使う人はこっち）
・docs　ドキュメント
・samples　各種サンプルファイル
　
sampleが充実しているので、通常はこの中に入っているサンプルファイルをちょっと改造して使ったらいけると思います。一緒に使うswfobject.jsもsampleの中にちゃんと入っています。

[AS1.0で使いたい人は]
samples/flashフォルダの中のファイルを

[AS3.0で使いたい人は]
samples/cs3フォルダの中のファイルを

改造して使いましょう。

ちなみに私はAS2.0で使いたかったのですが・・・、なんかちょうど良いsampleファイルがみつからなかったので、samples/adobeフォルダ内のflaファイルなどを参考に良くわからないまま自分で作ってみました。
　
サンプルページはこちら

flaファイルはこちら
　
flaファイルは同階層にsrc/as/2/フォルダ内のSWFAddress.asとSWFAddressEvent.asを置いてパブリッシュすると動きます。
htmlに貼るときはサンプルページを参考に、同階層にsrc/jsフォルダ内のswfaddress.jsと、samplesフォルダ内にあるswfobject.jsを置けば動きます。
（注意：ディープリンクはローカル環境では表示されません）
flaファイルの中身については次回解説するつもり。
　
[追記]
flaファイルの解説書きました。

]]> http://chabudai.org/blog/?feed=rss2&p=36 東灘区のだんじり祭りを今年も見たよ http://chabudai.org/blog/?p=35 http://chabudai.org/blog/?p=35#comments Wed, 07 May 2008 14:46:44 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=35 matsuri01.jpg

ゴールデンウィーク一回もブログ更新してない・・・。お祭りを見たくらいしかイベントがなかったので・・・。その時の写真を載せることにします。

毎年5月3日～5日頃に、神戸の東灘区でだんじり祭りがあります。特に理由もないんですが、ここ10年くらい毎年見ています。雨天中止なはずだけどその間雨が降って中止になったことは一度もないと思う。5月のはじめごろって天気がいいんだね。
　

matsuri02.jpg

こどもの日の祭りだからなのか、主役は大人ではなく10代～二十歳くらいの若者。だんじりの屋根の上で踊るのはその若者たち。
大人というか、おっさんはだんじりの中央に座っています。
　
matsuri03.jpg

普段は見かけない、このようないかついおっさんが大量発生します。世話人てなに。
　
matsuri04.jpg

屋根の上で踊る男の子たち。ディーキューエヌな感じですがこの日ばかりは格好いい。その地域ではだんじりの上で踊るのが憧れだったりするんかな。高校生女子なら次の日告白したい衝動に駆られるね。
　
matsuri05.jpg

だんじりは地区ごとに1台あるようで、それぞれの地区の名前がちょうちんに書かれてます。岡本とか、中野とか、北田とか、魚崎とか、青木とか。

だんじりは東灘区内で32台もあるらしい。私は摂津本山周辺で5回引越ししてるんですが、どの家に住んでたときも、家のすぐ横の道をだんじりが通ってました。つまり駅でいうと最低2～3駅くらいの区間ほぼすべての通りを、32台いずれかのだんじりが練り歩くかんじなんでしょうね。
　
matsuri06.jpg

matsuri07.jpg

2台のだんじりが出会うとこんな感じで煽り合う。
最後神社への宮入りでたくさんのだんじりが一箇所に集まる様はなかなか圧巻。
　
　
　
おまけ

inosisi01.jpg

だんじりの写真撮るためにカメラ持って近所散歩してたらイノシシに遭遇したので激写。
神戸は街中をイノシシが普通に歩いています。本当です。

]]> http://chabudai.org/blog/?feed=rss2&p=35 IEのFlash Playerが遅い件と、wmodeとの悩ましい関係 http://chabudai.org/blog/?p=34 http://chabudai.org/blog/?p=34#comments Fri, 02 May 2008 14:50:17 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=34 Flashの変な仕様シリーズ第2弾。
「WindowsIEのFlash Playerの再生速度が遅いのは、wmodeを設定すると回避できるけど」という有名なやつを取り上げます。

このことについてはいろんなブログやらなんやらで解説されていますが、以下の記事がわかりやすくまとめられています。

3ping.org - FLASHのFPSを正常に

↑の記事が書かれたのは4年前。その間にIEは6から7になり、FlashもCS3までバージョンアップしましたが、この仕様は未だに直っていません。
　
CS3で作ってみた参考Flash（フレームレート50で作成）

wmode設定なし wmode設定あり

　
「wmode」はFlashの背景を透過させるかどうか設定するパラメータです。値は「opaque（不透明表示）」と「transparent（透明表示）」の二つがありますが、どっちを設定しても、WindowsIEの再生スピードを正常にすることができます。なぜなのかは全くわかりません。回避できる以上、プレイヤーの処理スピードが追いつかないで起こっている現象じゃないと思うので直せそうなのになぜ直さないんでしょうか。

でもまあwmodeを設定すれば回避できるんだから解決解決、めでたしめでたし。
というわけにいかないのがFlashの悩ましいところです。wmodeにはこれまたたくさんのバグというか変な仕様があるのです。
　

[wmodeのバグについての参考ページ]
不健康ノート - wmodeは鬼門
graffiti-blog - wmodeのクセ
　
wmodeを使うことで起こる、以下の二つのバグは深刻です
・日本語入力がうまくいかなくなる
・キー入力、マウスホイール操作がうまくいかなくなる
　
キー入力がうまくいかなくなる参考Flash

wmode設定なし wmode設定あり

　
上の二つのFlashは十字キーでMCを移動させるFlashです。左のwmodeを設定していないFlashは普通に動作します。右のFlashは左のFlashと全く同じものをwmode=opaqueで貼り付けたものですが、クリックしてスタートした後、上下のキーを押すと、WindowsIEの場合はキーフォーカスがうまく効かず、ブラウザがスクロールしてしまいます。FireFoxだとキー入力を全く受け付けなくなることもあります。
　
インタラクティブ性の高いFlashや、ゲーム的なFlashで、操作性の部分で不具合が出てしまってはお話になりません。その場合はwmodeの設定は外して、WindowsIEの再生スピードが遅くなるのを諦めるほかないでしょう。涙。

wmodeの設定なんかつけなくても、WindowsIEでFlashが正常なスピードで再生される。そんな日が早く来たらいいのになー。
　
[追記]
どうしてもフレームレートどおり表示させたいときは、無音の音をストリーミングで流して強引に合わすという方法があります。
Flashゲーム講座＆ASサンプル集 - 音に合せて映像の同期を取る
　
[追記] 2008/11/02
Flash Player10より、wmodeを設定しなくても正常なスピードで再生されるようになりました。

]]> http://chabudai.org/blog/?feed=rss2&p=34 illustratorで作った素材をFlashに読み込む方法 [前回の補足] http://chabudai.org/blog/?p=33 http://chabudai.org/blog/?p=33#comments Tue, 29 Apr 2008 20:47:43 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=33 前回のエントリーでFlashCS3では、illustratorから読み込んだ素材の線が変になる現象を回避できる方法がない！みたいなことを書いてしまいましたが、illustratorからswfへ書き出し→Flash読み込みの方法で普通に回避できました。
知ってる人も多いと思うのですが一応詳しく解説しときます。

1.illustratorのメニューから「ファイル」→「データ書き出し」を選択
2.ファイルの種類からswfを選択して保存
3.Flashのメニューから「ファイル」→読み込み→ステージに読み込み
4.さっき書き出したswfを選択して読み込む
　
illustoratorからの書き出しの設定について
書き出すとき、以下のようなダイアログが出ます
（この画像はillustratorのバージョンがCSのもの）

illustratorcs.gif
　

  • 書き出し形式は「AIレイヤーをSWFフレームに変換」がおすすめ。これを選ぶと、各レイヤーがフレームに分かれて書き出されます。
  • フレームレートは後からFlashの方で変えられるのでなんでもいいです。
  • 曲線の精度を上げると線が滑らかになりますがポイント数が多くなります。どっちを取るかですが、私はいつも精度最大の10で書き出します。
  • illustratorCS3の場合はさらにswfの書き出しバージョンを設定できます。ただ私が試した範囲では、どのバージョンで書き出してもさして変わりはなかったです。

　
[その他注意点]
カラーモードはRGBにしてから書き出す。
文字はアウトライン取ってからから書き出す。
　
この方法で線が変になるのを回避できるのはFlash CS3バージョンのみです。書き出し元のillustratorのバージョンは何でもOKです。ただこの方法を使うメリットは、CS3で線が変にならないこと以外にも

  • 複雑なillustratorデータをコピペでFlashに持っていくとデータが壊れることが多いが、この方法ならデータが壊れることはめったにない。
  • レイヤーで分ける必要がある素材をコピペでいちいちFlashに持っていくのは面倒。「AIレイヤーをSWFフレームに変換」するとレイヤーがフレームに分かれるので1発でFlashへ持っていくことが出来る。

というメリットがあるので、Flash8以下でもillustratorの素材を持っていく時はこの方法を使うのが無難でしょう。私の場合はFlash制作時、デザイナーからillustratorデータを元データとして渡されることが多いので、必ずこの方法でFlashへ読み込んでいます。

]]> http://chabudai.org/blog/?feed=rss2&p=33 illustratorで作った素材をFlash8以降に読み込むと線が変 http://chabudai.org/blog/?p=32 http://chabudai.org/blog/?p=32#comments Sun, 20 Apr 2008 09:47:02 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=32 初！「カテゴリーがflash」のエントリー。
予定ではこのブログはFlashの話がメインになるはずなんです。

Flashには変な仕様がたくさんあって、trick7.comの「FlashPlayer7 コンテンツ制作時の線の設定」の記事で紹介されている線の特性は、その代表的なもののひとつです。illustratorでイラストなどの素材を作って、それをFlash8以降に読み込むと「線の拡張機能」というのが漏れなくついてしまって、線の拡張機能をサポートしていないFlash Player7以下に書き出そうとするとエラーが出るし、イラストの線も変になってしまうという症状です。
実際にどのような状態になるのか以下に比較したswfを載せてみます。

右に比べて左のイラストの線はなんだかいびつというか、ところどころフリーハンドで描いたようになっていることがわかると思います。特に口元の辺りはガビガビです。

イラストでない、単純な形のものでも変な線になります。
　

右に比べると左の図のマルは少し歪んでいます。直線はまあ大丈夫ですが、破線にいたってはまったく意図と違うイメージになってしまってます。
　
この現象は、線の拡張機能を削除すれば回避できるのですが、illustratorで作った素材の量が膨大なときはひとつひとつ削除するわけにもいきません。一括で線の拡張機能を削除する方法は、trick7.comの記事のコメント中でも紹介されていますが、FlashをいったんMX2004形式として保存しなおすことです。

ただしこれには注意が必要で、MX2004形式で保存しなおすということは、Flash8にしかない機能がすべてなくなってしまうということなので、フィルタなどの設定は消えてしまいます。また、Flash CS3からはMX2004形式に保存することは出来ません。

Flash8でillustratorの素材を使うときは、たとえパブリッシュ設定が8以上であっても、一番最初の読み込む段階で一度MX2004以下に保存しなおすか、最初からいったんMX2004以下のFlashに読み込んでから使うことをおすすめします。

しかしCS3のバージョンしかもっていない方はどうしたらいいんでしょうか・・・。illustratorとFlashはCreative Suiteシリーズとして統合されたことだし、次期バージョンからはもっと簡単な、なんらかの回避策を付けてほしいものです。
　
[追記]
Flash CS3ではこの現象は回避できるようになってました。詳しくは次のエントリーで。適当なこと書いてアドビさんごめんなさい。

]]> http://chabudai.org/blog/?feed=rss2&p=32 久しぶりに三の宮までお出かけしてきた http://chabudai.org/blog/?p=31 http://chabudai.org/blog/?p=31#comments Sat, 19 Apr 2008 11:30:32 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=31 ikea_go.jpg

平日は起きてる間中ずっと働き、週末は「土日Flash」とかって家にこもって作品作ったり、ブログ書いたり、アート系のイベントに行ってみたり、なんかの勉強会に参加してみたり、はたまた仕事があってもなくても休日出勤してみたりと、仕事熱心すぎる皆さん！服とかはいつ買っているんですか？
3着くらいをローテーションでまわしているのか？それともPCおたくらしく、すべてネットショッピングでまかなっているのか？

というか私自身が最近一週間くらいで服がローテーションしてる気がするし、3ヶ月くらい買い物に行ってない気がする。本当は今日だって家にこもってずっとネットとかやってたい気分だったけど、来週いとこの結婚式があるのでそれのための服とかを買いに、しぶしぶ三の宮まで出かけました。

とりあえずIKEA号が写真に撮れたのでブログに載せとくかと。
　

jikokuhyo.jpg

これがIKEA号の時刻表。
この隣には「ただいまIKEAは120分待ちです」の張り紙。
　
　
uniqlo.jpg

ユニクロの前ではこの間の仕事の流儀で制作過程が紹介されていた、UTのCMが流れっぱなし。立ち止まって見ている人が常にいました。
　
　
showwindow.jpg

春のトレンドはガラ柄とミニワンピらしいですよ奥さん。

]]> http://chabudai.org/blog/?feed=rss2&p=31 桜の咲いてないお花見勉強会へ行って来ました http://chabudai.org/blog/?p=27 http://chabudai.org/blog/?p=27#comments Tue, 15 Apr 2008 04:32:27 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=27 sakura.jpg
　
関西のいろんなコミュニティの合同イベント「お花見勉強会」へ行って来ました。当日の桜は写真のような感じ。緑がまぶしいですね。

イベントの雰囲気は関西ライフハック研究会のOPAKENさんのブログの記事が写真もたくさんあってわかりやすいと思います。

以下覚えている限り、箇条書きのレポ。あまりまとまってません。
　

・オープニングは関西ライフハック研究会OPAKENさん作の、モーションタイポアニメーション。凝ってる！

てら子の桜・最初はコミュニティ対抗で、桜の文字をいかにきれいに描くかゲーム。これが優勝した、てら子チームの描いた「桜」。
一流Webデザイナーのこだわりが感じられる。
　
・発表はじまり。
・一人目は名古屋WCANのll_koba_llさん。
・Gainer（ゲイナー）を使ってFlashを操作する。

gainer.gif

・こんな感じで頭にGainerをはさんで振り向くとFlashがパブリッシュされる。
・ノートパソコンをかたむけて画面内の物体を動かしたりもする。
　
・ オブジェクト倶楽部のやっとむさん。
・寒いのでトイレが近くなってきた。トイレに行ったら発表終わってた（すすすいません）。

・GoogleAppEngineについて。GoogleのWebアプリホスティングサービス。
　
・Fxug　hirossyさん。
・半ズボンで来て失敗。
　
・k_maruさん。silverlightの人。
・silverlightの人はMSの回し者。
・若大将ポーズでプレゼン。無駄にかっこいい。

wakadaisho.gif

・↑膝以外にノートパソコンを置く場所がないんですよね。
・silverlightではトップクラスの技術持ってるよ。
・でもこれからＡｉｒも勉強します。（なぜ！）
　
・この辺りで私のカメラの充電が切れてテンション下がりまくる。
　
・てら子代表シナチクさん。
・春といえばサザエ。（？？？）。なのでサザエルーレットを作りました。

sazae.gif

・こんな感じでサザエファミリーの顔と髪型を合わせるルーレット。
・うまくいくとアナゴのジングルが見られるよ！
・あちこちから愛にあふれた「これはひどい」コール。
（追記）
サザエルーレット現物が公開されてますよ。
　
・Edaさん
・3日でＡｉｒアプリを作るよ日記。しかも全部タダで出来るよ。
・1日目ＦｌexBuilderをインストールするも、AirとFlexは違う！ということに気づいてアンインストール。
・制作のタイムスケジュールはだいたい深夜から開始→夜明けまでというスタイル。いつ寝るんでしょうか。
・xmlファイルとswfファイルとAirランタイムで3日でAirアプリ完成。
　
・mnishikawaさん。ライティングについてや、きれいな文字の書き方について。
・会議資料やホワイトボードの効率的な書き方など。
　
・このあたりから記憶があやふやに。
　
・オブジェクト倶楽部、岡島さん。
・dankogaiさんが書評を書いてくれたら、amazonの本の売り上げが上位に！リアディゾンの写真集の次に売れた！dankogaiさんはすごい！
・書評は8割が本の内容とは関係ないことことだったにも関わらず！
　
・関西ライフハック研究会OPAKENさん
・時間をあやつる能力を身に付ける
・終わってしまった過去をあやつることはできない。
・でもライフハックで未来をあやつることは可能です！
・EverNoteまじおすすめ。
　
・暖かい食べ物を求める人たち（ほぼ全員）で屋台のラーメンを根こそぎ食べ尽くす。
・その後飛び入り系の発表に。
　
・渡辺さんによる「ぼくはヒーロー」プレゼン
・3のつく数字と3の倍数のときにアホになり、8の倍数のときに以下略。
　
・てら子、なぎまぐさん
・WebCamで動体検知した場所から炎を燃やす。皆の寒さが最高潮になったところで少しでもあったまってもらおうというなぎまぐさんの優しさに乾杯。
　
・最後は一本締め。
・野外のイベントということで、いつもより異様な盛り上がりがあって楽しかったです。
　
[自分の反省点]
・やはり写真あるなしじゃ説得力が全然違う。恥ずかしくても写真載せて良いか発表者の方に確認を取れば良かった。
・カメラはしっかり充電する。
・ちゃんとメモを取る。特に名前・・・。わからないとか最悪。
　
レポで抜けている方がもしかしたらいるかもしれないです。間違いとか・・・、もし気付かれた方いれば指摘していただければ大変ありがたいです！

]]> http://chabudai.org/blog/?feed=rss2&p=27 自分的2007年のベストニューブログ 3つ http://chabudai.org/blog/?p=24 http://chabudai.org/blog/?p=24#comments Thu, 10 Apr 2008 17:57:41 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=24 なぜこの時期に2007年を総括しているのか全く意味がわかりませんが、この1年で始まった、あるいは私が知った素敵ブログをまとめとこうと思います。
　

去年、ザイーガなどでダダ漏れ女子のブログとして紹介され有名になったので、知ってる人も多いかも。ノーメークで普通ーっに仕事してる様子をUstreamで流し続けるその姿勢には尊敬の念を抱かずにいられません。

しかしhiniclipの本当にすごいとこは、女性が日常をライブ映像で流してる、それが見たいだけの野次馬根性でブログをのぞいた訪問者（←私）を、いつのまにか毎日hiniclipをチェックするようなファン（←私、私）に変えてしまう、更新頻度と質の高いエントリーの数々でしょう。

最近では「ヒャクシキ」とか「ギガジン」って呪文が効かない、女だらけのブロガーイベントという記事が話題になり、はてなブックマーク数が140越えしました。これは、はてブチェックするような人間なら、心に響くエントリーだと思います。ネットは広大、という当たり前のことを思い出させてくれました。
　

Yasuhiro Tsuchiyaさん経由で知りました。ばるぼらアンテナとか、教科書に乗らないインターネットの歴史とかで有名なばるぼらさんのブログ。とりあえずこの記事とか、このページのHelvetica Boldの画像のとこ見て完全にノックアウト・・・。自分を見つめなおしたいときに、読みなおそうと思います。人が切り込まないところに切り込んで言葉を与えられる人、超レスペクトです。

アーカイブへのリンクがないのですが、過去の記事はどうやって読めばいんでしょうか。
と思ったら普通にアーカイブページあった。
　

最後はblog.naggg.jp。trick7のこの記事経由で知りました。何気に2005年から続いてるブログなので全然2007年のニューブログじゃないけどまあいいか。年賀状を届けにいくよツアー2007は本当に衝撃的でした。
基本的にflashの技術などをまとめているブログなのですが、文章がアッパーでハイテンションでいつも笑わせてもらってます。ブログの文章に私性っぽいものってどこまで出せばいいのか、そのバランスって結構難しいと思うのですが、ナチュラルボーン面白い人というのはパンツ脱ぐくらい（・・・くらいってゆーかね）自分をさらけ出せばそれが普通にすごい面白いんだという例なんだと思います。もっと更新してほしいです。

]]> http://chabudai.org/blog/?feed=rss2&p=24 2007年のベストミュージックビデオ http://chabudai.org/blog/?p=23 http://chabudai.org/blog/?p=23#comments Mon, 07 Apr 2008 14:04:38 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=23

Bat For Lashes "What's a Girl to Do?"
ディレクター：Dougal Wilson
　

もう見られた方も多いと思いますがYoutubeのビデオアワード2007。
ビデオアワード2006のMost Creative賞がOKGoのHere It Goes Againだったので今年はどんなんかなー、と楽しみにしてたのですが、PVのような公式の映像は基本的に審査の対象外なんですね。良く考えてみると当たり前か。

というわけで、2007年のベストミュージックビデオはなんだったのか、気になったので調べてみることにしました。検索に引っかかったのは以下の3つのサイト。

Pitchfork Feature:Top 50 Music Videos of 2007
Director File - Ten Best Music Videos of 2007
25 Favorite Videos of 2007:Rolling Stone

上記のサイトで取り上げられているビデオをざっと見て、かぶってるものをチェック。結果、2007年のベストミュージックビデオは冒頭に貼ったものの他に以下のような感じでした。
　


Justice "D.A.N.C.E."
ディレクター：Jonas and Francois / SoMe
　
　

Feist: "1 2 3 4"
ディレクター：Patrick Daughters
　
　

RJD2 "Work It Out"
ディレクター： Joey Garfield
　
　
感想：
どれもかっこいいけど、一回見たら、もういいという感じ☆
2006年のOKGoとかHorrorsのビデオくらいインパクトがあって、中毒性のあるビデオはないかもー。

]]> http://chabudai.org/blog/?feed=rss2&p=23 友達のお店のサイトをつくりました http://chabudai.org/blog/?p=22 http://chabudai.org/blog/?p=22#comments Tue, 01 Apr 2008 18:30:20 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=22
　
さっきまで食い入るように録画した「プロフェッショナルの流儀」を見ていました。佐藤可士和は茶色のドーラン塗ってると確信。
　
友達の宝石屋さんのウェブサイトつくりました。　http://www.creategem.com/
会社ではなく個人で請けた仕事です。なんかとりあえず、ちょっとずつでもいろいろがんばろうと思います・・・。

]]> http://chabudai.org/blog/?feed=rss2&p=22 攻殻機動隊1.5巻、読みました http://chabudai.org/blog/?p=20 http://chabudai.org/blog/?p=20#comments Sun, 30 Mar 2008 18:32:25 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=20 fuchikoma.jpg
　
攻殻機動隊1.5巻を読みました。

といっても攻殻機動隊の新作ってわけではなく、2003年に出版されたデラックス版が最近通常版として出版されなおしたというだけなのですが、初めて読んだのでとても面白かったです。

内容は1巻の後そんなに時間の経っていない公安9課を舞台にした短編4編で、物語の中心は9課のバトー、トグサ、新人のアズマなどですが、素子もちょっとだけ出てきます。やっぱり攻殻機動隊は2巻のような長編の話より、短編で読む方が面白いなあ。

でもマンガは本のページ全体の半分だけで、あと半分は士郎正宗が書いたテレビアニメ用のシナリオのプロットなので、これで1800円は普通に考えて高いとおもいます。

ちなみに上の写真は攻殻SOLID BOXについていたスケルトンタイプのフチコマフィギュア。この写真を撮るためにケースから出してポーズとらせてたらいろんな部品がぽろぽろ取れたよ。この写真は奇跡の一枚で、これ撮った後すぐまたバランス崩してがしゃん！となった。ひどい。

]]> http://chabudai.org/blog/?feed=rss2&p=20 WordPress ME から WordPress日本語版 に変更してみる http://chabudai.org/blog/?p=18 http://chabudai.org/blog/?p=18#comments Thu, 27 Mar 2008 18:12:48 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=18 WordPress MEの配布元、WordPress Japanが3月末で閉鎖されるそうなので、ブログを始めて一週間もたっておらず、失うもののない私は脊髄反射でWordPress日本語版（実はこっちが公式？）に入れ替えることにしました。
　
WordPress ME 2.2.3 → WordPress 2.3.3日本語版へ変更
サーバーはさくらのスタンダード
　
手順はWordPress日本語版の配布元、WordPress｜日本語サイト（ややこしーな）のアップグレードのページを参考にしました。

  • WordPress2.3.3日本語版をダウンロード。
  • サーバーのWordPressのデータのバックアップを取ったら、wp-contentフォルダ内のテーマやスタイルシートなど、自分がカスタマイズしたもの以外のデータをすべて削除する。（wp-adminフォルダ、wp-includesフォルダ、ルートフォルダのすべてのファイルなど）
  • WordPress2.3.3のwp-config-sample.phpをwp-config.phpに変えて、DB_NAMEなどの設定を変更。（バックアップ取ったMEのwp-config.phpと同じでOK）
  • 新しいデータをアップロード。カスタマイズしたテーマなどを上書きしないように気をつける。
  • ブログのURL/wp-admin/upgrade.phpにアクセス。
    「WordPressをアップグレード」をクリック。
  • おわり。

WordPress MEから WordPress日本語版への変更は特に問題なくできました。
　
　
実はその前に試しでローカルサーバにWordPress日本語版をインストールしてみたのですが、そちらの方はちょっとつまずいたのでメモ。


インストール方法はMEと全く同じです。インストール完了まではスムーズに終了し、ブログも設置できたのですが、ログインしようとすると良くわからないエラーが出てきて、管理画面にアクセスすることができません。

検索してみると、エラーメッセージはこのページのものと全く同じ。
（WordPress Japanのフォーラムw）
解決策として下の方に出てるこのページの方法を試してみたのですが、このmy_cap.phpというパッチファイルはME用に作られたものなのでどうもうまく動かず、下のようなエラーが出てしまいました。
　
Warning: main(../wpj-wizard.php): failed to open stream: －以下略
Fatal error: main(): Failed opening required '../wpj-wizard.php' －以下略
　
PHPはさっぱりなのですが、エラーメッセージを良く見るとwpj-wizard.phpが開けないとかなんとか言ってるぽい。見てみるとWordPress日本語版の中には確かにwpj-wizard.phpというファイルがなく、WordPressMEの方にはあったのでそれをコピーして同じ場所に置き、もう一度my_cap.phpにアクセスしてみました。

！エラー出ない。

クリックして実行。おお。うまくいった。管理画面にログインできたよー。

]]> http://chabudai.org/blog/?feed=rss2&p=18 mProjectorで簡単にデスクトップアプリが作れるよ http://chabudai.org/blog/?p=17 http://chabudai.org/blog/?p=17#comments Wed, 26 Mar 2008 17:46:56 +0000 chabudai http://chabudai.sakura.ne.jp/blog/?p=17 前回のエントリで「燃えるIE」をmProjectorで作ったと書きましたが、mProjectorを知らない方のために紹介しておくと、mProjectorは、え･･･？て言うくらい簡単にデスクトップアプリケーションが作れるソフトです。

お仕事とかでスクリーンセーバを作ったことがある人なら多分知っている有名なスクリーンセーバ制作ソフト、screentimeを作っているスクリーンタイム社が出しているソフトで、screentimeでスクリーンセーバを書き出す感覚とほぼ同じ感じでデスクトップアプリを作成することが出来ます。ただし今のところ英語版のみしかありません。そして今後日本語版にローカライズされる可能性も多分ほとんどないでしょう。なぜならデスクトップアプリケーションと言えば、Adobe AIRがマジョリティを確立しつつあるからです。

ではAdobe Airがメジャーになりつつある中で、それでもmProjectorを使うメリットとはなんでしょうか。

　
mProjectorがAdobe Airより良さげなところ

  • ActionScriptの知識がほとんどなくてもOK
  • クライアントがランタイムをインストールする必要がない

　
逆にmProjectoｒがAdobe Airより弱いかもしれないところ

  • 英語版しかないだけあって、日本語を使うような仕組みが不安

  • むちゃくちゃ高機能なことはできない

  • 今後バージョンアップされないかも

　
mProjectoｒとAdobe Airをざっくりと比較した場合のメリットデメリットは上記のような感じです。大掛かりなデスクトップアプリケーションを作る場合はAirの方が良いかもしれませんが、簡単な機能のデスクトップアプリケーションを作るならmProjecotrでも全然いけるし、コストパフォーマンスも良さそうです。

結構使えそうな感じのするmProjectorなんですが、英語版しかないせいか、周りで使っているという噂はいっこも聞いたことがなく、ちょっと前までは日本語の解説ページもほとんどありませんでした。
　
もしかしてここで私がmProjectorの解説ブログでも書けば、結構ニッチな需要を満たせるんでは？そう思っていた矢先、mProjectorの使い方についてとてもわかりやすい記事が、デジアナウェア TOPICSさんというブログでまとめられました。出遅れた･･･。mProjectorの基本的な使い方についてはこのブログを読めばばっちりわかるので、興味のある方はぜひ。

ちなみにmProjectorの価格はWin版、Mac版合わせて$399です（片方だけだと$249）。円高の今買えば４万円くらいでお得だと思うのです。

]]> http://chabudai.org/blog/?feed=rss2&p=17