Flash Actionscript Adding Interactive Actions Variables

1. Flash ActionscriptAdding Interactive Actions Variables

2. Adding an Interactive Action • Start a new movie with File -> New • Create a blue circle, put it in the centre of the stage, and convert it to a movie clip symbol. Call the symbol circle_mc. • With the circle still selected use the properties’panel to give this instance of circle the name ball.

3. Adding an Interactive Action • So we have a symbol called circle with an instance of this symbol called ball. • Now create a new layer and call it actions. Add a keyframe to the actions layer at frame 2 and add a new frame to the other layer (this is so that the first layer has two frames). • We will then add actions to both of the frames on the actions layer.

4. Adding an Interactive Action • Call up the Frame Actions window for frame 1 of the actions layer (right click on frame 1 and select actions). • Make sure Script Assist is turned off. • Type the following into the actions window this.ball.x = mouseX; this.ball.y = mouseY;

5. Adding an Interactive Action • Put the following action into the Frame Actions window for frame 2 of the actions layer. gotoAndPlay (1); • The second action means that the animation simply loops from 1 to 2 indefinitely.

6. Adding an Interactive Action • this.ball.x = mouseX; What does this mean? • this is used to target the current timeline • mouseX is the Flash way of referring to the current x coordinate of the mouse • ball is the name we gave to the current instance of the circle symbol. • x is the horizontal position property of that instance which we are assigning to the current value of the x position of the mouse.

7. Adding an Interactive Action • We are doing the same with the value of the y and hence the blue ball will simply follow the mouse around the screen when we run the animation.

8. ActionScript Variables • ActionScript is supposed to be a programming language. • Program => something which receives some input, performs some processing, and does some output. • Our Flash animations are interactive • input = button presses, mouse events • output = graphics on screen

9. ActionScript Variables • So it is a programming language of sorts but so far not a very flexible one for two reasons: • 1. Forms of input are a bit limited • 2. It can’t remember any of its input … merely respond immediately. • I think we need some variables!

10. ActionScript Variables • A variable is a memory location in which a program can store data values. • These values can change constantly … when a program needs to find out the current value it just looks it up. In order to be able to look up the right one it associates a unique name with each variable (chosen by the programmer).

11. Variables and Data Types • You can explicitly declare the object type of a variable when you create the variable, which is called strict data typing. • If you do not explicitly define an item as holding either a number, a string, or another data type, at runtime Flash Player will try to determine the data type of an item when it is assigned. • Because data type mismatches trigger compiler errors, strict data typing helps you find bugs in your code at compile time and prevents you from assigning the wrong type of data to an existing variable.

12. Variables and Data Types • ActionScript has the following basic data types: • Boolean • int • uint • Null • Number • Object • String • Void

13. ActionScript Variables • Declaring a variable: • var catName:String; • You can then assign a value - done using an assignment statement which uses the assignment operator which, conveniently, is an = sign. • catName = "Pirate Eye";

14. ActionScript Variables • Or you can do both together: • So for example the following are all valid: • var hisName:String = “Pete”; • var hisAge:int = 32; • var gameOver:Boolean = true;

15. ActionScript Variables • To view the value of a variable, use the trace() statement to send the value to the Output panel. Then, the value displays in the Output panel when you test the SWF file in the test environment. • E.g., trace(hoursWorked) sends the value of the variable hoursWorked to the Output panel in the test environment.

16. ActionScript Variables Expressions • We can also generate values for variables by using mathematical expressions e.g. varmyAge:int = 42; varmyResult:int = myAge - 10; myAge = myAge+1; varnewVar:int = myResult * myAge; • We can also add variables which hold things other than numbers e.g. varfirstPart:String=“This is ”; varsecondPart:String =“a sentence.”; varsentence:String = firstPart + secondPart; Don’t mix types in expressions though!

17. ActionScript Variables • Let’s look at an example of using variables to store text inputted from the screen. 1. Open a new movie and select the Text Option. Select Input Text fromthe drop-down menu and click once on the stage to insert a textfield. 2. Give your textbox an instance name in1. 3. Check the border box to make Flash draw a box around the textfield.

18. ActionScript Variables • If we are going to read some text in from the screen we are going to need to store it somewhere (i.e. we need a variable) • We get a box into which we can type stuff. That stuff can be referred to as In1.text. We have now asked Flash to store In1.text in the string variable myTextVar. Let’s now make an output box to make sure this is happening. • Create a new layer and call it actions. • Select Frame 1 of the actions layer and open the actions panel. • Type in: • var myTextVar:String = In1.text;

19. ActionScript Variables • So we have told Flash to display the contents of in1 in the output textbox. • Test the movie – why doesn’t it work? • 5. Click on a blank part of the stage to deselect the input box. Click on the Text Option • again and select Dynamic Text. Make sure border and Selectable are • unchecked. • With the Text tool, add a new text field directly below the existing one. Give this one • the instance name Out1. • Select frame 1 of the actions layer and open the actions panel. • Add the following to the existing code: • Out1.text = myTextVar;

20. ActionScript Variables • Add a a frame to layer 1 and keyframe to frame 2 of your actions layer. • Select the keyframe and open the actions panel • Type in the following code: • gotoAndPlay(1);

21. Variables and Scope • A variable's scope refers to the area in which the variable is known (defined) and can be referenced. • A global variable is one that is defined in all areas of your code, whereas a local variable is one that is defined in only one part of your code.

22. Variables and Scope • In ActionScript 3.0, variables are always assigned the scope of the function or class in which they are declared. • A global variable is a variable that you define outside of any function or class definition.

23. Global Variables • E.g., the following creates a global variable strGlobal by declaring it outside of any function. • This shows that a global variable is available both inside and outside the function definition. • var strGlobal:String = "Global"; • function scopeTest() • { • trace(strGlobal); // Global • } • scopeTest(); • trace(strGlobal); // Global

24. Local Variables • You declare a local variable by declaring the variable inside a function definition. • The smallest area of code for which you can define a local variable is a function definition. • A local variable declared within a function will exist only in that function.

25. Local Variables • E.g., if you declare a variable named str2 within a function named localScope(), that variable will not be available outside the function. • function localScope() • { • var strLocal:String = "local"; • } • localScope(); • trace(strLocal); // error because strLocal is //not defined globally

26. Variable Scope • If the variable name you use for your local variable is already declared as a global variable, the local definition hides (or shadows) the global definition while the local variable is in scope. • The global variable will still exist outside of the function.

27. Variable Scope • E.g., the following creates a global string variable named str1, and then creates a local variable of the same name inside the scopeTest() function. • var str1:String = "Global"; • function scopeTest () • { • var str1:String = "Local"; • trace(str1); // Local • } • scopeTest(); • trace(str1); // Global

28. Variable Scope • The trace statement inside the function outputs the local value of the variable, but the trace statement outside the function outputs the global value of the variable.

29. Flash ActionscriptEvent Handling

30. Event Handling • Right now we know all about variables lets go back to our text input/output example: • Suppose we want to create an Enter button e.g. user types stuff into the input field, when finished clicks Enter, and then the text is displayed in the output field??? • What we need is some way to detect that the user has clicked on the button and some way of knowing what to do when this happens…

31. ActionScript and Events • ActionScript code is executed when an event occurs: E.g., when a movie clip is loaded, when a keyframe on the timeline is entered, or when the user clicks a button. • Events can be triggered either by the user or by the system. Users click mouse buttons and press keys; the system triggers events when specific conditions are met or processes completed (the SWF file loads, the timeline reaches a certain frame, a graphic finishes downloading…).

32. ActionScript and Events • When an event occurs, you write an event handler to respond to the event with an action. • When you are writing ActionScript code to perform event handling, there are three important elements you'll want to identify: • The event source • The event • The response

33. ActionScript and Events The event source: • Which object is the one the event is going to happen to? • E.g., which button will be clicked, or which Loader object is loading the image? • The event source is also known as the event target, because it's the object where the event is targeted by the Flash Player (where the event actually happens).

34. ActionScript and Events The event: • What is the thing that is going to happen, the thing that you want to respond to? • This is important to identify, because many objects trigger several events. The response: • What step(s) do you want performed when the event happens?

35. ActionScript and Events • Any time you write ActionScript code to handle events, it will include these three elements, and the code will follow this basic structure elements in bold are placeholders you'd fill in for your specific case. function eventResponse(eventObject:EventType):void { // Actions performed in response to the event go here. } eventSource.addEventListener(EventType.EVENT_NAME, eventResponse);

36. ActionScript and Events • First, we define a function, which is the way to specify the actions you want performed in response to the event. • Next, we call the addEventListener() method of the source object, in essence "subscribing" the function to the specified event so that when the event happens, the function's actions are carried out.

37. ActionScript and Events • A function provides a way for you to group actions together, with a single name that is like a shortcut name to carry out the actions. • When you're creating a function for event handling, you must choose the name for the function (named eventResponse in this case), and you must also specify one parameter (eventObject). • Specifying a function parameter is like declaring a variable, so you also have to indicate the data type of the parameter.

38. ActionScript and Events • There is an ActionScript class defined for each event, and the data type you specify for the function parameter is always the class associated with the particular event you want to respond to. • Finally, between the opening and closing curly brackets ({ ... }), you write the instructions you want the computer to carry out when the event happens.

39. ActionScript and Events • Once you've written the event-handling function, you need to tell the event source object (the object that the event happens to--for example, the button) that you want your function to be called when the event happens. • You do this by calling the addEventListener() method of that object (all objects that have events also have an addEventListener() method).

40. ActionScript and Events • The addEventListener() method takes two parameters: • First, the name of the specific event you want to respond to. • Second, the name of your event response function.

41. Examining the Event-handling Process • What happens when you create an event listener? Let’s look at creating a listener function that is called when an object named myButton is clicked. • Here is how this code would actually work when it's running in Flash Player: function eventResponse(event:MouseEvent):void { //Actions performed in response to the event go here. } myButton.addEventListener(MouseEvent.CLICK, eventResponse);

42. Examining the Event-handling Process • When the SWF file loads, Flash Player makes note of the fact that there's a function named eventResponse(). Function eventResponse (event: MouseEvent):void { //actions performed in response to the event go here. } myButton.addEventListener(MouseEvent.CLICK, eventResponse);

43. Examining the Event-handling Process • Flash Player then runs the code (specifically, the lines of code that aren't in a function). In this case that's only one line of code: calling the addEventListener() method of the event source object (named myButton) and passing the eventResponse function as a parameter. Function eventResponse (event: MouseEvent):void { //actions performed in response to the event go here. } myButton.addEventListener(MouseEvent.CLICK, eventResponse); myButton listeners: function1() function2()

44. Examining the Event-handling Process • Internally, myButton has a list of functions that are listening to each of its events, so when its addEventListener() method is called, myButton stores the eventResponse() function in its list of event listeners. Function eventResponse (event: MouseEvent):void { //actions performed in response to the event go here. } myButton.addEventListener(MouseEvent.CLICK, eventResponse); myButton listeners: function1() function2() eventResponse()

45. Examining the Event-handling Process • At some point, the user clicks the myButton object, triggering its click event (identified as MouseEvent.CLICK in the code). At that point, the following occurs…

46. Examining the Event-handling Process • Flash Player creates an object, an instance of the class associated with the event in question (MouseEvent in this example). For many events this will be an instance of the Event class; for mouse events it will be a MouseEvent instance; and for other events it will be an instance of the class that's associated with that event. This object that's created is known as the event object, and it contains specific information about the event that happened: what type of event it is, where it happened, and other event-specific information if applicable.

47. Examining the Event-handling Process Function eventResponse (event: MouseEvent):void { //actions performed in response to the event go here. } myButton.addEventListener(MouseEvent.CLICK, eventResponse); eventObject target:myButton type:mouseEvent.CLICK … myButton listeners: function1() function2() eventResponse()

48. Examining the Event-handling Process • Flash Player then looks at the list of event listeners stored by myButton. It goes through these functions one by one, calling each function and passing the event object to the function as a parameter. Since the eventResponse() function is one of myButton's listeners, as part of this process Flash Player calls the eventResponse() function.

49. Examining the Event-handling Process Function eventResponse (event: MouseEvent):void { //actions performed in response to the event go here. } myButton.addEventListener(MouseEvent.CLICK, eventResponse); eventObject target:myButton type:mouseEvent.CLICK … myButton listeners: function1() function2() eventResponse()

50. Examining the Event-handling Process • When the eventResponse() function is called, the code in that function runs, so your specified actions are carried out. Function eventResponse (event: MouseEvent):void { //actions performed in response to the event go here. } myButton.addEventListener(MouseEvent.CLICK, eventResponse); eventObject target:myButton type:mouseEvent.CLICK … myButton listeners: function1() function2() eventResponse()