Importing and Modifying Graphics

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

Introduction

Understanding the Formats

Bitmap and vector images
Can be imported and animated, even if created in other application

Bitmaps
Can increase file size of movie Slows movie download time

Vector images
Importing from Fireworks or Illustrator is easy More efficient than bitmaps
Adobe Photoshop/Flash - Chapter 7 - Importing and Modifying Graphics Slide 3

Lesson 1: Understand and Import Graphics

Understand and Import Graphics

Vector-based application
Images and motion calculated according to mathematical formulas Results in smaller file size Results in robust ability to resize movies without notable loss in quality

Bitmap or raster image

Based on pixels, not mathematical formula

Importing multiple bitmaps

Will increase file size of movie In terms of movie resizing, will decrease flexibility
Slide 4

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

Lesson 1: Understand and Import Graphics

Importing Different Graphic Formats

Best way to use a graphic
1. Import it by selecting the Import option on the File menu 2. Then choose Import to Stage command 3. Next, navigate to graphic of your choice

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

Slide 5

Lesson 1: Understand and Import Graphics

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
Adobe Photoshop/Flash - Chapter 7 - Importing and Modifying Graphics Slide 6

Lesson 1: Understand and Import Graphics

Using Fireworks PNG Files

Fireworks PNG files
Can be imported as flattened images or as editable objects

When you insert a PNG file as an editable object, it retains:

Its vector format Its layers and transparency features

If you import a flattened image Flash will automatically bitmap the image

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

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

Slide 7

Lesson 1: Understand and Import Graphics

Import Fireworks Document Dialog Box

Features for the file are stored as pages

Maintains drawn shapes and editable paths

All features maintained in Page 1 are imported as a movie clip so they can be edited in Flash

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

Slide 8

Lesson 1: Understand and Import Graphics

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

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

Slide 9

Lesson 1: Understand and Import Graphics

Importing Adobe Illustrator Files

Illustrator files are vector-based When imported as a movie clip, they preserve most 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

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

Slide 10

Lesson 1: Understand and Import Graphics

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 Flash document animating text 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

using the entire graphic creating a button using a photograph Adobe Photoshop/Flash - Chapter 7 - Importing and Modifying Graphics

If you choose not to make a layer editable, the contents are flattened as a bitmap image If you choose to make a layer editable, a movie clip symbol, with the graphic information, is created using the layer contents

Slide 11

Lesson 1: Understand and Import Graphics

Photoshop Import to Stage Dialog Box

background.psd consists of two layers: Sun and Background Sun layer is selected; it is converted to a movie clip so its features will be editable

Once imported, each layer in background.psd will exist on its own layer in Flash

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

Slide 12

Lesson 1: Understand and Import Graphics

Importing Bitmaps
You can
Control size, compression, and anti-aliasing of imported bitmap 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
Adobe Photoshop/Flash - Chapter 7 - Importing and Modifying Graphics Slide 13

Lesson 1: Understand and Import Graphics

Bitmap Properties Dialog Box

Item preview window

Compressed size of the graphic

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

Lesson 2: Break Apart Bitmaps and Use Bitmap Fills

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

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

Slide 15

Lesson 2: Break Apart Bitmaps and Use Bitmap Fills

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

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

Slide 16

Lesson 2: Break Apart Bitmaps and Use Bitmap Fills

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 broken apart twice) 2. Use the eyedropper tool to select the graphic 3. Use the Paint Bucket tool to apply the bitmap fill toa different graphic Adobe Photoshop/Flash - Chapter 7 - Importing and Modifying Graphics

Slide 17

Lesson 2: Break Apart Bitmaps and Use Bitmap Fills

Different Bitmap Fill Effects

Bitmap fill applied with the Brush tool

Bitmap fill in a circle applied with the Paint Bucket tool

Bitmap fill in text applied with the Paint Bucket tool

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

Lesson 2: Break Apart Bitmaps and Use Bitmap Fills

Bitmap Fill Selected in Color Panel

Bitmap selected Bitmap selected as the Type

Available bitmaps from library

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

Slide 19

Lesson 3: Trace Bitmap Graphics

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 piece of 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

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

Slide 20

Lesson 3: Trace Bitmap Graphics

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

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

Slide 21

Lesson 3: Trace Bitmap Graphics

Four Options for Detailed Trace

Color Threshold
Compares two side by side pixels

Minimum Area
Sets the number of surrounding pixels to consider, with options between 1 and 1000

Curve Fit
Determines how smoothly outlines are drawn

Corner Threshold
Works with sharp edges to retain them or smooth them out
Adobe Photoshop/Flash - Chapter 7 - Importing and Modifying Graphics Slide 22

Lesson 4: Use Deco Tool with Imported Graphics

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

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

Slide 23