Adobe Flash Professional CS5 – Illustrated Unit B: Creating Graphics and Text

Objectives Understand vector and bitmap graphics Create a new document Set tool options and create a shape Reshape an object Select and modify a shape Copy and transform an object Use design panels Create text Modify text Adobe Flash Professional CS5 – Illustrated

Understanding Vector and Bitmap Graphics Comparing vector and bitmap images Adobe Flash Professional CS5 – Illustrated

Understanding Vector and Bitmap Graphics Bitmap images For static design elements or limited animation No anchor points Vector graphics Often used in Flash Create with drawing tools on Tools panel Can edit anchor points Adobe Flash Professional CS5 – Illustrated

Understanding Vector and Bitmap Graphics Vector graphics Display image as a matrix of dots (pixels) on a grid Consist of a finite number of pixels Resolution-dependent Resizing affects image quality Mathematically calculated Composed of anchor points and straight or curved line segments (collectively form a path) Appear smooth; appropriate for illustrations Resolution-independent Offer more flexibility than bitmap images Adobe Flash Professional CS5 – Illustrated

Understanding Vector and Bitmap Graphics Resolution Degree of clarity, detail, and sharpness of displayed or printed image Expressed by number of pixels per square inch (the higher the better) Flash drawing modes Merge Drawing mode (default) Assumes that objects’ paths combine Object Drawing mode Treats object as a whole Adobe Flash Professional CS5 – Illustrated

Understanding Vector and Bitmap Graphics Comparing objects in Merge Drawing and Object Drawing modes Adobe Flash Professional CS5 – Illustrated

Creating a New Document Several methods to precisely measure and position objects on the Stage Display rulers Create guides Display a grid All through the View menu Adobe Flash Professional CS5 – Illustrated

Creating a New Document Document Settings dialog box OR use Properties panel Adobe Flash Professional CS5 – Illustrated

Creating a New Document Viewing the grid Adobe Flash Professional CS5 – Illustrated

Creating a New Document Grid dialog box OR Choose Snapping from View menu Adobe Flash Professional CS5 – Illustrated

Setting Tool Options and Creating a Shape Tools panel is separated into sections, each containing related tools Examples: drawing, view, and selection Many tools have tool options at the bottom of the Tools panel Adobe Flash Professional CS5 – Illustrated

Setting Tool Options and Creating a Shape Drawing and painting tools Adobe Flash Professional CS5 – Illustrated

Aligning Objects on the Stage Snap Align Snap to Grid Snap to Guides Snap to Objects Snap to Pixels Viewing rulers, guides, and alignment lines Adobe Flash Professional CS5 – Illustrated

Setting Tool Options and Creating a Shape Select colors for strokes and fills using color pop-up window Setting stroke color by clicking a color swatch Adobe Flash Professional CS5 – Illustrated

Setting Tool Options and Creating a Shape Adobe Flash Professional CS5 – Illustrated

Reshaping an Object Selection Tool Zoom Tool Guide layer Manipulates shape directly by dragging object’s border into a different contour Zoom Tool Adjusts the view Guide layer Contains a shape you can use to Trace or align objects Create a motion path for animated objects Adobe Flash Professional CS5 – Illustrated

Reshaping an Object Modifying a shape Adobe Flash Professional CS5 – Illustrated

Reshaping an Object Creating a curve Adobe Flash Professional CS5 – Illustrated

Understanding Primitive Tools Shapes drawn with primitive tools are separate objects Can edit settings and reset the shape to default settings Adobe Flash Professional CS5 – Illustrated

Selecting and Modifying a Shape Selection tools Adobe Flash Professional CS5 – Illustrated

Selecting and Modifying a Shape Selecting a fill Adobe Flash Professional CS5 – Illustrated

Selecting and Modifying a Shape Selecting part of a stroke Adobe Flash Professional CS5 – Illustrated

Copying and Transforming an Object Transform an object by: Scaling Rotating Skewing Distorting Different ways to copy an object from outside or within the program Reconfigure objects using options for the Free Transform Tool Adobe Flash Professional CS5 – Illustrated

Copying and Transforming an Object Options for the Free Transform Tool Adobe Flash Professional CS5 – Illustrated

Copying and Transforming an Object Copying and pasting a selection Adobe Flash Professional CS5 – Illustrated

Copying and Transforming an Object Positioning the rotate pointer Hold SHIFT for 45-degree increments Adobe Flash Professional CS5 – Illustrated

Copying and Transforming an Object Paste and drag options from Edit menu Paste in Center Paste in Place Paste Special Duplicate Adobe Flash Professional CS5 – Illustrated

Using Design Panels Info panel Shows information based on where pointer is on the Stage Align panel Sizes, aligns, or distributes multiple objects to Stage or each other Transform panel Performs functions of the Free Transform Tool Color panel Contains features for adjusting object’s stroke and fill colors Swatches panel Contains colors from active color palette, or set, of available colors Adobe Flash Professional CS5 – Illustrated

Using Design Panels Perform specific design functions Click a command on Window menu to open panels Frequently used panels Dock in an existing panel group Create a new panel group Adobe Flash Professional CS5 – Illustrated

Using Design Panels Viewing the Info and Align panels Adobe Flash Professional CS5 – Illustrated

Using Design Panels Skewing an object using the Transform panel Adobe Flash Professional CS5 – Illustrated

Using Design Panels Viewing the Color panel and Swatches panel Adobe Flash Professional CS5 – Illustrated

Creating Text Using the Text Tool Text block Object containing text that can be moved and modified Modifiable text attributes: font, size, style, color, alignment, orientation, and spacing Variable-width text Text block expands as you type Fixed-width text Width is limited by size of text block Adobe Flash Professional CS5 – Illustrated

Creating Text Creating a fixed-width text box Adobe Flash Professional CS5 – Illustrated

Creating Text Viewing fixed-width text Adobe Flash Professional CS5 – Illustrated

Creating Text Creating variable-width text Adobe Flash Professional CS5 – Illustrated

Modifying Text Use features on Properties panel Character and Paragraphs sections Font attributes, indent, margins, text orientation Options section Link to a Web site Filters section Drop shadow, bevel, glow Adobe Flash Professional CS5 – Illustrated

Modifying Text Editing text attributes Adobe Flash Professional CS5 – Illustrated

Modifying Text Sampling a color Adobe Flash Professional CS5 – Illustrated

Modifying Text Aligning text Adobe Flash Professional CS5 – Illustrated