Tutorial 1

1. Tutorial 1 Introducing Macromedia Flash 8

2. Objectives • Discover the types of Web media you can create using Flash • Compare vector graphics and bitmap graphics • Start Flash and explore its main program window elements • Display grid lines, guides, and rulers New Perspectives on Macromedia Flash 8

3. Objectives (continued) • Set a document’s properties • Learn about strokes, fills, and colors • Select and modify objects • Use Flash Help New Perspectives on Macromedia Flash 8

4. What is Macromedia Flash 8? • Program developed by Macromedia, Inc. • Originally use: making fast-loading Web animations • Has evolved into a full Web site production tool • Interactive media created with Flash • Animated logos • Web site navigational controls • Entire Web sites New Perspectives on Macromedia Flash 8

5. Types of Web Media • Web pages communicate using various media • Types: text, graphics, animations, sounds, videos • HTML: used to integrate media into Web pages New Perspectives on Macromedia Flash 8

6. Bitmap and Vector Graphics • Pixel: smallest element making up a picture • Bitmap graphic: matrix of colored pixels • Examples: files with .jpg and .gif extensions • Vector graphics are specified with formulas • Image shapes are defined by color, outline, and position • Images are resolution independent and scale well • Images created in Flash are in the vector format • Bitmap files may be imported into Flash New Perspectives on Macromedia Flash 8

7. Bitmap Graphic Compared to Vector Graphic New Perspectives on Macromedia Flash 8

8. Bitmap and Vector Animation • Animation: virtual motion due to sequencing stills • Bitmap animation • Puts bitmap still images into motion for Web viewing • Implemented using a sequence of bitmap frames • High overhead involved in changing screen colors • Vector animation • Consists of a listing of shapes and their transformations • Produced with less overhead and resolution independence New Perspectives on Macromedia Flash 8

9. Web Media in Flash • Documents: Web media created in Flash • Include static images as well as animations • Documents must be referenced in an HTML file • Types of Flash documents • FLA (.fla) file: used to author Flash content • SWF (.swf) file: viewed by end-user in a Web browser • SWF files require a Flash Player plug-in • ActionScript: code used to enhance interactivity New Perspectives on Macromedia Flash 8

10. Flash Player Plug-in Context Menu New Perspectives on Macromedia Flash 8

11. Viewing Examples of Flash Documents • Admiral Web Design Web site: showcase for Flash • Objective: view animations at showcase Web site • Make sure Flash Player plug-in is installed • Video stream plays while file is downloaded New Perspectives on Macromedia Flash 8

12. Sample Flash Graphics New Perspectives on Macromedia Flash 8

13. Starting Flash • Two ways to start Flash • Click Start  All Programs  Macromedia  Macromedia Flash 8 • Double-click Flash program icon (if on desktop) • Actions you can perform from the Start page • Open recently used files or create a new document • Take a quick tour of Flash • Flash program window has various components New Perspectives on Macromedia Flash 8

14. Main Components Of The Flash Program Window New Perspectives on Macromedia Flash 8

15. Previewing Documents • Preview Flash document to review changes made • Several ways to preview your document in Flash • Preview or play animation within Flash program window • Publish file to play in a separate Flash Player window • Publish file to play in your default Web browser New Perspectives on Macromedia Flash 8

16. Simplekite Document New Perspectives on Macromedia Flash 8

17. Simplekite Document Playing In Flash Player Window New Perspectives on Macromedia Flash 8

18. Flash Program Window Elements • Stage • Site for creating, importing, assembling graphic objects • Work Area • Gray area surrounding the stage • Timeline • Controls and coordinates frames and layers in document • Frame:container representing a unit of time • Playhead: marker indicating currently selected frame • Layers: organize images, animations, and other objects New Perspectives on Macromedia Flash 8

19. Flash Timeline New Perspectives on Macromedia Flash 8

20. Flash Program Window Elements (continued) • Tools panel • Provides tools for manipulating Flash graphics • Operations: draw, paint, select, modify graphics • Four areas: Tools, View, Colors, Options New Perspectives on Macromedia Flash 8

21. Tools Panel Tools New Perspectives on Macromedia Flash 8

22. Panels • Actions performed with controls in Flash panels • Viewing properties of objects • Changing the properties of objects • Panel set: several panels grouped together New Perspectives on Macromedia Flash 8

23. Panels In Their Default Layout New Perspectives on Macromedia Flash 8

24. Organizing Panels • Using the panel title bar • View panel name on the title bar • Options menu control is located on right side of title bar • Expand or collapse panel by clicking title bar • Right click title bar and use Group With to create a group • Moving a panel • Position pointer on left edge of the title bar • Ensure that pointer changes to crossed double arrows • Drag title bar to new location New Perspectives on Macromedia Flash 8

25. The Property Inspector • Property inspector • Panel located at the bottom of the Flash program window • Provides easy access to common object attributes • Adapting Property inspector to an item • Simply select a tool or other graphical object • Attributes of currently selected tool or object are reflected New Perspectives on Macromedia Flash 8

26. Property Inspector with an Object Selected New Perspectives on Macromedia Flash 8

27. Changing the View of the Stage • Zoom tool: used to enlarge or reduce Stage size • Using active Zoom tool against the Stage • Click a part of the Stage to enlarge or reduce it • Alternative: use rectangular selection marquee • Some commands on the View menu • Zoom In or Zoom Out commands • Magnification command • Hand tool: moves Stage without magnification change New Perspectives on Macromedia Flash 8

28. Displaying the Grid, Rulers, and Guides • Grid • Appears as a set of lines on the Stage behind all objects • Grid lines do not become part of your document • Rulers • Vertically displayed on left edge of Stage window • Horizontally displayed on the top edge of Stage Window • Guide • Line used in conjunction with rulers to align objects • Can be moved to a specific part of the Stage New Perspectives on Macromedia Flash 8

29. Grid Displayed on the Stage New Perspectives on Macromedia Flash 8

30. Changing the Document Properties • Properties common to all Flash documents • Title, Description, Stage size, background color, frame rate • Document Properties dialog box • Used to change a document’s properties • Opening the Document Properties dialog box • Click Modify on the menu bar • Next click Document • Changes in Document Properties reflect on Stage New Perspectives on Macromedia Flash 8

31. Document Properties Dialog Box New Perspectives on Macromedia Flash 8

32. Working with Objects in FlashStrokes and Fills • Drawing and painting tools • Line, Pen, Pencil, Oval, Rectangle, and Brush • Places where colors may be selected • Tools panel, Property inspector, Color Mixer panel • Strokes: lines that you draw • Fills: areas you paint with color New Perspectives on Macromedia Flash 8

33. Sample Shapes with Fills and Strokes New Perspectives on Macromedia Flash 8

34. Drawing and Grouping Objects • Merge Drawing model • Objects in a layer occupy the same plane • Object laid over another merges with or segments other • Object Drawing model • Shapes drawn on a layer are independent • Activated by clicking Object Drawing in Tools panel • Preventing objects from impacting each other • Group objects together or place objects in separate layers New Perspectives on Macromedia Flash 8

35. How Objects Interact with Each Other New Perspectives on Macromedia Flash 8

36. Color Controls and the Color Mixer • Strokes and fills can be drawn with different colors • Select color swatch using the eyedropper tool • Swatch: color square in the color palette • 216 Web-safe colors based on RGB (red, green, blue) • Two types of gradient: linear and radial • Places where colors may be selected • Colors are of Tools panel, Property inspector, Color Mixer New Perspectives on Macromedia Flash 8

37. Color Palette For The Fill Color Control New Perspectives on Macromedia Flash 8

38. Selecting Objects • Selection tool • Used to select strokes or fills • Can also be used to select groups of objects • Features of the Selection tool • Snap to Objects, Smooth, and Straighten modifiers New Perspectives on Macromedia Flash 8

39. Selection Tool Modifiers New Perspectives on Macromedia Flash 8

40. Selecting Objects (continued) • Anchor points: reference points on strokes, outlines • Subselection tool reveals anchor points • Applying the Subselection tool to an object • Select Subselection tool in Tools panel • Click a stroke or outline of a fill • Creating tangent handles near an anchor point • Click an anchor point on a curved line New Perspectives on Macromedia Flash 8

41. Changing a Curve’s Anchor Point New Perspectives on Macromedia Flash 8

42. Lasso Tool • Two ways to use the Lasso tool • Select several objects at one time • Select an irregularly shaped area of an object • Draw a free-form selection marquee around the area • Tasks performed on a lassoed object • Move the selection • Apply other effects; e.g., change color of selected fills New Perspectives on Macromedia Flash 8

43. Getting Help in Flash • Flash Help system is a great resource • Two ways to access Flash Help system • Click Help  Flash Help • Click Help on a panel’s option menu • Flash Help displays in two-panel window New Perspectives on Macromedia Flash 8

44. Help Panel New Perspectives on Macromedia Flash 8