1. In Flash, Choose File > Open, and then open the Tutorial Start.fla file.
2. Choose File > Save As and save the movie with a new file name so that you do not alter the Tutorial Start.fla file. If you, or another user, want to use the tutorial again, it's important to keep the original Tutorial Start.fla file.
3. Tutorial Start should open with the Library window displayed. If the Library window isn't open, choose Window > Library to open it. Tutorial Start has no content in the main Timeline, but the Library window contains basic artwork you could have created with the skills you acquired doing the Flash lessons.

Define the movie properties

It's a good idea to start building a movie from the bottom up, so begin with its size and background.

1. Choose Modify > Movie.
2. In the Movie Properties dialog box, set the movie's dimensions to 550 pixels by 400 pixels.
3. For Background, select an orange color.
4. Click OK to apply the properties.

Create an animated symbol

Lesson 3, "Symbols," taught you how to work with graphic symbols and instances. Symbols can also include instances of other symbols and animation. In this section, you create a symbol that shows the photograph moving to the refrigerator door at the beginning of the movie.

You begin by creating a movie clip symbol and then adding other symbols to it. A movie clip symbol is like a self-contained movie that you can place in a host movie as if it were a single object. It can include animation and interactivity just like a regular movie.

Note: While working in Flash, it's often useful to undo your actions. Flash can undo several of your recent actions. Choose Edit > Undo (or press Control+Z (Windows) or Command+Z (Macintosh)) repeatedly to step backwards through your recent actions. Choose Edit > Redo (or press Control+Y (Windows) or

Command+Y (Macintosh)) to step forward through actions you've undone.

Create a movie clip symbol

1. Choose Insert > New Symbol.
2. In the Symbol Properties dialog box, enter the name "INTRO - ANIMATION."
3. Select Movie Clip as the behavior and then click OK.
4. Flash switches to symbol-editing mode. Symbol-editing mode looks almost exactly the same as movie-editing mode. Notice that the name of the symbol you're editing appears in the top left corner above the Timeline. The name also now appears in the Library window.
5. In the Timeline, double-click the existing layer name and enter "Photo."
6. Drag an instance of the INTRO - PHOTO symbol from the Library window and place it over the registration point in the center of the Stage as shown in the picture that follows.
7. This adds an instance of the INTRO - PHOTO symbol to the INTRO - ANIMATION symbol.
8. Use the arrow keys to move a symbol one pixel at a time. Press Shift and use the arrow keys to move ten pixels at a time.
9. In the Timeline, select frame 20 in the Photo layer and choose Insert > Keyframe.

Because you want the animation to begin off the Stage, you must define a new position for INTRO - PHOTO in the first frame.

10. Select the Keyframe in frame 1.
11. Move the instance of INTRO - PHOTO about two inches to the right of the registration point. The exact location is not important. Now that you've positioned the image for the first frame, you can create a motion tween to make it move to the position of the keyframe in frame 20.
12. Making sure the keyframe in frame 1 is still selected, choose Insert > Create Motion Tween. The Timeline should now look like this:
13. Choose Window > Controller to open the Controller and then rewind and play the animation to see what you've done so far.

The photograph should slide in from the right and stop on the symbol's registration point.

Tween rotation and a fade

Now modify the motion tween to make the photograph fade in and rotate as it moves. You do this by specifying an alpha (transparency) setting of 0 in the keyframe where the photograph first appears, and by setting the number of rotations in the Tweening Properties dialog box.

1. Select frame 1 in the Photo layer.
2. On the Stage, select the instance of INTRO - PHOTO and choose Modify > Instance.
3. Click the Color Effect tab in the Instance Properties dialog box and choose Alpha from the Color Effect pop-up menu.
4. Move the Alpha slider to 0 and click OK. The photo becomes completely transparent (invisible). Only the selected border is visible.
5. Make sure that the keyframe in frame 1 in the Photo layer is still selected, choose Modify > Frame, and then click the Tweening tab.
6. Choose Clockwise from the Rotate pop-up menu, enter 1 in the Times box, and then click OK.
7. Use the Controller to rewind and play the animation. As the motion tween moves the symbol instance, it also rotates the image and changes the alpha settings between 0 and 100 to make the photograph fade in.
8. Next, add the crown magnet to the top of the photograph.
9. Select the keyframe in frame 20 in the Photo layer, and then drag an instance of the INTRO - CROWN symbols from the Library onto the photograph.
10. Rewind and play the animation to make sure it works correctly.

Add a frame action to stop the animation

Although the animation you've created appears to stop at the last frame while you're in symbol editing mode, it will work differently when placed in the movie Timeline. Movie clip symbols loop as long as a movie plays unless you make the movie clips stop.

Add a frame action to make this animation stop when it reaches the last frame.

1. Select the Photo layer in the Timeline, and then choose Insert > Layer.
2. Double-click the layer name, and then enter "Actions."
3. Insert a keyframe in frame 20 in the Actions layer, and then choose Modify > Frame.
4. Click the Actions tab in the Frame Properties dialog box, click + (plus), and then choose Stop from the Action pop-up menu. Click OK.

You've now completed the INTRO - ANIMATION symbol.

Use editable text fields

In Flash, you can place interactive controls and editable text fields inside symbols. In this section, you'll add basic data entry capabilities to the TEXT - CONTACT symbol.

• Double-click the icon for the TEXT - CONTACT symbol in the Library to open the symbol for editing.
• Create a new layer in the Timeline and name it "Data Entry."
• Select the first frame in the Data Entry layer in the Timeline.
• With the first frame in the Data Entry layer selected, click the text tool and the Text Field modifier.
• Draw editable text fields for Name, Email, and Comment. Use the arrow tool to adjust the size and position of the fields. It's not important at this point to get them perfect. Notice that the square resize handle on an editable text field is on the field's lower right corner.
• Using the arrow tool, select the Name text field and choose Modify > Text Field to open the Text Field Properties dialogs box.
• Enter "Name" in the Variable box and click OK. Flash assigns the content entered in the editable text field to the variable whose name you enter here. You can then use the value of the variable in actions.
• Repeat steps 6 and 7 for the Email text field; name the variable "Email."
• Repeat steps 6 and 7 again for the Comment text field; name the variable "Comment", and click the Multiline and Word Wrap options before clicking OK.

Add the Send button

Now add the Send button to the TEXT - CONTACT symbol.

• Make sure that the first frame of the Data Entry layer is still selected, and then drag an instance of the BUTTON - SEND symbol from the Library window and place it just below the editable fields.

• Double-click the instance of the BUTTON - SEND symbol to open the Instance Properties dialog box.
• On the Actions tab, click + (plus) and choose Get URL from the pop-up menu.
• Type a URL in the box on the right, choose Send Using GET from the Variables pop-up menu, and then click OK.

This sends the contents of all variables (the text entered in the editable fields) to the URL you specify. In a real application, you would need to create a valid CGI script at the URL location to receive the information, but for learning purposes you can enter any URL and it won't matter if there is no CGI script. At this point, you are done creating symbols for the movie. You're now ready to use the symbols you've created in the main movie.

Assemble the movie

Using the symbols you've created so far, assembling the movie's content is easy. As you do this, you will learn more about using layers to organize the content of a movie.

• Choose Edit > Edit Movie.
• Name the first layer in the Timeline "Fridge."
• Drag an instance of the BACKGROUND - FRIDGE symbol from the Library window onto the Stage.
• In the Timeline, insert a new layer above the Fridge layer and name it "Green Background."
• Make sure the Green Background layer is selected, and then drag an instance of the ACKGROUND - GREEN symbol onto the Stage.

Add the animated buttons

Now, add the animated buttons you created.

• Insert a new layer and name it "Buttons." Make sure it is the top layer in the Timeline. As you add layers, you'll want to be able to see all of them in the Timeline.
• Drag the lower border of the Timeline window so that all of the layers are visible.
• Select the Buttons layer and drag an instance of the BUTTON - HOME symbol onto the Stage. Because buttons respond differently to the mouse than other objects do, you need to disable buttons before you can select them and make changes. After you finish working on buttons, you can enable them again.
• Choose Control > Enable Buttons and make sure that Enable Buttons is not checked.
• Select the instance of BUTTON - HOME and move it into position.
• Make sure the Buttons layer is still selected in the Timeline, and then place an instance of the BUTTON - CONTACT symbol below the BUTTON - HOME instance on the Stage.
• To align the buttons, click BUTTON - CONTACT and hold down the Shift key as you click BUTTON - HOME to select both buttons. Choose Modify > Align and choose the horizontally left-aligned option.
• Choose Control > Test Movie to see the buttons animate when you roll the mouse over them.
• After the movie plays, close the test window to continue working in the movie.

Add the animated movie clip

Now add the INTRO - ANIMATION movie clip you created.

• Insert a new layer in the Timeline and name it "Intro Animation." Make sure it is the top layer.
• Lock the other layers to make sure you're working only in the Intro Animation layer.
• Drag an instance of the INTRO - ANIMATION symbol from the Library window onto the Stage. Remember that the photograph image is completely transparent in the first frame on the movie clip, so the only visible part of INTRO - ANIMATION is the registration point.
• Move the INTRO - ANIMATION instances so that its registration point is over the refrigerator. Remember that movie clip animation does not run in the authoring environment. Choose Control > Test Movie to see the movie with the animation working.
• The animation only runs the first time the movie runs the test window. To see the animation again, close the test window and choose Control > Test Movie again. When you finish viewing the animation, close the test window to continue working in the movie.

Add the text content layers

The buttons you've added are supposed to make the text content appear in the green area on the right. Now you're ready to add the text content to the movie.