topical media & game development

talk show tell print

shader-google.mx

shader-google.mx (swf ) [ flash ] flex


  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  xmlns:ae="*"
  layout="absolute"
  backgroundColor="#000000"
  
  applicationComplete="complete()">
  
          <mx:Script>
                  <![CDATA[
                          import flash.filters.*;
                          import flash.utils.ByteArray;        
              import flash.utils.getTimer;  
                          
                          //[SWF(width="512",height="512",frameRate="60",backgroundColor="#000000")]        
  
                          //the file that contains the binary bytes of the PixelBender filter
                          [Embed("shader-crystal.pbj", mimeType="application/octet-stream")]
                          private var CustomFilter:Class;        
     
     
  

map info


  // code generated by http://www.umapper.com/
  // see http://www.umapper.com/maps/view/id/12650
  
   // uses (free) umap component from http://www.afcomponents.com/components/umap_as3
  
  import com.afcomponents.umap.core.UMap;
  import com.afcomponents.umap.interfaces.IOverlay;
  import com.afcomponents.umap.overlays.Layer;
  import com.afcomponents.umap.overlays.Marker;
  import com.afcomponents.umap.styles.DropShadowStyle;
  import com.afcomponents.umap.styles.GeometryStyle;
  import com.afcomponents.umap.styles.GradientStyle;
  import com.afcomponents.umap.styles.IconStyle;
  import com.afcomponents.umap.styles.MarkerStyle;
  import com.afcomponents.umap.styles.StrokeStyle;
  import com.afcomponents.umap.styles.TextStyle;
  import com.afcomponents.umap.types.Align;
  import com.afcomponents.umap.types.LatLng;
  import com.afcomponents.umap.types.Offset;
  import flash.display.CapsStyle;
  import flash.display.GradientType;
  import flash.display.InterpolationMethod;
  import flash.display.JointStyle;
  import flash.display.LineScaleMode;
  import flash.display.SpreadMethod;
  import flash.geom.Matrix;
  import flash.text.AntiAliasType;
  import flash.text.GridFitType;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;
  import flash.text.TextFormatAlign;
  
  private function addOverlaysToUmap(map:UMap, ...args:Array):void{
          var len:int = args.length;
          for(var i:int=0; i<len; i++){
                  if(args[i] is IOverlay) map.addOverlay(args[i]);
          }
  }
  private function addOverlaysToLayers(layer:Layer, ...args:Array):void{
          var len:int = args.length;
          for(var i:int=0; i<len; i++){
                  if(args[i] is IOverlay) layer.addOverlay(args[i]);
          }
  }
  
  // end of generated code
  
  

hello world click


              private function click ( event:MouseEvent ):void
              {
                  myLabel.text = "hello world";
              }
                          
  

camera -- as usual


              import flash.media.Camera;
              private var camera:Camera; 
    
              private function attach() : void {
              //stack.selectedIndex = state; // activate before attach
              camera = Camera.getCamera();
              ca.attachCamera(camera);
              //stack.selectedIndex = state; // delay until ready
              }
  
  

next / display(s)


  
                          private var state:Number = 0;
                          private var max:Number = 5;
                          
                          private function next():void {
                          state+=1;
                          if (state >= max) state = 0;
                          stack.selectedIndex = state;
                          if (state == 2) ca.play(); 
                          }
                          
                          
  
  

loop / effect(s)


                private function loop(e : Event) : void {
                            shader.data.size.value = [ 10 + Math.random()*20 ];
                            if (state == 3) shader.data.size.value = [ 0 + Math.random()*5 ];
                            stack.filters = [filter];       
                    }
  
              private var shader:Shader;
              private var filter:ShaderFilter;
                
  

on completion


  
  // original map code
     
     import com.afcomponents.umap.gui.*;
     import com.afcomponents.umap.core.UMap;
     import com.afcomponents.umap.types.LatLng;
     import com.afcomponents.umap.providers.google.GoogleProvider; // not documented yet!
     import mx.core.UIComponent;
     
  

create


  
              private var map:UMap; // http://www.afcomponents.com/components/umap_as3
  			private function complete():void
                          {
                          
                          
                                  //Pass the loaded filter to the Shader as a ByteArray
                                  shader = new Shader(new CustomFilter() as ByteArray);
                                          
                      shader.data.size.value = [20.0];
                                  filter = new ShaderFilter(shader);
  
                                  //add the filter to the image
                                  stack.filters = [filter];
                                  stage.addEventListener(Event.ENTER_FRAME, loop);
                                  
  

create map


  
        
        //code generated by http://www.umapper.com
        
        var _style1:IconStyle = new IconStyle({align:new Align(Align.CENTER, Align.BOTTOM), offset:new Offset(0, 0), scale:1, rotation:null, colorTransform:null});
  var _style2:TextStyle = new TextStyle({antiAliasType:AntiAliasType.ADVANCED, autoSize:TextFieldAutoSize.LEFT, condenseWhite:true, embedFonts:null, gridFitType:GridFitType.PIXEL, sharpness:null, thickness:null, textFormat:new TextFormat("_sans", 12, 0x000000, null, null, null, "", "", TextFormatAlign.LEFT, null, null, null, null), wordWrap:null, multiline:null, selectable:null, html:null, styleSheet:null});
  var _style3:DropShadowStyle = new DropShadowStyle({angle:15, distance:0.5, color:0x000000, alpha:0.6, blurX:3, blurY:3, strength:1, quality:1});
  var _style4:GradientStyle = new GradientStyle({type:GradientType.LINEAR, colors:[0xDDDDDD,0xFFFFFF], alphas:[70,100], ratios:[200,255], matrix:new Matrix(-1.1211606022543737e-17, -0.06103515625, 0.06103515625, -1.1211606022543737e-17, 50, 50), spreadMethod:SpreadMethod.PAD, interpolationMethod:InterpolationMethod.RGB, focalPointRatio:null});
  var _style5:StrokeStyle = new StrokeStyle({pixelHinting:true, noScale:LineScaleMode.NORMAL, capsStyle:CapsStyle.ROUND, jointStyle:JointStyle.ROUND, miterLimit:3});
  var _style6:MarkerStyle = new MarkerStyle({radius:10, icon:null, iconStyle:_style1, label:true, shadow:true, labelStyle:_style2, shadowStyle:_style3, fill:GeometryStyle.RGB, fillRGB:0xCC0000, fillAlpha:1, fillGradient:_style4, fillBitmap:null, stroke:GeometryStyle.RGB, strokeRGB:0x000000, strokeAlpha:1, strokeThickness:1, strokeGradient:null, strokeStyle:_style5});
  
  var _marker1:Marker = new Marker({id:5, index:"VU", name:"multimedia @ VU", description:"<TEXTFORMAT LEADING=\"2\"><P ALIGN=\"LEFT\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\">52.333900 / 4.865000</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\"2\"><P ALIGN=\"LEFT\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\">N 52° 20&apos; 2&apos;&apos; E 4° 51&apos; 54&apos;&apos;</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING=\"2\"><P ALIGN=\"LEFT\"><FONT FACE=\"Verdana\" SIZE=\"10\" COLOR=\"#000000\" LETTERSPACING=\"0\" KERNING=\"0\">The Vrije Universiteit (English name: &apos;&apos;VU University Amsterdam&apos;&apos;) is a university in Amsterdam, the Netherlands. The name is often abbreviated as VU. The board of trustees is the &apos;&apos;Vereniging VU-Windesheim&apos;&apos;, which also manages the Christelijke Hogeschool Windesheim polytechnic in Zwolle, The university is run by an executive board (&quot;College van Bestuur&quot; in Dutch) which makes decisions (<A HREF=\"http://en.wikipedia.org/wiki/Vrije_Universiteit\" TARGET=\"\">wiki</A>). For multimedia @ VU, send email to eliens@cs.vu.nl</FONT></P></TEXTFORMAT>", position:new LatLng(52.3339, 4.865), infoStyle:{autoSize:"auto", contentStyle:{wordWrap:true, multiline:true, autoSize:"left", condenseWhite:true, html:true}}}, _style6);
  var _layer1:Layer = new Layer();
  addOverlaysToLayers(_layer1, _marker1);
  
  

original code


        var ref:UIComponent = new UIComponent();
         
        map = new UMap();
        
        addOverlaysToUmap(map, _layer1); // from http://www.umapper.com
        
        map.setCenter(new LatLng(52.33313628963941, 4.865913391113281), 12);
        map.setZoom(15); // explicit
        map.setSize(this.width, this.height);
        
         
        ref.addChild(map);
        canvas.addChild(ref);
  
  

connect to google map(s)


  // define GoogleProvider with custom paths  (undocumented)
  var settings:URLRequest = new URLRequest("http://umap.s3.amazonaws.com/assets/xml/GoogleSettings.xml?rand=" + Math.random());
  var language:URLRequest = new URLRequest("http://maps.google.com/maps?file=api&v=2")
  var copyright:URLRequest = new URLRequest("http://www.afcomponents.com/proxy/g_map_as3/copyright.php");
  map.setProvider (new GoogleProvider(false, settings, language, copyright));
  
        ref.focusManager.deactivate();
         
           map.addControl(new MapTypeControl());
           map.addControl(new ZoomControl());
           map.addControl(new PositionControl());
                                  
                          }
                  ]]>
          </mx:Script>
          
  

component(s)


  
      <ae:component_screen id="display"/>
      <mx:ViewStack id="stack" width="100%" height="100%">
          <mx:Canvas>
          <mx:Image id="im" click="next();" right="0" left="0" top="0" bottom="0" maintainAspectRatio="false" source="@Embed(source='soutine.jpg')"/>
          </mx:Canvas>
          <mx:Canvas>
          <mx:Image id="vd"  click="next();"  right="0" left="0" top="0" bottom="0" maintainAspectRatio="false" source="@walk.png"/>
          </mx:Canvas><mx:Canvas>
          <mx:VideoDisplay id="ca"  click="next();" right="0" left="0" top="0" bottom="0" maintainAspectRatio="false" source="../assets/clips/tube/balloon.flv"/>
      </mx:Canvas>
      <mx:Panel title="hello world" horizontalAlign="center"
          paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
          <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
          <mx:Button id="myButton" label="click me!" click="click(event);" />
      </mx:Panel>
      <mx:Canvas id="canvas">
          
      </mx:Canvas>
      </mx:ViewStack>
      <mx:HBox right="5" top="10">
      <mx:Button color="gray" borderColor="0" fillAlphas="[0, 0]" label="camera" click="attach();"/>
      </mx:HBox>
      <mx:HBox left="5" bottom="10">
      <mx:Button color="gray" borderColor="0" fillAlphas="[0, 0]" label="next" click="next();"/>
      </mx:HBox>
      <mx:HBox right="5" bottom="10">
      <mx:Button color="gray" borderColor="0" fillAlphas="[0, 0]" label="stop" click="ca.stop();"/>
      <mx:Button color="gray" borderColor="0" fillAlphas="[0, 0]" label="play" click="ca.play();"/>
      <mx:Button color="gray" borderColor="0" fillAlphas="[0, 0]" label="fullscreen" click="display.toggle();"/>
      </mx:HBox>
  </mx:Application>
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.