000_Getting_Started.
000_Getting_Started.
000_Getting_Started.book Page 3 Friday, September 2, 2005 12:22 PM Contents Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 What is Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 What you can do with Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Making a simple Flash document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
000_Getting_Started.book Page 4 Friday, September 2, 2005 12:22 PM Chapter 3: Tutorial: Building Your First Flash Application . . . . .95 Review your task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Examine the completed application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Create a working folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Create a new document . . . . . . . . . . . . . . . . . . .
000_Getting_Started.book Page 5 Friday, September 2, 2005 12:22 PM Introduction Welcome to Macromedia Flash Basic 8 and Macromedia Flash Professional 8. Flash provides everything you need to create and deliver rich web content and powerful applications. Whether you’re designing motion graphics or building data-driven applications, Flash has the tools to produce great results and deliver the best user experience across multiple platforms and devices. This guide is designed to introduce you to Flash.
000_Getting_Started.book Page 6 Friday, September 2, 2005 12:22 PM Flash is extremely well suited to creating content for delivery over the Internet because its files are very small. Flash achieves this through its extensive use of vector graphics. Vector graphics require significantly less memory and storage space than bitmap graphics because they are represented by mathematical formulas instead of large data sets.
000_Getting_Started.book Page 7 Friday, September 2, 2005 12:22 PM When you have finished authoring your Flash document, you publish it using the File > Publish command. This creates a compressed version of your file with the extension .swf (SWF). You can then use Flash Player to play the SWF file in a web browser or as a stand-alone application. For an introduction to Flash Player, see “About Flash Player” on page 17.
000_Getting_Started.book Page 8 Friday, September 2, 2005 12:22 PM To build a Flash application, you typically perform the following basic steps: 1. Decide which basic tasks the application will perform. 2. Create and import media elements, such as images, video, sound, text, and so on. 3. Arrange the media elements on the Stage and in the Timeline to define when and how they appear in your application. 4. Apply special effects to media elements as you see fit. 5.
000_Getting_Started.book Page 9 Friday, September 2, 2005 12:22 PM 3. The Background color swatch is set to white. You can change the color of the Stage by clicking the swatch and selecting a different color. The Property inspector, showing the Stage size and background color Drawing a circle After you’ve created your document, you are ready to add some artwork for the document. To draw a circle on the Stage: 1. Select the Oval tool from the Tools panel.
000_Getting_Started.book Page 10 Friday, September 2, 2005 12:22 PM 2. Select the No Color option from the Stroke Color Picker. Selecting the No Color option in the Stroke Color Picker 3. Select a color of your choice from the Fill Color Picker. Make sure the fill color contrasts well with the Stage color. 4. Draw a circle on the Stage by selecting the Oval tool and Shift-dragging on the Stage. Holding the Shift key constrains the Oval tool to a circle.
000_Getting_Started.book Page 11 Friday, September 2, 2005 12:22 PM Creating a symbol You can turn your new artwork into a reusable asset by converting it to a Flash symbol. A symbol is a media asset that can be reused anywhere in your Flash document without the need to re-create it. To create a symbol: 1. Click the Selection tool in the Tools panel. The Tools panel with the Selection tool selected 2. Click the circle on the Stage to select it. 3.
000_Getting_Started.book Page 12 Friday, September 2, 2005 12:22 PM Animating the circle Now that you have some artwork in your document, you can make it more interesting by animating it to move across the Stage. To create an animation with the circle: 1. Drag the circle to just left of the Stage area. The circle shape moved to the left of the Stage area 2. Click Frame 20 of Layer 1 in the Timeline.
000_Getting_Started.book Page 13 Friday, September 2, 2005 12:22 PM 3. Select Insert > Timeline > Frame. Flash adds frames to Frame 20, which remains selected. Frames inserted in the Timeline 4. With Frame 20 still selected, select Insert > Timeline > Keyframe. A keyframe is added in Frame 20. A keyframe is a frame where some property of an object is explicitly changed. In this new keyframe, you will change the circle’s location. Inserting a keyframe in Frame 20 5.
000_Getting_Started.book Page 14 Friday, September 2, 2005 12:22 PM 7. In the Property inspector (its default location is at the bottom of the Flash application window), select Motion from the Tween pop-up menu. Selecting a motion tween in the Property inspector An arrow appears in the Timeline in Layer 1 between Frame 1 and Frame 20.
000_Getting_Started.book Page 15 Friday, September 2, 2005 12:22 PM Publishing the file When you finish your Flash document, you are ready to publish it so it can be viewed in a browser. When you publish a FLA file, Flash compresses it into the SWF file format. This is the format that you place in a web page. The Publish command can automatically generate an HTML file with the correct tags in it for you. To publish the Flash file and view it in a browser: 1. Select File > Publish Settings. 2.
000_Getting_Started.book Page 16 Friday, September 2, 2005 12:22 PM 3. In the Publish Settings dialog box, select the HTML tab and verify that Flash Only is selected in the Template pop-up menu. This template creates a simple HTML file that contains only your SWF file when displayed in a browser window. Choosing Flash Only from the Template menu 4. Click OK. 5. Select File > Publish and open your web browser. 6. Select File > Open in the web browser. 7.
000_Getting_Started.book Page 17 Friday, September 2, 2005 12:22 PM 8. Select the file named SimpleFlash.html. 9. Click Open. Your Flash document is displayed in the browser window. Congratulations! You have now completed your first Flash document. About Flash Player Flash Player 8, which runs the applications that you create, is installed by default when you install Flash.
000_Getting_Started.book Page 18 Friday, September 2, 2005 12:22 PM Object Drawing model Previously in Flash, all shapes in the same layer on the Stage could affect the outlines of other overlapping shapes. You can now create shapes directly on the Stage that do not interfere with other shapes on the Stage. When you create a shape with the new Object Drawing model, the shape does not cause changes to other shapes that exist underneath the new shape.
000_Getting_Started.book Page 19 Friday, September 2, 2005 12:22 PM Object-level Undo mode You can now choose to keep track of the changes you make in Flash on a per-object basis. When you use this mode, each object on the Stage and in the library has its own undo list. This allows you to undo the changes you make to an object without having to undo changes to any other object. For more information, see “Using the Undo, Redo, and Repeat menu commands” in Using Flash.
000_Getting_Started.book Page 20 Friday, September 2, 2005 12:22 PM Improved text anti-aliasing You can now apply new anti-aliasing settings that make normal and small-sized text much clearer and easier to read onscreen. For more information, see “Setting anti-aliasing options for text” in Using Flash. New video encoder A new video encoder application is included with Flash Professional 8. It is a separate application that provides an easy way to convert video files into the Flash Video (FLV) format.
000_Getting_Started.book Page 21 Friday, September 2, 2005 12:22 PM To install Flash: 1. Close any running versions of Flash before installing. 2. Do one of the following to start the installation process: ■ (Windows) If you have a CD, insert it in your CD drive. A movie clip guides you through the installation choices. N OT E You can also run Install Flash 8.exe to start the movie clip, if necessary. ■ ■ 3.
000_Getting_Started.book Page 22 Friday, September 2, 2005 12:22 PM Switching between trial-mode editions If you’re running the trial mode of one edition of Flash, you can change to another edition during the same trial period. To switch between trial modes: ■ From Flash, select Help > Switch to Flash Professional 8 or Switch to Flash Basic 8, depending on which trial mode you’re already using, and which mode you want to try.
000_Getting_Started.book Page 23 Friday, September 2, 2005 12:22 PM First Run folder This folder is a sibling to the application-level configuration folder, but serves a different purpose. The First Run folder is a simple mechanism, created specifically for the Flash authoring tool, that facilitates the sharing of configuration files among users of the same computer. Folders and files in the First Run folder are automatically copied by Flash to the user-level configuration folder.
000_Getting_Started.book Page 24 Friday, September 2, 2005 12:22 PM All-user-level configuration folder This is the configuration folder found in the common user profile area. This folder is part of the standard Windows and Macintosh operating system installations and is shared by all users of a particular computer. Any files that are placed in this folder are made available by the operating system to all users of the computer.
000_Getting_Started.book Page 25 Friday, September 2, 2005 12:22 PM To change or reinstall the plug-in for Windows (CompuServe, Firefox, Mozilla, Netscape, or Opera): 1. Close your browser before installing a new version of the plug-in. 2. Remove any currently installed versions of the plug-in. For instructions, see TechNote 14157 on the Macromedia Support Center at www.macromedia.com/go/tn_14157. 3. Run the Install Flash Player 8.exe file in your Players folder to begin installation. 4.
000_Getting_Started.
000_Getting_Started.book Page 27 Friday, September 2, 2005 12:22 PM CHAPTER 1 Learning Flash 1 Macromedia Flash Basic 8 and Flash Professional 8 include a diverse set of tools with an extremely broad range of uses. Accordingly, the Flash Help contains a large number of books and resources. This chapter is intended to guide you through the process of determining the sections of Flash Help that are relevant to your level of experience and what you are trying to do with Flash.
000_Getting_Started.book Page 28 Friday, September 2, 2005 12:22 PM Where to start Because Flash includes several manuals that cover a wide variety of topics, it is helpful to know where to start when learning Flash. This section helps you understand how to approach the documentation, depending on what your background is and what you intend to do with Flash. If you are completely new to Flash: 1. Begin by reading this Getting Started with Flash guide.
000_Getting_Started.book Page 29 Friday, September 2, 2005 12:22 PM You are a web or graphic designer who wants to learn Flash, but not ActionScript: 1. Continue to read this Getting Started with Flash guide. Chapter 2, “Flash Basics” provides a simple introduction to the Flash user interface and Chapter 3, “Tutorial: Building Your First Flash Application” includes a tutorial that takes you through the entire process of creating a real-world Flash application. 2.
000_Getting_Started.book Page 30 Friday, September 2, 2005 12:22 PM If you have previous experience with coding in a language other than ActionScript and want to learn the Flash development environment: 1. Browse the Learning ActionScript 2.0 in Flash guide. This guide introduces you to the conventions of ActionScript and the Flash Actions panel. 2. You can then use the ActionScript 2.0 Language Reference to get detailed information about each element in the ActionScript language.
000_Getting_Started.book Page 31 Friday, September 2, 2005 12:22 PM If you have some basic understanding of Flash and you need to catch up with changes in the user interface or ActionScript: 1. For a detailed listing of the new features in Flash Basic 8 and Flash Professional 8, see “What’s new in Flash” in Using Flash. 2. Read about the new Script Assist mode in Chapter 13, “Writing ActionScript with Script Assist” in Using Flash. 3.
000_Getting_Started.book Page 32 Friday, September 2, 2005 12:22 PM If you are a Flash developer with no mobile or device development experience: 1. Read Developing Flash Lite Applications to learn about the specific requirements and workflows of creating applications and content for mobile devices. Because these devices run Flash Lite player, the content you develop for them needs to be designed somewhat differently than content intended for Flash Player 8.
000_Getting_Started.book Page 33 Friday, September 2, 2005 12:22 PM Get the most from the Flash documentation The Macromedia Flash help system contains a great deal of information and resources that describe the full range of Flash authoring capabilities and the ActionScript language. Many online resources are also available to help you learn Flash. This document is intended to help you navigate these resources and find the information that is most helpful to you in realizing your goals with Flash.
000_Getting_Started.book Page 34 Friday, September 2, 2005 12:22 PM Accessing the Flash documentation The following tables summarize the documents included in the Flash help system. You can purchase printed versions of select titles. For more information, see www.macromedia.com/go/buy_books.
000_Getting_Started.book Page 35 Friday, September 2, 2005 12:22 PM Tutorials and samples Title Description/ Audience Where to Find It Flash Tutorials • View in Flash: Select Help > A collection of Flash Help step-by-step • View online: tutorials that livedocs.macromedia.com/go/ teach a variety of livedocs_flash both beginning • Get the PDF: and advanced www.macromedia.com/go/ Flash techniques. fl_documentation Intended for all Flash users.
000_Getting_Started.book Page 36 Friday, September 2, 2005 12:22 PM ActionScript 36 Learning Flash Title Description/ Audience Where to Find It Learning ActionScript 2.0 in Flash A detailed introduction to coding with ActionScript, including extensive reusable code examples. Intended for beginning and intermediate ActionScript users. • View in Flash: Select Help > Flash Help • View online: livedocs.macromedia.com/go/ livedocs_flash • Get the PDF: www.macromedia.
000_Getting_Started.book Page 37 Friday, September 2, 2005 12:22 PM Components Title Description/ Audience Where to Find It Using Components Information about • View in Flash: Select Help > Flash Help how to use and • View online: customize livedocs.macromedia.com/go/ components in livedocs_flash your Flash • Get the PDF: documents. www.macromedia.com/go/ Intended for all fl_documentation Flash users.
000_Getting_Started.book Page 38 Friday, September 2, 2005 12:22 PM Flash Lite 38 Learning Flash Title Description/ Audience Where to Find It Getting Started with Flash Lite • View in Flash: Select Introductory Help > Flash Help information about • View online: Flash Lite livedocs.macromedia.com/go/ workflows and livedocs_flash authoring • Get the PDF: considerations. www.macromedia.com/go/ Intended for flash_lite_documentation mobile and device developers and intermediate Flash users.
000_Getting_Started.book Page 39 Friday, September 2, 2005 12:22 PM Accessing additional online Flash resources The following table summarizes additional online resources for learning Flash. Resource Description Where to Find It Flash Support Center TechNotes, plus support and problem-solving information. • www.macromedia.com/go/ flash_support Flash Developer Center Articles and • www.macromedia.com/go/ flash_devcenter tutorials to help you improve your skills and learn new ones.
000_Getting_Started.book Page 40 Friday, September 2, 2005 12:22 PM Choosing the right help books Because Flash Help contains many books, it is useful to know what each book is about before deciding which ones to use. The following list describes each book’s purpose and contents in detail: ■ Getting Started with Flash provides an introduction to what Flash is and what you can do with it.
000_Getting_Started.book Page 41 Friday, September 2, 2005 12:22 PM ■ ActionScript 2.0 Language Reference includes dictionary-style entries for all of the actions, methods, and properties in the ActionScript 2.0 application programming interface (API). When you understand the basics of how to write ActionScript code, this reference is a fast way to find specific ActionScript terms that will help you accomplish specific tasks.
000_Getting_Started.book Page 42 Friday, September 2, 2005 12:22 PM ■ Developing Flash Lite Applications provides techniques and guidelines for creating content and applications for Flash Lite, the version of Flash Player designed for mobile phones and other devices. Because Flash Lite supports different features than the desktop version of Flash Player supports, the techniques for creating content for Flash Lite are different from those for creating Flash desktop content. ■ Learning Flash Lite 1.
000_Getting_Started.book Page 43 Friday, September 2, 2005 12:22 PM Searching the help system Flash Basic 8 and Flash Professional 8 provide thorough search capabilities that help you easily find the information you need. In the Flash Help panel, you can search for help pages that contain specific words or phrases. You can search Flash Help in the following ways: Single-word searches return a list of help pages that contain the specified word. For example, you might type timeline in the search text box.
000_Getting_Started.book Page 44 Friday, September 2, 2005 12:22 PM 3. Click a help topic to select it from the list. The topic appears in the Table of Contents pane of the Help panel. The table of contents path to the topic appears at the top of each help page. NO TE Click Clear to return to the Table of Contents view. To find reference information about a specific ActionScript term, use the ActionScript 2.0 Language Reference, or use Search.
000_Getting_Started.book Page 45 Friday, September 2, 2005 12:22 PM 2. To open the Help panel reference page for the selected item, do one of the following: ■ Press F1. ■ Right-click the item and select View Help. ■ Click Reference above the Script pane. To access context-sensitive help from a Flash panel: ■ Click the pop-up menu in the panel and select Help. To access context-sensitive help from a dialog box: ■ Click the Help icon in the dialog box.
000_Getting_Started.book Page 46 Friday, September 2, 2005 12:22 PM Purchasing printed documentation To purchase printed versions of the Flash documentation, go to www.macromedia.com/go/books. Discussing the Flash documentation with LiveDocs In addition to accessing Flash documentation in the Flash Help panel, you can get the same documentation online in the LiveDocs format.
000_Getting_Started.book Page 47 Friday, September 2, 2005 12:22 PM Controlling the appearance of the Help panel You can control how the Help panel appears in Flash. Arranging the Help panel in the Flash workspace You can arrange the Help panel position in the workspace to optimize its usability. You can easily control the size of the display area, and where and when the Help panel is displayed. For more details about working with panels, see “Using panels and the Property inspector” on page 73.
000_Getting_Started.book Page 48 Friday, September 2, 2005 12:22 PM T IP In Windows, you can change the size of the text in the Help panel by clicking in a topic, pressing Control, and scrolling the mouse wheel. This also changes the size of text in your web browser. Changing the size of text displayed in the Help panel If you are using a laptop, you may find it useful to change the text in the Help panel to a larger size.
000_Getting_Started.book Page 49 Friday, September 2, 2005 12:22 PM CHAPTER 2 Flash Basics 2 The Macromedia Flash Basic 8 and Flash Professional 8 workspace consists of a Stage on which you place media objects, a Property inspector for organizing and modifying media assets, a Tools panel with tools for creating and modifying image content, and many other panels for accessing the wide range of functionality in Flash.
000_Getting_Started.book Page 50 Friday, September 2, 2005 12:22 PM About Flash files The primary Flash file type, FLA files, contain three basic types of information that comprise a Flash document. These include the following: Media objects are the various graphic, text, sound and video objects that comprise the content of your Flash document.
000_Getting_Started.book Page 51 Friday, September 2, 2005 12:22 PM ■ JSFL files are JavaScript files that you can use to add new functionality to the Flash authoring tool. See Extending Flash for more information. ■ FLP files are Flash Project files (Flash Professional only). You can use Flash Projects to manage multiple document files in a single project. Flash Projects allow you to group multiple, related files together to create complex applications.
000_Getting_Started.book Page 52 Friday, September 2, 2005 12:22 PM To display the Start page again, do one of the following: ■ (Windows) Select Edit > Preferences and select Show Start Page in the General category. ■ (Macintosh) Select Flash > Preferences and select Show Start Page in the General category.
000_Getting_Started.book Page 53 Friday, September 2, 2005 12:22 PM To magnify or reduce your view of the Stage, do one of the following: ■ To zoom in on a certain element, select the Zoom tool in the Tools panel, and click the element. To switch the Zoom tool between zooming in or out, use the Enlarge or Reduce modifiers (in the options area of the Tools panel when the Zoom tool is selected) or Alt-click (Windows) or Option-click (Macintosh).
000_Getting_Started.book Page 54 Friday, September 2, 2005 12:22 PM Moving the view of the Stage When the Stage is magnified, you may not be able to see all of it. The Hand tool lets you move the Stage to change the view without having to change the magnification. To move the Stage view: 1. In the Tools panel, select the Hand tool. To temporarily switch between another tool and the Hand tool, hold down the Spacebar and click the tool in the Tools panel. 2. Drag the Stage.
000_Getting_Started.book Page 55 Friday, September 2, 2005 12:22 PM Empty keyframe Playhead Timeline header Frame View pop-up menu Frame by frame animation Tweened animation Guide layer icon Center Frame button Onion-skinning buttons Elapsed Time indicator Frame Rate indicator Current Frame indicator You can change the way frames appear in the Timeline, as well as display thumbnails of frame content in the Timeline.
000_Getting_Started.book Page 56 Friday, September 2, 2005 12:22 PM To move the Timeline when it is docked to the application window: ■ Drag the gripper at the left of the word Timeline in the panel title bar. To dock an undocked Timeline: ■ Drag the Timeline title bar to an edge of the application window. Press Control and drag to prevent the Timeline from docking. To lengthen or shorten layer name fields: ■ Drag the bar separating the layer names and the frames portions of the Timeline.
000_Getting_Started.book Page 57 Friday, September 2, 2005 12:22 PM To go to a frame: ■ Click the frame’s location in the Timeline header, or drag the playhead to the desired position. To center the Timeline on the current frame: ■ Click Center Frame at the bottom of the Timeline. Changing the display of frames in the Timeline You can change the size of frames in the Timeline, and add color to sequences of frames to highlight them.
000_Getting_Started.book Page 58 Friday, September 2, 2005 12:22 PM To change the display of frames in the Timeline: 1. Click Frame View in the upper-right corner of the Timeline to display the Frame View pop-up menu. 2. Select from the following options: ■ ■ ■ ■ ■ To change the width of frame cells, select Tiny, Small, Normal, Medium, or Large. (The Large frame-width setting is useful for viewing the details of sound waveforms.) To decrease the height of frame cell rows, select Short.
000_Getting_Started.book Page 59 Friday, September 2, 2005 12:22 PM Working with frames in the Timeline In the Timeline, you work with frames and keyframes, placing them in the order you want the objects in the frames to appear. You can change the length of a tweened animation by dragging a keyframe in the Timeline.
000_Getting_Started.book Page 60 Friday, September 2, 2005 12:22 PM To select one or more frames in the Timeline: ■ To select one frame, click the frame. If you have Span Based Selection enabled in the Preferences dialog box, clicking one frame selects the entire frame sequence between two keyframes. For more information, see “Setting preferences in Flash”. ■ To select multiple contiguous frames, Shift-click additional frames.
000_Getting_Started.book Page 61 Friday, September 2, 2005 12:22 PM ■ To change the length of a tweened sequence, drag the beginning or ending keyframe left or right. To change the length of a frame-by-frame animation sequence, see “Creating frame-by-frame animations” in Using Flash. ■ To add an item from the library to the current keyframe, drag the item from the Library panel onto the Stage. Using layers Layers are like transparent sheets of acetate stacked on top of each other on the Stage.
000_Getting_Started.book Page 62 Friday, September 2, 2005 12:22 PM Creating layers and layer folders When you create a new layer or folder, it appears above the selected layer. The newly added layer becomes the active layer. To create a layer, do one of the following: ■ Click the Insert Layer button at the bottom of the Timeline. ■ Select Insert > Timeline > Layer. ■ Right-click (Windows) or Control-click (Macintosh) a layer name in the Timeline and select Insert Layer from the context menu.
000_Getting_Started.book Page 63 Friday, September 2, 2005 12:22 PM ■ Alt-click (Windows) or Option-click (Macintosh) in the Eye column to the right of a layer or folder name to hide all other layers and folders. Alt-click or Option-click it again to show all layers and folders. To view the contents of a layer as outlines, do one of the following: ■ Click in the Outline column to the right of the layer’s name to display all objects on that layer as outlines.
000_Getting_Started.book Page 64 Friday, September 2, 2005 12:22 PM To change the number of layers displayed in the Timeline: ■ Drag the bar that separates the Timeline from the Stage area. Editing layers and layer folders You can rename, copy, and delete layers and folders. You can also lock layers and folders to prevent them from being edited. By default, new layers are named by the order in which they are created: Layer 1, Layer 2, and so on. You can rename layers to better reflect their contents.
000_Getting_Started.book Page 65 Friday, September 2, 2005 12:22 PM ■ Drag through the Lock column to lock or unlock multiple layers or folders. ■ Alt-click (Windows) or Option-click (Macintosh) in the Lock column to the right of a layer or folder name to lock all other layers or folders. Alt-click or Option-click in the Lock column again to unlock all layers or folders. To copy a layer: 1. Click the layer name in the Timeline to select the entire layer. 2. Select Edit > Timeline > Copy Frames. 3.
000_Getting_Started.book Page 66 Friday, September 2, 2005 12:22 PM Organizing layers and layer folders You can rearrange layers and folders in the Timeline to organize your document. Layer folders help organize your workflow by letting you place layers in a tree structure. You can expand or collapse a folder to see the layers it contains without affecting which layers are visible on the Stage.
000_Getting_Started.book Page 67 Friday, September 2, 2005 12:22 PM You can also create a motion guide layer to control the movement of objects in a motion tweened animation. For more information, see “Tweening motion along a path” in Using Flash. NO TE Dragging a normal layer onto a guide layer converts the guide layer to a motion guide layer. To prevent accidentally converting a guide layer, place all guide layers at the bottom of the layer order.
000_Getting_Started.book Page 68 Friday, September 2, 2005 12:22 PM Using the Customize Tools panel dialog box, you can specify which tools to display in the Flash authoring environment. For more information, see “Customizing the Tools panel” on page 68. For information on using the drawing and painting tools, see “About Flash drawing and painting tools” in Using Flash. For information on using the selection tools, see “Selecting objects” in Using Flash.
000_Getting_Started.book Page 69 Friday, September 2, 2005 12:22 PM To customize the Tools panel: 1. To display the Customize Tools panel dialog box, do one of the following: ■ (Windows) Select Edit > Customize Tools panel. ■ (Macintosh) Select Flash > Customize Tools panel. The Available Tools menu indicates the tools that are currently available in the Flash. The Current Selection menu indicates the tool (or tools) currently assigned to the selected location in the Tools panel.
000_Getting_Started.book Page 70 Friday, September 2, 2005 12:22 PM Using rulers When rulers are displayed, they appear along the top and left sides of the document. You can change the unit of measure used in the rulers from the default of pixels to some other unit. When you move an element on the Stage with the rulers displayed, lines indicating the element’s dimensions appear on the rulers. To display or hide rulers: ■ Select View > Rulers.
000_Getting_Started.book Page 71 Friday, September 2, 2005 12:22 PM To turn snapping to guides on or off: ■ Select View > Snapping > Snap to Guides. N OT E Snapping to guides takes precedence over snapping to the grid in places where guides fall between grid lines. To move a guide: 1. Make sure rulers are visible by selecting View > Rulers. 2. With the Selection tool, click anywhere on the ruler and drag the guide to the desired place on the Stage.
000_Getting_Started.book Page 72 Friday, September 2, 2005 12:22 PM To clear guides: ■ Select View > Guides > Clear Guides. If you are in document-editing mode, all guides in the document are cleared. If you are in symbol-editing mode, only guides used in symbols are cleared. Using the grid When the grid is displayed in a document, it appears as a set of lines behind the artwork in all scenes. You can snap objects to the grid, and you can modify the grid size and grid line color.
000_Getting_Started.book Page 73 Friday, September 2, 2005 12:22 PM Using panels and the Property inspector Flash offers many ways to customize the workspace to your needs. Using panels and the Property inspector, you can view, organize, and change media and other assets and their attributes. You can show, hide, and resize panels. You can also group panels together and save custom panel sets to make the workspace match your personal preferences.
000_Getting_Started.book Page 74 Friday, September 2, 2005 12:22 PM About the Library panel The Library panel is where you store and organize symbols created in Flash, as well as imported files, including bitmap graphics, sound files, and video clips. The Library panel lets you organize library items in folders, see how often an item is used in a document, and sort items by type. For more information, see “Managing media assets with the library” in Using Flash.
000_Getting_Started.book Page 75 Friday, September 2, 2005 12:22 PM For information on using the Actions panel and writing ActionScript code, including switching between editing modes, see “Using the Actions panel and Script window” in Learning ActionScript 2.0 in Flash. The Actions panel showing a stop() action in a frame To display the Actions panel, do one of the following: ■ Select Window > Actions. ■ Press F9.
000_Getting_Started.book Page 76 Friday, September 2, 2005 12:22 PM To open a panel: ■ Select the desired panel from the Window menu. To close a panel, do one of the following: ■ Select the desired panel from the Window menu. ■ Right-click (Windows) or Control-click (Macintosh) the panel’s title bar and select Close Panel Group from the context menu. To use a panel’s pop-up menu: 1. Click the control at the far right in the panel’s title bar to view the popup menu. 2. Click an item in the menu.
000_Getting_Started.book Page 77 Friday, September 2, 2005 12:22 PM To move a panel: ■ Drag the panel by its gripper (on the left side of the title bar). To add a panel to an existing panel group: ■ Drag the panel by its gripper onto another panel. A black line appears next to the target panel to show where the panel will be placed. To display multiple panels in a single panel window: 1. Click a panel’s pop-up menu. 2. Select the Group Panel Name With option. 3.
000_Getting_Started.book Page 78 Friday, September 2, 2005 12:22 PM To select a panel layout: 1. Select Window > Workspace Layout. 2. From the submenu, select Default Layout to reset panels to the default layout, or select a custom layout that you have saved previously. To delete custom layouts: 1. Select Window > Workspace Layout > Manage. 2. In the Manage Workspace Layouts dialog box, select the panel set you want to delete. 3. Click Delete. 4. Click Yes to confirm the deletion. 5. Click OK.
000_Getting_Started.book Page 79 Friday, September 2, 2005 12:22 PM To set preferences: 1. Select Edit > Preferences (Windows) or Flash > Preferences (Macintosh). 2. In the Category list, select the one of the following: 3. ■ General ■ ActionScript ■ Auto Format ■ Clipboard ■ Drawing ■ Text ■ Warning Select from the respective options as described in the procedures that follow.
000_Getting_Started.book Page 80 Friday, September 2, 2005 12:22 PM ■ For Test Movie Options, select Open Test Movie in Tabs to have Flash open a new document tab in the application window when you select Control > Test Movie. The default is to open the test movie in its own window. ■ For Selection Options, select or deselect Shift Select to control how Flash handles selection of multiple elements. When Shift Select is off, clicking additional elements adds them to the current selection.
000_Getting_Started.book Page 81 Friday, September 2, 2005 12:22 PM To set AutoFormat preferences for ActionScript: ■ Select any of the check boxes. To see the effect of each selection, look in the Preview pane. To set Clipboard preferences, select from the following options: ■ For Bitmaps (Windows only), select options for Color Depth and Resolution to specify these parameters for bitmaps copied to the Clipboard. Select Smooth to apply anti-aliasing.
000_Getting_Started.book Page 82 Friday, September 2, 2005 12:22 PM To set text preferences, select one of the following options: ■ For Font Mapping Default, select a font to use when substituting missing fonts in documents you open in Flash. For more information, see “Substituting missing fonts” in Using Flash. ■ For Vertical Text options, select Default Text Orientation to make the default orientation of text vertical, which is useful for some Asian language fonts.
000_Getting_Started.book Page 83 Friday, September 2, 2005 12:22 PM ■ Select Warn on Conversion of Effect Graphic Objects to have Flash warn you when you attempt to edit a symbol that has timeline effects applied to it. ■ Select Warn on Exporting to Flash Player 6 r65 to have Flash warn you when you export a document to this earlier version of Flash Player.
000_Getting_Started.book Page 84 Friday, September 2, 2005 12:22 PM To view or print the current set of keyboard shortcuts: 1. Select Edit > Keyboard Shortcuts. 2. In the Keyboard Shortcuts dialog box, select the shortcut set you wish to view from the Current pop-up menu. 3. Click the Export Set as HTML button. The Export Set as HTML button 4. In the Save As dialog box that appears, select a name and location for the exported HTML file. The default file name is the name of the selected shortcut set.
000_Getting_Started.book Page 85 Friday, September 2, 2005 12:22 PM To add or remove a keyboard shortcut: 1. Select Edit > Keyboard Shortcuts (Windows) or Flash > Keyboard Shortcuts (Macintosh) and select the set that you want to modify. 2. From the Commands pop-up menu, select Drawing Menu Commands, Drawing Tools, Test Movie Menu Commands, or Workplace Accessibility Commands to view shortcuts for the selected category. 3.
000_Getting_Started.book Page 86 Friday, September 2, 2005 12:22 PM Using context menus Context menus contain commands relevant to the current selection. For example, when you select a frame in the Timeline window, the context menu contains commands for creating, deleting, and modifying frames and keyframes. Context menus exist for many items and controls in many locations, including on the Stage, in the Timeline, in the Library panel, and in the Actions panel.
000_Getting_Started.book Page 87 Friday, September 2, 2005 12:22 PM About Flash authoring accessibility on the Macintosh Accessibility for the Flash authoring environment on the Macintosh has the following limitations: ■ The Panel Focus keyboard shortcut (Command+Option+Tab) is not supported for the Property inspector. ■ The Panel Control Focus keyboard shortcut (Tab) is supported only for the Timeline, not for other panels or the Property inspector.
000_Getting_Started.book Page 88 Friday, September 2, 2005 12:22 PM To use keyboard shortcuts to select or deselect, expand, or collapse panels or the Property inspector: ■ To move the focus through the panels currently displayed in the workspace, press Control+Alt+Tab (Windows) or Command+Option+Tab (Macintosh). A dotted line appears around the title of the currently focused panel.
000_Getting_Started.book Page 89 Friday, September 2, 2005 12:22 PM ■ You can use the Right Arrow and Left Arrow keys to move the focus between the pop-up menu and the panel title bar. ■ If the focus is on the pop-up menu, pressing Tab again moves the focus through the other controls in the panel. Pressing Tab again will not return the focus to the panel pop-up menu. ■ When the pop-up menu has the focus, you can press Enter (Windows only) to display the pop-up menu items.
000_Getting_Started.book Page 90 Friday, September 2, 2005 12:22 PM To move the focus through the controls in a panel: 1. Press Tab when the focus is currently applied to the panel pop-up menu. Press Tab repeatedly to move the focus through the controls in the panel. 2. Press Enter (Windows only) to activate the currently selected panel control.
000_Getting_Started.book Page 91 Friday, September 2, 2005 12:22 PM Selecting the Stage or objects on the Stage using keyboard shortcuts You can select the Stage or an object on the Stage using keyboard shortcuts. Selecting the Stage with a keyboard shortcut is equivalent to clicking on the Stage. Any other element currently selected becomes deselected when the Stage is selected. Once the Stage is selected, you can use the Tab key to navigate through all objects on all layers, one at a time.
000_Getting_Started.book Page 92 Friday, September 2, 2005 12:22 PM Navigating tree controls using keyboard shortcuts You can navigate tree structures, the hierarchical displays of file structures in certain Flash panels, using keyboard shortcuts. You can expand and collapse folders in the tree control and move up and down between parent and child folders.
000_Getting_Started.book Page 93 Friday, September 2, 2005 12:22 PM ■ You can paste a library item into a different location in the same library where it originated. ■ If you attempt to paste a library item into a location containing another item by the same name, you can select whether to replace the existing item.
000_Getting_Started.
000_Getting_Started.book Page 95 Friday, September 2, 2005 12:22 PM CHAPTER 3 Tutorial: Building Your First Flash Application 3 This tutorial guides you through the process of creating a simple application using some of the authoring features in Macromedia Flash Basic 8 and Flash Professional 8. A Flash application, broadly defined, can be as simple as content that offers interactivity, or as elaborate as a robust application that interacts with a variety of data sources.
000_Getting_Started.book Page 96 Friday, September 2, 2005 12:22 PM Review your task In this tutorial, you will create a type of application known as a flexible messaging area, or FMA for the web site of a fictional restaurant called Cafe Townsend. An FMA is a common type of Flash application used for displaying content that conveys some kind of informational or marketing message to the audience. In this case, the FMA displays photographs of items from a restaurant menu.
000_Getting_Started.book Page 97 Friday, September 2, 2005 12:22 PM Run the completed application To better understand the type of application you’ll create as you work through this tutorial, you can look at a completed FLA file version of the application in the Flash authoring tool. FLA files are the type of files you work on in Flash. You can also play the SWF version of the file in Flash Player. The SWF version is the version of the file that you would publish in a web page.
000_Getting_Started.book Page 98 Friday, September 2, 2005 12:22 PM You now see the completed tutorial application in the Flash authoring environment. 3. After you have the file open, you can explore the Stage, the Library panel, and the Timeline. ■ ■ ■ ■ On the Stage you will see a variety of graphic shapes, which you will learn to create later in this tutorial. In the Library panel, you will see a list of symbols, or reusable assets, that the document uses.
000_Getting_Started.book Page 99 Friday, September 2, 2005 12:22 PM 2. Locate the cafe_townsend folder in the Flash application folder on your hard disk. If you installed Flash to its default location, the path to the folders is as follows: ■ ■ 3. (Windows) C:\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial_assets\cafe_townsend (Macintosh) /Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial_assets/cafe_townsend Copy the cafe_townsend folder to your local_sites folder.
000_Getting_Started.book Page 100 Friday, September 2, 2005 12:22 PM Define document properties Configuring document properties is a common first step in Flash authoring. You can change the document properties at any time, but it is helpful to make certain decisions, such as the Stage size and background color, at the beginning of the process. Document properties are properties that affect the entire Flash document, such as the size of the Stage or the background color.
000_Getting_Started.book Page 101 Friday, September 2, 2005 12:22 PM 4. In the Document Properties dialog box, enter 700 in the width text box and 150 in the height text box, and then click OK. Flash automatically inserts the px (for pixel) after the number. The Document Properties dialog box 5. In the Timeline, click the value in the Zoom menu and enter 75%. This makes it easier to see your entire document in the Document window. Press Enter (Windows) or Return (Macintosh). 6. Save your work.
000_Getting_Started.book Page 102 Friday, September 2, 2005 12:22 PM Create symbols Next, you will create some symbols or reusable assets. Symbols allow you to use the same asset more than once without storing multiple copies of it in your FLA file. You store the symbol in the Library panel, and drag instances of the symbol to the Stage when you need them. To create the symbol: 1. Select Insert > New Symbol. 2. In the Create New Symbol dialog box, type imageHolder in the Name text box.
000_Getting_Started.book Page 103 Friday, September 2, 2005 12:22 PM 7. Drag in the drawing area to draw a wide, flat rectangle. 8. Select the Selection tool from the Tools panel. 9. Double-click the rectangle you drew to select both its fill and its stroke. NO TE The stroke is the line that forms the border of a shape. 10. In the Property inspector, enter 0 in both the X and Y text boxes. This locates the upper-left corner of the symbol in the upper-left corner of the Stage. 11.
000_Getting_Started.book Page 104 Friday, September 2, 2005 12:22 PM 4. In the Library panel (Window > Library), drag the imageHolder symbol to the drawing area. You have now created an instance of the imageHolder symbol. This instance is part of the new slides symbol you are creating. 5. With the new instance still selected on the Stage, in the Property inspector, enter holder0 in the Instance Name text box. This gives the instance its own name that is separate from the symbol name. 6.
000_Getting_Started.book Page 105 Friday, September 2, 2005 12:22 PM You have now finished creating the symbol called slides. Next, you will create a third symbol that will contain an instance of the slides symbol. As you can see, nesting symbol instances inside other symbols is a common technique of Flash authoring. The completed slides symbol To create the third symbol: 1. Select Insert > New Symbol. 2. In the Create New Symbol dialog box, enter slideShow in the Name text box and click OK. 3.
000_Getting_Started.book Page 106 Friday, September 2, 2005 12:22 PM 4. With the symbol instance still selected, in the Property inspector, enter 0 in the X and Y text boxes. 5. Still in the Property inspector, enter slides_mc in the instanceName text box. Edit a symbol Timeline Now that you have created the three symbols, you will edit the slideShow symbol by adding animation to its Timeline.
000_Getting_Started.book Page 107 Friday, September 2, 2005 12:22 PM 2. In the Timeline, select Frame 20 of Layers 1 and 2. Selecting Frame 20 of Layers 1 and 2 3. Select Modify > Timeline > Convert to Keyframes. This adds frames to the Timeline and adds keyframes to the selected frames (Frame 20). The Timeline with the added keyframes in Frame 20 4. Repeat the process by selecting Layers 1 and 2 in Frame 40 and selecting Modify > Timeline > Convert to Keyframes. 5.
000_Getting_Started.book Page 108 Friday, September 2, 2005 12:22 PM Add actions to frames In this section, you will add a small amount of ActionScript to control how the playhead moves through the Timeline of the slideShow movie clip. By adding stop() methods, you cause the playhead to stop and wait at certain frames. Later you will add ActionScript code to make the playhead move again. To add the ActionScript code: 1. In the Timeline, select Frame 1 of Layer 2. 2.
000_Getting_Started.book Page 109 Friday, September 2, 2005 12:22 PM 16. Select frame 60 of Layer 2. 17. In the Actions panel, type the stop(); ActionScript. 18. In the Timeline, select frame 80 of Layer 2. 19. In the Actions panel, type the stop(); ActionScript. Add labels to frames Now you will add labels to specific frames. By labeling a frame, you make it possible to refer to that frame in ActionScript. This allows you to write ActionScript code that performs actions on those frames.
000_Getting_Started.book Page 110 Friday, September 2, 2005 12:22 PM Add motion tweens A motion tween is a type of animation in which an object moves from one position to another. In this project, you will make the images of food animate upward when the user clicks on a button, which you will add later. To add the motion tweens: 1. In the Timeline, select Frame 1 of Layer 1. 2. In the Property inspector, select Motion from the Tween menu. Frames 1 to 19 in Layer 1 become a motion tween.
000_Getting_Started.book Page 111 Friday, September 2, 2005 12:22 PM 8. In the Property inspector, enter -150 in the Y text box. This moves the slideShow movie clip instance upward 150 pixels in the keyframe in Frame 20. The motion tween from Frame 1 to Frame 20 slides the movie clip upward smoothly instead of causing the movie clip to jump from one position to the next. 9. In the Timeline, select Frame 40 in Layer 1. 10. In 11. the Property inspector, select Motion from the Tween menu.
000_Getting_Started.book Page 112 Friday, September 2, 2005 12:22 PM Edit the main Timeline Now you will return to the main Timeline of your Flash document to add details that affect the entire document. To add layers to the main Timeline: 1. Click the Scene 1 icon at the top of the Timeline. You exit symbol-editing mode and return to the main Timeline of your FLA file. 2. Click the Insert Layer button at the bottom of the Timeline. A new layer appears above the existing layer in the Timeline. 3.
000_Getting_Started.book Page 113 Friday, September 2, 2005 12:22 PM To add the slideShow movieClip to the Stage: 1. Click the slideShow layer name to make that layer active. 2. Drag the slideShow symbol from the Library panel to the Stage and align its upper-left corner with the upper left corner of the Stage. 3.
000_Getting_Started.book Page 114 Friday, September 2, 2005 12:22 PM 5. Select the color black (#000000) from the Fill Color Picker. Selecting black from the Fill Color Picker 6. Draw a rectangle on the Stage that is approximately the same shape as the Stage. Drawing a black rectangle the shape of the Stage 114 7. In the Tools panel, select the Selection tool. 8. On the Stage, click the rectangle you just drew to select it. 9. Select Window > Align to open the Align panel.
000_Getting_Started.book Page 115 Friday, September 2, 2005 12:22 PM 10. In the Align panel, click the To Stage option so it is selected. This allows the Align panel to align the selected rectangle with the Stage area. The Align panel with the To Stage option selected In the Align panel, find the Match-size area and click the Match Width and Height button. Your rectangle becomes the same size as the Stage area. TIP 11.
000_Getting_Started.book Page 116 Friday, September 2, 2005 12:22 PM 13. Still in the Align panel, click the Align Horizontal Center button. Clicking the Align Horizontal Center button The rectangle is now precisely centered on the Stage. The black rectangle centered on the Stage 14. Click 15. 116 outside the Stage to deselect the black rectangle. In the Tools panel, select the Rectangle tool.
000_Getting_Started.book Page 117 Friday, September 2, 2005 12:22 PM 16. Still in the Tools panel, select the color blue with the hexadecimal value #0000FF from the Fill Color Picker. 17. In the Tools panel, double-click the Rectangle tool. 18. In the Rectangle Settings dialog box, enter 16 in the Corner Radius text box and click OK. 19. Select View > Snapping > Snap to Pixels to turn on pixel snapping. This causes the edges of shapes that you draw to snap to the nearest pixel as you draw. 20.
000_Getting_Started.book Page 118 Friday, September 2, 2005 12:22 PM 21. In the Tools panel, click the Selection tool. 22.Click the blue rectangle to select it. 23.With the blue rectangle selected, go to the Property inspector panel and enter the following values in the text boxes: ■ W: 700 ■ H: 150 ■ X: 0 ■ Y: 0 The properly sized blue rectangle on the Stage 24.Double-click 25.Press the blue rectangle again to select it. Delete to delete the blue rectangle.
000_Getting_Started.book Page 119 Friday, September 2, 2005 12:22 PM Add a symbol In this section, you will add a blue-colored area to the right side of the Stage. This is where the text that describes each menu item and the button for switching menu items will appear. To add a new symbol with a blue shape: 1. Click the blueArea layer name in the Timeline. 2. Select Insert > New Symbol. 3. In the Create New Symbol dialog box, enter menu in the Name text box and click OK.
000_Getting_Started.book Page 120 Friday, September 2, 2005 12:22 PM 16. In the Tools panel, click the Subselection tool. 17. Move the mouse over the lower-left corner of the rectangle until a tiny white box appears next to the arrow pointer. The pointer indicating that the corner of the rectangle can be dragged 18. Drag the corner of the rectangle to the right so that the left side of the rectangle becomes a diagonal line at approximately a 30º angle. 19.
000_Getting_Started.book Page 121 Friday, September 2, 2005 12:22 PM To add the text box for the menu item title: 1. In the Tools panel, click the Text tool. 2. In the Property inspector, select Dynamic Text from the Text Type menu. 3. Still in the Property inspector, enter 14 in the Font Size text box. 4. With the Text tool, draw a wide flat text rectangle in the top part of the gray-blue shape you just created. The rectangle should be almost as wide as the blue shape.
000_Getting_Started.book Page 122 Friday, September 2, 2005 12:22 PM Add the second text box Now you will add the second text box, which will hold the description text for each menu item. To add a text box for the descriptions: 1. Click outside the Stage to deselect the text box you created in the previous section. 2. In the Tools panel, click the Text tool. 3. In the Property inspector, enter 12 in the Font Size text box. 4. Still in the Property inspector, deselect the bold icon. 5.
000_Getting_Started.book Page 123 Friday, September 2, 2005 12:22 PM 9. In the Tools panel, click the Selection tool. 10. Click in the Stage area outside the shapes you have drawn to deselect them. 11. In the Timeline, click the Scene 1 link to exit symbol-editing mode and return to the main Timeline of the Flash document. You exit symbol-editing mode and the Stage with the black borders reappears. 12. Save your document.
000_Getting_Started.book Page 124 Friday, September 2, 2005 12:22 PM Add a button component Now you are ready to add the button that allows the user to switch from one slide to the next in the slide show. To add the Next button: 1. In the Timeline, click the nextButton layer name to make that layer active. This is the layer that holds the button component you are about to add. 2. Open the Components panel if it is not already open by selecting Window > Components. 3.
000_Getting_Started.book Page 125 Friday, September 2, 2005 12:22 PM Add ActionScript code You have now added all the graphic and text elements that your FMA requires. The last step is to add the ActionScript code that displays the proper text and image for each slide in the slideShow movie clip. Test an ActionScript sample First, you’ll add some simple ActionScript code to see it work. To add the test ActionScript: In the Timeline, click the layer name actions to activate that layer. 2.
000_Getting_Started.book Page 126 Friday, September 2, 2005 12:22 PM Enter ActionScript code for the slide show Now you will enter the ActionScript code that makes the slideshow animate each new slide into place when the Next button is clicked. After you add the code, your Flash document will be complete. To add the ActionScript code to the Flash document: 1. In the Timeline, make sure Frame 1 of the actions layer is still selected. 2.
000_Getting_Started.book Page 127 Friday, September 2, 2005 12:22 PM menu_mc.description_txt.text = this["image"+currImage+"desc"]; for (var i:Number = 0; i
000_Getting_Started.book Page 128 Friday, September 2, 2005 12:22 PM The first section of code contains variables that store information about the images that will appear in each section of the slideShow movie clip. /* 0 */ var image0title:String = "Summer salad"; var image0desc:String = "Butter lettuce with apples, blood orange segments, gorgonzola, and raspberry vinaigrette."; var image0uri:String = "images/image0.
000_Getting_Started.book Page 129 Friday, September 2, 2005 12:22 PM image0uri contains a string that is the Universal Resource Identifier for the image file that is loaded and displayed in each section of the slides movie clip. The next two lines of code declare two more variables: var currImage:Number = 0; var totalImages:Number = 4; The first variable, currImage, stores the number of the current image that is being displayed in the slides movie clip.
000_Getting_Started.book Page 130 Friday, September 2, 2005 12:22 PM A for loop is a block of code surrounded by a set of braces { } that repeats for each increment of the i variable. In this case, i increments from 0 to 4 because the value of totalImages is 4. The loadMovie() method can be used to load a Flash file or an image file into the movie clip. In this case it is loading the external JPG files.
000_Getting_Started.book Page 131 Friday, September 2, 2005 12:22 PM The line of code immediately after the function definition tells Flash to execute the nextMenuItem function when the next_btn instance receives a mouse click. next_btn.addEventListener("click", nextMenuItem); Because the nextMenuItem function is now set up to listen for mouse clicks, it is called an event listener. This is why the addEventListener() method is used to tell flash to execute the function when the mouse click event occurs.
000_Getting_Started.book Page 132 Friday, September 2, 2005 12:22 PM 5. Click Publish. Flash saves a SWF file copy of your document and an HTML file in the folder that contains your working FLA file. This should be the cafe_townsend directory. 6. Click OK to close the Publish Settings dialog box. Now that you have completed the Flash FMA that will be used in the cafe_townsend website, you can go on to Chapter 4, “Tutorial: Building a Video Player (Flash Professional only),” on page 135.
000_Getting_Started.book Page 133 Friday, September 2, 2005 12:22 PM Flash training and certification Boost your Flash skills with hands-on tasks and real-world scenarios. Flash training allows you to roll up your sleeves and get right to work. Choose between instructor-led and online training, or combine them to create a learning path that is most effective for you. To learn more, go to Macromedia Training at www.macromedia.com/go/flash_training.
000_Getting_Started.book Page 134 Friday, September 2, 2005 12:22 PM Additional resources The following Macromedia web pages include reference materials and links to third-party Flash resources: ■ Websites devoted to Macromedia Flash and Flash developers can be found at www.macromedia.com/go/tn_12046. ■ Macromedia Press (Macromedia’s publishing division) can be found at www.macromedia.com/support/mmpress/.
000_Getting_Started.book Page 135 Friday, September 2, 2005 12:22 PM CHAPTER 4 Tutorial: Building a Video Player (Flash Professional only) 4 This tutoral guides you through the process of creating a simple video player by using some of the authoring features in Macromedia Flash Basic 8 and Flash Professional 8. After it is created, you can deploy the video player in a web page. If you have not already done so, Macromedia recommends that before you take this tutorial you read “Flash basics” on page 57.
000_Getting_Started.book Page 136 Friday, September 2, 2005 12:22 PM Review your task In this tutorial, you will create a type of application known as a flexible messaging area, or FMA. An FMA is a common type of Flash application used for displaying content that conveys some kind of informational or marketing message to the audience. In this case, the FMA displays photographs of items from the restaurant menu.
000_Getting_Started.book Page 137 Friday, September 2, 2005 12:22 PM To play the SWF version of the file in Flash Player: 1. In Flash, select File > Open. 2. Use one of the following paths to browse to the completed file: ■ ■ In Windows, browse to boot drive\Program Files\Macromedia\ Flash 8\Samples and Tutorials\Tutorial Assets\ cafe_townsend\completed files\flash and double-click video_pod_finished.swf.
000_Getting_Started.book Page 138 Friday, September 2, 2005 12:22 PM 3. After you have the file open, you can explore the Stage, Library panel, and the Timeline. ■ ■ ■ On the Stage you will see a FLVPlayback component, which you will learn more about later in this tutorial. In the Library panel, you will see a list of symbols, or reusable assets, that the document uses. In the Timeline, you will see a representation of how and when those symbols appear on the Stage.
000_Getting_Started.book Page 139 Friday, September 2, 2005 12:22 PM 2. Locate the cafe_townsend folder in the Flash application folder on your hard disk. If you installed Flash to its default location, the path to the folders is as follows: ■ ■ 3.
000_Getting_Started.book Page 140 Friday, September 2, 2005 12:22 PM 4. In the Flash Video Encoding Settings dialog box, select Flash 8 Medium Quality (400kbps) from the Flash Video Encoding Profile menu. This setting is the default. This action applies only a small amount of compression to the file. 5. Click OK to close the Settings dialog box. 6. Click Start Queue. The Flash Video Encoder converts the file and saves it in the same folder as the original cafe_townsend_chef.mov file.
000_Getting_Started.book Page 141 Friday, September 2, 2005 12:22 PM Open a new document Now you’re ready to create your own version of the FMA. To create a new document: 1. Start Flash. 2. Select File > New. 3. In the New Document dialog box, select Flash Document and then click OK. 4. Select File > Save. 5. Name the file video_pod.fla and save the file in the cafe_townsend folder you copied to your hard disk. NO TE As you complete the tutorial, remember to save your work frequently.
000_Getting_Started.book Page 142 Friday, September 2, 2005 12:22 PM 4. Click OK. 5. Save your work. For more information about setting document properties, see “Creating or opening a document and setting properties” in Using Flash. Add a media component Next, you will add a media playback component to the Stage. This component will contain the video display and provide playback controls. A BO UT . ..
000_Getting_Started.book Page 143 Friday, September 2, 2005 12:22 PM To add a media component: 1. Select Window > Components to open the Components panel. 2. In the Components panel, click the plus sign (+) next to the FLV Playback - Player 8 category. 3. Drag an FLVPlayback component to the Stage. The new component remains selected on the Stage by default.
000_Getting_Started.book Page 144 Friday, September 2, 2005 12:22 PM 4. With the new component still selected on the Stage, enter the following values in the Property inspector: ■ W: 360 ■ H: 240 ■ X: 0 ■ Y: 0 This makes the component the same size as the Stage and centers it on the Stage. The Property inspector with the proper values entered 5. With the new component still selected on the Stage, select Window > Component Inspector to open the Component inspector. 6.
000_Getting_Started.book Page 145 Friday, September 2, 2005 12:22 PM 10. Save 11. your work. To test your document, select Control >Test Movie. The document plays in the Test Movie window. You can control the playback of the video file with the controls at the bottom of the Stage. Publish your document The next step is to publish your FLA file as a SWF file that can be displayed in a web browser. To publish your Flash document: 1. Select File > Publish.
000_Getting_Started.book Page 146 Friday, September 2, 2005 12:22 PM The next steps Now that you have completed the Flash video player, you would normally insert the SWF file into a real-world web page. This illustration demonstrates what a web page containing the video_pod.swf file might look like. The video_pod.
000_Getting_Started.
000_Getting_Started.
000_Getting_Started.
000_Getting_Started.
000_Getting_Started.
000_Getting_Started.
