Google Maps in Flash

Google has very good map feature, Using that you can search for the places, you can get the directions, you can find interested places in the area, you can share your photos on the maps etc. All these you must have seen in the browser page. This might be developed using html and JavaScript.

Now it is possible to have all above features in the flash using Google Maps API for Flash. Thanks to Google for providing free API to deal with maps. Believe me; it is very fast and so accurate. I really love it. Apart from the performance feature, using Google Maps API for Flash is so easy. You will learn that in this tutorial.

I will not explain any flash related features in this tutorial, to execute this tutorial one need to have Flash Action Script 3.0 (AS3.0) knowledge.

This tutorial is basically divided into two parts, first part will explain about setting up the Google Maps API in Flash CS3. (I am not using Flash CS5 for this tutorial, as my trial period is expired). Second part will explain about the integrating the Google Map API.
In second part we will cover following features of the Google Maps API.

Set the Map to particular location.
Zoom feature.
Setting Markers.

To use the Google Maps in the flash you will require API. That you can download from Google web site. In this page you will find the SDK link on the right side.
Download the SDK and extract it. You will find two folders, docs and libs. Look inside the libs folder you will find the SWC file for the Flash(map_1_20.swc) as well as for the Flex(map_flex_1_20.swc).



For this tutorial we are using Flash, Hence we will use the map_1_20.swc file. You need to copy map_1_20.swc file to specific folder at following location to get it listed in the component window in Flash IDE.
C:\Program Files\Adobe\Adobe Flash CS3\{language}\Configuration\Components\Google\
Note: I have created Google Folder so that all Google API will can be placed at same location.
Now if you run your Flash CS3. And check the components windows (Windows > Components). You will find the GoogleMpasLibrary component in Google tag(Refer below image). You have set the Google API in your Flash IDE.



Next you will require to have Google Maps API Key. To sign up for the key, click here and follow the instruction in the website. Once you have the generated key, Store it in the Locker (Just Kidding). Make sure you copy that so that you can use it for different applications.

You are all set to develop a flash application using Google Map API.

Open Flash CS3 IDE to start developing your Google Map Application. Now first thing, Open new Flash AS3 document. As a good practice, I always save that to my desire location. So first save the document and Name it as you like. I am naming it with GoogleMapExample.fla. Now next step is to utilize the Google Map API. To use the Google Map API open Components window and drop GoogleMapsLibrary to your stage. You will find only blue bounding box. Don’t worry, API will not show that bounding box it will handle it properly.

Now as we have set the API for our application, It’s time to write some code. I have written following code to complete this application. Don’t worry I have added comments for each statement in the code.

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.controls.ZoomControl; 
import com.google.maps.overlays.*;
import com.google.maps.MapEvent;
import com.google.maps.MapMouseEvent;
import com.google.maps.InfoWindowOptions;

//Map instance
var map:Map = new Map();
//Setting Google Map API key
map.key = "ENTER your GOOGLE MAP KEY";
//Setting Sensor value, Set this true when you are using for GPS.
map.sensor = "false";
//Setting the size of the Map
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
//Adding Listener on Map Raeady.
map.addEventListener(MapEvent.MAP_READY, onMapReady);
//Adding map to the stage.
this.addChild(map);

//Marker instance
var marker:Marker;

//MapEvent.MAP_READY Handler, Fires when Map is ready
function onMapReady(event:Event):void {
 //Seting the center of the Map using Latitude and longitude Object, Second parameter is for zoom level
 map.setCenter(new LatLng(19.17127500109175, 72.87111282348633), 10);
 //Adding Zoom Control to the map
 map.addControl(new ZoomControl());
 
 //Setting marker to the center of the Map. using Latitude and longitude Object, Second options is for the Marker option, Here we are getting MarkerOption object by calling custom function.
 marker = new Marker(new LatLng(19.17127500109175, 72.87111282348633), createMarkerOption('A'));
 //Setting Marker on the Map
 map.addOverlay(marker); 
 //Setting Click hander on the marker to show the information.
 marker.addEventListener(MapMouseEvent.CLICK, showInfoWindow)
}

//MapMouseEvent.CLICK Handler, Fires when user click on the Marker
function showInfoWindow(e:MapMouseEvent):void
{
 //Opening the Infomation Window, 
 marker.openInfoWindow(new InfoWindowOptions({contentHTML:"Mumbai , Maharashtra, INDIA "}));
}

//Function to create the Marker Option. Label Paramer.
function createMarkerOption(label:String):MarkerOptions
{
 var options:MarkerOptions = new MarkerOptions({
   //Stroke style
   strokeStyle: {
  color: 0x987654
   },
   //Fill color
   fillStyle: {
  color: 0x009933,
  alpha: 0.8
   },
   
   //label
   label: label,
   //Label Text Format
   labelFormat: {
  bold: true
   },
   //Marker Radius
   radius: 11,
   //Marker Shadow boolean
   hasShadow: true,
   //Marker Clickable booleam
   clickable: true,
   //Marker Draggable Boolean
   draggable: false
 });
 
 return options;
}

In this tutorial I have used Mumbai as a location, You can get your desire location Latitude and longitude by doing following steps.

Step 1: Go to http://maps.google.com
Step 2: Search for your desire place.
Step 3: Paste below code in your browser adress bar.

javascript:void(prompt('',gApplication.getMap().getCenter()));

Step 4: This will prompt you with the Latitude and longitude values.

The output will look like this. Click on the image to view the sample application.

Typing exercise game using Pure MVC

I really like the pureMVC framework, I hope you will also like this.

It is really amazing framework, Easy to use and nicely developed.

I tried developing one game using this framework. It took little while initially but once I got hands to this it was really easy.

I have developed a typing exercise game, in which random character will dropped from the top; user has to type the right character to earn the score. Currently this game is covering only characters which are not case sensitive. I am upgrading this game to make this case sensitive; also I am planning to add numbers and special characters.

This game has few features like, score display, target hit display, user life display etc. Once the character reaches to certain point color will turn to red, which indicates the risk of loosing that character.

This game has four levels, after each level the speed for characters increase. Score 5 can be earned by hitting each characters

Suggestion are welcome.

Action Script 3 Sound Spectrum

AS3 came up with many changes. Its complete new architecture with many new classes.
Sound Spectrum is one of that. Now using AS3 you can read the sound bytes using Sound Spectrum class. I had tried one simple example to learn about this new class.
It is very simple and want to share with you guys.

Hope you all will enjoy this.

// 
package 
{
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.media.SoundMixer;
 import flash.media.Sound;
 import flash.media.SoundChannel;
 import flash.utils.ByteArray;
 import flash.net.URLRequest;
 
 public class Main extends Sprite
 {
  
  private var s:Sound = new Sound();
  private var sc:SoundChannel;
  private var ba:ByteArray = new ByteArray();
  private var array:Array;
  private var a:Number = 0;
  public function Main():void
  {
   s.load(new URLRequest("Jaane Ja Dhoondta Raha.mp3"));
   sc = s.play(0, 1000);
   this.addEventListener(Event.ENTER_FRAME, spectrum);
   trace("Main Construction called");
  }
  
  private function spectrum(event:Event):void
  {
   a = 0;
   graphics.clear();
   SoundMixer.computeSpectrum(ba,true,0);
   for(var i:Number=0; i <256; i=i+8)
   {
    a = ba.readFloat();
    var num:Number = a*360;
    graphics.lineStyle(num / 15, 0x006600,0.5);
    graphics.beginFill(0x006600,.05)
    graphics.drawRect(stage.stageWidth/2,stage.stageHeight/2, i, i );
    graphics.drawRect(stage.stageWidth/2,stage.stageHeight/2, -i, -i );
    graphics.endFill();
    graphics.lineStyle(num / 15, 0x000066,0.5);
    graphics.beginFill(0x000066,.05)
    graphics.drawRect(stage.stageWidth/2,stage.stageHeight/2, -i, i );
    graphics.drawRect(stage.stageWidth/2,stage.stageHeight/2, i, -i );
    graphics.endFill();
   }
   
  } 
 }

 
}

Developing Flash As3 / Flex without using Flash / Flex IDE

Being a developer, it is too expensive to buy a software like Adobe Flash CS3 or Adobe Flex 3.0.

After doing enough research on internet(Thanks to Google) I found an alternative to develop Flash CS3 or Flex 3.0 application without using Flash CS3 or Flex IDE.

Feels great when you can develop an application what 1000$ software can develop without spending Single penny.

Here is the magical steps to do so.

Thanks to http://saravananrk.wordpress.com/2008/03/10/compile-as3-with-flashdevelop3-using-flex-sdk3-compiler/

Part 1 - Downloading, Installing, and Compiling a SWF

Let’s begin by setting things up and compiling our first SWF.

1. Download the Adobe Flex SDK (just the SDK at the bottom of the page, not Flex Builder), and unpack it somewhere easy to find (C:\FlexSDK\Flex3\).
2. Download the latest version of FlashDevelop, install it and run it.
3. Create a New Project, under ActionScript 3 choose Default Project, and give it a name (”hello”).
4. In the Project Panel expand the “src” folder and open up “Main.as”
5. In the constructor add the code: trace(”hello world!”);
6. Hit Ctrl-Enter (or F5). A dialog should pop up asking if you’d like to open the AS3 context settings. Click “OK”.
7. In the “Flex SDK Location” input field enter the path from step 1 (or browse to it).
8. Hit Ctrl-Enter again. This should compile your code into a SWF and launch it in a tab. The Flex 3 compiler does incremental compiling, so the first compile might take a while, but subsequent compiles should be much faster.
9. Make a “whooping” noise! “hello world!” should be displayed in the Output panel. You’ll find the SWF sitting in the “bin” folder. Notice that the project panel let’s you look into the guts of your SWF.. pretty damn sweet!

Part 2 - Some Adjustments

By default, FlashDevelop launches SWFs in it’s own version of the Flash Player. At the time of this writing, the player doesn’t perform quite as well as the official debug version of the Adobe Flash Player (besides, we want all the goodness of the very latest Flash Player!). Also, I find the tabbed view weird. So let’s change our setup a bit.

1. Head on over to Adobe downloads, “Download the Windows Flash Player 9 Projector content debugger” and put it somewhere easy to find (C:\FlexSDK\FlashPlayer\)
2. Back in FlashDevelop, go to the main menu, click “Tools” and select “Program Settings” (or hit F10)
3. In the left panel, under “Plugins” select FlashViewer, and point the “External Play Path” to the debug player executable from step 1.
4. While you’re there, change the “Movie Display Style” to “External”. Click “Close”.
5. At the top of the Project Panel click the “Project Properties” button (third from the left).
6. Under “Test Movie” change the selection to “Play in external player”, and click “OK”.
7. Hit Ctrl-Enter. Make the universal “Whazzamm” sound!

Part 3 - Attaching Assets to the Stage

Perhaps “hello world!” is not that thrilling for you. Fine.

1. Create a folder called “lib” inside your project folder (alongside “bin” and “src”).
2. Fire up Adobe Flash CS3 and create a new Flash File (Action Script 3.0).
3. Save it inside the “lib” folder from step 1 and call it “assets.fla”.
4. In the Flash IDE grab the Oval tool and draw a circle.
5. Select the circle and convert it to a symbol by hitting F8 (or right-click and select “Convert to Symbol…”).
6. Give it the name “Circle” and expand the Linkage panel by clicking “Advanced”.
7. Under “Linkage” tick “Export for ActionScript” and click “OK”.
8. Open up your Publish Settings (Ctrl-Shift-F12), deselect “HTML”, and flip to the “Flash” tab
9. Tick “Export SWC”, click “Publish” and click “OK”.
10. Save the file and close the Flash IDE.
11. Flip back to FlashDevelop, and expand the “lib” folder in the Project Panel.
12. Right-click “assets.swc” and select “Add To Library”.
13. Replace our “trace” statement with the following code:
    var circle:Circle = new Circle();
    addChild( circle );
14. Hit Ctrl-Enter. Loudly exclaim “Golly, this is the biznis!”.

Part 4 - Extending Assets, Adding Interactivity

Perhaps a plain old circle on the stage doesn’t really do it for you. You want some motion. You want some interactivity. Some filters. Fine then. Let’s do it..

1. In the Project Panel, right click the “src” folder, select “New” “Class”, name it “ReactiveCircle” and click “OK”.
2. Head to the end of the line “public class ReactiveCircle”, type “extends”, hit Space and select “Circle”.
3. In the constructor type “filters = [new DropShadowFilter()];”
4. On the next line type “addEventListener(” and press Ctrl-Alt-Space (this enables autocompletion for all available classes, not just the imported ones). Start typing “MouseEvent” but hit Enter as soon as you see it selected. Complete the statement with “.CLICK, onClick);”
5. Move your cursor back onto the word “onClick”, press Ctrl-Shift-1 and hit Enter.
6. Inside the generated event handler add the code: x += 10;
7. Flip back to the Main class and change:
   var circle:Circle = new Circle();
   to
   var circle:ReactiveCircle = new ReactiveCircle();
8. Hit Ctrl-Enter.