MACROMEDIA FLASH MX 2004-LEARNING FLASH, Manual

Page 1: ...Learning Flash...

Page 2: ...his guide then you do so at your own risk Macromedia provides these links only as a convenience and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for...

Page 3: ...ors 18 Use the Movie Explorer to view the document structure 19 Test the document 19 Find help 20 Summary 20 CHAPTER 2 Create Accessible Flash Content 21 Set up your workspace 22 Specify that your doc...

Page 4: ...and values for the prices 37 Specify values for input text fields 37 Write a function 38 Write an event handler for the component 39 Test your application 40 Summary 40 CHAPTER 5 Work with Layers 41...

Page 5: ...61 CHAPTER 8 Create Symbols and Instances 63 Set up your workspace 63 About creating symbols 64 Create a graphic symbol 64 Duplicate and modify an instance of a symbol 65 Modify a symbol 65 Create a m...

Page 6: ...g 84 Summary 84 CHAPTER 11 Create a Timeline Animation 85 Set up your workspace 86 Create a motion tween 86 Create a shape tween 87 Copy and paste keyframes in an animation 88 Change the speed of the...

Page 7: ...o collect form data 106 Add a Submit button to the form 107 Add an error message 107 Add a confirmation message 108 Add a stop action 108 Add frame labels for navigation 109 Add conditional logic for...

Page 8: ...8 Contents...

Page 9: ...to teach you the fundamentals of Flash We recommend that you go through the lessons using the sample files provided The path to the sample file is provided in each lesson By completing these hands on...

Page 10: ...Flash contains a variety of media to help you learn the program quickly and become proficient in creating your own Flash applications About the electronic manuals and lessons The following electronic...

Page 11: ...en it and display its topics 4 Click a topic to select it The How Do I tab contains brief lessons that introduce you to the main features of Flash letting you practice on isolated examples If you are...

Page 12: ...date 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...

Page 13: ...ronment as you accomplish the following tasks Tour the user interface Dock and undock panels Change the background and Stage size Change your view of the Stage View your document library Add graphics...

Page 14: ...lesson FLA files for your reference The document opens in the Flash authoring environment The document already includes two layers in the Timeline To learn more about layers select Help How Do I Basic...

Page 15: ...of changes to your document You ll undo the artwork that you just created 1 To see the undo feature in action first open the History panel Window Other Panels History The Pencil tool appears in the pa...

Page 16: ...rea that surrounds the Stage or on the background area of the Stage so that no objects are selected The Property inspector below the Stage displays properties for the document when no objects are sele...

Page 17: ...panel to the Stage and align it over the Title guide In Flash you can work with both bitmap images which describe graphics using pixels and vector art which uses mathematical representation to descri...

Page 18: ...is a good practice to name instances To learn more about naming instances select Help How Do I Quick Tasks Write Scripts with ActionScript Add video control behaviors Behaviors let you add complex fu...

Page 19: ...buttons along the top of the Movie Explorer so the only ones selected are Show Buttons Movie Clips and Graphics Show Action Scripts and Show Video Sounds and Bitmaps If you move your mouse pointer ov...

Page 20: ...Congratulations on creating a Flash document that includes graphics a video and video control behaviors In a few minutes you learned how to accomplish the following Tour the user interface Dock and u...

Page 21: ...gies as you accomplish the following tasks Specify that your document be accessible to screen readers Provide a document title and description Provide a title and description for document instances Sp...

Page 22: ...click accessibility_start fla 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...

Page 23: ...box because the button includes a text label that the screen reader will read If you did not want the screen reader to read the text in the button you could deselect Auto Label when you set up access...

Page 24: ...cify a tab order and reading order which you ll do next you must provide an instance name for all instances The instance name must be unique in your document Control the tab order and reading order Yo...

Page 25: ...lowing table If you have Flash MX Professional 2004 follow this procedure to view a tab order Select View Show Tab Order The tab index number that you entered appears next to the instance on the Stage...

Page 26: ...create it to ensure it performs as expected Frequent testing is even more important when you design a document to work with assistive technologies such as screen readers In addition to testing tab ord...

Page 27: ...and create more compact and efficient applications than you could create using user interface tools all with code that you can reuse ActionScript is an object oriented scripting language that offers c...

Page 28: ...der 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 Windo...

Page 29: ...nstance a suffix of _mc as in screen_mc When naming a button use the _btn suffix When naming a text field use the _txt suffix Note For more information about additional instance name suffixes that pro...

Page 30: ...see Using absolute and relative target paths in Using Flash 4 Click in the Script pane at the end of the screen_mc text and type a period 5 When you type the period code hints appear for the movie cli...

Page 31: ...s of your script when debugging As a best practice always add comments that explain your scripts In the Script pane of the Actions panel place the insertion point at the beginning of the line of code...

Page 32: ...clip by setting the movie clip _visible property to false when the user clicks an Off button You ll create that function now 1 In the Script pane select the entire function that you just typed includi...

Page 33: ...ax errors save the document and select Control Test Movie When the SWF file appears the animation should not appear in the Global Positioning System screen because its initial visible property is set...

Page 34: ...34 Chapter 3 Write Scripts with ActionScript...

Page 35: ...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 QuickTa...

Page 36: ...er price area Name text fields Before you can specify values for the text fields in ActionScript you first need to give each text field an instance name in the Property inspector By appending the inst...

Page 37: ...Actions 2 In the Script pane type declare variables and values for car part prices The parallel slashes indicate that the text that follows is a comment As a best practice always add comments that off...

Page 38: ...mes price 2 Press Enter or Return and type the following to create a function that runs when the playhead enters Frame 1 where you re attaching the script this onEnterFrame function 3 Type the followi...

Page 39: ...mponent that you placed on the Stage on click You just typed the start of the on event handler The click specifies that the event should occur when the user clicks the Calculate button A Button compon...

Page 40: ...the Calculate button to see the total price for all parts Summary Congratulations on learning how to create an application In a few minutes you learned how to complete the following tasks Copy input...

Page 41: ...ssist you in organizing content in your document For example you can keep background art on one layer and navigational buttons on another Additionally you can create and edit objects on one layer with...

Page 42: ...guration 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...

Page 43: ...y or hiding layers individually 1 Click the eye icon above the layers so that a red X appears in the Eye column All content disappears from the Stage 2 One by one click each red X in the column and wa...

Page 44: ...1 In the Timeline drag the Background layer from the top position to the bottom position All objects on the Stage now appear on top of the background 2 With the Background layer still selected in the...

Page 45: ...ing the mask effect close the SWF file window to return to your document Add a guide layer So far you ve learned about regular layers and mask layers The third type of layer is a guide layer You use g...

Page 46: ...elete 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 Select a layer Hide and show layers Lock...

Page 47: ...e workspace rulers Use guides to align objects Change the Stage size Resize objects to match the Stage size Align an object using the alignment guides Align objects using the Align panel Snap objects...

Page 48: ...Panel HowDoI BasicFlash start_files and double click layout_tools_start fla Note The BasicFlash finished_files folder contains completed versions of lesson FLA files for your reference 2 Select File S...

Page 49: ...objects on the Stage remain the same size Resize objects to match the Stage size When you changed the Stage size art on the Stage extended off the Stage and into the work area You can easily resize th...

Page 50: ...30 pixel Stage border 4 Verify that 10 pixels appears in both the Horizontal and Vertical Snap Tolerance text boxes Snap tolerance determines how close an object must be to another object or alignmen...

Page 51: ...of title text 2004 Trio QZ to add it to the selection 3 In the Align panel Window Design Panels Align deselect To Stage and select Align Horizontal Center You ve centered the two rows in relation to t...

Page 52: ...ects on the x and y Stage axes from the registration point of the Stage object The registration point is the point from which a symbol aligns or rotates You ll use the Property inspector to align the...

Page 53: ...n the title text is on a horizontal grid line Be sure to leave space between the title text and the navigation bar Note You can also use the Left Arrow Down Arrow and Right Arrow keys to nudge objects...

Page 54: ...54 Chapter 6 Create a User Interface with Layout Tools...

Page 55: ...r display it at any resolution without losing clarity Additionally vector art downloads faster than comparable bitmap images In this lesson you ll create vector art of a bolt and logo as you accomplis...

Page 56: ...er contains completed versions of lesson FLA files for your reference Flash opens in the authoring environment 2 Select File Save As and save the document with a new name in the same folder to preserv...

Page 57: ...shape along a vertical or horizontal line Press Shift and drag the mouse over the left side of the Stage away from the numbers on the Guides layer to draw a hexagon as shown in the following illustra...

Page 58: ...10 00 corner point dragging to the 4 00 corner point as in the following illustration Note If you make an error drawing the circle press Control Z Windows or Command Z Macintosh to undo your circle 3...

Page 59: ...ith the Line tool The Line tool allows you to draw straight lines in any direction In the Tools panel select the Line tool On the Stage draw four vertical lines from the hexagon to the stroke copies t...

Page 60: ...o the number 1 and then click the dot next to the number 2 to create a straight line segment 3 Click the dot next to the number 3 and next to the number 4 in sequence as though you were completing a d...

Page 61: ...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 col...

Page 62: ...62 Chapter 7 Draw in Flash...

Page 63: ...ptimal 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 Da...

Page 64: ...efer to them in ActionScript You ll take vector art on the Stage and turn it into a graphic symbol 1 In the Tools panel click the Selection tool 2 On the Stage drag around the car to select it 3 Selec...

Page 65: ...In the RGB area enter 0 in the Red Color pop up menu 0 in the Green Color pop up menu and 255 in the Blue Color pop up menu Then press Enter or Return The duplicate instance turns blue but the origin...

Page 66: ...ript You ll convert the tire on the Stage into a movie clip 1 With the Selection tool click the tire on the Stage to select it and select Modify Convert to Symbol 2 In the Convert to Symbol dialog box...

Page 67: ...the Effect Duration text box to specify that the effect span 60 frames in the Timeline 4 In the Spin text box enter 1 and verify that 360 populates the Rotate text box 5 Click Update Preview to view...

Page 68: ...68 Chapter 8 Create Symbols and Instances...

Page 69: ...to buttons by using behaviors or by writing ActionScript In this lesson you ll learn about creating and modifying buttons including adding animation to a button Specifically you ll learn how to compl...

Page 70: ...start fla Note The BasicFlash 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...

Page 71: ...Simple Buttons and then move the mouse pointer over different areas of the button that you created The only areas of the button that are clickable as indicated when the pointer changes to a hand are t...

Page 72: ...ck the layer name type Animated Buttons as the new name for the layer and press Enter or Return 4 In the Library panel Window Library select Button 1 and drag it to the lower right edge of the Stage P...

Page 73: ...me between Frames 1 and 15 In the Property inspector select Shape from the Tween pop up menu Drag the playhead from Frames 1 to 15 to see the color change Add an action to a button When the user click...

Page 74: ...In the URL text box either accept the default setting of http www macromedia com or enter a different URL Then click OK 4 If desired repeat the steps above selecting Button 2 then Button 3 to add navi...

Page 75: ...omplish 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...

Page 76: ...76 Chapter 9 Add Animation and Navigation to Buttons...

Page 77: ...use dynamic text fields to display text that changes based on criteria you specify For example you might use a dynamic text field to add values stored in other text fields such as the sum of two numb...

Page 78: ...ng system browse to boot drive Documents and Settings username Local Settings Application Data Macromedia Flash MX 2004 language Configuration HelpPanel HowDoI BasicFlash start_files and double click...

Page 79: ...rio ZX2004 Safety Features By typing with the Text tool selected you create a one line text block that expands as you type An expanding width one line static text block has a round handle in the upper...

Page 80: ...t on the Stage that reads Submit your contact information 2 Select the letter S then type Please s so that the text now reads Please submit your contact information 3 In the Tools panel click the Sele...

Page 81: ...ders 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...

Page 82: ...a dynamic text field that links to an external text file The external text file you ll use is named safetyFeatures txt It is in the same folder as the lesson FLA file The FLA file already contains Act...

Page 83: ...tions layer 2 Select Window Development Panels Actions or press F9 The ActionScript appears as follows Load text as variable and assign it to dynamic text field Features_lv new LoadVars Features_lv on...

Page 84: ...er presents When you finish checking spelling save your document Note To check spelling in text in external files use the spell check feature associated with the application that you used to create th...

Page 85: ...ges into the graphic displayed in the second keyframe There are two types of tweening you can create in Flash a motion tween and a shape tween The main difference between motion tweening and shape twe...

Page 86: ...mpleted 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 Tr...

Page 87: ...pears in the Timeline between the two keyframes 8 Select any frame between frames 16 and 29 Again use the Tween pop up menu in the Property inspector to select Motion 9 Select File Save to save your c...

Page 88: ...In the Property inspector select Shape from the Tween pop up menu 8 On the ShadowAnim layer select any frame between Frames 16 and 29 Again use the Tween pop up menu in the Property inspector to selec...

Page 89: ...trol click Macintosh and select Paste Frames from the context menu 10 Select Control Test Movie to view the animation 11 Close the SWF file window to return to the authoring environment Change the spe...

Page 90: ...the ShadowAnim layer select any frame between Frames 2 and 14 Then in the Ease text box type 100 Press Enter or Return 4 In the same layer select any frame between Frames 16 and 29 Then in the Ease te...

Page 91: ...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 Set...

Page 92: ...w Screens The Screen Outline pane displays a thumbnail view of each slide in the presentation and the presentation hierarchy When you select a screen in the Screen Outline pane the screen appears in t...

Page 93: ...t Frame 1 of the Navigation layer 2 From the Library panel drag the btn next symbol to the screen placing it within the black band at the bottom of the screen 3 In the Property inspector with the butt...

Page 94: ...2 On the presentation slide select the backBtn instance In the Behaviors panel Window Development Panels Behaviors click the Add button and then select Screen Go to Previous Slide from the menu 3 Sel...

Page 95: ...e three children slides 1 In the Screen Outline pane select the features thumbnail From the Library panel drag the Features Content symbol to anywhere in the Document window 2 In the Property inspecto...

Page 96: ...ever you want to hide the child screen 8 In the Behaviors panel click the second event in the list which is the one you just added In the pop up menu select hideChild Test your presentation Your prese...

Page 97: ...sson as you accomplish the following tasks Create a new scene Write ActionScript to navigate between scenes Write ActionScript to play an animated movie clip at runtime Use a behavior to play an MP3 f...

Page 98: ...system browse to boot drive Documents and Settings username Local Settings Application Data Macromedia Flash MX 2004 language Configuration HelpPanel HowDoI BasicActionScript start_files and double c...

Page 99: ...nt to a new scene 1 Select Insert Scene You can no longer see Scene 1 and Scene 2 now appears above the Stage The Stage is empty 2 From the Library panel Window Library drag the Animation movie clip t...

Page 100: ...rite the function that takes users to Scene 2 upon release of the goScene_btn instance This script takes the user to Scene 2 when goScene_btn is released goScene_btn onRelease function gotoAndStop Sce...

Page 101: ...symbol does not exist on the Stage you ll create the instance name programmatically 1 In the Timeline select Frame 1 of the Actions layer for Scene 1 2 In the Script pane of the Actions panel place t...

Page 102: ...can modify your script for the goScene_btn to unload the movie clip 1 In the Timeline select Frame 1 of the Actions layer Then click at the end of the following line of script in the Script pane withi...

Page 103: ...ound from Library 6 In the linkage ID text box enter ping mp3 and in the Name text box below enter ping Then click OK Test your document Test your document to verify that the interactivity works as ex...

Page 104: ...104 Chapter 13 Add Interactivity with ActionScript...

Page 105: ...u 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 20...

Page 106: ...sh application 1 Click in the work area away from objects on the Stage so that no objects are selected 2 In the Tools panel select the Text tool 3 In the Property inspector do the following to set tex...

Page 107: ...ubmit button before entering data 1 In the Timeline with the Branding layer selected click the Insert Layer button and name the layer Dialog Boxes 2 Select Frame 5 of the Dialog Boxes layer Right clic...

Page 108: ...top action When a Flash application loads in Flash Player it automatically plays in a continuous loop You use ActionScript to control playhead movement in a Timeline You will add a stop action in the...

Page 109: ...for Flash to take one action if the user enters no data in the text field and a different action if the user does 1 Select Frame 1 of the Actions layer In the Script pane place the insertion point aft...

Page 110: ...dStop confirm 2 Then in the Actions toolbox select Global Functions Browser Network and double click getURL 3 With the insertion point within the getURL parentheses type http url_txt text to specify t...

Page 111: ...field The error message appears 3 Click the Try Again button and then type the URL of a valid website in the input text field Click the Submit button Your default browser opens the web page Summary C...

Page 112: ...112 Chapter 14 Create a Form with Conditional Logic and Send Data...

Page 113: ...lesson is designed for Flash developers who are familiar with basic Flash and ActionScript concepts Set up your workspace First you ll view the finished files and set up your workspace to use an optim...

Page 114: ...ical throw method on a ball would know the size and weight of the ball A method is aware of the object and all the properties that it contains and can work on that object Creating an object from a cla...

Page 115: ...ace currentMonth currentDate_txt autoSize true currentDate_txt text Today is currentMonth myDate getDate myDate getFullYear 6 Save and test the document The current date should appear in the SWF file...

Page 116: ...Product 1 Clipless Pedal 11 var monkeyBar Product new Product 2 Monkey Bar 10 However in ActionScript 2 0 variables that are part of a class structure should not be accessed directly You should write...

Page 117: ...ring description String 3 In the constructor function set the properties of the Product class equal to the setter methods that you will create setID id setProdName prodName setDescription description...

Page 118: ...Product as is located in your finished files folder For the path see Set up your workspace on page 113 Create two objects from the Product class You ll create a new FLA file then create two objects fr...

Page 119: ...e methods and properties of an existing class in a new class For example if you wanted to define a class that inherited everything from the MovieClip class you could use the following class Drag exten...

Page 120: ...p with the Drag class that you ll create 6 Using the Property inspector assign the movie clip an instance name Then save the FLA file Note An example finished file of the document you just created nam...

Page 121: ...le 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 For the path see Set up your workspace on page 113 Summary Co...

Page 122: ...122 Chapter 15 Work with Objects and Classes Using ActionScript 2 0...