Intro Flash Win
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Intro Flash Win as PDF for free.
More details
- Words: 2,723
- Pages: 28
Presenting:
Intro to Macromedia Flash MX
Prepared by Tonya Mills, Facilitator Copyright 2004 Office of Instructional Technology Services, San Antonio ISD May be reproduced for non-profit, educational use so long as credit is given
Office of Instructional Technology Services
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
1702 N. Alamo, Suite 111: San Antonio, TX 78215
Phone: 210-527-1400; Fax: 210-281-0257
Web: http://itls.saisd.net
Page - 1
Intro to Macromedia Flash MX Published by: The Office of Instructional Technology Services San Antonio ISD 1702 North Alamo San Antonio, Texas 78215 Copyright © 2004 San Antonio ISD. May be reproduced for non-profit, educational use so long as credit is given. For general information on Instructional Technology products and services, please contact: Miguel Guhlin, Director Instructional Technology Services Phone: (210) 527-1400 Fax: (210) 281-0257 Email: [email protected] Web site: http://itls.saisd.net
Direct any questions, comments or corrections to [email protected]. Your assistance will be greatly appreciated.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 2
Table of Contents Topic
Pages
The Flash MX Workspace ........................................................................ 4-5 The Timeline...............................................................................................6 Tools on the Tool bar..................................................................................7 Drawing Exercises Bunny Rabbit ............................................................................................ 8-8 Crazy Clown ........................................................................................... 10-11 Animation Exercises Bouncing Bunny ..................................................................................... 12-13 School Header Copying the Photos ................................................................................ 14-16 Removing the photos from the Flash stage...............................................16 Creating the School’s Name................................................................... 17-18 Creating a shadow effect...........................................................................19 Creating the tweens................................................................................ 20-24 Creating a Mask Layer ........................................................................... 25-27 Exporting the movie................................................................................ 27-28
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 3
Beginning Basics Opening Macromedia Flash MX • •
Start the Macromedia Flash MX program by clicking on the Flash MX icon. This icon may be found inside the Macromedia program folder or as a desktop shortcut. Macromedia Flash MX
The Flash MX window •
The following is the basic Flash MX program window. It can be changed/modified at any time.
Timeline
Toolbox
Panels Area
Stage Work Area Properties Panel
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 4
Stage ..................... Opens automatically when you open the Flash program. It is where you’ll place all content that appears in your movie. The default Stage color is white, but it may be changed by using the Properties panel or Modify, Document. Work Area ............ It’s the grey area that surrounds that stage. Use this area to “store” your items until they are ready to cross the staging area (during a motion tween). Timeline ................ Made of rows (layers) and columns (rectangles called frames). Use Keyframes to show when and when an animation starts or stops.
Properties Panel.... A panel usually located at the bottom of the page that allows you to change the attributes of any object located on the stage, work area, or timeline. Toolbox.................. Contains the selection, drawing, and shape tools. Panels Area........... Docking area for removable panels, such as Color Mixer, Color Swatches, Components, Answers, and so on.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 5
Tools on the Tool bar
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 6
Arrow ............... Lets you select entire objects by clicking an object or dragging to enclose the object within a rectangular selection marquee. Subselection .... Moves or nudges an anchor point (use in conjunction with the pen tool). Line .................. Draws a straight line. Lasso ............... Select objects by drawing either a freehand or a straight-edged selection area. You can switch between the freeform and straight-edged selection modes. Pen .................. Draws precise paths as straight lines or smooth, flowing curves. You can create straight or curved line segments and adjust the angle and length of straight segments and the slope of curved segments. Text ................. Use to type text. Oval ................. Draws an oval shape Rectangle......... Draws an rectangle shape. Pencil ............... Use to draw lines and shapes. Apply smoothing or straightening to the lines and shapes by changing the a drawing mode for the Pencil tool. Brush ............... Draws brushlike strokes. You can choose a brush size and shape using the Brush tool modifiers. Transform ........ Used to resize/scale objects on the stage. Fill Transform... Used to rotate, scale, or skew a fill or gradient. Ink Bottle.......... Changes the stroke attributes of existing objects Paint Bucket..... Changes the fill attributes of existing objects Eyedropper ...... Copies the fill and stroke attributes from one object and immediately apply them to another object. The Eyedropper tool also lets you sample the image in a bitmap to use as a fill. Eraser .............. Removes strokes and fills. You can quickly erase everything on the Stage, erase individual stroke segments or filled areas, or erase by dragging. Hand ................ Changes the view of the Stage by changing the magnification level or moving the Stage within the Flash work environment. Zoom................ You can view the entire Stage on the screen, or to view just a particular area of your drawing at high magnification, you can change the magnification level. The maximum magnification depends on the resolution of your monitor and the document size. Stroke color...... Shows the color palette that will change the color of the stroke attributes of existing objects. Fill Color........... Show the color palette that will change the color of the fill attributes of existing objects.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 7
Drawing Exercises Bunny Rabbit
1.
Use the Oval Tool, draw two circles (fill=transparent, stroke=black, size 1).
2.
Erase the bottom of the top circle. Draw a rectangle and change the Round Rectangle Radius to 50 points.
3.
Make sure one circle is larger than the other.
With the line icon, close the bottom of the top circle (stroke=black, size 1). Use the black arrow to modify the line forming a chin. Draw two lines, using the line icon (stroke=black, size 1). Connect the bunny’s shoulders.
4.
Erase the unnecessary lines in the bottom half. Draw two circles in the top/ bottom half (fill=brown, stroke=black, size 1).
5.
Eyes - Draw a circle off to the side of your drawing (fill=black, stroke=black, size 1). Select the circle. Click on Edit, Copy, the Edit Paste. Drag each selected circle onto the face.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
6.
Feet - Draw a circle off to the side of your drawing (fill=black, stroke=black, size 1). Click and drag the side of the circle forming the shape of a foot. Select the circle. Click on Edit, Copy, the Edit Paste. Select the copy. Click Modify, Transform, Flip Horizontal. Drag each selected circle onto the bottom of the shape. Page - 8
7.
Nose- Draw a small square off to the side of your drawing (fill=red, stroke=black, size 1). Change the Round Rectangle Radius to 0 points. Use the black arrow to narrow the top of the square.
8.
Use the Brush icon and draw the whiskers and hair on the head of the bunny (fill=black, brush size=smallest circle).
9.
Ears - Draw two circles on the top of the head (fill=transparent, stroke=black, size 1). Use the black arrow to click and reshape the circles forming ears.
Select the shape and move it onto the face. Select the face and move it on top of the body.
10. Finishing touches. Ears - Draw a line across the bottom of the ears. Use the Paint Bucket Tool to fill with color (fill=brown).
11. Select the entire drawing. Click on Modify, Group. Click on Insert, Covert to Symbol. Name your drawing g_my bunny and its behavior should be a Graphic. Click OK.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 9
Crazy Clown
1.
Use the Oval Tool, draw a circle (fill=white, stroke=black, size 1).
2.
Nose - Draw a circle off to the side of your drawing (fill=red, stroke=black, size 1).
3.
Drag the selected circle onto the face
4.
Use the black arrow and remove all unnecessary lines. Use the Brush Tool and draw the ears on the side of the head (stroke=black, brush size=smallest circle). Remove the lines on the side of the face.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
5.
Hair - Use the Paint Bucket Tool to fill in the hair area with color (fill=purple). Use the Brush Tool to draw highlights (stroke=black, brush size=smallest circle). Use the Paint Bucket Tool to fill in the hair’s highlights (fill=light blue).
Use the Brush Tool to draw a think outline of the clown’s hair (stroke=black, brush size=smallest circle). Draw the outline of the eyebrows and continue down to the nose/ mouth area.
6.
Face- Use the black arrow and reshape the jaw line. Use the Oval Tool and draw a circle off to the side. Use the black arrow to reshape the circle to form the eye. Select the circle. Click on Edit, Copy, the Edit Paste. Select the copy. Click Modify, Transform, Flip Horizontal. Drag each selected circle onto the face. Page - 10
7.
Zoom in close and use the Brush Tool to draw the pupils inside the eyes (fill=black, brush size=smallest circle). Use the Paint Bucket Tool to fill in the shapes (fill=blue). Use the Brush Tool and draw the triangle shapes above and below the eyes (fill=black, brush size=smallest circle). Use the Paint Bucket Tool to fill in the shapes (fill=yellow).
8.
Mouth - Use the Brush Tool draw the mouth, outer area, (fill=black, brush size=smallest circle). Use the Paint Bucket Tool to fill in the shape (fill=dark red).
9.
Collar - Use the Brush Tool to draw a thin outline and its decorative patterns. Use the Paint Bucket Tool to fill in the shape, (fill=blue, pink, purple, yellow).
Use the Brush Tool to draw the mouth, inner area, (fill=black, brush size=smallest circle). Use the Paint Bucket Tool to fill in the shape (fill=pink).
10. Select the entire drawing. Click on Modify, Group. Click on Insert, Covert to Symbol. Name your drawing g_my clown and its behavior should be a Graphic. Click OK.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 11
Animation Exercises Bouncing Bunny
1.
3.
On Frame 1, move the bunny off of the canvas
Click on the Timeline’s Frame 20.
2.
Click on the Timeline’s Frame 10.
4.
Right click in the grey area between the keyframes on the Timeline.
Press F6 on your keyboard (or Insert, Keyframe) Move the bunny across the canvas. Place keyframes and move the bunny on Frames 30, 40, and 50. Run the animation by pressing Enter on your keyboard.
Choose Create Motion Tween from the drop down menu. Create Motion Tweens between all keyframes. Run the animation by pressing Enter on your keyboard. Rename your layer Bunny.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 12
5.
Right Click on the Bunny Layer, pick Add Motion Guide from the drop down menu. In the Guide layer, use the Brush Tool to trace the path that you want your bunny to hop (fill=blue, brush size=next to smallest circle).
6.
Highlight all frames except for Frame 1. Right click and pick Remove frames from the drop down list. Click on Frame 50 and press F6. In Frame 50, drag your Bunny to the end of the line (Motion Guide). Press Enter to play your animation.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 13
School Header Copying the Photos
1. Open the Flash program
2. Click on File, Save As
3. Find the demo_school folder on the desktop of your computer. Save the file as school_name in the graphics folder.
4. Switch to MS Powerpoint. Open the school_photos file located in the demp_school/graphics folder.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 14
5. Right-click on the photo and choose copy from the drop down menu.
6. Switch to Flash, right-click on the stage and choose paste from the drop down menu.
7. Click once on the image.
8. Click Insert, Convert to Symbol
9. Choose the graphic behavior.
10. Type in the name of the image, click OK.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 15
Copying the Picture 11. Copy and covert all remaining images from Powerpoint.
Removing the photos from the Flash Stage area
12. Click on Window, Library. Move the Library window.
13. Click on each image on the Stage and press the Delete key.
14. Remove all images from the Stage.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 16
Typing the School’s Name
15. Reduce the size of the Document. Click on Modify, Document.
17. Minimize the Library panel.
16. Type in 200 px as the height. Click OK.
18. Click on the Text tool, click on the Stage.
19. Type in the name of your school. Change the font size, type, and color by using the Properties panel.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 17
Typing the School’s Name
20. Click on the Black Arrow tool. Click on the school’s name.
21. Change the Stage color to grey by using the main Properties panel.
22. Convert the school’s name to a symbol (graphic).
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 18
Creating a shadow effect
23. Click twice on the school name to open the symbol.
25. Make a second copy of the text . Change its color to white.
24. Change the color on the text in the Properties panel.
26. Move the second copy on top of the first.. Stagger the second copy to create a shadow effect.
27. Exit out of editing the symbol. Return back to the main Stage.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 19
Creating the tweens (Don’t forget to name and lock your layers)
28. Click twice to changed the name of Layer 1 to school name. Lock the layer.
29. Click on Insert, Layer. Name this layer Photo One.
30. Open your Library. Drag your first graphic from the Library to the Stage.
31. If the Library conflict window opens, choose Replace existing items (not undoable).
32. Click once on the image. Click on the Free Transform tool. Resize the image.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 20
33. Drag the image off of the Stage and onto the work area.
34. Unlock the school name layer.
35. Find Frame 170 on the school name layer. Click once, press F5. Lock the school name layer.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 21
36. Find Frame 50 on the Photo one layer. Click once, press F6.
37. Use the playhead to go back to the beginning of the movie. Click on the image in Frame 1. In the Properties panel, click on the drop down next to Color. Choose Alpha. Change the Alpha to 20%. Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 22
38. Use the playhead move to the last frame in the Photo one layer. Click on the image in Frame 50. Move the image away from its original position.
39. Right-click in the area between the two keyframes in the Photo one layer. Choose Create Motion Tween from the drop down menu. Lock this layer. Press Ctrl-Enter to test your movie. Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 23
40. Insert a third layer. Name it Photo two.
41. Click on Frame 10 on the Photo two layer. Press F6.
Complete this section by: • Inserting all photos on different layers and create motion tweens.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 24
Creating a Mask Layer
42. Lock all layers.
43. Insert another layer (it should appear on the top)
44. Right-click on the new layer, choose Mask from the drop down list.
45. The layer underneath will automatically nest under the mask layer.
46. Click and drag the other photo layers underneath the mask layer..
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 25
47. Click twice and name the mask layer, Mask layer. Unlock the mask layer only.
48. Click on the Rectangle tool. Draw a rectangle on top of the stage area.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 26
47. Right-click on the Mask layer, choose Show Masking from the drop down list.
49. Play the movie by clicking ShiftEnter.
Exporting the movie
50. Click on File, Export.
51. Change to the demo_school/ graphics folder.
52. Type in the name of the file, click Save.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 27
53. Change properties, if needed. Click OK.
54. Minimize and open the demo_school/graphics folder. Click twice on the school_name.swf file.
55. View the movie.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 28
Intro to Macromedia Flash MX
Prepared by Tonya Mills, Facilitator Copyright 2004 Office of Instructional Technology Services, San Antonio ISD May be reproduced for non-profit, educational use so long as credit is given
Office of Instructional Technology Services
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
1702 N. Alamo, Suite 111: San Antonio, TX 78215
Phone: 210-527-1400; Fax: 210-281-0257
Web: http://itls.saisd.net
Page - 1
Intro to Macromedia Flash MX Published by: The Office of Instructional Technology Services San Antonio ISD 1702 North Alamo San Antonio, Texas 78215 Copyright © 2004 San Antonio ISD. May be reproduced for non-profit, educational use so long as credit is given. For general information on Instructional Technology products and services, please contact: Miguel Guhlin, Director Instructional Technology Services Phone: (210) 527-1400 Fax: (210) 281-0257 Email: [email protected] Web site: http://itls.saisd.net
Direct any questions, comments or corrections to [email protected]. Your assistance will be greatly appreciated.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 2
Table of Contents Topic
Pages
The Flash MX Workspace ........................................................................ 4-5 The Timeline...............................................................................................6 Tools on the Tool bar..................................................................................7 Drawing Exercises Bunny Rabbit ............................................................................................ 8-8 Crazy Clown ........................................................................................... 10-11 Animation Exercises Bouncing Bunny ..................................................................................... 12-13 School Header Copying the Photos ................................................................................ 14-16 Removing the photos from the Flash stage...............................................16 Creating the School’s Name................................................................... 17-18 Creating a shadow effect...........................................................................19 Creating the tweens................................................................................ 20-24 Creating a Mask Layer ........................................................................... 25-27 Exporting the movie................................................................................ 27-28
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 3
Beginning Basics Opening Macromedia Flash MX • •
Start the Macromedia Flash MX program by clicking on the Flash MX icon. This icon may be found inside the Macromedia program folder or as a desktop shortcut. Macromedia Flash MX
The Flash MX window •
The following is the basic Flash MX program window. It can be changed/modified at any time.
Timeline
Toolbox
Panels Area
Stage Work Area Properties Panel
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 4
Stage ..................... Opens automatically when you open the Flash program. It is where you’ll place all content that appears in your movie. The default Stage color is white, but it may be changed by using the Properties panel or Modify, Document. Work Area ............ It’s the grey area that surrounds that stage. Use this area to “store” your items until they are ready to cross the staging area (during a motion tween). Timeline ................ Made of rows (layers) and columns (rectangles called frames). Use Keyframes to show when and when an animation starts or stops.
Properties Panel.... A panel usually located at the bottom of the page that allows you to change the attributes of any object located on the stage, work area, or timeline. Toolbox.................. Contains the selection, drawing, and shape tools. Panels Area........... Docking area for removable panels, such as Color Mixer, Color Swatches, Components, Answers, and so on.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 5
Tools on the Tool bar
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 6
Arrow ............... Lets you select entire objects by clicking an object or dragging to enclose the object within a rectangular selection marquee. Subselection .... Moves or nudges an anchor point (use in conjunction with the pen tool). Line .................. Draws a straight line. Lasso ............... Select objects by drawing either a freehand or a straight-edged selection area. You can switch between the freeform and straight-edged selection modes. Pen .................. Draws precise paths as straight lines or smooth, flowing curves. You can create straight or curved line segments and adjust the angle and length of straight segments and the slope of curved segments. Text ................. Use to type text. Oval ................. Draws an oval shape Rectangle......... Draws an rectangle shape. Pencil ............... Use to draw lines and shapes. Apply smoothing or straightening to the lines and shapes by changing the a drawing mode for the Pencil tool. Brush ............... Draws brushlike strokes. You can choose a brush size and shape using the Brush tool modifiers. Transform ........ Used to resize/scale objects on the stage. Fill Transform... Used to rotate, scale, or skew a fill or gradient. Ink Bottle.......... Changes the stroke attributes of existing objects Paint Bucket..... Changes the fill attributes of existing objects Eyedropper ...... Copies the fill and stroke attributes from one object and immediately apply them to another object. The Eyedropper tool also lets you sample the image in a bitmap to use as a fill. Eraser .............. Removes strokes and fills. You can quickly erase everything on the Stage, erase individual stroke segments or filled areas, or erase by dragging. Hand ................ Changes the view of the Stage by changing the magnification level or moving the Stage within the Flash work environment. Zoom................ You can view the entire Stage on the screen, or to view just a particular area of your drawing at high magnification, you can change the magnification level. The maximum magnification depends on the resolution of your monitor and the document size. Stroke color...... Shows the color palette that will change the color of the stroke attributes of existing objects. Fill Color........... Show the color palette that will change the color of the fill attributes of existing objects.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 7
Drawing Exercises Bunny Rabbit
1.
Use the Oval Tool, draw two circles (fill=transparent, stroke=black, size 1).
2.
Erase the bottom of the top circle. Draw a rectangle and change the Round Rectangle Radius to 50 points.
3.
Make sure one circle is larger than the other.
With the line icon, close the bottom of the top circle (stroke=black, size 1). Use the black arrow to modify the line forming a chin. Draw two lines, using the line icon (stroke=black, size 1). Connect the bunny’s shoulders.
4.
Erase the unnecessary lines in the bottom half. Draw two circles in the top/ bottom half (fill=brown, stroke=black, size 1).
5.
Eyes - Draw a circle off to the side of your drawing (fill=black, stroke=black, size 1). Select the circle. Click on Edit, Copy, the Edit Paste. Drag each selected circle onto the face.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
6.
Feet - Draw a circle off to the side of your drawing (fill=black, stroke=black, size 1). Click and drag the side of the circle forming the shape of a foot. Select the circle. Click on Edit, Copy, the Edit Paste. Select the copy. Click Modify, Transform, Flip Horizontal. Drag each selected circle onto the bottom of the shape. Page - 8
7.
Nose- Draw a small square off to the side of your drawing (fill=red, stroke=black, size 1). Change the Round Rectangle Radius to 0 points. Use the black arrow to narrow the top of the square.
8.
Use the Brush icon and draw the whiskers and hair on the head of the bunny (fill=black, brush size=smallest circle).
9.
Ears - Draw two circles on the top of the head (fill=transparent, stroke=black, size 1). Use the black arrow to click and reshape the circles forming ears.
Select the shape and move it onto the face. Select the face and move it on top of the body.
10. Finishing touches. Ears - Draw a line across the bottom of the ears. Use the Paint Bucket Tool to fill with color (fill=brown).
11. Select the entire drawing. Click on Modify, Group. Click on Insert, Covert to Symbol. Name your drawing g_my bunny and its behavior should be a Graphic. Click OK.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 9
Crazy Clown
1.
Use the Oval Tool, draw a circle (fill=white, stroke=black, size 1).
2.
Nose - Draw a circle off to the side of your drawing (fill=red, stroke=black, size 1).
3.
Drag the selected circle onto the face
4.
Use the black arrow and remove all unnecessary lines. Use the Brush Tool and draw the ears on the side of the head (stroke=black, brush size=smallest circle). Remove the lines on the side of the face.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
5.
Hair - Use the Paint Bucket Tool to fill in the hair area with color (fill=purple). Use the Brush Tool to draw highlights (stroke=black, brush size=smallest circle). Use the Paint Bucket Tool to fill in the hair’s highlights (fill=light blue).
Use the Brush Tool to draw a think outline of the clown’s hair (stroke=black, brush size=smallest circle). Draw the outline of the eyebrows and continue down to the nose/ mouth area.
6.
Face- Use the black arrow and reshape the jaw line. Use the Oval Tool and draw a circle off to the side. Use the black arrow to reshape the circle to form the eye. Select the circle. Click on Edit, Copy, the Edit Paste. Select the copy. Click Modify, Transform, Flip Horizontal. Drag each selected circle onto the face. Page - 10
7.
Zoom in close and use the Brush Tool to draw the pupils inside the eyes (fill=black, brush size=smallest circle). Use the Paint Bucket Tool to fill in the shapes (fill=blue). Use the Brush Tool and draw the triangle shapes above and below the eyes (fill=black, brush size=smallest circle). Use the Paint Bucket Tool to fill in the shapes (fill=yellow).
8.
Mouth - Use the Brush Tool draw the mouth, outer area, (fill=black, brush size=smallest circle). Use the Paint Bucket Tool to fill in the shape (fill=dark red).
9.
Collar - Use the Brush Tool to draw a thin outline and its decorative patterns. Use the Paint Bucket Tool to fill in the shape, (fill=blue, pink, purple, yellow).
Use the Brush Tool to draw the mouth, inner area, (fill=black, brush size=smallest circle). Use the Paint Bucket Tool to fill in the shape (fill=pink).
10. Select the entire drawing. Click on Modify, Group. Click on Insert, Covert to Symbol. Name your drawing g_my clown and its behavior should be a Graphic. Click OK.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 11
Animation Exercises Bouncing Bunny
1.
3.
On Frame 1, move the bunny off of the canvas
Click on the Timeline’s Frame 20.
2.
Click on the Timeline’s Frame 10.
4.
Right click in the grey area between the keyframes on the Timeline.
Press F6 on your keyboard (or Insert, Keyframe) Move the bunny across the canvas. Place keyframes and move the bunny on Frames 30, 40, and 50. Run the animation by pressing Enter on your keyboard.
Choose Create Motion Tween from the drop down menu. Create Motion Tweens between all keyframes. Run the animation by pressing Enter on your keyboard. Rename your layer Bunny.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 12
5.
Right Click on the Bunny Layer, pick Add Motion Guide from the drop down menu. In the Guide layer, use the Brush Tool to trace the path that you want your bunny to hop (fill=blue, brush size=next to smallest circle).
6.
Highlight all frames except for Frame 1. Right click and pick Remove frames from the drop down list. Click on Frame 50 and press F6. In Frame 50, drag your Bunny to the end of the line (Motion Guide). Press Enter to play your animation.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 13
School Header Copying the Photos
1. Open the Flash program
2. Click on File, Save As
3. Find the demo_school folder on the desktop of your computer. Save the file as school_name in the graphics folder.
4. Switch to MS Powerpoint. Open the school_photos file located in the demp_school/graphics folder.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 14
5. Right-click on the photo and choose copy from the drop down menu.
6. Switch to Flash, right-click on the stage and choose paste from the drop down menu.
7. Click once on the image.
8. Click Insert, Convert to Symbol
9. Choose the graphic behavior.
10. Type in the name of the image, click OK.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 15
Copying the Picture 11. Copy and covert all remaining images from Powerpoint.
Removing the photos from the Flash Stage area
12. Click on Window, Library. Move the Library window.
13. Click on each image on the Stage and press the Delete key.
14. Remove all images from the Stage.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 16
Typing the School’s Name
15. Reduce the size of the Document. Click on Modify, Document.
17. Minimize the Library panel.
16. Type in 200 px as the height. Click OK.
18. Click on the Text tool, click on the Stage.
19. Type in the name of your school. Change the font size, type, and color by using the Properties panel.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 17
Typing the School’s Name
20. Click on the Black Arrow tool. Click on the school’s name.
21. Change the Stage color to grey by using the main Properties panel.
22. Convert the school’s name to a symbol (graphic).
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 18
Creating a shadow effect
23. Click twice on the school name to open the symbol.
25. Make a second copy of the text . Change its color to white.
24. Change the color on the text in the Properties panel.
26. Move the second copy on top of the first.. Stagger the second copy to create a shadow effect.
27. Exit out of editing the symbol. Return back to the main Stage.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 19
Creating the tweens (Don’t forget to name and lock your layers)
28. Click twice to changed the name of Layer 1 to school name. Lock the layer.
29. Click on Insert, Layer. Name this layer Photo One.
30. Open your Library. Drag your first graphic from the Library to the Stage.
31. If the Library conflict window opens, choose Replace existing items (not undoable).
32. Click once on the image. Click on the Free Transform tool. Resize the image.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 20
33. Drag the image off of the Stage and onto the work area.
34. Unlock the school name layer.
35. Find Frame 170 on the school name layer. Click once, press F5. Lock the school name layer.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 21
36. Find Frame 50 on the Photo one layer. Click once, press F6.
37. Use the playhead to go back to the beginning of the movie. Click on the image in Frame 1. In the Properties panel, click on the drop down next to Color. Choose Alpha. Change the Alpha to 20%. Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 22
38. Use the playhead move to the last frame in the Photo one layer. Click on the image in Frame 50. Move the image away from its original position.
39. Right-click in the area between the two keyframes in the Photo one layer. Choose Create Motion Tween from the drop down menu. Lock this layer. Press Ctrl-Enter to test your movie. Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 23
40. Insert a third layer. Name it Photo two.
41. Click on Frame 10 on the Photo two layer. Press F6.
Complete this section by: • Inserting all photos on different layers and create motion tweens.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 24
Creating a Mask Layer
42. Lock all layers.
43. Insert another layer (it should appear on the top)
44. Right-click on the new layer, choose Mask from the drop down list.
45. The layer underneath will automatically nest under the mask layer.
46. Click and drag the other photo layers underneath the mask layer..
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 25
47. Click twice and name the mask layer, Mask layer. Unlock the mask layer only.
48. Click on the Rectangle tool. Draw a rectangle on top of the stage area.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 26
47. Right-click on the Mask layer, choose Show Masking from the drop down list.
49. Play the movie by clicking ShiftEnter.
Exporting the movie
50. Click on File, Export.
51. Change to the demo_school/ graphics folder.
52. Type in the name of the file, click Save.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 27
53. Change properties, if needed. Click OK.
54. Minimize and open the demo_school/graphics folder. Click twice on the school_name.swf file.
55. View the movie.
Intro to Macromedia Flash MX ITLS—http://itls.saisd.net/
Page - 28
Related Documents
Intro Flash Win
December 2019 12
Intro Flash
October 2019 12
Flash Intro 1
April 2020 2
Win
December 2019 48
Win
July 2020 12
Win
June 2020 17More Documents from ""
Excel Training Worksheets
May 2020 15
Silktest And Win Runner Feature
December 2019 14
Excel Shortcuts
May 2020 16
Power Point Shortcut
May 2020 5
Selava Ill
April 2020 14