COMP : Practical 8 ActionScript II: The If statement and Variables

Transcription

1 COMP : Practical 8 ActionScript II: The If statement and Variables The goal of this practical is to introduce the ActionScript if statement and variables. If statements allow us to write scripts whose behaviour takes into account user input, and current circumstances. Variables allow a symbol to remember what has happened, and modify its behaviour accordingly. They also provide more capability in performing calculations. Our first movie is an extension to the first example in Practical 6, in which a clip moves across the screen. In this example we want it to notice when it reaches the right hand side of the stage, and stop moving or jump back to the left. 1. The first step is to make a movie with a shape that moves slowly to the right, using actionscript instructions in the shape itself. This is what you did in the first exercise in Practical 6. Try to do it again without referring to the instructions. Test your movie. If you let it run long enough, the shape will keep on going and disappear right off the screen. Figure 8.1: Yes! I cheated to make this image by using a motion tween. Clip scripts should be read from the point of view of the clip. Imagine you are the clip. The following script can be read as When an enter frame event happens to me: I will move right five pixels. If we want the shape to stop moving when it is close to the right hand side we need the script to check its position before changing it. The script must become When an enter frame event happens to me: I will check to make sure I haven t reached the right hand side; if I haven t, then I ll move right 5 pixels.. The if statement allows us to make such decisions. We can write: if (_x < 450) { The word if is followed by a comparison in this case comparing _x with 450 (being a bit less than the width of my stage). We read the statement: If _x is less than 450 move to the right by five pixels, otherwise do nothing. The do nothing part is just right for not moving. Notice that the event handler keeps running every frame, it s just that it does nothing once we reach the 450 point. 2. Try using the if statement as above. Take care with typing. All the punctuation is necessary. Check that your clip moves and then stops. 3. Find out what this next version does. (This is question 1 on the review sheet.) if (_x > 450) { _x = 0;

2 Syntax of the if statement The if statement takes the following form: if ( condition ) { meaning: If the condition is true do the statements, otherwise, don t where condition is some test usually a comparison, like _x < 450 but may also be a true/false property, as in if (_visible) { The comparison operations are: > is greater than >= is greater than or equal to < is less than <= is less than or equal to == is equal to (yes that really is two equals signs, side by side)!= is not equal to (exclamation mark and equals sign) It is also possible to combine comparisons using and, or and not. For example, this can be used to check to see if a value is in a range. _x > 20 and _x < 100 Other forms of the if statement are also provided if ( condition ) { else { means: If the condition is true do the first statements, otherwise, do the second. And for use in more complicated situations where several conditions must be checked if ( condition ) { else if ( condition ) { else { meaning: If the condition is true do the first statements; otherwise check the second condition and if it is true do the second lot of statements, otherwise (neither condition true) do the last lot of statements. The final form can be extended with as many else if clauses as you like. 4. As noted above, the if statement also supports an else option. We don t always want to do nothing when a condition is not true. Try the following variation. (Question 2 on review sheet). if (_x < 450) { else { _x = 0;

3 More examples of If and Else Just as it is possible to have several instructions, one after the other, altering properties. _y = _y + 2; it is possible to put one if statement after another. They each work independently. If _x is greater than 450 then _x will be set to zero. Regardless of whether that happens or not the next if statement checks the value in _y _y = _y + 5; if (_x > 450) { _x = 0; if (_y > 200) { _y = 0; We ll be building on the script we just wrote in the last section to make the shape change its dimensions depending on where it is on the screen. If the shape is on the right side of the screen it will turn into a tall narrow shape and when it is on the left side it will return to its original shape. 5. Starting with the following script, add ActionScript statements as instructed in the following steps. The full syntax will be given at the end. Don t look at that unless you need to. Figure 8.2 Starting point 6. Check to see if the shape s horizontal location is equal to or greater than 200. If it is, change the shape s width to 50% of its current size (ie: scale it down). And also change the shape s height to 200% of its current size. Test your program. Your shape should move from left to right, and somewhere near the middle of the stage its dimensions should change. However when the shape returns to the left side of the screen it doesn t change back,... this looks like a need to add some more ActionScript. 7. There are quite a number of ways of writing this. One way is to use the else again. Modify your program so that it reads: if the shape s x location is more than 200 then change the dimensions, else change the dimensions back to the original. 8. Try the program. Make sure that it works. If you are having problems, compare your instructions with those on the next page. 9. Save your movie as prac8a.

4 Figure 8.3 Finished code Comments Scripts can rapidly become large and hard to read and understand. One idea that helps is to add comments just extra text in English to explain what the ActionScript lines do. Comments are anything after two slash characters // on a line. Flash completely ignores comments, so they make no difference to what a script does they just help you and others to read and understand the script. The example above, with some comments added looks like this: Figure 8.4. ActionScript with comments.

5 Variables / Properties We have already used variables built in to the Flash system, only we called them properties. Each movie clip has several properties, eg: _x and _y. However, we are not limited to the built-in properties. We can add our own. If, for example, we were working on a game in Flash we might make a movie clip to use as the character in the game. It would make sense to add extra properties to that clip to store the number of points the character had earned, or in a fighting game, its current health or damage level. Essentially, variables and properties are the same thing, but in Flash we tend to call the built in ones properties and the ones we add variables. The first step is to declare/create your variable letting the Flash system know that the variable is required, and optionally to tell it something about the kinds of values you want to store in the variable. Declaring a variable is quite simple. First you decide on a name for your variable. The rules for variable names are the same as for instance names (as used in Practical 7 to refer to movie clips from the timeline.) Check the box at the end (later) for more comments on variable names. 10. The first exercise it to declare a variable. It won t server any useful purpose, we are just doing it to see how it is done. Start a new Flash movie, click on the first frame; open the actions window and type in the following var nmyvar = 3; This is a var statement its role is to create a variable. Our variable is called nmyvar 11. That s is we have declared a variable, and given it the value 3.. but how do we know if it worked? We can use trace to display the variable s value in the output window. Add the code var nmyvar = 3; trace(nmyvar); 12. Now run the movie and look in the output window. It should be as shown in Figure 8.5 Figure 8.5 Output window 13. Try changing the value, run the movie again and look for a change in the output. The variable we just introduced belonged to the timeline. The next example involves a variable associated with a movie clip. 14. Start a new movie. Draw a small square and convert it into a movie clip called Square. Add the following instructions to your square. onclipevent(load) { var myvar = 3; trace(myvar); myvar = myvar + 1; What happens? Explain. (This is review question 3.)

6 Variables being used with if statements In Practical 7 we experimented with mouse event handling. It was possible to make things happen on mouse movement. However, we usually want actions to occur only when the mouse button is held down. In this section we will use a variable to remember that a mouse down event has occurred. 15. As in the last step, create a new Flash movie, and place a square in the middle of the stage, convert it into a movieclip symbol called Square, and add instructions. onclipevent(load) { var blnmousedown = false; onclipevent(mousedown) { blnmousedown = true; trace(blnmousedown); The variable blnmousedown is created when the movie starts, but has the value false. When we see a mouse down event, we set it to true. In this way the variable records for us, whether or not a mouse down event has (ever) been seen. Note: I have used bln at the start of the name of the variable as it holds a true or false value. True/false values are referred to as Boolean values, in recognition of the work of George Boole, a logician of the late 19 th century. You may find names of this complexity annoying to type. If you do choose something simpler. 16. Run the movie and look in the output window. Nothing there? Click on the screen somewhere and look again. 17. Add the following instructions _rotation = _rotation + 4; You should see your square slowly rotating. The next step is to get control of the rotation using the mouse to stop and start it. 18. Change your enterframe handler to only do the rotation step if mouse down has happened. if (blnmousedown) { _rotation = _rotation + 4; Try the program. You should be able to turn on rotation by clicking on the screen. 19. That s good rotation now starts when we click the mouse. The next step is to make it stop when we release the mouse button. Do this by putting in an event handler for the mouse up event and Do it. 20. Save your program as prac8b. 21. The program now turns rotation on just while the mouse button is held down. An alternative control strategy might be to have one mouse click start rotation, which would continue until another mouse click stopped it. Make a version of your program which works in this manner and save it as prac8c. 22. Challenge: Make a version of the rotating square in which the square is rotating slowly when the program starts. This time clicking and holding the mouse down should gradually speed up the rotation. The longer the button is held down, the faster should be the rotation.

7 COMP : Practical 8 ActionScript II: The If statement and Variables Review Page. Question 1: What happens in step 3? Explain. Question 2: What happens in step 4? Explain. Question 3: What happens in step 14? Explain. Question 4: Show prac8a (Moving and changing size), prac8b (rotation control), prac8c (different rotation control) VERIFICATION Show the demonstrator your finished versions of the exercises in this practical. You may also be asked to demonstrate how you performed a specific task from this practical. Name: ID: (demo sign & date)