RANCHO SANTIAGO COMMUNITY COLLEGE DISTRICT SANTIAGO CANYON COLLEGE - CONTINUING EDUCATION BUSINESS SKILLS DEPARTMENT INTRODUCTION TO ANIMATIONS

USING FLASH INSTRUCTOR: Michelle L. Sandoval

FLASH CS5.5

Other effects using Flash

1. 2. 3. 4. 5. 6.

Create a new document Go to the properties and modify document Set up the width to 350px and height 250px Set the frame rate to 15 Background Color #990000 Select the Text Tool Make sure your text Classic Text/Static Text

and the Selectable button is off

7. Go to the Fill Color and select white 8. Then type “Service Alert” 9. Convert text to Symbol press F8> Movie Clip 10. Select text then, right click and Edit in Place 11. Insert a new layer then drag it below layer 1 12. Select the layer 1 click on frame 80 13. Press F5 14. Lock layer 1 15. Select layer 2, select the Brush Tool set brush to white 16. Draw a shape like this Handout # 9

RANCHO SANTIAGO COMMUNITY COLLEGE DISTRICT SANTIAGO CANYON COLLEGE - CONTINUING EDUCATION BUSINESS SKILLS DEPARTMENT INTRODUCTION TO ANIMATIONS USING FLASH INSTRUCTOR: Michelle L. Sandoval

FLASH CS5.5

17. While your Shape is still selected > press F8 to convert it into a Movie Clip 18. Go to properties 19. Select the Filters Tab > plus icon and choose Blur 20. Then set options as follow (79 px for both)

21. Go back to the properties Tab 22. Select Color Effect>Alpha 92% 23. Select the Oval Tool 24. Select the Stroke color white and height should be 3px 25. Draw a few circles 26. Select layer 2 > press F8 to convert all the objects into a Graphic 27. Click on frame 80> press F6 28. Click on frame 40> press F6 29. Move your objects up on frame 40 30. Select layer 2 31. Right click select Classic Tween 32 Select layer 1 > right click> select mask 33. Test your Movie

Handout # 9

RANCHO SANTIAGO COMMUNITY COLLEGE DISTRICT SANTIAGO CANYON COLLEGE - CONTINUING EDUCATION BUSINESS SKILLS DEPARTMENT INTRODUCTION TO ANIMATIONS USING FLASH INSTRUCTOR: Michelle L. Sandoval

FLASH CS5.5

In Today’s class we will learn to create buttons that could be used in webpages. To be able to create buttons, we first have to learn the different elements that make a button. Buttons States Up It defines how the button appears before the mouse interacts with it. Over It defines how the button appears when the mouse is over the hit area of the button.(roll over) Down It defines how the button appears when is clicked. Hit It defines the area where the button can be clicked.

Button Types Basic buttons contain the same information in the Up, Over and Down States and does not display any visual elements. Roll Over button contains different information in the Up states and could also differ in the Down state. It displays a visual element when mouse is over the button. Animates Rollover buttons This type button is like the Roll over button with the difference that one or more keyframes have movie clip instance. Invisible Buttons This type of buttons have a blank keyframe in the Up State and Hit state. Handout # 9

RANCHO SANTIAGO COMMUNITY COLLEGE DISTRICT SANTIAGO CANYON COLLEGE - CONTINUING EDUCATION BUSINESS SKILLS DEPARTMENT INTRODUCTION TO ANIMATIONS USING FLASH INSTRUCTOR: Michelle L. Sandoval

FLASH CS5.5

Exercise

Part I
1. Create a new document 500 x 400 2. Frames per second (ftps) 22 3. Color the background gray 4. Go to Insert > New Symbol 5. Name symbol “rollbutton” 6. Go to View> Grid> Show Grid 7. Select Line Tool 8. Set the stroke to black 9. Draw a triangle (make sure the registration point is on the center) 10. Color the triangle using the Paint Bucket Tool (click once inside the triangle to fill it with color-select red) 11. Choose the Selection tool double click on the strokes to select them all then press delete. 12. Press F6 to add a keyframe to the “Over” state 13. Select the Paint Bucket tool and color this button white 14. Press F6 to add a keyframe to the “Down” state 15. Select the Paint Bucket Tool and color this button red again 16. Press F6 to add a keyframe to the“Hit” state (The Hit stage is invisible and is the area where the stage will activate the button rollover) 17. Go the Edit bar and click on Scene 1 to bring you back to the Timeline 18. Go to the library (ctrl +L) > click the rollbutton (click the play button on the controller to preview button) 19. Go to View > Grid >Show Grid (to hide grid) 20. Drag the button to the stage 21. Go to Control > Enable simple buttons Handout # 9

RANCHO SANTIAGO COMMUNITY COLLEGE DISTRICT SANTIAGO CANYON COLLEGE - CONTINUING EDUCATION BUSINESS SKILLS DEPARTMENT INTRODUCTION TO ANIMATIONS USING FLASH INSTRUCTOR: Michelle L. Sandoval

FLASH CS5.5

(To test the buttons) 22. Go back to Control> Enable simple buttons (to disable this option)

Part II
1. Using previous exercise, double click on button 2. Rename layers to “rollbutton” (lock layer) 3. Insert new layer and called it “text” 4. Select the Text Tool 5. Click on the stage once 6. Go to the Properties and set the following Font type Verdana Font size 30pts Font color white 7. Move playhead to the Hit state 8. Type the word “Main Page” (word would appear across Up, over and down states) 9. Go the Over state and Press F6 10. Select the text box then change color to a dark gray 11. Move Playhead to the Hit state 12. Delete the frames on the Hit state for both layers (Select them both > right click> remove frames) 13. Lock both layers (text and rollbutton) 14. Insert a new layer and called it “ Hit” (move layer to the end) 15. Go to the Hit state and press F7 16. Unlock layers 17. Turn on “Onion Skin” 18. Select the Rectangle tool 19. Draw a rectangle the covers the triangle and text 20. Disable Onion Skin 21. Go the edit bar and Click Scene 1 22. Test your button (control>test movie) Handout # 9

Sign up to vote on this title
UsefulNot useful