TECH-NI Blog http://tech.nitoyon.com/blog/ Blog about ActionScript 3.0/Flex. ja Copyright 2008 Thu, 26 Jun 2008 21:07:46 +0000 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss Color Illusion Generator released I released a 'Color Illusion Generator', which enables to create a illusion movie from an arbitrary image.

(Example)

You can embed the movie to your blog.

Source code: Illusion.as

]]> http://tech.nitoyon.com/blog/2008/06/color_illusion_generator_released.html http://tech.nitoyon.com/blog/2008/06/color_illusion_generator_released.html ActionScript Thu, 26 Jun 2008 21:07:46 +0000 Google Earth control in Google Maps I placed Google Earth control in Google Maps.

Here is the code(185 lines):

]]>
  1. package {
  2.     import flash.display.*;
  3.     import flash.geom.*;
  4.     import flash.events.*;
  5.     import flash.filters.DisplacementMapFilter;
  6.     import com.google.maps.*;
  7.  
  8.     [SWF(backgroundColor="0x000000")]
  9.     public class GoogleEarthControl extends Sprite {
  10.         private const WIDTH:int = 400;
  11.         private const HEIGHT:int = 400;
  12.         private const VIEWDISTANCE:Number = 500;
  13.         private var map:Map;
  14.         private var mapContainer:Sprite;
  15.         private var bmd:BitmapData;
  16.  
  17.         public function GoogleEarthControl() {
  18.             stage.scaleMode = "noScale";
  19.             stage.align = "TL";
  20.  
  21.             mapContainer = new Sprite();
  22.             addChild(mapContainer);
  23.  
  24.             map = new Map();
  25.             map.key = "ABQIAAAA6de2NwhEAYfH7t7oAYcX3xRWPxFShKMZYAUclLzloAj2mNQgoRQZnk8BRyG0g_m2di3bWaT-Ji54Lg";
  26.             map.setSize(new Point(WIDTH, HEIGHT));
  27.             map.addEventListener(MapEvent.MAP_READY, function(event:*):void{
  28.                 map.setCenter(new LatLng(35.003759, 135.769322), 10, MapType.SATELLITE_MAP_TYPE);
  29.  
  30.                 var mapMask:Sprite = new Sprite();
  31.                 mapMask.graphics.beginFill(0);
  32.                 mapMask.graphics.drawRect(0, 0, WIDTH, HEIGHT);
  33.                 mapMask.graphics.endFill();
  34.                 mapContainer.mask = mapMask;
  35.  
  36.                 bmd = new BitmapData(WIDTH, HEIGHT);
  37.  
  38.                 var s1:ScrollBar = new ScrollBar(50);
  39.                 addChild(s1);
  40.                 s1.rotation = -90
  41.                 s1.x = WIDTH - 100; s1.y = 30;
  42.                 s1.addEventListener("change", function(event:Event):void{
  43.                     updateValue(s1.value);
  44.                 });
  45.                 s1.dispatchEvent(new Event("change"));
  46.  
  47.                 var s2:ScrollBar = new ScrollBar(80);
  48.                 addChild(s2);
  49.                 s2.x = WIDTH - 10; s2.y = 50;
  50.                 s2.addEventListener("change", function(event:Event):void{
  51.                     map.setZoom((100 - s2.value) / 100 * map.getMaxZoomLevel());
  52.                 });
  53.                 s2.dispatchEvent(new Event("change"));
  54.  
  55.                 var r:RotationControl = new RotationControl(-10);
  56.                 addChild(r);
  57.                 r.x = WIDTH - 60; r.y = 90;
  58.                 r.addEventListener("change", function(event:Event):void{
  59.                     var matrix:Matrix = new Matrix();
  60.                     matrix.translate(-WIDTH / 2, -HEIGHT / 2);
  61.                     matrix.rotate(r.value * Math.PI / 180);
  62.                     matrix.translate(WIDTH / 2, HEIGHT / 2);
  63.                     map.transform.matrix = matrix;
  64.                 });
  65.                 r.dispatchEvent(new Event("change"));
  66.             });
  67.             mapContainer.addChild(map);
  68.         }
  69.  
  70.         private function updateValue(value:int):void{
  71.             var rad:Number = value / 100 * 60 * Math.PI / 180;
  72.             var p:Number = -Math.sin(rad) / VIEWDISTANCE;
  73.  
  74.             bmd.lock();
  75.             var HW:int = WIDTH / 2;
  76.             var HH:int = HEIGHT / 2;
  77.             for(var j:int = -HH; j < HH; j++){
  78.                 var pj:Number = 1 + j * p;
  79.                 for(var i:int = -HW; i < HW; i++){
  80.                     var _x:int = pj * i;
  81.                     var _y:int = pj * j / Math.cos(rad);
  82.                     bmd.setPixel(i + HW, j + HH, getColor((_x - i) * 1 + 0x80, (_y - j) * 1 + 0x80, 0));
  83.                 }
  84.             }
  85.             bmd.unlock();
  86.  
  87.             mapContainer.filters = [new DisplacementMapFilter(bmd, new Point(0, 0), 1, 2, 256, 256, "color")];
  88.         }
  89.  
  90.         private static function bounds(val:Number, min:Number = Number.POSITIVE_INFINITY, max:Number = Number.NEGATIVE_INFINITY):Number {
  91.             return Math.max(Math.min(val, max), min);
  92.         }
  93.  
  94.         private static function getColor(r:int, g:int, b:int):uint {
  95.             return Math.floor(bounds(r, 0, 255)) * 0x10000
  96.                  + Math.floor(bounds(g, 0, 255)) * 0x100
  97.                  + Math.floor(bounds(b, 0, 255));
  98.         }
  99.     }
  100. }
  101.  
  102. import flash.display.Sprite;
  103. import flash.events.*;
  104. import flash.geom.Point;
  105.  
  106. class ScrollBar extends Sprite {
  107.     public var value:int;
  108.  
  109.     public function ScrollBar(_value:int):void {
  110.         value = _value;
  111.  
  112.         useHandCursor = buttonMode = true;
  113.         graphics.beginFill(0xffffff);
  114.         graphics.lineStyle(0);
  115.         graphics.drawRect(0, -2, 8, 112);
  116.         graphics.endFill();
  117.  
  118.         var tab:Sprite = new Sprite();
  119.         tab.graphics.beginFill(0xffffff);
  120.         tab.graphics.lineStyle(0);
  121.         tab.graphics.drawRect(-8, 0, 24, 8);
  122.         tab.graphics.endFill();
  123.         tab.y = _value;
  124.         addChild(tab);
  125.  
  126.         addEventListener("mouseDown", function(event:MouseEvent):void {
  127.             stage.addEventListener("mouseMove", mouseMoveHandler);
  128.             stage.addEventListener("mouseUp", mouseUpHandler);
  129.             mouseMoveHandler(event);
  130.         });
  131.  
  132.         var mouseMoveHandler:Function = function(event:MouseEvent):void {
  133.             var p:Point = globalToLocal(new Point(stage.mouseX, stage.mouseY));
  134.             tab.y = Math.min(Math.max(0, p.y), 100);
  135.         }
  136.         var mouseUpHandler:Function = function(event:MouseEvent):void {
  137.             value = tab.y;
  138.             dispatchEvent(new Event("change"));
  139.             stage.removeEventListener("mouseMove", mouseMoveHandler);
  140.             stage.removeEventListener("mouseUp", mouseUpHandler);
  141.         }
  142.     }
  143. }
  144.  
  145. class RotationControl extends Sprite {
  146.     public var value:int = 0;
  147.  
  148.     public function RotationControl(_value:int):void {
  149.         value = _value;
  150.  
  151.         useHandCursor = buttonMode = true;
  152.         graphics.beginFill(0xffffff);
  153.         graphics.lineStyle(0);
  154.         graphics.drawCircle(0, 0, 40);
  155.         graphics.drawCircle(0, 0, 32);
  156.         graphics.endFill();
  157.  
  158.         var tab:Sprite = new Sprite();
  159.         tab.graphics.beginFill(0xffffff);
  160.         tab.graphics.lineStyle(0);
  161.         tab.graphics.drawRect(-44, -8, 16, 16);
  162.         tab.graphics.endFill();
  163.         tab.rotation = _value + 90;
  164.         addChild(tab);
  165.  
  166.         addEventListener("mouseDown", function(event:MouseEvent):void {
  167.             stage.addEventListener("mouseMove", mouseMoveHandler);
  168.             stage.addEventListener("mouseUp", mouseUpHandler);
  169.             mouseMoveHandler(event);
  170.         });
  171.  
  172.         var mouseMoveHandler:Function = function(event:MouseEvent):void {
  173.             var p:Point = globalToLocal(new Point(stage.mouseX, stage.mouseY));
  174.             tab.rotation = p.x == 0 ? 90 : Math.atan(p.y / p.x) / Math.PI * 180 + (p.x > 0 ? 180 : 0);
  175.             value = tab.rotation - 90;
  176.             dispatchEvent(new Event("change"));
  177.         }
  178.         var mouseUpHandler:Function = function(event:MouseEvent):void {
  179.             value = tab.rotation - 90;
  180.             dispatchEvent(new Event("change"));
  181.             stage.removeEventListener("mouseMove", mouseMoveHandler);
  182.             stage.removeEventListener("mouseUp", mouseUpHandler);
  183.         }
  184.     }
  185. }
]]> http://tech.nitoyon.com/blog/2008/05/google_earth_control_in_google.html http://tech.nitoyon.com/blog/2008/05/google_earth_control_in_google.html ActionScript Mon, 26 May 2008 01:04:10 +0000 Google Maps Globe I created a globe using Google Maps API for Flash.

It is impossible to get the image data by BitmapData.draw(), so I used a DisplacementMapFilter.

Here is the code(70 lines):

]]>
  1. package {
  2.     import flash.display.*;
  3.     import flash.geom.*;
  4.     import flash.filters.DisplacementMapFilter;
  5.     import flash.utils.setInterval;
  6.     import com.google.maps.*;
  7.  
  8.     [SWF(backgroundColor="0x000000")]
  9.     public class GoogleEarthAs3_2 extends Sprite {
  10.         private const WIDTH:int = 800;
  11.         private const HEIGHT:int = 500;
  12.         private const RADIUS:int = 81;
  13.         private var map:Map;
  14.  
  15.         public function GoogleEarthAs3_2() {
  16.             stage.scaleMode = "noScale";
  17.             stage.align = "TL";
  18.  
  19.             map = new Map();
  20.             map.key = "ABQIAAAA6de2NwhEAYfH7t7oAYcX3xRWPxFShKMZYAUclLzloAj2mNQgoRQZnk8BRyG0g_m2di3bWaT-Ji54Lg";
  21.             map.setSize(new Point(800, 500));
  22.             map.addEventListener(MapEvent.MAP_READY, function(event:*):void{
  23.                 var lng:Number = 0;
  24.                 var types:Array = [MapType.SATELLITE_MAP_TYPE, MapType.PHYSICAL_MAP_TYPE, MapType.NORMAL_MAP_TYPE];
  25.                 var type:int = 0;
  26.                 map.setCenter(new LatLng(0, lng), 1, types[0]);
  27.                 map.disableDragging();
  28.  
  29.                 setInterval(function():void
  30.                 {
  31.                     lng -= 3;
  32.                     type = Math.random() < 0.05 ? (type + 1) % 3 : type;
  33.                     map.setCenter(new LatLng(0, lng), 1, types[type]);
  34.                     lng = lng % 360;
  35.                 }, 200);
  36.             });
  37.  
  38.             var bmd:BitmapData = new BitmapData(WIDTH, HEIGHT, false, 0);
  39.             for(var j:int = 0; j < RADIUS * 2; j++){
  40.                 var ay:Number = Math.PI / 2 - Math.acos(1 - j / RADIUS);
  41.                 var dy:Number = RADIUS - j - RADIUS * ay;
  42.                 var rx:Number = RADIUS * Math.cos(ay);
  43.                 for(var i:int = RADIUS - rx; i < RADIUS + rx; i++){
  44.                     var ax:Number = Math.PI / 2 - Math.acos(1 - (i - RADIUS + rx) / rx);
  45.                     var dx:Number = RADIUS - i - rx * ax;
  46.  
  47.                     bmd.setPixel(i, j, getColor(dx * 3 + 128, dy * 3 + 128, 128));
  48.                 }
  49.             }
  50.  
  51.             var diff:Number = (HEIGHT - 2 * RADIUS) / 2;
  52.             map.filters = [new DisplacementMapFilter(bmd, new Point(diff, diff), 1, 2, 128, 128)];
  53.             var matrix:Matrix = new Matrix();
  54.             matrix.translate(-diff, -diff);
  55.             map.transform.matrix = matrix;
  56.             addChild(map);
  57.  
  58.             var msk:Sprite = new Sprite();
  59.             msk.graphics.beginFill(0);
  60.             msk.graphics.drawCircle(RADIUS, RADIUS, RADIUS);
  61.             msk.graphics.endFill();
  62.             addChild(msk);
  63.             mask = msk;
  64.         }
  65.  
  66.         private static function getColor(r:int, g:int, b:int):uint {
  67.             return r * 0x10000 + g * 0x100 + b;
  68.         }
  69.     }
  70. }
]]> http://tech.nitoyon.com/blog/2008/05/google_maps_globe.html http://tech.nitoyon.com/blog/2008/05/google_maps_globe.html ActionScript Fri, 23 May 2008 16:39:43 +0000 Google Maps API for Flash without MXML In the Google Maps API for Flash tutorial, a sample using MXML is introduced. But MXML is not required, because com.google.maps.Map class derives Sprite class.

The following sample demonstrates how to rotate and blur the map without MXML.

Here is the code:

]]>
  1. package {
  2.     import flash.events.Event;
  3.     import flash.geom.Matrix;
  4.     import flash.filters.BlurFilter;
  5.     import com.google.maps.Map;
  6.     import com.google.maps.MapEvent;
  7.     import com.google.maps.MapType;
  8.     import com.google.maps.LatLng;
  9.  
  10.     public class GoogleGuruGuru extends Map {
  11.         public function GoogleGuruGuru() {
  12.             super();
  13.             key = "ABQIAAAA6de2NwhEAYfH7t7oAYcX3xRWPxFShKMZYAUclLzloAj2mNQgoRQZnk8BRyG0g_m2di3bWaT-Ji54Lg";
  14.  
  15.             addEventListener(MapEvent.MAP_READY, function(event:Event):void{
  16.                 setCenter(new LatLng(35.003759, 135.769322), 18, MapType.NORMAL_MAP_TYPE);
  17.             });
  18.  
  19.             var r:int = 0;
  20.             var scale:Number = 1;
  21.             addEventListener("enterFrame", function(event:Event):void{
  22.                 r = (r + 1) % 360;
  23.                 var rad:Number = 2 * Math.PI * r / 360;
  24.  
  25.                 var matrix:Matrix = new Matrix();
  26.                 matrix.translate(-stage.stageWidth / 2, -stage.stageHeight / 2);
  27.                 matrix.rotate(rad);
  28.                 matrix.translate(stage.stageWidth / 2, stage.stageHeight / 2);
  29.                 transform.matrix = matrix;
  30.             });
  31.  
  32.             stage.addEventListener("mouseDown", function(event:Event):void{
  33.                 filters = [new BlurFilter(10, 10)];
  34.             }, true);
  35.             stage.addEventListener("mouseUp", function(event:Event):void{
  36.                 filters = [];
  37.             });
  38.         }
  39.     }
  40. }
]]> http://tech.nitoyon.com/blog/2008/05/google_maps_api_for_flash_with.html http://tech.nitoyon.com/blog/2008/05/google_maps_api_for_flash_with.html ActionScript Sun, 18 May 2008 09:43:35 +0000 Keynote-like cube transition by FIVe3D I tried FIVe3D v2.1, very simple 3D library. For example, 'Graphics3D' class has method like lineTo() and drawCircle(). Looks like Graphics class!!

I created an example 'Keynote-like cube transition' using Bitmap3D class.