The Flash Connection Make mine Actionscript 3.0!

The learn screen is currently blank except for the background. Our goal here is going to be as follows: We want to provide a world map with individual continents. Each continent will be a separate MovieClip instance, so that we can program some rollover and rollout actions for each one. We also want to create a tooltip MovieClip that will follow the mouse pointer. Finally, we want to provide a button that will link to the other screen we are going to make, the Drag screen.

Once again, I have imported some artwork from another file. I made a new layer called "continents," and I made a MovieClip symbol for each of the six continents in the illustration (Yeah, I wondered what happened to Antarctica, too! Apparently it's expendable these days). Once again, I am not going to go into detail about how I made selections to the artwork and created the MovieClip symbols, and put together this screen, as I figure you probably already know how to do these things yourself. Anyway, I gave all the instances on the stage instance names, too: northAmerica, southAmerica, europe, asia, africa, and australia.

Next, let's create a Tooltip MovieClip symbol. Click the Insert Menu, "New Symbol..." (this will take us out of the edit mode for the Learn screen, and into the edit mode for the Tooltip symbol). Name it "Tooltip." No need to export it for actionscript this time. Using the Text tool, create a static textbox and type "North America" in a fairly large font. Using the align panel, center this textbox vertically, and position it a little ways up from the registration point. In my file, the y position wound up being -85:

Next, click on the timeline at frame 10, and press F6 (insert keyframe). This will copy the previous keyframe, textbox and all. Continue to do this four more times, making new keyframes at frame 20, 30, 40, and 50. Next, click on frame 60 and press F5 (insert frame). You will need to edit each of the textboxes on all of the frames to reflect the names of the six continents: North America, South America, Europe, Africa, Asia, and Australia.

Next, add a new layer for frame labels. Name the layer "labels." Put keyframes along the timeline in the same locations. Label the keyframes after their continents: "northAmerica," "southAmerica," "europe," "africa," "asia," and "australia." One last thing: Make a new layer, name it actions, and put a single "stop()" command on the first frame, in the actions panel (F9):

Now we are done editing the Tooltip MovieClip. In the library, double-click the Learn symbol again. Add a new layer to the timeline and name it "tooltip." Drag an instance of the tooltip MovieClip we just created to the stage. You can place it anywhere you want, as we will be moving it around the screen with code. Give it an instance name of "tooltip."

Next, let's bring in some buttons for navigation: a "learn" button and a "drag" button. I brought these buttons in from a different file (once again), and gave them instance names of "dragBtn" and "learnBtn." These "buttons" are actually MovieClip symbols. They will work just as well, but we will have to set their buttonMode property to true so that they get a hand cursor when they are rolled over. And actually, that won't be necessary in the case of the learn button, as it's just there for looks. We're actually going to dim it to half alpha and not add an event listener to it, so that it is disabled. That's because the learn screen is the one we're on right now. Anyway, here's what the finished Learn screen's timeline looks like:

With everything in place and having instance names, now we are ready to work on the code. So let's turn our attention to the Learn.as file. The first thing to code is the tooltip following the mouse. But first we will make the tooltip invisible by adding this line to the constructor:

tooltip.visible = false;

Next, we will add an event listener to the addedHandler for the ENTER_FRAME event:

addEventListener(Event.ENTER_FRAME, everyFrame);

Let's also immediately remove the same event listener in the removedHandler:

removeEventListener(Event.ENTER_FRAME, everyFrame);

Next, let's write the handler function "everyFrame" :

private function everyFrame(event:Event):void {
	tooltip.x = mouseX;
	tootlip.y = mouseY;
}

Now the class should look like this:

package {
	import flash.display.*;
	import flash.events.*;
	
	public class Learn extends MovieClip {
		
		public function Learn() {
			addEventListener(Event.ADDED_TO_STAGE, addedHandler);
			addEventListener(Event.REMOVED_FROM_STAGE, removedHandler);
			
			tooltip.visible = false;
		}
		private function addedHandler(event:Event):void {
			this.x = stage.stageWidth / 2;
			this.y = stage.stageHeight / 2;
			
			addEventListener(Event.ENTER_FRAME, everyFrame);
		}
		private function removedHandler(event:Event):void {
			removeEventListener(Event.ENTER_FRAME, everyFrame);
		}
		private function everyFrame(event:Event):void {
			tooltip.x = mouseX;
			tooltip.y = mouseY;
		}
	}
}

If you test the movie now, you will not see the tooltip following the mouse, because it's been made invisible. What we need to do is to cause the tooltip to become visible again whenever it rolls over one of the continents, and disappear again whenever it rolls out of one of them. To accomplish this, we need to declare an array, and then place all of the continents in it, so that we can run a loop and add some event listeners to all of the continent clips at once. Add this line to the variables list:

private var clipArray:Array; 

Then, in the constructor, add this line, which will instantiate the array and "populate" it:

clipArray = [northAmerica, southAmerica, europe, asia, africa, australia];

Next, in the constructor, add the following for loop:

for(var i:int = 0; i < clipArray.length; i++) {
	clipArray[i].addEventListener(MouseEvent.ROLL_OVER, over);
	clipArray[i].addEventListener(MouseEvent.ROLL_OUT, out);
}

Now it just remains to write the event handlers named "over" and "out." The first thing to establish in these functions is that the tooltip should become visible on rollover and then invisible again on rollout:

private function over(event:MouseEvent):void {
	tooltip.visible = true;			
}
private function out(event:MouseEvent):void {
	tooltip.visible = false;			
}

Test the movie, and you will see this in action. However, we still need to make the tooltip switch frames according to whatever continent it is over. To accomplish this, let's make another array that has just the frame labels in it as strings. So in the variables list, add this line:

var labelArray:Array;

Then, add this line to the constructor function:

labelArray = ["northAmerica", "southAmerica", "europe", "asia", "africa", "australia"];

Now, let's turn our attention again to the over function. Now we have two parallel arrays. If we can find out the index into the clipArray, we can use that same index to make the tooltip gotoAndStop on the frame at the same index into the labelArray:

private function over(event:MouseEvent):void {
	tooltip.visible = true;
	var index:int = clipArray.indexOf(event.currentTarget);
	tooltip.gotoAndStop(labelArray[index]);
}

The first line here just makes the tooltip visible, we have been over that already. The second line here sets up a temporary variable named index. Here we see a cool method of the Array class, indexOf(). The indexOf() method can search through an array for you and return to you the index number of whatever element you specify in the parentheses. Once we have that index number, we apply it in the next line to the other array. labelArray[index], therefore, is going to contain whatever string corresponds to the array element that was rolled over. If North America is rolled over, for example, the indexOf method will return 0. Here's how:

• event.currentTarget will be the same object as northAmerica.
• indexOf() will find event.currentTarget (northAmerica) at location 0 and thus return 0 to the index variable
• labelArray[index] (that is, labelArray[0]) will evaluate to "northAmerica"
• tooltip is thus being told to gotoAndStop("northAmerica");

It may look cryptic at first, but it's really just a series of substitutions, and once you understand it completely, this kind of programming can be pretty powerful.

Test the movie, and you will see that the tooltip follows the mouse, and displays the name of whatever continent is being rolled over, just like a good tooltip should. :) Pretty cool, eh?

I should note here that while I have just made a very quick tooltip, with only the name of the continent displayed, yours could be much more elaborate than that if you want, with a background shape, and perhaps another static textbox with a paragraph of information about each one. All you have to do is edit the frames.

Here's the current state of the file with all the latest changes:

package {
	import flash.display.*;
	import flash.events.*;
	
	public class Learn extends MovieClip {
		private var clipArray:Array;
		private var labelArray:Array;
		
		public function Learn() {
			addEventListener(Event.ADDED_TO_STAGE, addedHandler);
			addEventListener(Event.REMOVED_FROM_STAGE, removedHandler);
			
			tooltip.visible = false;
			clipArray = [northAmerica, southAmerica, europe, asia, africa, australia];
			labelArray = ["northAmerica", "southAmerica", "europe", "asia", "africa", "australia"];
			
			for(var i:int = 0; i < clipArray.length; i++) {
				clipArray[i].addEventListener(MouseEvent.ROLL_OVER, over);
				clipArray[i].addEventListener(MouseEvent.ROLL_OUT, out);
			}
		}
		private function addedHandler(event:Event):void {
			this.x = stage.stageWidth / 2;
			this.y = stage.stageHeight / 2;
			
			addEventListener(Event.ENTER_FRAME, everyFrame);
		}
		private function removedHandler(event:Event):void {
			removeEventListener(Event.ENTER_FRAME, everyFrame);
		}
		private function everyFrame(event:Event):void {
			tooltip.x = mouseX;
			tooltip.y = mouseY;
		}
		private function over(event:MouseEvent):void {
			tooltip.visible = true;
			var index:int = clipArray.indexOf(event.currentTarget);
			tooltip.gotoAndStop(labelArray[index]);
		}
		private function out(event:MouseEvent):void {
			tooltip.visible = false;
		}
	}
}

The final thing to accomplish here is to program the buttons. Add these lines to the end of the constructor function:

learnBtn.alpha = 0.5;
dragBtn.buttonMode = true;
dragBtn.addEventListener(MouseEvent.CLICK, dragBtnClicked);

The first line here sets the learnBtn to half alpha. The second line gives the dragBtn a hand cursor when it is rolled over, letting the user know that it is active. The third line adds an event listener to the dragBtn for the CLICK event. Next, of course, we need to write the function that was named in that line, so put this function at the end of the class after all the other functions:

private function dragBtnClicked(event:MouseEvent):void {
	MovieClip(parent).gotoDrag();
}

The command here is telling the Main class to execute its gotoDrag() function. Since we haven't written that one yet, let's go back to Main.as and do that. Once there, you can actually copy and paste the gotoLearn() function there, and then just make a few changes to it. Specifically, just change the word "Drag" to "Learn" and the word ughout:

public function gotoDrag():void {
	removeChild(currentScreen);
	addChild(drag);
	currentScreen = drag;
}

If you followed along and made these latest changes, then your files are all up to date. If not, have no fear, the files are all attached to this tutorial in a ZIP file. We have a few more things to do, though, before we can test our movie again.