Working with Layers, Libraries, and Importing Graphics

1. Macromedia FlashDesign & Application Chapter 3 Working with Layers, Libraries, andImporting Graphics

2. 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.

3. Performance Objectives • 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

4. 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 • 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

5. 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. Each object on the stage is controlled separately through its corresponding layer.

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

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

8. Renaming Layers double-click the current layer name, key the new layer name, press Enter

9. 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. OR Delete Layer button Right-click, Delete Layer If you delete the wrong layer by mistake, use the Undo feature to restore the content to the stage.

10. Using the Clipboard Objects can be cut or copied and then pasted to layers. MOVING select the object first COPYING select the object first Edit, Cut or Ctrl + X Edit, Copy or Ctrl + C Edit, Paste or Ctrl + V Edit, Paste or Ctrl + V

11. Moving a Layer point to layer name or layer icon and drag to desired location -gray bar indicates wherelayer will be repositioned layer is moved in the Timeline

12. Hiding and Locking Layers 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 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. This layer is locked.

13. 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. Objects in Outline mode.

14. 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.

15. Creating a Mask Layer A masked layer partially conceals objects in the linked layer immediately below the mask. layer immediately below mask layer 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.

16. 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

17. Creating a Mask Layer…/3 Mask icons Both the mask layer and the lower layer are automatically locked.

18. 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 Guide Motion Guides Creating a Guide Layer Flash includes two types of layers that can assist with the placement of objects.

19. Creating a Guide Layer…/2 insert a new layer and draw lines or shapes that will be used foralignment purposes designate the layeras a guide

20. Creating a Guide Layer…/3 Resize object so it fits within the guide.

21. Layer Properties Dialog Box Alternate method for working with layers. Modify, Layer

22. Creating a Layer Folder Related layers can be grouped together and moved below a layer folder in the Timeline. Insert Layer Folder Layer folder Click here to collapse layer list for the Graphics 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.

23. 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 • can be modified

24. 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

25. Creating a Symbol Insert, New Symbol or Ctrl + F8 key a descriptive name animation that has its own timeline interactive object created or imported

26. Symbol Editing Mode Symbol name click Scene number click Back button Registration Point -draw object aroundthis center point,move it after drawn, or cut and paste OR to exit Edit, Edit Document or Ctrl + E

27. Inserting and Modifyingan Instance Window, Library or F11 drag fromPreview pane to stage click name Inserted instances can be modified without affecting the master copy of the object.

28. 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 • click Edit at the shortcut menu • opens symbol editing mode • make required changes to master copy • exit symbol editing mode • other instances automatically updated

29. Converting an Existing Object to a Symbol select the object first Insert, Convert to Symbol or F8

30. Inserting Symbols from Another Movie's Library File 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 When you drag an instance to the stage, Flash automatically inserts a copy of the symbol in the current movie's library.

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

32. Creating Your OwnCommon 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

33. 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 Properties

34. 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 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.

35. Bitmap Properties Each imported bitmap has a set of properties associated with it. select file name click Properties button

36. Bitmap Properties…/2 • controls the file size • use Lossless forbitmaps withuncomplicatedobjects and fewcolor variations controls the quality -antialiasing is where jagged edges are smoothened by surrounding the edges with shades of gray or color click to view the change in picture quality and file size deselecting causes the Quality text box to appear 100 is the highest quality

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

38. 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

39. 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

40. Importing Bitmaps Directly to the Library imports a bitmap directly to the current movie's library -does not place a copy on the stage File, Import to Library

41. 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

42. Importing a FreeHandVector 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

43. 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

44. 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

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

46. 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 terms of usepolicy

47. Commands Review How do you break apart a bitmap? Modify, Break Apart or Ctrl + B

48. Commands Review How do you copy a selected object? Edit, Copy or Ctrl + C

49. Commands Review How do you convert a bitmap to a vector graphic? Modify, Trace Bitmap

50. Commands Review How do you convert an object to a symbol? Insert, Convert to Symbol or F8