Since I want to focus on the code, I’ve provided an example file to get you started. Download the example files, and open preloader.fla.

Getting started

1. Open preloader.fla and review its contents.

Inside preloader.fla, you’ll notice that the stage is empty. That’s because we’re going to load an external file and display it here. We’re also going to use code to dynamically place the preloader on the stage and to remove it when loading is complete.

Press Ctrl-L to open the Library. Inside you’ll see two movie clips. The first, barMC, is a simple green rectangle that will be used to create a visual progress bar while our file is loading. Notice that the registration point of this shape is on the far left side. This shape will scale from that point as it grows. Preloader is a movie clip that will contain all of the pieces of our preloader. If you right-click (Ctrl-click on a Mac) on the Preloader movie clip in the Library and select Linkage… you will see that the checkbox for “Export for ActionScript” has been selected. This means that when the file runs, we can access this movie clip dynamically by its class name, “Preloader.”

The Linkage properties for the Preloader movie clip.

Double-click on Preloader in the Library to open it. There are three layers in this timeline. The “text” layer contains the “Loading” text that will tell the user what percentage of the file has been downloaded. Notice that the text box has an instance name of “loading_txt.” The “bar” layer contains an instance of the barMC movie clip that will expand to visually indicate how much of the download has completed. The green bar has an instance name of “bar_mc.” The “frame” layer simply contains an open box shape. This is an extremely simple preloader – feel free to create your own graphics that will better match your project.

The barMC movie clip has an instance name of bar_mc in the Properties inspector.

2. Add ActionScript to load the external file.

Return to the main timeline by clicking Scene 1 under the timeline. Click in the first frame of the actions layer and press F9 to open the Actions panel. Begin by telling Flash what file you want to load. This can be any image or even another SWF file. I’ve included an (intentionally rather large) JPG file in the example files for you to use as practice.

The Loader class expects to receive a URLRequest pointing to the file you wish to load, so we’ll need to start by creating a new URLRequest for to the external file. We’ll also need to create an instance of the Loader class to begin. Add the following code to the Actions panel. (If you’re loading a different file that the example, replace “large_image.jpg” with the name of your file.)

var myRequest:URLRequest = new URLRequest("large_image.jpg");
var myLoader:Loader = new Loader();

3. Begin loading the external file.

Tell the myLoader instance of the Loader class that we just created to begin loading the file with the next line:

myLoader.load(myRequest);

4. Create listeners to monitor the progress of the file.

At this point in the code, Flash will begin loading the file. We want to create a few event listeners to monitor the progress. The first will run a function called showPreloader() that will place the Preloader movie clip on the stage. The second listener will run a function called showProgress() that will visually update the preloader bar and text to reflect the download progress. The third listener will run the function showContent(), which will remove the preloader and show the content once the download is complete.

The Loader class has a property called contentLoaderInfo that contains information about the file being loaded. Adding the listeners to this property allows us to monitor the download as it happens. Add the following code to the Actions panel:

myLoader.contentLoaderInfo.addEventListener(Event.OPEN,showPreloader);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showContent);

5. Create an instance of the Preloader movie clip.

Before we can display the Preloader on the stage, we’ll need to create an instance of it in ActionScript, so that we can refer to it by name. We’ll call this new instance “myPreloader.” Add the next line to the Actions panel.

var myPreloader:Preloader = new Preloader();

6. Create the showPreloader function to display the preloader.

The first event listener above will run a function called showPreloader(). This function will place the myPreloader instance on the stage using addChild(). Then it will position the preloader in the center of the stage by modifying its x and y properties. (If you’d like your preloader to appear someplace else on the screen, you can modify these properties here.)

function showPreloader(event:Event):void {
	addChild(myPreloader);
	myPreloader.x = stage.stageWidth/2;
	myPreloader.y = stage.stageHeight/2;
}

7. Add the showProgress function to update the preloader as the download progresses.

The function that handles the visual updates to our preloader is called showProgress(), and is called from the second listener each time the ProgressEvent PROGRESS is triggered, which is when additional data from the download is received. This function will calculate the percentage completed by dividing the number of bytes downloaded so far by the total number of bytes. It will update the text display to reflect that amount, multiplied by 100 and rounded to a whole number. Then the function will update the width of the progress bar by setting its width to the maximum width multiplied by the percent loaded. (The maximum width in this case is 198 pixels – you might need to adjust this value if you created your own custom graphics.)

function showProgress(event:ProgressEvent):void {
	var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
	myPreloader.loading_txt.text = "Loading - " + Math.round(percentLoaded * 100) + "%";
	myPreloader.bar_mc.width = 198 * percentLoaded;
}

8. Add the showContent function to display the file after it has been loaded.

The last listener above will run the showContent() function once all of the bytes of the external file have been completely loaded. The showContent() function simply removes the preloader from the stage, and then adds the myLoader instance, making the loaded content appear.

function showContent(event:Event):void {
	removeChild(myPreloader);
	addChild(myLoader);
}

9. Test the preloader by simulating a download.

To test the preloader, we will use Flash’s built-in bandwidth simulator. Previewing the file from our local drive will cause the content to be loaded almost instantly, and you will only see the preloader for a fraction of a second. By simulating a slower download speed, we can test the functionality of the preloader.

First test the movie by pressing Ctrl-Enter. If you do not have any errors, you will see your loaded content appear immediately. To simulate a download, and to test the preloader, press CTRL-Enter a second time. Flash will reload the test movie, and then simulate a download of the content at a controlled speed. The default setting is a 56kbps modem, and will give you time to study the behavior of the preloader. It should slowly count up the percentage in the text box, and the progress bar should slowly grow. When the download is complete, your loaded content will display.

The preloader in action.

What about loading the entire movie?

How can you use this same technique to load the entire SWF file and not an external asset? One way is to create a “wrapper” swf that only contains your preloader and the code above. You can then load your main SWF file into this wrapper container, and avoid the need to add a preloader to an already-completed Flash file. This is a very efficient and easy way to add a preloader to any site.

As with all things in ActionScript, there are other methods as well, but some are more difficult and best saved for a future tutorial. :)

Here’s the completed code:

var myRequest:URLRequest = new URLRequest("large_image.jpg");
var myLoader:Loader = new Loader();
 
myLoader.load(myRequest);
 
myLoader.contentLoaderInfo.addEventListener(Event.OPEN,showPreloader);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,showProgress);
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showContent);
 
var myPreloader:Preloader = new Preloader();
 
function showPreloader(event:Event):void {
        addChild(myPreloader);
        myPreloader.x = stage.stageWidth/2;
        myPreloader.y = stage.stageHeight/2;
}
 
function showProgress(event:ProgressEvent):void {
        var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
        myPreloader.loading_txt.text = "Loading - " + Math.round(percentLoaded * 100) + "%";
        myPreloader.bar_mc.width = 198 * percentLoaded;
}
 
function showContent(event:Event):void {
        removeChild(myPreloader);
        addChild(myLoader);
}

Download the example files

What’s the plan?

I’m going to add a video to my site using the Flash CS3 video playback component and one of the default skins. I want to create a preview, or poster, image that appears when the video is first loaded. The video should wait until the user clicks on either the poster image itself, or on the play button in the component controls to start playing. Then, the preview image should disappear while the video plays. Finally, once the video is complete, I’d like the preview image to reappear so that the process can be repeated.

To start you’ll need an FLV file. Any video will do, but I’ve included one in the example files to get you started. I’ve also included the finished file in case you’d like to refer to it later.

Download the example files

Getting started

1. Begin by creating a new Flash document.

For this tutorial, begin by creating a new Flash ActionScript 3.0 document. Set the dimensions to 320 x 280 pixels by clicking the Size button in the Properties Inspector. The included sample FLV is 320×240, and I’m leaving an extra 40 pixels for the playback controls. Save this file as player.fla in the same folder as your FLV file.

2. Import the FLV video file into Flash.

Import the video by choosing File > Import > Import Video. Click the Browse button, locate your FLV, and click Open. Click Next. Under the Deployment screen, keep the default setting and click Next. On the Skinning screen, select a playback skin and a color. I chose “SkinUnderPlaySeekMute.swf” and a dark gray color. Click Next, and then click Finish.

Select a playback skin and color.

Note: For a little more information about the Video Import wizard, as well as an easy way to make your Flash video play in full-screen mode, see the previous tutorial, Full-Screen Video in Flash CS3.

You should now see the video in the stage. In fact, if you test the movie (press Ctrl-Enter) you can watch the video play. You’ll notice that the video begins playing immediately. We’ll change that and create our preview image next.

3. Give the video component an instance name of myVideo.

Click on the video on the stage to select it, and then give it an instance name of myVideo in the Properties inspector at the bottom of the screen. Don’t forget this step, or our code won’t be able to talk to the video later.

Adding an instance name in the Property inspector.

4. Change the video component’s autoPlay value to false.

Click the Parameters tab in the Properties Inspector at the bottom of the screen. You’ll see several parameters specific to the playback component. To prevent the video from playing on its own, click to the right of autoPlay and set it to false.

Change the autoPlay value to false.

Creating the preview image

5. Select the preview frame from the video.

To select a preview frame from the video, double-click next to the preview parameter, where it says, “None.” A small version of the video will begin to play, and time code will be displayed underneath it. You’ll also see the note below the video reminding us that a preview image selected here will only be available in authoring mode. Yep, that’s why we’re here.

If you move the cursor over the video, small playback controls will appear that will allow you to move through the video. Press Pause, and then use the controls to choose a suitable frame to become the preview image.

Selecting a preview frame.

6. Export the frame as a PNG image file.

Click Export to save the frame as a PNG file. Save the image as poster.png in the same folder as your FLV. Close the “Select Preview Frame” window.

Importing the PNG and setting up the preview

7. Import the preview image PNG file to the stage.

Select File > Import > Import to Stage… Browse to the poster.png image, and click Open. Importing the image into the Flash file ensures that it will be loaded within the SWF file, ready to display.

8. Convert the image to a movie clip.

Click on the image and press F8 to convert it to a symbol. Name the symbol “PosterFrame” and choose Movie clip as the type. Click OK. Converting the bitmap image to a movie clip will allow us to customize its appearance to indicate to the user that they can click the image to start the video.

Converting the image bitmap into a movie clip named “PosterFrame.”

Optionally, you can edit the movie clip to include a button or any other visual cues that you’d like. I’m going to add large play button to make it obvious that this is a video waiting to be played.

9. Add a play button or icon to the movie clip.

Double-click on the poster frame clip on the stage to edit it. From here, I’m going to add one of Flash’s pre-built buttons for simplicity, but of course you can create a button of your own to use here as well.

Choose Window > Common Libraries > Buttons. Open the “playback rounded” folder, and drag an instance of the “rounded green play” button onto the stage. You can use the Free Transform tool to resize the button and position it over the image. Close the “Library – Buttons.fla” panel.

Adding a button to the poster frame movie clip.

10. Give the movie clip an instance name of “myPoster”.

Return to the main stage by clicking “Scene 1” underneath the timeline. Click on the PosterFrame movie clip on the stage, and in the Properties inspector, give it an instance name of “myPoster.”

Adding an instance name in the Property inspector.

Adding the ActionScript to make it work

Ok, the busy work is over. Now it’s time to add the elusive ActionScript to make the poster frame show up. I’m sure there are several ways to do this, and maybe some even more efficient, but I’m going to show you what has worked reliably for me.

11. Create a new actions layer.

Create a new layer in the timeline, and rename it “actions“. Click the first frame of the actions layer, and press F9 to open the Actions panel.

12. Create a function called playMovie.

The playMovie function is very simple. It will run when the user clicks on the poster frame, and will start the video. Add this code underneath the previous line:

function playMovie(event:MouseEvent):void {
    myVideo.play();
}

13. Create two functions to turn the preview image on or off.

The easiest way to hide the preview movie clip is to change its visible property to false. This not only hides the movie clip from the display, but it also prevents the user clicking on the same clip again, essentially disabling the clip until we need it again. To bring the clip back, return its visible property to true. Add two more functions below the existing code:

function showPosterFrame(event:Event):void {
    myPoster.visible = true;
}
 
function hidePosterFrame(event:Event):void {
    myPoster.visible = false;
}

14. Add a CLICK event listener to the poster frame movie clip.

Enter the following in the Actions panel:

myPoster.addEventListener(MouseEvent.CLICK, playMovie);

This will create an event listener that tells Flash to run the playMovie() function when the user clicks anywhere on the poster frame.

15. Toggle the visiblity of the poster frame by listening for video events.

Now we need to turn the preview image on or off at the right time. The most reliable way to do this is to listen for a specific type of event called a video event that will be triggered by the playing FLV file. When the FLV begins to play, it will trigger a PLAYING_STATE_ENTERED event, and we should then remove the poster frame. When the FLV is finished, it will trigger a COMPLETE video event, and we will make the poster frame visible again.

Before we can use the Video Event class, we must import it. Add the following line AT THE TOP of the rest of the code:

import fl.video.VideoEvent;

Then, add event listeners to toggle the poster frame when the video plays and ends. Add these two lines at the bottom of the code:

myVideo.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, hidePosterFrame);
myVideo.addEventListener(VideoEvent.COMPLETE, showPosterFrame);

16. Test the movie, and correct any errors.

Test the movie now by pressing Ctrl-Enter. You should see your preview picture on the stage. When you click on the poster frame (or the play button in the video component) the poster frame will disappear and the FLV will begin to play, and when the video ends, the poster frame will reappear!

If you have any ActionScript errors, please carefully review the code and correct any typos.

If you have JavaScript enabled, you will see the example here.

That’s it! You’ve created a very functional preview image, or a poster frame, using just a little ActionScript and the built-in Flash video components. Here’s a look at the completed code:

import fl.video.VideoEvent;
 
function showPosterFrame(event:Event):void {
    myPoster.visible = true;
}
 
function hidePosterFrame(event:Event):void {
    myPoster.visible = false;
}
 
function playMovie(event:MouseEvent):void {
    myVideo.play();
}
 
myPoster.addEventListener(MouseEvent.CLICK, playMovie);
myVideo.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, hidePosterFrame);
myVideo.addEventListener(VideoEvent.COMPLETE, showPosterFrame);

Download the example files

Encode your video to FLV

Even though Flash CS3 can encode your videos when you import them, I prefer to use the Flash Video Encoder for converting my video files to FLV. Using the Video Encoder allows you to encode several files at once using a queue, letting you continue to work in Flash while the conversion is completed. The original video file should be the highest quality possible, preferably uncompressed, and can be saved as .mov, .avi, .mpeg, or .wmv. I’ve already included an FLV for you in the example files, but here’s how it was created.

Begin by pressing the Add… button in the Flash Video Encoder. Browse to the file that you wish to convert, and press Open. Although the default settings will usually produce acceptable results, it’s a good idea to adjust the quality settings, especially since this video will be shown full screen.

Click Settings…. Here you can adjust the encoding rates for video and audio, as well as crop and resize the video if necessary. Under the Video tab, medium or high quality will give you the best results full-screen. I usually reduce the frame rate to 15 FPS as well to keep the file size under control, but you can choose Same as source to leave the frame rate unchanged.

Adjusting the compression settings for the FLV file.

Under the Crop and Resize tab, it’s a good idea to resize your video to more reasonable dimensions if your original is very large. Typically, web video is encoded at 320x240 pixels, but if you are going to display video full-screen, you might consider 480x360 or even 640x480 pixels to provide the best quality. Keep in mind that larger dimensions equal much larger file sizes, and it might be a good idea to experiment to find the settings that work best for your project. For this example, I’m using 320x240 pixels for my video.

Press OK once you’ve made your changes. You can add more files to your queue in the same manner, duplicate the current job and change the settings, or press Start Queue to begin the conversion. This will create FLV files with the same names as your original media in the same folders, unless you specified otherwise.

Importing video into Flash

Once you have an FLV file, it’s time to bring it into Flash CS3. Create a new Flash File (ActionScript 3.0). In the Properties inspector, click the Size button and adjust the document to be the same width as your video file, and the same height plus 40 pixels to leave room for the player controls. In the example here, that will be 320x280 pixels. Change the background color of the document to black. Save the Flash file in the same folder as your FLV.

Adjusting the size of the Flash document in the Properties Inspector.

Import the FLV

Choose File > Import > Import Video. Click Browse, find the FLV file you created earlier, and click OK. (If you didn’t create the FLV file beforehand, you could point to your original file as well. Flash will create the FLV at the end of this wizard, but you’ll have to wait on the process to complete before continuing.) Click Next.

On the Deployment screen, you can choose how the FLV file will be streamed to your viewers. Unless you subscribe to a Flash Streaming Service or own a Flash Media Server, you’ll likely select the first option, Progressive download from a web server. This will allow the viewer to begin playing the video as soon as it begins to load, instead of waiting for the full download to complete. Click Next.

Select Progressive stream from a web server.

On the Skinning screen, you can select a set of player buttons to use to control video playback. There are many different combinations, but to enable full-screen mode, select one with a full screen button. For this example, I’ve selected SkinUnderPlaySeekFullscreen.swf. You can also choose a color for the controls, and I’ve chosen a dark gray. Click Next.

Choosing a playback skin with a full screen button and a color.

You will see a summary of your selections, and you can go back and make any changes you want. Click Finish to complete the video import, and after a few moments, the video will appear on the stage. Click the video, and use the Properties inspector to adjust its x and y positions to 0.

Move the video to the top left corner of the stage.

Save the Flash file, and choose File > Publish Settings. Make sure that Flash (.swf) and HTML (.html) are checked, then click OK. Choose File > Publish Preview > Default (HTML) to create the SWF and HTML files and preview them in a browser. You’ll notice that the video will play, but the full screen button won’t work yet. We need to make one minor change in the HTML page to enable full screen mode.

Edit the HTML file

Open the HTML file that was created in your favorite HTML or text editor. There are three places that allowFullScreen will be set to false by default: once inside the script tags, and twice between the noscript tags, within the object and embed tags. Locate these three variables and change their values to true.

Change the allowFullScreen value in the HTML file to true.

Save the file and reload the HTML page in your browser. This time, when you click the full screen button, you’ll watch your video in complete full screen glory!

If you have JavaScript enabled, you will see the example here.

Download the demo files

A few notes

Remember when you upload the files to the server that all of the necessary files will need to be uploaded together: the HTML file, the SWF, the skin SWF file, the FLV, and the AC_RunActiveContent.js file that is used to embed the movie.

Also, if you would like to embed the video on a pre-existing HTML page, simply copy the code from the HTML page that Flash created (everything between the body tags) and paste it into the appropriate place in your existing page. Make sure that the other files are moved into the same folder as that page on the server as well.

Important note: This tutorial will be written using ActionScript 3 and Flash CS3.

Understanding the Tween class

The Tween class lets you move, resize, rotate, or fade a movieclip using only ActionScript. You can animate any property of a movieclip, such as x, y, rotation, scaleX, scaleY, and alpha. You can also specify how long the animation will last in either seconds or frames. The code will follow this example:

new Tween(obj, prop, func, begin, finish, duration, useSeconds)

The Tween constructor function accepts these parameters:

1. obj – The instance name of the movieclip that you want to animate.
2. prop – The property of the movieclip that you want to change, such as x or alpha, as a text string.
3. func – The type of easing you want to apply to the animation to change its acceleration.
4. begin – The starting value of the property being animated.
5. finish – The ending value of the property being animated.
6. duration: – How long the animation will take, either in frames or seconds.
7. useSeconds – If your duration is in seconds, set this to true. If your duration is in frames, set this to false.

Before using the Tween class, you’ll need to import the classes into your code. Here’s what the ActionScript would look like to animate a banana movieclip from left to right across the stage within three seconds:

import fl.transitions.Tween;
import fl.transitions.easing.*;
 
var myTween:Tween = new Tween(banana_mc, "x", Elastic.easeOut, 50, 450, 3, true);

Isn’t that much cleaner and easier that doing the math yourself? First, the two import lines make these classes available to us. Keep in mind that import statements must be at the top of all of your actions. Then we tell Flash to create a new Tween instance called myTween, and using the model above, we’re telling Flash to animate the movieclip banana_mc along the x axis, from position 50 to position 450 in three seconds. We’re using the Elastic.easeOut function, one of several options to control the acceleration of the animation.

Click the play button below to see the result:

If you have JavaScript enabled, you will see the example here.

Easing options

The banana uses Elastic.easeOut to create an overshoot effect at the end of the animation, but there are several other options to add lifelike movement to your tweens. You can select an Easing class from these choices:

• Back – Causes the animation to overshoot, and return to its position.
• Bounce – Causes the animation to reverse direction, like a ball bouncing on a floor.
• Elastic – Causes the animation to overshoot and reverse, like at the end of a rubber band.
• Regular – Accelerates along a steady curve.
• Strong – Accelerates along a steady curve, more aggressive than Regular.
• None – Results in no acceleration; a steady speed.

Then, you pair any Easing class with an easing function to control which end of the tween (beginning, ending, or both) is affected:

• easeIn – The ease is applied to the beginning of the tween.
• easeInOut – The ease is applied to bothe the beginning and the end of the tween.
• easeOut – The ease is applied to the end of the tween.

Combinations such as Bounce.easeOut or Strong.easeIn result in different effects. Click each of the buttons below to see the effect that each Easing class creates.

If you have JavaScript enabled, you will see the example here.

Controlling Tween playback

You can alter the Tween’s playback by using any of several methods:

• continueTo(finish, duration) – Instructs the animation to continue tweening from its current animation point to a new finish and duration point.
• fforward() – Fast-forwards to the end of the animation.
• nextFrame() – Forwards a stopped animation to the next frame.
• prevFrame() – Reverses a stopped animation to its previous frame.
• resume() – Plays an animation that has been stopped.
• start() – Plays an animation from its begin value.
• stop() – stops the animation.
• yoyo() – Plays the animation in reverse.

Flash will begin playing the animation the moment that the Tween is instantiated. Using the above code on its own would trigger the animation the instant that the animation is loaded, or the moment that the frame with the code is reached. If you would rather have the effect wait for some user input, such as a button click, you could stop the Tween, and then start it from within an Event handler, like this:

myTween.stop();
 
play_btn.addEventListener(MouseEvent.CLICK, moveBanana);
function moveBanana(e:MouseEvent):void{
	myTween.start();
}

Allowing the Tween to trigger additional code

The Tween class has several events that can be used to detect what the tween is currently doing:

• MOTION_CHANGE – Indicates when the animation has changed.
• MOTION_FINISH – Indicated the animation is complete.
• MOTION_LOOP – Indicates the animation has started again in looping mode.
• MOTION_RESUME – Indicates that the animation has been resumes after being paused.
• MOTION_START – Indicates that the animation has started.
• MOTION_STOP – Indicates that the animation has stopped.

For instance, you could reset the banana to its original position once the animation is complete. First, import the TweenEvent class using another import statement at the top of your code:

import fl.transitions.TweenEvent;

Then, add the following code to wait for the motion to finish and reset the banana_mc movieclip’s x value to 30.

myTween.addEventListener(TweenEvent.MOTION_FINISH, handleReset);
 
function handleReset(e:TweenEvent):void {
	banana_mc.x = 30;
}

Download the Demo FLA

For more information on the Tween class, please see the excellent Adobe documentation for Flash CS3 or Flash 8.

Setting up the Flash file

Open dragdrop.fla and review its organization. There are five layers in the file – one containing the “pegs” that we will drag and drop, one for the “targets” that we will drop the shapes onto, and one for the wooden box image. The text layer and the actions layer are currently empty. The pegs and the targets are movieclip symbols saved in the library. Press CTRL-L to view the library.

1. Create a dynamic text field to display the right or wrong responses on the text layer.

In order to provide the user with some feedback, we will display a message when the shapes are dropped, indicating whether or not they were placed successfully. Click frame 1 of the text layer. Use the Text tool to draw a text box underneath the peg shapes. Type “Put the shapes away!” to give the box an initial message.

Adding the dynamic text box.

In the Properties inspector, change the text box to a Dynamic Text box using the drop down menu. Set the font to Arial bold, the font color to #990000, and the size to 18pt. Give the text box an instance name of “reply_txt“. Use the Selection tool to position the text box if necessary.

Setting the properties of the dynamic text box.

2. Assign instance names to the peg and target movie clips.

In order to determine which target we drop our shapes over, we need to name them. Click the bright green pentagon target on the stage, and in the Properties inspector, give it an instance name of “targetpentagon_mc“. Repeat the process, giving the other three green targets instance names of “targetsquare_mc“, “targettriangle_mc“, and “targetflower_mc“. Take special note of the lowercase values – this will be important later.

Click the red square peg on the stage and give it an instance name of “square_mc“. Repeat the process, giving the other three colored pegs instance names of “flower_mc“, “triangle_mc“, and “pentagon_mc“.

Adding an instance name to the pentagon target.

Why are the targets so small?
The targets are smaller than the holes on the toy to provide a little more accuracy. Smaller targets mean that the shape has to be more closely lined up to register as a match.

3. Adjust the targets to make them invisible.

Since the appearance of bright green targets spoils the illusion of a child’s toy, we will make them transparent. Using the Selection tool, click the first green target. Then, holding down Shift on the keyboard, click to select the other three targets. In the Properties inspector, choose Alpha from the Color dropdown menu. Then set the Alpha value to 0, making the targets transparent.

Setting the alpha value of the targets to zero.

Adding Drag and Drop functionality

Now it’s time to dive into the code. Since ActionScript 3.0 no longer uses onPress and onRelease events, we’ll need some new code to create the same effect.

4. Add ActionScript to make the red square dragable.

We’ll write some ActionScript to allow us to drag and drop the square peg. Select frame 1 of the actions layer, and open the Actions panel by pressing F9. Type in the following actions:

square_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
square_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
function pickUp(event:MouseEvent):void {
    event.target.startDrag(true);
}
function dropIt(event:MouseEvent):void {
    event.target.stopDrag();
}
square_mc.buttonMode = true;

Adding the drag and drop Actionscript.

This tells Flash to begin dragging the movie clip when the user presses the mouse button, and stop when the mouse is released. In ActionScript 3.0, this is created by setting an event listener for each event, MOUSE_DOWN and MOUSE_UP, and assigning event handler functions (here called pickUp and dropIt) to tell Flash what to do once the event is triggered. Within these event handlers, event.target refers to the object that initiated this event, which in this case will be square_mc. Using event.target instead of naming the object specifically will let us reuse this code for all four pegs in a few steps. The “true” parameter of the startDrag function causes the shape to be picked up from its center, which will make it easier to place later. To display the hand cursor when clicking movieclip symbols, we set the buttonMode property to true. Press CTRL-Enter to test the movie, and try dragging the square.

5. Add ActionScript to display a message in the text box when the peg is dropped.

Here is where we determine where we release the peg, and provide feedback. Add the following code just below event.target.startDrag(true);

reply_txt.text = "";

Adding this code inside the pickUp event handler will force the text inside the dynamic text field to clear when we pick up the peg.

Add the following lines below event.target.stopDrag();

var myTargetName:String = "target" + event.target.name;
var myTarget:DisplayObject = getChildByName(myTargetName);
if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){
    reply_txt.text = "Good Job!";
} else {
    reply_txt.text = "Try Again!";
}

Adding conditional logic to give a proper response.

The first new line creates a text string from the word “target” plus the name of the peg we just dropped, creating a name that matches one of our targets, such as “targetsquare_mc“. The next line looks through our document for an object with that name, and saves a reference to it in a variable called “myTarget“. The if statement checks to make sure that the dropTarget, or the item that is under our shape when we release the mouse button, is not null, or empty. It also checks to see if the dropTarget’s parent is our myTarget . In other words, if we release square_mc over the movie clip named “targetsquare_mc“, we receive a positive reply. If the peg is released anywhere else, we will receive a negative reply.

Test the movie by pressing CTRL-Enter. Try clicking the square and dragging it over an incorrect hole in the toy. Now, try dropping it over the correct hole. Check your code and fix any errors you encounter.

6. Use similar ActionScript to activate the other three pegs.

Copy the event listener lines from the Actions panel and paste them three more times. Change each reference of square_mc to flower_mc, triangle_mc, and pentagon_mc, respectively. Do the same for the buttonMode line for each of the pegs. Since the event handler functions use references to event.target, there is no need to modify any other sections for it to work with all four pegs.

Copying and pasting the event listeners for the other three pegs.

Press CRTL-Enter to test the movie. Try dragging each of the pegs into both incorrect and correct places on the toy. You should receive the correct messages each time.

Bring the selected peg to the top

Currently, if you drag the yellow triangle, it passes over the square, but underneath the pentagon and flower shapes. That’s because they were added to the Flash document in a specific order, and the newest objects end up on top in the stacking order. ActionScript 3.0 no longer uses depths when placing objects, as the z-index is handled automatically. In order to change the item’s z-index, we’ll use the addChild() method.

7. Use addChild() to increase the peg’s stackin order

We want to set the peg’s depth higher each time we drag it so that it will drag above the others. Add the following code within the pickUp() event handler, after the line reply_txt.text = "";

event.target.parent.addChild(event.target);

In this line of code, event.target.parent refers to the main timeline. Using addChild(event.target) essentially adds the currently selected peg to the stage at the top of the stacking order, creating the appearance that we’ve picked it up above the others. Press CTRL-Enter to test the movie. As you drag each piece, it should always remain on top of the others.

Locking pegs that have been placed correctly

Once the user has placed a peg in the right hole, it is a good idea to “lock” it into place so that they can’t accidentally move it again. We’ll also make sure that the peg is perfectly positioned when it is released.

8. Remove the event listeners when a peg is correctly placed.

Once a peg is placed, the easiest way to ensure that we can’t move it again is to remove the event listeners, and set buttonMode back to false to remove the hand cursor. Add the following code within the dropIt() event handler, within the if statement, immediately after the line, reply_txt.text="Good Job!";

event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
event.target.buttonMode = false;

Removing the event listeners and buttonMode.

When a peg is placed over the correct target, the if statement returns true, and that peg will be locked and no longer dragable. Test the movie with CTRL-Enter and see for yourself.

9. Adjust the peg’s position when it is correctly placed

We should also make sure that once a peg is placed, it fits perfectly over the target. Add the following code immediately under the code you just added:

event.target.x = myTarget.x;
event.target.y = myTarget.y;

This will set the dropped peg’s x and y coordinates to match those of the target movie clip. Note that in ActionScript 3.0, x and y properties no longer have an underscore. Test the movie with CTRL-Enter.

Resetting incorrectly placed pegs to their original position

Currently, if you drag and drop a peg to either the wrong place or an empty area of the screen, it just stays there until you drag it again, which can be a little confusing. Let’s make each peg snap back to its original spot if it’s placed incorrectly.

10. When clicked, record the peg’s starting position

Since we’ll need this information within two event handlers, let’s set up a pair of variables. Add the following code to above all the rest in the Actions panel:

var startX:Number;
var startY:Number;

This creates two variables, startX and startY, that will contain our starting position. For now, they’re empty. When we pick up the shape, we’ll record its coordinates. Add this next code within the pickUp() event handler:

startX = event.target.x;
startY = event.target.y;

11. If the peg is released outside of its target, reset its x and y position

Now that the starting position is recorded, we can use those values to reset the peg when we miss the target. Add the following code within the dropIt() handler, within the else statement:

event.target.x = startX;
event.target.y = startY;

Recording and resetting the peg’s starting position.

This will reset the x and y properties to their original values, but only when we release the shape outside of its target. Test your movie with CTRL-Enter, and drag the square to an incorrect space. It should snap back to its starting position.

Using a counter to determine when the user is finished

Let’s add a congratulatory message that tells the user that all pegs have been placed correctly. We’ll need to keep a count of each correct peg drop, and when the count reaches four, we’ll change the text message.

12. Create a global counter variable

Since the counter will keep track of all four pegs, we will create a variable in the actions layer. Add the following code above all of the other code in the actions panel:

var counter:Number = 0;

13. Increment the counter variable each time a peg is correctly placed

We will add one to the counter variable each time we release a peg over the right target. Add the following line of code within the dropIt() event handler, within the if statement:

counter++;

Adding the counter increment to the dropIt() event handler.

This will add one to the value of the counter variable when the square peg is placed correctly.

14. Check the counter and update the text when it reaches four

Add the following code within the dropIt() event handler, making sure that it comes after the else statement:

if(counter == 4){
    reply_txt.text = "Congrats, you're finished!";
}

Checking the counter variable, and congratulating the user.

This checks the counter variable’s value, and if it equals 4, it will change the text in the dynamic text field to read, “Congrats, you’re finished!”.

If you have JavaScript enabled, you will see the completed project here.

Here’s a look at the completed code.

var counter:Number = 0;
var startX:Number;
var startY:Number;
 
square_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
square_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
triangle_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
triangle_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
flower_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
flower_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
pentagon_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
pentagon_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
 
function pickUp(event:MouseEvent):void {
    event.target.startDrag(true);
    reply_txt.text = "";
    event.target.parent.addChild(event.target);
    startX = event.target.x;
    startY = event.target.y;
}
function dropIt(event:MouseEvent):void {
    event.target.stopDrag();
    var myTargetName:String = "target" + event.target.name;
    var myTarget:DisplayObject = getChildByName(myTargetName);
    if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){
        reply_txt.text = "Good Job!";
        event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
        event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
        event.target.buttonMode = false;
        event.target.x = myTarget.x;
        event.target.y = myTarget.y;
        counter++;
    } else {
        reply_txt.text = "Try Again!";
        event.target.x = startX;
        event.target.y = startY;
    }
    if(counter == 4){
        reply_txt.text = "Congrats, you're finished!";
    }
}
 
square_mc.buttonMode = true;
flower_mc.buttonMode = true;
triangle_mc.buttonMode = true;
pentagon_mc.buttonMode = true;

Download the source FLA.