RANCHO SANTIAGO COMMUNITY COLLEGE DISTRICTSANTIAGO CANYON COLLEGE - CONTINUING EDUCATION

BUSINESS SKILLS DEPARTMENTINTRODUCTION TO ANIMATIONS USING FLASH

INSTRUCTOR: Michelle L. Sandoval

FLA

SH C

S5.5

Handout # 9

Other effects using Flash

1. Create a new document2. Go to the properties and modify document3. Set up the width to 350px and height 250px4. Set the frame rate to 155. Background Color #9900006. 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 white8. Then type “Service Alert”9. Convert text to Symbol press F8> Movie Clip10. Select text then, right click and Edit in Place11. Insert a new layer then drag it below layer 112. Select the layer 1 click on frame 8013. Press F514. Lock layer 115. Select layer 2, select the Brush Tool set brush to white16. Draw a shape like this

FLA

SH C

S5.5

RANCHO SANTIAGO COMMUNITY COLLEGE DISTRICTSANTIAGO CANYON COLLEGE - CONTINUING EDUCATION

BUSINESS SKILLS DEPARTMENTINTRODUCTION TO ANIMATIONS USING FLASH

INSTRUCTOR: Michelle L. Sandoval

Handout # 9

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

21. Go back to the properties Tab22. Select Color Effect>Alpha 92%23. Select the Oval Tool24. Select the Stroke color white and height should be 3px25. Draw a few circles26. Select layer 2 > press F8 to convert all the objects into a Graphic27. Click on frame 80> press F628. Click on frame 40> press F629. Move your objects up on frame 4030. Select layer 231. Right click select Classic Tween32 Select layer 1 > right click> select mask33. Test your Movie

RANCHO SANTIAGO COMMUNITY COLLEGE DISTRICTSANTIAGO CANYON COLLEGE - CONTINUING EDUCATION

BUSINESS SKILLS DEPARTMENTINTRODUCTION TO ANIMATIONS USING FLASH

INSTRUCTOR: Michelle L. Sandoval

FLA

SH C

S5.5

Handout # 9

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 Statesand does not display any visual elements.

Roll Over button contains different information in the Up states and could alsodiffer in the Down state. It displays a visual element when mouse is overthe button.

Animates Rollover buttons This type button is like the Roll over button with thedifference that one or more keyframes have movie clip instance.

Invisible Buttons This type of buttons have a blank keyframe in the Up State andHit state.

FLA

SH C

S5.5

RANCHO SANTIAGO COMMUNITY COLLEGE DISTRICTSANTIAGO CANYON COLLEGE - CONTINUING EDUCATION

BUSINESS SKILLS DEPARTMENTINTRODUCTION TO ANIMATIONS USING FLASH

INSTRUCTOR: Michelle L. Sandoval

Handout # 9

Exercise

Part I

1. Create a new document 500 x 4002. Frames per second (ftps) 223. Color the background gray4. Go to Insert > New Symbol5. Name symbol “rollbutton”6. Go to View> Grid> Show Grid7. Select Line Tool8. Set the stroke to black9. 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” state13. Select the Paint Bucket tool and color this button white14. Press F6 to add a keyframe to the “Down” state15. Select the Paint Bucket Tool and color this button red again16. 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 Timeline18. 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 stage21. Go to Control > Enable simple buttons

RANCHO SANTIAGO COMMUNITY COLLEGE DISTRICTSANTIAGO CANYON COLLEGE - CONTINUING EDUCATION

BUSINESS SKILLS DEPARTMENTINTRODUCTION TO ANIMATIONS USING FLASH

INSTRUCTOR: Michelle L. Sandoval

FLA

SH C

S5.5

Handout # 9

(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 button2. Rename layers to “rollbutton” (lock layer)3. Insert new layer and called it “text”4. Select the Text Tool5. Click on the stage once6. Go to the Properties and set the following

Font type VerdanaFont size 30ptsFont color white

7. Move playhead to the Hit state8. Type the word “Main Page” (word would appear across Up, over and down states)9. Go the Over state and Press F610. Select the text box then change color to a dark gray11. Move Playhead to the Hit state12. 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 F716. Unlock layers17. Turn on “Onion Skin”18. Select the Rectangle tool19. Draw a rectangle the covers the triangle and text20. Disable Onion Skin21. Go the edit bar and Click Scene 122. Test your button (control>test movie)