apfii-flash chp07 notes (1)

8/22/2019 APFII-Flash Chp07 Notes (1)

1/23

Importing and Modifying Graphics


2/23

Chapter 7 Lessons

Introduction

1. Understand and import graphics

2. Break apart bitmaps and use bitmap fills

3. Trace bitmap graphics

4. Use the Deco tool with imported graphics

Adobe Photoshop/Flash - Chapter 7 - Importing and Modifying Graphics Slide 2


3/23

Understanding the Formats

Bitmap and vector images

Can be imported and animated, even if created in otherapplication

Bitmaps

Can increase file size of movie

Slows movie download time

Vector images

Importing from Fireworks or Illustrator is easy

More efficient than bitmapsAdobe Photoshop/Flash - Chapter 7 - Importing and Modifying Graphics Slide 3

Introduction


4/23

Understand and Import Graphics

Vector-based application

Images and motioncalculated according to

mathematical formulas

Results in smaller file size

Results in robust ability toresize movies without

notable loss in quality

Bitmap or raster image

Based on pixels, notmathematical formula

Importing multiple

bitmaps

Will increase file size of

movie

In terms of movie resizing,

will decrease flexibility


Lesson 1: Understand and Import

Graphics


5/23

Importing Different GraphicFormats

Best way to use a graphic

1. Import it by selecting theImport option on the File

menu

2. Then choose Import to

Stage command3. Next, navigate to graphic

of your choice



Graphics


6/23

Importing Different Graphic Formats

Import

Import option on the File menu

You can choose the Import to Stage command or

Import to Library

Import a group of graphics Copy and Paste

Graphic becomes a flattened bitmap



Graphics


7/23

Using Fireworks PNG Files

Fireworks PNG files

Can be imported as flattenedimages or as editable objects

If you import a flattened

image Flash will automatically

bitmap the image

When you insert a PNG file as

an editable object, it retains: Its vector format

Its layers and transparency

features

If you click the Keep all paths

editable option:

all the features of the PNG file

will be intact inside a movie clip

symbol that is stored in the

Library



Graphics


8/23

Import Fireworks Document Dialog Box

Maintains drawn

shapes and

editable paths

Features for the file are

stored as pages

All features maintained

in Page 1 are imported

as a movie clip so they

can be edited in Flash

Slide 8Adobe Photoshop/Flash - Chapter 7 - Importing and Modifying Graphics


Graphics


9/23

Imported Fireworks PNG Graphic File

Importing the PNG file to the

Stage automatically generated the

dragonfly.png folder in the Library

panel

The Page folder

containing the

features (size,

color, etc.) of the

graphic

The movie clip

containing any

editable paths



Graphics


10/23

Importing Adobe Illustrator Files

Illustrator files are vector-based

When imported as a movie clip, they preservemost of their attributes including filters (such as

drop shadows) and blends (such as transparency

settings)

Flash allows you to convert Illustrator graphic

layers to Flash layers



Graphics

d d d


11/23

Importing Adobe Photoshop Files

A key feature of importing PSD

files is that you can choose to

have the Photoshop layers

imported as Flash layers

This allows you to edit individual

parts of an image once the

graphic is in your Flashdocument

animating text

using the entire graphic

creating a button using a

photograph

Steps:

1. Select the Import option from the File menu

2. Choose to import to the stage or to the Library

3. Navigate to and select the PSD file you want

to import

If you choose not to make a layer

editable, the contents are flattened as abitmap image

If you choose to make a layer editable,

a movie clip symbol, with the graphic

information, is created using the layer

contentsAdobe Photoshop/Flash - Chapter 7 - Importing and Modifying Graphics Slide 11


Graphics

L 1 U d d d I


12/23

Photoshop Import to Stage Dialog Box

Sun layer is selected;

it is converted to a

movie clip so its

features will beeditable

Once imported, each

layer inbackground.psd will

exist on its own layer

in Flash

background.psd

consists of two

layers: Sun andBackground



Graphics

L 1 U d d d I


13/23

Importing Bitmaps

You can

Control size, compression, and anti-aliasing of importedbitmap

Anti-aliasing is the process of smoothing the edges of a

graphic so they appear less jagged

Use a bitmap as a fill

Convert a bitmap to a vector

Once you import a bitmap

It becomes an element in the Library



Graphics

L 1 U d t d d I t


14/23

Bitmap Properties Dialog Box

Item preview

window

Compressed size of the

graphic



Graphics

L 2 B k A t Bit d


15/23

Breaking Apart Bitmaps

Breaking apart a bitmap image

Increases flexibility within a movie

Once you break the image, you can:

Click different areas to manipulate them

separately Sample the image with Eyedropper tool


Lesson 2: Break Apart Bitmaps and

Use Bitmap Fills

L 2 B k A t Bit d


16/23

The Lasso and Magic Wand Tool

The Lasso tool lets you select an irregularly shaped part of a

graphic move

scale

rotate

reshape

The Magic Wand tool extends the Lasso tool so you can select

areas of similar color in a bitmap you have broken apart



Use Bitmap Fills

L 2 B k A t Bit d


17/23

Using Bitmap Fills

Bitmap fill

Created by taking one image and using it to fill another

Can be applied to any drawn shape or text that has been

broken apart

Steps:

1. Break apart a bitmap graphic (Text needs to be brokenapart twice)

2. Use the eyedropper tool to select the graphic

3. Use the Paint Bucket tool to apply the bitmap fill toa

different graphic Slide 17Adobe Photoshop/Flash - Chapter 7 - Importing and Modifying Graphics


Use Bitmap Fills

L 2 B k A t Bit d


18/23

Different Bitmap Fill Effects


Bitmap fill in a

circle applied with

the Paint Bucket

tool

Bitmap fill applied

with the Brushtool

Bitmap fill in text

applied with the

Paint Bucket tool


Use Bitmap Fills



19/23

Bitmap Fill Selected in Color Panel

Bitmap

selected

Bitmap

selected asthe Type

Available

bitmaps from

library



Use Bitmap Fills

Lesson 3: Trace Bitmap Graphics


20/23

Understanding Tracing

Tracing is an outstanding feature for:

Challenges with illustration

Converting a bitmap image into a vector

image for animation purposes

When you apply trace functions, you turn a

pure bitmap into vector paths and fills

Creates paths and shapes, but every pieceof original image remains on one layer

To animate or tween between pieces of the

shape, isolate parts of the object onto their

own layers



Before Tracing After Tracing



21/23

Using Trace Settings

Your traced graphic will look more like the original graphic if

you retain more detail If you want the traced graphic to look more abstract, use less

detail. However, the greater the detail, the greater the file

size





22/23

Four Options for Detailed Trace

Color Threshold

Compares two side by side pixels

Minimum Area

Sets the number of surroundingpixels to consider, with optionsbetween 1 and 1000

Curve Fit Determines how smoothly

outlines are drawn

Corner Threshold

Works with sharp edges to retain

them or smooth them outAdobe Photoshop/Flash - Chapter 7 - Importing and Modifying Graphics Slide 22


Lesson 4: Use Deco Tool with


23/23

Understanding the Deco Tool

The Deco tool is used to create decorative patterns that

incorporate imported graphics and those drawn in Flash These patterns can be animated and added to a movie to

create special effects

Three types:

Vine Fill

Grid Fill

Symmetry Brush

Slide 23Adobe Photoshop/Flash Chapter 7 Importing and Modifying Graphics

Lesson 4: Use Deco Tool with

Imported Graphics

apfii-flash chp07 notes (1)

Documents