This movie requires Flash Player 9
Here we go again. This tutorial will walk you through building a little map with some cool effects and awesome flexibility. I created this tutorial to really show you how much better your projects can be with a little AS3 and TweenLite love. This video will also highlight the limitations to my previous map tutorial that contained no ActionScript. Check it out.
Benefits of Adding a Little ActionScript 3
- Easily modify the scale and position of individual map elements
- Move the descriptive text whereever you want
- Change the mouseOver and mouseOut colors for all elements with one easy change
- Limitless possibilities for easily modifying the text animation
Stay Tuned!
Be sure to stick around for part 2 where I clean things up even more and show you how to completely avoid putting any of the descriptive text into a movie clip timeline. Good stuff!
ActionScript 3.0 Code Used in this Tutorial
import com.greensock.*;
map_mc.buttonMode=true;
map_mc.addEventListener(MouseEvent.MOUSE_OVER, mapOver);
map_mc.addEventListener(MouseEvent.MOUSE_OUT, mapOut);
function mapOver(e:MouseEvent):void{
var mapItem:MovieClip = e.target as MovieClip;
description.gotoAndStop(mapItem.name);
TweenMax.to(mapItem, .5, {tint:0xFF9900});
TweenMax.fromTo(description, .5, {alpha:0, x:50, blurFilter:{blurX:80}}, {alpha:1, x:10, blurFilter:{blurX:0}});
}
function mapOut(e:MouseEvent):void{
var mapItem:MovieClip = e.target as MovieClip;
TweenMax.to(mapItem, .5, {tint:0x990000});
}
Download Source Files
Part 2 Just Launched
Check out how to use a dynamic textfield instead of putting description text into a movie clip with individual keyframes and labels Interactive Map Part 2
