Saturday, October 16, 2010

Tween Google Marker Icon in Flex

There are some powerful and fast tweening engines for use in Adobe Flex. One in particular that I have come accustomed to is TweenLite. Recently I had been toying around with the idea of animating a Google marker icon by dynamically resizing its radius.

But just how do you access the icon and tween its size? Well, tweening the icon is easy using TweenLite, just make sure you do a couple things first:



1. Create a Sprite to use as a marker, give the sprite some color and a default size


1:     myIcon:Sprite = new Sprite();
2:     myIcon.graphics.beginFill(0xC4D79B, 0.8);
3:     myIcon.drawCircle(0, 0, 15);
4:     myIcon.endFill();


2. Create marker options and set the icon as the sprite created above
1:     markerOptions:MarkerOptions = new MarkerOptions();
2:     markerOptions.icon = myIcon;
3:     marker = new Marker(new LatLng(39.75, -104.87), markerOptions);
4:     map.addOverlay(marker);


3. Create some function that houses and executes your tweening effect. The tween itself is:
1:    TweenLite.to(marker.getOptions().icon, 2, {scaleX: 3, scaleY: 3}); 

That's it! Just make sure if you are going to be tweening multiple markers you have some way of storing and recalling them as needed.