1 / 10

2D Design and Animation

2D Design and Animation. Flash Buttons It is a basic visual indicator of what the user can interact with. In flash, it has four special states, or keyframes. Up State – if mouse is not interacting Over State – if mouse is hovering Down State – if button is pressed

josiemorris
Download Presentation

2D Design and Animation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 2D Design and Animation

  2. Flash Buttons • It is a basic visual indicator of what the user can interact with. • In flash, it has four special states, or keyframes. • Up State – if mouse is not interacting • Over State – if mouse is hovering • Down State – if button is pressed • Hit State – the clickable area

  3. Basic Steps for Creating Button 1. Decide what button type best suits your needs a. Button Symbol b. Movie clip button c. ActionScript button component 2. Define your button states. a.Up frame b. Over frame c. Down frame d. Hit frame 3. Associate an action with the button. a. ActionScript

  4. 1. Deciding what button type best suits your needs Button symbol Most people choose button symbols for their flexibility. Button symbols contain a specialized internal timeline for button states. You can easily create visually different Up, Down, and Over states. Button symbols also change their state automatically as they react to user actions. Movie clip button You can use a movie clip symbol to create sophisticated button effects. Movie clip symbols can contain almost any type of content, including animation. However, movie clip symbols do not have built-in Up, Down, and Over states. You create those states yourself, using ActionScript. A disadvantage is that movie clip files are larger than button files. ActionScript button component Use a button component if you require only a standard button or a toggle, and you don’t want to customize it extensively. Both ActionScript 2.0 and 3.0 button components come with built-in code that enables state changes. So, you don’t have to define the look and behavior of button states. Simply drag the component onto the Stage.

  5. 2. Defining your button states Up frame The appearance of the button when the user is not interacting with it. Over frame The appearance of the button as the user is about to select it. Down frame The appearance of the button as the user selects it. Hit frame The area that is responsive to clicks by the user. Defining this Hit frame is optional. If your button is small, or if its graphic area is not contiguous, defining this frame can be useful. The contents of the Hit frame are not visible on the Stage during playback. The graphic for the Hit frame is a solid area large enough to encompass all graphic elements of the Up, Down, and Over frames. If you don’t specify a Hit frame, the image for the Up state is used. You can make a button that responds when a different area of the stage is clicked or rolled over (also called a disjoint rollover). Place the Hit frame graphic in a different location than the other button frame graphics.

  6. 3. Associating an action with the button To make something happen when the user selects a button, you add ActionScript code to the Timeline. Place the ActionScript code in the same frames as the buttons. The Code Snippets panel has pre-written ActionScript 3.0 code for many common button uses. .

  7. TRY THE BASIC STEPS: • CREATING FLASH BUTTON SYMBOL • First create/import the object(s) to be converted into a button. Import bitmaps onto the stage using Ctrl+R. • Select the object(s) and then pressF8 (or for MAC user fn+F8Modify >> Convert to Symbol). • Select the Button Behavior for the symbol and name the symbol say, 'btn_home'. • Double-click the instance of 'btn_home' on the stage to switch to its symbol-editing mode. The Timeline header changes to display four consecutive frames labeled Up, Over, Down, and Hit as shown below

  8. CONTINUATION: CREATING FLASH BUTTON SYMBOL The first frame displays the drawn vector/plain text used for creating this button, now insert a Key frame (F6) in the frame labeled Over (Flash automatically duplicates the contents of the Up frame). Now change the color of the object in the Over frame to create a rollover effect in the button. Insert frames (F5) for the Down frame and the Hit frame (only defines the area of the button that responds to user action and is not visible at runtime). Save your work and test the Movie (Ctrl + Enter).

  9. ADVANCED FLASH BUTTON • We can try: • Invisible buttons • Buttons with “animated” states • Rollover in one area of the movie affects another area of the movie

  10. FLASH BUTTON WITH ActionScript • Stop and Play the Timeline stop(); and play(); • Moving a Symbol • Scaling a symbol

More Related