The Flash Connection Make mine Actionscript 3.0!

Back in the FLA file again, let's create a Learn screen. This will be a screen where students can move their mouse around and read a tooltip as they hover over the various continents. So I will show you how to create this tooltip also (bonus!).

Double click the Intro MovieClip in the library to go into its edit mode. Unlock the bg layer. Right click on its one single frame and choose "Copy Frames." Lock the layer again and go back to Scene1. From the Insert menu, choose "New Symbol..." In the Create New Symbol dialog box, type "Learn" in the Name field, and make sure the type says MovieClip. Check the box that says "Export for Actionscript," and just like before, accept the class name "Learn," click OK and then click OK again on the next dialog.

Now we are in the editing mode for our Learn screen. Click on the first frame in the timeline to select it. Right click it, and choose from the menu "Paste Frames." This will paste the background we borrowed from the Intro screen, and it will even name the layer for you. Go ahead and lock the layer, and make a new layer above it. Go back to Scene1 once again. This isn't much of a Learn screen, but it is enough to make our code work, and we will refine it more later.

Now let's proceed to create Learn.as. First, open Template.as. Let's copy and paste these lines from Intro.as:

this.x = stage.stageWidth / 2;
this.y = stage.stageHeight / 2;

These should be added in to the addedHandler function of Template.as. Template.as should now read:

package {
	import flash.display.*;
	import flash.events.*;
	
	public class Intro extends MovieClip {
		
		public function Intro() {
			addEventListener(Event.ADDED_TO_STAGE, addedHandler);
			addEventListener(Event.REMOVED_FROM_STAGE, removedHandler);
		}
		private function addedHandler(event:Event):void {
			this.x = stage.stageWidth / 2;
			this.y = stage.stageHeight / 2;
		}
		private function removedHandler(event:Event):void {
			
		}
	}
}

Go ahead and save Template.as (CTRL-S). The thing is, this centering code is something we are going to need in every screen we make, as long as we keep making screens with the registration point in the center. So it might as well be part of the Template file.

Next, change the word "Intro" to "Learn" in the two places where it occurs. Handy hint: You can double click a word in your code and the editor will automatically select that whole word. Another handy hint: I use the search and replace feature a lot. Highlight a word, click the little magnifying glass on the toolbar, and you can replace every occurance of a word with a different word. I always use the "Replace" and "Find Next" buttons so that I don't accidentally change something I didn't intend to. Anyway, now click File, Save As... and save this file as Learn.as.

Now go back to the Main.as file. Add this line in the variables list:

private var learn:Learn;

Add this line to the constructor function:

learn = new Learn();

Here's the latest version of Main.as after making these changes:

package {
	import flash.display.*;
	import flash.events.*;
	
	public class Main extends MovieClip {
		private var intro:Intro;
		private var learn:Learn;
		private var currentScreen:MovieClip;
		
		public function Main() {
			intro = new Intro();
			addChild(intro);
			currentScreen = intro;
			learn = new Learn();
		}
		public function gotoLearn():void {
			removeChild(currentScreen);
			addChild(learn);
			currentScreen = learn;
		}
	}
}