The life and times creating engaging media experiences.

ActionScript

» to Main Page
Setting a Center Point for Rotating an Object in Flex

When you want to rotate an object in Flex, it seems like it would be simple enough to use the "rotation" property of the DisplayObject class to set the number of degrees to rotate the object.

However, when you adjust this value, it assumes that the center point of the rotation is x=0 and y=0, and I have not been able to find a way to specify a different center point (also called a registration point) about which to perform the rotation.

Although there may be a better solution out there, the workaround I have employed involves using the Rotate class. The Rotate class in the "mx.effects" package allows you to create a motion tween for rotating an object over a specified time duration.

The benefit of the Rotate class is that it allows you to specify a center point for the rotation by setting the "originX" and "originY" values. All you have to do is set the duration of the effect to 1 millisecond before invoking the tween, and when played, the object instantaneously rotates about any center point you desire.

Difference Between "target" and "currentTarget"

When adding an event listener to an object in your ActionScript 3.0 code, it is helpful to understand the difference between the "target" and "currentTarget" objects that can be referenced in the listener function that gets called after the event fires. The object obtained by referencing "target" is the object that dispatched the event. The object obtained by referencing "currentTarget" is the object that is listening for the event. With event bubbling, there can be a difference between the object that dispatched the event and the object that was listening for the event.

Learning ActionScript 3.0

There are several useful resources available from Adobe as you learn ActionScript 3.0. The ActionScript 2.0 Migration guide is particularly helpful for learning the equivalent commands in ActionScript 3.0. The Adobe Development Center also has articles on an ActionScript 3.0 Overview as well as a Tips & Tricks article.

Furthermore, the step-by-step instructions and examples presented in the ActionScript 3.0 Essentials Training video on Lynda.com (subscription required) were instrumental in my coming up to speed with ActionScript 3.0.

Streamline Code Using The Conditional Operator

Instead of writing 5 lines of ActionScript code for a simple if..else block, you can achieve the same logic in 1 line of code using the "?:" conditional operator.

For example, the following piece of code...

     if (x < 5) {
          y = 1;
     } else {
          y = 2;
     }

... can be written in one line as follows...

     y = (x < 5) ? 1 : 2;

More information about the conditionanl operator can be found in the official Adobe documentation.

SWF to SWF Communication Issue Using LocalConnection Class

There is a rather straightforward way to have two SWFs on a single web page communicate with one another, as described in this Adobe TechNote. However, there is a limitation with this simple approach: the communication does not work properly when there are multiple browser windows open at the same time. The problem even occurs when there is one Internet Explorer window open and one Firefox window open. You can easily see this issue by opening the Adobe TechNote in multiple browser windows; the demo application will work on only one of the browser windows.

The reason for the problem involves the name for the connection that is specified in both SWFs when the LocalConnection class is instantiated in the code. Apparently, this connection name is not unique to a browser session, but is unique to the user's machine. Therefore, with multiple browser windows open at the same time, they all try to communicate within the first browser window that was opened.

The solution is to devise a way to define a unique connection name for each browser window that is opened. The same unique connection name must be declared in both SWFs in the same browser window. The approach I took to solve this problem is to generate a random number in JavaScript and then pass that number into both of the SWFs on the page through a querystring variable when providing the URL of each SWF.

For instance, the random string can be defined in JavaScript as follows:

     var ranString = Math.random().toString();
     ranString = ranString.substr(ranString.length - 10, 10);

... and, the random string can be passed into the SWF as follows (assuming that the SWF is being presented using SWFObject):

     var swfurl = 'movie.swf?rs=' + ranString;
     var so = new SWFObject(swfurl, 'swfname', 100, 100, '7', '#ffffff');
     so.write('divname');

Then, whenever you reference the name of the connection in ActionScript, you append the random string that was passed into the SWF, for example:

     incoming_lc.connect("lc_example" + _root.rs);

Now, whenever a browser page loads, the two SWFs on the page reference the same connection name, and this name is unique to that particular browser window. Multiple browser windows can be open with the same page loaded, and the SWF to SWF communication will work as desired.

ActionScript and MXML Code Samples

Ted Patrick created a community-driven repository of ActionScript and MXML code called "Just MXML and AS3". His blog posting announcing the forum can be found here. I learned about this forum from Brian Riely's blog posting.

Flex Quick Starts: Building Custom Components

There is a 4-part overview for building custom components with Flex in the Flex Quick Starts area of the Adobe Flex Development Center.

  1. Building components in MXML: Custom components defined as separate MXML files that are saved in a folder structure in the project. The root tag of the custom component identifies the control that is being extended, just as would be done using ActionScript. Components that contain multiple component definitions are called composite MXML components. If you want to extend the functionality of a composite component, you need to create a custom component that uses the composite component as its root tag. You can create reusable loosely coupled components by defining implicit accessors (setter and getter methods) in order to pass information back and forth. It is helpful to use the [Inspectable] metadata tag to indicate that the property should appear in the code hints of Flex Builder. It is considered a best practice to return information from a component back to the main application through the dispatching of events.
  2. Building components in ActionScript: Custom components can be coded in ActionScript and stored in a folder structure just like custom components for MXML files. You can use the setStyle() method in the constructor of the custom component in order to override the default settings of the component superclass.
  3. Building components using code behind: In practice you will use a combination of MXML and ActionScript to build Flex components; MXML is useful for layout of controls, and ActionScript is useful for defining the logic. With the release of Flex 2 comes a new technique for coupling the two together: code behind. You make this work by creating an MXML component and make its root tag correspond to an ActionScript class. In order for this to work, child controls must be declared as public properties in the ActionScript class. There is a thorough example provided using a best practices architecture that conforms to the Arp framework.
  4. Deploying components: You can deploy components as SWC files or as part of a Runtime Shared Library (RSL) for convenience, runtime efficiency and security purposes. In order to use SWC files when building a Flex application, you specify the SWC file on the Library path tab of the Flex Build Path in the Properties window of your project in Flex Builder.
MXML Tags and ActionScript Classes

Sho Kuwamoto put together a nice 3-part discussion on Flex MXML tags and how they map to ActionScript so that you know the implications of implementing various MXML code directives. Part 1 - Part 2 - Part 3.

Pros/Cons of Number vs. int vs. uint

There has been some discussion about the performance considerations and appropriateness of using Number vs. int vs. uint in various situations in ActionScript 3 code. After reading the analysis by Sho, Grant, Tink and Keith, my plan is to use Number almost all the time, except when I'm just using an integer counter in a loop, in which case I'll be using int (and not uint).

Resource Management in ActionScript 3

Grant Skinner gave a talk at the Flashforward 2006 conference in Austin regarding Flash resource management, including a discussion of the Garbage Collector in Flash Player 9. Grant provided sample code and classes (made available with the presentation) that use intelligent resource management techniques.

ActionScript 3 Coding Environment Options

At the most recent Boston Flash Platform User Group meeting, Keith Peters gave a talk about "Making Things Move in AS3." One of the main parts of his presentation was a discussion about the three options for getting started working with ActionScript 3:

  1. Download the new Flash 9 AS3 Preview (free for Flash 8 users)
  2. Purchase Flex Builder 2
  3. Download the Flex 2 SDK (free), which is basically just a SWF compiler. Then, you can download the FlashDevelop IDE (free) and Apache Ant (free) to organize your project files and compile instructions. Keith has made available on his blog the templates he uses to structure his projects using this configuration.
Object Oriented Programming Overivew

Ben Stucki wrote a brief overview of object oriented programming which covers:

Using _root (or not)

I wish that I had come across this posting by Grant Skinner a long time ago about the pros and (mostly) cons of using _root in your ActionScript code.