Macromedia Flash Design Application OBJ 3 1 Working

Macromedia Flash Design & Application OBJ 3 -1 Working with Layers, Libraries, and Importing Graphics Copyright 2003, Paradigm Publishing Inc.

Performance Objectives Ø Ø Ø Ø 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. OBJ 3 -2 Copyright 2003, Paradigm Publishing Inc.

Performance Objectives OBJ 3 -3 Ø 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 Free. Hand vector image and a Fireworks bitmap image to Flash. Ø Optimize a vector object. Ø Describe sources of images for importing to Flash. Ø COMMANDS REVIEW Copyright 2003, Paradigm Publishing Inc.

Organizing Content with Layers Ø 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 OBJ 3 -4 Ø 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 Copyright 2003, Paradigm Publishing Inc.

Multiple Layers in Flash Manage layers in this section of the Timeline panel. Active layer Each layer has its own set of frames. Scroll bars to scroll frames and layers. OBJ 3 -5 Each object on the stage is controlled separately through its corresponding layer. Copyright 2003, Paradigm Publishing Inc.

Layer Management Tools Pencil indicates the layer that is being edited. Show/Hide All Layers Lock/Unlock All Layers Show All Layers as Outlines Double-click layer icon to display Layer Properties dialog box. Insert Layer Add Motion Guide OBJ 3 -6 Copyright 2003, Paradigm Publishing Inc. Insert Layer Folder Delete Layer

Inserting Layers Each new Flash document contains one layer named Layer 1. New layers are inserted above the active layer. Insert Layer button OR Insert, Layer Right-click, Insert Layer OBJ 3 -7 Copyright 2003, Paradigm Publishing Inc.

Renaming Layers double-click the current layer name, key the new layer name, press Enter OBJ 3 -8 Copyright 2003, Paradigm Publishing Inc.

Deleting a Layer Deleting a layer removes the layer from the Timeline as well as any content on the stage that is associated with the layer. Delete Layer button OR Right-click, Delete Layer OBJ 3 -9 If you delete the wrong layer by mistake, use the Undo feature to restore the content to the stage. Copyright 2003, Paradigm Publishing Inc.

Using the Clipboard Objects can be cut or copied and then pasted to layers. MOVING select the object first Edit, Cut or Ctrl + X Edit, Paste or Ctrl + V OBJ 3 -10 Copyright 2003, Paradigm Publishing Inc. COPYING select the object first Edit, Copy or Ctrl + C Edit, Paste or Ctrl + V

Moving a Layer point to layer name or layer icon and drag to desired location -gray bar indicates where layer will be repositioned layer is moved in the Timeline OBJ 3 -11 Copyright 2003, Paradigm Publishing Inc.

Hiding and Locking Layers Hiding Layers Locking Layers - to temporarily remove the - to prevent changes to display on the stage of all objects on all layers or content on individual layers Solid black dots indicate the layer is not hidden or locked. Show/Hide All Layers Lock/Unlock All Layers Red Xs indicate the layers are hidden. OBJ 3 -12 This layer is locked. Copyright 2003, Paradigm Publishing Inc.

Viewing Objects as Outlines Color-coded to the layer - allows you to see which objects are associated with the layer if you cannot remember This layer is not in Outline mode. These layers are displayed as outlines. OBJ 3 -13 Objects in Outline mode. Copyright 2003, Paradigm Publishing Inc.

Distributing Objects to Layers Used to split objects on a single layer into separate individual layers. Modify, 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. OBJ 3 -14 Copyright 2003, Paradigm Publishing Inc.

Creating a Mask Layer A masked layer partially conceals objects in the linked layer immediately below the mask. layer immediately below mask layer OBJ 3 -15 Mask Layer appears on the stage Filled objects on the mask layer provide the window with which overlapped objects below the mask filter through to the stage. Copyright 2003, Paradigm Publishing Inc.

Creating a Mask Layer…/2 Ø Insert the content Ø Insert a new layer Ø Draw filled objects overlapping the content Ø Right-click the new layer Ø Click Mask OBJ 3 -16 Copyright 2003, Paradigm Publishing Inc.

Creating a Mask Layer…/3 Mask icons OBJ 3 -17 Copyright 2003, Paradigm Publishing Inc. Both the mask layer and the lower layer are automatically locked.

Creating a Guide Layer Flash includes two types of layers that can assist with the placement of objects. Guide Motion Guides -used to assist with the placement and alignment of objects in the authoring process -not exported when the movie is published -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 OBJ 3 -18 Copyright 2003, Paradigm Publishing Inc.

Creating a Guide Layer…/2 insert a new layer and draw lines or shapes that will be used for alignment purposes OBJ 3 -19 designate the layer as a guide Copyright 2003, Paradigm Publishing Inc.

Creating a Guide Layer…/3 Resize object so it fits within the guide. OBJ 3 -20 Copyright 2003, Paradigm Publishing Inc.

Layer Properties Dialog Box Alternate method for working with layers. Modify, Layer OBJ 3 -21 Copyright 2003, Paradigm Publishing Inc.

Creating a Layer Folder Related layers can be grouped together and moved below a layer folder in the Timeline. Insert Layer Folder Click here to collapse layer list for the Graphics folder. Layer folder These three layers are grouped within the Graphics layer folder. Drag the Timeline panel's blue border up or down to decrease or increase the panel's height. OBJ 3 -22 Copyright 2003, Paradigm Publishing Inc.

Libraries – Symbols and Instances Ø 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 OBJ 3 -23 § can be modified Copyright 2003, Paradigm Publishing Inc.

Advantages 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 OBJ 3 -24 Copyright 2003, Paradigm Publishing Inc.

Creating a Symbol Insert, New Symbol or Ctrl + F 8 key a descriptive name animation that has its own timeline interactive object created or imported OBJ 3 -25 Copyright 2003, Paradigm Publishing Inc.

Symbol Editing Mode Symbol name click Scene number click Back button to exit OR Registration Point -draw object around this center point, move it after drawn, or cut and paste Edit, Edit Document or Ctrl + E OBJ 3 -26 Copyright 2003, Paradigm Publishing Inc.

Inserting and Modifying an Instance Window, Library or F 11 drag from Preview pane to stage click name OBJ 3 -27 Inserted instances can be modified without affecting the master copy of the object. Copyright 2003, Paradigm Publishing Inc.

Editing 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 OBJ 3 -28 § § § click Edit at the shortcut menu opens symbol editing mode make required changes to master copy exit symbol editing mode other instances automatically updated Copyright 2003, Paradigm Publishing Inc.

Converting an Existing Object to a Symbol select the object first Insert, Convert to Symbol or F 8 OBJ 3 -29 Copyright 2003, Paradigm Publishing Inc.

Inserting Symbols from Another Movie's Library File, Open as Library or Ctrl + Shift + O navigate and double-click file name background of another movie's library panel is displayed in gray OBJ 3 -30 When you drag an instance to the stage, Flash automatically inserts a copy of the symbol in the current movie's library. Copyright 2003, Paradigm Publishing Inc.

Inserting Symbols from Common Libraries Flash includes common library files containing objects that you are free to use. Window, Common Libraries OBJ 3 -31 When you drag an instance to the stage, Flash automatically inserts a copy of the symbol in the current movie's library. Copyright 2003, Paradigm Publishing Inc.

Creating Your Own Common 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 FilesMacromediaFlash MXFirst RunLibraries Ø Exit Flash OBJ 3 -32 Copyright 2003, Paradigm Publishing Inc.

Library Management Group related symbols in folders that can be expanded and collapsed in the Library panel. Toggle Sorting Order Wide Library View New Symbol Narrow Library View Delete New Folder OBJ 3 -33 Copyright 2003, Paradigm Publishing Inc. Properties

Importing Graphics from Other Sources You may want to insert pictures created outside Flash. e. g. company logo, digital or scanned picture File, Import or Ctrl + R click to choose the file format of the graphic which you want to import OBJ 3 -34 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. Copyright 2003, Paradigm Publishing Inc.

Bitmap Properties Each imported bitmap has a set of properties associated with it. select file name click Properties button OBJ 3 -35 Copyright 2003, Paradigm Publishing Inc.

Bitmap Properties…/2 controls the file size -use Lossless for bitmaps with uncomplicated objects and few color variations controls the quality -antialiasing is where jagged edges are smoothened by surrounding the edges with shades of gray or color OBJ 3 -36 deselecting causes the Quality text box to appear 100 is the highest quality Copyright 2003, Paradigm Publishing Inc. click to view the change in picture quality and file size

Breaking Apart and Editing Colors in a Bitmap A bitmapped image can be broken apart and then edited. Modify, Break Apart or Ctrl + B Lasso Tool + Magic Wand Properties a higher number indicates a wider breadth of colors OBJ 3 -37 Copyright 2003, Paradigm Publishing Inc. Magic Wand Modifier

Using 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 OBJ 3 -38 Copyright 2003, Paradigm Publishing Inc.

Converting a Bitmap to a Vector 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. Modify, Trace Bitmap two adjacent pixels are considered the same color if their RGB values are less than the value entered here progress bar indicates progress of conversion OBJ 3 -39 Copyright 2003, Paradigm Publishing Inc.

Importing Bitmaps Directly to the Library File, Import to Library imports a bitmap directly to the current movie's library -does not place a copy on the stage OBJ 3 -40 Copyright 2003, Paradigm Publishing Inc.

Copying and Pasting Images Using 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 OBJ 3 -41 Copyright 2003, Paradigm Publishing Inc.

Importing a Free. Hand Vector Graphic Ø After selecting the file name in the Import dialog box, the Free. Hand Import dialog box appears § control over how layers and pages are converted in the Flash movie OBJ 3 -42 Copyright 2003, Paradigm Publishing Inc.

Importing Other Vector Graphics 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 OBJ 3 -43 Copyright 2003, Paradigm Publishing Inc.

Importing a Fireworks Drawing 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 OBJ 3 -44 Copyright 2003, Paradigm Publishing Inc.

Optimizing Graphics Optimize vector graphics within Flash to reduce file size and increase processing efficiency. Modify, Optimize or Ctrl + Alt + Shift + C OBJ 3 -45 drag the slider to increase or decrease the amount by which you want Flash to optimize the object Copyright 2003, Paradigm Publishing Inc. message appears indicating the amount of reduction that has taken place

Sources 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. privacy policy OBJ 3 -46 Copyright 2003, Paradigm Publishing Inc. terms of use policy

Commands Review How do you break apart a bitmap? Modify, Break Apart or Ctrl + B OBJ 3 -47 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you copy a selected object? Edit, Copy or Ctrl + C OBJ 3 -48 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you convert a bitmap to a vector graphic? Modify, Trace Bitmap OBJ 3 -49 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you convert an object to a symbol? Insert, Convert to Symbol or F 8 OBJ 3 -50 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you create a new symbol? Insert, New Symbol or Ctrl + F 8 OBJ 3 -51 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you cut a selected object? Edit, Cut or Ctrl + X OBJ 3 -52 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you display the Common Library panel? Window, Common Libraries OBJ 3 -53 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you display the Library panel? Window, Library or F 11 OBJ 3 -54 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you distribute objects to layers? Modify, 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. OBJ 3 -55 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you exit symbol editing mode? to exit Edit, Edit Document or Ctrl + E OBJ 3 -56 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you import graphics? File, Import or Ctrl + R click to choose the file format of the graphic which you want to import OBJ 3 -57 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you import graphics to the library? File, Import to Library imports a bitmap directly to the current movie's library -does not place a copy on the stage OBJ 3 -58 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you insert a layer? Insert Layer button OR Insert, Layer Right-click, Insert Layer OBJ 3 -59 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you insert a layer folder? Insert Layer Folder OBJ 3 -60 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you change the layer properties? Modify, Layer OBJ 3 -61 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you open the library from another movie? File, Open as Library or Ctrl + Shift + O navigate and double-click file name OBJ 3 -62 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you optimize a selected object? Modify, Optimize or Ctrl + Alt + Shift + C OBJ 3 -63 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you paste an object from the Clipboard? Edit, Paste or Ctrl + V OBJ 3 -64 Copyright 2003, Paradigm Publishing Inc.

Coming Next OBJ 3 -65 Creating Animation and Guidelines for Flash Project Design Copyright 2003, Paradigm Publishing Inc.