working with layers, libraries, and importing graphics

3-3-11

OBJOBJ

Copyright 2003, Paradigm Publishing Inc.

Working with Layers, Libraries, and

Importing Graphics

Macromedia FlashMacromedia FlashDesign & ApplicationDesign & Application

3-3-22

OBJOBJ


Describe the purpose of using layers in a Flash movie. Insert, rename, and delete layers. Move layers to change the stacking order. Hide and lock layers. View objects on a layer as outlines. Distribute objects to layers. Create a mask layer. Create a guide layer. Create a layer folder. Describe the role of libraries, symbols, and instances. Create and modify symbols. Create and modify instances of a symbol. Convert an existing graphic to a symbol.

Performance ObjectivesPerformance Objectives

3-3-33

OBJOBJ


Insert symbols from another movie's library and from a common library.

Create a library file with your own reusable objects. Import a bitmapped image to Flash and adjust the

bitmap properties. Break up and edit a bitmapped image. Use a bitmapped image as a fill for a closed shape. Convert a bitmap image into a vector graphic. Copy and paste graphics from other sources to Flash

using the Clipboard. Import a FreeHand vector image and a Fireworks bitmap

image to Flash. Optimize a vector object. Describe sources of images for importing to Flash. COMMANDS REVIEW

Performance ObjectivesPerformance Objectives

3-3-44

OBJOBJ


Organizing Content with Organizing Content with LayersLayers

Organize images, sounds, videos, animations, or any other elements

Complex movies with many layers can also be organized with layer folders similar to the process you use to organize the data

files on your computer Layers operate in a similar manner as stacked

transparencies on an overhead projector Name layers with descriptive titles

makes finding and editing easier Layers are stacked with the topmost layer in

the Timeline overlapping objects within the layers below it

The layer hierarchy is referred to as the stacking order

3-3-55

OBJOBJ


Multiple Layers in FlashMultiple Layers in Flash

Manage layers in this sectionof the Timeline panel.

Active layerEach layer has itsown set of frames.

Scroll bars to scrollframes and layers.

Each object on the stage is controlledseparately through its corresponding layer.

3-3-66

OBJOBJ


Layer Management ToolsLayer Management Tools

Pencil indicates the layerthat is being edited.

Show/Hide All LayersLock/Unlock All Layers

Show All Layers as Outlines

Delete LayerInsert LayerFolder

Add MotionGuide

Insert Layer

Double-clicklayer icon todisplay Layer

Propertiesdialog box.

3-3-77

OBJOBJ


Inserting LayersInserting Layers

Each new Flash document containsone layer named Layer 1. New layersare inserted above the active layer.

Insert Layer buttonInsert Layer button ORORIInsert, nsert, LLayerayer

Right-click, Insert Layer Right-click, Insert Layer

3-3-88

OBJOBJ


Renaming LayersRenaming Layers

double-click the currentlayer name, key the newlayer name, press Enter

3-3-99

OBJOBJ


Deleting a LayerDeleting a Layer

Deleting a layer removes the layer fromthe Timeline as well as any content on

the stage that is associated with the layer.

Delete Layer buttonDelete Layer button ORORRight-click, Delete Layer Right-click, Delete Layer

If you delete the wrong layer by mistake, use theUndo feature to restore the content to the stage.

3-3-1010

OBJOBJ


Using the ClipboardUsing the Clipboard

Objects can be cut or copied and thenpasted to layers.

EEdit, Cudit, Cutt or Ctrl + X or Ctrl + X

MOVINGMOVINGselect the object firstselect the object first

EEdit, dit, PPaste or Ctrl + Vaste or Ctrl + VEEdit, dit, CCopy or Ctrl + Copy or Ctrl + C

COPYINGCOPYINGselect the object firstselect the object first

EEdit, dit, PPaste or Ctrl + Vaste or Ctrl + V

3-3-1111

OBJOBJ


Moving a LayerMoving a Layer

layer is movedin the Timeline

point to layer nameor layer icon and drag

to desired location-gray bar indicates wherelayer will be repositioned

3-3-1212

OBJOBJ


Hiding and Locking LayersHiding and Locking Layers

Red Xs indicate thelayers are hidden.

This layer is locked.

Show/Hide All Layers

Lock/Unlock All Layers

Solid black dots indicate thelayer is not hidden or locked.

Hiding Layers- to temporarily remove the display on the stage of all

content or content on individual layers

Locking Layers- to prevent changes to objects on all layers or

individual layers

3-3-1313

OBJOBJ


Viewing Objects as OutlinesViewing Objects as Outlines

Color-coded to the layer- allows you to see which objects are associated with

the layer if you cannot remember

These layers aredisplayed as outlines.

This layer is not inOutline mode.

Objects in Outline mode.

3-3-1414

OBJOBJ


Distributing Objects to LayersDistributing Objects to Layers

Used to split objects on a single layer into separate

individual layers.

MModify, Distribute to Layers or Ctrl + Shift + Dodify, Distribute to Layers or Ctrl + Shift + D

Flash will create a new layer for each separate selected object.

Each new layer is named Layer # where # is the next layer number in sequence.

3-3-1515

OBJOBJ


Creating a Mask LayerCreating a Mask Layer

A masked layer partially conceals objects in the linked layer immediately below the mask.

Filled objects on the mask layer provide the window with which overlapped objects below

the mask filter through to the stage.

layer immediatelybelow mask layer

Mask Layer appears onthe stage

3-3-1616

OBJOBJ


Creating a Mask Layer…/2Creating a Mask Layer…/2

Insert the content Insert a new layer Draw filled objects overlapping the

content Right-click the new layer Click Mask

3-3-1717

OBJOBJ


Creating a Mask Layer…/3Creating a Mask Layer…/3

Both the mask layerand the lower layer areautomatically locked.

Mask icons

3-3-1818

OBJOBJ


Creating a Guide LayerCreating a Guide Layer

-used to assist with the placement and

alignment of objects in the authoring process-not exported when the

movie is published

Guide

-used to direct the path along which a

connected object on another layer will travel

during an animation-is exported when the

movie is published but is not visible to the end

user

Motion Guides

Flash includes two types of layers that can assist with the placement of objects.

3-3-1919

OBJOBJ


Creating a Guide Layer…/2Creating a Guide Layer…/2

designate the layeras a guide

insert a new layer and draw lines or shapes that will be used foralignment purposes

3-3-2020

OBJOBJ


Creating a Guide Layer…/3Creating a Guide Layer…/3

Resize object so it fits within the guide.

3-3-2121

OBJOBJ


Layer Properties Dialog BoxLayer Properties Dialog Box

MModify, odify, LLayerayer

Alternate method for working with layers.

3-3-2222

OBJOBJ


Creating a Layer FolderCreating a Layer Folder

Related layers can be grouped together and moved below a layer folder in the Timeline.

IInsert Layer Fnsert Layer FoolderlderLayer folder

Click here to collapselayer list for theGraphics folder.

Drag the Timeline panel's blueborder up or down to decreaseor increase the panel's height.

These three layers aregrouped within the

Graphics layer folder.

3-3-2323

OBJOBJ


Libraries Libraries – – Symbols and Symbols and InstancesInstances

Every Flash document includes a library which is used to store reusable objects symbols, imported bitmaps, sound files

A symbol is any object that you want to reuse in either the current movie or another movie drawn object, text block, button, movie clip,

imported logo created or converted becomes master copy of the object

Each occurrence of a symbol on the stage is called an instance can be modified

3-3-2424

OBJOBJ


Advantages of Using SymbolsAdvantages of Using Symbols

Can be reused many times drag from Library panel to stage more efficient than copying and pasting

Can be reused in other movie files File size is greatly reduced

stores information about the master copy of the symbol once

Changes made to the master copy automatically updates each instance reduces time ensures consistency

3-3-2525

OBJOBJ


Creating a SymbolCreating a Symbol

IInsert, nsert, NNew Symbol or Ctrl + F8ew Symbol or Ctrl + F8

key a descriptive name

animation that has its own timeline

interactive objectcreated or imported

3-3-2626

OBJOBJ


Symbol Editing ModeSymbol Editing Mode

Symbol name

Registration Point-draw object around

this center point,move it after drawn,

or cut and paste

to exit OROR

EEdit, dit, EEdit Document or Ctrl + Edit Document or Ctrl + E

click Back buttonclick Scene number

3-3-2727

OBJOBJ


Inserting and ModifyingInserting and Modifyingan Instancean Instance

WWindow, indow, LLibrary or F11ibrary or F11

click name

drag fromPreview pane

to stage

Inserted instances can be modified without affecting the master copy of the object.

3-3-2828

OBJOBJ


Editing a SymbolEditing a Symbol Double-click any of the instances of the

symbol on the stage opens symbol editing mode make required changes to master copy exit symbol editing mode other instances automatically updated

or Right-click the symbol name in the

Library panel click Edit at the shortcut menu opens symbol editing mode make required changes to master copy exit symbol editing mode other instances automatically updated

3-3-2929

OBJOBJ


Converting an Existing Converting an Existing Object to a SymbolObject to a Symbol

IInsert, nsert, CConvert to Symbol or F8onvert to Symbol or F8

select the object first

3-3-3030

OBJOBJ


Inserting Symbols from Inserting Symbols from Another Movie's Library FileAnother Movie's Library File

FFile, Open as ile, Open as LLibrary or Ctrl + Shift + Oibrary or Ctrl + Shift + Onavigate and double-click

file name

background of anothermovie's library panelis displayed in gray

When you drag an instance to the stage, Flash automatically inserts a copy of the symbol in

the current movie's library.

3-3-3131

OBJOBJ


Inserting Symbols from Inserting Symbols from Common LibrariesCommon Libraries

Flash includes common library files containing objects that

you are free to use.

WWindow, Common Liindow, Common Libbrariesraries

When you drag an instance to the stage, Flash automatically inserts a copy of the symbol in

the current movie's library.

3-3-3232

OBJOBJ


Creating Your OwnCreating Your OwnCommon LibraryCommon Library

Create the symbols you want to store If you convert existing objects to

symbols, delete the symbols from the stage after conversion leaving copies on the stage uses

unnecessary disk space Use Save As

descriptive file name C:\Program Files\Macromedia\Flash MX\

First Run\Libraries Exit Flash

3-3-3333

OBJOBJ


Library ManagementLibrary Management

Group related symbols in folders that can be expanded and collapsed

in the Library panel.

Toggle Sorting Order

Wide Library View

Narrow Library View

Delete

PropertiesNew Folder

New Symbol

3-3-3434

OBJOBJ


Importing Graphics from Importing Graphics from Other SourcesOther Sources

FFile, ile, IImport or Ctrl + Rmport or Ctrl + R

You may want to insert pictures created outside Flash.

e.g. company logo, digital or scanned picture

click to choose the fileformat of the graphic

which you want to import

Imported bitmap images are automatically stored in the movie's library and a copy of the

image is inserted in the active layer on the stage. Use pictures sparingly.

3-3-3535

OBJOBJ


Bitmap PropertiesBitmap Properties

Each imported bitmap has a set of properties associated with it.

select file name

click Properties button

3-3-3636

OBJOBJ


Bitmap Properties…/2Bitmap Properties…/2

controls the file size-use Lossless for

bitmaps withuncomplicatedobjects and fewcolor variations

deselecting causes theQuality text box to appear100 is the highest quality

click to view the changein picture quality

and file size

controls the quality-antialiasing is where jagged

edges are smoothened bysurrounding the edges with

shades of gray or color

3-3-3737

OBJOBJ


Breaking Apart and Editing Breaking Apart and Editing Colors in a BitmapColors in a Bitmap

MModify, Breaodify, Breakk Apart or Ctrl + B Apart or Ctrl + B

A bitmapped image can be broken apart and then edited.

Magic Wand ModifierMagic Wand Modifier

Magic WandMagic WandPropertiesProperties

Lasso ToolLasso Tool +

a higher numberindicates a widerbreadth of colors

3-3-3838

OBJOBJ


Using a Bitmap as a FillUsing a Bitmap as a Fill Draw the shape to be filled Import and break apart bitmapped image Click Eye Dropper tool and click broken apart

bitmap Eye Dropper tool changes to Paint Bucket tool Click Paint Bucket over shape to fill Delete broken apart bitmap

3-3-3939

OBJOBJ


Converting a Bitmap to a Converting a Bitmap to a Vector GraphicVector Graphic

Flash converts a bitmap to a vector graphic by analyzing the pixels in the bitmap and

then creating vector shapes from adjacent pixels that are considered to be the same

color based on the color threshold setting.

MModify, Trace odify, Trace BBitmapitmaptwo adjacent pixels are

considered the same color if their RGB values are

less than the valueentered here

progress bar indicates progress of conversion

3-3-4040

OBJOBJ


Importing Bitmaps Directly Importing Bitmaps Directly to the Libraryto the Library

FFile, ile, IImport to Librarymport to Library

imports a bitmap directly to the

current movie's library

-does not place a copy on the

stage

3-3-4141

OBJOBJ


Copying and Pasting Images Copying and Pasting Images Using the ClipboardUsing the Clipboard

Images can be inserted into Flash using the standard Windows copy and paste commands in the source application select the graphic

and click Edit, Copy switch to Flash and click Edit, Paste

Flash pastes a bitmap as a grouped object on the stage

3-3-4242

OBJOBJ


Importing a FreeHandImporting a FreeHandVector GraphicVector Graphic

After selecting the file name in the Import dialog box, the FreeHand Import dialog box appears control over how layers and pages are

converted in the Flash movie

3-3-4343

OBJOBJ


Importing Other Vector Importing Other Vector Graphics FilesGraphics Files

Adobe Illustrator vector graphics can be imported into Flash with control over the placement of layers after importing, ungroup all of the objects in

order to edit Other vector graphics can be imported

by converting to the Flash swf player format in the source program

3-3-4444

OBJOBJ


Importing a Fireworks Importing a Fireworks Drawing into FlashDrawing into Flash

Fireworks graphics can be imported by converting to Flash as png files with layers and editable objects intact or as a single flattened bitmapped object

3-3-4545

OBJOBJ


Optimizing GraphicsOptimizing Graphics

MModify, odify, OOptimize or Ctrl + Alt + Shift + Cptimize or Ctrl + Alt + Shift + C

Optimize vector graphics within Flash to reduce file size and

increase processing efficiency.

drag the slider toincrease or decrease

the amount by which youwant Flash to optimize

the object

message appearsindicating the

amount ofreduction that

has taken place

3-3-4646

OBJOBJ


Sources for Artwork for FlashSources for Artwork for Flash

Artwork can be downloaded from the Internet for free or for a small fee. Always

read the policies carefully before downloading a free graphic for use in a Flash

movie.

privacypolicy

terms of usepolicy

3-3-4747

OBJOBJ


Commands ReviewCommands Review

How do you break apart a bitmap?

MModify, Breaodify, Breakk Apart or Ctrl + B Apart or Ctrl + B

3-3-4848

OBJOBJ



How do you copy a selected object?

EEdit, dit, CCopy or Ctrl + Copy or Ctrl + C

3-3-4949

OBJOBJ



How do you convert a bitmap to a vector graphic?

MModify, Trace odify, Trace BBitmapitmap

3-3-5050

OBJOBJ



How do you convert an object to a symbol?

IInsert, nsert, CConvert to Symbol or F8onvert to Symbol or F8

3-3-5151

OBJOBJ



How do you create a new symbol?

IInsert, nsert, NNew Symbol or Ctrl + F8ew Symbol or Ctrl + F8

3-3-5252

OBJOBJ



How do you cut a selected object?

EEdit, Cudit, Cutt or Ctrl + X or Ctrl + X

3-3-5353

OBJOBJ



How do you display the Common Library panel?

WWindow, Common Liindow, Common Libbrariesraries

3-3-5454

OBJOBJ



How do you display the Library panel?

WWindow, indow, LLibrary or F11ibrary or F11

3-3-5555

OBJOBJ



How do you distribute objects to layers?

MModify, Distribute to Layers or Ctrl + Shift + Dodify, Distribute to Layers or Ctrl + Shift + D

Flash will create a new layer for each separate selected object.

Each new layer is named Layer # where # is the next layer number in sequence.

3-3-5656

OBJOBJ



How do you exit symbol editing mode?

to exit

EEdit, dit, EEdit Document or Ctrl + Edit Document or Ctrl + E

3-3-5757

OBJOBJ



How do you import graphics?

FFile, ile, IImport or Ctrl + Rmport or Ctrl + R

click to choose the fileformat of the graphic

which you want to import

3-3-5858

OBJOBJ



How do you import graphics to the library?

FFile, ile, IImport to Librarymport to Library

imports a bitmap directly to the

current movie's library

-does not place a copy on the

stage

3-3-5959

OBJOBJ



How do you insert a layer?

Insert Layer buttonInsert Layer button ORORIInsert, nsert, LLayerayer

Right-click, Insert Layer Right-click, Insert Layer

3-3-6060

OBJOBJ



How do you insert a layer folder?

IInsert Layer Fnsert Layer Foolderlder

3-3-6161

OBJOBJ



How do you change the layer properties?

MModify, odify, LLayerayer

3-3-6262

OBJOBJ



How do you open the library from another movie?

FFile, Open as ile, Open as LLibrary or Ctrl + Shift + Oibrary or Ctrl + Shift + Onavigate and double-click

file name

3-3-6363

OBJOBJ



How do you optimize a selected object?

MModify, odify, OOptimize or Ctrl + Alt + Shift + Cptimize or Ctrl + Alt + Shift + C

3-3-6464

OBJOBJ



How do you paste an object from the Clipboard?

EEdit, dit, PPaste or Ctrl + Vaste or Ctrl + V

3-3-6565

OBJOBJ


Creating Animationand Guidelines for

Flash Project Design

Coming NextComing Next

working with layers, libraries, and importing graphics

Documents