intro flash win

8/14/2019 Intro Flash Win

1/28

Intro to Macromedia Flash MX Page - 1ITLShttp://itls.saisd.net/

Office of Instructional Technology Services 1702 N. Alamo, Suite 111: San Antonio, TX 78215 Phone: 210-527-1400; Fax: 210-281-0257 Web: http://itls.saisd

Prepared by Tonya Mills, FacilitatorCopyright 2004 Office of Instructional Technology Services, San Antonio ISDMay be reproduced for non-profit, educational use so long as credit is given

Presenting:

Intro to Macromedia Flash MX


2/28


3/28


4/28


Beginning Basics

Opening Macromedia Flash MX

Start the Macromedia Flash MX program by clicking on theFlash MX icon.

This icon may be found inside the Macromedia programfolder or as a desktop shortcut.

Macromedia Flash MX

Timeline

Stage

PanelsArea

Toolbox

WorkArea

PropertiesPanel

The Flash MX window

The following is the basic Flash MX program window. It can be changed/modified atany time.


5/28


Stage..................... Opens automatically when you open the Flash program. It is whereyoull place all content that appears in your movie. The default Stagecolor is white, but it may be changed by using the Properties panel orModify, Document.

Work Area ............ Its the grey area that surrounds that stage. Use this area to storeyour items until they are ready to cross the staging area (during amotion tween).

Timeline ................ Made of rows (layers) and columns (rectangles called frames). UseKeyframes 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 tochange the attributes of any object located on the stage, work area, ortimeline.

Toolbox.................. Contains the selection, drawing, and shape tools.

Panels Area........... Docking area for removable panels, such as Color Mixer, ColorSwatches, Components, Answers, and so on.


6/28


Tools on the Tool bar


7/28


Arrow ............... Lets you select entire objects by clicking an object or dragging to enclose the object within arectangular 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 canswitch between the freeform and straight-edged selection modes.

Pen .................. Draws precise paths as straight lines or smooth, flowing curves. You can create straight orcurved line segments and adjust the angle and length of straight segments and the slope ofcurved 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 bychanging the a drawing mode for the Pencil tool.

Brush ............... Draws brushlike strokes. You can choose a brush size and shape using the Brush toolmodifiers.

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 anotherobject. 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 individualstroke segments or filled areas, or erase by dragging.

Hand ................ Changes the view of the Stage by changing the magnification level or moving the Stage withinthe Flash work environment.

Zoom................ You can view the entire Stage on the screen, or to view just a particular area of your drawingat high magnification, you can change the magnification level. The maximum magnificationdepends 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.


8/28


1. Use the Oval Tool, draw twocircles (fill=transparent,

stroke=black, size 1).

Make sure one circle is larger

than the other.

2. Erase the bottom of the topcircle. Draw a rectangle and

change the Round Rectangle

Radius to 50 points.

3. With the line icon, close thebottom 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 bunnys 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, theEdit Paste.

Drag each selected circle onto

the face.

6. Feet - Draw a circle off to the side

of your drawing (fill=black,


Click and drag the side of the circleforming the shape of a foot.

Select the circle. Click onEdit,

Copy, theEdit Paste.

Select the copy. Click Modify,

Transform, Flip Horizontal.

Drag each selected circle onto the

bottom of the shape.

Bunny Rabbit

Drawing Exercises


9/28


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.

Select the shape and move it

onto the face. Select the face

and move it on top of the body.

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,


Use the black arrow to click and

reshape the circles forming ears.

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 aGraphic.

Click OK.


10/28


1. Use the Oval Tool, draw a

circle (fill=white,


2. Nose - Draw a circle off to

the side of your drawing

(fill=red, stroke=black, size

1).

Drag the selected circle onto

the face

3. Use the Brush Tool to draw a

think outline of the clowns hair

(stroke=black, brush

size=smallest circle).

Draw the outline of the eyebrows

and continue down to the nose/

mouth area.

4. Use the black arrow and

remove all unnecessary lines.

Use the Brush Tool and draw

the ears on the side of thehead (stroke=black, brush

size=smallest circle).

Remove the lines on the side

of the face.

5. Hair - Use the Paint Bucket

Tool to fill in the hair area

with color (fill=purple).

Use the Brush Tool to drawhighlights (stroke=black,


Use the Paint Bucket Tool to

fill in the hairs highlights

(fill=light blue).

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 formthe eye.

Select the circle. Click onEdit,

Copy, theEdit Paste.

Select the copy. Click Modify,

Transform, Flip Horizontal.

Drag each selected circle onto the

face.

Crazy Clown


11/28


7. Zoom in close and use the

Brush Tool to draw the pupils

inside the eyes (fill=black,


Use the Paint Bucket Tool to fill

in the shapes (fill=blue).

Use the Brush Tool and drawthe triangle shapes above and

below the eyes (fill=black,



in the shapes (fill=yellow).

8. Mouth - Use the Brush Tool

draw the mouth, outer area,

(fill=black, brush size=smallest

circle).


in the shape (fill=dark red).

Use the Brush Tool to draw themouth, inner area, (fill=black,



in the shape (fill=pink).

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).

10. Select the entire drawing. Click on

Modify, Group.

Click on Insert, Covert to Symbol.

Name your drawing g_my clown and itsbehavior should be a Graphic.

Click OK.


12/28


1. On Frame 1, move the bunny off of the canvas 2. Click on the Timelines Frame 10.

3. Click on the Timelines Frame 20.

PressF6on 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 pressingEnter on your

keyboard.

4. Right click in the grey area between the keyframes

on the Timeline.

Choose Create Motion Tween from the drop down

menu.

Create Motion Tweens between all keyframes.

Run the animation by pressingEnter on your

keyboard.

Rename your layer Bunny.

Bouncing Bunny

Animation Exercises


13/28


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 pressF6.

In Frame 50, drag your Bunny to the end of the line (Motion Guide). PressEnter to play your animation.


14/28


1. Open the Flash program 2. Click on File, Save As

3. Find the demo_school folder on the

desktop of your computer. Save thefile as school_name in the graphicsfolder.

4. Switch to MS Powerpoint. Open the

school_photos file located in thedemp_school/graphics folder.

Copying the Photos

School Header


15/28


5. Right-click on the photo and choosecopy from the drop down menu.

6. Switch to Flash, right-click on the stageand choose paste from the drop downmenu.

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, clickOK.


16/28


11. Copy and covert all remaining imagesfrom Powerpoint.

12. Click on Window, Library. Move theLibrary window.

13. Click on each image on the Stageand press the Delete key.

14. Remove all images from the Stage.

Copying the Picture

Removing the photos from the Flash Stage area


17/28


15. Reduce the size of the Document.Click on Modify, Document.

16. Type in 200 px as the height. ClickOK.

17. Minimize the Library panel. 18. Click on the Text tool, click on theStage.

19. Type in the name of your school.Change the font size, type, and color

by using the Properties panel.

Typing the Schools Name


18/28


20. Click on the Black Arrow tool. Clickon the schools name.

21. Change the Stage color to grey byusing the main Properties panel.

22. Convert the schools name to a sym-bol (graphic).

Typing the Schools Name


19/28


20/28


21/28


33. Drag the image off of the Stage andonto the work area.

34. Unlock the school name layer.

35. Find Frame 170 on the school name layer. Click once, press F5. Lock the schoolname layer.


22/28


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%.


23/28


24/28


40. Insert a third layer. Name it Phototwo.

41. Click on Frame 10 on the Photo twolayer. Press F6.

Complete this section by: Inserting all photos on different layers and create motion tweens.


25/28


42. Lock all layers. 43. Insert another layer (it should appear

on the top)

44. Right-click on the new layer, chooseMask from the drop down list.

45. The layer underneath will automati-cally nest under the mask layer.

46. Click and drag the other photo layersunderneath the mask layer..

Creating a Mask Layer


26/28


27/28


28/28

I M di Fl h MX P 28

53. Change properties, if needed. ClickOK.

54. Minimize and open thedemo_school/graphics folder. Clicktwice on the school_name.swf file.

55. View the movie.

intro flash win

Documents