Creating an Interactive Map in Flash

By Riyadh Al Balushi (Blue_Chi) | Flash CS3 + 8 | Intermediate

This tutorial will teach you how to create an interactive map in which a map marker flies over to the city highlighted and shows a small photograph of that city. We will do this by using the Tween Class to control the movement of the marker and create a smooth non-linear animation. We will also use Arrays, Functions, and Loops to create make our code smart and reusable. Check the example below to see in action the effect we will create.


Photograph Credits: AD209, soylentgreen23, and jonrawlinson

Starting Off

You will need to download this zip file to get the images used in this tutorial.

Create a new ActionScript 1 or 2 Flash movie, set the dimensions to 620x420px, the framerate to 30, and the background colour to its default value as it does not matter. Name the only layer in the timeline Map and import the main image onto the stage and then lock the layer.

Map Layer - Main Timeline

Creating and Deploying Buttons

Create a new layer and name it Buttons. We will use this layer to create our first button and then duplicate a copy of it on all the city spots we want to highlight. Select the Oval Tool and draw a circle anywhere on the stage. The diameter of the circle I drew is about 25px. While the shape is still selected, press F8, to convert it to a button symbol, name it myButton and make sure that the Registration point is centred. The marker will fly to the registration point of the button, so it is important to have it at the center.

Oval Tool Convert to Symbol

Our map already has graphical symbols on the city locations, this means that we do not need our button to have any graphical look other than what we already have on the map. We will make our button invisible by configuring its timeline. Double click the circle to edit it, the timeline should change into that of a button, drag the contents of the Up frame to the Hit frame, this will make our button have a hit area, but will not have a graphical look.

Button Hit Status

Our button is now ready, go back to the main timeline and place our first button on the star that indicates the location of Muscat on the map. Once there, access the Properties Inspector and name this button muscat_btn.

Button Instance Name

We have our first button ready, copy and paste this button and place it over the marks for Sohar, Dubai and Abu Dhabi. You will then have to change the instance name of these places to sohar_btn, dubai_btn, and abu_dabhi_btn.

Map with City Buttons

Creating the Map Marker

Make sure the two existing layers are locked, create a new one and name it Marker, import the marker image onto the stage to use as a marker. While the object is selected, press F8 to convert it to a Movie Clip symbol, name it myMarker. We have to manually assign the registration point to the tip of the marker, so that when it moves the tip of the marker is treated as its pivotal point. Double click the object on the stage to edit the marker movie clip, notice where the plus sign + is on the stage and move the marker so that its tip touches this plus sign. When you're done, lock the layer.

My Marker Symbol Marker Registration Point

There should be one layer and one frame in the timeline of the marker movie clip. Name this layer Marker, and then add 4 extra frames (press F5 four times) to this layer. Add a new layer to this timeline and name it Cities, add 4 extra keyframes (while this layer is selected, press F6 four times). Your timeline should look like the one in the image below now.

Maker Movie Clip Timeline

We will now import the thumbnails for each of the cities. Make sure the Cities layer is selected, now click on the second frame in it and go through Frame>Import>Import to Stage and select the Muscat image. You must position the image to be on top of the marker as illustrated in the image below.

Muscat image imported

Click once on Frame 2 of the Cities layer, access the Properties Inspector and assign the name muscat as the Frame Label of Frame 2.

Muscat Frame Label

Now one by one, import each of the city images on a different frame in the Cities layer, position them on the right place on the marker, and then label their frames with the city name (sohar, dubai, and abu_dhabi), the order does not matter as these thumbnails will be called by their frame name and not frame number.

Cities Frames Completed

Finally, add a stop(); action to the first frame of this timeline to stop it from automatically playing. Right-Click Frame 1 of the Cities layer and open up the Actions window, type the following code to do the trick.

stop();

Go now back to the main timeline and assign the instance name marker_mc to the marker movie clip.

Optional: You can apply a Drop Shadow filter to the marker to improve the way it looks over the map. You may also want to move it somewhere outside the stage so that it does not look stuck somewhere in the middle before any of the buttons are hovered over.

Adding the ActionScript

The assets of our movie clip are now all set, add a new layer named Actions. Now paste the code below:

import mx.transitions.Tween;
import mx.transitions.easing.*;

var cities:Array = ["muscat", "sohar", "dubai","abu_dhabi"]


function mover (targetX, targetY){
currentX = marker_mc._x;
currentY = marker_mc._y;
var xTween:Tween = new Tween(marker_mc, "_x", Strong.easeOut, currentX, targetX, .5, true);
var yTween:Tween = new Tween(marker_mc, "_y", Back.easeOut, currentY, targetY, 1.5, true);
}

for (var i = 0; i<cities.length; i++){
var my_btn = this[cities[i]+"_btn"];
my_btn.myCity = cities[i];
my_btn.onRollOver = function() {
mover( this._x, this._y);
marker_mc.gotoAndStop(this.myCity);
}
}

Code Explanation

The first two lines of the code merely import the Tween and Easing classes required for using the Tween effect.

import mx.transitions.Tween;
import mx.transitions.easing.*;

The second segment (one line) is the Array that contains the names of the cities, the names here have to match the first segment of the button name, which we will generate later. It is also the same names we used as frame labels. You should be aware of the fact that all of these values are case sensitive.

var cities:Array = ["muscat", "sohar", "dubai","abu_dhabi"]

The third code segment creates a Function that uses the Tween class to move the marker from its current position to the position of the button that calls this function. We created two tween objects to move the object horizontally and vertically.

function mover (targetX, targetY){
currentX = marker_mc._x;
currentY = marker_mc._y;
var xTween:Tween = new Tween(marker_mc, "_x", Strong.easeOut, currentX, targetX, .5, true);
var yTween:Tween = new Tween(marker_mc, "_y", Back.easeOut, currentY, targetY, 1.5, true);
}

The final code segment uses a loop to cycle through the array of cities, create instance names for the buttons, and then assign a .onRollOver event handler to these buttons to call the mover function and tell the marker go to and stop at the image thumbnail of the city selected.

for (var i = 0; i<cities.length; i++){
var my_btn = this[cities[i]+"_btn"];
my_btn.myCity = cities[i];
my_btn.onRollOver = function() {
mover( this._x, this._y);
marker_mc.gotoAndStop(this.myCity);
}
}

That should do it. You can test your movie now to see your interactive map in action. You can add extra locations to your map by adding a button named in the format of cityName_btn, and then add a thumbnail to the marker timeline and label it cityName, finally add the city to your cities array.

This concludes our tutorial. Please feel free to post at the Oman3D Forum if you have any questions.

- End of Tutorial.