1. Using the Drawing & Color Tools

2. Tools window drawing tools –Flash offers built in drawing and color tools –Drawing tools located on the Tools window (ctrl+f2 pc or cmnd+f2 mac) –Flash also supports importing of bitmap and vector graphics including native Photoshop.psd and Illustrator.ai files

3. Drawing Tools –Selection –Subselection –3D rotation –Lasso –Pen –Text –Line –Rectangle –Pencil –Brush –Deco –Bone –Paint Bucket –Eyedropper –Eraser –Move –Magnifying

4. Selection Subselection Free Transform 3D rotation Tools window

5. Lasso Pen Text Line Rectangle Pencil Brush Tools window

6. Deco Bone Paintbucket Eyedropper Eraser Hand Magnifying Glass Tools window

7. Basic Shapes Basic geometric shapes like circles, squares, polygons, etc can be created with the shape tools by clicking and dragging with the tool, on the screen.

8. Create Basic Shapes Examples –Select the rectangle tool in the tool bar –Click and drag on the stage –Select the object and assign a color from the swatches, located at the bottom of tool bar or use the property inspector.

9. Selection and Subselection tools Selection tool Allows you to select shapes, straight or curved lines, once selected you can move or delete shape Subselection tool Allows you to reshape by modifying paths using anchor points or tangent handles, pin-point precision and lets you manipulate the anchor points and tangent handles of paths after you have added them

10. Subselection tool –Allows you to edit paths, segments, and anchor points created with the Pen tool –Icons that appear when working with the Subselection tool Solid dot – Selects a path Hollow dot – Selects an anchor point Arrow head – Selects the tangent handle of a curved line

11. Sub Selection Tool Practice Draw a rectangle Use the sub selection tool to select one line (side) of the rectangle. Double clicking on line will select entire line or all four sides of rectangle Use the Sub Selection Tool to select individual anchor points Select an anchor point and distort the object by moving the anchor point Sub selection tool is also useful for adjusting Bezier curves on curved points

12. Modifying tangent handles using subselection tool –Select a curved point –Arrow head modifies the tangent handle(s) –Drag handle to adjust the curve –Hold Option key down (Mac, Alt key PC) and while moving a tangent handle it will move only that side or that portion representing that part of the tangent handles shape, modifies one part of the curve without modifying the other part

13. Adding curved points and converting to corner practice 1.Draw a triangle using the pen tool 2.With the pen tool click on one of the corners and while holding the mouse button down and while pressing the alt key (pc) drag the out to convert into a smooth point, creates a curve 3.Use the SubSelection tool to round/curve sides by adjusting the tangent handle 4.Try holding down alt key while adjusting tangent handle 5.Convert back into a corner point by clicking on smooth point again

14. Free Transform Tool Use to modify objects, scale, rotate, flip, skew. Gradient Transform Tool Use to customize an existing gradient Located under the Free Transform Tool

15. Free Transform Tool Practice Draw a shape Select the Free Transform Tool Transform the first shape to get bigger Use Ctrl+D (pc) Command+D (Mac) to duplicate a transformation, makes a copy of the shape

16. Lasso Tool Lasso Tool use to select an object or a piece of an object by drawing around it

17. Lines, Strokes, and Fills Lines can be created using the Pencil, Pen, and Line tools Strokes are outlines can be created using the ink bottle (can be seen around fills) Fills created using the Brush and Paint Bucket tools (can be seen with strokes around them)

18. Selecting shapes –When you select a line, stroke, fill, or a combination of these the selection will appear as a dotted mesh –The property inspector will refer to the selection as a “Shape” –Select using selection tool –Once selected you have the option to change its properties, color, stroke size, etc.

19. Stroke and Fills –Flash enables shapes like a rectangle or ovals to have strokes and/or fills –The object must first be selected or the shape tool selected if object has not been created yet –The Fill button must be activated in the toolbox or property inspector to fill an object –The Stroke button must be activated in the toolbox or property inspector to stroke an object –A stroke size can be customized using the Prop Insp

20. Line tool creates straight lines –Select the Line tool on the tool bar –Holding down the Shift key draws lines that are at a 45 degree angle –Line color can be modified with the Ink Bottle and picking a stroke color

21. Pencil tool Three modes control line creation with the pencil tool Straighten (perfect) Smooth (smoothed out) Ink (hand drawn) Select mode by selecting pencil tool and then choose pencil options by clicking on pencil mode icon at bottom of toolbar

22. Pencil tool practice 1.Select the Pencil Tool 2.Draw a wavy line 3.At the bottom of the toolbox, additional options appear 4.Draw another line using one of the other options 5.Three modes control line creation – Straighten (perfect) – Smooth (smoothed out) – Ink (hand drawn)

23. Selecting a line segment Selection tool allows you to select single line segments (of a multi line object like a square) by moving the cursor over the desired line until two perpendicular lines appears You can also select line segment by clicking on the desired side

24. Practice selecting a line segment Draw a rectangle with a stroke and fill, make sure the stroke and fill are dif colors and stroke is thick enough to see easily Select the selection tool (V) Click on the line segment (stroke) of the rectangle, selects the single line or side You could use the technique to select one line (side) of a rectangle that has a stroke and change its properties or even delete Double click on line segment and entire line segment around object is selected change its properties

25. Ink bottle –Enables you to add a stroke around a fill with no stroke or to change colors or modify a current stroke –Pick a stroke color first on the tools window or on the property inspector and then click on the shape with Ink bottle in order to add stroke or change the stroke color

26. Paint Bucket Tool –Add a fill inside of a shape or to change the color of an existing fill

27. Deleting stroke and / or fills –You can delete either a stroke or a fill by first selecting the desired area and pressing delete –Or by double clicking inside an object (with both a stroke and a fill) will select both the stroke and the fill, then press delete

28. Eye Dropper Tool –Use to copy the fill or stroke attributes of an object, such as color, and apply it to another object –Sample color with eye dropper and then it turns into a paint bucket. You can then click on desired object in order to add a fill with the same color as was sampled.

29. Eraser Tool Use to remove unwanted objects such as shapes, lines, or similar objects on stage

30. Oval and Rectangle Tools –Select either the oval or rectangle tool Hint: Holding the shift key while drawing draws perfect shapes –Once selected, there is a Snap to Objects option (click on magnet icon at bottom of Tools bar) –Snap to Objects aligns objects or elements with each other

31. Text Tool Click or click and drag on stage to add text fields to a movie For regular text use Static option On the properties panel there are 3 text options Static Dynamic Input

32. Shapes Tool Rectangle Tool creates squares and rectangles. Hold down the shift key to create a perfect square Oval Tool creates circles and ovals. Hold down the shift key to create a perfect circle

33. Shapes Tool Rectangle primitive same as rectangle except you can use the property inspector to change its characteristics Oval primitive, same as oval, except you can use the property inspector to change its characteristics Polystar or polygon creates either a polygon or polystar with desired number of sides, click on options on prop inspector to customize

34. Shapes Tool Practice Select either the oval or rectangle tool. Once selected, options available at bottom of Tools toolbar Select Snap to Objects option Snap to Objects aligns objects or elements with each other Draw several objects Hint: Holding Shift key while drawing draws perfect shapes Try spacing them out horizontally so their bottom edges are all the same

35. Brush tool –Used to create new shapes by painting with a selected brush –Brush Tool creates shapes with fills only, no strokes –You can paint with solid colors, gradients, and using even bitmaps as its fill –Brush size and shape options available at the bottom of the Tool bar once brush is selected

36. Brush options Select the Brush tool, options appear at bottom of the Tools toolbar options: Object drawing (vs Merge drawing) Lock Fill Brush Mode Brush Size (diameter/width) Brush Shape (various shapes)

37. Brush tool options Brush tool has several unique options: –Paint Normal –Paint Fills –Paint Behind –Paint Selection –Paint Inside

38. Brush tool, fill not stroke Uses the fill color for its brush color –Brush objects are considered shapes and not lines –That is why fill determines color and not stroke –You can change the color using the paint bucket –You can add a stroke to the object using the ink bottle –If you draw a shape such as a circle which has no fill in the middle (not solid inside circle) you can add a fill with the paint bucket tool

39. Brush tool and the Prop Inspector –You can use the property inspector to modify a fill color or use the paint bucket to add or change a fill Note: If you are wanting to select multiple items for a fill you can press Shift+click on all desire items and then select the fill bucket color box

40. Grouping Objects –How to group several objects into one –Select objects Modify>Group Grouping protects from being affected or affecting other objects A box around object(s) indicates it is a grouped object

41. Color and Swatches Panels –Color panel Window>Color Gives precise control over color –From the Color panel you can customize a color and then choose Add Swatch from the pop-up menu (top right) to add to your swatches –To open the Swatches panel Window > Swatches

42. Pen Tool –Allows you to precisely draw straight and curved lines, the pen tool also allows you to create complex shapes –Shapes created with the Pen tool consist of paths, anchor points, and tangent handles –Shapes created can have a stroke and a fill –Pen Tool creates a straight or a curved lines with Bezier curves

43. Pen Tool –Select the Pen tool, use the Stroke setting on the Tools bar or use the Property Inspector to set stroke –Adjusting the Pen tool Preferences Edit>Preferences>Drawing

44. Pen tool Preferences Edit>Preferences>Drawing –Show pen preview (off by default) lets you preview the line segments as you draw –Show solid points (off by default) displays selected anchor points as solid points and unselected anchor points as hollow points when you use the Sub selection tool –Show precise Cursors (off by default) causes the Pen cursor to appear as a crosshair (helpful for precise drawing and the grid feature)

45. Pen tool Icons associated with using the Pen tool x Draws straight and curved paths to create objects +Adds anchor points to paths -Deletes anchor points from paths oCloses a path Converts a corner point to a curve point and vice versa

46. Pen tool Practice Select the pen tool Create a shape Make sure shape is closed Add a fill using paint bucket Change stroke color Draw a second shape Press the Caps Lock key while working to switch between the cross-hair pointer and the default Pen tool icon. Use the selection tool to select each shapes fill and stroke Double clicking on shape will select both the stroke and fill of the object

47. Pen Tool Additional Practice Add addditonal anchor points to create a more complex shapes Use the pen tool to add new anchor points along a line segment object Use the subselection tool and try moving an anchor point Try selecting an anchor point and and then press delete.

48. Curved Points To Corner Points Practice Select the pen tool Turn off Object Drawing in the bottom of the toolbox Draw a triangle using the pen tool Use the Convert Anchor Point option to round one side (click and drag out on one anchor point) Adjust handles using selection tool to change curve Alt+click (pc) Option+click (Mac) and drag one on the curve handles to move independently Using Pen tool add an anchor point to middle (+) Use the Sub Selection tool and select the new point and move to a new location

49. Eraser Tool Use to remove unwanted areas

50. Color Mixer Panel Practice Open via Window>Color Gives precise control over color Create a unique color From the Color Mixer panel you can customize colors and then choose Add Swatch from the pop-up menu(top right) to add to your color swatches. Add Swatch Find the new Swatch To open the Color Swatches panel, Window> Color Swatches

51. Grouping Objects Many illustrations are composed of various small objects You can group related objects into one object to help select and move them Ungroup an object consisting of multiple objects to modify individual objects Select objects to be grouped using selection tool Modify>Group Grouping objects makes motion tweening available

52. Grouping Objects Practice Draw several objects on stage Select objects using selection tool Modify>Group A box will appear around object(s) indicating it is a grouped object Double click on grouped objects Timeline opens displaying all parts of the group Use the Selection Tool (black arrow) to select an individual object Double clicking on the stage, instead of the object, will return a grouped object to its grouped position.

53. Grids, Guides and Rulers Working with Grids, Guides and Rulers The View menu has options for turning on and editing grids and guides View>Guides View>Grid Temporary guides that can be turned on and off To use the guides, the ruler must be showing View>Ruler Click in ruler and while holding down drag out to create a guide The grid can be edited under the edit grid option Guides, grids and rulers do not display in the finished movie

54. Animating in Flash

55. The Timeline Blank Keyframe Layer and layer nameFrame view Frame(s) Playhead FPS Current frame Elapsed time

56. Keyframing shortcuts FrameF5Adds frames to selected layer. Can extend an existing tween or extend the time an object will stay on stage. KeyframeF6Adds a key frame at desired point. Adds a new key frame which allows a new tween, direction, or object to occur.Enables a change to occur. Signifies a change in motion in animation. Blank Keyframe F7Adds a blank key frame at desired frame. Clears stage of preexisting objects from that layer and frame only. Blank key frame means there are no objects on stage at that frame for that layer only.

57. Frame vs keyframe vs blank keyframe Appearance: Frame Squares/spaces on timeline. Represents a unit of time on the timeline, FPS, frames per second. Keyframe Solid circle in a frame, additional frames are grey and ending frame is still grey with a hollow square, these frames determine the duration or how many frames the keyframe’s object appears. Adding a second keyframe enables a change to occur and tweening to be added. Blank Keyframe Hollow circle

58. Keyframing reviewed Frames F5Adds frames Keyframes F6Adds a key frame Blank Keyframes F7Adds blank key frame Clear KeyframeShift F6Removes a Keyframe, must be a keyframe in that current frame Remove FramesShift F5Deletes frames, can also delete multiple selected frames

59. Inserting Frames Inserting Frames, F5 will add frames to a selected layer Frames (F5) are good to use for static (non-moving) content F5 can be used to extend an existing tween or extend the time an object will appear on stage

60. Inserting Blank Key Frames Inserting a Blank Key Frame (F7) will empty frame so that it is ready for content to be added F7 adds a blank key frame at desired frame and layer only Blank key frames indicate there are no objects on stage for any blank keyframes for that layer only.

61. Inserting Key Frames Inserting a Keyframe (F6) will enable a change to occur F6 adds a new key frame at desired frame and layer Allows a change in shape, location, or color to occur. Key frame can represent the change in the animation.

62. Remove Key Frames There are a few ways to clear and remove key frames: Select the desired key frame To Clear Keyframe, Shift + f6 Or select Modify>Timeline>Clear Keyframe Or right click pc (ctrl+click Mac) and select clear keyframe

63. Remove Frames To clear and remove frames: Select the frame or frames (shift+click allows mult frames) To Clear frame, Shift + f5 Or right click pc, ctrl+click Mac and select clear frame.

64. Movie properties The frame rate can be adjusted by double clicking on the document properties in prop insp It is based on frames per second fps Elapsed time indicates the amount of time that has past in the timeline since frame 1 and is based on the current frame rate Frame view provides options for the timeline display

65. Movie Properties Change a projects properties using the property inspector 1.Click on blank portion of stage 2.Property Inspector displays document properties Sizewidth x height Backgroundcolor of background Frame Ratefps Publish SettingsPublishing flash settings

66. Properties Inspector Reflects the properties of an object that is selected Click on an empty portion of stage to access the properties for controlling movie/project settings. Stage dimensions, frame rate, and background color.

67. Flash file types reviewed.flaProject file.swfMovie file.htmlWebpage, swf is embedded into page.exeWindows projector file.appMac projector file.flv/.f4vFlash video file, Flash requires flv file to use video within flash and flv sits outside of swf file and is referenced also has to be uploaded to web host

68. Previewing movie Pressing Enter plays the movie on stage, only a preview since movieclips with animations in their timeline won’t play Control>Test Movie opens new window with.swf movie file, same.swf movie as would be published when publishing File>Publish Preview>Default-(HTML) F12 Launches movie file.swf in the default web browser

69. Playing inside the flash project Press the enter key or Window>Toolbars>Controller (Displays a controller with playing icons) Playhead moves when project is played and moves across the frames of the timeline Status bar is under the timeline area, gives the current frame the play head is on. Also displays fps and has a onion skinning option However movie clips will not animate their own timelines, since they are independent of main timeline

70. Test Movie SWF Recommended you test movie f12 Some effects are only visible in the test movie mode Test movie allows you to see the movie in a way that is similar to the way that a browser would display it as a.swf file To Test Movie f12 or Control>Test Movie or cntrl+enter pc (cmnd+enter mac)

71. Practice Creating a Flash Movie –Open Flash and create a new file. Save it as practice.fla. –Look in the Property Inspector. The default size is 550x 400 pixels, white background, and 12fps. –Click on the background to change the background color of the stage. –Click on the size to change the size of the stage. –Practice creating a frame by frame animation with no tweening –Draw an object, add a keyframe f6 –Change or move object slightly, press f6 –Change shape or move slightly again –Repeat these steps about 10x

72. Onion Skin –Provides onion skinning (ghosting) of all frames and objects in the timeline –Select Onion Skin icon to turn on/off –Use Onion Skin markers to select the region to show onion skinning –Use the Modify Onion Skin markers icon and then Anchor Onion to lock regions, allows you to scrub through frames in order to better preview –Onion skinning does not show when movie is published

73. Onion Skin Details –It creates the illusion of tissue paper over the layers of images that add to the effect of motion in an animation –Onion skinning creates a ghosted image of the previous frame so that you can see where to place the next image –Select the Onion Skin icon on the bottom of the timeline to turn it on/off –Doesn’t show when published

74. Onion Skin demo Create a new.fla project and create several tweens Use Free transform tool in your animations Turn on Onion Skin, set markers and anchor them Preview, press return File>Publish Preview>default (HTML), onion skin doesn’t publish

75. Reverse frames demo –Create a shape using the drawing tools –Add a second keyframe and animate, shape tween –Select all frames with content –Hold down Alt Pc or Option Mac and drag to last frame that is empty (this will copy selected frames) –Or select desired frames by holding shift key, control click and copy frames, move to blank frame and control click and paste frames –Make sure the newly pasted frames are still highlighted –Click on Modify>Timeline>Reverse Frames (this will reverse the frames –Preview, press return

76. Frames editing options –Frame view options –Frames can contain key frames, blank key frames, or be empty –Inserting Frames F5 –Inserting Key Frames F6 –Inserting Blank Key Frames F7 –Adjusting fps via Property Inspector

77. Frames Demo –Verify fps to be 12fps –Change frame view –Draw an object on stage –Insert a Key Frame(f6) at frame 12 and move or transform shape –Insert Frames (f5) so that object appears through frame 24 –Insert a Blank Key Frame (f7) at frame 36 –Draw a new shape on frame 36 –Shape tween between all the keyframes by selecting layer and choosing shape tween on the prop inspector -end