Getting Started with Flash
Trademarks Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware, Authorware Star, Backstage, Bright Tiger, Clustercats, ColdFusion, Contribute, Design In Motion, Director, Dream Templates, Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, Flash Lite, Flex, Fontographer, FreeHand, Generator, HomeSite, JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live Effects, MacRec
CONTENTS CHAPTER 1: Getting Started . ......................................... 5 About Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 About Flash Player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 What’s new in Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Guide to instructional media. . . . . . . . . . . . . . . . . . .
CHAPTER 4: Building Your First Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Workflow for building an application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Examine a completed application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Create a new document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Add media content . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPTER 1 Getting Started Welcome to Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004. 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 necessary to produce great results and deliver the best user experience across multiple platforms and devices. This guide is designed to introduce you to Flash.
About Flash Player Macromedia Flash Player 7, which runs the applications that you create, installs by default along with Flash. Flash Player ensures that all SWF content is viewable and available consistently and across the broadest range of platforms, browsers, and devices. The Macromedia Flash Player is distributed with products from every major partner, including Microsoft, Apple, Netscape, AOL, and Opera, to bring rich content and applications immediately to over 516 million people worldwide.
Accessibility support in the authoring environment Accessibility support in the Flash authoring environment provides keyboard shortcuts for navigating and for using interface controls, letting you work with these interface elements without using the mouse. For more information, see “Accessibility in the Flash authoring environment” in Using Flash.
Publish profiles You can create profiles to save your publish settings, then export the profiles and use them across projects to publish consistently under different conditions. For more information, see “Creating a publish profile” in Using Flash. Accessibility and components New accessibility features and a new generation of components offer tab ordering, tab focus management, and improved support for third-party screen readers and closed-caption programs.
Screen-based visual development environment A visual programming environment Flash MX Professional 2004 introduces a forms-based visual programming environment, which is ideal for developing applications. For more information, see “Slide screens and form screens (Flash Professional only)”in Using Flash. Slides-based authoring Slide screens provide functionality designed for sequential presentations. For more information, see “Slide screens and form screens (Flash Professional only)” in Using Flash.
About the electronic manuals and lessons The following electronic manuals are available through the Help panel (Help > Help): • Getting Started with Flash (or Getting Started Help) provides a hands-on introduction to Flash. • Using Flash (or Using Flash Help) contains complete information on working in the Flash authoring tool, including all commands, features, and user interface elements.
To access context-sensitive help from the Actions panel: 1. To select an item for reference, do one of the following: ■ Select an item in the Actions panel toolbox. ■ Select an item in the Actions panel Script pane. ■ Place the cursor before an item in the Actions panel Script pane. 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 the Reference button above the Script pane.
To change the size of the text displayed in the Help panel using your browser: 1. Quit Flash MX 2004. 2. Open your browser and follow the instructions to change the size of text in your browser to a larger size. When you start Flash MX 2004, the size of the text in the help panel will be changed to the size you selected for your browser. To change the size of the text displayed in the Help panel using the Help panel (Windows only): 1. Open the Help panel and choose any topic. 2.
To update Flash Help: 1. Verify that you’re connected to the Internet. 2. Click the Update button in the Help panel toolbar and follow instructions to download the help system update. As each help update is released, a new PDF of each updated book will be created and posted on the Flash support site documentation page at www.macromedia.com/support/documentation/en/ flash/. If you have trouble downloading help updates using this method, you can also install updated help using the Extension Manager.
Chapter 1: Getting Started
CHAPTER 2 Installing Flash This chapter contains the following sections: System requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Installing and activating Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Configuration folders installed with Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Changing or removing Flash Player . . . . .
Flash Player 7 The following table lists system and browser requirements for Flash Player 7. Platform Browser Windows 98 Microsoft Internet Explorer 5.x, Netscape 4.7, Netscape 7.x, Mozilla 1.x, AOL 8, and Opera 7.11 Windows Me Microsoft Internet Explorer 5.5, Netscape 4.7, Netscape 7.x, Mozilla 1.x, AOL 8, and Opera 7.11 Windows 2000 Microsoft Internet Explorer 5.x, Netscape 4.7, Netscape 7.x, Mozilla 1.x, CompuServe 7, AOL 8, and Opera 7.11 Windows XP Microsoft Internet Explorer 6.0, Netscape 7.
Upgrading from Macromedia Flash MX 2004 to Macromedia Flash MX Professional 2004 If you’ve purchased Macromedia Flash MX 2004, you can upgrade to Macromedia Flash MX Professional 2004. To upgrade to Macromedia Flash MX Professional 2004: 1. Select Help > Upgrade to Flash MX Professional 2004. 2. In the dialog box that appears, do one of the following: ■ Select Buy to open a browser for the Macromedia store. ■ Select Try and follow the instructions to obtain a serial number for a trial upgrade.
First run folder This folder is a sibling to the application-level configuration folder, but serves a different purpose. This folder is a simple mechanism created specifically for the Flash authoring tool that facilitates the sharing of configuration files among users of the same machine. Folders and files in this folder are automatically copied by Flash to the user-level configuration folder.
Changing or removing Flash Player You can change or reinstall the current version of Flash Player. To change or reinstall the ActiveX control for Windows (Internet Explorer or AOL): 1. Close your browser. 2. Remove any currently installed versions of the ActiveX control. For instructions, see Technote 14157 on the Macromedia Flash Support Center at www.macromedia.com/support/flash/ts/ documents/remove_player.htm. 3. Run the Install Flash Player 7 AX.exe file in your Players folder to begin installation.
A browser that receives the correct MIME type can load the appropriate plug-in, control, or helper application to process and properly display the incoming data. If the MIME type is missing or not properly delivered by the server, the browser might display an error message or a blank window with a puzzle piece icon.
CHAPTER 3 Getting to Know the Workspace The Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 workspace consists of a Stage on which you place media content, a main toolbar with menus and commands for controlling application functionality, panels and a Property inspector for organizing and modifying media assets, and a Tools panel with tools for creating and modifying vector graphic content. For more information on the workspace, see the following sections: Moving the view of the Stage . .
Using the Stage The Stage is the rectangular area where you place graphic content, including vector art, text boxes, buttons, imported bitmap graphics or video clips, and so on. The Stage in the Flash authoring environment represents the rectangular space in the Macromedia Flash Player where your Flash document is displayed during playback. You can zoom in and out to change the view of the Stage as you work. The grid, guides, and rulers help you position content precisely on the Stage.
• To scale the Stage to fit completely in the given window space, select View > Magnification > Fit in Window. • To display the contents of the current frame, select View > Magnification > Show All, or select Show All from the Zoom control at the upper right of the application window. If the scene is empty, the entire Stage is displayed. • To display the entire Stage, select View > Magnification > Show Frame or select Show Frame from the Zoom control at the lower left corner of the application window.
Note: When an animation is played, the actual frame rate is displayed; this may differ from the document frame rate if the computer can’t display the animation quickly enough.
To resize the Timeline, do one of the following: • If the Timeline is docked to the main application window, drag the bar separating the Timeline from the application window. • If the Timeline is not docked to the main application window, drag the lower right corner (Windows) or the size box in the lower right corner (Macintosh). Moving the playhead The playhead moves through the Timeline to indicate the current frame displayed on the Stage. The Timeline header shows the frame numbers of the animation.
Changing the display of frames in the Timeline You can change the size of frames in the Timeline, and display sequences of frames with tinted cells. You can also include thumbnail previews of frame content in the Timeline. These thumbnails are useful as an overview of the animation, but they require extra screen space. Frame View button Frame View pop-up menu Short and Normal frame view options To change the display of frames in the Timeline: 1.
The order in which frames and keyframes appear in the Timeline determines the order in which they are displayed in a Flash application. You can arrange keyframes in the Timeline to edit the sequence of events in an animation. 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.
To delete or modify a frame or keyframe, do one of the following: • To delete a frame, keyframe, or frame sequence, select the frame, keyframe, or sequence and select Edit > Timeline > Remove Frame, or right-click (Windows) or Control-click (Macintosh) the frame, keyframe, or sequence and select Remove Frame from the context menu. Surrounding frames remain unchanged. • To move a keyframe or frame sequence and its contents, drag the keyframe or sequence to the desired location.
In addition, you can use special guide layers to make drawing and editing easier, and mask layers to help you create sophisticated effects. For an interactive introduction to working with layers in Flash, select Help > How Do I > Basic Flash > Work with Layers. Creating layers and layer folders When you create a new layer or folder, it appears above the selected layer. A newly added layer becomes the active layer.
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. Click in it again to turn off outline display. • Click the outline icon to display objects on all layers as outlines. Click it again to turn off outline display on all layers.
• To select two or more layers or folders, do one of the following: ■ ■ To select contiguous layers or folders, Shift-click their names in the Timeline. To select discontiguous layers or folders, Control-click (Windows) or Command-click (Macintosh) their names in the Timeline. To rename a layer or folder, do one of the following: • Double-click the name of a layer or folder and enter a new name.
To delete a layer or folder: 1. Select the layer or folder. 2. Do one of the following: ■ Click the Delete Layer button in the Timeline. ■ Drag the layer or folder to the Delete Layer button. ■ Right-click (Windows) or Control-click (Macintosh) the layer or folder name and select Delete Layer from the context menu. Note: When you delete a layer folder, all the enclosed layers and all their contents are also deleted.
To designate a layer as a guide layer: • Select the layer and right-click (Windows) or Control-click (Macintosh) and select Guide from the context menu. Select Guide again to change the layer back to a normal layer. About the main toolbar and edit bar The main toolbar at the top of the workspace displays menus with commands for controlling Flash functionality. The menus include File, Edit, View, Insert, Modify, Text, Commands, Control, Window, and Help.
Customizing the Tools panel You can customize the Tools panel to specify which tools appear in the authoring environment. You use the Customize Tools panel dialog box to add or remove tools from the Tools panel. You can display more than one tool in one location. When more than one tool is displayed in a location, the top tool in the group (the most recently used) is displayed with an arrow in the lower right corner of its icon.
To turn snapping to grid lines on or off: • Select View > Snapping > Snap to Grid. To set grid preferences: 1. Select View > Grid > Edit Grid. 2. For Color, click the triangle in the color box and select a grid line color from the palette. The default grid line color is gray. 3. Select or deselect Show Grid to display or hide the grid. 4. Select or deselect Snap to Grid to turn snapping to grid lines on or off. 5.
To lock guides: • Select View > Guides > Lock Guides. Note: You can also use the Lock Guides option in the Guides preferences dialog box. See the following procedure. To set guide preferences: 1. Select View > Guides > Edit Guides and do any of the following: ■ For Color, click the triangle in the color box and select a guide line color from the palette. The default guide color is green. ■ Select or deselect Show Guides to display or hide guides.
About the Property inspector The Property inspector simplifies document creation by making it easy to access the most commonly used attributes of the current selection, either on the Stage or in the Timeline. You can make changes to the object or document attributes in the Property inspector without accessing the menus or panels that contain these features.
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 from the context menu. To use a panel’s options menu: 1. Click the control at the far right in the panel’s title bar to view the options menu. 2. Click an item in the menu. To resize a panel: • Drag the panel’s border (Windows) or drag the size box at the panel’s lower right corner (Macintosh).
To save a custom panel set: 1. Select Window > Save Panel Layout. 2. Enter a name for the layout and click OK. To select a panel layout: 1. Select Window > Panel Sets. 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: • Open the folder for the Panel Sets documents in the location for your operating system (listed below) and delete the text file for the custom panel set.
• 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. When Shift Select is on, clicking additional elements deselects other elements unless you hold down the Shift key. • Select Show Tooltips to display tooltips when the pointer pauses over a control. Deselect this option if you don’t want to see the tooltips.
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. Enter a value in the Size Limit text box to specify the amount of RAM that is used when placing a bitmap image on the Clipboard. Increase this value when working with large or highresolution bitmap images. If your computer has limited memory, select None.
• Select Warn on Sites with Overlapped Root Folder to have Flash warn you when you create a site in which the local root folder overlaps with another site. • Select Warn on Behavior Symbol Conversion to have Flash warn you when you convert a symbol with a behavior attached to a symbol of a different type—for example, when you convert a movie clip to a button. • Select Warn on Symbol Conversion to have Flash warn you when you convert a symbol to a symbol of a different type.
4. Do one of the following: ■ To add a shortcut, click the Add Shortcut (+) button. ■ To remove a shortcut, click the Remove Shortcut (-) button and proceed to step 6. 5. If you are adding a shortcut, enter the new shortcut key combination in the Press Key text box. Note: To enter the key combination, simply press the keys on the keyboard. You do not need to spell out key names, such as Control, Option, and so on. 6. Click Change. 7. Repeat this procedure to add or remove additional shortcuts. 8.
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+Alt+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.
Selecting controls in a panel or the Property inspector using keyboard shortcuts When a panel or the Property inspector has the current focus, you can use the Tab key to move the focus through the panel controls. You can use the Spacebar to activate the control that has the current focus (that is, pressing Spacebar is equivalent to clicking a control in the panel).
To move the focus through the controls in a panel: 1. Press the Tab key when the focus is currently applied to the panel options menu. Press the Tab key repeatedly to move the focus through the controls in the panel. 2. Press Enter (Windows only) to activate the currently selected panel control. Navigating dialog box controls using keyboard shortcuts (Windows only) In Windows operating systems, you can use keyboard shortcuts to navigate controls in dialog boxes.
• Objects on layers that are hidden or locked cannot be selected with the Tab key. Note: If you are currently typing text into a text box, you cannot select an object using the keyboard focus. You must first change the focus to the Stage and then select an object. To select the Stage: • Press Control+Alt+Home (Windows) or Command+Option+Home (Macintosh). To select an object on the Stage: • With the Stage selected, press Tab.
To cut, copy, and paste library items using keyboard shortcuts: • To copy or paste a selected library item, press Control+X (Windows) or Command+X (Macintosh) to cut the item, or press Control+C (Windows) or Command+C (Macintosh) to copy the item.
CHAPTER 4 Building Your First Application This chapter provides a tutorial that guides you through the process of creating a simple application using some of the authoring features in Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004. 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.
Workflow for building an application The tutorial in this chapter follows the order of one possible workflow for creating a Flash application. • “Examine a completed application” on page 50 shows you how to work with an application. In the process, you become familiar with the Flash workspace. • “Create a new document” on page 52 is the starting point for creating your own new application.
■ If you’re using a Macintosh operating system, browse to Macintosh HD/Users/username/ Library/Application Support/Macromedia/Flash MX 2004/language/Configuration/ HelpPanel/Help/GettingStarted/finished_files and double-click myad_finished.swf. The completed application runs in Flash Player. The car fades out after a while. 3. Click the Information button to see where it links, then close the browser that opened and return to the SWF file. 4. After viewing the application, click its close box.
Panels in Flash assist you in working with and assigning attributes to the document or to objects on the Stage. For more information about panels, including how to dock and move them, see “Using panels and the Property inspector” on page 36. The Property inspector allows you to view and change attributes of a selected object. The Property inspector changes to display information about the tool or asset you are working with, offering quick access to frequently used features.
1. If the Property inspector isn’t open, select Window > Properties. The Property inspector lets you view and change the specifications for selected objects. The specifications depend on the type of object selected. If you select a text object, for example, the Property inspector displays settings for viewing and modifying text attributes. Because you have just opened a new document, the Property inspector shows the document settings.
1. Double-click the Layer 1 name in the Timeline. 2. Type over the name Layer 1, replacing it with the name Art. Art is now the active layer. Anything you place on the Stage will be in this layer. 3. Select the Rectangle tool from the Tools panel. 4. On the Stage, draw a rectangle, similar to the one below, toward bottom of your screen. (The colors are not important right now; you’ll change the colors soon.) The drawing tools work much as they do in other graphics programs, with one major exception.
1. If the Library panel is not open, select Window > Library. At this time there is nothing in the library. 2. Select File > Import > Import to Library. 3. Browse to one of the following paths: ■ If you’re using Windows 2000 or XP, browse to boot drive\Documents and Settings\ username\Local Settings\Application Data\Macromedia\Flash MX 2004\language\ Configuration\HelpPanel\Help\GettingStarted\start_files\Assets. Select logo.ai and car.png to import.
2. Next, drag car.png from the Library panel onto the Stage and place it in the middle of the rectangle you drew, as in the following illustration: Add text The next step is to add text on the Stage. 1. Select the Text tool from the Tools panel and click on the Stage, under the car. A text field appears, with a round control that indicates that the field will expand as you type. 2. You can specify all the settings for the Text tool before you start typing.
For more information about components, see Using Components. The Flash built-in components are displayed in the Components panel (Window > Development Panels > Components). You will add a Button component to create the Information button. 1. Click the Selection tool in the Tools panel. 2. From the Components panel, drag the Button component onto the Stage, as shown below. 3.
For an online introduction to the Flash MX 2004 behaviors see the Macromedia On Demand article “Flash MX 2004 Family: Using Behaviors” at www.macromedia.com/macromedia/events/ online/ondemand/index.html. Add motion and basic interactivity The ad is almost complete. The next step before testing and publishing it is to add the motion that makes the car fade away. With just a few keystrokes, you can add motion to an object using the built-in Timeline effects provided with Flash.
1. In the Timeline, right-click Frame 1 in the Art layer, which has the filled black keyframe. From the context menu, select Copy Frames. 2. Right-click Frame 30 in the Art layer. From the context menu, select Paste frames. Frames with content in the Art layer now extend to Frame 30. Test the application At any point during authoring, you can test how your application plays as a SWF file. 1. Select File > Save to save your application. 2. Save your application and Select Control > Test Movie. 3.
3. Click the HTML tab. By default, the publishing process creates an HTML document that inserts your SWF file in a browser window. Settings on the HTML tab of the Publish Settings dialog box determine how the application appears in the browser. 4. If Detect Flash Version is selected, deselect that option so that Flash will not create files to detect your user’s Flash Player version. Change publish settings By default, Flash gives the SWF file the same name as the FLA file.
Resources Macromedia has excellent resources to help you discover more about Flash, get support, and send feedback to the company. Registration Register to receive up-to-the-minute notices about upgrades and new products, technical support, and more. You can register online by selecting Help > Online Registration. You can also print the registration form from the Help menu. Release Notes For late-breaking information and known issues about Flash, check the Release Notes in the Flash Support Center at www.
Sample applications Flash includes sample files that you can dissect to learn various design and development concepts. To view SWF versions of the sample files, along with a description, select Help > Samples. Some of the samples are complete applications, while others are simple and intended to introduce a basic concept. Click the link of the desired sample to open the sample in an HTML browser window. To view the authoring version (FLA file) for a given sample, open the file from within Flash.
INDEX A accessibility, in the Flash authoring environment 43 Actions panel 37 activating Flash 16 applications publishing and viewing 59 sample 62 testing 59 viewing published in a browser 60 art, adding from the library 55 authoring environment accessibility 43 D Default Layout command, for panels 39 deleting frames or keyframes 28 layers and layer folders 32 document, creating new 52 document-editing mode 35 B behavior, adding 57 bitmap images, anti-aliasing 41 Bitmaps on Clipboard preference (Windows
displaying 25 displaying contents 23 dragging in Timeline 28 editing in Timeline 27 inserting 27 removing 28 showing thumbnails 26 thumbnail display 26 using 26 FreeHand Text on Clipboard preference 41 G Gradients on Clipboard preference (Windows only) 41 grids editing 35 showing 34 snapping to 35 using 34 guide layers 32 guides clearing 36 locking 36 moving 35 removing 35 setting preferences 36 showing 35 snapping to 35 using 35 H Hand tool 23 help accessing 10 closing table of contents 10 online 9 printin
locking 31 organizing 32 renaming 31 selecting 30 using 28 viewing as outlines 30 lessons, Flash 9, 11 library adding art from 55 importing images into 54 keyboard shortcuts for items 47 Library panel about 37, 52 viewing items 52 locking layers and layer folders 31 M Macromedia Flash Development Center 61 Macromedia Flash support 61 main toolbar 33 media content, adding 53 MIME types, configuring for 19 motion, adding 58 N Named Anchor on Scenes preference 40 navigation controls, adding 56 new features 6,
R registration 61 release notes 61 Remove Frame command 28 renaming layers and layer folders 31 resources 61, 62 rulers changing units of 36 showing and hiding 36 using 36 S security, Flash Player 20 selecting layers 30 seminars 61 Shift Select preference 40 Show All command 23 Show Frame command 23 Show Grid command 34 Show Guides command 35 Show Tooltips preference 40 Snap to Grid command 35 Snap to Guides command 35 snapping to grid 35 to guides 35 Span Based Selection preference 40 Stage about 51 displa
U Undo Levels preference 39 upgrading from Macromedia Flash MX 2004 17 V vector art, adding 53 viewing the application 59 W warning preferences 41 work area, showing and hiding 23 Z Zoom tool 22 zooming 22 Index 67
Index
