Tài liệu Thiết kế flash với flash cs5 part 23 pptx

ptg 148 Chapter 4 Graphic symbols can be used for static images and for animations that are in sync with the main Timeline. There are three instance options available to them: Loop, Play Once, and Single Frame. Set the instance to Loop if you want the symbol's Timeline to play continuously. Play Once plays the Timeline of a graphic symbol once and then stops. Single frame sets the instance to display as a single frame contained in the graphic symbol's Timeline. Unlike movie clip symbols, an animation contained in a graphic symbol can be seen in the main Timeline without having to export the Flash movie. However, any ActionScript and sounds that have been included in a graphic symbol's Timeline will not work. Using Graphic Symbols Create a Graphic Symbol Click the Insert menu, and then click New Symbol. TIMESAVER Press A +F8 (Mac) or Ctrl+F8 (Win) to create a new symbol. Type in a name for the symbol. Click the Typ e list arrow, and then click Graphic. Click OK. Flash enters a symbol editing mode that contains an empty Timeline for that symbol. 4 3 2 1 3 2 4 Did You Know? Graphic symbol animations are synced up to the main Timeline. For example, if the animation in the graphic symbol spans 10 frames, the instance in the main Timeline must also span 10 frames if the entire animation is to be seen. From the Library of Wow! eBook ptg Chapter 4 Working with Groups, Symbols, and Instances 149 Change the Options for Graphic Symbol Instances Select a graphic symbol instance on the Stage. Click the list arrow in the Property Inspector, and then select from the following graphic options: ◆ Loop. The Timeline in the graphic symbol will loop continuously. ◆ Play Once. The Timeline in the graphic symbol will play once and stop. If there is no animation in the symbol or if there is only artwork on one frame, it will be treated as a static graphic. ◆ Single Frame. Sets the instance to a single frame in the Timeline of the master symbol. When this is selected, the graphic symbol is treated as a static graphic. 2 1 2 Options for graphic symbol instances Converting a Graphic to a Symbol In addition to creating a new symbol and adding a graphic, you can also convert an existing graphic to a symbol. Select the vector graphic on the Stage, click the Modify menu, and then click Convert To Sym bo l. In t he Co nv er t to Sy mb ol d ia lo g box , en te r a nam e (th at you’ll refer to in an ActionScript), and then click the Graphic option as the type. The registration grid within the symbol bounding box dis- plays a small black square to indicate the registration point for the graphic. For Your Information From the Library of Wow! eBook ptg 150 Chapter 4 Use buttons to add interactivity to your movie. Button symbols have their own four-frame Timeline. The first three frames define the states of the button: up, over, and down. The first frame is the Up state, which is the appearance of the button when in its normal, non-active state. The second frame is the Over state, which is triggered when the user places their mouse over the button. The third frame is the Down state, which appears when the user presses the button with their mouse. The fourth frame—which is invisible outside of the symbol editing mode— defines the active area. This is the area that the user must place their mouse over to activate the other states of the button. You can assign actions, such as sound or animation, to instances of buttons that tell Flash what to do when the button is clicked. Using Button Symbols Create a Button Click the Insert menu, and then click New Symbol. TIMESAVER Press A +F8 (Mac) or Ctrl+F8 (Win) to create a new symbol. Type in a name for the symbol. Click the Typ e list arrow, and then click Button. Click OK. Place artwork in the keyframe of the first frame. This represents the button's Up state, its normal, inactive state. Click the Insert menu, point to Timeline, and then click Keyframe to add a keyframe in the second frame (the Over state). TIMESAVER Press F6 to quickly add a keyframe and press F7 to add a blank keyframe. 6 5 4 3 2 1 3 4 5 2 From the Library of Wow! eBook ptg Chapter 4 Working with Groups, Symbols, and Instances 151 Change the artwork or add new artwork in this frame. Click the Insert menu, point to Timeline, and then click Keyframe to add a keyframe in the third frame (the Down state). Alter the artwork or add new artwork in this frame. Click the Insert menu, point to Timeline, and then click Keyframe to add a keyframe in the fourth frame (the active area). Add a simple graphic (a rectangle or oval, for example) to define the active area. To assig n a sound to a st at e of t he button, select the state’s frame in the Timeline, open the Property Inspector, and then: ◆ Select a sound from the Sound list arrow menu. ◆ Select an event from the Synchronization list arrow menu. Click the Control menu, point to Test Movie, and then click Test. TIMESAVER Press A +Return (Mac) or Ctrl+Enter (Win) to test it. 13 12 11 10 9 8 7 7 9 11 See Also See “Enabling and Disabling Buttons” on page 152 for information on turning buttons on and off. Adding Animation to a Button There are several ways to add animation to a button. First, you can place an instance of the button symbol on the Stage and assign actions to it, not to frames in the button’s Timeline. Another way is to create a button using a movie clip symbol or a button component. You can create more complex animation with the movie clip button. The downside is that file size increases. The button component provides more pre-built button types, such as PushButton and RadioButton, and customizable features. See Chapter 18, “Adding and Modifying Components” on page 427 for information on components and using button components. For Your Information From the Library of Wow! eBook ptg 152 Chapter 4 Flash allows you to test your buttons within the development environ- ment without having to export the movie. You can test the behavior of simple buttons by toggling the Enable Simple Buttons feature on and off. When buttons are enabled, you can't select them or enter their symbol editing mode normally. Disable this feature if you need to enter the symbol mode. You can quickly see how the different states of your button behave without having to export the whole flash movie. Any ActionScript applied to the button will be ignored. Enabling and Disabling Buttons Enable and Disable Buttons Place a button on the Stage. Click the Control menu, and then click Enable Simple Buttons to enable the button. TIMESAVER Press Ctrl+Alt+B (Win) or Option+ A +B (Mac) to toggle the enabling and disabling of simple buttons. Place the mouse over the button to test the Over state. Press down on the button to test the Down state. To disab le t he b ut to n, cli ck the Control menu, and then click Disable Simple Buttons. 5 4 3 2 1 The Up state is the button’s normal, inactive state. The Over state is active when the mouse pointer passes over it. The Down state is active when the mouse pointer presses down on it. 3 4 2 See Also See “Using Button Symbols” on page 150-151 for information on creating a button. Did You Know? Regardless of whether buttons are enabled or disabled, they will be func- tional when you export your movie. The Enable Simple Buttons command is only relevant to the Flash develop- ment environment. From the Library of Wow! eBook ptg Chapter 4 Working with Groups, Symbols, and Instances 153 Buttons do not require graphics to be placed in the hit state frames (the first three frames). As long as the active area contains a shape, the button will be invisible but will be functional and ActionScript can be applied to it. The active area is the fourth frame in the button symbol Timeline. An instance of an invisible button appears as a transparent blue shape in the main Timeline, but it will not be visible in the exported movie. Creating Invisible Buttons Create an Invisible Button Click the Insert menu, and then click New Symbol. TIMESAVER Press A +F8 (Mac) or Ctrl+F8 (Win) to create a new symbol. Click the Typ e list arrow, and then click Button. Click OK. Click the Insert menu, point to Timeline, and then click Keyframe to add a keyframe in the fourth frame (the active area). TIMESAVER Press F6 to create a keyframe. Add a simple graphic (a rectangle or oval, for example) to define the active area. Make sure the first three frames remain empty. Return to the main Timeline. Drag the invisible button from the Library to the Stage. Invisible buttons appear as transparent blue shapes but are invisible in the final export. 8 7 6 5 4 3 2 1 4 The first three frames of the button remain empty. 8 An invisible button appears as a transparent blue square in the Flash development environment. 2 3 From the Library of Wow! eBook ptg 154 Chapter 4 Movie clip symbols operate independently on the main Timeline. When you want an animation to loop on a single frame in the Timeline, you can store this animation in the Timeline of a movie clip that will sit on this frame. Movie clip instances can have actions applied to them and can be controlled from anywhere in the Flash movie through ActionScript. They can contain animations, interactive controls, sounds, and even other movie clips. Unlike graphic symbols, you can only see the first frame of the movie clip in the main Timeline. Export your movie to see the movie clip play. Using Movie Clip Symbols Create and View Movie Clips Symbols Click the Insert menu, and then click New Symbol. Click the Typ e list arrow, and then click Movie Clip. Click OK. Add your content to the Movie Clip Timeline. Return to the main Timeline by clicking the Back button or the Scene name on the Edit bar. Drag the movie clip symbol to the Stage from the Library. To chang e mo vi e cl ip p ro pertie s, select the clip on the Stage, and then change options in the Property Inspector. ◆ Symbol. Movie Clip, Graphic, or Button ◆ X and Y position ◆ Width and Height ◆ Color. Brightness, Tint, Alpha, and Advanced Click the Control menu, point to Test Movie, and then click Test. TIMESAVER Press A +Return (Mac) or Ctrl+Enter (Win) to test it. 8 7 6 5 4 3 2 1 2 3 6 7 8 Movie clip 5 From the Library of Wow! eBook ptg Chapter 4 Working with Groups, Symbols, and Instances 155 Sometimes you'll need to break a symbol instance so that it is no longer linked to the master symbol. You might do this if you want to add some- thing to the symbol without affecting the other instances. In this way, the content inside the symbol will become a simple graphic that you can adjust without affecting the master symbol you made it from or any of its instances. Breaking Symbols Apart Break an Instance Select an instance on the Stage you would like to break. Click the Modify menu, and then click Break Apart. TIMESAVER Press A +B (Mac) or Ctrl+B (Win) to quickly break apart a symbol. 2 1 1 Symbol broken apart into an editable shape. See Also See “Swapping Symbol Instances” on page 146 for information on swapping symbol instances. From the Library of Wow! eBook ptg 156 Chapter 4 You can alter the properties of an instance of a symbol without affect- ing the master symbol. Any transform applied to an instance can be animated with motion tweening. Flash will gradually draw the frames in between one transform to another. This is how you create movement in Flash. Change the scale of an instance or rotate and skew it. You can perform these functions interactively with the Free Transform tool. You can also add values in the Transform panel, or access additional Transform options in the program's Modify menu. Distort and Envelope cannot be applied to instances and are disabled on the Tools panel options when the Free Transform tool is selected. Modifying Instance Properties Modify the Scale or Rotation Select the instance on the Stage. Click the Free Transform tool on the Tools panel. TIMESAVER Press Q to quickly select the Free Transform tool. Click the Scale or Rotate and Skew button in the Options section of the Toolbar. Drag the small handles around the bounding box to change the size of the instance or rotate it. To use th e Tran sf orm pane l, c li ck the Window menu, and then click Transform. TIMESAVER Press Ctrl+T (Win) or A +T (Mac) to open the Transform panel. 5 4 3 2 1 3 4 2 The Transform panel allows you to enter values for various transforms. Did You Know? You can select multiple instances and change their properties simultane- ously. Press Shift+select each instance you would like to alter in tandem. A bounding box will appear around all selected instances. 5 From the Library of Wow! eBook ptg Chapter 4 Working with Groups, Symbols, and Instances 157 Tran sf orms ob jects freely Constrain transforms Rotate commands Flip commands Removes all applied Tran sf orm ef fects Use Additional Transform Commands Select the instance on the Stage. Click the Modify menu, point to Transform, and then click one of the following: ◆ Free Transform. Transforms the object freely. ◆ Scale. Constrains the transform to scale. ◆ Rotate And Skew. Constrains the transform to rotate and skew. ◆ Scale And Rotate. Constrains the transform to scale and rotation changes. ◆ Rotate 90° CW. Rotates the selected object 90° clockwise. ◆ Rotate 90° CCW. Rotates the selected object 90° counter- clockwise. ◆ Flip Vertical. Flips the object along a vertical axis. ◆ Flip Horizontal. Flips the object along a horizontal axis. ◆ Remove Transform. Removes any transform effects applied to the selected instance. 2 1 Did You Know? Changing the scale or rotation of an instance can also be done in the Transform panel. Simply select the instance, and then access the Transform panel. Click the Window menu, and then click Transform. The Modify menu includes additional trans- form commands not available any- where else. 2 From the Library of Wow! eBook [...]... 100% Alpha of 25% Chapter 4 From the Library of Wow! eBook Using 9-Slice Scaling on a Movie Clip Symbol In previous versions, Flash scales movie clips equally in height and width For many rectangular movie clips, this method of scaling doesn’t work very well at the corners In Flash, a method called 9-slice scaling is used A movie clip is visually divided into nine areas, or slices, with a grid overlay... provides the new scaling 1 Chapter 4 Working with Groups, Symbols, and Instances 161 From the Library of Wow! eBook Setting Highlight Color Preferences Flash allows you to set general preferences to customize the highlight, or selection, color of elements in Flash to make them easier to see In the General category of the Preferences dialog box, you can select different colors for different types of elements,... objects, drawing primitives, groups, symbols, and all other elements If you don’t want to set individual colors, you can use the layer color for all elements Set Highlight Color Preferences 1 Click the Flash (Mac) or Edit (Win) menu, and then click Preferences 2 Click the General category 3 2 Select the Use Layer Color option to use the current layer’s outline color, or select the option, and then select . instances. Breaking Symbols Apart Break an Instance Select an instance on the Stage you would like to break. Click the Modify menu, and then click Break Apart. TIMESAVER. Apart. TIMESAVER Press A +B (Mac) or Ctrl+B (Win) to quickly break apart a symbol. 2 1 1 Symbol broken apart into an editable shape. See Also See “Swapping Symbol