Master Drawing in Flash MX: Tools, Techniques, and Transformation

2. OVERVIEW Chapter Lessons • Use the Macromedia Flash drawing tools • Edit drawings • Work with objects • Work with text • Work with layers Drawing in Macromedia Flash

3. INTRODUCTION Drawing in Flash MX • Flash creates and manipulates vector graphics • Vector format Vs Bitmap format • Bitmap graphics are based on pixels • Altering pixels can result in jagged edges Drawing in Macromedia Flash

4. INTRODUCTION Vector Graphics • Native to Flash • Represent an image using lines and curves • Can resize without losing image quality • Generally smaller than bitmap images – Good for Web sites • Not as effective at bitmaps for photo-realistic images Drawing in Macromedia Flash

5. INTRODUCTION Modifying vectors • Vector objects have a stroke, 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 Drawing in Macromedia Flash

6. LESSON 1 The 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 an object • Anchor Points • LINE-Used to draw straight lines • LASSO- Used to select objects or parts of objects Drawing in Macromedia Flash

7. LESSON 1 The Drawing Tools • PEN- Used to draw lines and curves by creating a series of dots • TEXT-To create and edit text • OVAL-To draw oval and circular shapes • RECTANGLE- To draw rectangular and square shapes • PENCIL-Used to draw freehand lines • BRUSH- Used to paint with brush-like strokes Drawing in Macromedia Flash

8. LESSON 1 The Drawing Tools • FREE TRANSFORM-Used to transform objects by rotating, scaling, skewing, etc • FILL TRANSFORM-Used to transform a gradient fill • INK BOTTLE-Used to apply line colors and thickness to a stroke • PAINT BUCKET-Used to fill enclose areas of a drawing with color Drawing in Macromedia Flash

9. LESSON 1 The Drawing Tools • EYEDROPPER-Used to copy stroke, fill and text attribute from one object to another • ERASER-Used to erase lines and fills • Many of the tools have options that you should become familiar with Drawing in Macromedia Flash

10. LESSON 1 Flash Drawing Toolbox Point to a tool to display its name Drawing in Macromedia Flash

11. LESSON 1 Tool options Pencil Tool Options Changing the Brush Size Drawing in Macromedia Flash

12. LESSON 2 Selecting Objects • Before you can edit a drawing, you first must select the object • Strokes and Fills can be selected independently • Strokes can have several segments Drawing in Macromedia Flash

13. LESSON 2 Using the Selection Tools • Arrow Tool -Used to select part or all of an object • To select multiple objects hold down “Shift” • Lasso Tool -Provides more flexibility when selecting an area of the stage • Freehand • Polygon Drawing in Macromedia Flash

14. LESSON 2 Using the Selection Tools Stroke selected Fill selected Stroke and Fill selected Group selected Unselected Drawing in Macromedia Flash

15. LESSON 2 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 Drawing in Macromedia Flash

16. LESSON 2 Working with Gradients The position of the Paint Bucket Tool determines the direction of the gradient fill Fill Transform Handles Drawing in Macromedia Flash

17. LESSON 3 Working with objects • Objects can be copied and pasted • Objects can be transformed with the Free Transform Tool • Select the object, then the tool to display the eight rectangular handles and center circular transformation point. • Rotate and Skew, Scale, Distort, Envelope Drawing in Macromedia Flash

18. LESSON 3 Free Transform Tool Rotate an Object around its Transform-ation point Scale with Corner handles Drag middle handle to skew an object Drag corner handle to Rotate an object Drawing in Macromedia Flash

19. LESSON 3 Reshaping a segment of an Object • The Selection tool can be used to reshape the edge of an object • The pointer is context-sensitive • The Arc pointer drags out curved shapes • The L shaped pointer drags out corners of the object Drawing in Macromedia Flash

20. LESSON 3 Distorting with the Arrow and sub-selection tools Using the Selection tool’s Arc Pointer to reshape an object Using the Subselection Tool to drag a handle and reshape an object Drawing in Macromedia Flash

21. LESSON 3 Other transformations • You can use other options to flip an object horizontally or vertically • The Remove Transform Command allows you to restore an object to its original state Drawing in Macromedia Flash

22. LESSON 4 Treating text • Flash provides a lot of flexibility when formatting text • Font • Size • Style • Color • Transformation Drawing in Macromedia Flash

23. LESSON 4 Entering Text and altering 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 Drawing in Macromedia Flash

24. LESSON 4 Changing Text Attributes • The Properties panel allows you to change the font, size and style of a single character or an entire text block The Properties Panel when a text object is selected Drawing in Macromedia Flash

25. LESSON 4 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, line spacing Drawing in Macromedia Flash

26. LESSON 4 Transforming Text • Text is an object, and can therefore be transformed like other objects in Flash • The entire block gets transformed • Use “Break Apart” command to transform individual letters Drawing in Macromedia Flash

27. LESSON 4 Transforming Text Skewing a text block Reshaping a letter after the text block has been “broken apart” Drawing in Macromedia Flash

28. LESSON 5 Introduction to Layers • Layers are used on the timeline to organize objects • Placing objects on their own layer makes them easier to work with • Six layer types Drawing in Macromedia Flash

29. LESSON 5 The Six Layer Types • 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 Drawing in Macromedia Flash

30. LESSON 5 The Six Layer Types • Guided • A layer that contains an animated object, linked to a Motion Guide layer • 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 Drawing in Macromedia Flash

31. LESSON 5 The Six Layer Types • Folder • A layer that can contain other layers Show/Hide All Layers Show All Layers as Outlines Lock/Unlock All Layers Lock/Unlock This Layers Show/Hide this Layer Drawing in Macromedia Flash

32. LESSON 5 Working with Layers • Using the Layer Properties Dialog box, and the Layer section, you can • Name a layer • Lock a layer • View layers as outlines Drawing in Macromedia Flash

33. LESSON 5 Using a Guide Layer • Used to align objects • 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 • Guide is not visible in exported swf Drawing in Macromedia Flash

34. LESSON 5 Distributing Text to Layers • Used when text blocks are made up of more than one character • Distributes text to its own respective layer Distributing text to layers Drawing in Macromedia Flash

35. LESSON 5 Using Folder Layers • Allows you to organize layers by creating folders and grouping other layers in them A folder layer Drawing in Macromedia Flash

36. SUMMARY Chapter B Tasks • Use the Macromedia Flash drawing tools • Edit drawings • Work with objects • Work with text • Work with layers Drawing in Macromedia Flash