If you have seen websites like Volkswagen "Think Blue." Road Trip before, you would probably have seen the Google Map that was in Blue color. So how do you actually do that in Flash? That would be my main objective of sharing this post today. :)
The following would be the source codes of my Flash File.
package com.TintGoogleMap
{
//Import the classes required for Google Maps
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.ZoomControl;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.ColorMatrixFilter;
import flash.geom.Point;
//Import the Component Class for Numeric Stepper
import fl.controls.NumericStepper;
public class Main extends Sprite
{
private var myMap:Map;
//Set the base width and height of the Flash File
private var baseWidth:Number = 800;
private var baseHeight:Number = 600;
private var _mcMap:MovieClip;
private var _mcColorControls:MovieClip;
public function Main()
{
//execute the function 'addToStageEvent' when the flash file
//have been added to stage.
this.addEventListener(Event.ADDED_TO_STAGE, addToStageEvent);
}
private function resizeEvent(event:Event):void
{
//Move the holder of the Map to the top left corner
//of the flash file
_mcMap.x = (stage.stageWidth - baseWidth) / -2;
_mcMap.y = (stage.stageHeight - baseHeight) / -2;
//Move the controls to the bottom right of the flash file
_mcColorControls.x = baseWidth +
(stage.stageWidth - baseWidth) / 2;
_mcColorControls.y = baseHeight +
(stage.stageHeight - baseHeight) / 2;
//Resize the Google Map Component to fill up the flash file
myMap.setSize(new Point(stage.stageWidth, stage.stageHeight));
}
private function addToStageEvent(event:Event):void
{
_mcMap = this.getChildByName("mcMap") as MovieClip;
_mcColorControls = this.getChildByName("mcColorControls") as MovieClip;
setupStepperControls();
//setup the Google Map Component and add it to the map holder
myMap = new Map();
myMap.key = "your_api_key";
myMap.sensor = "false";
//execute the function 'onMapReady' when the map is ready
//or created success
myMap.addEventListener(MapEvent.MAP_READY, onMapReady);
resizeEvent(null);
_mcMap.addChild(myMap);
//execute the function 'resizeEvent' when the flash file
//have been resized
stage.addEventListener(Event.RESIZE, resizeEvent);
resizeEvent(null);
}
private function onMapReady(event:Event):void {
//add the respective Google Map Component controls
myMap.addControl(new ZoomControl());
myMap.addControl(new PositionControl());
myMap.addControl(new MapTypeControl());
updateColorScheme();
}
private function setupStepperControls():void
{
var tempSelector:NumericStepper;
for (var i:int = 0; i < (_mcColorControls.numChildren - 1); i ++)
{
tempSelector = _mcColorControls.getChildAt(i) as NumericStepper;
//execute the function 'updateColorScheme' when the
//values of the NumericStepper have been changed
if(tempSelector)
tempSelector.addEventListener(Event.CHANGE, updateColorScheme);
}
}
public function updateColorScheme(event:Event = null):void
{
var matrix:Array = new Array();
var colorArray:Array = ["R","G","B","A"];
var tempSelector:NumericStepper;
//Create a fake matrix(Array) based on the values of the
//NumericStepper on the bottom right of the screen
for(var i:int = 0; i < colorArray.length; i ++)
{
for(var j:int = 0; j < 5; j ++)
{
tempSelector = _mcColorControls.getChildByName("mc" +
colorArray[i] + "" + j) as NumericStepper;
matrix.push(tempSelector.value);
}
}
_mcColorControls.txtOutput.text = "[" + matrix.toString() + "]";
//Create a Color Matrix Filter and apply the filter to the
//Google Map Component
var CMF:ColorMatrixFilter = new ColorMatrixFilter(matrix);
mapArea.filters = [CMF];
}
//getter function to get the main map which will be used in
//changing the colors
public function get mapArea():*
{
var mapPart:* = myMap.getChildAt(1);
return mapPart.getChildAt(0);
}
}
}
* Click here to view the demo of this example.^ Click here for the source files of this demo.
** Click here for the website of Volkswagon Singapore "Think Blue" Road Trip.
^^ Click here for the blog of JActionScripters, that have taught me about
the secret behind this.
-- Click here to learn more about Color Matrix Filter in Flash.
~~ Click here to learn more about the Class ColorMatrixFilter in Flash.
