1. 1-1 OBJ Copyright 2003, Paradigm Publishing Inc. Drawing Fundamentals Macromedia Flash Design & Application

2. 1-2 OBJ Copyright 2003, Paradigm Publishing Inc.  Describe applications for Flash for Web sites and other multimedia projects. Describe applications for Flash for Web sites and other multimedia projects.  List advantages of using Flash for creating graphics and animation. List advantages of using Flash for creating graphics and animation.  Define streaming, bitmap graphics, and vector graphics. Define streaming, bitmap graphics, and vector graphics.  Start Flash MX and identify components in the working environment. Start Flash MX and identify components in the working environment.  Expand and collapse panels. Expand and collapse panels.  Open and close panels. Open and close panels.  Draw basic shapes. Draw basic shapes.  Choose stroke colors, fill colors, line thickness, and line styles for shapes. Choose stroke colors, fill colors, line thickness, and line styles for shapes.  Save a Flash project. Save a Flash project. Performance Objectives

3. 1-3 OBJ Copyright 2003, Paradigm Publishing Inc.  Explain the difference between fla and swf files. Explain the difference between fla and swf files.  Start a new Flash document. Start a new Flash document.  Draw lines, freehand, and brush strokes. Draw lines, freehand, and brush strokes.  Turn on rulers, grids, and guides to assist with drawing shapes. Turn on rulers, grids, and guides to assist with drawing shapes.  Choose appropriate modifiers in the Options section of the toolbox for a tool. Choose appropriate modifiers in the Options section of the toolbox for a tool.  Create a custom fill color. Create a custom fill color.  Move, copy, and delete drawn objects. Move, copy, and delete drawn objects.  Close a Flash document. Close a Flash document.  Create a basic animation by inserting keyframes. Create a basic animation by inserting keyframes.  Describe the difference between ordinary frames and keyframes. Describe the difference between ordinary frames and keyframes.  Use Flash help. Use Flash help.  COMMANDS REVIEW COMMANDS REVIEW Performance Objectives…/2

4. 1-4 OBJ Copyright 2003, Paradigm Publishing Inc. What is Macromedia Flash MX? a software application that creates rich content Web sites multimedia devices - CDROMs

5. 1-5 OBJ Copyright 2003, Paradigm Publishing Inc. create eye-catching graphics create buttons for a user interface Graphics or other elements can be animated to produce stimulating effects and interactivity.

6. 1-6 OBJ Copyright 2003, Paradigm Publishing Inc. A developer creates the sequence of images or imports images and adds special effects. animation sound video This process is referred to as authoring.

7. 1-7 OBJ Copyright 2003, Paradigm Publishing Inc. The content has to be converted to a format that can be viewed by others. Flash Player included in most Web browsers

8. 1-8 OBJ Copyright 2003, Paradigm Publishing Inc. Flash Content on the Web background color behind the word changes as the mouse rolls over it and a new menu appears images move across the page in a sequence

9. 1-9 OBJ Copyright 2003, Paradigm Publishing Inc. Graphic Images - describes images using mathematical equations - small file sizes - fast download time - resized without becoming distorted vector - represented by pixels - large file sizes - slower download time - degrade in quality as they are resized bitmapped

10. 1-10 OBJ Copyright 2003, Paradigm Publishing Inc. Advantages of Using Flash  Vector Graphics  graphics created in Flash are stored as vectors by default  Streaming Technology  multimedia files begin playing instantaneously as data is being transferred  Ease of Use  easy to learn  Compatibility  movie will display consistently in any operating environment

11. 1-11 OBJ Copyright 2003, Paradigm Publishing Inc. Starting Flash  Click Start  Point to All Programs  Point to Macromedia  Click Macromedia Flash MX click the icon on the Desktop OR

12. 1-12 OBJ Copyright 2003, Paradigm Publishing Inc. The Flash Screen Title bar Menu bar Toolbox Timeline Stage Property Inspector Workspace Panels Information bar

13. 1-13 OBJ Copyright 2003, Paradigm Publishing Inc. Screen Components  Stage  where you draw objects and/or place items  Workspace  where you practice drawing techniques or place objects that will be animated on or off the stage  Toolbox  contains the tools needed to draw and modify objects

14. 1-14 OBJ Copyright 2003, Paradigm Publishing Inc. Screen Components…/2  Timeline  where layers and frames are controlled  Panels  contain options for controlling or manipulating the objects on the stage  Property Inspector  displays information and options for the active object

15. 1-15 OBJ Copyright 2003, Paradigm Publishing Inc. Working with Panels panels that are checked are currently open - clicking a checked panel removes it from the screen or collapses it open a panel by clicking Window, and click the panel name

16. 1-16 OBJ Copyright 2003, Paradigm Publishing Inc. Working with Panels…/2 Move handle - hold down left mouse button and drag Collapse arrow - only title bar is visible - click again to expand Options menu - click Close Panel - choices change

17. 1-17 OBJ Copyright 2003, Paradigm Publishing Inc. Drawing Basic Shapes  Click the tool in the Toolbox for the shape that you want to draw  Choose the attributes  line colors, fill colors, line thickness, line styles, and so on  Draw the shape  position crosshair pointer  drag to ending point  release mouse button

18. 1-18 OBJ Copyright 2003, Paradigm Publishing Inc. ToolboxToolbox Arrow Tool (V) Line Tool (N) Pen Tool (P) Oval Tool (O) Pencil Tool (Y) Free Transform Tool (Q) Ink Bottle Tool (S) Eyedropper Tool (I) Hand Tool (H) Black and White No Color Subselection Tool (A) Lasso Tool (L) Text Tool (T) Rectangle Tool (R) Brush Tool (B) Fill Transform Tool (F) Paint Bucket Tool (K) Eraser Tool (E) Zoom Tool (M, Z) Stroke Color Fill Color Swap Colors Options vary depending on active tool

19. 1-19 OBJ Copyright 2003, Paradigm Publishing Inc. Changing the Magnification click View, Magnification OR drag over current setting and type in new setting

20. 1-20 OBJ Copyright 2003, Paradigm Publishing Inc. Selecting Shape Attributes click the Oval tool to draw an oval or a circle click the Stroke color button - the line that outlines a shape is called the stroke line select a color in the palette

21. 1-21 OBJ Copyright 2003, Paradigm Publishing Inc. Selecting Shape Attributes…/2 click the Fill color button - the color that shades the inside of an object is called the fill select a color in the palette

22. 1-22 OBJ Copyright 2003, Paradigm Publishing Inc. Selecting Shape Attributes…/3 hold down the left mouse button and drag to create an oval hold down the Shift key while dragging to create a circle

23. 1-23 OBJ Copyright 2003, Paradigm Publishing Inc. Selecting Shape Attributes…/4 click the Rectangle tool to draw a rectangle or a square change the line thickness by double-clicking over the current value in the Stroke height text box and then keying a new value - can also use slider change the line style by clicking the down arrow next to the Stroke style list box and then clicking the desired line stroke colors and fill colors may also be selected in the Properties panel

24. 1-24 OBJ Copyright 2003, Paradigm Publishing Inc. Selecting Shape Attributes…/5 hold down the left mouse button and drag to create a rectangle hold down the Shift key while dragging to create a square

25. 1-25 OBJ Copyright 2003, Paradigm Publishing Inc. Saving in Flash File, Save or Ctrl + S - to save a Flash document using the existing file name File, Save As or Ctrl + Shift + S - to save a Flash document for the first time or to change the existing file name select drive and folder key file name click Save File, Revert - restores document to its last saved state

26. 1-26 OBJ Copyright 2003, Paradigm Publishing Inc. Flash File Types - automatically assigned to the end of the file name - can only be opened in Flash fla - assigned to movies converted to the Flash Player format - can be viewed in any Web browser swf

27. 1-27 OBJ Copyright 2003, Paradigm Publishing Inc. Starting a New Document File, New or Ctrl + N - a new document is created - document on the screen is moved to the background - bottom of Window menu lists open documents File, New from Template - templates included with Flash

28. 1-28 OBJ Copyright 2003, Paradigm Publishing Inc. Drawing Lines Line Tool draws horizontal, vertical, or diagonal lines

29. 1-29 OBJ Copyright 2003, Paradigm Publishing Inc. Drawing Freehand and Brush Strokes Pencil Tool draw freehand by dragging mouse on the stage Brush Tool draw freehand by dragging mouse on the stage - effect similar to painting

30. 1-30 OBJ Copyright 2003, Paradigm Publishing Inc. Pencil Modes creates straight connected lines from the lines that you draw converts the lines that you draw into smoother curves the shape is as close to your actual dragging actions as possible

31. 1-31 OBJ Copyright 2003, Paradigm Publishing Inc. Brush Modes brush strokes paint over any area brush strokes do not cover the stroke lines brush strokes appear in background brush strokes appear only inside selected objects brush strokes drawn inside one filled object only

32. 1-32 OBJ Copyright 2003, Paradigm Publishing Inc. Other Brush Modifiers Brush SizesBrush Shapes

33. 1-33 OBJ Copyright 2003, Paradigm Publishing Inc. Pen Tool draw straight-edged shapes by clicking anchor points -lines connect the points as you go -used to draw Bézier curves

34. 1-34 OBJ Copyright 2003, Paradigm Publishing Inc. RulersRulers View, Rulers or Ctrl + Alt + Shift + R Pixels = default unit of measurement Modify, Document to change

35. 1-35 OBJ Copyright 2003, Paradigm Publishing Inc. GuidesGuides drag horizontal or vertical guides from the ruler to the stage - helps you place objects on the stage View, Guides, Show Guides or Ctrl + ; to turn off the display of the guidelines

36. 1-36 OBJ Copyright 2003, Paradigm Publishing Inc. GridGrid View, Grid, Show Grid or Ctrl + ' View, Grid, Edit Grid or Ctrl + Alt + G to adjust color, width, or height - another method that helps you place objects on the stage

37. 1-37 OBJ Copyright 2003, Paradigm Publishing Inc. SnappingSnapping Flash will pull a line or object to another object, a grid point, or guidelines as you draw. To turn on or off the snap feature for guides: View, Guides, Snap to Guides or Ctrl + Shift + ; To turn on or off the snap feature for the grid: View, Grid, Snap to Grid or Ctrl + Shift + ' To turn on or off the snap to objects feature: View, Snap to Objects or Ctrl + Shift + /

38. 1-38 OBJ Copyright 2003, Paradigm Publishing Inc. Creating a Custom Fill Color click color wheel button select a color swatch, drag pointer to desired color, and drag brightness slider click to Add to Custom colors

39. 1-39 OBJ Copyright 2003, Paradigm Publishing Inc. Selecting Objects Arrow Tool methods: - click object - double-click object - Shift + click - draw a selection box Lasso Tool Subselection Tool draw a lasso around an irregular group of objects click outline to display the points that define the object

40. 1-40 OBJ Copyright 2003, Paradigm Publishing Inc. Deleting Objects select object or multiple objects click Edit, Clear OR Backspace Delete click Edit, Undo or Ctrl + Z to Undo an action

41. 1-41 OBJ Copyright 2003, Paradigm Publishing Inc. Copying Objects select object(s) click Edit, Copy or Ctrl + C click Edit, Paste or Ctrl + V A duplicate copy of the oval is dropped on the stage and is automatically selected with the original oval now deselected.

42. 1-42 OBJ Copyright 2003, Paradigm Publishing Inc. Moving Objects drag the selected object to desired position As you drag, the outline of the object moves with the pointer.

43. 1-43 OBJ Copyright 2003, Paradigm Publishing Inc. Closing a Document File, Close or Ctrl + W

44. 1-44 OBJ Copyright 2003, Paradigm Publishing Inc. Creating a Basic Animation  Animation  simulation of movement created by playing a series of slightly different graphics over a period of time at a fast rate  Sequence of images stored in frames  default frame rate is 12 fps (frames per second)  Images created in keyframes  automatically generates copies in the frames between the keyframes  Animate by changing contents at various keyframes

45. 1-45 OBJ Copyright 2003, Paradigm Publishing Inc. TimelineTimeline Frames Current Frame Rate Elapsed Time Frame Numbers Playhead

46. 1-46 OBJ Copyright 2003, Paradigm Publishing Inc. FramesFrames  Ordinary Frames  the frames that Flash generates  the frames between the keyframes  Keyframes  the frames that you create where you modify the images  identified by a dot inside the frame solid dot indicates content empty dot indicates blank frame 1 is automatically considered a keyframe

47. 1-47 OBJ Copyright 2003, Paradigm Publishing Inc. Creating the Animation create the content select the frame in the Timeline Insert, Keyframe

48. 1-48 OBJ Copyright 2003, Paradigm Publishing Inc. Creating the Animation…/2 modify the content for the next portion of the movie repeat inserting keyframes and modifying content as desired

49. 1-49 OBJ Copyright 2003, Paradigm Publishing Inc. Viewing the Movie  Pressing Enter allows you to view the movie's animation  The playhead moves along the Timeline as the movie is being played

50. 1-50 OBJ Copyright 2003, Paradigm Publishing Inc. Blank Keyframes Insert, Blank Keyframe blank keyframe is inserted blank stage appears images stored in previous frames

51. 1-51 OBJ Copyright 2003, Paradigm Publishing Inc. Using Help Web-based context-sensitive help is available. Help, Using Flash or F1 CONTENTS selected

52. 1-52 OBJ Copyright 2003, Paradigm Publishing Inc. Using Help…/2 INDEX selected SEARCH selected

53. 1-53 OBJ Copyright 2003, Paradigm Publishing Inc. Using Help…/3 Macromedia Flash Support Center includes searchable TechNotes and online tutorials. Help, Flash Support Center

54. 1-54 OBJ Copyright 2003, Paradigm Publishing Inc. Exiting Flash File, Exit or Ctrl + Q

55. 1-55 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you change the magnification setting? click View, Magnification OR drag over current setting and type in new setting

56. 1-56 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you close a document? File, Close or Ctrl + W

57. 1-57 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you copy selected objects? click Edit, Copy or Ctrl + C

58. 1-58 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you delete selected objects? click Edit, Clear OR Backspace Delete

59. 1-59 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you display the grid? View, Grid, Show Grid or Ctrl + '

60. 1-60 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you display the rulers? View, Rulers or Ctrl + Alt + Shift + R

61. 1-61 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you display a panel? open a panel by clicking Window, and click the panel name

62. 1-62 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you edit grid settings? View, Grid, Edit Grid or Ctrl + Alt + G

63. 1-63 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you Exit Flash? File, Exit or Ctrl + Q

64. 1-64 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you access the Help feature? Help, Using Flash or F1

65. 1-65 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you insert a blank keyframe? Insert, Blank Keyframe blank keyframe is inserted

66. 1-66 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you insert a keyframe? Insert, Keyframe

67. 1-67 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you start a new Flash document? File, New or Ctrl + N - a new document is created - document on the screen is moved to the background - bottom of Window menu lists open documents

68. 1-68 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you paste copied or cut objects? click Edit, Paste or Ctrl + V

69. 1-69 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you save a Flash document using the existing file name? File, Save or Ctrl + S - to save a Flash document using the existing file name

70. 1-70 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you save a Flash document for the first time or when you are changing the existing file name? File, Save As or Ctrl + Shift + S - to save a Flash document for the first time or to change the existing file name

71. 1-71 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you access the Snap to Objects feature? To turn on or off the snap to objects feature: View, Snap to Objects or Ctrl + Shift + /

72. 1-72 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you access the Snap to Grid feature? To turn on or off the snap feature for the grid: View, Grid, Snap to Grid or Ctrl + Shift + '

73. 1-73 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you access the Snap to Guides feature? To turn on or off the snap feature for guides: View, Guides, Snap to Guides or Ctrl + Shift + ;

74. 1-74 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you Undo an action? click Edit, Undo or Ctrl + Z to Undo an action

75. 1-75 OBJ Copyright 2003, Paradigm Publishing Inc. Working with Text and Editing Drawn Objects Coming Next