1. © 2010 Delmar, Cengage Learning Chapter 2: Drawing Objects in Adobe Flash

2. © 2010 Delmar Cengage Learning Chapter 2 Lessons 1.Use the Flash drawing tools 2.Select objects and apply colors 3.Work with drawn objects 4.Work with text and text objects 5.Work with layers and objects

3. © 2010 Delmar Cengage Learning Drawing Objects in Adobe Flash Flash creates and manipulates vector graphics Vector format vs. bitmap format –Bitmap graphics are based on pixels –Altering pixels can result in jagged edges

4. © 2010 Delmar Cengage Learning Vector Graphics Represent images using lines, curves Can resize without losing image quality Generally smaller than bitmap images Not as effective at bitmaps for photo-realistic images

5. © 2010 Delmar Cengage Learning Modifying Vectors Objects created using Flash drawing tools have a stroke, a fill, or both Strokes can be segmented into smaller lines You can modify the size, shape, rotation, and color of each stroke, fill and segment

6. © 2010 Delmar Cengage Learning Flash Drawing Modes Merge Drawing Model Object Drawing Model

7. © 2010 Delmar Cengage Learning Flash Drawing Tools Selection –Used to select an object or parts of an object such as the stroke or fill, and to reshape objects Subselection –Used to select, drag, and reshape Free Transform –Used to transform objects by rotating, scaling, skewing, and distorting Gradient Transform –Used to transform a gradient fill by adjusting the size, direction, or center of the fill

8. © 2010 Delmar Cengage Learning The Drawing Tools Lasso –Used to select objects or parts of objects Pen –Used to draw lines and curves by creating a series of dots Text –Used to create and edit text

9. © 2010 Delmar Cengage Learning The Drawing Tools Line –Used to draw straight lines Oval –Used to draw oval and circular shapes Rectangle –Used to draw rectangular and square shapes Polystar –Used to draw polygons and stars

10. © 2010 Delmar Cengage Learning The Drawing Tools Pencil –Used to draw freehand lines Brush –Used to paint with brush-like strokes Ink Bottle –Used to apply line colors and thickness to a stroke

11. © 2010 Delmar Cengage Learning The Drawing Tools Paint Bucket –Used to fill enclosed areas of a drawing with color Eyedropper –Used to copy stroke, fill and text attribute from one object to another Eraser –Used to erase lines and fills

12. © 2010 Delmar Cengage Learning Fig. 1: Flash Tools

13. © 2010 Delmar Cengage Learning Working with Grouped Tools To display a list of grouped tools, you click the tool and hold the mouse button until the menu opens. You know a tool is a grouped tool if you see an arrow in the lower-right corner of the tool icon.

14. © 2010 Delmar Cengage Learning Working with Tool Options Some tools have additional options that allow you to modify their use. If additional options for a tool are available, they appear at the bottom of the Tools panel in the Options area when the tool is selected. If the option has a menu associated with it, then the option icon will have an arrow in the lower-right corner.

15. © 2010 Delmar Cengage Learning Positioning Objects on the Stage Position objects using rulers, gridlines, and guides found on the View menu. In addition to using rulers and guides to help place objects, you can create a new layer as a Guide layer that you use to position objects on the Stage. Position objects using Align options.

16. © 2010 Delmar Cengage Learning Fig. 2: Using Rulers to Position an Object

17. © 2010 Delmar Cengage Learning Fig. 3: Using Gridlines to Position an Object

18. © 2010 Delmar Cengage Learning Fig. 5: Tool Name on the Tools Panel Your settings may vary Point to a tool to display its name Stroke Color tool (red selected) Fill Color tool (blue selected)

19. © 2010 Delmar Cengage Learning Fig. 8: Setting Anchor Points to Draw an Arrow

20. © 2010 Delmar Cengage Learning Fig. 10: Images Drawn Using Drawing Tools

21. © 2010 Delmar Cengage Learning Fig. 11: Dot Pattern Indicating Object Is Selected

22. © 2010 Delmar Cengage Learning Selecting Objects Before you can edit a drawing, you first must select the object, or part of the objects –Objects are made up of stroke(s) and a fill –Strokes and fills can be selected independently Strokes can have several segments

23. © 2010 Delmar Cengage Learning Using the Selection Tool To select only the fill, click just the fill To select only the stroke, click just the stroke To select both the fill and the stroke, double- click the object or draw a marquee around it To select part of an object, drag a marquee that defines the area you wish to select To deselect an item(s), click a blank area of the stage

24. © 2010 Delmar Cengage Learning Fig. 14: Selected Objects Unselected Stroke and Fill selected Stroke selected Fill selected Group selected Part of object selected

25. © 2010 Delmar Cengage Learning Using the Lasso Tool Provides more flexibility when selecting an area of the stage Use the tool in a freehand manner to select any size and shape of area Use the Polygon Mode option to draw straight lines and connect them

26. © 2010 Delmar Cengage Learning Drawing Model Modes Merge Drawing Model mode –Stroke and fill are separate –Stroke and fill can be individually selected Object Drawing Model mode –Stroke and fill are combined and cannot be selected individually –Use the Break Apart option from the Modify menu to separate the stroke and fill

27. © 2010 Delmar Cengage Learning Object Drawing Model In either mode you can turn off the fill or the stroke when drawing an object You can toggle between the two modes using the Object Drawing icon in the options section of the Tool panel

28. © 2010 Delmar Cengage Learning Working with Colors Change color of the stroke or fill Stroke Color and Fill Color tool –Located on colors section of Tool panel –Click and select a color swatch on the color palette The Color palette –Can type in a six character code that represents the RGB values

29. © 2010 Delmar Cengage Learning Fig. 16: Color Palette Showing the Hexadecimal Number Hexadecimal number for shade of gold color

30. © 2010 Delmar Cengage Learning Working with Gradients A gradient is a color fill that makes a gradual transition from one color to another Apply a gradient with the Paint Bucket Tool The position of the Paint Bucket Tool determines the direction of the gradient fill

31. © 2010 Delmar Cengage Learning Fig. 24: Gradient Transform Handles Handles are used to adjust the gradient effect

32. © 2010 Delmar Cengage Learning Copying and Moving Objects Objects can be copied and pasted You move an object by: –selecting it and dragging it to a new location –You precisely position an object by selecting it and then pressing the arrow keys, which move the selection up, down, left, and right in small increments –In addition, the X and Y coordinates in the Property inspector can be used to position an object exactly on the stage

33. © 2010 Delmar Cengage Learning Transforming Objects Objects can be transformed with the Free Transform Tool –Select the object, then the tool to display the eight square-shaped handles and center circular transformation point –Rotate and Skew, Scale, Distort, Envelope

34. © 2010 Delmar Cengage Learning Resizing an Object Objects can be enlarged or reduced in size Use the Scale option of the Free Transform tool –Drag corner handles to resize the object without changing its proportions –If you drag one of the middle handles, the object will be reshaped as taller, shorter, wider, or narrower

35. © 2010 Delmar Cengage Learning Rotating and Skewing an Object Select the object, click the Free Transform tool, click the Rotate and Skew option Use the Distort and Envelope options to reshape an object by dragging its handles

36. © 2010 Delmar Cengage Learning Fig. 26: Using Handles to Manipulate an Object Drag corner handle to rotate an object Drag middle handle to skew an object

37. © 2010 Delmar Cengage Learning Reshaping a Segment of an Object The Sub-selection tool can be used to reshape a segment of an object The Selection tool can be used to reshape the edge of an object –When you point to the edge, the pointer displays an arc symbol –You can drag the edge of an object by using the Arc pointer –If the selection tool points to a corner of an object, the pointer displays an L-shaped symbol

38. © 2010 Delmar Cengage Learning Fig. 27: Using the Selection Tool to Distort an Object

39. © 2010 Delmar Cengage Learning Flipping an Object You can use a Flip option on the Transform menu to flip an object horizontally or vertically The Remove Transform Command allows you to restore an object to its original state

40. © 2010 Delmar Cengage Learning Fig. 32: Using the Transform Panel to Rotate an Object

41. © 2010 Delmar Cengage Learning Fig. 35: Using the Selection Tool to Drag an Edge to Reshape an Object Click here, then drag

42. © 2010 Delmar Cengage Learning Fig. 37: Setting the Corner Radius of Two Corners Your values will differ Type the values Use the slider to quickly change the radius of the corners

43. © 2010 Delmar Cengage Learning Work with Text Flash provides a lot of flexibility when formatting text –Typeface (font) –Size –Style (bold, italic) –Color (including gradients) –Transformation

44. © 2010 Delmar Cengage Learning Entering Text and Changing the Text Block Text is entered into “Text Blocks” Text Blocks expand as more text is entered and may extend beyond the edge of the stage You can adjust the size to a fixed width by dragging the handle in the upper right corner

45. © 2010 Delmar Cengage Learning Fig. 41: Using the Text Tool Text tool pointer on the Stage Empty text block created by clicking the Text tool Text block before resizing Text block after resizing Handle indicating a fixed width for the text block Handle used to resize the text block

46. © 2010 Delmar Cengage Learning Changing Text Attributes The Properties panel allows you to change the font, size, and style of a single character or an entire text block

47. © 2010 Delmar Cengage Learning Fig. 47: The Filters Option in the Property Panel

48. © 2010 Delmar Cengage Learning Working with Paragraphs Flash acts similar to a word processor You can align paragraphs –Left, Right, Center, Justified Use the Properties panel to: –Set margins, indents, and line spacing

49. © 2010 Delmar Cengage Learning Transforming Text Text is an object, and can therefore be transformed like other objects in Flash –The entire text block gets transformed Use “Break Apart” command to transform individual letters

50. © 2010 Delmar Cengage Learning Fig. 48: Skewing the Text

51. © 2010 Delmar Cengage Learning Fig. 49: Reshaping a Letter Drag this handle; notice the lines are drawn from the anchor points on either side of the anchor point being dragged

52. © 2010 Delmar Cengage Learning Learning about Layers Two types of spatial organization –Position of objects on the stage –Stacking order of objects that overlap Layers are used on a timeline as a way to organize objects Placing objects on their own layer makes them easier to work with

53. © 2010 Delmar Cengage Learning Five Types of Layers Normal (default layer type) –All objects on these layers appear in the movie Guide (Standard and Motion) –Standard guide layers serve as a reference point for positioning objects on the stage –Motion guide layers are used to create a path for animated objects to follow

54. © 2010 Delmar Cengage Learning Six Types of Layers Mask –A layer that contains and reveals portions of another layer Masked –A layer that contains the objects that are hidden and revealed by a Mask layer Folder –A layer that can contain other layers

55. © 2010 Delmar Cengage Learning Working with Layers Using the Layer Properties dialog box allows you to: –Specify the type of a layer –Name a layer –Show/Hide a layer –Lock a layer –View layers as outlines

56. © 2010 Delmar Cengage Learning Fig. 51: Layer Properties Dialog Box

57. © 2010 Delmar Cengage Learning Fig. 52: Layers Section of the Timeline Show or Hide All Layers Lock or Unlock All Layers New Layer icon Icon indicates that the layer has been selected but it cannot be edited Show or hide this layer Padlock indicates this layer is locked Lock or Unlock This Layer Show All Layers as Outlines

58. © 2010 Delmar Cengage Learning Using a Guide Layer Used to align objects on the stage –Use the Layer Properties Dialog box to set the layer as a guide –Turn on “Snap to Guides” –Drag the desired object to the guide line

59. © 2010 Delmar Cengage Learning Fig. 53: A Guide Layer Line drawn on a Guide layer

60. © 2010 Delmar Cengage Learning Distributing Text to Layers Used when text blocks are made up of more than one character Distributes text to its own respective layer

61. © 2010 Delmar Cengage Learning Fig. 55: Distributing Text to Layers

62. © 2010 Delmar Cengage Learning Using Folder Layers Allows you to organize layers by creating folders and grouping other layers in them

63. © 2010 Delmar Cengage Learning Fig. 56: A Folder Layer

64. © 2010 Delmar Cengage Learning Chapter 2 Summary 1.Use the Flash drawing tools 2.Select objects and apply colors 3.Work with drawn objects 4.Work with text and text objects 5.Work with layers and objects