What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

 Process to Build your First Application in Flash

Process to Build your First Application in Flash

Review your task

Examine the completed application

Create a working folder

Create a new document

Create symbols

Edit a symbol Timeline

Add actions to frames

Add labels to frames

Add motion tweens

Edit the main Timeline

Create the border

Add a symbol

Add a text box

Add the movie clip to the Stage

Add a button component

Add ActionScript code

Enter ActionScript code for the slide show

Review the ActionScript code

Publish your document

Tutorial: Building Your First Flash Application

TOP

This tutorial guides you through the process of creating a simple application using some of the authoring features in Macromedia Flash Basic 8 and Flash Professional 8. A Flash application, broadly defined, can be as simple as content that offers interactivity, or as elaborate as a robust application that interacts with a variety of data sources.

If you have not already done so, Macromedia recommends that before you take this tutorial you read Flash basics.

 

Review your task

#TOP

In this tutorial, you will create a type of application known as a flexible messaging area, or FMA for the web site of a fictional restaurant called Cafe Townsend. An FMA is a common type of Flash application used for displaying content that conveys some kind of informational or marketing message to the audience. In this case, the FMA displays photographs of items from a restaurant menu. At Macromedia's website, an FMA is used to display information about new software products and other advertising messages. These are called flexible messaging areas because they usually occupy an area of the web page that is set aside for content that can change depending on the needs of the business or website. For example, if the fictional restaurant Café Townsend has a special event planned, its FMA could change to display the details of that event instead of the restaurant's menu items.

In this tutorial, after examining a finished version of the FMA, you'll begin by creating a new Flash document and end by publishing the application for web playback. The tutorial should take approximately 30 minutes to complete.



The completed FMA

 

Examine the completed application

TOP

As you examine the finished version of the application you'll create, you will also gain some familiarity with the Flash workspace.

In subsequent sections of this tutorial, you'll follow the steps to create the application yourself.

Run the completed application

To better understand the type of application you'll create as you work through this tutorial, you can look at a completed FLA file version of the application in the Flash authoring tool. FLA files are the type of files you work on in Flash. You can also play the SWF version of the file in Flash Player. The SWF version is the version of the file that you would publish in a web page.

To play the SWF version of the file in Flash Player:

  1. In Flash, select File > Open.

  2. Browse to the completed file using one of the following paths:

    • In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\cafe_townsend\completed files\flash and double-click flash_fma_finished.swf.

    • On the Macintosh, browse to the Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/cafe_townsend/completed_files/flash and double-click flash_fma_finished.swf.

    The completed application runs in Flash Player. Click Next to watch the images of food change with the animation.

  3. After viewing the application, close the Flash Player window.

Open the authoring document

It's helpful to look at the completed authoring FLA file to see how the author designed the application.

To view the authoring version of the file in Flash:

  1. In Flash, select File > Open.

  2. Browse to the authoring document using one of the following paths:

    • In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\cafe_townsend\completed files\flash and double-click flash_fma_finished.fla.

    • On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/cafe_townsend/completed_files/flash and double-click flash_fma_finished.fla.

    You now see the completed tutorial application in the Flash authoring environment.

  3. After you have the file open, you can explore the Stage, the Library panel, and the Timeline.

    • On the Stage you will see a variety of graphic shapes, which you will learn to create later in this tutorial.

    • In the Library panel, you will see a list of symbols, or reusable assets, that the document uses.

    • In the Timeline, you will see a representation of how and when those symbols appear on the Stage.

    • In the Actions panel, you will see ActionScript code that controls navigation in the Flash document and imports image files for display when the Flash document plays.

    You will learn more about the role of each of these parts of Flash as you complete the tutorial.

  4. When you are finished viewing the finished document, close it and be sure not to save any changes to the file.

 

Create a working folder

TOP

Before you begin, you must create a working folder that includes the sample files used in the tutorials in Getting Started with Flash. This task consists of creating the working folder on your hard disk and copying the sample files from the Flash application folder to the working folder.

  1. Create a new folder called local_sites somewhere on your hard disk. For example, create a folder called local_sites in either of the following locations:

    • (Windows) C:\Documents and Settings\your_user_name\ My Documents\local_sites

    • (Macintosh) Hard Disk/Users/your_user_name/Documents/local_sites

    On the Macintosh, there's a folder called Sites already in your user folder. Don't use that Sites folder as your local folder; the Sites folder is where you place your pages to make them

     publicly accessible when you're using the Macintosh as a web server.

  2. Locate the cafe_townsend folder in the Flash application folder on your hard disk. If you installed Flash to its default location, the path to the folders is as follows:

    • (Windows) C:\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial_assets\cafe_townsend

    • (Macintosh) /Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial_assets/cafe_townsend

  3. Copy the cafe_townsend folder to your local_sites folder.

 

Create a new document

TOP

Now that you have seen the finished application you will create, it is time to create your own Flash document.

If you haven't already set up a working folder, you must do so before you begin.

To learn how to create an application in Flash, you'll start with the very first step in the process: creating a new file.

Open a new document

Now you're ready to create your own version of the FMA.

To create a new document:

  1. Select File > New.

  2. In the New Document dialog box, select Flash Document and then click OK.

  3. Select File > Save.

  4. Name the file flash_fma.fla and save the file in the cafe_townsend folder you copied to the local_sites folder on your hard disk.

    NOTE As you complete the tutorial, remember to save your work frequently.

Define document properties

Configuring document properties is a common first step in Flash authoring. You can change the document properties at any time, but it is helpful to make certain decisions, such as the Stage size and background color, at the beginning of the process.

Document properties are properties that affect the entire Flash document, such as the size of the Stage or the background color. You can use the Property inspector to specify these settings.

To define document properties:

  1. If the Property inspector isn't open, select Window > Properties > Properties. (The default location of the Property inspector is at the bottom of the Flash application window.)

    The Property inspector

    NOTE If the Property inspector is not fully expanded, click the white triangle in the lower-right corner.

    ABOUT... About the Property inspector The Property inspector lets you view and change the specifications for selected objects. The specifications depend on the type of object selected. If you select a text object, for example, the Property inspector displays settings for viewing and modifying text attributes. Because you just opened a new document, the Property inspector shows the document settings.

  2. In the Property inspector, enter 60 in the Frame Rate text box.

    The application will play at 60 frames per second, an optimal frame rate for playing animations smoothly.

  3. Click Size to set the Stage size.

  4. In the Document Properties dialog box, enter 700 in the width text box and 150 in the height text box, and then click OK.

    Flash automatically inserts the px (for pixel) after the number.

    The Document Properties dialog box

  5. In the Timeline, click the value in the Zoom menu and enter 75%.

    This makes it easier to see your entire document in the Document window.

    Press Enter (Windows) or Return (Macintosh).

  6. Save your work.

 

Create symbols

TOP

Next, you will create some symbols or reusable assets. Symbols allow you to use the same asset more than once without storing multiple copies of it in your FLA file. You store the symbol in the Library panel, and drag instances of the symbol to the Stage when you need them.


To create the symbol:

  1. Select Insert > New Symbol.

  2. In the Create New Symbol dialog box, type imageHolder in the Name text box.

    The default value for Behavior is Movie Clip. Leave this unchanged.

  3. Click OK.

    The new symbol is added to the Library panel (Window > Library) and Flash enters symbol-editing mode.

    NOTE In symbol-editing mode, the Stage disappears and the main portion of the Flash application window becomes a drawing area where you can draw and edit the symbol.

    ABOUT... About Symbols and the Library panel Symbols are reusable assets that allow you to use a single asset more than once in your Flash document without duplicating the asset in the file. By keeping only one copy of the symbol in the Flash document, you keep the document file size low.

    A symbol can be as simple as a button or a graphic, or as complex as a movie clip. After you create a symbol, you store it in the Library panel. The Library panel stores and organizes all the symbols in your document. To reuse a symbol, you drag it from the Library panel to the Stage. When you do this, Flash creates a new instance of the symbol on the Stage. An instance is really just a reference to the original symbol; it tells Flash to "Draw a copy of the specified symbol here".

    By using symbols and instances, you can keep your assets well-organized and your Flash file size low. In addition, you can update the appearance or behavior of all the instances of a specific symbol by editing the symbol. These changes are then reflected in all the instances of the symbol throughout your document.

  4. In symbol-editing mode, Select the Rectangle tool from the Tools panel (Window > Tools).

  5. Select white (#FFFFFF) from the Stroke Color Picker on the Tools panel.

  6. Select light gray (#CCCCCC) from the Fill Color Picker in the Tools panel.

  7. Drag in the drawing area to draw a wide, flat rectangle.

  8. Select the Selection tool from the Tools panel.

  9. Double-click the rectangle you drew to select both its fill and its stroke.

    NOTE The stroke is the line that forms the border of a shape.

  10. In the Property inspector, enter 0 in both the X and Y text boxes.

    This locates the upper-left corner of the symbol in the upper-left corner of the Stage.

  11. Enter 700 in the Width (W) text box and 150 in the Height (H) text box and press Enter (Windows) or Return (Macintosh).

The Property inspector with the correct width, height, X, and Y values

NOTE When you enter values into the text boxes in a panel, you must press Tab, Enter (Windows), or Return (Macintosh) in order for Flash to acknowledge the value.


Individual instances of this first symbol that you created become the container for individual images your FMA will display. This is why you named it imageHolder. Next, you create another symbol that becomes a container for a stack of five instances of the imageHolder symbol. Later, you will animate this new symbol vertically to change the image that appears on the visible part of the Stage.

To create the second symbol with five imageHolder instances:

  1. Select Insert > New Symbol.

  2. In the Create New Symbol dialog box, enter slides in the Name text box and click OK.

    You remain in symbol-editing mode.

  3. Select 25% from the Zoom menu in the Timeline.

  4. In the Library panel (Window > Library), drag the imageHolder symbol to the drawing area.

    You have now created an instance of the imageHolder symbol. This instance is part of the new slides symbol you are creating.

  5. With the new instance still selected on the Stage, in the Property inspector, enter holder0 in the Instance Name text box.

    This gives the instance its own name that is separate from the symbol name.

  6. Also in the Property inspector, enter 0 in both the X and Y text boxes and press Enter (Windows) or Return (Macintosh).

    This locates the upper-left corner of the holder0 instance at the upper-left corner of the slides symbol.

  7. Drag the imageHolder symbol from the Library panel to the drawing area and place it just below the holder0 instance.

  8. In the Property inspector, enter holder1 in the Instance Name text box.

  9. Enter 0 in the X text box and 150 in the Y text box and press Enter or Return.

  10. Repeat the process for a third, fourth, and fifth instance of the imageHolder symbol.

In the Property inspector, give the new instances the following properties:

Third instance:

Instance Name = holder2

X = 0

Y = 300

Fourth instance:

Instance Name = holder3

X = 0

Y = 450

Fifth instance:

Instance Name = holder4

X = 0

Y = 600

You have now finished creating the symbol called slides. Next, you will create a third symbol that will contain an instance of the slides symbol. As you can see, nesting symbol instances inside other symbols is a common technique of Flash authoring.

The completed slides symbol




To create the third symbol:

 

  1. Select Insert > New Symbol.

  2. In the Create New Symbol dialog box, enter slideShow in the Name text box and click OK.

  3. Drag the slides symbol you created in the previous section from the Library panel to the drawing area of the new slideShow symbol.

    This creates an instance of the slides symbol within the new slideShow symbol.

    The Library panel with the slides and slideShow symbols

  4. With the symbol instance still selected, in the Property inspector, enter 0 in the X and Y text boxes.

  5. Still in the Property inspector, enter slides_mc in the instanceName text box.

 

Edit a symbol Timeline

TOP

Now that you have created the three symbols, you will edit the slideShow symbol by adding animation to its Timeline. This animation causes the images of food in the completed document to slide upward when the user clicks a button that you will add later.

To edit the slideShow symbol:

  1. Without leaving symbol-editing mode, click Insert Layer in the Timeline.

    The Insert Layer button in the slideShow symbol's Timeline

    This adds a layer to the slideShow symbol's Timeline.

    ABOUT... About movie clips and nested Timelines Each movie clip symbol can have its own timeline that allows the movie clip to contain animation or ActionScript of its own. This is why you see the name of the symbol you are editing at the top of the Timeline when you are in symbol-editing mode.

    Using symbols and nested timelines gives you great flexibility in how you build your Flash document and organize its functionality. A typical example of this is a car moving across the Stage with spinning wheels. The animation of the car moving across the Stage could be in the main Timeline of the Flash document. Each of the spinning wheels could be an instance of a movie clip symbol with its own timeline. The spinning animation of the wheels would be implemented in the movie clip timeline. This approach is much simpler to implement than creating an animation in the main timeline of the wheels, which are both spinning and moving across the Stage.

  2. In the Timeline, select Frame 20 of Layers 1 and 2.

    Selecting Frame 20 of Layers 1 and 2

  3. Select Modify > Timeline > Convert to Keyframes.

    This adds frames to the Timeline and adds keyframes to the selected frames (Frame 20).

    The Timeline with the added keyframes in Frame 20

  4. Repeat the process by selecting Layers 1 and 2 in Frame 40 and selecting Modify > Timeline > Convert to Keyframes.

  5. Repeat the process in Frames 60 and 80.

    You may need to use the scroll bar at the bottom of the Timeline to see these frames.

     

Add actions to frames

TOP

In this section, you will add a small amount of ActionScript to control how the playhead moves through the Timeline of the slideShow movie clip. By adding stop() methods, you cause the playhead to stop and wait at certain frames. Later you will add ActionScript code to make the playhead move again.

To add the ActionScript code:

  1. In the Timeline, select Frame 1 of Layer 2.

  2. Select Modify > Timeline > Convert to Keyframes.

    This adds a keyframe to the frame, so now there are keyframes in Frames 1 and 2 of Layer 2.

  3. Select Frame 1 of Layer 2.

  4. Open the Actions panel (Window > Actions).

    If the Actions panel is in Script Assist mode (you will see the text "To add an item, double-click or drag the item to the Script window" and will be unable to type in the Script window), click the Script Assist button in the Actions panel to exit Script Assist mode.

  5. In the Actions panel, type the following ActionScript:

    stop();

    This code causes the playhead to stop playing the slideShow movie clip whenever it reaches Frame 1. A small a appears in Frame 1 of Layer 1 of the Timeline. This indicates that ActionScript is present in that frame.

  6. In the Timeline, select Frame 20 of Layer 2.

  7. Select Modify > Timeline > Convert to Keyframes.

  8. Select Frame 20 of Layer 2.

  9. In the Actions panel, type the stop(); ActionScript.

  10. In the Timeline, select frame 40 of Layer 2.

  11. Select Modify > Timeline > Convert to Keyframes.

  12. Select frame 40 of Layer 2.

  13. In the Actions panel, type the stop(); ActionScript.

  14. In the Timeline, select frame 60 of Layer 2.

  15. Select Modify > Timeline > Convert to Keyframes.

  16. Select frame 60 of Layer 2.

  17. In the Actions panel, type the stop(); ActionScript.

  18. In the Timeline, select frame 80 of Layer 2.

  19. In the Actions panel, type the stop(); ActionScript.

 

Add labels to frames

TOP

Now you will add labels to specific frames. By labeling a frame, you make it possible to refer to that frame in ActionScript. This allows you to write ActionScript code that performs actions on those frames. Later, you will add ActionScript code that makes the playhead jump to these labeled frames.

To add the frame labels:

  1. In the Timeline, select Frame 2 of Layer 2.
  2. In the Property inspector, enter slide0 in the Frame Label text box.

    A small flag icon and the frame label appear in Frame 2 of Layer 2 in the Timeline.

  3. In the Timeline, select Frame 21 of Layer 2.
  4. In the Property inspector, enter slide1 in the Frame Label text box.
  5. In the Timeline, select Frame 41 of Layer 2.
  6. In the Property inspector, enter slide2 in the Frame Label text box.
  7. In the Timeline, select Frame 61 of Layer 2.
  8. In the Property inspector, enter slide3 in the Frame Label text box.

    The Timeline with the completed frame labels
     

 

Add motion tweens

TOP

A motion tween is a type of animation in which an object moves from one position to another. In this project, you will make the images of food animate upward when the user clicks on a button, which you will add later.

ABOUT... About motion tweens The name motion tween comes from the fact that the animation includes motion, and from the way that motion is created. The term tween is short for in between. You define motion-tweened animations by defining starting and ending positions for the object being animated, and then letting Flash calculate all of the in-between positions for the object. In this way, you can create smooth motion animations simply by setting the start and end positions of the object you are animating.

To add the motion tweens:

  1. In the Timeline, select Frame 1 of Layer 1.

  2. In the Property inspector, select Motion from the Tween menu.

    Frames 1 to 19 in Layer 1 become a motion tween. An arrow appears in those frames in the Timeline.

  3. In the Property inspector, drag the slider next to the Ease text box until the value in the text box is 100.

    This number causes the tween to be eased at the end of the motion. This means the motion starts suddenly and ends more slowly

    ABOUT... About easing animations The default behavior of motion tweens is for the animation to proceed at the same speed throughout its entire duration. Often however, this doesn't look very good to the eye. Just as a car doesn't go from 0 to 50 mph instantly, your animations shouldn't either. Easing an animation is the same as accelerating a car slowly. The term easing comes from the idea that you ease a car into motion, or ease it to a stop. By adding an easing value, you cause your motion tweens to begin or end more gradually.

  4. In the Timeline, select Frame 20 in Layer 1.

  5. In the Property inspector, select Motion from the Tween menu.

  6. Drag the Ease slider up until the Ease value is 100.

  7. Click the slides_mc movie clip instance on the Stage to select it.

  8. In the Property inspector, enter -150 in the Y text box.

    This moves the slideShow movie clip instance upward 150 pixels in the keyframe in Frame 20. The motion tween from Frame 1 to Frame 20 slides the movie clip upward smoothly instead of causing the movie clip to jump from one position to the next.

  9. In the Timeline, select Frame 40 in Layer 1.

  10. In the Property inspector, select Motion from the Tween menu.

  11. Drag the Ease slider up until the Ease value is 100.

  12. Click the slides_mc movie clip instance on the Stage to select it.

  13. In the Property inspector, enter -300 in the Y text box.

  14. In the Timeline, select Frame 60 in Layer 1.

  15. In the Property inspector, select Motion from the Tween menu.

  16. Drag the Ease slider up until the Ease value is 100.

  17. Click the slides_mc movie clip instance on the Stage to select it.

  18. In the Property inspector, enter -450 in the Y text box.

  19. In the Timeline, select Frame 80 in Layer 1.

  20. Click the slides_mc movie clip instance on the Stage to select it.

  21. In the Property inspector, enter -600 in the Y text box.

  22. In the Timeline, click the number 1 in the Frame Number bar.

  23. Press Enter (Windows) or Return (Macintosh).

    A preview of the animation plays on the Stage. The stop(); ActionScript you entered previously is ignored in preview mode.

    You have now finished creating the slideShow symbol, which contains its own complex internal timeline. Next, you will edit the main Timeline of your FLA file.

    The Timeline with the completed motion tweens
     

Edit the main Timeline

TOP

Now you will return to the main Timeline of your Flash document to add details that affect the entire document.


To add layers to the main Timeline:

  1. Click the Scene 1 icon at the top of the Timeline.

    You exit symbol-editing mode and return to the main Timeline of your FLA file.

  2. Click the Insert Layer button at the bottom of the Timeline.

    A new layer appears above the existing layer in the Timeline.

  3. Click Insert Layer three more times to insert three more layers.

    You now have four layers in the main Timeline.

  4. Double-click the layer name Layer 5 to make the name editable.

  5. Enter the name actions as the new layer name and press Enter (Windows) or Return (Macintosh).

  6. Double-click the layer name Layer 4 and rename the layer nextButton.

  7. Double-click the layer name Layer 3 and rename the layer border.

  8. Double-click the layer name Layer 2 and rename the layer blueArea.

  9. Double-click the layer name Layer 1 and rename the layer slideShow.

The 5 properly named layers in the Timeline

Now that you have added layers to the main Timeline, you are ready to add the slideShow movie clip to the Stage.


To add the slideShow movieClip to the Stage:

  1. Click the slideShow layer name to make that layer active.

  2. Drag the slideShow symbol from the Library panel to the Stage and align its upper-left corner with the upper left corner of the Stage.

  3. With the new movie clip instance still selected on the Stage, go to the Property inspector and set the X and Y values to 0 to align the upper-left corner of the movie clip exactly with the corner of the Stage.

  4. Still in the Property inspector, enter slideShow_mc as the instance name for the movie clip

  5. Save your work.

 

Create the border

TOP

Next, you will create a border for the Stage that will make the FMA look more visually appealing when you view it in a web page.

To create the border:

  1. In the Timeline, select 100% from the Zoom menu.

  2. In the Timeline, select the border layer by clicking the layer name.

  3. Select the Rectangle tool in the Tools panel.

  4. In the Tools panel, select no color from the Stroke Color Picker.

    Selecting No Stroke from the Stroke Color Picker

  5. Select the color black (#000000) from the Fill Color Picker.

    Selecting black from the Fill Color Picker

  6. Draw a rectangle on the Stage that is approximately the same shape as the Stage.

    Drawing a black rectangle the shape of the Stage

  7. In the Tools panel, select the Selection tool.

  8. On the Stage, click the rectangle you just drew to select it.

  9. Select Window > Align to open the Align panel.

  10. In the Align panel, click the To Stage option so it is selected.

    This allows the Align panel to align the selected rectangle with the Stage area.

    The Align panel with the To Stage option selected

    TIP When the To Stage option is off, the Align panel aligns multiple selected objects with each other.

  11. In the Align panel, find the Match-size area and click the Match Width and Height button.

    Your rectangle becomes the same size as the Stage area.

    Clicking the Match Width and Height button


    With the rectangle still selected, click the Align Vertical Center button in the Align panel.

    Use the tooltips to find the correct button in the Align panel.

    Clicking the Align Vertical Center button

    Still in the Align panel, click the Align Horizontal Center button.

    Clicking the Align Horizontal Center button

    The rectangle is now precisely centered on the Stage.

    The black rectangle centered on the Stage

    Click outside the Stage to deselect the black rectangle.

  12. In the Tools panel, select the Rectangle tool.

  13. Still in the Tools panel, select the color blue with the hexadecimal value #0000FF from the Fill Color Picker.

  14. In the Tools panel, double-click the Rectangle tool.

  15. In the Rectangle Settings dialog box, enter 16 in the Corner Radius text box and click OK.

  16. Select View > Snapping > Snap to Pixels to turn on pixel snapping.

    This causes the edges of shapes that you draw to snap to the nearest pixel as you draw.

  17. With the Rectangle tool still selected in the Tools panel, draw a rectangle on the Stage as close to the same size as the Stage as possible.

    The blue rounded-corner rectangle on the Stage

    In the Tools panel, click the Selection tool.

  18. Click the blue rectangle to select it.

  19. With the blue rectangle selected, go to the Property inspector panel and enter the following values in the text boxes:

    W: 700

    H: 150

    X: 0

    Y: 0

    The properly sized blue rectangle on the Stage

  20. Double-click the blue rectangle again to select it.

  21. Press Delete to delete the blue rectangle.

    A white rectangle appears in the middle of the black rectangle you drew earlier. The blue rectangle functioned as a mask in this step. You now have a black border at the top and bottom of the Stage.

    The Stage with only the black corners remaining
     

     

Add a symbol

TOP

In this section, you will add a blue-colored area to the right side of the Stage. This is where the text that describes each menu item and the button for switching menu items will appear.


To add a new symbol with a blue shape:

  1. Click the blueArea layer name in the Timeline.

  2. Select Insert > New Symbol.

  3. In the Create New Symbol dialog box, enter menu in the Name text box and click OK.

    You enter symbol-editing mode and the Timeline panel switches to displaying the Timeline of the new blueArea movie clip.

  4. In the Tools panel, select the Rectangle tool.

  5. Select No Stroke from the Stroke Color Picker.

  6. Click the Fill Color swatch to display the Fill Color Picker.

  7. In the Fill Color Picker, enter 80% in the Alpha text box.

  8. Still in the Fill Color Picker, enter 343469 in the Color text box and press Enter (Windows) or Return (Macintosh).

    This creates a grayish-blue color.

  9. In the Tools panel, double-click the Rectangle tool.

  10. In the Rectangle Settings dialog box, enter 0 in the Corner Radius text box and click OK.

  11. With the Rectangle tool, draw a flat, wide rectangle on the Stage.

  12. In the Tools panel, click the Selection tool.

  13. Double-click the rectangle you drew on the Stage to select it.

  14. In the Property inspector panel, enter the following values for the rectangle shape:

    • W: 415

    • H: 150

    • X: 0

    • Y: 0

  15. Press Enter or Return.

  16. In the Tools panel, click the Subselection tool.

  17. Move the mouse over the lower-left corner of the rectangle until a tiny white box appears next to the arrow pointer.

    The pointer indicating that the corner of the rectangle can be dragged

  18. Drag the corner of the rectangle to the right so that the left side of the rectangle becomes a diagonal line at approximately a 30º angle.

  19. In the Tools panel, click the Selection tool.

    This deselects the control points on the rectangle.

     

Add a text box

TOP

Now that you have added the blue background to the menu movie clip, you are ready to add the text that describes each menu item. You will add two text boxes. The ActionScript code you add later will insert the text into these text boxes.


To add the text box for the menu item title:

  1. In the Tools panel, click the Text tool.

  2. In the Property inspector, select Dynamic Text from the Text Type menu.

  3. Still in the Property inspector, enter 14 in the Font Size text box.

  4. With the Text tool, draw a wide flat text rectangle in the top part of the gray-blue shape you just created.

    The rectangle should be almost as wide as the blue shape. Don't worry about the exact placement of the rectangle. You will adjust that later.

  5. In the Tools panel, click the Selection tool.

  6. Click the text box you just drew to select it.

  7. In the Property inspector panel, enter the following values:

    • Text Type: Dynamic Text

    • InstanceName: title_txt

    • X: 60

    • Y: 10

    • Font: Verdana

    • Font Size: 14

    • Text (fill) color: White

    • Style: Bold

    • Line Type: Single line

    The Property inspector with the correct values entered

  8. Save your document.

Add the second text box

Now you will add the second text box, which will hold the description text for each menu item.

To add a text box for the descriptions:

  1. Click outside the Stage to deselect the text box you created in the previous section.

  2. In the Tools panel, click the Text tool.

  3. In the Property inspector, enter 12 in the Font Size text box.

  4. Still in the Property inspector, deselect the bold icon.

  5. Select Multiline from the Line Type menu.

  6. With the Text tool, draw another text rectangle on the Stage, filling the lower part of the blue shape you created earlier, below the rectangle you drew in To add the text box for the menu item title:.

  7. In the Tools panel, click the Selection tool.

  8. With the second text rectangle still selected, go to the Property inspector panel and enter the following values:

    Text Type: Dynamic Text

    InstanceName: description_txt

    X: 85

    Y: 45

    Font: Verdana

    Font Size: 12

    Color: White

    The Property inspector with the correct values entered

  9. In the Tools panel, click the Selection tool.

  10. Click in the Stage area outside the shapes you have drawn to deselect them.

  11. In the Timeline, click the Scene 1 link to exit symbol-editing mode and return to the main Timeline of the Flash document.

    You exit symbol-editing mode and the Stage with the black borders reappears.

  12. Save your document.

 

Add the movie clip to the Stage

TOP

Now that you have completed the menu movie clip, you are ready to add it to the Stage in the main Timeline.


To add the menu movie clip to the Stage:

  1. In the Tools panel, click the Selection tool to ensure that the tool is active.

  2. In the Library panel (Window > Library), drag the menu movie clip and place it on the right side of the Stage.

  3. With the menu movie clip still selected on the Stage, go to the Property inspector and enter the following values:

    InstanceName: menu_mc

    W: 415

    H: 150

    X: 285

    Y: 0

  4. With the menu movie clip still selected, go to the Property inspector and select Alpha from the Color menu.

  5. Drag the Alpha Amount slider until the value is 90%.

 

Add a button component

TOP

Now you are ready to add the button that allows the user to switch from one slide to the next in the slide show.


To add the Next button:

  1. In the Timeline, click the nextButton layer name to make that layer active.

    This is the layer that holds the button component you are about to add.

  2. Open the Components panel if it is not already open by selecting Window > Components.

  3. In the Components panel, open the User Interface category by clicking the plus sign (+) next to the User Interface category name.

  4. Drag the Button component from the Components panel to the lower part of the blue rectangle on the Stage.

    The button stays selected on the Stage unless you click elsewhere.

  5. With the button still selected, go to the Property inspector panel and enter the following values:

    InstanceName: next_btn

    X: 590

    Y: 120

  6. In the Property inspector panel, click the Parameters tab.

  7. In the Label text box, replace the name Button with the name Next and press Enter (Windows) or Return (Macintosh).

    The label on the button changes to Next.

  8. Save your document.

 

Add ActionScript code

TOP

You have now added all the graphic and text elements that your FMA requires. The last step is to add the ActionScript code that displays the proper text and image for each slide in the slideShow movie clip.

Test an ActionScript sample

First, you'll add some simple ActionScript code to see it work.

To add the test ActionScript:

  1. In the Timeline, click the layer name actions to activate that layer.

  2. Select Window > Actions to open the Actions panel.

    TIP To add the text (in quotes), ActionScript refers to the text boxes by noting the name of the menu movie clip instance that is on the Stage (menu_mc), and then the name of the text box itself within the movie clip instance, as follows:

    menu_mc.description

    This syntax is called dot syntax. It is used throughout ActionScript to refer to objects that are nested within other objects.

  3. In the Actions panel, type the following ActionScript code. You can copy and paste the following code from the Flash Help panel:

    function testFunc(eventObj:Object) {

    menu_mc.title_txt.text = "Testing the title";

    menu_mc.description_txt.text = "Testing the description";

    }

    // add the event listener for the button

    next_btn.addEventListener("click", testFunc);

    This ActionScript code adds some text to the title and description text boxes that you added to the menu movie clip earlier.

  4. Select Control > Test Movie.

    The Flash document opens and plays in a new window.

  5. In the Test Movie window, click Next.

    The test title and test description text you entered as part of the ActionScript code appears in the blue rectangle on the right side of the document.

  6. Save your document.
     

Enter ActionScript code for the slide show

TOP

Now you will enter the ActionScript code that makes the slideshow animate each new slide into place when the Next button is clicked. After you add the code, your Flash document will be complete.


To add the ActionScript code to the Flash document:

  1. In the Timeline, make sure Frame 1 of the actions layer is still selected.

  2. In the Actions panel, delete all the code you entered in Test an ActionScript sample.

    The Actions panel should now be empty of code.

  3. Copy the following code and paste it into the Actions panel.

    /*The following four sections contain the data

    /*for each menu item.

    /* 0 */

    var image0title:String = "Summer salad";

    var image0desc:String = "Butter lettuce with apples, blood orange segments, gorgonzola, and raspberry vinaigrette.";

    var image0uri:String = "images/image0.jpg";

    /* 1 */

    var image1title:String = "Turkey and Sun-dried Tomato Sandwich";

    var image1desc:String = "Fresh roasted turkey with sun-dried tomatoes, garlic aioli, and havarti.";

    var image1uri:String = "images/image1.jpg";

    /* 2 */

    var image2title:String = "Seared Salmon";

    var image2desc:String = "Filet of wild salmon with caramelized onions, new potatoes, and caper and tomato salsa.";

    var image2uri:String = "images/image2.jpg";

    /* 3 */

    var image3title:String = "New York Cheesecake";

    var image3desc:String = "Creamy traditional cheesecake served with chocolate sauce and strawberries.";

    var image3uri:String = "images/image3.jpg";

    var currImage:Number = 0;

    var totalImages:Number = 4;

    menu_mc.title_txt.text = this["image"+currImage+"title"];

    menu_mc.description_txt.text = this["image"+currImage+"desc"];

    for (var i:Number = 0; i<totalImages; i++) {

    slideShow_mc.slides_mc["holder"+i].loadMovie(this["image"+(i)+"uri"],slideShow_mc.slides_mc.getNextHighestDepth());

    }

    slideShow_mc.slides_mc["holder4"].loadMovie(this["image0uri"],slideShow_mc.slides_mc.getNextHighestDepth());

    // function for the Next button

    function nextMenuItem(eventObj:Object) {

    slideShow_mc.gotoAndPlay("slide"+(currImage));

    if ((currImage+1)>=totalImages) {

    currImage = 0;

    } else {

    currImage++;

    }

    menu_mc.title_txt.text = this._parent["image"+currImage+"title"];

    menu_mc.description_txt.text = this._parent["image"+currImage+"desc"];

    }

    // add the event listener for the button

    next_btn.addEventListener("click", nextMenuItem);

    Review the ActionScript code explains this code in detail.

  4. Save your document.

  5. Select Control > Test Movie.

  6. In the Test Movie window, click Next to watch the animated images of food and see the titles and descriptions update for each slide.

  7. Close the Test Movie window.

 

Review the ActionScript code

TOP

This section explains what the ActionScript you just added to the Actions panel is doing. If you prefer, you can skip this section and move on to publishing your document for display in a web browser.

Complete information about working with ActionScript can be found in Learning ActionScript 2.0 in Flash.

The first section of code contains variables that store information about the images that will appear in each section of the slideShow movie clip.

/* 0 */

var image0title:String = "Summer salad";

var image0desc:String = "Butter lettuce with apples, blood orange segments, gorgonzola, and raspberry vinaigrette.";

var image0uri:String = "images/image0.jpg";


/* 1 */
var image1title:String = "Turkey and Sun-dried Tomato Sandwich";

var image1desc:String = "Fresh roasted turkey with sun-dried tomatoes, garlic aioli, and havarti.";

var image1uri:String = "images/image1.jpg";

/* 2 */

var image2title:String = "Seared Salmon";

var image2desc:String = "Filet of wild salmon with caramelized onions, new potatoes, and caper and tomato salsa.";

var image2uri:String = "images/image2.jpg";

/* 3 */

var image3title:String = "New York Cheesecake";

var image3desc:String = "Creamy traditional cheesecake served with chocolate sauce and strawberries.";

var image3uri:String = "images/image3.jpg";

This code declares four sets of three variables each. Each set of three variables represents one of the four images that your Flash document displays. The only difference between the variable names for the four different images is the number that is included in the variable names. The numbering starts with the number 0 instead of 1. This is because lists in ActionScript are zero-based. This means that the first item in the list is always referred to by the number 0 rather than the number 1.

The three variables that are declared for each image are as follows. Remember that the number in the middle of each variable name changes for each image:

image0title contains a string that is the name of the dish that appears in the title_txt text box in the menu movie clip.

image0desc contains a string that is the description of the dish that appears in the description_txt text box in the menu movie clip.

image0uri contains a string that is the Universal Resource Identifier for the image file that is loaded and displayed in each section of the slides movie clip.

The next two lines of code declare two more variables:

var currImage:Number = 0;

var totalImages:Number = 4;

The first variable, currImage, stores the number of the current image that is being displayed in the slides movie clip. The second variable, totalImages, stores the total number of images that are available to be displayed. By storing this last number in a variable, you make it easier to change the number if you want to add more images to the slide show later. You would also need to modify the slideShow movie clip in that case.

The next line of code sets the text of the title text box to the text in the variable whose name corresponds to the current image number.

menu_mc.title_txt.text = this["image"+currImage+"title"];

This code uses dot syntax to set the text property of the title_txt text box in the menu_mc movie clip instance to the value of a variable. In this case the variable name is constructed from the word image plus the value of the currImage variable, plus the word title. The variable name becomes image0title or one of the other similar variable names, depending on the number contained in the currImage variable. The word this indicates to Flash that the variable was declared inside this same script.

The following line of code is similar to the previous one:

menu_mc.description_txt.text = this["image"+currImage+"desc"];

This line of code sets the text of the description text box in the menu_mc movie clip instance to the text in the desc variable that corresponds to the current image number.
The following lines of code set up a for loop to load external JPG image files into the holder movie clip instances, which are in the slides movie clip in the slideShow movie clip. The file paths to each external JPG file are stored in the image*uri variables declared in the beginning of this ActionScript code block, as follows:

for (var i:Number = 0; i<totalImages; i++) {

slideShow_mc.slides_mc["holder"+i].loadMovie(this["image"+(i)+"uri"],slideShow_mc.slides_mc.getNextHighestDepth());

}

A for loop is a block of code surrounded by a set of braces { } that repeats for each increment of the i variable. In this case, i increments from 0 to 4 because the value of totalImages is 4. The loadMovie() method can be used to load a Flash file or an image file into the movie clip. In this case it is loading the external JPG files.

The next line of code loads the first image, stored in the image0uri variable, into the holder4 movie clip instance, as follows:

slideShow_mc.slides_mc["holder4"].loadMovie(this["image0uri"],slideShow_mc.slides_mc.getNextHighestDepth());

The following lines of code implement the functionality of the Next button:

function nextMenuItem(eventObj:Object) {

slideShow_mc.gotoAndPlay("slide"+(currImage));

if ((currImage+1)>=totalImages) {

currImage = 0;

} else {

currImage++;

}

menu_mc.title_txt.text = this._parent["image"+currImage+"title"];

menu_mc.description_txt.text = this._parent["image"+currImage+"desc"];

}

The code for the Next button is contained in the nextMenuItem function. A function is a block of code that is set up to execute when a particular event occurs. In this case, the function will run whenever the user releases the mouse button over the Next button on the Stage.

Inside the function is the gotoAndPlay() method, which directs the playhead to jump to a specific frame label in the Timeline. The Frame label specified in this case is constructed from the word slide and the current value of the currImage variable.

The next line contains an if statement that checks to see if the value of the currImage variable plus 1 is equal to the value of the totalImages variable. If this is true, the code sets the value of currImage to 0, otherwise the code increments the value of currImage by 1.

The last two lines in the function set the text of the title and description text boxes to the strings stored in the image*title and image*desc variables that correspond to the value of the currImage variable.

The line of code immediately after the function definition tells Flash to execute the nextMenuItem function when the next_btn instance receives a mouse click.

next_btn.addEventListener("click", nextMenuItem);


Because the nextMenuItem function is now set up to listen for mouse clicks, it is called an event listener. This is why the addEventListener() method is used to tell flash to execute the function when the mouse click event occurs.

While the code described in this section is relatively simple, it still relies on a number of ActionScript concepts that are beyond the scope of this tutorial to describe. For a thorough introduction to these concepts and additional ActionScript tutorials, see Learning ActionScript 2.0 in Flash and Flash Tutorials.

 

Publish your document

TOP

Now that you have completed your Flash document, you are ready to publish it in a web page. The first step in this process is to save the FLA version of your document as a compressed SWF version of the file. This SWF version has a much smaller file size; because of this, it loads easily in a web browser.


To publish your document as a SWF file:

  1. Select File > Publish Settings.

  2. In the Publish Settings dialog box, select the Formats tab and verify that only the HTML and Flash check boxes are selected.

    This causes Flash to publish only the SWF file and an HTML file to display it in a web browser.

  3. Still in the Publish Settings dialog box, select the Flash tab and verify that Flash Player 8 is selected in the Version menu.

    This causes Flash to export the SWF file in Flash 8 format.

  4. Select the HTML tab and verify that Flash Only is selected from the Template menu.

    This causes Flash to generate only a simple HTML file to display the Flash document in a browser.

  5. Click Publish.

    Flash saves a SWF file copy of your document and an HTML file in the folder that contains your working FLA file. This should be the cafe_townsend directory.

  6. Click OK to close the Publish Settings dialog box.
     

 

 

Copyright © ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash