Sunday, May 31, 2009

Adobe Flex + google maps with flash API

Adobe Flex is a software development kit released by Adobe Systems for the development and deployment of cross-platform rich Internet applications based on the Adobe Flash platform. Flex applications can be written using Adobe Flex Builder or by using the freely available Flex compiler from Adobe. Flex is used to make a SWF file, without using adobe flash.

Tutorial
A. Setting the environment
1. Download Adobe Flex SDK from here
2. Unzip the SDK into any directory (C:\test\flexSDK3 in this tutorial)
3. Try whether the SDK is already set. From command prompt, run C:\test\flexSDK3\bin\mxmlc If it succeeds, the command prompt should show

Adobe Flex Compiler (mxmlc)
Version 3.0.0 build 477
Copyright (c) 2004-2007 Adobe Systems, Inc. All rights reserved.
...


4. For easier use, add the computer path C:\test\flexSDK3\bin. From control panel --> system --> advanced(tabs) --> Environment Variables --> path

B. Collaborating with google maps
1. Download google maps with flash API here
2. Unzip the docs folder inside C:\test\flexSDK3
3. Unzip the lib folder's file inside C:\test\flexSDK3\frameworks\libs\
4. Make a folder in C:\test called src
5. Make a file inside the src folder, called HelloMap.mxml
6. Put this code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)"
width="100%" height="100%" key="ABQIAAAABloZD40AKeJkN2oNklEhmRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRmpwvOMLpnUPIHmzDieHJ-t68QqA"/>
<mx:Script>
<![CDATA[

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;

private function onMapReady(event:Event):void {
this.map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
}
]]>
</mx:Script>
</mx:Application>



7. Compile the mxml code. Go to command prompt, write "mxml C:\test\src\HelloMap.mxml"

8. VOILA! you have a swf file that's made without adobe flash.

No comments:

Post a Comment