CIS 9993Create Web Interaction w/Flash

Las Positas CollegeInstructor: Mrs. Da Silva

Location: Room 804http://lpc1.laspositascollege.edu/lpc/cdasilva

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

Chapter 7

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

Chapter 7

Understand and Import Graphics

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

Chapter 7

Importing Different GraphicFormats

Best way to use a graphic

Import it by selecting the Import option on the File menu

Then choose Import to Stage command

Next, navigate to graphic of your choice

Chapter 7

Fig. 1: Import to Library Dialog Box

Chapter 7

Importing Different GraphicFormats

Movie clips

Movies within a movie

Have their own Timeline

Can help organize contents of a movie

Can help create complex animations

Chapter 7

Using Fireworks PNG Files

Fireworks PNG files

Can be imported as flattened images or as editable objects

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

Chapter 7

Using Fireworks PNG Files

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

Chapter 7

Fig. 2: Fireworks PNG Import Settings

Chapter 7

Importing Adobe Ilustrator 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)

Chapter 7

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

using the entire graphic

creating a button using a photograph

Chapter 7

Importing Adobe Photoshop Files

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

Chapter 7

Importing Adobe Photoshop Files

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

Chapter 7

Fig. 3: Import Dialog Box

Chapter 7

Importing Bitmaps

You can

Control size, compression, and anti-aliasing of imported bitmap

Use a bitmap as a fill

Convert a bitmap to a vector

Once you import a bitmap

It becomes an element in the Library

Chapter 7

Fig.4: Imported Movie Clip Symbol

Dragonfly movie on the stage

Movie folder automatically generated

in the library

Chapter 7

Fig. 5: Tree on the Stage after Importing

X and Y coordinates for tree

Drag tree beneath dragonfly

Chapter 7

Fig.8: Bitmap Properties Dialog Box

Item preview window

Remove check mark

Compressed size of the graphic

Chapter 7

Break Apart Bitmaps and Use Bitmap Fills

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

Chapter 7

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

Chapter 7

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

Chapter 7

Fig. 9: Different Bitmap Fill Effects

Chapter 7

Fig.10: Bitmap Fill Selected in Color Mixer Panel

Bitmap fill Bitmap selected as the type

Available bitmaps from library

Chapter 7

Trace Bitmap Graphics

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

Chapter 7

Trace Bitmap Graphics

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

Chapter 7

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.

Chapter 7

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

Chapter 7

Fig. 19: Trace Bitmap Dialog Box

Chapter 7

Mixing Graphic Formats

Tracing allows you to merge different photo styles without ruining movie integrity

Depending on the effect you are trying to achieve, you might use one or more techniques to create movies

Chapter 7

Organize Your Library

Cleaning up your Library will result in a better-optimized movie

Setting up folders and moving the assets to them helps reduce the clutter in the panel and makes it easier for you to find needed assets

Another consideration when organizing the Library panel is removal of unneeded assets

Chapter 7

Importing Idiosyncrasies

You can import graphics from

AutoCAD, MacPaint, Silicon Graphics Image, and QuickTime

If QuickTime not installed, Flash will import even a complex layered file as one single, flattened layer

Chapter 7

Animating Imported Graphics

Animation is one of the most powerful features and benefits of Flash

You can animate any type of imported graphic

Images inside Flash can be manipulated

Chapter 7