tutorial 2 drawing shapes, adding text, and creating symbols

32
Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

Upload: donald-plunket

Post on 01-Apr-2015

231 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

Tutorial 2

Drawing Shapes, Adding Text, and Creating Symbols

Page 2: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPObjectives• Draw lines, curves, ovals, and rectangles• Apply stroke and fill colors• Modify strokes and fills• Transform graphic objects using the Free

Transform tool • Create text blocks

New Perspectives on Adobe Flash CS4 2

Page 3: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPObjectives• Export a graphic for use in a Web site• Learn how to use the History panel• Create symbols and instances of symbols• Organize symbols in the Library panel• Apply filters to symbol instances and text

New Perspectives on Adobe Flash CS4 3

Page 4: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPDrawing Lines and Shapes• Tools for drawing lines and curves– Line, Pen, and Pencil tools

• Tools for drawing basic shapes –Oval, Rectangle, PolyStar, Brush, Rectangle

Primitive, and Oval Primitive tools

New Perspectives on Adobe Flash CS4 4

Page 5: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPSketch of the Web Site Banner for Jenny’s Oyster Hut Web site

New Perspectives on Adobe Flash CS4 5

Page 6: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPUsing the Oval, Rectangle, and PolyStar Tools• Common technique for using the three tools– Select the tool on the toolbar– Select colors for the stroke and fill– Click and drag the pointer on the Stage

• PolyStar tool: used to draw polygons or star shapes

• The Oval tool can be used to draw a perfect circle• The Rectangle tool can draw a perfect square

New Perspectives on Adobe Flash CS4 6

Page 7: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPStar Shapes with Different Point Sizes

New Perspectives on Adobe Flash CS4 7

Page 8: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPUsing the Pencil Tool• Used to draw straight and free-form lines• Features common to Pencil and Line tools– Color, height, and style options for lines

• Pencil Mode modifier

New Perspectives on Adobe Flash CS4 8

Page 9: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPFins Drawn on the Fish

New Perspectives on Adobe Flash CS4 9

Page 10: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPPaint Bucket Tool• Change color of fill or add fill for enclosed area• Using the Paint bucket tool– Select tool from the Tools panel– Select a fill color – Click an object’s enclosed area using tool’s pointer

• Gap Size modifier – Determines how tool will paint partially enclosed

areas

New Perspectives on Adobe Flash CS4 10

Page 11: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPApplying a Fill Color

New Perspectives on Adobe Flash CS4 11

Page 12: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPEyedropper Tool• Copy fill or stroke properties of an object• Using the Eyedropper Tool– Click the Eyedropper tool in the Tools panel– Click the stroke or fill whose attributes are to be

copied– Click the stroke or fill to apply the copied

attributes

New Perspectives on Adobe Flash CS4 12

Page 13: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPFill Color Copied from the Green Oval to the Top Fin

New Perspectives on Adobe Flash CS4 13

Page 14: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPUsing Primitive Tools• Rectangle Primitive and Oval Primitive tools– Create rectangles and ovals that are treated as

separate objects• You can modify characteristics using the Property

inspector

New Perspectives on Adobe Flash CS4 14

Page 15: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPShapes Drawn with the Primitive Tools

New Perspectives on Adobe Flash CS4 15

Page 16: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPFree Transform Tool• Actions: move, rotate, scale, skew, or distort objects• Transform entire object or particular stroke or fill• Using the Free Transform tool– Click the Free Transform tool on the Tools panel– Select the object you want to transform– Click one of the modifiers on the Tools panel– Drag the bounding box handles to modify the object

• Modifiers: Rotate and Skew, Scale, Distort, Envelope

New Perspectives on Adobe Flash CS4 16

Page 17: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPScaled and Rotated Fish

New Perspectives on Adobe Flash CS4 17

Page 18: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPAdding Text• Static text block – Text object that does not alter after document is

published• Dynamic text field– Text object that can be altered after document is

published• Input text field– Allows user to enter text in form or surveys

• Create a text block using the Text tool• Modify a text block from the Property inspector

New Perspectives on Adobe Flash CS4 18

Page 19: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPText Tool• Creates text blocks for your documents• Fixed-width text block – Doesn’t change as you type

• Single-line text block – Block extends as you type

• Modify text block using the Property inspector

New Perspectives on Adobe Flash CS4 19

Page 20: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPText Block for the Top of the Banner

New Perspectives on Adobe Flash CS4 20

Page 21: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPChecking the Spelling of Text• Use Check Spelling command on Text menu• Configure Check Spelling command before use• Features of the Spelling Setup dialog box – Document options– Built-in dictionaries– Personal dictionary– Checking options

New Perspectives on Adobe Flash CS4 21

Page 22: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPCheck Spelling Dialog Box

New Perspectives on Adobe Flash CS4 22

Page 23: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPExporting a Graphic for Use on the Web• Flash documents are created in the FLA format• Published documents (Flash movies) are SWF

files• Exporting involves converting a file format– Example: export image in FLA file to JPG format

• Exporting combines distinct elements into one graphic

• Image elements are modified in source FLA document

New Perspectives on Adobe Flash CS4 23

Page 24: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPExport Image Dialog Box

New Perspectives on Adobe Flash CS4 24

Page 25: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPUsing the History Panel• Record of steps you have performed• Steps are recorded and displayed• Replaying steps– Apply step(s) in the History panel to an object on the Stage

• Undoing steps– Document-level undo and object-level undo

New Perspectives on Adobe Flash CS4 25

Page 26: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPCreating and Editing Symbols• Symbols: reusable graphics or buttons • Convert an object to a symbol with Convert to

Symbol• Create a new symbol using the New Symbol

command• Symbol behavior types–Movie clip (default)– Graphic symbol– Button symbol

New Perspectives on Adobe Flash CS4 26

Page 27: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPUsing the Library• Stores symbols you create for a document• View, organize, and edit symbols from Library

panel• Click Library on Window menu to view Library

Panel• Symbol’s icon indicates type and behavior• Create folders to group and hold related symbols

New Perspectives on Adobe Flash CS4 27

Page 28: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPLibrary Panel

New Perspectives on Adobe Flash CS4 28

Page 29: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPEditing a Symbol• Symbols may be edited after they are created• Options available through the instance– Edit Symbols– Edit Selected– Edit in Place

• Editing the symbol directly– Select the symbol in the Library panel – Double-click icon to enter symbol-editing mode

New Perspectives on Adobe Flash CS4 29

Page 30: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPInstances of Symbols• New symbols are automatically stored in the

library• Use symbols in your document by creating

instances• Create an instance by dragging symbol onto

Stage• Instances may be modified without altering the

original symbol

New Perspectives on Adobe Flash CS4 30

Page 31: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPApplying Filters• A filter is a special graphic effect– Can be applied to movie clips, buttons, and text

• Applied using the Filters section of the Property inspector– Drop shadow– Blur– Glow– Bevel

New Perspectives on Adobe Flash CS4 31

Page 32: Tutorial 2 Drawing Shapes, Adding Text, and Creating Symbols

XPXPDrop Shadow Applied to a Fish Graphic Instance

New Perspectives on Adobe Flash CS4 32