Movie clip, graphic, and button symbols keep your file size small while increasing your flexibility. A single symbol can be used countless times in a

Transcription

1 Movie clip, graphic, and button symbols keep your file size small while increasing your flexibility. A single symbol can be used countless times in a project, but the file s data only has to be included once.

2 3 Creating and Editing Symbols Lesson overview In this lesson, you ll learn how to do the following: Import Illustrator files Create new symbols Understand the difference between symbol types Adjust transparency Import assets into the Library Use Library assets Convert bitmap graphics to vectors Reduce the file size of Flash documents Apply web-safe colors This lesson will take less than an hour to complete. If needed, remove the previous lesson folder from your hard drive, and copy the Lesson03 folder onto it. As you work on this lesson, you ll overwrite the start file. If you need to restore the start file, copy it from the Adobe Flash CS3 Classroom in a Book CD.

3 40 LESSON 3 Creating and Editing Symbols Getting started You ll start the lesson by viewing the project you ll be creating as you learn to work with symbols. 1 Double-click the L3_End.Fla file in the Lesson03 folder to view the final project in Flash. The project is a DVD interface, designed to help a viewer navigate among the options on a DVD. In this lesson, you ll use Illustrator graphic files, imported JPEG files, and symbols to create an attractive, useful interface. You ll create buttons and position them in the interface, but you won t script them yet in this lesson. In a later lesson, you ll return to this interface and make those buttons active. 2 Double-click the 03Start.fla file to open the initial project file in Flash. Importing Illustrator Files You can draw objects in Flash, using the Rectangle, Oval, and Line tools. However, for complex drawings, you may prefer to create the artwork in another application. Adobe Flash CS3 supports native Adobe Illustrator files, so you can create original artwork in Illustratore and then import it into Flash. When you import an Illustrator file, you can choose which layers in the file to import, and how Flash should treat those layers. You ll import an Illustrator file to serve as the main component of a DVD interface. 1 Choose File > Import > Import to Stage. 2 Navigate to the DVD_interface_layout.ai file in the Lesson03 folder. 3 Click Import. 4 In the Import to Stage dialog box, make sure all layers are selected.

4 ADOBE FLASH CS3 41 Classroom in a Book 5 Choose Flash Layers from the Convert Layers To menu, and select Place Objects At Original Position. Then, click OK. Flash imports the DVD interface image, and three layers appear in the timeline: Menu, Preview Boxes, and Menu Background.

5 42 LESSON 3 Creating and Editing Symbols Sidebar placeholder [Brie s note: We should have at least a half-page sidebar about Illustrator integration, but the information I need isn t in the beta help yet, and I m not even sure it s completely firm. Please leave room for it somewhere in this general area!] About Symbols Symbols make it possible for you to create robust, complex animations without large file sizes and lengthy download times. You can use a symbol countless times in a project, but Flash includes its data only once. Symbols are stored in the Library palette. When you drag a symbol to the stage, Flash creates an instance of it, leaving the original in the Library. There are three kinds of symbols in Flash, and each has advantages and limitations. You can tell whether a symbol is a graphic, button, or movie clip by looking at the icon next to it in the Library palette.

6 ADOBE FLASH CS3 43 Classroom in a Book Movie Clip Symbols Many designers use movie clip symbols for all kinds of objects in Flash because movie clips are the most flexible symbols. You can apply filters, color settings, and blending modes to a movie clip symbol. You can name each instance of a movie clip symbol, and control it with ActionScript. Movie clip timelines are also the most flexible. They can contain sounds, interactive controls, and even other movie clip instances. Though they do not include the default frames for rollover states that are in a Button symbol s timeline, you can create a button using a movie clip symbol by using ActionScript to create the rollover states. Button Symbols You can quickly create interactive buttons with standard rollover states using button symbols. Unlike movie clip timelines, button symbol timelines have four frames: Up, Over, Down, and Hit. You can name individual button instances, and you can control them using ActionScript. You can also apply filters, blending modes, and color settings. The Up state is the default state. The Over state determines the button s appearance when the mouse rolls over it. The Down state determines the button s appearance when it is clicked. The Hit state defines the button s active area, which is the area that responds to the mouse click. Graphic Symbols Use graphic symbols for static images -- that is, images you don t plan to animate -- that are tied to the main timeline. Graphic symbols are the least flexible symbols. Interactive controls and sounds don t work if you animate a graphic symbol, and you can t use ActionScript with them. You also can t apply filters or blending modes to a graphic symbol.

7 44 LESSON 3 Creating and Editing Symbols Converting Objects to Symbols The interface layout includes three green boxes, where you ll display thumbnails for video clips. Before positioning the video clips on the boxes, you ll convert them to movie clip symbols. You can use ActionScript with a movie clip symbol, though you can t with a graphic symbol. 1 In the timeline, select frame 1 of the Preview Boxes layer to select the green boxes, which are the only objects on the frame for that layer. 2 Choose Modify > Convert to Symbol. 3 Name the symbol Preview_Boxes. 4 Select Movie Clip for the Type. 5 Click OK. The Preview_Boxes symbol appears in the Library. Importing Bitmap Images You need images to position over the green boxes, so you ll import some JPEG files. You can import graphics directly to the stage, as you did with the DVD layout. However, you can also import graphics to the Library, so that you can decide later where to place it on the stage. Many designers import all the assets for a project when they begin working, and then drag the assets to the stage as they need them. Note: If you import graphics to the stage, Flash also adds them to the Library.

8 ADOBE FLASH CS3 45 Classroom in a Book About Image Formats Flash supports JPEG, GIF, and PNG files, which are all bitmap formats. Use JPEG files for images that include gradients and subtle variations, such as those that occur in photographs. Use GIF files for images with large solid blocks of color. Use PNG files (a native format in Flash) for images that include transparency. PNG files often have a much larger file size than JPEG or GIF files. In the Library, you can set PNG files to export as JPEG files, with a smaller file size, while retaining their transparency. Importing Images to the Library First, you ll import three JPEG images to the Library. Later, you ll add them to the Preview_Boxes symbol. 1 Choose File > Import > Import to Library. 2 Navigate to the Vacation_1.jpg file in the Lesson03 folder. 3 Hold down the Shift key, and select Vacation_1.jpg, Vacation_2.jpg, and Vacation_MovieClip.jpg. Hold down the Shift key whenever you want to select multiple files. 4 Click Open. Flash adds the three JPEG files you imported to the library, without placing them on the stage.

9 46 LESSON 3 Creating and Editing Symbols Importing Images to the Stage You ll add one more image to the DVD interface it s an image of people on a beach with large umbrellas, and you will import it directly to the stage. Because it needs to go behind the existing layout, you ll move its layer beneath the other layers. 1 Choose Insert > Timeline > Layer. 2 In the timeline, drag the new layer under the Menu Background layer. 3 Choose File > Import > Import to Stage. 4 Locate BeachUmbrellas.jpg in the Lesson03 folder, and select it. 5 Click Open. The BeachUmbrellas JPEG appears beneath the other layers on the stage.

10 ADOBE FLASH CS3 47 Classroom in a Book Converting a Bitmap to a Vector You can convert bitmap graphics to vector objects to reduce the file size, and also to give you more flexibility in manipulating the graphic. The Trace Bitmap command converts a bitmap into a vector graphic with editable, discrete areas of color. To reduce the file size, you ll convert the BeachUmbrellas.jpg file to a vector graphic. Note: The converted graphic is no longer linked to the bitmap in the Library. In this project, you re only using the BeachUmbrellas.jpg image once, so you don t need to retain the link to the file in the Library. 1 With the BeachUmbrellas.jpg image still selected on the stage, choose Modify > Bitmap > Trace Bitmap. 2 Enter the following settings: Color Threshold: 100 Minimum Area: 8 Curve Fit: Normal Corner Threshold: Normal 3 Click OK.

11 48 LESSON 3 Creating and Editing Symbols Adding Bitmaps to a Movie Clip Symbol Each symbol has its own timeline. You can add layers to a symbol s timeline just as you can to the main timeline. As you add assets to a symbol s timeline, they are nested within the symbol. You ll add bitmap images to the three boxes in the Preview_Boxes movie clip. 1 Select the Selection tool. 2 Double-click on a green box on stage to edit the Preview_Boxes movie clip. Double-click an instance of a symbol on the stage to see the rest of the layout while you re editing. To see only the symbol itself as you edit it, double-click the symbol. 3 Choose Insert > Timeline > Layer to add a layer to the Preview_Boxes timeline. 4 Drag the Vacation_1.jpg bitmap from the Library to the first green preview box on the stage. Note: If the Library palette isn t visible, choose Window > Library to display it. 5 Press the Alt (Windows) or Option (Mac OS) key, and drag the image from the first box to the second box. 6 In the Properties palette, click Swap. 7 In the Swap Bitmap dialog box, select Vacation_2.jpg, and click OK.

12 ADOBE FLASH CS3 49 Classroom in a Book 8 Drag the Vacation_MovieClip.jpg bitmap from the Library palette onto the third box on the stage. Working with Buttons Use button symbols to create interactive buttons that include rollover states, which cause the buttons to change appearance when you click them, roll the mouse over them, or perform other actions. You use ActionScript to assign actions to buttons, but in this lesson, you re just creating the button states. You ll assign actions to them in a later lesson. Creating a Button Symbol You could convert an existing asset to a button symbol, but for this lesson, you ll create a brand new symbol. 1 Choose Insert > New Symbol. 2 Name the symbol Menu_Button. 3 Select Button for the Type, and click OK. Flash adds the Menu_Button symbol to the Library.

13 50 LESSON 3 Creating and Editing Symbols Importing a File with Button States The Up, Down, and Over button states can include any change in graphics, color, shape, or size. If you want to create a complex set of button states, you may want to create the artwork in Adobe Illustrator. For this lesson, you ll import an Illustrator file that already contains the artwork for three button states. Because the Menu_Button symbol timeline is open, the layers will fill the appropriate states. 1 Choose File > Import > Import to Stage. 2 Select the DVD_interface_button_states.ai file in the Lesson03 folder. 3 Click Open. 4 Select all the layers in the file. The Illustrator file contains three button states. 5 Choose Keyframes from the Convert Layers To menu. Note: Choosing Keyframes imports the layers into the proper frames in a single layer. If you choose Flash Layers, the states import as separate layers, and the button won t work properly. 6 Click OK. Flash imports the button state images as states for the Menu_Button symbol.

14 ADOBE FLASH CS3 51 Classroom in a Book Adding a Button Symbol to the Stage The Menu_Button symbol is in the Library. You ll add an instance of the button to the stage over each of the menu options. 1 Choose Edit > Edit Document to return to the main timeline. 2 Select the Menu layer. 3 Choose Insert > Timeline > Layer. 4 Drag the Menu_Button symbol from the Library onto the stage, and position it over the words Play Movie. Flash adds an instance of the symbol to the stage. 5 Drag the Menu_Button symbol over Scene Selection, Special Feature, and Setup. Adding a Hit State to a Button You imported three button states for the menu buttons. However, those states won t have any effect if the Hit state doesn t exist. The Hit state defines the button s active area, the area that responds to the mouse click. The area is invisible in the final file. You ll draw a rectangle to represent the button area for the Hit state. Creating a Hit state for the symbol automatically applies it to each instance of the symbol. You don t have to draw a rectangle or any other shape to define the Hit state. If you want the button s active area to match the graphic in the Up, Down,or Over state exactly, press Alt (Windows) or Option (Mac OS) and drag the dot under one of the other states to the Hit state.

15 52 LESSON 3 Creating and Editing Symbols 1 Using the Selection tool, double-click on the first Menu_Button instance to edit the symbol in place. 2 In the button s timeline, select the Hit frame. 3 Choose Insert > Timeline > Blank Keyframe. 4 Select the Rectangle tool. 5 Draw a rectangle that covers the text and some of the area above it. Make sure that a fill color is selected. 6 Click Scene 1 to return to the main stage. 7 Choose Control > Enable Simple Buttons. This command lets you preview buttons. 8 Hover the mouse over the buttons and click them to see the appearance for each state. Note: The button states work, because you ve added a state to each frame in the button layer. However, the buttons are not scripted yet, so no action results from clicking them.

16 ADOBE FLASH CS3 53 Classroom in a Book Creating an Invisible Button Buttons don t have to look like buttons. It s easy to make a button invisible. When you roll over or click an invisible button, the appearance on screen changes or some action occurs, but the screen isn t cluttered with buttons when they re not in use. When and how to use invisible buttons is a design decision. In this project, you ll add invisible buttons to the thumbnails for the video clips, so that later you can script the thumbnails to play the videos when they are clicked. 1 Choose Insert > New Symbol. 2 Name the symbol Invisible_Button. 3 Select Button for the Type, and click OK. 4 In the button s timeline, select the Hit frame. 5 Choose Insert > Timeline > Blank Keyframe. 6 Use the Rectangle tool to draw a rectangle of any size. 7 Select the rectangle with the Selection tool. 8 In the Properties Palette, set the Width and Height values to 85 and the X and Y values to 0. 9 Press Enter to apply the values. 10 Click Scene 1 to return to the main timeline. 11 Choose Insert > Timeline > Layer.

17 54 LESSON 3 Creating and Editing Symbols 12 Drag the Invisible_Button symbol to the stage, and center the instance over the first green preview box. 13 Choose Control > Enable Simple Buttons to deselect it. The instance of the Invisible_Button symbol is now visible, though it won t be in the final SWF file. 14 Press Alt (Windows) or Option (Mac OS) and drag the invisible instance button over the second box. 15 Repeat step 14 to duplicate the instance for the third green box. Adding Transparency In Flash, you specify an alpha value to define the degree of transparency for a symbol or a color. In fact, each instance of a symbol can have a different alpha value. Decreasing the alpha value decreases the opacity and increases the amount of transparency. Changing the Alpha Value for an Instance To reduce the opacity for the menu background, you must first convert it to a symbol. 1 In the main timeline, select frame 1 of the Menu Background layer. 2 Choose Modify > Convert to Symbol. 3 Name the symbol Menu_Background. 4 Select Graphic for the Type, and click OK.

18 ADOBE FLASH CS3 55 Classroom in a Book 5 In the Properties palette, select Alpha from the Color menu. 6 Type 85 for the percentage. Changing the Alpha Value for a Color You ll alter the alpha value for the green color of the preview boxes, making them slightly transparent. First, though, you ll need to separate the green boxes. 1 With the Selection tool, double-click on the instance of the Preview_Boxes symbol to edit it in place. 2 In the timeline, select frame 1 of Layer 1, which contains the green boxes. 3 Choose Modify > Break Apart. Note: You can use either the Ungroup command or the Break Apart command to separate the boxes. In general, the Break Apart command is more powerful because it can break apart a bitmap or instance into editable parts, as well as ungrouping grouped objects. 4 Click on any part of the selected green shapes. 5 In the Properties palette, click the Fill Color box.

19 56 LESSON 3 Creating and Editing Symbols 6 Type 85 in the Alpha field, and press Enter to apply it. 7 Click Scene 1 to return to the main timeline. Using Web Safe Colors When you view files in a web browser using a 256-color display, many colors appear dithered. The web-safe palette in Flash includes 216 colors that are most likely to appear as you expect, without dithering, on different computers using different operating systems and web browsers. The web-safe palette is the default color palette in Flash. Most current computers display thousands or millions of colors, making web-safe colors less important than they once were. However, handheld devices and cell phone displays have more limited colors, so if you re creating SWF files to be viewed on those devices, it s best to use web-safe colors. To ensure you re using the web-safe palette when you add color to objects in Flash, choose Web 216 from the Swatches palette menu. When you import artwork, it may contain additional colors. You ll change the orange rectangle in the menu background to a web-safe color. 1 With the Selection tool, double-click on the instance of the Menu_Background symbol to edit it in place. Press Alt (Windows) or Option (Mac OS) and click the lock icon for the Menu Background layer in the timeline to lock all the other layers, so that you don t accidentally select objects on those layers.

20 ADOBE FLASH CS3 57 Classroom in a Book 2 Double-click on the large orange rectangle to enter its group. 3 Select the rectangle. 4 In the Properties palette, click the Fill Color box. 5 Type #FF6600 in the color value field to apply a web-safe orange. [Brie s question: is there a chart somewhere we can point people to with the hex numbers for these colors? I haven t seen one in years, and I couldn t find one on the Adobe website.] 6 Press Enter to apply the color. 7 Click Scene 1 to return to the main timeline. The DVD interface has its background, its buttons, and its video clip thumbnails. It s ready for ActionScript, which you ll add in Lesson x.

21 Review Review questions 1 Once you ve made a selection, what area of the image can be edited? 2 How do you add to and subtract from a selection? 3 How can you move a selection while you re drawing it? 4 When drawing a selection with the Lasso tool, how should you finish drawing the selection to ensure that it is the shape you want? 5 How does the Magic Wand tool determine which areas of an image to select? What is tolerance, and how does it affect a selection? Review answers 1 Only the area within the selection can be edited. 2 To add to a selection, hold down Shift and then drag or click the active selection tool on the area you want to add to the selection. To subtract from a selection, hold down Alt (Windows) or Option (Mac OS) and drag or click the active selection tool on the area you want to remove from the selection. 3 Without releasing the mouse button, hold down the spacebar and drag to reposition the selection. 4 To make sure that the selection is the shape you want, end the selection by dragging across the starting point of the selection. If you start and stop the selection at different points, Photoshop draws a straight line between the start point of the selection and the end point of the selection. 5 The Magic Wand tool selects adjacent pixels based on their similarity in color. The Tolerance setting determines how many color tones the Magic Wand tool will select. The higher the tolerance setting, the more tones the Magic Wand selects.

22