|
Steps
Optional: Download the working files for this lab
1. Copy the .fla file from Lab 3 in to a new folder called Lab 4. Rename the file yourname_lab4.fla. Open this new file in Flash.
2. Before proceeding with this lab, it's important to note that in order to preview the functionality of the interactivity you should use Control > Test Movie and not rely on the VCR controls on the Controller palette.
3. In Photoshop or Illustrator, draw a control that someone can click to replay the movie. You could also draw this control in Flash, but I've found that it's rare to do much illustration in Flash when building actual UI prototypes. Photoshop is much better equipped to handle the design of the bitmaps.
4. Save the file as a PNG or a JPEG, and import it in to Flash using File > Import to Library.
5. Go to the Prototype scene and create a new layer. Rename the layer from Layer 3 to Button and make sure that it's on top of the UI After layer.
6. Add the button you just imported to the button layer. Make sure if falls on the timeline just above the end of the UI After layer's last keyframe, because we want this button to come up at the end of the animation. Make the button a couple frames long so that it's easier to select, but make sure it has only one keyframe (not one at the start, and one at the end).
7. Bring up the Actions window and remove the action you created in Lab 2 that automatically loops the animation in the Prototype scene.
8. Now create a new layer and rename it from Layer 4 to Actions. On the last frame of your movie create a new keyframe in the Actions layer. Then right-click on that frame and select Actions from the context menu. Type the following in to the Actions window (you can switch the Actions window to Expert Mode so that you can type directly):
gotoAndPlay(prevFrame());
This Actionscript command will essentially pause the movie because it will send the timeline control back to the previous frame everytime it hits the last frame of the movie. Test the results by selecting Control > Test Movie. The movie should play and pause at the last frame with the button for replaying it showing, but the button doesn't work yet.
8. Now we need to enable the button to replay the animation. In order to make this button graphic interactive we need to first convert it to a symbol. By converting it to a symbol we can have instances of that symbol on the timeline, each of which have different attributes and behaviors. In this case, we will only have one instance, but we still need to turn it in to symbol in order to add the interactivity. So, select the button graphic and choose Insert > Convert to Symbol. Give the symbol a name and make it of type Button.
9. Give the button an instance name. This will allow us to refer to it from other places if we need to in the future, although we won't need to in this lab. In the Properties palette type a name for this instance of the button.
10. Assign the button the action to replay the Prototype scene. To assign an Actionscript command to a button, right-click on it and choose Actions. Make sure the button has only one keyframe because the action you assign is only good for the duration of that keyframe. In expert mode you can type in this function, or use Normal mode to navigate the commands and enter it indirectly:
on (press){
gotoAndPlay(1);
}
This function tells the button to make the timeline controller go to frame 1 of this scene whenever the mouse is pressed on it.
|