Working with Layers, Libraries, and Importing Graphics
description
Transcript of 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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
Renaming LayersRenaming Layers
double-click the currentlayer name, key the newlayer name, press Enter
3-3-99
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
Creating a Mask Layer…/3Creating a Mask Layer…/3
Both the mask layerand the lower layer areautomatically locked.
Mask icons
3-3-1818
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
Creating a Guide Layer…/3Creating a Guide Layer…/3
Resize object so it fits within the guide.
3-3-2121
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
Layer Properties Dialog BoxLayer Properties Dialog Box
MModify, odify, LLayerayer
Alternate method for working with layers.
3-3-2222
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
Bitmap PropertiesBitmap Properties
Each imported bitmap has a set of properties associated with it.
select file name
click Properties button
3-3-3636
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
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
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
How do you copy a selected object?
EEdit, dit, CCopy or Ctrl + Copy or Ctrl + C
3-3-4949
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
How do you convert a bitmap to a vector graphic?
MModify, Trace odify, Trace BBitmapitmap
3-3-5050
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
How do you convert an object to a symbol?
IInsert, nsert, CConvert to Symbol or F8onvert to Symbol or F8
3-3-5151
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
How do you create a new symbol?
IInsert, nsert, NNew Symbol or Ctrl + F8ew Symbol or Ctrl + F8
3-3-5252
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
How do you cut a selected object?
EEdit, Cudit, Cutt or Ctrl + X or Ctrl + X
3-3-5353
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
How do you display the Common Library panel?
WWindow, Common Liindow, Common Libbrariesraries
3-3-5454
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
How do you display the Library panel?
WWindow, indow, LLibrary or F11ibrary or F11
3-3-5555
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
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
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
How do you exit symbol editing mode?
to exit
EEdit, dit, EEdit Document or Ctrl + Edit Document or Ctrl + E
3-3-5757
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
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
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
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
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
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
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
How do you insert a layer folder?
IInsert Layer Fnsert Layer Foolderlder
3-3-6161
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
How do you change the layer properties?
MModify, odify, LLayerayer
3-3-6262
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
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
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
How do you optimize a selected object?
MModify, odify, OOptimize or Ctrl + Alt + Shift + Cptimize or Ctrl + Alt + Shift + C
3-3-6464
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
Commands ReviewCommands Review
How do you paste an object from the Clipboard?
EEdit, dit, PPaste or Ctrl + Vaste or Ctrl + V
3-3-6565
OBJOBJ
Copyright 2003, Paradigm Publishing Inc.
Creating Animationand Guidelines for
Flash Project Design
Coming NextComing Next