Archive for 11月, 2009

地球儀的なもの(PaperVision3D)

2009 年 11月 27 日

(1)ちょっと落ち着いた時間に「.fla2」を詠んでいたら、仕事とは関係ないFlashを作りたくなった。
(2)どうも風の噂では久々に3Dの案件が舞い込んでくるらしい。
以上2点から、PaperVision3Dのライブラリを引っ張り出してきて、地球儀的なFlashを作りました。マウスホイールでぐりぐり回せます。
処理としては、

・各都市の「緯度・経度」から、3次元上に「DisplayObject3D」を配置。
・それぞれの「DisplayObject3D」のスクリーン座標を得る(DisplayObject3D.screen.x、DisplayObject3D.screen.y)
・その座標に都市名の噴出しSpriteを表示させる(EnterFrame処理)

みたいな感じでやりましたが、2番目のスクリーン座標がいっくらやっても「0」しか返さず、小一時間ほど悩んで悩んで悩んで検索したら、どうも

Actionscript:
  1. var display_object_3d : DisplayObject3D;
  2. display_object_3d.autoCalcScreenCoords = true;

という「autoCalcScreenCoords」プロパティをtrueにしてやんないとスクリーン座標は「0」のママとのことで、ここにつまづきました。

以前担当した3D案件で、3D内のテキストはsmooth処理してやらない限りギワギワになっちゃったり、smooth処理入れたら入れたで重くなっちゃったりで、そんな感じの「重さとデザイン精度のバランス感」に苦しみまして、テキストはやっぱり2次元上のSpriteに別で表示してあげた方が良かったかなぁ、とずっと心残りだったことから、今回screen座標にチャレンジ。

使っている地球の画像の精度と、各都市の緯度経度の設定を細かく設定しているわけではないので、ちょっとずれたりしているとこもありますがご容赦ください。各都市の緯度・経度を参考にしたのはこのページです。

AS2からでも読み書きできるSharedObjectをAS3で定義(個人的メモ)

2009 年 11月 24 日

先日まで作ってたFlashで、AS3内で作成されたSharedObjectが、AS2で読み込めず、「あれ?あらら?」と悩んでいたら、SharedObject.defaultObjectEncodingの設定が必要だったことを失念していた。なので、個人的メモ。

Actionscript:
  1. import flash.net.SharedObject;
  2. import flash.net.ObjectEncoding;
  3. SharedObject.defaultObjectEncoding = ObjectEncoding.AMF0;

ところで、噂の良書「.fla2」が本屋でまったく見当たりません。どこか置いてないかな。

.fla 2 ―Idea of Flash Creation―

著者/訳者:新藤愛大 寺井周平 萩原俊矢 小山智彦 眞野東紗 小瀧和正

出版社:ワークスコーポレーション( 2009-11-21 )

単行本 ( 328 ページ )


テキストパタパタ

2009 年 11月 17 日

This movie requires Flash Player 10.0.0

一緒に仕事しているデザイナさんやクライアントさんから、よく「こんな感じでテキスト出したい」と、某巨匠制作のサイトを見せられること数回。まだ仕事で実装はしたことないですが、一応念のためにTextFlapperというクラスを空き時間に制作。オンマウスするとお馴染みの動き。ロジックは以前作ったこれにちょっとだけ近いです。

エンドレスな背景画像をマウスの動きに合わせて移動させるとき

2009 年 11月 2 日

This movie requires Flash Player 10.0.0

久々のFlashネタ。たいしたことはありませんが(汗)。
エンドレスな背景画像を、マウスの動きなどにあわせてドラッグさせるとき、広大なビットマップを作って、条件文を使ってちょこちょこ変更させるのが定石かもしれません。が、MouseEvent.MOUSE_MOVEのイベントハンドラ内で、マウスのずれた分だけ、matrixを調整して、SpriteにbeginBitmapFillでタイリング描き込みするのが良いのかな、と思って作ってみました。

Actionscript:
  1. package
  2. {
  3.     import flash.display.Bitmap;
  4.     import flash.display.BitmapData;
  5.     import flash.display.Sprite;
  6.     import flash.events.Event;
  7.     import flash.display.StageAlign;
  8.     import flash.display.StageScaleMode;
  9.     import flash.events.MouseEvent;
  10.     import flash.geom.Matrix;
  11.     import flash.geom.Point;
  12.     import flash.ui.Mouse;
  13.     import flash.ui.MouseCursor;
  14.    
  15.     /**
  16.      * エンドレスビットマップ
  17.      * @author Shinro Kato(ipuheke)
  18.      */
  19.     public class Main extends Sprite
  20.     {
  21.         [Embed(source='../lib/endless.gif')]
  22.         private var bmpClass:Class;
  23.         private var bmp_mt:Bitmap;
  24.        
  25.         private var sp:Sprite;
  26.        
  27.         private var dragStartPoint:Point;
  28.        
  29.         private var matrix:Matrix;
  30.        
  31.        
  32.         /**
  33.          * コンストラクタ
  34.          */
  35.         public function Main():void
  36.         {
  37.             if (stage) init();
  38.             else addEventListener(Event.ADDED_TO_STAGE, init);
  39.         }
  40.        
  41.        
  42.         /**
  43.          * 初期化
  44.          * @param   e
  45.          */
  46.         private function init(e:Event = null):void
  47.         {
  48.             removeEventListener(Event.ADDED_TO_STAGE, init);
  49.             // entry point
  50.            
  51.             stage.align = StageAlign.TOP_LEFT;
  52.             stage.scaleMode = StageScaleMode.NO_SCALE;
  53.            
  54.             stage.addEventListener(MouseEvent.MOUSE_DOWN, stageMouseDown);
  55.            
  56.             //basePointを定義
  57.             basePoint = new Point();
  58.             dragStartPoint = new Point();
  59.            
  60.             //matrix
  61.             matrix = new Matrix();
  62.            
  63.            
  64.             //bmpを定義
  65.             bmp_mt = new bmpClass() as Bitmap;
  66.            
  67.             //spriteを定義
  68.             sp = new Sprite();
  69.             sp.graphics.beginBitmapFill(bmp_mt.bitmapData);
  70.             sp.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
  71.             sp.graphics.endFill();
  72.             addChild(sp);
  73.            
  74.             //マウスカーソル(手)
  75.             Mouse.cursor = MouseCursor.HAND;
  76.         }
  77.        
  78.        
  79.         /**
  80.          * マウスダウン
  81.          * @param   e
  82.          */
  83.         private function stageMouseDown(e:MouseEvent):void {
  84.             //押された場所
  85.             dragStartPoint.x = e.stageX;
  86.             dragStartPoint.y = e.stageY;
  87.            
  88.             sp.addEventListener(MouseEvent.MOUSE_MOVE, stageMouseMove);
  89.             sp.addEventListener(MouseEvent.MOUSE_UP, stageMouseUp);
  90.         }
  91.        
  92.         /**
  93.          * マウスムーブ
  94.          * @param   e
  95.          */
  96.         private function stageMouseMove(e:MouseEvent):void {
  97.            
  98.             //matrixのズレ(最小で良いのでタイルのサイズで割った余りでよい)
  99.             matrix.tx -= (dragStartPoint.x - e.stageX) % bmp_mt.width;
  100.             matrix.ty -= (dragStartPoint.y - e.stageY) % bmp_mt.height;
  101.            
  102.             dragStartPoint.x = e.stageX;
  103.             dragStartPoint.y = e.stageY;
  104.            
  105.             //Spriteに描き込む
  106.             sp.graphics.clear();
  107.             sp.graphics.beginBitmapFill(bmp_mt.bitmapData,matrix);
  108.             sp.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
  109.             sp.graphics.endFill();
  110.         }
  111.        
  112.         /**
  113.          * マウスアップ
  114.          * @param   e
  115.          */
  116.         private function stageMouseUp(e:MouseEvent):void {
  117.             sp.removeEventListener(MouseEvent.MOUSE_MOVE, stageMouseMove);
  118.             sp.removeEventListener(MouseEvent.MOUSE_UP, stageMouseUp);
  119.         }
  120.        
  121.     }
  122.    
  123. }

2009/12/02 修正: mouseMoveイベントハンドラ内で、drawRectする前にsp.graphics.clear(); を追加。これを書かないと延々とRectを描き続けるので重くなります。