CSM ActionScript Class Lecture 3 February 10: Properties, Methods, & Events from Cody Tolmasoff on Vimeo.

Screencast of lecture from College of San Mateo ActionScript class from 3 February 2010

3 February 10 – Properties, Methods, & Events

Assignment:

  1. Demonstrate Example 3-1: Use of Mouse Events to control properties of a movie clip (See Figure 3-2 in the book).
    Extra Credit for demonstrating keyboard methods for this example
  2. Demonstrate Example 3-2: Event Propagation on a group of objects (movie clips)
  3. Demonstrate a Timer and Enter Frame event that uses a conditional to remove the event listener

Lecture:

  • Inherited Attributes
  • Properties
  • Events
  • Events
  • Methods
  • Event Propagation
  • Frame & Timer Events
  • Removing Event Listeners

This week we are starting down the road of interectivity, and we will start to apply techniques we have been reviewing for the previous couple of classes. Organization and ease of editing are two principles that are going to drive everything that we do. One thing that you will realize pretty quickly is that there are a dozen different ways to do any one task in Flash and ActionScript (as with any programming language). This kind of flexibility gives us the power to find the best way possible in the situation that presents itself to make code that works.

Properties: You could compare properties to adjectives, in which basically they describe the object in reference. For example you could draw a box on the stage and with the properties panel you can get information about its height, width, x & y position on the stage, its scale, its rotation, etc… Its important to note that most properties you can read and write their values, but some are read only.

Methods: You could compare methods to verbs, basically they can tell an object that they reference to do something. You can also use methods to set properties (or multiple properties at once), i.e. setSize(width, height).

Events: An event is the trigger for code that you write, like a button press, or a key press, or the mouse moving, or a timer expiring. An event handler is what facilitates the listening to the event then triggering the action to happen. An event listener is what we will set up to listen for a specific event so we can act accordingly.

Examining Properties
So again, all properties allow you to read them, most allow you to also set them. Lets take a look at a few.

  1. Draw a box on the stage with the rectangle tool
  2. With your arrow tool select the entire box (outline and fill) and convert this to a movie clip symbol (menu > insert > convert to symbol, or hit the F8 keyboard shortcut).
  3. Give your symbol a name that you will use to reference this shape in the library. Click OK
  4. Make sure your symbol is selected (with the arrow tool) on the stage and locate your properties pannel.
  5. Give this instance of the box the instance name "box_mc". (The instance name is the identity of this specific copy of the box on the stage, because you could have many copies of this box on the stage)
  6. Add a layer to your timeline (we will put some actionscript on this layer).
  7. Select the first keyframe of your new layer and open your actions panel (make sure it says ‘frame actions’ at the top).
  8. Try some of the following code:
box_mc.x = 200;
box_mc.y = 300;
box_mc.rotation = 30;
box_mc.alpha = .5;

To set a property, generally you start out with the reference to the instance you want to affect followed by the property (seperated by a period – dot notation) then you set it equal to some value. To read a property you just need the reference to the instance followed by the property

trace("box_mc.rotation = "+box_mc.rotation);

Go ahead and and try some other property changes.

Events

Buttons, then and now
In ActionScript 2 and before you could make a simple button by drawing a shape on the stage, selecting it and converting it to a button symbol. Then you could do one of a couple of things. You could either select the instance and write your code and write something like (note: this code is pretty old):

on (release){
gotoAndPlay(10);
}

Or you could select the instance and give it an instance name like ‘the_btn’ and write some code on the timeline like this:

the_btn.onRelease = function(){
gotoAndPlay(10);
}

Both of these techniques were easy, but quickly unmanageable. In the case of the first example finding code on some instance somewhere on your timeline can be incredibly cumbersome. Also managing the secondary example is difficult for more advanced interactions. The event listeners in AS3 require a little more setup, but offer us better ways to clean up and initialize code related to buttons. Managing these event listeners gets much easier in the long run as well.

Using Event Listeners
We are now going to get set up for the first part of our assignment.

  1. Draw a box on the stage.
  2. Select your box and convert it to a movie clip symbol (F8)
  3. With your instance selected on the stage, and your properties panel open, give the box an instance name of box_mc.
  4. Now draw a button on the stage
  5. Select your button on the stage and give it an instance name the_btn.
  6. Add a layer (label it A – for Actions)
  7. Select the keyframe in the A layer and open the Actions panel (make sure it says Actions – Frame at the top).
  8. Write the following code in the actions panel.
the_btn.addEventListener(
MouseEvent.MOUSE_UP, onRotateRight);
function onRotateRight(evt:MouseEvent):void {
box_mc.rotation += 20;
}

There are lots of properties we can affect, here is a partial list of some of them:

  1. x – the x position on the stage
  2. y – the y position on the stage
  3. scaleX – the scale of the object on its x axis (scale of 0-1)
  4. scaleY – the scale of the object on its y axis (scale of 0-1)
  5. alpha – the transparency of the object (scale of 0-1)
  6. visible – the boolean visibility of the object (true = on, false = off)

For your assignment tonight, you need to demonstrate at least 3 of these properties changing, in both directions. For example if you change the x position in a positive direction, you also need to make a button that changes it in a negative direction. Mostly I’m looking for you to get some practice with this.

Listening for the Keyboard
So we’ve examined mouse interaction with a button, now lets have a quick look at listening to a key press. Since the typical computer has only one keyboard, we generally listen to the keyboard as a whole then test against a particular key being pressed. have a look at the following code:

function onKeyPressed (evt:KeyboardEvent):void{
switch(evt.keyCode){
case Keyboard.RIGHT:
box_mc.x += 5;
break;
case Keyboard.LEFT:
box_mc.x -= 5;
break;
case Keyboard.UP:
box_mc.y -= 5;
break;
case Keyboard.DOWN:
box_mc.y +=5;
default:
trace("keyCode: ", evt.keycode);
}
}
//add a listener for the keyboard to tell the function onKeyPressed that a key has been pressed
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);

Event Propagation
So making listeners for various things is pretty simple, but it does get a little tedious. What if you want to influence a whole bunch (like 16, or 100, or 1000) movie clips in a similar way? Could you imagine writing some of the previous code 1000 times to influence 1000 objects that basically all do the same thing. The reason we are here taking this class is to make our lives easier and more organized. imagine you actually sat down and wrote that ActionScript for 1000 buttons, and now you need to edit it, ouch!
Task:
In a new file, draw a shape on the stage, select it and convert it to a movie clip symbol. Give it an instance name of shape0. Copy, paste and rename your shape a bunch of times (so you should have copies of the same symbol on the stage with instance names like shape0, shape1, shape2, shape3, etc…).
Now select all of your shapes and convert this group of shapes (with unique instance names) to a movie clip symbol. Give this new symbol of your shape group an instance name of shape_group.

Can you imagine writing code for each of these shapes to fade out on rollover, and fade in on rollout, how long do you think that would take?

Add an actions layer and select your first keyframe. Open the actions panel and write the following code:

shape_group.addEventListener(MouseEvent.MOUSE_OVER, onShapeOver);
shape_group.addEventListener(MouseEvent.MOUSE_OUT, onShapeOut);
function onShapeOver(evt:MouseEvent):void{
evt.target.alpha = .5;
}
function onShapeOut(evt:MouseEvent):void{
evt.target.alpha = 1;
}

A Frame Event
Frame events allow us to update something as the playerhead in the timeline moves. So if your frame rate is 12 fps (frames per second), and you are listening to a frame event, you can repeat that update as the same rate of 12 times per second (or as best flash can manage). If you have a frame rate of 30 fps, you can listen for a frame event 30 times per second.

Task:
Draw a square on the stage (something not round since we are going to rotate it). Select it and convert it to a movie clip symbol. Its symbol name is unimportant, but make sure its registration point is in the center. Give it the instance name shape_mc.
Write the following code in an actions layer:

stage.addEventListener(Event.ENTER_FRAME, onFrameLoop); //listen for the enter frame event and call the function onFrame loop when its heard.
function onFrameLoop(evt:Event):void{
shape_mc.rotation = mouseX;
}

A Timed Event
Sometime we need to track user input, and sometimes we need to track timed events, after so many seconds do something. maybe you need to pop up a warning after a minute of inactivity, maybe its the end of a game, there are lots of events we need to link to time.
Task:
Draw a square on the stage (something not round since we are going to rotate it). Select it and convert it to a movie clip symbol. Its symbol name is unimportant, but make sure its registration point is in the center. Give it the instance name shape_mc.
Write the following code in an actions layer:

var timer:Timer = new Timer(1000); //this is how long until your timer counts down, in this case 1000 milliseconds, or 1 second.
timer.addEventListener(TimerEvent.TIMER, onTimer); //now we listen for the timer and have it trigger the function onTimer.
timer.start(); //gotta tell the timer to go
function onTimer(evt:TimerEvent):void{
shape_mc.rotation += 10;
}

Test your movie, you should see your shape rotate 10 degrees every second.
These timers go on for ever if we don’t clean up our stuff and tell it to stop. Lets change our onTimer function to stop after it rotates so far:

function onTimer(evt:TimerEvent):void{
shape_mc.rotation += 10;
if(shape_mc.rotation >= 60){
timer.removeEventListener(TimerEvent.TIMER, onTimer);
}
}

The timer event is actually pretty smart. There is a simpler way we could have had the timer stop after 6 events, we could have said this instead:

var timer:Timer = new Timer(1000, 6);

This would have killed the timer after 6 events. In flash we typically have a dozen different ways we can do anything.