To provide some background for this question, you could send argument data to a standard function like this?

function showMsg(msg:String):void {
    trace(msg);
}
showMsg("Claire");

However, in an event listener, only one argument is allowed in the listener function: the argument responsible for receiving the event data. Using a standard mouse click listener as an example…

stage.addEventListener(MouseEvent.CLICK, showMsg, false, 0, true);
function showMsg(evt:MouseEvent):void {
    trace("hello");
}

…the kind of question asked is, can you do something like this:

stage.addEventListener(MouseEvent.CLICK, showMsg, "hello",
                       false, 0, true);
function showMsg(evt:MouseEvent, msg:String):void {
    trace(msg);
}

The answer is, not out of the box. The existing AS3 events do not provide for this capability. However, to answer Jim’s question, the best way to pass arguments with an event is to create your own event class by extending AS3’s Event class.

No-Class Alternatives

Before we get to the custom class, let’s look at a few lesser approaches for using dynamic data with events. In the following examples, I’ll take advantage of properties from an event, along with dynamic data, to show the use of both kinds of information. A MouseEvent instance includes a Boolean called shiftKey that indicates whether or not the shift key is pressed at the time the event is dispatched.

Note: Any time a trace() method is used to trace an empty string or new line, it is only used to visually differentiate one trace from another in the Output panel.

The first approach is to populate a variable and then use that variable inside the listener function. This is straightforward, but not very dynamic:

var msg:String = "Shift key was down:";

stage.addEventListener(MouseEvent.CLICK, doIt, false, 0, true);
function doIt(evt:MouseEvent) {
    trace(msg, evt.shiftKey);
    trace("");
    trace(evt);
}

The second approach is to use a standard event to call an interim function that then calls the desired function, passing along any relevant information. In my opinion, this is the best out-of-the-box solution, but it is also more verbose:

stage.addEventListener(MouseEvent.CLICK, doIt, false, 0, true);
function doIt(evt:MouseEvent) {
    doIt2("Shift key was down:", evt);
}

function doIt2(msg:String, evt:*) {
    trace(msg, evt.shiftKey);
    trace("");
    trace(evt);
}

The last approach I’ll discuss in this post is to use an anonymous function within the addEventListener() method under the guise of elminating the interim function in the previous example. This is a bit ugly and problematic:

stage.addEventListener(MouseEvent.CLICK,
              function(evt:MouseEvent){doIt(evt, "Shift key was down:")},
              false, 0, true);

function doIt(evt:MouseEvent, msg:String) {
    trace(msg, evt.shiftKey);
    trace("");
    trace(evt);
}

Looking at this format objectively, it’s not really any less verbose, it’s just crammed into one line. It’s also harder to read—particularly when the anonymous function requires more than one line to execute the desired functionality. Most importantly, however, anonymous functions can be a pain to work with and are hard (impossible?) to clean up after. With AS3’s memory management requirements, this is a headache you just don’t need.

Creating a Custom Event Class

For our needs, we’ll create a custom event class by extending Event. This gives us all the advantages of the parent class, including dispatching. Here is a basic example that I’ll explain bit by bit:

The class begins with the package declaration, and an import statement to tell the compiler where to find the Event class. The class declaration follows, extending Event.

The next line declares a public static constant, CUSTOM. This is the constant that will allow a scripter to specify this event, the same way you use CLICK to declare a click event of the MouseEvent class. These constants are strings and it’s best to specify something that will not conflict with another event string assignment (and, therefore, possibly trigger another event listener).

Next is a public property for any data you want to send with the event, such as the aforementioned shiftKey property found in the MouseEvent class. In this simple case, the value is typed using the asterisk, which will prevent type checking allowing any data type to be used.

It is largely a matter of preference whether you prefer to use public variables or getters and setters for accessing properties from outside a class. Many OOP advocates will insist that getters and setters are the only way to go. Others maintain that “headless/brainless” getters and setters (functions that don’t add any functionality, such as error checking, casting, or other manipulation) offer little value.

If this doesn’t mean anything to you, just stick with the version used in the examples (that uses public properties) until you learn more about getters and setters and determine your own personal preference on the issue. You can start looking into the idea with Chapter 6 of the book (OOP), which briefly demonstrates getters and setters in the Encapsulation and Composition sections.

The class constructor begins on line 11 and is very simple. It accepts as parameters, the event type, the custom argument, and the ability to bubble or cancel the event (the latter two, false by default). Only the custom argument is different from a standard event. It is placed second in the list of parameters so you can omit the last few parameters from the event dispatch. Their default values will be used if they are omitted. Similarly, if no new custom data is provided, it’s default value of null will be used. If the custom argument was placed at the end of the list (a logical place for new information), you would have to include values for all the optional parameters in the correct order, just to change the custom data argument.

The next line calls the super class to reap all of its benefits, passing along the type, bubbles and cancelable setting. Note that the argument is not passed on here because it’s not a feature of the extended Event

Additional Features

Theoretically, you can stop here but there are two important features that you should also include to make your class feature-complete.

clone()

On Line 21, our custom class overrides the clone() method of the parent class. This is necessary to insure that your event will behave properly if you ever need to redispatch it. The clone() method is called automatically for a built-in class but, when extending a class, you must account for the new features of your class and override the original method. Without including this override, none of the event attributes will carry through and you will receive an error. The source code that accompanies this post includes an example of redispatching the event. You can try the file with and without the function override to see how this might impact your project.

toString()

Finally, an “undersung” hero of the Event class appears on line 25. If you override the toString() method as well, including your class name, custom argument, and original event attributes (type, bubbles, and cancelable), your custom class info will appear in any trace of the event. This is handy for quick references to property names. For example, if you don’t override the method, and trace the event with a custom argument like this:

trace(new CustomEvent(CustomEvent.CUSTOM, “Claire”));

…you’ll get the following:

[Event type="custom" bubbles=false cancelable=false eventPhase=2]

All you know is that an Event of type “custom” was dispatched. However, if you override the method as shown, you get this:

[CustomEvent type="custom" arg="Claire" bubbles=false cancelable=false
eventPhase=2]

Not only do you know that you’re working with a CustomEvent, you also see the custom value you’ve added (arg=”Claire”).

Using the Custom Event

You can use the custom event like this, which will trace both the event and the custom argument that you send with the event:

this.addEventListener(CustomEvent.CUSTOM, onCustom, false, 0, true);
function onCustom(evt:CustomEvent):void {
    trace(evt);
    trace(evt.arg);
}

dispatchEvent(new CustomEvent(CustomEvent.CUSTOM, "Claire"));

A Practical Example

Now let’s look at a custom class at work. The following application is a very basic simulation of registering a user for something. We’ll be using a custom event class, UserRegistrationEvent. The interface requires a user name and age, and an optional employment status can also be provided. Upon an attempt to register, basic error-checking is performed. If the name field is empty, or the age provided is less than 18, a custom error event USER_REGISTRATION_ERROR, is dispatched, and a warning string is placed into the Result field. Otherwise, a custom complete event, USER_REGISTRATION_COMPLETE, is dispatched and each of the custom values carried with the event is placed into the field. For demo purposes, the full event is added to the field in each case.

Here is the custom event class used. The only significant differences between this example and the earlier custom event class are the fact that UserRegistrationEvent has two event constants (instead of one), and three custom values (instead of one).

And here is the relevant code that checks the form input and dispatches the appropriate event (with explanations to follow the script):

Lines 2 through 13 make up the listener for the Registration button in the form. The function converts the age text submission to an integer and checks to see if the age is over 18 and the name field is not empty. If these two tests pass, a registration complete event is dispatched, sending the name, age, and employment status with the event. If the tests fail, a registration error event is dispatched.

Lines 16 through 25 comprise the listener for the registration complete event. It places four pieces of information into the text field: the user’s name, age, and employment status, followed by the entire event for illustration purposes. (Line feeds are added along the way for clarity.)

Lines 28 through 36 contain the listener for the registration error event. It replaces the contents of the Result field with an error message and the complete event.

Note: The source code places the data in the text field but traces the event to the Output panel for additional separation of functionality. It also includes additional code to control the checkbox, which is irrelevant to this tutorial.

Example Source Code

Download Passing Arguments with Events (40.8 KB, 780 hits)

The source code that accompanies this post contains several files. Flash users should start with a set of FLA files (saved in CS3 format for maximum compatibility), including the example shown herein. In this set are a simple proof of concept, the basic UI example above, and a UI example that shows the importance of using the clone() method when redispatching events.

I’ve also included a set of class-only files, moving the FLA-based material to a class so users of other coding environments can take advantage of the examples. Furthermore, the classes can be used as document classes by Flash users, if preferred. Both the single dispatch and redispatch examples are included.

Finally, two versions of the custom event have been included, as explained earlier in the post. The version used with the example uses public properties for simplicity, but another version using getters and setters has also been provided. If you are a fan of the latter, you can simply swap out the class and everything will work the same way.

For some reason lots of people seem to think that ActionScript animation creates smoother animation than the Flash timeline. This is simply not true. The timeline is just as capable of creating “smooth” animations as ActionScript is.

On the timeline, if you want a smoother animation, use a framerate around 30fps and put more space between your keyframes.

ActionScript vs. Timeline

Students sometimes ask me when to use coded animation and when to use timeline animation. The answer is more complicated than you might expect. Here’s a basic set of rules:

TIMELINE ANIMATION IS FOR:
- animation that is always the same (static animation)

ACTIONSCRIPT ANIMATION IS FOR:
- interactive animation
- random animation
- animation driven from an outside source like an rss feed
- complex, static physics simulations that would be hard to animate on the timeline
- complex interactive physics simulation
- time-based animation—that is, animation that always runs at the same speed independent of framerate

When I first started using Flash, I programmed all my animation and avoided the timeline completely. This approach had an upside and a downside. The upside was that I learned a whole lot about making things move on the screen with code. The downside was that coding static animation is generally more time consuming then doing it on the timeline. Since coding static animations can be a good learning experience, I always tell my students to abide by the above list, but that the real choice of using ActionScript or timeline animation is up to them.

First Encounter With TweenLite

Until recently I had steered clear of all tweening engines for no reason in particular other than that I understood all the inner workings of them and would usually just write out motion math from memory when needed. A few months ago I was working as a consultant on a project with a few designers and a programmer. I knew that the designers liked to use tweening engines like Fuse, Tweener and TweenLite. I figured since they were using them, I should become familiar with them. I had also recently seen a graph about the speed of different tweening engines and made a note to myself to check out TweenLite. After a 5-minute explanation from a designer, I was up and running with TweenLite. I thought it was cool, but didn’t think I’d find myself using it regularly.

When I got home that night I felt like playing with it a little more and I created this.

Download TweenLite Play (12.8 KB, 1,965 hits)

The source for this is a bit advanced, I recommend reading through this post before playing with this file.

I had a class the following day and I decided to add a short TweenLite demo into the lesson plan. It was about this point that I started to realize the potential power of TweenLite. The library is so elegantly designed that my students picked it up almost immediately.

What is Time Based Animation?

TweenLite creates time-based animation. This means that if you tell a tween to last 2 seconds. It will always last 2 seconds no matter what framerate the SWF happens to be playing at. When a SWF runs on a slow computer it might not be able to run at the framerate you intended. If your SWF has timeline animation, the animation will look like its playing in slow motion. If your animation is time-based (like TweenLite), it will appear more choppy, but will still run at the same speed:

Move the fps slider to see the difference between a TweenLite frame-based tween and a normal Flash timeline tween. Note that the frame-based tween continues to take approximately 2 seconds to complete at any framerate. Whereas the Flash timeline tween is entirely dependent on the framerate of the SWF.

Getting Started

The first thing you need to do to start working with TweenLite is to download it. Extract the zip and grab the “gs” folder. You can put it in your classpath or you can just place it next to your FLA. Once you’ve done either of those two things you’ll be ready to go.

In order to use TweenLite we need to import it. TweenLite uses the same static easing functions that Flash’s internal tweening engine uses, so when using TweenLite we generally have two import statements:

import gs.TweenLite;
import fl.motion.easing.*;

Add that code to your timeline, draw a box on your stage and convert it to a movie clip. Give it an instance name of box and add one more line of code to your timeline:

TweenLite.to(box,2,{x:400});

Make sure your box is somewhere on the left hand side of the stage and then test your movie. If you’ve done everything correctly, your box should move to 400 on the x axis. The TweenLite.to() method is really handy and very easy to understand. It takes three arguments. The first is the display object to tween. The second is how long the tween should take, and the third is an object that tells TweenLite which properties to tween.

Let’s change our call to TweenLite.to() a little bit:

TweenLite.to(box,3 ,{x:400, rotation:180, scaleX:2, scaleY:2});

This time, we tell our tween to last three seconds and we start playing with more than one property at a time. We move to 400 on the x, rotate to 180 and scale the movie clip up to 200%. Test your movie and have a look.

By default TweenLite uses a quadratic ease out equation. All the different types of tweens we can use are defined in the fl.motion.easing package:

The third argument of the TweenLite.to() method has a few special properties that give us more control over the tween. The first one is ease, this is where we use the functions from the fl.motion.easing package. Try a couple different values to get a feel for the different types of easing:

// note that most tweens have an easeOut, easeIn and easeInOut constant.

// easeOut
TweenLite.to(box,3 ,{x:400, rotation:180, scaleX:2, scaleY:2, ease:Bounce.easeOut});

// easeIn
TweenLite.to(box,3 ,{x:400, rotation:180, scaleX:2, scaleY:2, ease:Bounce.easeIn});

// easeInOut
TweenLite.to(box,3 ,{x:400, rotation:180, scaleX:2, scaleY:2, ease:Bounce.easeInOut});

Just understanding the way these few aspects of TweenLite work is enough to start using it for basic applications. At this point you might want to take a break and play around with the TweenLite.to() method.

Continuing…

After playing around a bit, I wondered how to use one type of tween on the x axis and another type of tween on the y. This is easily accomplished with the overwrite property. Try this code in your timeline:

The above creates a gravity effect by combining the default quadratic tween with the Bounce.easeOut function. Because the overwrite property is false, the second tween doesn’t overwrite the first tween. Instead, it tweens independently.

After playing with the overwrite property for awhile, I wanted to run another function after the tween was complete. This is done by setting the onComplete property. Try running this code in your timeline:

After doing this I assumed there must be an easy way to pass parameters to your onComplete function. For this task, there’s another property called onCompleteParams which takes an array of arguments to pass to the onComplete function. This means that you can have a bunch of objects that all use the same onComplete function. So, if we didn’t want to specifically reference box in our onJump function, we could replace lines 9-16 of the previous script with the following:

TweenLite.to(box, 2,{y: 300,
           ease: Bounce.easeOut,
           overwrite: false,
           onComplete: onJump,
           onCompleteParams: [box]});

function onJump(mc:MovieClip):void {
	TweenLite.to(mc, 1,{y: 100, rotation:180, ease:Back.easeOut});
}

Relative Positioning

There are three more extremely useful parts of TweenLite worth mentioning. The first one is really simple. If you pass a string to a property rather than a numeric value, that tells TweenLite to use relative positioning. So if you write:

  TweenLite.to(box, 1,{y: 100});

Your telling TweenLite to set the y position of box to 100. But if you write:

  TweenLite.to(box, 1,{y: "100"});

Your telling TweenLite to add 100 pixels to the current y position of box. Try this code out:

Every time we click the stage, the box eases 40 pixels to the right.

Delay

The delay property simply adds a delay before your tween starts. Consider the following code:

TweenLite.to(box, 1, {x:300});
TweenLite.to(box, 1, {y:300, overwrite:false, delay:.5})
TweenLite.to(box, .5, {scaleX:.5, overwrite:false, delay:.9})

We combine three tweens but start them at different times. The result is that the box moves right, then left and then towards the end of the tween, the box scales to 50% width. The delay property is really nice for creating short sequences of events.

From Method

The TweenLite.from() method works just like the TweenLite.to() method except that it tweens from the specified values in your third argument rather than to them. I’ve found this very useful for intro animations. You can just lay all your movie clips on the stage where you want them to end up – then add some TweenLite code to tween them into position. Take a look at this example:
click on this SWF to replay the animation

Download Fake Banner (11.9 KB, 1,219 hits)

You might want to download the FLA above and take a look at it. All the movie clips have just been placed on the stage exactly where I want them to end up. I then use TweenLite.from() to animate them:

It’s this type of easily scripted animation that sold me on TweenLite. I really like the Flash timeline and use it for static animation 90% of the time – there are some types of animation that are just better done by hand. However, for simple things like the above example TweenLite is absolutely perfect.

It’s important to note that you’ll need to go to this link : http://blog.greensock.com/tweenliteas3/ and download TweenLite in order for any of the code in the post to work. It’s also worth taking a look at the excellent documentation that you’ll find at that same link.

This is a trick I use when I need more contrast in my random numbers. In this case, the variable rand will get closer to the number 1 significantly less frequently than if you just used Math.random() once.

To illustrate this I created this snippet:

The blue lines plots normal Math.random() and the black lines plots Math.random()*Math.random()*Math.random()

so

traces:

Enjoy

When using EventDispatcher.dispatchEvent(), you pass in an Event instance that is specific to the event being dispatched. The type of event dispatched is defined within the Event instance used. For example, dispatching an “enterFrame” event would mean using dispatchEvent with an Event instance instantiated with the type “enterFrame”.

When an event handler is executed as a result of this event, that event object is passed into the function as a single argument. Properties from that event can then be extracted to learn more about the event that occured. For example, the type property from the Event class tells which event was dispatched.

Though event types are strings, all common Flash events are available in Flash through static constants of the Event classes. The “enterFrame” event type, for example, is accessible using Event.ENTER_FRAME. Mouse events are within the MouseEvent class. Click events, for example, are MouseEvent.CLICK. These constants are prefered over their string representations.

When making your custom Events, you can use the Event object with a custom type or alternatively, extend the Event class creating a new kind of Event instance to be used with your events.

Whenever you want to create an event handler to be called during a certain event, whether it be every frame (enterFrame event), or at the press of a button (mouseDown event), in AS 3, you will need to use EventDispatcher. This means there are no more onEnterFrame of onPress functions you can define that will automatically handle these events, nor are there any simple addListener methods for generalized event listening. EventDispatcher and addEventListener (and related methods) does it all.

Methods

• addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
• dispatchEvent(event:Event):Boolean
• hasEventListener(type:String):Boolean
• removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void
• willTrigger(type:String):Boolean

Note that addEventListener only takes functions as listeners, not objects. Also remember that class methods are bound to their instances so when used as listeners, ‘this’ in the event call still references the orginal class instance no matter what object dispatched the event.

Basic Example:

By extending the EventDispatcher class or any class that inherits from it like Sprite (all DisplayObjects are inherently EventDispatchers), your class gains access to the EventDispatcher methods. Then, other instances (or the class instance itself) can add methods to instances of that class using addEventListener and in turn they can call those events through dispatchEvent.

If there is some reason your class cannot inherit from the EventDispatcher class (for example, if its already inheriting from another class which does not inherit from EventDispatcher), then you can use the EventDispatcher constructor to intialize your class instance with the methods of EventDispatcher via aggregation (composition). Just make sure you implement the IEventDispatcher interface (flash.events.IEventDispatcher). Ex:

The CustomDispatcher helper class above doesn’t inherit from EventDispatcher but uses aggregation to obtain EventDispatcher functionality through an instance of EventDispatcher initialized in the constructor.

Like LoadVars, URLLoader has a load() method that is used to load text from an external source. This accepts 1 argument, a URLRequest instance (NOT a URL string). You can then use events from URLLoader to determine when the loading is complete. When complete, the text loaded is available in the data property of URLLoader.

Example:

One thing these two virtual machines have in common is their implementation of LocalConnection. Both virtual machines deal with local connections in essentially the same way – enough that local connections in AVM1 can receive events from AVM2 and vise versa. So should you come into a situation where you would need a movie published in ActionScript 3 to communicate with a movie published in ActionScript 1 or 2, using local connection is the way to go.

• LocalConnection AS2
• LocalConnection AS3 (flash.net.LocalConnection)

Example:

The AS3 movie loads the AS2 movie into a Loader instance and places it on the screen. As it plays, the user can click the animation which calls stopPlayback sending the “stopAnimation” event to the local connection named “AVM2toAVM1″. The AS2 movie is then able to receive that event in its stopAnimation event handler and tell the animation_mc clip to stop.

FileReference.save()

This is one of my favorite features of Flash 10. We can save any kind of file to a user’s computer using the FileReference.save() method. Its first argument is for the data to put in the file. This can be a String, ByteArray, or XML object. The second argument is the name of the file.

If you paste this code in your timeline all you need to do is click the stage and you’ll get a dialogue asking where you would like to save the file “actionsnippet.txt”.

Quick Alphabet Array

outputs:

this is the letter b... b
a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z

This snippet can be used to quickly create an array of letters. In this case we create an array out of the alphabet. The only thing you need to know to understand this snippet is the String.split() method. String.split() takes two arguments: a delimiter and a limit value. In our case we just use the delimiter argument. A more normal example of String.split() might look like this:

var names:String = "Jon, James, Jeff, Joe, Kim, Kip";

// To get all these names into an array we can use the String.split() method:

var allNames:Array = names.split(", ");

Here we have a String called names that contains six different names. The names are delineated by a comma and a space “, “ so this is what we pass to the delimiter argument of the String.split() method. String.split() then returns an array where “Jon” is the first value, “James” is the second value, etc….

An interesting feature of String.split() is that if you pass an empty string as the delimiter argument, the string will get split after ever character. This is how the original snippet works. Because we don’t supply a delimiter, we end up with an array filled with the alphabet.

There are many different ways to use String.split(). The limit argument could be used so that the String is only split a given number of times. String.split() can also be used with regular expressions.

As a side note, Ted from lazylady.se pointed out that this snippet could be written without parenthesis:

var alphabet:Array = "abcdefghijklmnopqrstuvwxyz".split("");

Random Choice

The function randomChoice() takes any number of arguments and returns one of them randomly. This is useful for color values, arbitrary sets of numbers or sets of mixed datatypes. Let’s take a look at how it works.

Using Math.random() to generate numbers in a given range is easy:

But what if you only wanted Math.random() to give you one of the following numbers 10, 108, 200 or .5? One way to do this is to create an array of those values and then set a random index value based on the length of the array:

var vals:Array = [10, 108, 200, .5];

// index of vals is 0 - 3 (or the length of vals - 1)
trace(vals[int(Math.random() * vals.length)]);

The above will trace out one of the values from the array vals. This works nicely, but writing a function to handle it is a bit cleaner. The randomChoice() function uses the exact same technique shown above. The key is that we make use of the AS3 …rest parameter (…) for our Array. When used, the …rest parameter should always be the last argument in your function because it tells Flash to allow any number of additional arguments to be passed into the function. These additional arguments will then be treated as an array. In the case of the randomChoice() function we only need to define one argument:

function randomChoice(...args):* {

The information passed into args is treated as an array and we’re able to use Math.random() to grab a value from that array. Since arrays can have mixed data types, the randomChoice() function return value is typed using * (wildcard). This means it can return any datatype String, MovieClip, uint, int, Number etc… Before moving on you may consider playing around with the randomChoice() function for a few minutes.

“with” Statement and the Graphics Class

This snippet shows how using with statements in conjunction with Graphics class method calls can save you some typing and improve code readability. We talked about this in the book on page 142-143.

A less-readable way to do this in one line looks like this:

This is often less readable than the multi-line approach so in cases with three or more method calls I’ll usually choose the multi-line with statement.

Set Multiple Properties of an Object

This snippet allows us to set the properties of any Object using a function call and Object syntax. This technique is commonly used within tweening engines such as TweenLite.

Take a look at line 7. Here we call the setProps() function. The first argument is the Object (a Sprite, in this case) that we want to change and the next argument is an Object that contains new values for the properties of the object you passed into the first parameter. Line 7 alters our sprite’s x, y, scaleX, scaleY and rotation properties all with one function call.

The setProps() function itself makes use of two interesting ActionScript features, the for…in loop and Object bracket syntax. Bracket syntax can be very powerful. It’s an alternative to dot syntax, instead of writing:

mc.x = 10;
mc.y = 10;
mc.rotation = 45;

// bracket syntax allows us to write:

mc["x"] = 10;
mc["y"] = 10;
mc["rotation"] = 10;

The reason this is useful is that you can use a variable between in your brackets and change which property or method you’re targeting.

On line 11 we make use of the for…in loop. This allows us to loop through the properties in a given Object (stored in props, in this case). Notice the key variable inside our for…in loop. This variable is set to the name of each property in our props Object. To understand this a bit better you could try adding a trace statement inside the for…in loop:

for (var key:String in props){
    trace(key);
}

outputs:

scaleY
y
x
rotation
scaleX

This means that line 12 is setting the properties of our first argument equal to the properties of our second argument. If we unrolled the loop it would look like this:

o["scaleY"] = props["scaleY"];
o["x"] = props["x"];
o["y"] = props["y"];
// etc