adobe flash cs4 – illustrated

40
Adobe Flash CS4 – Illustrated Unit B: Creating Graphics and Text

Upload: odin

Post on 22-Jan-2016

37 views

Category:

Documents


5 download

DESCRIPTION

Adobe Flash CS4 – 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 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Unit B: Creating Graphics and Text

Page 2: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

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

Page 3: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Understanding Vector andBitmap Graphics

Bitmap images For static design elements or limited

animation

Vector graphics Often used in Flash Create with drawing tools on Tools panel

Page 4: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Understanding Vector andBitmap Graphics

Bitmap graphics Vector graphics

Display image as a matrix of dots (pixels) on a grid

Consist of a finite number of pixels

Resolution-dependentResizing 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-independentOffer more flexibility than

bitmap images

Page 5: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Understanding Vector andBitmap Graphics

Comparing vector and bitmap images

Page 6: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Understanding Vector andBitmap 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

• Assumes that objects’ paths combine

Object Drawing mode• Treats object as a whole

Page 7: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Understanding Vector andBitmap Graphics

Comparing objects in Merge Drawing and Object Drawing modes

Page 8: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Creating a New Document

Several methods to precisely measure and position objects on the Stage Display rulers Create guides Display a grid

Page 9: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Creating a New Document

Document Properties dialog box

Page 10: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Creating a New Document

Viewing the grid turned on in a document

Page 11: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Creating a New Document

Grid dialog box

Page 12: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Setting Tool Options and Creating a Shape

Tools panel is separated into sections, each containing related tools(e.g., drawing, view, and selection)

Many tools have tool options at the bottom of the Tools panel

Page 13: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Setting Tool Options and Creating a Shape

Drawing and painting tools

Page 14: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – 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

Page 15: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – 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

Page 16: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Setting Tool Options and Creating a Shape

Creating a shape

Page 17: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Reshaping an Object

Selection Tool 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

Page 18: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Reshaping an Object

Modifying a shape

Page 19: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Reshaping an Object

Creating a curve

Page 20: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Selecting and Modifying a Shape

Selection tools

Page 21: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Selecting and Modifying a Shape

Selecting a fill

Page 22: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Selecting and Modifying a Shape

Selecting part of a stroke

Page 23: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Copying and Transformingan 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

Page 24: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Copying and Transformingan Object

Options for the Free Transform Tool

Page 25: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Copying and Transformingan Object

Copying and pasting a selection

Page 26: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Copying and Transformingan Object

Positioning the rotate pointer

Page 27: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Copying and Transformingan Object

Paste and drag options from Edit menu Paste in Center Paste in Place Paste Special Duplicate

Page 28: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – 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

Page 29: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – 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

Page 30: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Using Design Panels

Viewing the Info and Align panels

Page 31: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Using Design Panels

Skewing an object using the Transform panel

Page 32: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Using Design Panels

Viewing the Color panel and Swatches panel

Page 33: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – 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

Page 34: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Creating Text

Creating a fixed-width text box

Page 35: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Creating Text

Viewing fixed-width text

Page 36: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Creating Text

Creating variable-width text

Page 37: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – 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)

Page 38: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Modifying Text

Editing text attributes

Page 39: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Modifying Text

Sampling a color

Page 40: Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Modifying Text

Aligning text