working with animation

User Generated

havdhrylzr

Computer Science

Unformatted Attachment Preview

This week you will add interactivity to a Flash movie by adding buttons and creating animations. Complete the following: • Chapter 3 "Skills Review" on pages 3-34 to 3-35. Submit the Flash document that results from completing the entire Skills Review. ADOBE FLASH CS6 3 CHAPTER WORKING WITH SYMBOLS AND INTERACTIVITY 1. 2. 3. 4. 5. FLSH_CS6_002_ch03.indd 1 Create symbols and instances Work with libraries Create buttons Assign actions to frames and buttons Import graphics 07/06/12 8:39 PM 3 CHAPTER WORKING WITH SYMBOLS AND INTERACTIVITY Introduction An important benefit of Flash is its ability to create movies with small file sizes. This allows the movies to be delivered from the web or displayed on a mobile device more quickly. One way to keep the file size small is to create reusable graphics, buttons, and movie clips. Flash allows you to create a graphic (drawing) and then make unlimited copies, which you can use throughout the current movie and in other movies. Flash calls the original drawing a symbol and the copied drawings instances. Flash stores symbols in the Library panel—each time you need a copy of the symbol, you can open the Library panel and drag the symbol to the Stage, which creates an instance (copy) of the symbol. Using instances reduces the movie file size because Flash stores only the information about the symbol’s properties (size, shape, color), and a link is established between the symbol and an instance so that the instance has the same properties (such as color and shape) as the symbol. There are two especially valuable editing features of this process. First, if you have created several instances of a symbol and decide to change the same property for every instance, all that is needed is to edit the symbol. For example, if a logo appears in several places in an application and you need to change the color of each instance of the logo, you simply change the color of the symbol. Because the instances are linked to the symbol they are automatically updated. Second, you can change the properties of an individual instance of a symbol in one of two ways. You can change properties associated with the whole instance, such as size or transparency, and you can skew or rotate the instance. So if you have a symbol that is a tree, you can make the tree bigger or smaller, or you can make the tree lean to the left as if it is blowing in the wind. However, if you want to change individual parts of the instance, then you must break the link between the instance and the symbol. When you break the link between an instance and a symbol, the instance becomes an object that can be edited. For example, thinking about our tree now as an object, you can make the leaves on the tree different colors. You can only do this if you break the link between the instance and the symbol. When you break the link, changes you make to the object are not reflected in the symbol or any instances of the symbol. Likewise, if subsequently you make changes to the symbol, the changes will not be reflected in the unlinked object. The process for unlinking an instance is to select the instance on the Stage and choose the Break Apart command from the Modify menu. FLASH 3-2 FLSH_CS6_002_ch03.indd 2 07/06/12 8:39 PM TOOLS YOU’LL USE Figures © Cengage Learning 2013 FLASH 3-3 FLSH_CS6_002_ch03.indd 3 07/06/12 8:39 PM LESSON 1 Create Symbols AND INSTANCES What You’ll Do Figure © Cengage Learning 2013 In this lesson, you will create graphic symbols, turn them into instances, and then edit the instances. Understanding Symbol Types There are three categories of symbols: graphic, button, and movie clip. A graphic symbol is useful because you can reuse a single image and make changes in each instance of the image. A button symbol is useful because you can create buttons for interactivity, such as starting or stopping a movie. A movie clip symbol is useful for creating complex animations because you can create a movie within a movie. For example, you could have a movie with a car moving across the screen and its wheels rotating. The wheel animation would be created as one movie clip symbol and attached to each wheel of the animated car. Symbols can be created from objects you draw using the Flash drawing tools. In addition, you can import graphics into a Flash document that can then be converted to symbols. Creating a Graphic Symbol You can use the New Symbol command on the Insert menu to create and then draw a symbol. You can also draw an object and then use the Convert to Symbol command on the Modify menu to convert the object to a symbol. The Convert to Symbol dialog box, shown in Figure 1, allows you to name FLASH 3-4 FLSH_CS6_002_ch03.indd 4 the symbol and specify the type of symbol you want to create (Movie Clip, Button, or Graphic). When naming a symbol, it’s a good idea to use a naming convention that allows you to quickly identify the type of symbol and to group like symbols together. For example, you could identify all graphic symbols by naming them g_name and all buttons as b_ name. In Figure 1, the drawing on the Stage is being converted to a graphic symbol. After you complete the Convert to Symbol dialog box, Flash places the symbol in the Library panel, as shown in Figure 2. In Figure 2, an icon identifying the symbol as a graphic symbol and the symbol name are listed in the Library panel, along with a preview of the selected symbol. To create an instance of the symbol, you simply drag a symbol from the Library panel to the Stage. To edit a symbol, you can double-click it in the Library panel or you can use the Edit Symbols command on the Edit menu. Either way displays the symbol in an edit window, where changes can be made to it. When you edit a symbol, the changes are reflected in all instances of that symbol in your movie. For example, you can draw a car, convert the car to a symbol, and then create several instances of the car. Working with Symbols and Interactivity 07/06/12 8:40 PM You can uniformly change the size of all the cars by double-clicking the car symbol in the Library panel to open the edit window, and then rescaling it to the desired size. Working with Instances You can have as many instances as needed in your movie, and you can edit each one to make it somewhat different from the others. You can rotate, skew (slant), and resize graphic and button instances. In addition, you can change the color, brightness, and transparency. However, there are some limitations. An instance is a single object with no segments or parts, such as a stroke and a fill. You cannot select a part of an instance. Therefore, any changes to the color of the instance are made to the entire object. Of course, you can use layers to stack other objects on top of an instance to change its appearance. In addition, you can use the Break Apart command on the Modify menu to break the link between an instance and a symbol. Once the link is broken, you can make any changes to the object, such as changing its stroke and fill color. However, because the link is broken, the object is no longer an instance of the original symbol. So, if you make any changes to the original symbol, then the unlinked object is not affected. box indicates that the object is selected. Then, you can use the Free Transform tool options (such as Rotate and Skew, or Scale) to modify the entire image, or you can use the Break Apart command to break apart the instance and edit individual strokes and fills. The process for creating an instance is to open the Library panel and drag the desired symbol to the Stage. Once the symbol is on the Stage, you select the instance by using the Selection tool to drag a marquee around it. A blue bounding You need to be careful when editing an instance. Use the Selection tool to drag a marquee around the instance or click the object once to select it. Do not double-click the instance when it is on the Stage; otherwise, you will open an edit window that is used to edit the symbol, not the instance. QUICK TIP Figure 2 A graphic symbol in the Library panel Name of Flash movie the Library is associated with Click to display list of all open Flash movies Preview of symbol Figure 1 Using the Convert to Symbol dialog box to convert an object to a symbol Icon identifies symbol as a graphic Symbol name Figures © Cengage Learning 2013 Lesson 1 FLSH_CS6_002_ch03.indd 5 Create Symbols and Instances FLASH 3-5 07/06/12 8:40 PM Create a symbol 1. Open fl3_1.fla from the drive and folder where your Data Files are stored, then save it as coolCar.fla. This document has one object, a car, that was created using the Flash drawing tools. 2. Verify the Properties panel, the Library panel, and the Tools panel are displayed. 3. Set the magnification to Fit in Window. 4. Click the Selection tool on the Tools panel, then drag a marquee around the car to select it. 5. Click Modify on the menu bar, then click Convert to Symbol. 6. Type g_car in the Name text box. 7. Click the Type list arrow to display the symbol types, then click Graphic, as shown in Figure 3. 8. Set the registration to the upper-left corner as shown in Figure 3 if necessary, then click OK. 9. Click the Library panel tab, study the Library panel as shown in Figure 4, then save your work. The Library panel displays the symbol (red car) in the Item Preview window, an icon indicating that this is a graphic symbol, and the name of the symbol (g_car). The symbol is contained in the library, and the car on the Stage is now an instance of the symbol. You opened a file with an object, converted the object to a symbol, and displayed the symbol in the Library panel. Figure 3 Options in the Convert to Symbol dialog box Click to set Registration to upper-left corner Figure 4 Newly created symbol in the Library panel Preview of g_car symbol in Item Preview window Icon indicating a graphic symbol Figures © Cengage Learning 2013 FLASH 3-6 FLSH_CS6_002_ch03.indd 6 Working with Symbols and Interactivity 07/06/12 8:40 PM Figure 5 Creating an instance Create and edit an instance 1. Point to the car image in the Item Preview window of the Library panel, then drag the image to the Stage beneath the first car, as shown in Figure 5. Both cars on the Stage are instances of the graphic symbol in the Library panel. TIP You can also drag the name of the symbol or its icon from the Library panel to the Stage. Drag the car image, the name of the symbol, or its icon from the Library panel to below the original instance to create a second instance of the symbol Figure 6 The alpha set to 50% 2. Verify the bottom car is selected, click Modify on the menu bar, point to Transform, then click Flip Horizontal. 3. Display the Properties panel, then display the COLOR EFFECT area if it is not already showing. 4. Click the Style list arrow, then click Alpha. 5. Drag the Alpha slider left then right, then set the transparency to 50%. Notice how the transparency changes. Figure 6 shows the transparency set to 50%. 6. Click a blank area of the Stage to deselect the object, then save your work. Changing the alpha setting gives the car a more transparent look. You created an instance of a symbol and edited the instance on the Stage. This area may not be open Transparency set to 50% Figures © Cengage Learning 2013 Lesson 1 FLSH_CS6_002_ch03.indd 7 Create Symbols and Instances FLASH 3-7 07/06/12 8:40 PM Figure 7 Edit window Edit a symbol in the edit window 1. Display the Library panel, double-click the g_car symbol icon in the Library panel to display the edit window, then compare your screen to Figure 7. The g_car symbol appears in the edit window, indicating that you are editing the g_car symbol. TIP You can also edit a symbol by selecting it, clicking Edit on the menu bar, then clicking Edit Symbols. 2. Click a blank area of the window to deselect the car. 3. Verify the Selection tool is selected, then click the light gray hubcap inside the front wheel to select it. 4. Press and hold [Shift], then click the hubcap inside the back wheel so both hubcap fills are selected. 5. Set the Fill Color to the blue gradient color swatch in the bottom row of the color palette, compare your image to Figure 8, then deselect the image. 6. Click Scene 1 at the top left of the edit window to exit the edit window and return to the main Timeline and main Stage, then save your work. Changes you make to the symbol affect every instance of the symbol on the Stage. The hubcap fill becomes a blue gradient in the Library panel and on the Stage. Graphic symbol indicates you are in the edit window Name of symbol Figure 8 Edited symbol You edited a symbol in the edit window that affected all instances of the symbol. Hubcap fills are blue gradient Symbol reflects changes Figures © Cengage Learning 2013 FLASH 3-8 FLSH_CS6_002_ch03.indd 8 Working with Symbols and Interactivity 07/06/12 8:40 PM Figure 9 The car with the maroon body selected Break apart an instance Figure 10 Changing the symbol affects only the one instance of the symbol Instance of the symbol Object that is no longer an instance of the symbol 1. Drag a marquee around the bottom car to select it if it is not selected. 2. Click Modify on the menu bar, then click Break Apart. The object is no longer linked to the symbol, and its parts (strokes and fills) can now be edited. 3. Click a blank area of the Stage to deselect the object. 4. Click the blue front hubcap, press and hold [Shift], then click the blue back hubcap so both hubcaps are selected. 5. Set the Fill Color to the light gray color swatch (#999999) in the left column of the color palette. 6. Double-click the g_car symbol icon in the Library panel to display the edit window. 7. Click the maroon front body of the car to select it, press and hold [Shift], then click the maroon back body of the car, as shown in Figure 9. 8. Set the Fill Color to the red gradient color swatch in the bottom row of the color palette. 9. Click Scene 1 at the top left of the edit window, then compare your images to Figure 10. The body color of the car in the original instance is a different color, but the body color of the car to which you applied the Break Apart command remains unchanged. 10. Save your work. You used the Break Apart command to break the link between one instance and its symbol, you edited the object created using the Break Apart command, and then you edited the symbol, which only affected the instance still linked to the symbol. Figures © Cengage Learning 2013 Lesson 1 FLSH_CS6_002_ch03.indd 9 Create Symbols and Instances FLASH 3-9 07/06/12 8:40 PM LESSON 2 Work with LIBRARIES What You’ll Do Figure © Cengage Learning 2013 In this lesson, you will use the Library panel to organize the symbols in a movie. Understanding the Library The library in a Flash document contains the symbols and other items such as imported graphics, movie clips, and sounds. The Library panel provides a way to view and organize the items, and allows you to change the item name, display item properties, and add and delete items. Figure 11 shows the Library panel for a document. Refer to this figure as you read the following descriptions of the parts of the library. Tab title—Identifies the panel title, in this case, the Library panel. Panel options menu— Labeled in Figure 11 and shown in Figure 12, the Panel options menu provides access to several features used to edit symbols (such as renaming symbols) and organize symbols (such as creating a new folder). Display movies list arrow—Opens a menu showing all open movies. You use this menu to select an open document (movie) and display the Library panel associated with that open document. This allows you to use the items from one movie in another movie. For example, you may have developed a drawing FLASH 3-10 FLSH_CS6_002_ch03.indd 10 in one Flash movie that you converted to a symbol and now you want to use that symbol in the movie you are working on. With both documents open, you simply use the Display movies list arrow to display the library with the desired symbol, and then drag the symbol to the Stage of the current movie. This will automatically place the symbol in the library for the current movie. In addition to the movie libraries, you can create permanent libraries that are available whenever you start Flash. Flash also has sample libraries that contain buttons and other objects. The permanent and sample libraries are accessed through the Common Libraries command on the Window menu. All assets in all of these libraries are available for use in any movie. Item Preview window—Displays the selected item. If the item is animated or a sound file, a control button appears, allowing you to preview the animation or play the sound. Name list box—Lists the folder and item names. Each item type has a different icon associated with it. Clicking an item name or icon displays the item in the Item Preview window. Working with Symbols and Interactivity 07/06/12 8:40 PM Toggle Sorting Order icon—Allows you to reorder the list of folders and items within folders. New Folder icon—Allows you to create a new folder. New Symbol icon—Displays the Create New Properties icon—Displays the Properties dialog box for the selected item. Symbol dialog box, allowing you to create a new symbol. or folder. Delete icon—Deletes the selected item Figure 11 The Library panel Tab title Item Preview window To make changes to an item, you can doubleclick either the item icon in the Library panel, the item in the Item Preview window, or the item on the Stage to display the edit window. Figure 12 The Panel options menu Panel options list arrow Display movies list arrow; click to display list of all open Flash movies; click a movie to open Library panel for that movie Toggle Sorting Order icon (position may vary) New Symbol icon New Folder icon Name list box Properties icon Delete icon Figures © Cengage Learning 2013 Lesson 2 Work with Libraries FLSH_CS6_002_ch03.indd 11 FLASH 3-11 07/06/12 8:40 PM Figure 13 The open Library panel Create folders in the Library panel 1. Open fl3_2.fla, then save it as carRace.fla. 2. Verify the Properties panel, the Library panel, and the Tools panel are displayed. 3. Set the magnification to Fit in Window. This movie has eight layers containing various objects such as text blocks, lines, and a backdrop. Two layers contain animations of cars. 4. Test the movie, then close the Flash Player window. 5. Click the Show or Hide All Layers icon on the Timeline to hide all of the layers. 6. Click each red X in the Show or Hide All Layers column to show the contents of each layer, click the Show or Hide This Layer icon to hide the contents of that layer, then after viewing the contents of each layer, click the Show or Hide All Layers icon on the Timeline to show all of the layers. Note: The resetBTN layer shows an empty Stage. This is because the word Reset is located in frame 65 at the end of the movie and does not appear in frame 1. 7. Click each item in the Library panel to display it in the Item Preview window. Notice that there is one button symbol (b_reset) and five graphic symbols. 8. Click Name on the Name list box title bar, as shown in Figure 13, and notice how the items are sorted. 9. Repeat Step 8 and notice how the items are sorted. Click Name to sort the list in alphabetical order by name Your sort order may be different New Folder icon You opened a Flash movie and sorted items in the Library panel. Figure © Cengage Learning 2013 FLASH 3-12 FLSH_CS6_002_ch03.indd 12 Working with Symbols and Interactivity 07/06/12 8:40 PM Figure 14 The Library panel with the folders added Organize items within Library panel folders Buttons folder Graphics folder Figure 15 The Library panel after moving the symbols to the folders Your folders might be expanded 1. Click the New Folder icon in the Library panel, as shown in Figure 13. 2. Type Graphics in the Name text box for the new folder, then press [Enter] (Win) or [return] (Mac). 3. Click the New Folder icon on the Library panel. 4. Type Buttons in the Name text box for the new folder, then press [Enter] (Win) or [return] (Mac). Your Library panel should resemble Figure 14. 5. Drag the g_title symbol in the Library panel to the Graphics folder. 6. Drag the other graphic symbols to the Graphics folder. 7. Drag the b_reset symbol to the Buttons folder, then compare your Library panel to Figure 15. 8. Click the Graphics folder expand icon to open it and display the graphic symbols. 9. Click the Buttons folder expand icon to open it and display the button symbol. 10. Click the Graphics folder collapse icon to close the folder. 11. Click the Buttons folder collapse icon to close the folder. Note: To remove an item from a folder, drag the item down to a blank area of the Library panel. You created new folders, organized the symbols within the folders, and then opened and closed the folders. Figures © Cengage Learning 2013 Lesson 2 Work with Libraries FLSH_CS6_002_ch03.indd 13 FLASH 3-13 07/06/12 8:40 PM Rename symbols and delete a symbol Figure 16 Updated Library panel 1. Click the expand icon for the Graphics folder to display the symbols. 2. Right-click (Win) or [control]-click (Mac) the g_car1 symbol, then click Rename. 3. Type g_redCar in the Name text box, then press [Enter] (Win) or [return] (Mac). 4. Repeat Steps 2 and 3 to rename the g_car2 symbol as g_blueCar. 5. Study the Stage and notice there are two yellow lines, one near the top and the other at the bottom of the Stage. 6. Click g_border in the Library panel to select it. 7. Click the Delete icon at the bottom of the Library panel. 8. Study the Stage and notice the yellow border lines are deleted. Your Library panel should resemble Figure 16. TIP You can also select an item and press [Delete], or you can use the Panel options menu in the Library panel to remove an item from the library. The Undo command in the Edit menu can be used to undelete an item. You used the Library panel to rename symbols and delete a symbol. Figure © Cengage Learning 2013 FLASH 3-14 FLSH_CS6_002_ch03.indd 14 Working with Symbols and Interactivity 07/06/12 8:40 PM Figure 17 The carRace.fla document and the coolCar.fla Library panel The carRace.fla document is the active document Use multiple Library panels The Library panel for the coolCar.fla document Display movies list arrow 1. Click the Display movies list arrow near the top of the Library panel to display a list of open documents. 2. Click coolCar.fla, then click g_car. The Library panel for the coolCar document is displayed. However, the carRace document remains open, as shown in Figure 17. 3. Click frame 1 on the resetBTN layer, then drag the g_car symbol from the Library panel to the center of the Stage. The reset BTN layer is the only unlocked layer. Objects cannot be placed on locked layers. 4. Click the Display movies list arrow to display the open documents. 5. Click carRace.fla to view the carRace document’s Library panel. Notice the g_car symbol is added automatically to the Library panel of the carRace document. 6. Click the g_car symbol in the Library panel. 7. Click the Delete icon at the bottom of the Library panel. You deleted the g_car symbol from the carRace library but it still exists in the coolCar library. The car was also deleted from the Stage. 8. Save your work. 9. Click the coolCar.fla tab at the top of the workspace to display the document. 10. Close the coolCar document and save the document if asked. You used the Library panel to display the contents of another library and added an object from that library to the current document. Figure © Cengage Learning 2013 Lesson 2 Work with Libraries FLSH_CS6_002_ch03.indd 15 FLASH 3-15 07/06/12 8:40 PM LESSON 3 Create BUTTONS What You’ll Do Understanding Buttons Figure © Cengage Learning 2013 Button symbols are used to provide interactivity. When you click a button, an action occurs, such as starting an animation or jumping to another frame on the Timeline. Any object, including Flash drawings, text blocks, and imported graphic images, can be made into buttons. Unlike graphic symbols, buttons have four states: Up, Over, Down, and Hit. These states correspond to the use of the mouse and recognize that the user requires feedback when the mouse is pointing to a button and when the button has been clicked. This is often shown by a change in the button (such as a different color or different shape). An example of a button with different colors for the four different states is shown in Figure 18. These four states are explained in the following paragraphs. In this lesson, you will create a button, edit the four button states, and test a button. Hit—Defines the area of the screen that will respond to the pointer. In most cases, you will want the Hit state to be the same or similar to the Up state in location and size. When you create a button symbol, Flash automatically creates a new Timeline. The Timeline has only four frames, one for each button state. The Timeline does not play; it merely reacts to the mouse pointer by displaying the appropriate button state. The process for creating and previewing buttons is as follows: Create a button symbol—Draw an object or select an object that has already been created and placed on the Stage. Use the Convert to Figure 18 The four button states Up—Represents how the button appears when the mouse pointer is not over it. Over—Represents how the button appears when the mouse pointer is over it. Down—Represents how the button appears Up Over Down Hit after the user clicks the mouse. Figure © Cengage Learning 2013 FLASH 3-16 FLSH_CS6_002_ch03.indd 16 Working with Symbols and Interactivity 07/06/12 8:40 PM Symbol command on the Modify menu to convert the object to a button symbol and to enter a name for the button. Edit the button symbol—Select the button and choose the Edit Symbols command on the Edit menu or double-click the button symbol in the Library panel. This displays the edit window, which includes the button Timeline, shown in Figure 19. You use the button Timeline to work with the four button states. The Up state is the original button symbol. Flash automatically places it in frame 1. You need to determine how the original object will change for the other states. To change the button for the Over state, click frame 2 and insert a keyframe. This automatically places a copy of the button that is in frame 1 into frame 2. Then, alter the button’s appearance for the Over state, for instance, by changing the fill color. Use the same process for the Down state. For the Hit state, you insert a keyframe in frame 4 and then specify the area on the screen that will respond to the pointer. If you do not specify a hit area, the image for the Down state is used for the hit area. You add a keyframe to the Hit frame only if you are going to specify the hit area. Return to the main Timeline—Once you’ve finished editing a button, you choose the Edit Document command on the Edit menu or click Scene 1 above the edit window to return to the main Timeline. Preview the button—By default, Flash disables buttons so that you can manipulate them on the Stage. You can preview a button by choosing the Enable Simple Buttons command on the Control menu. You can also choose the Test Movie command on the Control menu to play the movie and test the buttons. Figure 19 The edit window showing the button symbol and the button Timeline The Up state of the button symbol Figure © Cengage Learning 2013 Lesson 3 Create Buttons FLSH_CS6_002_ch03.indd 17 FLASH 3-17 07/06/12 8:40 PM Figure 20 The rectangle object Create a button 1. Insert a new layer above the top layer on the Timeline, then name the layer signal. 2. Select the Rectangle Primitive tool , then set the Stroke Color to No Stroke. TIP The No Stroke icon the color palette. Rectangle object is in the upper-right corner of 3. Set the Fill Color to the red gradient color swatch in the bottom row of the color palette. 4. Display the Properties panel, click the Reset button in the RECTANGLE OPTIONS area, then set the corner radius to 5. 5. Draw the rectangle shown in Figure 20. 6. Click the Zoom tool on the Tools panel, then click the rectangle to enlarge it. 7. Select the Gradient Transform tool on the Tools panel. TIP You may need to click and hold the Free Transform tool first. 8. Click the rectangle, then drag the diagonal arrow toward the center of the rectangle as shown in Figure 21 to make the red area more round. 9. Click the Selection tool on the Tools panel, then drag a marquee around the rectangle to select it. 10. Click Modify on the menu bar, then click Convert to Symbol. 11. Type b_signal in the Name text box, click the Type list arrow, click Button, then click OK. 12. Display the Library panel, then drag the b_signal symbol to the Buttons folder. You created a button symbol on the Stage and dragged it to the Buttons folder in the Library panel. FLASH 3-18 FLSH_CS6_002_ch03.indd 18 Figure 21 Adjusting the gradient Center circle indicates round red area Drag the diagonal arrow from the outside ring toward the center of the rectangle Figures © Cengage Learning 2013 Working with Symbols and Interactivity 07/06/12 8:40 PM Figure 22 Specifying the hit area Edit a button and specify a hit area 1. Open the Buttons folder, right-click (Win) or control-click (Mac) b_signal in the Library panel, then click Edit. Flash displays the edit window showing the Timeline with four button states. 2. Click the blank Over frame on Layer 1, then insert a keyframe. TIP The [F6] key inserts a keyframe in the selected frame. The [fn] key may need to be used with some Mac keyboards. Blue rectangle represents hit area 3. Set the Fill Color to the gray gradient color swatch on the bottom of the color palette. TIP If the gradient is not selected, try clicking the edge of the gradient swatch rather than the middle. 4. Insert a keyframe in the Down frame on Layer 1. 5. Set the Fill Color to the green gradient color swatch on the bottom of the color palette. 6. Insert a keyframe in the Hit frame on Layer 1. 7. Select the Rectangle tool on the Tools panel then set the Fill Color to the blue color swatch in the left column of the color palette. 8. Draw a rectangle slightly larger than the button as shown in Figure 22, then release the mouse button. TIP The Hit area will not be visible on the Stage when you return to the main Timeline. 9. Click Scene 1 above the edit window to return to the main Timeline. You edited a button by changing the color of its Over and Down states, and you specified the Hit area. Figure © Cengage Learning 2013 Lesson 3 Create Buttons FLSH_CS6_002_ch03.indd 19 FLASH 3-19 07/06/12 8:40 PM Test a button Figure 23 The button’s Over state Figure 24 The button’s Down state 1. Click the Selection tool , then click a blank area of the Stage. 2. Click Control on the menu bar to display the Control menu, then click Enable Simple Buttons if it is not already checked. This command allows you to test buttons on the Stage without viewing the movie in the Flash Player window. 3. Point to the signal button on the Stage, then compare your image to Figure 23. The pointer changes to a hand , indicating that the object is clickable, and the button changes to a gray gradient, the color you selected for the Over state. 4. Press and hold the mouse button, then notice that the button changes to a green gradient, the color you selected for the Down state, as shown in Figure 24. 5. Release the mouse and notice that the button changes to a gray gradient, the color you selected for the Over state. (continued) The Button Hit Area All buttons have an area that responds to the mouse pointer, including rolling over the button and clicking it. This hit area is usually the same size and shape as the button itself. However, you can specify any area of the button to be the hit area. For example, you could have a button symbol that looks like a target with just the bulls-eye center being the hit area. Figures © Cengage Learning 2013 FLASH 3-20 FLSH_CS6_002_ch03.indd 20 Working with Symbols and Interactivity 07/06/12 8:40 PM Figure 25 The button’s Up state 6. Move the mouse away from the signal button, and notice that the button returns to a red gradient, the Up state color, as shown in Figure 25. 7. Click Control on the menu bar, then click Enable Simple Buttons to turn off the command. 8. Click the View list arrow above the Stage, then click Fit in Window, as shown in Figure 26. This shortcut allows you to change the magnification view without using the Magnification command on the View menu or the Zoom tool in the Tools panel. 9. Save your work. You used the mouse to test a button and view the button states. Figure 26 View options from the View list View options for the Stage Figures © Cengage Learning 2013 Lesson 3 Create Buttons FLSH_CS6_002_ch03.indd 21 FLASH 3-21 07/06/12 8:40 PM LESSON 4 Assign Actions TO FRAMES AND BUTTONS What You’ll Do Figure © Cengage Learning 2013 In this lesson, you will use ActionScript to assign actions to frames and buttons. Understanding Actions In a basic movie, Flash plays the frames sequentially without stopping for user input. However, you often want to provide users with the ability to interact with the movie by allowing them to perform actions, such as starting and stopping the movie or jumping to a specific frame in the movie. One way to provide user interaction is to assign an action to the Down state of a button. Then, whenever the user clicks the button, the action occurs. Flash provides a scripting language, called ActionScript, that allows you to add actions to buttons and frames within a movie. For example, you can place a stop action in a frame that pauses the movie, and then you can assign a play action to a button that starts the movie when the user clicks the button. Analyzing ActionScript ActionScript, which is a powerful scripting language, allows those with even limited programming experience to create complex actions. For example, you can create order forms that capture user input or volume controls that display when sounds are played. A basic ActionScript involves an event (such FLASH 3-22 FLSH_CS6_002_ch03.indd 22 as a mouse click) that causes some action to occur by triggering the script. The following is an example of a basic ActionScript: on (release) { gotoAndPlay(10); } In this example, the event is a mouse click (indicated by the word release) that causes the movie’s playhead to go to frame 10 and play the frame. This is a simple example of ActionScript code and it is easy to follow. Other ActionScript code can be quite complex and may require programming expertise to understand. ActionScript 2.0 and 3.0 Adobe has identified two types of Flash CS6 users, designers and developers. Designers focus more on the visual features of a Flash movie, including the user interface design, drawing objects, and acquiring and editing additional assets (such as graphic images). Whereas, developers focus more on the programming aspects of a Flash movie, including creation of complex animations and writing the code that specifies how the movie responds Working with Symbols and Interactivity 07/06/12 8:40 PM to user interactions. In many cases, designers and developers work together to create sophisticated Flash applications. In other cases, designers work without the benefit of a developer’s programming expertise. In order to accommodate the varying needs of these two types of users, Flash CS6 provides two versions of ActionScript, 2.0 and 3.0, called AS2 and AS3. ActionScript 3.0 is used by developers because it provides a programming environment that is more familiar to them and can be used to create movies that download more quickly. However, the differences between AS2 and AS3 are transparent to designers who do not have programming expertise. AS2 allows new Flash users to create compelling applications even if they do not have a background in programming. At the same time, AS2 provides an introduction to ActionScript that can be the basis for learning ActionScript 3.0. ActionScript 2.0 will be used in this chapter. You can specify ActionScript 2.0 when creating a new document or you can use the Flash tab in the Publish Settings dialog box, which can be opened using the Publish Settings command found on the File menu, to specify AS2. An advantage of using AS2 is a feature called Script Assist, which provides an easy way to use ActionScript without having to learn the scripting language. The Script Assist feature within the Actions panel allows you to assign basic actions to frames and objects, such as buttons. Figure 27 shows the Actions panel displaying an ActionScript indicating that when the user clicks the selected object (a button, in this example, b_signal), the movie goes to and plays frame 2. Figure 27 The Actions panel displaying an ActionScript Event on (release) Script Assist active Action gotoAndPlay(2) Action assigned to this button symbol Figure © Cengage Learning 2013 Lesson 4 Assign Actions to Frames and Buttons FLSH_CS6_002_ch03.indd 23 FLASH 3-23 07/06/12 8:40 PM The process for assigning actions to buttons, shown in Figure 28, is as follows: 1. Select the button on the Stage that you want to assign an action to. 2. Display the Actions panel, using the Window menu. 3. Click the Script Assist button to display the Script Assist panel within the ActionScript panel, and verify the button symbol and name appear in the lower-left corner of the Actions panel. 4. Click the Add a new item to the script button to display a list of Script categories and associated menus. 5. Click the appropriate category from a menu. Flash provides several categories, such as the Timeline Control category accessed via the Global Functions menu. You can use the actions available via the Timeline Control menu to start and stop movies, as well as jump to (goto) specific frames. These can be in response to user mouse movements and keystrokes. ■ Select the desired action, such as goto. ■ Specify the event that triggers the action, such as on (release). This step in the process is not shown in Figure 28. Button actions respond to one or more mouse events, including: Release—With the pointer inside the button Hit area, the user presses and releases (clicks) the mouse button. This is the default event. Key Press—With the button displayed, the user presses a predetermined key on the keyboard. Roll Over—The user moves the pointer into the button Hit area. Drag Over—The user holds down the mouse button, moves the pointer out of the button Hit area, and then back into the Hit area. Using Frame Actions In addition to assigning actions to buttons, you can assign actions to frames. Actions assigned to frames are executed when the playhead reaches the frame. A common frame action is stop, which is often assigned to the first and last frame of a layer on the Timeline. Figure 28 The process for assigning actions to buttons 1. Select the button 2. Display the Actions panel 3. Click the Script Assist button to toggle between on (seen here) and off 4. Click the “Add a new item to the script” button Hide/Display arrow, click at any time and as needed to hide or display the Toolbox pane 5. Select the Script category, the Actions category, and the action Script categories FLASH 3-24 FLSH_CS6_002_ch03.indd 24 Actions categories available in the selected Script category Actions available in the selected Actions category Figure © Cengage Learning 2013 Working with Symbols and Interactivity 07/06/12 8:40 PM Understanding the Actions Panel The Actions panel has two panes. The left pane (also called the Toolbox pane) uses folders to display the Script categories. The right pane, called the Script pane, is used with the Script Assist feature and it displays the ActionScript code as the code is being generated. When using the Script Assist feature, it is best to close the left pane. This is done by clicking the Hide/Display arrow, which is shown in Figure 28 and Figure 29. In Figure 28, the Toolbox pane is collapsed, and in Figure 29, the Toolbox pane is expanded. The lower-left corner of the Script pane displays the symbol name or the frame to which the action(s) will apply. Always verify that the desired symbol or frame is displayed. When the Script Assist feature is turned off (not active), you can type ActionScript code directly into the Script pane. Using Frame Labels Buttons are often used to move the playhead to a specific location on the Timeline. For example, clicking a Start button might cause the playhead to jump from frame 1 to frame 10 to start an animation. In addition to referencing Figure 29 The Actions panel Toolbox pane Figures © Cengage Learning 2013 Hide/Display arrow for the Toolbox pane Lesson 4 Assign Actions to Frames and Buttons FLSH_CS6_002_ch03.indd 25 frame numbers, like 10, you can reference frame labels in the ActionScript code. Frame labels have an advantage over frame numbers, especially in large and complex applications, because adding or deleting frames will not disrupt the navigation to a frame reference you already have in actions because the label remains attached to the frame even if the frame moves. The process is to select a frame and use the Properties panel to specify a name. Then use the frame name in the ActionScript code instead of the frame number. Figure 30 shows the Timeline with a frame label and the Actions panel with the code that references the label. Figure 30 The Timeline with a frame label Button that the code will be applied to Script Assist off Frame label “StartRace” in frame 2 Code that references the frame label Script Assist on FLASH 3-25 07/06/12 8:40 PM Figure 31 The Actions panel Toolbox pane Assign a stop action to frames 1. Click Control on the menu bar, point to Test Movie, then click in Flash Professional. The movie plays and continues to loop. 2. Close the Flash Player window. 3. Insert a new layer, name it stopMovie, then click frame 1 on the layer to select the frame. 4. Click Window on the menu bar, then click Actions to display the Actions panel. 5. Study the Actions panel. If the Toolbox pane is displayed as shown in Figure 31, then click the Hide/Display arrow to hide the pane. 6. Click the Script Assist button to turn on the Script Assist feature if Script Assist is not active. 7. Verify stopMovie:1 (indicating the layer and frame to which the action will be applied) is displayed in the lower-left corner of the Script pane. 8. Click the Add a new item to the script button to display the Script categories, point to Global Functions, point to Timeline Control, then click stop, as shown in Figure 32. 9. Insert a keyframe in frame 65 on the stopMovie layer, then open the Actions panel if it is no longer open. TIP You can collapse the Actions panel to view more of the Stage, then expand the Actions panel when needed. Alternately, you can drag the bottom or sides of the Actions panel up to make the panel smaller. Hide/Display arrow for the Toolbox pane Figure 32 Assigning an action to frame 1 on the stopMovie layer Script Assist on (continued) Figures © Cengage Learning 2013 FLASH 3-26 FLSH_CS6_002_ch03.indd 26 Working with Symbols and Interactivity 07/06/12 8:40 PM Figure 33 Script for the stopMovie layer 10. Verify stopMovie: 65 is displayed in the lower-left corner of the Script pane, then repeat Step 8. Compare your screen to Figure 33. 11. Test the movie. The movie does not play because there is a stop action assigned to frame 1. 12. Close the Flash Player window. Action stop() You inserted a layer and assigned a stop action to the first and last frames on the layer. Assign a play action to a button Action assigned to frame 65 of the stopMovie layer Figure 34 Assigning an event and an action to a button Action assigned to the button named b_signal Figures © Cengage Learning 2013 Lesson 4 Assign Actions to Frames and Buttons FLSH_CS6_002_ch03.indd 27 1. Click frame 1 on the signal layer. 2. Move the Actions panel to view the signal button on the Stage, if necessary. 3. Click the Selection tool on the Tools panel, then click the button on the Stage. 4. Verify b_signal is displayed in the lower left of the Actions panel. This ensures that the actions specified in the Actions panel will apply to the b_signal button. 5. Click to display the Script categories, point to Global Functions, point to Timeline Control, then click play. Release is the default event for a button, as shown in Figure 34. The “play” action causes the playhead to move to the next frame. To jump to a specific frame, the “goto” action and frame number would be used. 6. Click Control on the menu bar, point to Test Movie, then click in Flash Professional. 7. Click the signal button to play the animation. 8. Close the Flash Player window. You used the Actions panel to assign a play action to a button. FLASH 3-27 07/06/12 8:40 PM Assign a goto frame action to a button 1. Click Control on the menu bar, point to Test Movie, then click in Flash Professional. 2. Click the signal button. The movie plays and stops, and the word Reset, which is actually a button, appears. 3. Click the Reset button and notice nothing happens because it does not have an action assigned to it. 4. Close the Flash Player window. 5. Click frame 65 on the resetBTN layer to display the Reset button on the Stage. Note: You many need to close and/or move the Actions panel to view the Reset button on the Stage. 6. Click the Reset button on the Stage to select it. 7. Verify b_reset is displayed in the lower left of the Actions panel. 8. Verify Script Assist in the Actions panel is active , click , point to Global Functions, point to Timeline Control, click goto, then verify Frame 1 is specified, as shown in Figure 35. 9. Click Control on the menu bar, point to Test Movie, then click in Flash Professional. 10. Click the signal button to start the movie, then when the movie stops, click the Reset button. The goto action you assigned to the Reset button causes the playhead to jump to frame 1, the beginning of the movie. 11. Close the Flash Player window. Figure 35 Assigning a goto action to a button Frame 1 specified; you can type a frame number if the autofill number is not the frame you want Script Assist active Event on (release) Action gotoAndPlay(1) Global Functions: Timeline Control and Movie Clip Control The most common actions for including interactivity in a movie when using ActionScript 2.0 are added using the Global Functions categories Timeline Control and Movie Clip Control. Timeline Control actions focus on controlling the playhead (play, stop), jumping to a specific frame (goto), and stopping sounds (stopAllSounds). These actions are generally assigned to buttons. Movie Clip Control actions focus on manipulating movie clips (startDrag, stopDrag, removeMovieClip, and so on). They also provide mouse (on Release) and keyboard (Key Press) actions that can be assigned to buttons. You used the Actions panel to assign an action to a button. Figure © Cengage Learning 2013 FLASH 3-28 FLSH_CS6_002_ch03.indd 28 Working with Symbols and Interactivity 07/06/12 8:40 PM Figure 36 Assigning a keyPress action to a button Assign a second event to a button 1. Click the right curly brace (}) in the Actions panel to highlight the brace in line 3 of the ActionScript. 2. Click , point to Global Functions, point to Movie Clip Control, then click on. The Script Assist window displays several event options. Release is selected. 3. Click the Release check box to deselect the option. 4. Click the Key Press check box to select it, then press the [Home] key on the keyboard. TIP If your keyboard does not have a [Home] key, use [fn]+[←] (Mac) or a letter, such as r, to complete the steps. Action gotoAndPlay(1) Event on (keyPress “”) keyPress Events Not all keys on a keyboard can be used for keyPress events. In addition, some keys such as [Home] will only work when the movie is played in a browser and not when the movie is played in the Flash Player window. You may need to use another key such as r or h which will work in a browser or the Flash Player window. Test your movie to make sure the keyPress events work for the intended playback system. 5. Click , point to Global Functions, point to Timeline Control, then click goto. The ActionScript now indicates that pressing the [Home] key will cause the playhead to go to frame 1, as shown in Figure 36. The Reset button can now be activated by clicking it or by pressing the [Home] key. 6. Click File on the menu bar, point to Publish Preview, then click Default – (HTML). The movie opens in your default browser. Note: If a warning message opens, follow the messages to allow blocked content. 7. Click the signal button to start the movie, then when the movie stops, press the [Home] key. TIP Use the key(s) you assigned to the keypress event if it is different from the Home key. 8. Close the browser window, close the Actions panel, then save and close the movie. Figure © Cengage Learning 2013 Lesson 4 Assign Actions to Frames and Buttons FLSH_CS6_002_ch03.indd 29 You added a keypress event that triggers a goto frame action. FLASH 3-29 07/06/12 8:40 PM LESSON 5 Import GRAPHICS What You’ll Do Understanding Graphic Types Vector graphics represent an image as a Flash provides excellent drawing tools, which allow you to create various objects that can be changed into symbols. In addition, you can import graphics and other assets, such as photographs and sounds. There are two types of graphic files, bitmap graphics and vector graphics. They are distinguished by the way in which the image is represented. geometric shape made up of lines and arcs that are combined to create various shapes, such as circles and rectangles. This is similar to Flash drawings that include strokes and fills. Flash drawing tools create vector graphics. One advantage of vector graphics is that they can be resized without distorting the image. The reason is that the geometric shapes are based on mathematical models that are recalculated when the image is resized. Figure 38 shows an example of a vector graphic before and after resizing. Vector graphics are best used for drawings rather than for images requiring photographic quality. Bitmap images are made up of a group of tiny dots of color called pixels (picture Photo courtesy of J. Shuman In this lesson, you will import and work with bitmap and vector graphics. FLASH 3-30 FLSH_CS6_002_ch03.indd 30 elements). Bitmap graphics are often used with photographic images because they can represent subtle gradients in color. However, one disadvantage of bitmap graphics is the inability to enlarge the graphic without distorting the image. This is because both the computer screen’s resolution (pixels per inch) and the number of pixels making up the image are a fixed number. So, when you enlarge an image each pixel must increase in size to fill the larger image dimensions. This causes the pixels to display jagged edges, as shown in Figure 37. There are several programs that allow you to create and edit graphics including Adobe Illustrator, Fireworks, and Photoshop. There are also clip art and stock photograph collections that are available online. Filename extensions identify the file type. For example, .jpg, .tif, .png, and .gif are file formats for bitmap graphics; while .ai is a vector file format. Working with Symbols and Interactivity 07/06/12 8:40 PM Importing and Editing Graphics Once you have identified the graphic you would like to include in a Flash document, you can use the Import feature to bring the graphic into Flash. The process for importing is to select Figure 37 Bitmap graphic enlarged the Import command from the File menu and specify where to import (Stage or Library). Then you navigate to the location where the file is stored and select it. After importing a vector graphic you can work with it as you would any graphic. Because bitmap graphics are not easy to edit in Flash, you may want to use another program, such as Photoshop, to obtain the desired size, color, and other enhancements before importing the graphic. Figure 38 Vector graphic enlarged Photo courtesy of J. Shuman Figure © Cengage Learning 2013 Lesson 5 Import Graphics FLSH_CS6_002_ch03.indd 31 FLASH 3-31 07/06/12 8:40 PM Import graphics Figure 39 Positioning the sailboat image on the Stage Photo courtesy of J. Shuman 1. Start a new Flash document, then save it as sailing.fla. 2. Click File on the menu bar, point to Import, then click Import to Library. The Preparing to import process make take a few moments. 3. Navigate to the folder where your Data Files are stored, click islandview.jpg, then click Open. Islandview.jpg is a digital photo that was edited in Photoshop and saved as a .jpg file. 4. Display the Library panel and notice the icon used for bitmap graphics. 5. Drag the islandview icon to the Stage, then lock the layer. 6. Click File on the menu bar, point to Import, then click Import to Library. 7. Navigate to the folder where your Data Files are stored, then click sailboat.ai. This graphic was created using Adobe Illustrator and is made up of several layers. 8. Click Open. A dialog box appears asking you to choose the layers to import. All layers are selected by default. 9. Click OK. The graphic is added to the Library panel as a symbol. 10. Add a new layer to the Timeline, click frame 1 on the layer, then drag the sailboat icon to the Stage, as shown in Figure 39. (continued) FLASH 3-32 FLSH_CS6_002_ch03.indd 32 Vector graphic of a sailboat Bitmap graphic of a sailboat Symbol identifies this object as a bitmap graphic Working with Symbols and Interactivity 07/06/12 8:40 PM Figure 40 Changing the color of the sail Photo courtesy of J. Shuman Figure 41 Rotating and skewing the sailboat image Photo courtesy of J. Shuman 11. Click Modify on the menu bar, click Break apart, then repeat this step until the dotted pattern that indicates the image is no longer a symbol appears. 12. Click the Selection tool , then click a blank area of the Pasteboard. 13. Click the left sail, set the Fill color icon to the rainbow pattern to change the sail color, as shown in Figure 40. Hint: The rainbow color is found at the bottom of the palette for the Fill Color tool. 14. Use the Selection tool to drag a marquee around the entire sailboat to select it, then convert the image to a graphic symbol named g_rainbowSail. 15. Display the Properties panel, verify the Lock icon is not broken, then change the width of the boat to 60. 16. Click the Zoom tool on the Tools panel, click the sailboat twice, then scroll as needed to view each sailboat. Notice how the bitmap photograph becomes distorted, while the vector sailboat does not. 17. Change the view to Fit in Window, click the , then click the sailboat Selection tool with the rainbow sail. 18. Click the Free Transform tool , click the Rotate and Skew option , skew the sailboat to the left, verify the Lock icon is not broken, change the width to 50, then position the sailboat as shown in Figure 41. 19. Test the movie, close the Flash Player window, then save your work and exit Flash. You imported a bitmap and a vector graphic, and edited the vector graphic. Lesson 5 Import Graphics FLSH_CS6_002_ch03.indd 33 FLASH 3-33 07/06/12 8:40 PM SKILLS REVIEW Create a symbol. 1. Start Flash, open fl3_3.fla, then save it as skillsDemo3.fla. This document consists of a single object that was created using the Flash drawing tools. 2. Use the Selection tool to drag a marquee around the ball to select it. 3. Convert the ball to a graphic symbol with the name g_beachBall. 4. Double-click the g_beachBall symbol on the Library panel to open the edit window, change the fill color to a rainbow gradient, add a text block that sits on top of the ball with the words BEACH BALL (see Figure 42), formated with white, Times New Roman, 12-pt, bold, then click Scene 1 to return to the main Timeline. 5. With the ball selected, create a motion tween animation that moves the ball from the left edge of the Stage to the right edge of the Stage. 6. Use the Selection tool to drag the middle of the motion path up to near the middle of the Stage to create an arc. 7. Select the last frame of the animation on the Timeline and set Rotate to 1 time in the Rotation area of the Properties panel. 8. Play the movie. The ball should move across the Stage in an arc and spin at the same time. 9. Lock the beachBall spin layer. Create and edit an instance. 1. Insert a new layer and name it blueBall. 2. Click frame 1 on the blueBall layer, then drag the g_beachBall symbol from the Library panel so it is on top of the ball on the Stage. FLASH 3-34 FLSH_CS6_002_ch03.indd 34 3. Use the arrow keys as needed to align the ball so that it covers the ball on the Stage. 4. Click the Selection tool, click the ball to select it, and break apart the object. 5. Change the fill color of the ball to a blue gradient and change the text to BLUE BALL. 6. Insert a new layer and name it greenBall. 7. Click frame 12 on the greenBall layer, then insert a keyframe. 8. Drag the g_beachBall symbol from the Library panel so it is on top of the ball that is near the middle of the Stage. (Note: Align only the balls, not the text.) 9. With the ball selected, break apart the object and change the fill color of the ball to a green gradient and the text to GREEN BALL. 10. Move the beachBall spin layer to above the other layers. 11. Insert a new layer and name it title. 12. Click frame 1 on the title layer, create a text block at the top middle of the Stage with the words BeachBall Spin using Arial as the font, blue as the color, and 20-pt as the font size, then center the text block horizontally on the Stage. 13. Insert a new layer above the title layer and name it titleBkgnd. 14. Draw a primitive rectangle with a corner radius of 10, a medium gray fill (#999999) and no stroke that covers the BeachBall Spin title text. 15. Verify the rectangle is selected, convert it to a graphic symbol, then name it g_Bkgnd. 16. Move the title layer so it is above the titleBkgnd layer. 17. Play the movie, then save your work. Work with libraries. 1. Click the New Folder button at the bottom of the Library panel to create a new folder. 2. Name the folder Graphics, then move the two graphic symbols to the Graphics folder. 3. Expand the Graphics folder. 4. Rename the g_Bkgnd symbol to g_titleBkgnd in the Library panel. 5. Save your work. Create a button. 1. Insert a new layer above the title layer and name it startButton. 2. Click frame 1 of the new layer. 3. Create a text block with the word Start formatted with white, bold, 20-pt Arial, then center the text block horizontally near the bottom of the Stage. 4. Select the text. (Hint: Drag a marquee around the object.) 5. Convert the selected object to a button symbol and name it b_start. 6. Create a new folder named Buttons in the Library panel and move the b_start button symbol to the folder. 7. Open the Buttons folder, then display the edit window for the b_start button. 8. Insert a keyframe in the Over frame. 9. Select the text and change the color to a lighter shade of gray than the background rectangle. 10. Insert a keyframe in the Down frame. 11. Select the text and change the color to blue. 12. Insert a keyframe in the Hit frame. Working with Symbols and Interactivity 07/06/12 8:40 PM SKILLS REVIEW (CONTINUED) 13. Draw a rectangular object that covers the button area for the Hit state. 14. Click Scene 1 to exit the edit window and return to the main Timeline. 15. Save your work. Test a button. 1. Click Control on the menu bar, then click Enable Simple Buttons to turn on Enable Simple Buttons. 2. Point to the button and notice the color change. 3. Click the button and notice the other color change. 4. Turn off Enable Simple Buttons. Import a graphic. 1. Import BeachScene.jpg from the drive and folder where your Data Files are stored to the Library panel. 2. Insert a new layer and name the layer backDrop. 3. Select frame 1 on the backDrop layer, then drag the BeachScene image to the Stage. 4. Convert the BeachScene image to a graphic symbol with the name g_beachScene. 5. Move the backDrop layer to the bottom of the Timeline. 6. Move the graphic symbols to the Graphics folder in the Library panel. 7. Test the movie, then compare your image to Figure 42. 8. Close the Flash Player window, then save your work. 9. Exit Flash. Figure 42 Completed Skills Review Stop a movie by assigning an action to a frame. 1. 2. 3. 4. 5. 6. 7. Insert a new layer and name it stopMovie. Insert a keyframe in frame 24 on the new layer. With frame 24 selected, display the Actions panel. Assign a stop action to the frame. Click frame 1 on the stopMovie layer. Assign a stop action to frame 1. Save your work. Assign a goto action to a button. 1. Use the Selection tool to select the Start button on the Stage. 2. Use Script Assist in the Actions panel to assign an event and a goto action to the button. (Hint: Refer to the section on assigning a goto action as needed.) 3. Test the movie. Figure © Cengage Learning 2013 Working with Symbols and Interactivity FLSH_CS6_002_ch03.indd 35 FLASH 3-35 07/06/12 8:40 PM PROJECT BUILDER 1 The Ultimate Tours travel company has asked you to design a sample navigation scheme for its application. The company wants to see how its opening screen will link with one of its main categories (Treks). Figure 43 shows a sample opening screen and Treks screen. Using the figures or the opening screen you created in Chapter 2 as a guide, you will add a Treks screen and link it to the opening screen (Hint: Assume that all of the drawings on the opening screen are on frame 1, unless noted.) 1. Open ultimateTours2.fla (the file you created in Chapter 2 Project Builder 1), then save it as ultimateTours3.fla. (Note: If you create a new file, you must create an ActionScript 2.0 file. You can check the ActionScript version by selecting Publish Settings from the File menu and clicking the Flash tab.) 2. Insert a layer above the subheading layer and name it logo. 3. Import the UTLogo.png file from the drive and folder where your Data Files are stored to the Library panel. 4. Select frame 1 on the logo layer, then drag the logo image to the lower-right corner of the Stage. FLASH 3-36 FLSH_CS6_002_ch03.indd 36 5. Select the logo and convert it to a graphic symbol with the name g_UTLogo. 6. Set the last frame of the movie by inserting a keyframe on a frame on the Logo layer at least five frames farther along the Timeline, then lock the logo layer. (Note: You see the logo because the keyframe you inserted on the last frame of the movie ensures everything on this layer appears on this last frame.) 7. Select the layer that the Ultimate Tours text block is on, then insert a keyframe on the last frame of the movie. (Hint: This should be the same frame number as the frame you set as the last frame of the movie in Step 6. Note: You see the logo and the heading Ultimate Tours because the keyframe you inserted on the last frame of the movie ensures everything on this layer appears on this last frame.) 8. Insert a new layer, name it treks headings, insert a keyframe on the last frame of the movie, then create the Treks screen shown in Figure 43, except for the home button. 9. Convert the Treks graphic on the opening screen to a button symbol named b_treks, then edit the symbol so that different colors appear for the different states and be sure to set a hit area. 10. Assign a goto action to the Treks button that jumps the playhead to the Treks screen when the Treks button is clicked. (Hint : You can jump to the Treks screen by typing the frame number for the screen in the Actions panel. See Figure 35.) 11. Insert a new layer and name it stopMovie. Add stop actions that cause the movie to stop after displaying the opening screen and after displaying the Treks screen. Make sure there is a keyframe in the last frame of the stopMovie layer. 12. Insert a new layer and name it homeButton, insert a keyframe on the last frame of the movie, then draw the home button image with the Home text. 13. Convert the image to a button symbol named b_home, then edit the symbol so that different colors appear for the different states. Assign a goto action for the Home button that jumps the movie to frame 1. 14. Test the movie. 15. Save your work, then compare your screens to the samples shown in Figure 43. Working with Symbols and Interactivity 07/06/12 8:40 PM PROJECT BUILDER 1 (CONTINUED) Figure 43 Sample completed Project Builder 1 Opening screen Convert to a button symbol Treks screen Convert to a button symbol Figure © Cengage Learning 2013 Working with Symbols and Interactivity FLSH_CS6_002_ch03.indd 37 FLASH 3-37 07/06/12 8:40 PM PROJECT BUILDER 2 You have been asked to assist the International Student Association (ISA). The association sponsors a series of monthly events, each focusing on a different culture from around the world. The events are led by a guest speaker who makes a presentation, followed by a discussion. The events are free and they are open to everyone. ISA would like you to design a Flash movie that will be used with its website and on its mobile app. The movie starts by providing information about the series, and then provides links to the upcoming event and to a schedule. Refer to Figure 44 as you create the Flash movie. Depending on the font you choose, your screen may not appear exactly the same as Figure 44. (Hint: Keep the following in mind as you complete this project: ■ ■ ■ Insert a blank keyframe in a frame on a layer when you do not want the text or objects from the previous frame to appear in the frame where you are inserting a blank keyframe. Use the align panel and the rulers to help place objects, such as the buttons on the page, in the same location from screen to screen. If copying an object you can use the Paste in Place command to have the object copied to the exact location it was selected from. Remember to break apart a button to change its name, then select the object and convert the updated object to a new button with a new name.) FLASH 3-38 FLSH_CS6_002_ch03.indd 38 1. Open a new Flash ActionScript 2.0 document and save it as isa3.fla. 2. Change the Stage size to width: 320 and height: 480. (Note: There will be three screens with each screen being on a separate frame. Frame 1 will display the opening screen; frame 2 will display the Next Event screen; and frame 3 will display the Schedule screen.) 3. Draw a border that surrounds the stage. (Hint: Use the rectangle tool, select the “no color” color swatch in the color palette, then use the stroke color of your choice. Set the border stroke to at least 2.) 4. On another layer create the heading and subheading (top two lines) that will appear on all three screens. Be sure to add a keyframe in the last frame on this layer of the movie so that the heading and subheading appear on every frame of the movie. (Note: The last frame will be frame 3.) 5. On another layer add the text to the opening screen in frame 1. (Hint: After adding the text in frame 1, be sure to insert a blank keyframe in frame 2 of the new layer. To add a blank keyframe, select the desired frame, click Insert on the menu, point to Timeline, and then click Blank Keyframe. You add a blank keyframe in frame 2 so that the text you added in frame 1 will not appear in frame 2.) 6. Create the Next Event screen in frame 2 by adding a layer and entering the title (Next Event) and the text for the screen. (Hint: Be sure to insert a keyframe in frame 2 of the new layer and a blank keyframe in frame 3 of that same layer.) 7. Create the Schedule screen in frame 3 by adding a layer and entering the title (Schedule) and the text 8. 9. 10. 11. 12. 13. 14. 15. 16. for the screen. (Hint: Be sure to insert a keyframe in frame 3 of the new layer.) Insert a layer and create a Next Event button with the name b_nextEvent on the opening screen that jumps the movie to the Next Event screen. Create a Schedule button with the name b_schedule on another layer that jumps the movie to the Schedule screen. For each button you create, specify different colors for each state of the button. Insert another layer and on the Next Event screen, create a Home button with the name b_home, that jumps the movie back to the opening screen. Be sure to specify different colors for each state when you create the Home button. Copy an instance of the Home button you created in Step 6 to the Schedule screen. (Hint: You can select the button with the Selection tool, select Copy from the Edit menu, display the Schedule screen and select Copy in Place from the Edit menu.) On the Next Event screen, copy an instance of the Schedule button you created in Step 5 that jumps the movie to the Schedule screen. On the Schedule screen, copy an instance of the Next Event button you created in Step 5 that jumps the movie to the Next Event screen. Insert a layer and add an action to each frame on that layer that stops the movie on that frame. Rename all of the layers using appropriate names. Test the movie. Save your work, then compare your movie to the sample shown in Figure 44. Working with Symbols and Interactivity 07/06/12 8:40 PM PROJECT BUILDER 2 (CONTINUED) Figure 44 Sample completed Project Builder 2 Sample general information screen Sample next event screen Sample series screen Figure © Cengage Learning 2013 Working with Symbols and Interactivity FLSH_CS6_002_ch03.indd 39 FLASH 3-39 07/06/12 8:40 PM DESIGN PROJECT Figure 45 shows the home page of a website. Study the figure and complete the following questions. For each question, indicate how you determined your answer. Figure 45 Design Project Courtesy of zoo.org. www.zoo.org 1. Connect to the Internet and go to www.zoo.org. Notice that this website has images that change as you visit the website. 2. Open a document in a word processor or open a new Flash document, save the file as dpc3, then answer the following questions. (Hint: Use the Text tool in Flash.) ■ Whose website is this? ■ What is the goal(s) of the site? ■ Who is the target audience? ■ What treatment (“look and feel”) is used? ■ What are the design layout guidelines being used (balance, movement, and so on)? ■ What may be animated on this home page? ■ Do you think this is an effective design for the company, its products, and its target audience? Why or why not? ■ What suggestions would you make to improve the design, and why? FLASH 3-40 FLSH_CS6_002_ch03.indd 40 Working with Symbols and Interactivity 07/06/12 8:40 PM PORTFOLIO PROJECT This is a continuation of the Chapter 2 Portfolio Project, which is the development of a personal portfolio. In this project, you will create a button that will be used to link the opening screen of your portfolio to the animations page. Next, you will create another button to start the animation. 1. Open portfolio2.fla (the file you created in Portfolio Project, Chapter 2), then save it as portfolio3.fla. 2. Unlock the layers as needed. 3. Insert a new layer, name it sampleAnimations, then insert a keyframe in frame 2. 4. On this new layer, create a Sample Animations screen that has a text block with an oval background and the words Sample Animations at the top of the Stage, then add another text block and oval background with the word Tweened. (Note: This screen will have several animation samples added to it later.) 5. Insert a new layer, name it home button, then insert a keyframe in frame 2. 6. Add a text block that says Home and has an oval background at the bottom of the Stage. 7. Insert a new layer, name it tweenedAnimation, then insert a keyframe in frame 3. 8. Create an animation(s) of your choice using objects you draw or import, or objects from the Library panel of another document. (Note: To create a motion tween animation when starting in a frame other than frame 1, you need to specify the beginning frame of the animation by inserting a keyframe in the starting frame, placing or drawing the object on the Stage, selecting the object and converting it into a graphic symbol, inserting a motion tween, inserting a keyframe in the ending frame of the animation, and repositioning the object. (Hint: To create more than one animation that plays at the same time, put each animation on its own layer, such as tweenedAnimationRedCar and tweenedAnimationBlueCar.) 9. Insert a new layer, name it animationHeading, insert a keyframe in frame 3, then add a heading, such as Passing Cars in the sample in Figure 46, that describes the animation(s). 10. On the Sample Animations screen, convert the Tweened and Home text blocks into button symbols, then edit each symbol so that different colors appear for the different states. For the Tweened button, assign an action that jumps to the frame that plays an animation. For the Home button, assign an 11. 12. 13. 14. 15. action to the Home button that jumps to the frame that displays My Portfolio. (Hint: You need to use ActionScript 2.0.) Change the Animations graphic on the home page to a button, then edit the symbol so that different colors appear for the different states. Assign an action to the Animations button that jumps to the Sample Animations screen. Insert a new layer, then name it stopMovie. Insert keyframes and assign stop actions to the appropriate frames. Insert a new layer at the bottom of the layers pane and name it backdrop. Insert a keyframe in frame 3 on the backdrop layer. This is the same frame where the tween animation begins. Add a color background to the animation screen. Test the movie. Save your work, then compare your movie to the sample shown in Figure 46. Figure 46 Sample completed Portfolio Project Click to return to main page Home Click to run the animation Figure © Cengage Learning 2013 Working with Symbols and Interactivity FLSH_CS6_002_ch03.indd 41 FLASH 3-41 07/06/12 8:40 PM FLSH_CS6_002_ch03.indd 42 07/06/12 8:40 PM
User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.

This question has not been answered.

Create a free account to get help with this and any other question!

Related Tags