manualshive.com logo in svg

MACROMEDIA FLASH MX 2004-LEARNING FLASH, Руководство пользователя

Поделиться
Скачать
MACROMEDIA FLASH MX 2004-LEARNING FLASH Скачать руководство пользователя страница 97

97

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. You’ll learn some of the ways to implement interactivity in this lesson 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 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 > How Do I > Basic Flash > Create a Presentation with Screens 
(Flash Professional Only).

Содержание FLASH MX 2004-LEARNING FLASH

Страница 1: ...Learning Flash...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 8: ...8 Contents...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 34: ...34 Chapter 3 Write Scripts with ActionScript...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 54: ...54 Chapter 6 Create a User Interface with Layout Tools...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 62: ...62 Chapter 7 Draw in Flash...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 68: ...68 Chapter 8 Create Symbols and Instances...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 76: ...76 Chapter 9 Add Animation and Navigation to Buttons...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 104: ...104 Chapter 13 Add Interactivity with ActionScript...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 112: ...112 Chapter 14 Create a Form with Conditional Logic and Send Data...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 122: ...122 Chapter 15 Work with Objects and Classes Using ActionScript 2 0...

Отзывы:

Нет отзывов

Бренды по названию

Популярные бренды

Загрузить еще бренды