Flash Labs > Lab 7: Actionscript for interactivity

Overview

This will be one of the more complex labs. The goal is to create interactive hot spots and buttons that the user can click on.

Goals

Learn how to use movie clips and buttons to create interactive movies. Understand how Flash treats cursors and how you can create your own custom cursors.

Example

There is still a scary woosh sound when the palette opens.

Steps

Optional: Download the working files for this lab

This lab is the most freeform of all the labs. I have provided one example of interactivity and one execution. I utilized the gotoAndPlay command to control what the user sees and what controls are available. An alternative approach is to draw objects off the stage (for example, at an x coordinate of -1000) and then bring them on stage at the appropriate time using the setProperty function. I suggest you skim the steps below and then try adding some interactivity, having someone help you debug as you go.

1. Copy the .fla file from Lab 6 in to a new folder called Lab 7. Rename the file yourname_lab7.fla. Open this new file in Flash.

2. I created a set of instructions ("Click on the Color palette's tab.") on a new layer. The instructions span all of the Prototype scene.

3. I removed the previous "Click here to replay this animation" button and instead created a rectangle over the Color palettešs tab. I converted the rectangle to a symbol of type Button and used the Property palette to set the alpha of the instance of the button to 0. So now I have a transparent hotspot.

4. In order to control the flow of the interactivity I will loop the movie between scenes 1 and 5 using a gotoAndPlay() function. This way nothing will happen until the user clicks on the hot spot on the Color palette's tab.

5. In order to wire up the hot spot I right-clicked on the button and selected Actions. I then added the following code:

on (release)
{
gotoAndPlay(10);
}

This will send the timeline playhead to frame 10 where the Color palette is open.

6. I used another gotoAndPlay() function to keep the timeline in the area where the Color palette is open until the user clicks off the Color palette. I used several other instances of the button symbol I created earlier to create the new hot spots.

7. Clicking on any of the hot spots while the Color palette is open will send the playhead back to frame 1.