FLASH 5 PART II USER MANUAL
Contents
1. EXERCISE 8 MAKE THE VALUE OF A VARIABLE VISIBLE Steps Create a new file Name the layer Layout Select the keyframe in the layout layer In the Toolbox select the text tool and draw a text field on the stage Access the Text Options panel Window gt Panels gt Text Options From the Text Type Panel Menu choose Input Text Check border background Change the default value of the Variable associated with the text field from TextField1 to userName Without the quotes Case Sensitive Input Text Y Single Line L HTML War iable x Border Bg p ax Embed fonts Chars o ta 42 22 a Type in enterNameHere into the text field Test the Movie Control gt Test Movie While the file is playing Type in another name in the user editable input text field EXERCISE 9 MORE WITH VARIABLES Initializing another variable for a greeting message Steps Create a new layer and name it button Select the keyframe in the button layer and then Drag a pre made button from the Library Windows gt Common Libraries gt Buttons and then put the Play button from circle Button set on the stage Create a new layer and name it scripts Select the first keyframe in the script layer on this root Timeline and open the Actions Panel Choose Actions gt Set Variable In the Variable field of the Actions panel enter the name of your variable which we will call greetingMessage In the Value2. clip instances Q EnterFrame QO Mouse up Oo Unload QO Mouse move Q Data File name Flash5_II_User pmd Copyright Arizona Board of Regents 2002 Last modified 04 22 02 University of Arizona FLASH 5 PART II User Manual Close the Object Actions Panel Select the Controls Layer in the main timeline and drag an instance of simpleButton from the Library to it Open the Actions Panel and with the plus button choose Actions gt Evaluate In the Parameters area click the Insert Target Path button Select Relative mode and choose the movie clip instance clockOne from the display list The target path appears in the Target field Click OK The target path appears in the Expression field Insert Target Path ER this Me clockOne Notation Dots Mode Relative Slashes Absolute In the Expression field after the Target Path enter a dot then the desired method with any applicable arguments In this case type this clockOne play without the quotes Test your movie The button should get the clockOne instance to play Your button instance controls the Timeline of the targeted movie clip Save the movie as clock4 fla EXERCISE 6G DRAGGING A MOVIE CLIP Steps In the file you just made file select the instance of the movie clip symbol clockOne on the stage Open its timeline Create an invisible button Do this by Insert gt New Symbol name it invisible button and then lea
3. simple Flash file that uses a variable associated with a text field and uses one button to control another MC or is draggable Copyright Arizona Board of Regents 2002 File name Flash5_II_User pmd University of Arizona Last modified 04 22 02
4. stop the timeline that it is placed in from playing Note that you can only stop it Save this Movie as clockv2 fla Edit the actions using the parameter pane settings of the Object Actions Palette Steps Select the button in the mc Clock button Movie Clip and click the arrow for the Actions Palette in the lower right of the stage area Select the release condition in the script Change the event to press rather than release o Object Actions Movie Explorer A Object Actions Object Actions Basic Actions on press 3 Actions break Line 1 on press Event x Press O Roll over oO Release oO Roll Out oO Release Outside oO Drag Over LI key Press LI Drag Out Select the last and drag the play command over to it Test the movie and the button behavior It should pause when you hold the mouse down and play when you let up Save the movie as clock3 fla File name Flash5_II_User pmd Copyright Arizona Board of Regents 2002 Last modified 04 22 02 University of Arizona FLASH 5 PART II User Manual EXERCISE 4 NAMING A MOVIE CLIP INSTANCE Instantiation of a movie clip symbol involves two steps placing an instance on the Stage and naming that instance Steps Create a new layer and name it layout2 Drag an instance of the movie clip symbol mc Clock from the Library onto the Stage into the layout2 layer Create a new layer and name
5. that specific instance names can be based on later Symbol Properties Name gClockFace Behavior Q Movie Clip Button Graphic Draw a perfect circle shape Hold down the shift key as you draw as you are in Edit Symbol mode Check the Address bar Give it a light color with a dark border Center it over the registration point Use the Info and Transform Panels to make the size appx 72 pixels x 72 pixels and center it 0 0 at the registration cross Notice it appears in the Library Create a clock hand graphic Steps Click Scene 1 in the Address bar to exit Edit Symbol mode Insert gt New Symbol Choose Graphic as behavior and name it gClockHand Draw a vertical box with the Rectangle tool Solid black fill Stroke of 1 Make its width appx 3 pixels and a length of appx 35 pixels and have the bottom of it touching the registration cross at 0 0 Exit Edit Symbol Mode Notice it appears in the Library X 281 0 y 109 0 File name Flash5_II_User pmd Copyright Arizona Board of Regents 2002 Last modified 04 22 02 University of Arizona FLASH 5 PART II User Manual Create Movie Clip mc Clock Tween The mc will identify it in the Library and allow us to sort by type of symbol later Steps Insert gt New Symbol Choose Movie Clip as the behavior and name it mc Clock Create new layers and name them in this order Actions Hand Face Drag gC
6. 9 Test your movie When you press your mouse button over the movie clip you can drag it around 10 Re open the script and add a stopDrag action to the script 11 Save the movie as clock5 fla You could also have set drag parameters for the object if it was to be part of a slider widget EXERCISE 7 NEW onClipEvent METHOD Steps Create a movie clip or use the previously created movie tutorial fla file Select it on the stage Open the Actions Panel Choose Expert Mode then write or paste this script into the actionscript window for the mc clock instance Note the optional comments preceded by marks this script checks to see if the mouse is over the object land then sets its property to draggable if the cursor is also over it onClipEvent mouseDown if this hitTest _root _xmouse _root _ymouse true startDrag this The underscore as in underscore is how Flash distinguishes built in properties and variables in actionscript Since the onClipEvent mouseDown will respond to a mousedown anywhere on the stage we must pre qualify the startDrag with a conditional statement is the cursor over the instance before executing the startDrag do statement So we have the if this hitTest _root _xmouse _root _ymouse true conditional File name Flash5 Il User pmd Copyright Arizona Board of Regents 2002 Last modified 04 22 02 University of Arizona FLASH 5 PART Il User Manual
7. Multimedia Module FLASH 5 PART I USER MANUAL For information and permission to use these training modules please contact Limell Lawson limell u arizona edu 520 621 6576 or Joe Brabant jbrabant u arizona edu 520 621 9490 Modules available online at http mll arizona edu workshops shtml Flash5_ l_User pmd Last modified 04 22 02 FLASH 5 PART Il User Manual TABLE OF CONTENTS Exercise 1 Creating the Clock fla Flash File Exercise 2 ActionScript to Loop to the First Frame of mc clock Exercise 3 Scripting and Action for a New Button Symbol Exercise 4 Naming a Movie Clip Instance Exercise 5 Controlling a Movie Clip Instance Exercise 6 Dragging a Movie Clip Exercise 7 New onClipEvent Method Exercise 8 Make the Value of a Variable Visible Exercise 9 More With Variables Criterion Test File name Flash5 Il User pmd Copyright Arizona Board of Regents 2002 Last modified 04 22 02 University of Arizona FLASH 5 PART II User Manual EXERCISE 1 CREATING THE CLOCK FLA FLASH FILE Demo 2 min Follow Along 3 min Practice 10 min Create a background clock face graphic and using the Rotation Palette Steps Create a new untitled movie File gt New if you do not already have one opened Choose Window gt Panel sets gt Default layout Insert gt New Symbol Choose Graphic as behavior and name it gClockFace The g is for graphic the appended Clockface is a general name
8. ame doesn t repeat gotoAndPlay 1 Control gt enable simple frame actions Control gt Play and note the animation is smoother when the hand reaches the top of the clock File name Flash5_II_User pmd Copyright Arizona Board of Regents 2002 Last modified 04 22 02 University of Arizona FLASH 5 PART II User Manual EXERCISE 3 SCRIPTING AN ACTION FOR A NEW BUTTON SYMBOL Steps Insert gt New Symbol Name it btn SimpleButton and draw a rectangle for the button shape Insert a keyframe in the hit frame and make it single color without texture etc as you may have already done in the first keyframe This will reduce file size Create a new layer for text and put in text that says button in at least the first keyframe Exit the symbol editing mode by clicking the Scene 1 in upper left Select the mc Clock in the Library Duplicate it Library gt Options gt Duplicate and rename the copy to mc Clock button Open the timeline of mc Clock button Create and name a new layer called button and then drag an instance of simpleButton to that layer in the Movie Clip Select this button in the button layer of Movie Clip mc Clock button and open the Actionscript Panel and add an ActionScript statement for STOP Return to the main _root timeline and drag an instance of the mc Clock button to the layer you now name layout Test your movie The button action should
9. field enter your value Hey there This is the value that the variable greetingMessage will hold Leave the Expression box unchecked File name Flash5 Il User pmd Copyright Arizona Board of Regents 2002 Last modified 04 22 02 University of Arizona FLASH 5 PART lIl User Manual Frame Actions Basic Actions BI greetingMessage hey there EJ Actions Ra Line 1 greetingMessage hey there Variable greetingMessage oO Expression Value hey there oO Expression 6 Test the movie to see what works Just because you assigned a value to a variable doesn t mean it was the right one in the right place to get used There is a way to check these as you construct your file Check the value of a variable with the Trace function when the movie plays Steps Select the script in the script layer keyframe and open the Actions panel Win dow gt Actions Note that it is labeled Frame Actions Add the Trace Function to the script by selecting the last line in the script and then MouseDown on the button and select Actions gt Trace Trace appears Type greetingMessage in the s and check the expression box Test the Movie Note that the value of greetingMessage should now appear in the OutPut window that opens We want the user to go to another section after entering their name so lets construct part two of this file Steps Open the script layer script in
10. it Controls Create a new layer and name it ActionScripts Drag it to the top if need be Set the File Publish settings Flash to Top down as load order Select the instance of the mc Clock in the layout2 layer In the Instance panel of the Instance Panel type in the Name Field a unique descriptive name for your movie clip instance Name it clockOne This is case Sensitive Your T movie clip instance can now be modified or EKI me clock addressed by actionscript using this name to Behavior identify it It is case sensitive Test the Movie Note that both clock in Name stances work Yo F GA A EXERCISE 5 CONTROLLING A MOVIE CLIP INSTANCE Steps j i 1 Select the instance of Object Actions clockOne check to confirm that the name is still in the Instance Basic Actions onClipEvent load Panel E Actions stop Open the ActionScript Panel break another way via Windows gt call Panels gt Instance comment Add the Stop statement to the continue script window delete Test the Movie Note that clockOne doesn t play Line 1 onClipEvent load Open the script for the clockOne instance again and Event Load CA Mouse down G Key down select the conditional statement Oke Ue load Note the different events and names options in the Object Actions panel Flash has an overlapping but separate set of os events for the Button and Movie
11. lockFace from the Library into the face layer and center it on the stage with use of the Info Panel Insert a keyframe at frame 60 of the face layer Drag gClockHand from the Library into the hand layer and place it so the bottom is on the center of the face circle Insert a keyframe in frame 60 of the hand layer Label Select the first keyframe in the hand Tweening layer and using the Frame Panel set Rotation to Motion Tweening CW Easing one time Rotate From the Menu bar Use the Control gt Play command to check that it Options Orient to path rotates correctly Note the use of only two keyframes to accomplish this O a US O Ae decreases file size Save the file as clock fla to a place you will remember Do NOT save this next step Check that you are in the scene 1 timeline and then drag an instance of the mc Clock MovieClip to the main timeline and test the movie Note that the clip seems to hesitate at the top as two exact frames play one after another We will correct this in the next exercise with ActionScript 12 Undo or revert to the last saved version of the file EXERCISE 2 ACTIONSCRIPT TO LOOP TO THE FIRST FRAME OF MC CLOCK Open the timeline of mc clock by double clicking on it in the Library In the Actions Layer insert a Blank Keyframe at frame 59 With the blank Keyframe in the actions layer selected open the Frame Actions Palette and add this script at frame 59 so that a fr
12. the first keyframe and add a Stop statement by selecting the last line in the script window and then selecting Stop from Frame Actions commands Insert a keyframe in frame 10 of the script layer Add a Stop command in keyframe 10 of the script layer With the Frame Panel add a label to the frame 10 of the script layer Name it Greeting Section Select the button keyframe and add the script Go to Select framelabel vs frame number in the Type menu and Greeting section should appear as the value for Frame File name Flash5 Il User pmd Copyright Arizona Board of Regents 2002 Last modified 04 22 02 University of Arizona FLASH 5 PART II User Manual Object Actions Explorer F Object Actions AF Object Actions Basic Actions on release IE Actions gotoAndPlay greeting section Line 2 gotoAndPlay greeting section Scene lt current scene gt ees Type Frame Label Frame greeting section Go to and Play 7 Test the Movie The button should disappear as we are on frame 10 File name Flash5 Il User pmd Copyright Arizona Board of Regents 2002 Last modified 04 22 02 University of Arizona FLASH 5 PART Il User Manual CRITERION TEST 20 min This is the criterion test for the Flash 5 Part II module It is going to test your comprehension of the workshop you just participated in or allow you to test out of the Flash 5 Part II module Design and create a very
13. ve empty keyframes in all states except for the hit state In the last keyframe of the button put a graphic about the same size as the clockface graphic you may copy the graphic face symbol An instance of this button will have a transparent blue shape when on the stage Place an instance of your button inside the movie clip timeline in its own named layer Select this button instance and open the actions panel Choose Actions gt On The on release statement appears in the script window In the Parameters pane uncheck the box next to Release and check the box next to Press The on press statement changes to on release Choose the Actions gt startDrag The startDrag action appears under the on press mouse event File name Flash5 Il User pmd Copyright Arizona Board of Regents 2002 Last modified 04 22 02 University of Arizona FLASH 5 PART II User Manual In the parameters pane in the Target field enter this and check the expression box The keyword this refers to the present movie clip Checking the Expression box removes the quotation marks around this so that Flash recognizes the word as a keyword rather than as a string literal Delete the instance of the movie clip mc clock on the stage in the main timeline and pull a new instance from the Library to the stage in the same layer Since the button now inside the movie clip uses the relative term this it wasn t necessary to name your movie clip instance
Download Pdf Manuals
Related Search