Page 1 Learning Flash...
Page 2 Open Sesame!, Roundtrip, Roundtrip HTML, Shockwave, Sitespring, SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be, and Xtra are either registered trademarks or trademarks of Macromedia, Inc. and may be registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or phrases mentioned within this publication may be trademarks, service marks, or trade names of Macromedia, Inc.
Page 3: Table Of Contents
CONTENTS INTRODUCTION: Learning Macromedia Flash MX 2004 ....9 Additional resources for learning Flash ....... . . 10 CHAPTER 1: Create a Document .
Page 4 CHAPTER 3: Write Scripts with ActionScript ......27 Set up your workspace..........28 Create an instance of a symbol .
Page 5 Align objects using the Property inspector ....... 52 Align objects using the grid and arrow keys ......53 Summary.
Page 6 CHAPTER 10: Add Static, Input, and Dynamic Text ..... . . 77 Set up your workspace..........78 Create an expanding-width text block .
Page 7 CHAPTER 13: Add Interactivity with ActionScript ......97 Set up your workspace..........98 Name button instances .
Page 8 Contents...
Page 9: Introduction: Learning Macromedia Flash Mx 2004
Flash applications. Note: This book is not a comprehensive manual detailing all the features of Macromedia Flash MX 2004. For in-depth information about using Flash, from within the Flash application, select Flash Help (Help >...
Page 10: Additional Resources For Learning Flash
Flash workspace and guides you in creating a simple document. • The lessons on the How Do I tab offer an introduction to using Flash. Refer to the Quick Start, Basic Flash, and Basic ActionScript lessons (Help > How Do I). Introduction: Learning Macromedia Flash MX 2004...
Page 11 Using the Help panel The updatable Help panel provides access to information on how to use Flash. For more information about the Help panel, see the following sections. Accessing help The tabs in the Help panel—Help and How Do I—contain the full set of user assistance information provided with the Flash application.
Page 12 Update button at the top of the Help tab,” you can click this button to update Flash Help. To update Flash Help: Verify that you’re connected to the Internet. Click the Update button in the Help panel toolbar and follow instructions to download the help system. Introduction: Learning Macromedia Flash MX 2004...
Page 13: Chapter 1: Create A Document
CHAPTER 1 Create a Document You’re about to experience the power of Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004. You’ll see how, in a few minutes, you can create a compelling web experience that combines video, text, graphics, and media control behaviors. In the process, you’ll learn about the Flash authoring environment as you accomplish the following tasks: •...
Page 14: Take A Tour Of The User Interface
HowDoI\ QuickTasks\start_files and double-click document_start.fla. Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer settings to see the folder. On Windows 98, browse to boot drive\Windows\ Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\ HowDoI\QuickTasks\start_files and double-click document_start.fla.
Page 15 Use tools to create Flash content The white rectangular Stage area is where you can arrange objects as you wish them to appear in your published file. Note: In Windows operating systems, you can open several documents at once and use document tabs, above the Stage, to navigate between them.
Page 16: Change Background And Stage Size
• Move the mouse pointer over the area that separates the Stage from the Timeline. When the resizing handle appears, drag up or down slightly to resize the Timeline as necessary. Playhead Keyframe Resizing handle The playhead (the red indicator line) is on Frame 1 in the Timeline. The keyframes are designated by small circles in the frames, which are filled, indicating there’s content in those frames.
Page 17: View The Library Panel
View the Library panel Flash content that you import or that is a symbol is stored in your Library panel. To learn more about symbols and instances, select Help > How Do I > Basic Flash > Create Symbols and Instances. •...
Page 18: View Object Properties
View object properties When you add an object to the Stage, you can select it, then view and change its properties in the Property inspector. The type of object selected determines which properties appear. For example, if you select a text object (not a text graphic, which we use in this lesson), the Property inspector displays settings such as font, type size, and paragraph formatting, which you can either view or change.
Page 19: Use The Movie Explorer To View The Document Structure
In the Rewind Video dialog box, select video. In the Number of Frames to Step Back text box, enter 20. The Number of Frames to Step Back text box indicates how many frames the playhead should move back when the user clicks the Rewind button. Note: Additional video control behaviors let you fast-forward, hide, and show a video.
Page 20: Find Help
Find help The lessons provide an introduction to Flash, and suggest ways that you can use features to create exactly the kind of document required. For comprehensive information about a feature, procedure, or process described in the lessons, see the Help tab of the Help panel (Help > Help).
Page 21: Chapter 2: Create Accessible Flash Content
CHAPTER 2 Create Accessible Flash Content With knowledge of a few design techniques and accessibility features in Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004, you can create Flash content that is accessible to all users, including those with disabilities. This lesson demonstrates how to create an...
Page 22: Set Up Your Workspace
HowDoI\ QuickTasks\start_files and double-click accessibility_start.fla. Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer settings to see the folder. On Windows 98, browse to boot drive\Windows\ Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\ HowDoI\QuickTasks\start_files and double-click accessibility_start.fla.
Page 23: Provide A Document Title And Description
Provide a document title and description In the Accessibility panel for the document, you can enter a name and description for your document for screen readers. • In the Name text box, enter Trio ZX2004. In the Description text box, enter Corporate website about the Trio ZX2004.
Page 24: Change Static Text To Dynamic Text For Accessibility
To create a reading order, you must assign a tab index to every instance in ActionScript. If you have Macromedia Flash MX Professional 2004, creating a tab order is as easy as entering a number in the Tab Index text box. You can then view the tab order directly on the Stage.
Page 25 If you have Flash MX Professional 2004, you can follow this procedure to create a tab order using the Accessibility panel: With the Accessibility panel open, select the logo_mc instance at the top of the Stage. In the Accessibility panel, enter 1 in the Tab Index text box. Continue to select each instance on the Stage and enter a tab order number in the Tab Index text box, using information from the following table: Instance name...
Page 26: About Testing Your Document With Screen Readers
Control the order in which users navigate with the Tab key • Control the reading order with ActionScript Macromedia maintains an extensive website devoted to accessibility. For more information about accessibility with Macromedia products, see the Macromedia accessibility website at www.macromedia.com/macromedia/accessibility.
Page 27: Chapter 3: Write Scripts With Actionscript
CHAPTER 3 Write Scripts with ActionScript The ActionScript language that is part of Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 offers designers and developers a variety of benefits. With ActionScript you can control document playback in response to events such as elapsed time and loading data;...
Page 28: Set Up Your Workspace
HowDoI\ QuickTasks\start_files and double-click scripts_start.fla. Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer settings to see the folder. On Windows 98, browse to boot drive\Windows\ Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\ HowDoI\QuickTasks\start_files and double-click scripts_start.fla.
Page 29: Name Button Instances
Drag the map_skewed movie clip on the Stage again so that the align guides appear. Use the guides to align the movie clip to the top and left edges of the GPS screen. Note: If you make an error in placement, either drag the movie clip again, or press Control+Z (Windows) or Command+Z (Macintosh) to undo your changes.
Page 30: Initialize The Document
Initialize the document Applications have an initial state that specifies how the content first appears to users. You initialize properties and variables in the first frame of a document. You’ll specify that the map movie clip not be visible when the SWF file first plays. Select Frame 1 of the Actions layer.
Page 31: Locate Actionscript Reference Documentation
Add comments to ActionScript In ActionScript, text after double slashes (//) is commented text, which Macromedia Flash Player ignores. Commented text often documents script functionality so that other developers can understand your script, but you can also use comments to deactivate sections of your script when debugging.
Page 32: Copy And Modify A Button Function
In the Script pane, press the Spacebar and type the following: = function(){ The line of code that you just completed should appear as follows: this.onButton_btn.onRelease = function(){ You already know how to select objects in the Insert Target Path dialog box; you’ll now enter the instance names directly into the Script pane.
Page 33: Check Syntax And Test Your Application
//function to hide animation this.offButton_btn.onRelease = function(){ screen_mc._visible = false; Check syntax and test your application As you learned earlier in this lesson, ActionScript depends on correct syntax to execute properly. Flash offers a variety of ways for you to test your syntax. To check the syntax, do one of the following: Click the options menu in the upper right corner of the Actions panel title bar and select Check Syntax.
Page 34 Chapter 3: Write Scripts with ActionScript...
Page 35: Chapter 4: Create An Application
HowDoI\QuickTasks\start_files and double-click calculator_start.fla. Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer settings to see the folder. On Windows 98, browse to boot drive\Windows\Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\HowDoI\QuickTasks\start_files and double-click calculator_start.fla. On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/ Flash MX 2004/language/Configuration/HelpPanel/HowDoI/QuickTasks/start_files and double-click calculator_start.fla.
Page 36: Copy Input And Dynamic Text Fields
Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file. Note: As you complete this lesson, remember to save your work frequently. Select Window > Panel Sets > Training Layout to modify your workspace for taking lessons. The form already includes an input text field in the QTY column and a dynamic text field in the Price column.
Page 37: Declare Variables And Values For The Prices
Select File > Publish Settings. On the Flash tab of the Publish Settings dialog box, select ActionScript 2.0 in the ActionScript Version pop-up menu, if it’s not already selected. In the Timeline, click the Components layer to select it. From the Components panel (Window > Development Panels > Components), drag the Button component to the Stage and place it over the Calculate guide.
Page 38: Write A Function
Press Enter or Return and type the following two lines to set values of 0 for the other two QTY fields: qty2_txt.text = 0; qty3_txt.text = 0; When you finish, the ActionScript should appear as follows: //set initial values for the quantity text fields qty1_txt.text = 0;...
Page 39: Write An Event Handler For The Component
Write an event handler for the component For your SWF file to react to events such as a mouse click, you can use event handlers— ActionScript associated with a particular object and event. You’ll use an event handler for on() the Button component that calculates the total price when users click the button.
Page 40: Test Your Application
Test your application You’ll test your application to ensure that it executes as expected. Save your document and select Control > Test Movie. In the test version of your movie that appears in Flash Player, type numbers in the QTY fields to see what appears in the Price fields.
Page 41: Chapter 5 Work With Layers
CHAPTER 5 Work with Layers In Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004, layers are analogous to transparent sheets of acetate stacked on top of each other. In the areas of a layer that don’t contain content, you can see through to content on the layers below. Layers assist you in organizing content in your document.
Page 42: Set Up Your Workspace
HowDoI\BasicFlash\start_files and double-click layers_start.fla. Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer settings to see the folder. On Windows 98, browse to boot drive\Windows\Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\HowDoI\BasicFlash\start_files and double-click layers_start.fla. On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/ Flash MX 2004/language/Configuration/HelpPanel/HowDoI/BasicFlash/start_files and double-click layers_start.fla.
Page 43: Select A Layer
Select a layer You place objects, add text and graphics, and edit on the active layer. To make a layer active, you either select the layer in the Timeline or select a Stage object in the layer. The active layer is highlighted in the Timeline, and the pencil icon indicates it can be edited.
Page 44: Add And Name A Layer
Add and name a layer You’ll now add a layer, name the layer, and then add a graphic symbol to the layer. In the Timeline, click the Car layer. Click the Insert Layer button below the Timeline. The new layer appears above the Car layer and becomes the active layer. Double-click the layer name, type Background as the new name for the layer, and press Enter (Windows) or Return (Macintosh).
Page 45: Add A Mask Layer
Add a mask layer Using a mask layer provides a simple way to selectively reveal portions of the layer or layers below it. Masking requires making one layer a mask layer and the layers below it masked layers. You’ll use the rectangular shape on the Stage to mask part of the road graphic and animation so that the animation fits better on the Stage.
Page 46: Delete A Layer
Delete a layer Since you don’t really need the guide layer in your document, you’ll delete it. • In the Timeline, with the Notes layer selected, click the Delete Layer button. Summary Congratulations on learning how to work with layers in Flash. In just a few minutes, you learned how to accomplish the following tasks: •...
Page 47: Chapter 6: Create A User Interface With Layout Tools
CHAPTER 6 Create a User Interface with Layout Tools Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 offer a variety of ways to place objects precisely on the Stage, letting you choose your preferred method. In this lesson, you’ll use layout tools to create a user interface.
Page 48: Set Up Your Workspace
HowDoI\BasicFlash\start_files and double-click layout_tools_start.fla. Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer settings to see the folder. On Windows 98, browse to boot drive\Windows\Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\ HowDoI\BasicFlash\start_files and double-click layout_tools_start.fla. On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/ Flash MX 2004/language/Configuration/HelpPanel/HowDoI/BasicFlash/start_files and double-click layout_tools_start.fla.
Page 49: Change The Stage Size
On the Stage, click the upper left corner of the text block and drag it to the intersection of the two guides. A small circle appears when the selection snaps to the guides. If you want to remove the guides, select View > Guides > Clear Guides. Change the Stage size The Stage size of your document is 750 pixels x 500 pixels.
Page 50: Specify Snap Alignment Settings
Click Align Left Edge and Align Bottom Edge. The bevel aligns to the bottom edge of the Stage. Close the Library panel and the Align panel. Specify snap alignment settings Snapping offers a way of precisely placing an object on the Stage by having the object affix itself to other objects and alignment tools.
Page 51: Align Objects Using The Align Panel
While keeping the car centered with the body text (you should continue to see the center alignment guide), drag the auto in a straight line, toward the left of the Stage, until the guide snaps at the 30-pixel border that you created previously. You’ve aligned the car with the text, as well as to the snapping border.
Page 52: Align Objects Using The Property Inspector
From the Library panel, drag the nav graphic to any area of the Stage below the blue banner, and then release the nav graphic. Click the upper left corner of the nav graphic, then drag it so that a circular snap indicator appears.
Page 53: Align Objects Using The Grid And Arrow Keys
Align objects using the grid and arrow keys You can use the grid to assist you in placing objects on the Stage. Select View > Grid > Show Grid. The grid does not appear when you test or publish your document. Note: If you wanted to snap objects to the horizontal and vertical grid lines, you would also select Snap to Grid (View >...
Page 54 Chapter 6: Create a User Interface with Layout Tools...
Page 55: Chapter 7 Draw In Flash
CHAPTER 7 Draw in Flash When you draw in Flash, you create vector art, which is a mathematical representation of lines, curves, color, and position. Vector art is resolution-independent; you can rescale the art to any size or display it at any resolution without losing clarity. Additionally, vector art downloads faster than comparable bitmap images.
Page 56: Set Up Your Workspace
HowDoI\BasicFlash\start_files and double-click drawing_start.fla. Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer settings to see the folder. On Windows 98, browse to boot drive\Windows\Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\HowDoI\BasicFlash\start_files and double-click drawing_start.fla. On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/ Flash MX 2004/language/Configuration/HelpPanel/HowDoI/BasicFlash/start_files and double-click drawing_start.fla.
Page 57: Select Options To Create A Polygon
Select options to create a polygon The PolyStar tool offers options that let you specify the number of sides in a polygon; you can also use options for the tool to create a star. You’ll specify that your polygon have six sides. In the Property inspector, with the PolyStar tool still selected, click Options.
Page 58: Use The Cut-Out Feature
Use the cut-out feature When you create one shape on top of another on the same layer, and the two shapes are ungrouped, the shape on top “cuts out” the area of the shape underneath. You’ll create a circle within the hexagon, then cut out the circle. Select View >...
Page 59: Copy Strokes
Copy strokes You can select and copy strokes, which you’ll do now to create the lower edge of the bolt. With the Selection tool, click anywhere on the Stage or work area, away from an object, to deselect the shape. Hold Shift and click the three lines of the shape on the Stage that comprise the bottom of the hexagon to select them, as shown in the following illustration: Press Shift + Alt and drag down slightly to drag a copy of the three lines, as in the...
Page 60: Group The Shape
Group the shape You can manipulate the stroke and fill of a shape as separate entities, as you did earlier, or you can group the stroke with the fill to manipulate the shape as a single graphic, which you’ll do now. With the Selection tool, drag around the shape to select both the stroke and the fill.
Page 61: Summary
Summary Congratulations on learning how to use some of the various drawing tools in Flash. In a few minutes, you learned how to accomplish the following tasks: • Create a polygon • Rotate a shape • Cut out a shape within a shape •...
Page 62 Chapter 7: Draw in Flash...
Page 63: Chapter 8: Create Symbols And Instances
HowDoI\BasicFlash\start_files and double-click symbols_start.fla. Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer settings to see the folder. On Windows 98, browse to boot drive\Windows\ Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\HowDoI\BasicFlash\start_files and double-click symbols_start.fla. On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/ Flash MX 2004/language/Configuration/HelpPanel/HowDoI/BasicFlash/start_files and double-click symbols_start.fla.
Page 64: About Creating Symbols
Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file. As you complete this lesson, remember to save your work frequently. Select Window > Panel Sets > Training Layout to configure your workspace. About creating symbols When you create a symbol, you specify one of the following symbol behaviors: •...
Page 65: Duplicate And Modify An Instance Of A Symbol
Duplicate and modify an instance of a symbol Once you’ve created a symbol, you can use instances of it repeatedly in your document. You can modify the following instance properties for an individual instance without affecting other instances or the original symbol: color, scale, rotation, alpha transparency, brightness, tint, height, width, and location.
Page 66: Create A Movie Clip Symbol
Drag the middle-right sizing handle of the Free Transform tool slightly to the right, to stretch the symbol. Click Scene 1, above the Timeline, to exit symbol-editing mode. Both instances of the symbol reflect the transformation. Create a movie clip symbol A movie clip symbol is analogous in many ways to a document within a document.
Page 67: Add An Effect To The Movie Clip
Add an effect to the movie clip You can create an animation within a movie clip Timeline, in symbol-editing mode, that plays independent of the main Timeline. You’ll add an effect to the MCWheel symbol that will cause all instances of the symbol to spin. With the Selection tool, double-click the wheel_mc instance to enter symbol-editing mode.
Page 68 Chapter 8: Create Symbols and Instances...
Page 69: Chapter 9: Add Animation And Navigation To Buttons
When you select the Button behavior for a new symbol, Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 create the Timeline for the button states. You can add navigation to buttons by using behaviors or by writing ActionScript.
Page 70: Set Up Your Workspace
HowDoI\BasicFlash\start_files and double-click buttons_start.fla. Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer settings to see the folder. On Windows 98, browse to boot drive\Windows\Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\HowDoI\BasicFlash\start_files and double-click buttons_start.fla. On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/ Flash MX 2004/language/Configuration/HelpPanel/HowDoI/BasicFlash/start_files and double-click buttons_start.fla.
Page 71: Name A Button Instance
Name a button instance As a best practice, name instances of symbols on the Stage. ActionScript relies on the instance name to identify the object. • With the button that you created still selected, open the Property inspector (Window > Properties).
Page 72: Align Buttons
Select the Hit frame (Frame 4) of the Hit Area layer in the BTNLogo Timeline, and press F6 to add a keyframe. In the Tools panel, select the Rectangle tool. The stroke and fill color are unimportant. On the Stage, draw a rectangle that covers, as closely as possible, the logo and text. The rectangle now defines the clickable area of the button.
Page 73: Create Animation For A Button State
Create animation for a button state You’ll create a movie clip within the Over state of Button 1, and then create a shape tween in the movie clip. The shape tween creates an effect that changes the color from gray to red. On the Stage, double-click Button 1 to open it in symbol-editing mode.
Page 74: Add Navigation To A Button
In the URL text box, either accept the default setting of http:// www.macromedia.com or enter a different URL. Then click OK. If desired, repeat the steps above, selecting Button 2, then Button 3, to add navigation to those buttons as well.
Page 75: Summary
Summary Congratulations on learning about buttons. In a few minutes, you were able to accomplish the following tasks: • Create a button from grouped objects • Name a button instance • View the hit area of a button • Change the hit area of a button •...
Page 76 Chapter 9: Add Animation and Navigation to Buttons...
Page 77: Chapter 10: Add Static, Input, And Dynamic Text
CHAPTER 10 Add Static, Input, and Dynamic Text Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 provide a variety of text features and options. This lesson introduces you to the three primary types of text you can add to a document. You can add static text for titles, labels, or other text content you want to appear in a document.
Page 78: Set Up Your Workspace
HowDoI\BasicFlash\start_files and double-click text_start.fla. Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer settings to see the folder. On Windows 98, browse to boot drive\Windows\Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\HowDoI\BasicFlash\start_files and double-click text_start.fla. On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/ Flash MX 2004/language/Configuration/HelpPanel/HowDoI/BasicFlash/start_files and double-click text_start.fla.
Page 79: Create An Expanding-Width Text Block
Create an expanding-width text block You can define the size of a text block, or you can use a text block that expands to fit the text you write. You’ll begin this lesson by simply adding text to a document. Click in a blank area in the workspace to make sure no Timeline frames or objects on the Stage are selected.
Page 80: Edit Text And Change Font Attributes
On the Stage, drag your pointer over the area of the Text 2 guide. An extendable one-line static text block has a round handle in the upper right corner, and a fixed-width static text block has a square handle. Inside the text block that you created, type Want to learn more? Note: You can drag the square handle for a text block to change its width.
Page 81: Add An Input Text Field
The Alias Text button renders text so that it appears more readable at small sizes. For input text, this option is supported if the end user has Macromedia Flash Player 7 or later. Select Single Line in the Line Type pop-up menu, and verify that Show Border Around Text is selected.
Page 82: Assign Instance Names To Text Fields
Assign instance names to text fields An input text field on the Stage is an instance of the ActionScript TextField object, to which you can apply properties and methods. As a best practice, you should name text field instances so that you or others working on the project can refer to the instance in ActionScript.
Page 83: Specify Format Options
Specify format options The Format Options dialog box allows you to specify margin and indentation settings for the text. With the dynamic text field still selected on the Stage, click Format in the Property inspector. In the Left Margin text box, enter 5, and in the Right Margin text box, enter 5. Then click OK. The dynamic text now has 5-pixel left and right margins within the text field.
Page 84: Check Spelling
Check spelling Flash MX 2004 and Flash MX Professional 2004 introduce new features that let you check spelling in most places where text occurs in your document, including text fields, layer names, and ActionScript strings. To check spelling, you first configure the Spelling Setup options, and then run the spell checker.
Page 85: Chapter 11: Create A Timeline Animation
CHAPTER 11 Create a Timeline Animation Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 provide powerful tools for creating animation. Most simple animation in Flash is done using a process known as tweening. Tweening is short for “in between” and refers to filling in the frames between two keyframes so that a graphic displayed in the first keyframe changes into the graphic displayed in the second keyframe.
Page 86: Set Up Your Workspace
HowDoI\BasicFlash\start_files and double-click animation_start.fla. Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer settings to see the folder. On Windows 98, browse to boot drive\Windows\Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\HowDoI\BasicFlash\start_files and double-click animation_start.fla. On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/ Flash MX 2004/language/Configuration/HelpPanel/HowDoI/BasicFlash/start_files and double-click animation_start.fla.
Page 87: Create A Shape Tween
Use the Selection tool to reposition the tire, if necessary. With the Selection tool still selected, in the TireAnim layer, select Frame 30. Then press F6 to insert a keyframe. Select Frame 15 and press F6 to add another keyframe. With the playhead still on Frame 15, hold the Shift key to move the tire in a straight line, and drag the tire up.
Page 88: Copy And Paste Keyframes In An Animation
With the playhead on Frame 15, select the Selection tool. Drag the tire shadow slightly up and to the right. With Frame 15 still selected, select the Eyedropper tool in the Tools panel, and then click the shadow object. If the Color Mixer is not already open, select Window > Design Panels > Color Mixer to open it, then change the Alpha value from 25% to 10%.
Page 89: Change The Speed Of The Animation
Select the transformation center point (the small circle near the center of the movie clip) and drag it to the bottom of the tire. The center point snaps to the lower middle transform handle. On the Stage, drag the upper middle transform handle down to slightly compress the tire shape. If necessary, drag the tire to align it over the shadow.
Page 90: Test The Swf File
Change the acceleration and deceleration By default, tweened frames play at a constant speed. With easing, you can create a more realistic rate of acceleration and deceleration. Positive values begin the tween rapidly and decelerate the tween toward the end of the animation. Negative values begin the tween slowly and accelerate the tween toward the end of the animation.
Page 91: Chapter 12: Create A Presentation With Screens (Flash Professional Only)
HowDoI\BasicFlash\start_files and double-click presentation_start.fla. Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer settings to see the folder. On Windows 98, browse to boot drive\Windows\Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\HowDoI\BasicFlash\start_files and double-click presentation_start.fla. On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/ Flash MX 2004/language/Configuration/HelpPanel/HowDoI/BasicFlash/start_files and double-click presentation_start.fla.
Page 92: View The Screen Hierarchy And Screen Timelines
The document opens in the Flash authoring environment. Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file. As you complete this lesson, remember to save your work frequently. Select Window >...
Page 93: View Screen Properties
View screen properties You can view different properties for a slide, depending on where you select the slide. In the Screen Outline pane, select the presentation thumbnail. The Property inspector allows you to change the instance name, which is also the name of the screen as it appears in the Screen Outline pane.
Page 94: Add Screen Navigation Behaviors To Buttons
Add screen navigation behaviors to buttons When you open a new Flash Slide Presentation, the document already includes functionality that lets users navigate between slide screens using the keyboard arrow keys. You’ll also add navigation behaviors to the buttons, offering users an additional option to navigate between slides. Note: By default, keyboard arrow keys let you navigate between screens on the same level, not between nested screens.
Page 95: Select And Move Slides
Select and move slides You can copy, cut, paste, and drag screens in the Screen Outline pane to change their order in the presentation. You’ll select three screens, cut them, and paste them so that they’re nested as children of the features slide. In the Screen Outline pane, select the performance slide.
Page 96: Test Your Presentation
To add the Fly behavior, verify that the features slide is still selected. In the Behaviors panel, click the Add (+) button and select Screen > Transition from the menu. In the Transitions dialog box, select Fly from the list of transitions, and select Out as the direction.
Page 97: Chapter 13: Add Interactivity With Actionscript
• Use a behavior to play an MP3 file Note: If you have Macromedia Flash MX Professional 2004, you can use screens to create a document. Screens provide additional navigation options. Slide screens, for example, already include built-in navigation that allows users to move through screens using keyboard arrow keys. For more information about screens, select Help >...
Page 98: Set Up Your Workspace
HowDoI\BasicActionScript\start_files and double-click interactivity_start.fla. Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer settings to see the folder. On Windows 98, browse to boot drive\Windows\Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\HowDoI\BasicActionScript\start_files and double-click interactivity_start.fla. On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/ Flash MX 2004/language/Configuration/HelpPanel/HowDoI/BasicActionScript/start_files and double-click interactivity_start.fla.
Page 99: Name Button Instances
Name button instances You’ll provide instance names for the buttons on the Stage so that you can refer to the instance names in ActionScript. On the lower right side of the Stage, select the button at the left. In the Property inspector (Window >...
Page 100: Control The Document With A Stop() Action
Control the document with a stop() action When you test or publish a Flash document that contains more than one scene, by default the scenes play linearly, in the order in which they appear in the Scenes panel. You’ll use a stop() action for Scene 1 so that the playhead in the Timeline stops at Frame 1 of Scene 1.
Page 101: Play A Movie Clip
Play a movie clip You can configure your document to play a movie clip at runtime. Using the attachMovie() method, you can attach an instance of a movie clip in the Library panel to the Stage even though you have not placed an instance on the Stage. With the method, you must export the symbol for ActionScript and assign it a attachMovie()
Page 102 Note: For more information about the attachMovie() method, see attachMovie() in the Flash ActionScript Language Reference. Additionally, you can use the Flash ActionScript Language Reference for information about ActionScript that allows you to manage depth; getNextHighestDepth(), getDepth(), getInstanceAtDepth() are methods of the MovieClip class.
Page 103: Use A Behavior To Play An Mp3 File
Use a behavior to play an MP3 file When you want to add interactivity to your document with ActionScript, you can often rely on behaviors to add the ActionScript for you. You’ll use a sound behavior to play an MP3 file from the library.
Page 104 Chapter 13: Add Interactivity with ActionScript...
Page 105: Chapter 14: Create A Form With Conditional Logic And Send Data
HowDoI\BasicActionScript\start_files and double-click simpleForm_start.fla. Note: If the Application Data folder is hidden, you’ll need to change your Windows Explorer settings to see the folder. On Windows 98, browse to boot drive\Windows\Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\ HowDoI\BasicActionScript\start_files and double-click simpleForm_start.fla. On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/ Flash MX 2004/language/Configuration/HelpPanel/HowDoI/BasicActionScript/start_files and double-click simpleForm_start.fla.
Page 106: Add An Input Text Field To Collect Form Data
Note: The BasicActionScript\finished_files folder contains completed versions of lesson FLA files, for your reference. Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file. Select Window > Panel Sets > Training Layout to modify your workspace for taking lessons. If necessary, drag the lower edge of the Timeline (Window >...
Page 107: Add A Submit Button To The Form
Add a Submit button to the form The Library panel contains a Submit button symbol that you will add to the form. From the Library panel (Window > Library), drag the Submit button to the Stage and place it over the SubmitURL guide. Drag the button or use the arrows keys to adjust the position, if necessary.
Page 108: Add A Confirmation Message
Add a confirmation message Next, you’ll add a message to display when the user submits an entry in the text field. In the Dialog Boxes layer, select Frame 10. Right-click (Windows) or Control-click (Macintosh) the selected frame and select Insert Blank Keyframe from the context menu. From the Library panel, drag the Dialog Box-confirm movie clip to the center of the Stage.
Page 109: Add Frame Labels For Navigation
Add frame labels for navigation When the viewer presses the Submit button, you want Flash to jump to either the error message or the confirmation message, depending on what is entered in the text field. Labeling a frame helps you easily reference it in ActionScript. This is helpful for sending the playhead to a specific frame.
Page 110: Pass Data Out Of A Swf File
Type in the Script pane. Press Enter or Return, and type then gotoAndStop("confirm") press Enter or Return again and type Your script should appear as follows: //Stops the playhead at frame 1 stop(); //Adds conditional logic for the Submit button that validates user input this.submit_btn.onRelease = function(){ if (url_txt.text == null || url_txt.text ==””){ gotoAndStop("error");...
Page 111: Test Your Swf File
Type , then press Enter or Return. tryAgain_btn.onRelease = function(){ Type , then press Enter or Return and type to complete the script. gotoAndStop(1); Test your SWF file You’ll test your document by entering a URL and checking whether it works as expected. Select Control >...
Page 112 Chapter 14: Create a Form with Conditional Logic and Send Data...
Page 113: Chapter 15: Work With Objects And Classes Using Actionscript
Work with Objects and Classes Using ActionScript 2.0 Classes are the blueprint for objects in Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004. All objects in Flash have an underlying class; for example, all movie clips have a method called , and is defined in the class definition for a movie clip.
Page 114: About Classes And Object Types
On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/ Flash MX 2004/language/Configuration/HelpPanel/HowDoI/BasicActionScript/ finished_files. Select Window > Panel Sets > Training Layout to configure your workspace. About classes and object types A class, also referred to as an object type, is like a blueprint. An object doesn’t exist until you create it, or instantiate it, from a class definition.
Page 115: Creating A Custom Class
Modify your script You’ll modify your script to compensate for the zero indexing. Add +1 to the value when you create and test your document to be sure the currentMonth, expected month number appears. That line of script should read as follows: var currentMonth:Number = myDate.getMonth()+1;...
Page 116 In order to properly define a class in ActionScript 2.0, you must surround all classes by the class keyword, and you must declare all variables in the constructor outside of the constructor. Following is an example: Note: The following ActionScript is an example only. You should not enter the script in your lesson FLA file.
Page 117 Build a custom class You’ll now build a new Product class with getter and setter methods and create an object from the Product class. Create an ActionScript file by doing one of the following: If you’re using Flash MX 2004 Professional, select File > New > ActionScript File (Not Flash Document).
Page 118: Create Two Objects From The Product Class
public function setID (id:Number) :Void this.id = id; public function setProdName (prodName:String) :Void this.prodName = prodName; public function setDescription (description:String) :Void this.description = description; public function getID () :Number { return id; public function getProdName () :String { return prodName public function getDescription () :String { return description;...
Page 119: About Extending Existing Classes
Verify that you created the objects as follows: var handleBars:Product = new Product (1, "ATB", "Available in comfort and aero design"); var pedals:Product=new Product(0,"Clipless Pedals","Excellent cleat engagement"); Trace the description property of pedals: trace (pedals.getDescription ()); Save and test the document. You should see the description of pedals in the Output panel. Note: An example finished file of the document you just created, named handson2.fla, is located in your finished files folder.
Page 120: Extend The Movieclip Class To Create A New Class
Extend the MovieClip class to create a new class You’ll create a new class by extending the built-in MovieClip class. Create a new Flash document and name it Shape.fla. Using the drawing tools, draw a shape on the Stage. With the entire shape selected, right-click (Windows) or Control-click (Macintosh) the shape and select Convert to Symbol from the context menu.
Page 121: Summary
Define private methods in the class that use the existing movie clip methods, startDrag() stopDrag() class Drag extends MovieClip function Drag() onPress=doDrag; onRelease=doDrop; private function doDrag():Void this.startDrag(); private function doDrop():Void this.stopDrag() Save the ActionScript file. Test the Shape.fla document. You should be able to drag the movie clip. Note: An example of the ActionScript file you just created, named Drag.as, is located in your finished files folder.
Page 122 Chapter 15: Work with Objects and Classes Using ActionScript 2.0...

This manual is also suitable for:

Flash mx 2004 - actionscript

MACROMEDIA FLASH MX 2004-LEARNING FLASH Manual

INTRODUCTION: Learning Macromedia Flash MX 2004

CHAPTER 1: Create a Document

CHAPTER 2: Create Accessible Flash Content

CHAPTER 3: Write Scripts with Actionscript

CHAPTER 4: Create an Application

CHAPTER 5 Work with Layers

CHAPTER 6: Create a User Interface with Layout Tools

CHAPTER 7 Draw in Flash

CHAPTER 8: Create Symbols and Instances

CHAPTER 9: Add Animation and Navigation to Buttons

CHAPTER 10: Add Static, Input, and Dynamic Text

CHAPTER 11: Create a Timeline Animation

CHAPTER 12: Create a Presentation with Screens (Flash Professional Only)

CHAPTER 13: Add Interactivity with Actionscript

CHAPTER 14: Create a Form with Conditional Logic and Send Data

CHAPTER 15: Work with Objects and Classes Using Actionscript

Quick Links

Need help?

Questions and answers

Subscribe to Our Youtube Channel

Related Manuals for MACROMEDIA FLASH MX 2004-LEARNING FLASH

Summary of Contents for MACROMEDIA FLASH MX 2004-LEARNING FLASH

This manual is also suitable for:

Table of Contents