Learning 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 INTRODUCTION: Learning Macromedia Flash MX 2004 . .................. 9 Additional resources for learning Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 CHAPTER 1: Create a Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Take a tour of the user interface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Change background and Stage size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPTER 3: Write Scripts with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Create an instance of a symbol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Name button instances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Initialize the document . . . . . . . . . . . . . . . . . . . . .
Align objects using the Property inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Align objects using the grid and arrow keys . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 CHAPTER 7: Draw in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Set up your workspace. . . . . . . . . . . . . . . . . . . .
CHAPTER 10: Add Static, Input, and Dynamic Text . . . . . . . . . . . . . . . . . . . . . . . 77 Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Create an expanding-width text block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Create a fixed-width text block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Edit text and change font attributes. . . . . . . . . . . . . . . . . . . .
CHAPTER 13: Add Interactivity with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . 97 Set up your workspace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Name button instances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Add a scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Move between scenes. . . . . . . . . . . . . . . . . . .
Contents
INTRODUCTION Learning Macromedia Flash MX 2004 Learning Flash overview Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 provide 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 lessons in this book are designed to introduce you to Flash.
Where to start If you are new to Flash, start with the “Getting Started with Flash” chapter in Help (Help > Help > Using Flash > Getting Started with Flash) to help you become familiar with Flash before proceeding to the Flash lessons. To complete the Flash lessons, you can follow the lessons in this book or open the lessons in the How Do I panel in Flash Help (Help > How Do I).
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. • You can select the Help tab to display general help information.
Updating the Help panel The Update feature allows you to update your help system with new and revised documentation, including procedures and lessons. You can click the Update button to see if new information is available. Additionally, if you see a topic in help with the text “For the latest information about this topic, click the Update button at the top of the Help tab,” you can click this button to update Flash Help. To update Flash Help: 1. Verify that you’re connected to the Internet. 2.
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.
Take a tour of the user interface First you’ll open the starting FLA file that you’ll use to complete this lesson. Each lesson includes one start file, and a finished file that demonstrates how the FLA file should appear upon completion of the lessons. 1.
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. The Tools panel, next to the Stage, offers a variety of controls that let you create text and vector art.
• 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. You can add a keyframe to a document when you want the Flash content to change in some way in that frame.
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. • To view the Library panel, select Window > Library. We’ve already imported library items and created symbols for objects that you’ll use in this lesson. Note: Flash also contains a library of buttons that you can use in your document.
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.
7. In the Rewind Video dialog box, select video. 8. 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. Use the Movie Explorer to view the document structure The Movie Explorer helps you arrange, locate, and edit media.
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). Summary Congratulations on creating a Flash document that includes graphics, a video, and video control behaviors.
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.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ On Windows 2000 or XP, browse to boot drive\ Documents and Settings\All Users\Application Data\Macromedia\Flash MX 2004\language\Configuration\ HelpPanel\ HowDoI\ QuickTasks\start_files and double-click accessibility_start.fla.
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. Includes 6 navigation buttons, overview text, and an animated car.
1. On the Stage, click the car, which is the safety_mc movie clip instance. 2. In the Accessibility panel, deselect Make Child Objects Accessible. In the Name text box, enter Trio ZX2004 animation. In the Description text box, enter Animation that includes three views of the Trio ZX2004. Change static text to dynamic text for accessibility Static text is accessible to screen readers.
If you have Flash MX Professional 2004, you can follow this procedure to create a tab order using the Accessibility panel: 1. 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. 2.
Follow this procedure to control the tab order and reading order using ActionScript: 1. In the Timeline, select Frame 1 of the Actions layer. 2. In the Actions panel (Window > Development Panels > Actions), view the ActionScript that creates the tab index for each instance in the document. 3. If you’re using Flash MX 2004, or if you’re using Flash MX Professional 2004 and you did not create the tab index using the Accessibility panel, delete the /* and */ in the script to uncomment the script: _root.
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.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ On Windows 2000 or XP, browse to boot drive\ Documents and Settings\All Users\ Application Data\Macromedia\Flash MX 2004\language\Configuration\ HelpPanel\ HowDoI\ QuickTasks\start_files and double-click scripts_start.fla.
4. 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. 5. With the instance of map_skewed selected on the Stage, type screen_mc in the Instance Name text box of the Property inspector (Window > Properties).
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. 1. Select Frame 1 of the Actions layer. If the Actions panel isn’t open, select Window > Development Panels > Actions.
Later in this lesson, you’ll use Flash features that allow you to test your syntax. Locate ActionScript reference documentation During authoring, if you’d like additional information about the ActionScript that you enter, you can select the action in the Actions toolbox or Script pane and click the Reference button. The Help panel displays information about the selected action. 1. In the Script pane of the Actions panel, double-click visible to select the term.
4. 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. 5. Press Enter or Return and type the following: screen_mc._visible = true; 6. Press Enter or Return and type }; to specify the end of the statement.
//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. 1. 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.
Chapter 3: Write Scripts with ActionScript
CHAPTER 4 Create an Application The application that you’ll create in this lesson lets users view the cost of selecting multiple products. A Calculate button then adds the total cost.
2. 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. 3. 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. You’ll copy the text fields for the Shocks and Cover rows.
1. Select File > Publish Settings. 2. 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. 3. In the Timeline, click the Components layer to select it. 4. From the Components panel (Window > Development Panels > Components), drag the Button component to the Stage and place it over the Calculate guide. 5.
3. 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 qty1_txt.text qty2_txt.text qty3_txt.text values for the quantity text fields = 0; = 0; = 0; Write a function A function is a script that you can use repeatedly to perform a specific task. You can pass parameters to a function, and it can return a value.
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 on() event handler for the Button component that calculates the total price when users click the button. For more information about event handlers, see “Handling Events” in Using ActionScript in Flash. 1. On the Stage, click the Button component and go to the Actions panel.
Test your application You’ll test your application to ensure that it executes as expected. 1. Save your document and select Control > Test Movie. 2. 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. 3. Click the Calculate button to see the total price for all parts. Summary Congratulations on learning how to create an application.
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. For example, you can keep background art on one layer and navigational buttons on another.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ On Windows 2000 or XP, browse to boot drive\Documents and Settings\All Users\ Application Data\Macromedia\Flash MX 2004\language\Configuration\ HelpPanel\ HowDoI\BasicFlash\start_files and double-click layers_start.fla.
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. 1. In the Tools panel, click the Selection tool. 2. On the Stage, select the red car. A pencil icon in the Timeline indicates that the Red Car layer is now the active layer. 3. Select the Text layer in the Timeline.
Add and name a layer You’ll now add a layer, name the layer, and then add a graphic symbol to the layer. 1. In the Timeline, click the Car layer. 2. Click the Insert Layer button below the Timeline. The new layer appears above the Car layer and becomes the active layer. 3. Double-click the layer name, type Background as the new name for the layer, and press Enter (Windows) or Return (Macintosh).
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. 1. On the Stage, with the Selection tool selected, click the rectangular shape below the road. 2.
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.
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.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ On Windows 2000 or XP, browse to boot drive\Documents and Settings\All Users\ Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\ HowDoI\BasicFlash\start_files and double-click layout_tools_start.fla.
5. 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. 6. 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. You’ll change the Stage size to 640 x 480, a common size that supports a wide variety of screen sizes and resolutions. 1.
8. Click Align Left Edge and Align Bottom Edge. The bevel aligns to the bottom edge of the Stage. 9. 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. You’ll specify snap align settings to show horizontal and vertical guides, which will assist you in placing art on the Stage. 1.
5. 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. Align objects using the Align panel Previously, you used the Align panel to match objects to the size of the Stage.
3. From the Library panel, drag the nav graphic to any area of the Stage below the blue banner, and then release the nav graphic. 4. Click the upper left corner of the nav graphic, then drag it so that a circular snap indicator appears. 5. With the snap indicator visible, drag the upper left corner of the nav bar and snap it into place against the lower left corner of the blue banner.
Align objects using the grid and arrow keys You can use the grid to assist you in placing objects on the Stage. 1. 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 > Snapping > Snap to Grid). For this lesson, you won’t snap objects to the grid. 2. On the Stage, select the title text you previously grouped together. 3.
Chapter 6: Create a User Interface with Layout Tools
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.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ On Windows 2000 or XP, browse to boot drive\Documents and Settings\All Users\ Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\ HowDoI\BasicFlash\start_files and double-click drawing_start.fla.
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. 1. In the Property inspector, with the PolyStar tool still selected, click Options. 2. In the Tools Setting dialog box, verify that Polygon appears in the Style pop-up menu, and enter 6 in the Number of Sides text box. Click OK.
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. 1. Select View > Snapping and select Snap to Objects if it’s not already selected. 2. In the Tools panel, click the Oval tool.
Copy strokes You can select and copy strokes, which you’ll do now to create the lower edge of the bolt. 1. With the Selection tool, click anywhere on the Stage or work area, away from an object, to deselect the shape. 2. 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: 3.
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. 1. With the Selection tool, drag around the shape to select both the stroke and the fill. Select Modify > Group. 2. Click the fill area and move the shape around the left side of the Stage, as desired, to place it.
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 Transform artwork Copy strokes Draw lines with the Line tool Select and add a fill color Group a shape Create a logo with the Pen tool To learn more about creating art in Flash, see “Drawing” in Using Flash.
Chapter 7: Draw in Flash
CHAPTER 8 Create Symbols and Instances A symbol is a reusable object, and an instance is an occurrence of a symbol on the Stage. Repeated use of instances does not increase the file size and is a good part of a strategy for keeping a document file size small. Symbols also simplify editing a document; when you edit a symbol, all instances of the symbol update to reflect the edits. Another benefit of symbols is that they allow you to create sophisticated interactivity.
2. 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. 3. 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: • Graphic • Movie clip • Button In this lesson, you’ll work with graphic and movie clip symbols.
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. If you edit the symbol later, the instance retains its modified properties in addition to acquiring the symbol edits.
3. Drag the middle-right sizing handle of the Free Transform tool slightly to the right, to stretch the symbol. 4. 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. This symbol type has its own Timeline independent of the main Timeline. You can add movie clips within other movie clips and buttons to create nested movie clips.
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. 1. With the Selection tool, double-click the wheel_mc instance to enter symbol-editing mode. 2. Right-click (Windows) or Control-click (Macintosh) the symbol and select Timeline Effects > Transform/Transition > Transform. 3.
Chapter 8: Create Symbols and Instances
CHAPTER 9 Add Animation and Navigation to Buttons A button is a symbol that contains special frames for different button states, such as when the user’s mouse pointer is over the button or when the user clicks the button. 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.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ On Windows 2000 or XP, browse to boot drive\Documents and Settings\All Users\ Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\ HowDoI\BasicFlash\start_files and double-click buttons_start.fla.
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). In the Instance Name text box, type logo_btn.
3. Select the Hit frame (Frame 4) of the Hit Area layer in the BTNLogo Timeline, and press F6 to add a keyframe. 4. 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. 5. Click Scene 1, above the upper left side of the Stage, to exit symbol-editing mode for the button. 6. Select Control > Enable Simple Buttons. 7.
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. 1. On the Stage, double-click Button 1 to open it in symbol-editing mode. 2. In the Button 1 Timeline, hide all layers except the Color layer. In the Color layer, select the Over keyframe.
8. On the Stage, move the pointer over the button and click the button. 9. Select Control > Enable Simple Buttons to deselect that feature. Add navigation to a button With behaviors, you can quickly add navigation to a button without having to know ActionScript. You’ll add navigation to open a web page when the user clicks a button. 1. On the Stage, select the instance of Button 1. 2.
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 Align buttons Create animation for a button state Add an action to a button Add navigation to a button To learn more about Flash, take another lesson.
Chapter 9: Add Animation and Navigation to Buttons
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. You can also use input text options to allow viewers to interact with your Flash application—for example, to enter their name or other information in a form.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ On Windows 2000 or XP, browse to boot drive\Documents and Settings\All Users\ Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\ HowDoI\BasicFlash\start_files and double-click text_start.fla.
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. 1. Click in a blank area in the workspace to make sure no Timeline frames or objects on the Stage are selected. 2. In the Tools panel, select the Text tool. 3. In the text Property inspector, set the following options: ■ In the Text Type pop-up menu, select Static text, if it isn’t already selected.
4. 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. 5. 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. Additionally, you can double-click a square handle to convert it into a round expanding handle. 6.
Add an input text field You can use an input text field to allow viewers an opportunity to interact with your Flash application. For example, input text fields offer an easy way to create forms. In a later lesson (select Help > How Do I > Basic ActionScript > Create a Form with Conditional Logic and Send Data), you’ll learn how to use an input text field to send data from Flash to a server. Now, you’ll add a text field where viewers will enter their first name. 1.
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. 1. Select the input text field that you placed next to First Name. In the Property inspector, enter firstName_txt in the Instance Name text box. 2.
Specify format options The Format Options dialog box allows you to specify margin and indentation settings for the text. 1. With the dynamic text field still selected on the Stage, click Format in the Property inspector. 2. 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.
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. 1. Select Text > Spelling Setup. 2. Verify that Check Text Fields Content is selected, and that you’ve selected the appropriate dictionary. Select any other options, as desired.
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.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ On Windows 2000 or XP, browse to boot drive\Documents and Settings\All Users\ Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\ HowDoI\BasicFlash\start_files and double-click animation_start.fla.
3. Use the Selection tool to reposition the tire, if necessary. 4. With the Selection tool still selected, in the TireAnim layer, select Frame 30. Then press F6 to insert a keyframe. 5. Select Frame 15 and press F6 to add another keyframe. 6. With the playhead still on Frame 15, hold the Shift key to move the tire in a straight line, and drag the tire up. 7. In the TireAnim layer, select any frame between Frames 2 and 14. In the Property inspector, select Motion from the Tween pop-up menu.
3. With the playhead on Frame 15, select the Selection tool. Drag the tire shadow slightly up and to the right. 4. With Frame 15 still selected, select the Eyedropper tool in the Tools panel, and then click the shadow object. 5. 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%. 6. Click the options menu control in the upper right of the Color Mixer, and select Close Panel to close the panel. 7.
4. 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. 5. 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. To view the positioning, drag the playhead over Frames 1 and 2. 6. Save your 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. You’ll now add both positive and negative easing values to your animation. 1.
CHAPTER 12 Create a Presentation with Screens (Flash Professional Only) Flash MX Professional 2004 offers a new way, with slide screens, to create presentations. If you can imagine placing media on slide screens, adding nested slides that inherit media from other slides, and using the built-in controls to navigate through the slides at runtime, then you’ve imagined exactly how easy it is to create a presentation with slide screens.
The document opens in the Flash authoring environment. 2. 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. 3. Select Window > Panel Sets > Training Layout to configure your workspace.
View screen properties You can view different properties for a slide, depending on where you select the slide. 1. 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. 2. Select the actual presentation slide, not the thumbnail. The Property inspector now displays the same controls you’re probably used to when working with the Stage and document properties.
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. 1. On the presentation slide, select the forwardBtn instance.
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. 1. In the Screen Outline pane, select the performance slide. Press Shift and click the safety and handling slides to add them to the selection. 2. Right-click (Windows) or Control-click (Macintosh) the selected slides and select Cut from the context menu. 3.
4. 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. 5. In the Transitions dialog box, select Fly from the list of transitions, and select Out as the direction. 6. In the Duration text box, enter .5 as the length of time to complete the transition. 7. In the Start Location pop-up menu, select Left Center and watch the transition preview, then click OK.
CHAPTER 13 Add Interactivity with ActionScript Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 offer numerous ways to engage users with interactivity. Additionally, when you incorporate interactivity, you’re not limited to playing each Timeline frame sequentially, which offers greater design and development options.
Set up your workspace First, you’ll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: ■ On Windows 2000 or XP, browse to boot drive\Documents and Settings\All Users\ Application Data\Macromedia\Flash MX 2004\language\Configuration\HelpPanel\ HowDoI\BasicActionScript\start_files and double-click interactivity_start.fla.
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. 1. On the lower right side of the Stage, select the button at the left. In the Property inspector (Window > Properties), type goScene_btn in the Instance Name text box to name the instance of the symbol. 2. Select the middle button and use the Property inspector to give the button an instance name of attachMovie_btn. 3.
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. 1. In the main Timeline for Scene 1, add a new layer and name it Actions. 2. Click Frame 1 of the Actions layer.
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 attachMovie() method, you must export the symbol for ActionScript and assign it a unique linkage identifier, which is different from the instance name. 1. In the Library panel, right-click the MCTrio symbol and select Linkage from the context menu. 2.
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. The DepthManager class allows you to manage the relative depth assignments of a movie clip.
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. 1. In the Library panel, right-click (Windows) or Control-click (Macintosh) ping.mp3 and select Linkage from the context menu. 2. In the Linkage Properties dialog box, select Export for ActionScript and verify that Export in First Frame is selected. 3. Verify that ping.
Chapter 13: Add Interactivity with ActionScript
CHAPTER 14 Create a Form with Conditional Logic and Send Data You can create a form with conditional logic that allows the SWF file to respond in different ways, depending on user interaction, and send the form data from the SWF file to an external source.
Note: The BasicActionScript\finished_files folder contains completed versions of lesson FLA files, for your reference. 2. Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file. 3. Select Window > Panel Sets > Training Layout to modify your workspace for taking lessons. 4. If necessary, drag the lower edge of the Timeline (Window > Timeline) down to enlarge the Timeline view.
Add a Submit button to the form The Library panel contains a Submit button symbol that you will add to the form. 1. From the Library panel (Window > Library), drag the Submit button to the Stage and place it over the SubmitURL guide. 2. Drag the button or use the arrows keys to adjust the position, if necessary. 3. In the Property inspector, type submit_btn in the Instance Name text box. Add an error message You’ll add a message to display if the user clicks the Submit button before entering data. 1.
Add a confirmation message Next, you’ll add a message to display when the user submits an entry in the text field. 1. 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. 2. From the Library panel, drag the Dialog Box-confirm movie clip to the center of the Stage. 3. Close the Library panel.
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. Next, you’ll add frame labels to help you navigate your Flash application. 1. Add a keyframe (Insert > Timeline > Keyframe) to Frame 5 of the Actions layer. 2.
11. Type gotoAndStop("confirm") in the Script pane. Press Enter or Return, and type }, then 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.
3. Type tryAgain_btn.onRelease = function(){, then press Enter or Return. 4. Type gotoAndStop(1);, then press Enter or Return and type } to complete the script. Test your SWF file You’ll test your document by entering a URL and checking whether it works as expected. 1. Select Control > Test Movie. 2. When the SWF file appears, click the Submit button before typing anything in the input text field. The error message appears. 3.
Chapter 14: Create a Form with Conditional Logic and Send Data
CHAPTER 15 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 getURL, and getURL is defined in the class definition for a movie clip. Flash contains many predefined classes, such as the MovieClip class, the Array class, the Color class, and the CheckBox class.
■ On Macintosh, browse to Macintosh HD/Users/Shared/Application Support/Macromedia/ Flash MX 2004/language/Configuration/HelpPanel/HowDoI/BasicActionScript/ finished_files. 2. 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. An object is an instance of a class.
Modify your script You’ll modify your script to compensate for the zero indexing. 1. Add +1 to the value when you create currentMonth, and test your document to be sure the expected month number appears. That line of script should read as follows: var currentMonth:Number = myDate.getMonth()+1; 2. Comment the trace statement: //trace (currentMonth); 3. Below the trace statement, set the autoSize property of your text box to true: currentDate_txt.autoSize = true; 4.
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. class Product { //variable declaration var id:Number var productName:String var price:Number //constructor function Product (id:Number, prodName:Name, price:Number) { this.id = id; this.
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. 1. 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). Save the document with the name Product. If you’re using Flash MX 2004, open a text editor, such as Notepad. Save the file with the name Product.as.
} 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; } } 6. Save your file. Note: An example finished file of the file you just created, named Product.
3. 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"); 4. Trace the description property of pedals: trace (pedals.getDescription ()); 5. 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.
Extend the MovieClip class to create a new class You’ll create a new class by extending the built-in MovieClip class. 1. Create a new Flash document and name it Shape.fla. 2. 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. 3. In the Convert to Symbol dialog box, select Movie Clip as the behavior, and click Advanced. Select Export for ActionScript. 4.
9. Define private methods in the class that use the existing movie clip methods, startDrag() and stopDrag(): class Drag extends MovieClip { function Drag() { onPress=doDrag; onRelease=doDrop; } private function doDrag():Void { this.startDrag(); } private function doDrop():Void { this.stopDrag() } } 10. Save the ActionScript file. 11. 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.
Chapter 15: Work with Objects and Classes Using ActionScript 2.
