Page 1 Getting Started with Flash...
Page 2 If you access a third-party website mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites.
Page 3: Table Of Contents
Contents Introduction ..........5 What is Flash.
Page 4 Chapter 3: Tutorial: Building Your First Flash Application ..95 Review your task ..........96 Examine the completed application .
Page 5: Introduction
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.
Page 6 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.
Page 7: What You Can Do With Flash
You can find many examples of real projects created by Flash users on the Macromedia website at www.macromedia.com/cfusion/showcase/. What you can do with Flash...
Page 8: Making A Simple Flash Document
To build a Flash application, you typically perform the following basic steps: Decide which basic tasks the application will perform. Create and import media elements, such as images, video, sound, text, and so on. Arrange the media elements on the Stage and in the Timeline to define when and how they appear in your application.
Page 9 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.
Page 10 Select the No Color option from the Stroke Color Picker. Selecting the No Color option in the Stroke Color Picker Select a color of your choice from the Fill Color Picker. Make sure the fill color contrasts well with the Stage color. Draw a circle on the Stage by selecting the Oval tool and Shift-dragging on the Stage.
Page 11 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: Click the Selection tool in the Tools panel.
Page 12 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: Drag the circle to just left of the Stage area. The circle shape moved to the left of the Stage area Click Frame 20 of Layer 1 in the Timeline.
Page 13 Select Insert > Timeline > Frame. Flash adds frames to Frame 20, which remains selected. Frames inserted in the Timeline 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.
Page 14 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.
Page 15 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.
Page 16 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 Click OK.
Page 17: About Flash Player
516 million people worldwide. Flash Player is distributed freely to anyone who wants to use it. You can get the latest version of Flash Player at the Macromedia Flash Player Download Center at www.macromedia.com/go/getflashplayer.
Page 18 You can use the area around the Stage to store graphics and other objects without having them appear on the Stage when you play the SWF file. Macromedia expanded this area, called the work area, to allow you to store more items there. Flash users often use the...
Page 19 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.
Page 20: Installing Flash
Windows 98 SE users must have Microsoft Internet Explorer 5.1 or later in order to activate Flash over the Internet. Installing Macromedia Flash Basic 8 and Flash Professional 8 does not overwrite earlier Flash versions that you might have installed.
Page 21 Flash. Upgrading from Macromedia Flash Basic 8 to Macromedia Flash Professional 8 If you’ve purchased Macromedia Flash Basic 8, you can upgrade to Macromedia Flash Professional 8. To upgrade to Macromedia Flash Professional 8: From Flash, select Help >...
Page 22 If you’re running Flash in trial mode, you can initiate your purchase directly from the application. To purchase Flash from trial mode: From Flash, select Help > Activate Macromedia Flash Basic 8. In the dialog box that appears, select Buy One Online to purchase a serial number.
Page 23 In Windows 2000 or Windows XP, browse to boot drive\Program Files\Macromedia\Flash 8\language\First Run\. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/First Run/. User-level configuration folder This is the configuration folder found in the user profile area. This folder is always writable by the current user.
Page 24 (Internet Explorer or AOL): Close your browser. Remove any currently installed versions of the ActiveX control. For instructions, see TechNote 14157 on the Macromedia Flash Support Center at www.macromedia.com/go/tn_14157. Run the Install Flash Player 8 AX.exe file in your Players folder to begin installation.
Page 25 Close your browser before installing a new version of the plug-in. 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. Run the Install Flash Player 8.exe file in your Players folder to begin installation.
Page 26 Introduction...
Page 27: Chapter 1: Learning Flash
CHAPTER 1 Learning Flash 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...
Page 28: Where To Start
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: Begin by reading this Getting Started with Flash guide.
Page 29 You are a web or graphic designer who wants to learn Flash, but not ActionScript: 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”...
Page 30 If you have previous experience with coding in a language other than ActionScript and want to learn the Flash development environment: Browse the Learning ActionScript 2.0 in Flash guide. This guide introduces you to the conventions of ActionScript and the Flash Actions panel.
Page 31 If you have some basic understanding of Flash and you need to catch up with changes in the user interface or ActionScript: 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.
Page 32 If you are a Flash developer with no mobile or device development experience: 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.
Page 33: Get The Most From The Flash Documentation
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.
Page 34: Accessing The Flash Documentation
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. Feature information Title Description/ Where to Find It Audience Basic introduction •...
Page 35 Where to Find It Audience A collection of • View in Flash: Select Help > Flash Tutorials 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.
Page 36 Audience A detailed • View in Flash: Select Help > Learning Flash Help introduction to ActionScript 2.0 • View online: coding with in Flash livedocs.macromedia.com/go/ ActionScript, livedocs_flash including • Get the PDF: extensive www.macromedia.com/go/ reusable code fl_documentation examples. Intended for...
Page 37 Audience Information about • View in Flash: Select Help > Using Flash Help how to use and Components • 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.
Page 38 Audience • View in Flash: Select Getting Started Introductory Help > Flash Help with Flash Lite 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...
Page 39: Accessing Additional Online Flash Resources
Accessing additional online Flash resources The following table summarizes additional online resources for learning Flash. Resource Description Where to Find It Flash Support TechNotes, plus www.macromedia.com/go/ • flash_support Center support and problem-solving information. Flash Developer Articles and www.macromedia.com/go/ • flash_devcenter...
Page 40: Choosing The Right Help Books
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.
Page 41 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.
Page 42: Using The Flash Help System
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.
Page 43: Searching The Help System
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...
Page 44: Using Context-Sensitive Help
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. 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.
Page 45: Printing The Flash Documentation
Printing the Flash documentation Printable versions of each of the books in the Flash help system are available on the Macromedia website. You can also print individual help pages from within the Flash Help panel. To print an individual book or chapter from the Macromedia...
Page 46: Purchasing Printed Documentation
Please read these guidelines closely, or your comment might be removed from the website if it does not conform to the guidelines. If you have a question about Flash, please ask it on the Macromedia Flash web forums: www.macromedia.com/go/flash_forums. The web forums are...
Page 47: Controlling The Appearance Of The Help Panel
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.
Page 48: Getting Updates To Flash Help
Click Update in the Help panel toolbar and follow the instructions to download the help system update. When a help update is released, Macromedia creates and posts a new PDF of each updated book on the Macromedia documentation page at www.macromedia.com/go/fl_documentation/.
Page 49: Chapter 2: Flash Basics
CHAPTER 2 Flash Basics 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.
Page 50: About Flash Files
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. By importing or creating these elements in Flash and then arranging them on the Stage and in the Timeline, you define what the viewer of your document will see and when they will see it.
Page 51: Getting To Know The Workspace
Flash documents. You can create a new file by clicking the desired template in the list. Extend links to the Macromedia Flash Exchange website, where you can download helper applications for Flash, Flash extensions, and related information. The Start page also offers quick access to Help resources. You can take a tour of Flash, learn about Flash documentation resources, and find Macromedia Authorized Training facilities.
Page 52: Using The Stage
Flash documents. The Stage in the Flash authoring environment represents the rectangular space in Macromedia Flash Player or in a web browser window where your Flash document appears during playback. You can zoom in and out to change the view of the Stage as you work.
Page 53 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).
Page 54: Using The Timeline
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: In the Tools panel, select the Hand tool.
Page 55 Empty keyframe Timeline header Playhead Frame View pop-up menu Frame by frame animation Tweened animation Guide layer icon Elapsed Time indicator Center Frame button Frame Rate indicator Onion-skinning buttons Current Frame indicator You can change the way frames appear in the Timeline, as well as display thumbnails of frame content in the Timeline.
Page 56 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.
Page 57 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.
Page 58: Using Frames And Keyframes
To change the display of frames in the Timeline: Click Frame View in the upper-right corner of the Timeline to display the Frame View pop-up menu. Select from the following options: To change the width of frame cells, select Tiny, Small, Normal, Medium, or Large.
Page 59 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. You can perform the following modifications on frames or keyframes: Insert, select, delete, and move frames or keyframes Drag frames and keyframes to a new location on the same layer or on a...
Page 60 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, “Setting preferences in Flash”.
Page 61: Using Layers
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.
Page 62 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 >...
Page 63 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.
Page 64 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.
Page 65 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.
Page 66 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.
Page 67: About The Main Toolbar And Edit Bar
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. Dragging a normal layer onto a guide layer converts the guide layer to a motion guide layer.
Page 68 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 For information on using the drawing and painting tools, see “About Flash drawing and painting tools”...
Page 69: Using The Grid, Guides, And Rulers
To customize the Tools panel: 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.
Page 70 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.
Page 71 To turn snapping to guides on or off: Select View > Snapping > Snap to Guides. Snapping to guides takes precedence over snapping to the grid in places where guides fall between grid lines. To move a guide: Make sure rulers are visible by selecting View > Rulers. With the Selection tool, click anywhere on the ruler and drag the guide to the desired place on the Stage.
Page 72 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.
Page 73: Using Panels And The Property Inspector
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.
Page 74 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.
Page 75 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 action in a frame stop() To display the Actions panel, do one of the following: Select Window >...
Page 76 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: Click the control at the far right in the panel’s title bar to view the pop- up menu.
Page 77 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.
Page 78: Setting Preferences In Flash
To select a panel layout: Select Window > Workspace Layout. 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: Select Window > Workspace Layout > Manage. In the Manage Workspace Layouts dialog box, select the panel set you want to delete.
Page 79 To set preferences: Select Edit > Preferences (Windows) or Flash > Preferences (Macintosh). In the Category list, select the one of the following: General ActionScript Auto Format Clipboard Drawing Text Warning Select from the respective options as described in the procedures that follow.
Page 80 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.
Page 81 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.
Page 82 To set warning preferences, select one of the following options: Select Warn on Save for Macromedia Flash 8 Compatibility to have Flash warn you when you try to save documents with content that is specific to the Flash Basic 8 or Flash Professional 8 authoring tool as a Flash MX 2004 file.
Page 83: Customizing Keyboard Shortcuts
Flash uses built-in keyboard shortcuts designed for the Flash application. You can also select a built-in keyboard shortcut set from one of several popular graphics applications, including Macromedia Fireworks, Adobe Illustrator, and Adobe Photoshop. To create a custom keyboard shortcut set, you duplicate an existing set, and then add or remove shortcuts from the new set.
Page 84 To view or print the current set of keyboard shortcuts: Select Edit > Keyboard Shortcuts. In the Keyboard Shortcuts dialog box, select the shortcut set you wish to view from the Current pop-up menu. Click the Export Set as HTML button. The Export Set as HTML button In the Save As dialog box that appears, select a name and location for the exported HTML file.
Page 85 To add or remove a keyboard shortcut: Select Edit > Keyboard Shortcuts (Windows) or Flash > Keyboard Shortcuts (Macintosh) and select the set that you want to modify. 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.
Page 86: Using Context Menus
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.
Page 87 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.
Page 88 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. To move the focus to the previously selected panel, press Control+Shift+Alt+Tab (Windows) or Command+Shift+Option+Tab (Macintosh).
Page 89 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.
Page 90 To move the focus through the controls in a panel: 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. Press Enter (Windows only) to activate the currently selected panel control.
Page 91 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.
Page 92 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.
Page 93 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.
Page 94 Flash Basics...
Page 95: Chapter 3: Tutorial: Building Your First Flash Application
If you have not already done so, Macromedia recommends that before you take this tutorial you read “Flash basics”...
Page 96: Review Your Task
In this case, the FMA displays photographs of items from a restaurant menu. At Macromedia’s website, an FMA is used to display information about new software products and other advertising messages.
Page 97 To play the SWF version of the file in Flash Player: In Flash, select File > Open. Browse to the completed file using one of the following paths: In Windows, browse to boot drive\Program Files\Macromedia\ Flash 8\Samples and Tutorials\Tutorial Assets\cafe_townsend\completed files\flash and double-click flash_fma_finished.swf.
Page 98: Create A Working Folder
You now see the completed tutorial application in the Flash authoring environment. 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.
Page 99: Create A New Document
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: (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.
Page 100 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.
Page 101 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 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.
Page 102: Create Symbols
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.
Page 103 Drag in the drawing area to draw a wide, flat rectangle. Select the Selection tool from the Tools panel. Double-click the rectangle you drew to select both its fill and its stroke. The stroke is the line that forms the border of a shape. In the Property inspector, enter 0 in both the X and Y text boxes.
Page 104 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. With the new instance still selected on the Stage, in the Property inspector, enter holder0 in the Instance Name text box.
Page 105 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: Select Insert >...
Page 106: Edit A Symbol Timeline
With the symbol instance still selected, in the Property inspector, enter 0 in the X and Y text boxes. 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.
Page 107 In the Timeline, select Frame 20 of Layers 1 and 2. Selecting Frame 20 of Layers 1 and 2 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 Repeat the process by selecting Layers 1 and 2 in Frame 40 and selecting Modify >...
Page 108: Add Actions To Frames
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 movie clip. By slideShow adding methods, you cause the playhead to stop and wait at stop() certain frames.
Page 109: Add Labels To Frames
Select frame 60 of Layer 2. In the Actions panel, type the stop(); ActionScript. In the Timeline, select frame 80 of Layer 2. 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.
Page 110: Add Motion Tweens
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: In the Timeline, select Frame 1 of Layer 1.
Page 111 In the Property inspector, enter -150 in the Y text box. This moves the movie clip instance upward 150 pixels in slideShow 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.
Page 112: Edit The Main Timeline
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: 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.
Page 113: Create The Border
To add the slideShow movieClip to the Stage: Click the slideShow layer name to make that layer active. 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. With the new movie clip instance still selected on the Stage, go to the Property inspector and set the X and Y values to 0 to align the upper- left corner of the movie clip exactly with the corner of the Stage.
Page 114 Select the color black (#000000) from the Fill Color Picker. Selecting black from the Fill Color Picker Draw a rectangle on the Stage that is approximately the same shape as the Stage. Drawing a black rectangle the shape of the Stage In the Tools panel, select the Selection tool.
Page 115 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 When the To Stage and Height button.
Page 116 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 Click outside the Stage to deselect the black rectangle. In the Tools panel, select the Rectangle tool.
Page 117 Still in the Tools panel, select the color blue with the hexadecimal value #0000FF from the Fill Color Picker. In the Tools panel, double-click the Rectangle tool. In the Rectangle Settings dialog box, enter 16 in the Corner Radius text box and click OK.
Page 118 In the Tools panel, click the Selection tool. Click the blue rectangle to select it. 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 Double-click the blue rectangle again to select it.
Page 119: Add A Symbol
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: Click the blueArea layer name in the Timeline.
Page 120: Add A Text Box
In the Tools panel, click the Subselection tool. 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 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º...
Page 121 To add the text box for the menu item title: In the Tools panel, click the Text tool. In the Property inspector, select Dynamic Text from the Text Type menu. Still in the Property inspector, enter 14 in the Font Size text box. With the Text tool, draw a wide flat text rectangle in the top part of the gray-blue shape you just created.
Page 122 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: Click outside the Stage to deselect the text box you created in the previous section.
Page 123: Add The Movie Clip To The Stage
In the Tools panel, click the Selection tool. Click in the Stage area outside the shapes you have drawn to deselect them. 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.
Page 124: Add A Button Component
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: In the Timeline, click the nextButton layer name to make that layer active.
Page 125: Add Actionscript Code
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 movie clip. slideShow Test an ActionScript sample First, you’ll add some simple ActionScript code to see it work.
Page 126 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: In the Timeline, make sure Frame 1 of the actions layer is still selected.
Page 127 menu_mc.description_txt.text = this["image"+currImage+"desc"]; for (var i:Number = 0; i<totalImages; i++) { slideShow_mc.slides_mc["holder"+i].loadMovie(this["image" +(i)+"uri"],slideShow_mc.slides_mc.getNextHighestDepth ()); slideShow_mc.slides_mc["holder4"].loadMovie(this["image0u ri"],slideShow_mc.slides_mc.getNextHighestDepth()); // function for the Next button function nextMenuItem(eventObj:Object) { slideShow_mc.gotoAndPlay("slide"+(currImage)); if ((currImage+1)>=totalImages) { currImage = 0; } else { currImage++; menu_mc.title_txt.text = this._parent["image"+currImage+"title"]; menu_mc.description_txt.text = this._parent["image"+currImage+"desc"];...
Page 128 The first section of code contains variables that store information about the images that will appear in each section of the movie clip. slideShow /* 0 */ var image0title:String = "Summer salad"; var image0desc:String = "Butter lettuce with apples, blood orange segments, gorgonzola, and raspberry vinaigrette.";...
Page 129 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;...
Page 130 loop is a block of code surrounded by a set of braces { } that repeats for each increment of the variable. In this case, increments from 0 to 4 because the value of is 4. The method can be totalImages loadMovie() used to load a Flash file or an image file into the movie clip.
Page 131: Publish Your Document
The line of code immediately after the function definition tells Flash to execute the function when the next_btn instance receives a nextMenuItem mouse click. next_btn.addEventListener("click", nextMenuItem); Because the function is now set up to listen for mouse nextMenuItem 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.
Page 132: Resources
Video Player (Flash Professional only),” on page 135. Resources Macromedia has excellent resources to help you discover more about Flash, get support, and send feedback to the company. Registration Register to receive the latest news about upgrades and new products, technical support, and more.
Page 133 To learn more, go to Macromedia Training at www.macromedia.com/go/flash_training. Flash Developers Center Stay up to date with the latest Macromedia Flash development trends and techniques. Tutorials, articles, and sample applications give you the information you need to stay competitive, innovative, and efficient. To learn more, go to the Flash Developers Center at www.macromedia.com/...
Page 134 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/. 134 Tutorial: Building Your First Flash Application...
Page 135: Chapter 4: Tutorial: Building A Video Player
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 In this tutorial, you will complete the following tasks: Review your task .
Page 136: Review Your Task
In this case, the FMA displays photographs of items from the restaurant menu. At Macromedia’s website, an FMA is used to display information about new software products and other advertising messages.
Page 137 To play the SWF version of the file in Flash Player: In Flash, select File > Open. 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.
Page 138: Create A Working Folder
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.
Page 139: Encode A Video File
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: In Windows, C:\Program Files\Macromedia\Flash 8\ Samples and Tutorials\Tutorial_assets\cafe_townsend On the Macintosh, Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial_assets/cafe_townsend Copy the cafe_townsend folder to your local_sites folder.
Page 140: Create A New Flash Document
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. Click OK to close the Settings dialog box. Click Start Queue.
Page 141 Open a new document Now you’re ready to create your own version of the FMA. To create a new document: Start Flash. Select File > New. In the New Document dialog box, select Flash Document and then click OK. Select File > Save. Name the file video_pod.fla and save the file in the cafe_townsend folder you copied to your hard disk.
Page 142: Add A Media Component
Click OK. 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.
Page 143 To add a media component: Select Window > Components to open the Components panel. In the Components panel, click the plus sign (+) next to the FLV Playback - Player 8 category. Drag an FLVPlayback component to the Stage. The new component remains selected on the Stage by default. Add a media component 143...
Page 144 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 With the new component still selected on the Stage, select Window >...
Page 145: Publish Your Document
Save 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.
Page 146: The Next Steps
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.swf file inserted in a web page 146 Tutorial: Building a Video Player (Flash Professional only)
Page 147: Index
Index accessibility, in the Flash authoring environment 86 Default Layout command, for panels 78 accessing Flash documentation 34 deleting Actions panel 74 frames or keyframes 60 activating Flash 20 layers and layer folders 65 applications, sample 133 discussing the help 46 arranging the Help panel 47 document, creating new 99, 140 authoring environment accessibility 86...
Page 148 Frame View button 58 help book descriptions 40 Frame View menu 58 Help panel frames arranging 47 centering the playhead in 57 opening 42 changing the view 57 searching 43 converting keyframes into 60 table of contents 42 copying and pasting 60 text size 48 copying by dragging 60 updating 48...
Page 149 64 Paste Frames command 60 picking help books 40 PICT Settings for Clipboard preference (Macintosh only) 81 Macromedia Flash Development Center 133 playhead, moving 56 Macromedia Flash support 132 preferences magnification (zooming) 53 Bitmaps on Clipboard (Windows only) 81...
Page 150 Undo Levels 79 system requirements warning 82 Flash MX 2004 20 Preferences command 79 Flash MX Professional 2004 20 previewing frame thumbnails 57 printing help 45 Printing Options preference (Windows only) 79 Property inspector table of contents 42 about 73 third-party resources 133, 134 keyboard shortcuts 87 Timeline...
Page 151 95, 135 tutorials, Flash 45 tweened frames, dragging keyframes in 61 Undo Levels preference 79 updating the Help panel 48 upgrading from Macromedia Flash MX 2004 21 warning preferences 82 work area, showing and hiding 53 Zoom tool 53 zooming 52...
Page 152 Index...

This manual is also suitable for:

Flash 8

MACROMEDIA FLASH 8-GETTING STARTED WITH FLASH Getting Started

Chapter 1: Learning Flash

Chapter 2: Flash Basics

Chapter 3: Tutorial: Building Your First Flash Application

Chapter 4: Tutorial: Building a Video Player

Quick Links

Need help?

Questions and answers

Subscribe to Our Youtube Channel

Related Manuals for MACROMEDIA FLASH 8-GETTING STARTED WITH FLASH

Summary of Contents for MACROMEDIA FLASH 8-GETTING STARTED WITH FLASH

This manual is also suitable for:

Table of Contents