Learning ActionScript 3.0

Understanding the basic display object properties like x, y, width, height etc... is imperative for anyone interested in intermediate level ActionScript. It's important to practice using properties until you understand them well enough to solve problems using them. If you're not comfortable with properties yet, you should read through Chapter 3 and then try the exercises in the Property Practice (simple motion) post.

One of the more common things you'll find yourself doing with properties is using them to position display objects relative to one another.

If you have three arbitrarily placed movie clips on your stage, box0, box1 and box2...

...you can align them by putting the following code on your main timeline:

// alignment code
box0.x = 100;
box0.y = 100;

// position box1 based on box0's x and width properties
box1.x = box0.x + box0.width;
box1.y = box0.y;

box2.x = box1.x + box1.width;
box2.y = box1.y;

Clips aligned with code

The power of this kind of relative alignment may not be immediately apparent from looking at the code. However, try changing the width of one of the boxes, and then test your movie again:

Relatively positioned clips remain properly aligned

The clips are still aligned despite having different width values. Continuously aligning clips on an enter frame event opens up some different possibilities:

Roll over each box:

  Download align_nav_1.fla (6.9 KB, 155 hits)

Above we've used the align technique to create a row of dynamically resizing buttons. Here's the code:

In the above code the setupRollOver function adds listeners to each box causing their scaleX property to grow to 300% when a roll over event is received. Lines 31-39 run the previously discussed alignment code each time an enter frame event occurs so that the clips remain aligned at all times.

Expanding the Example

If we wanted to add a box to this example, we'd have to duplicate a bit of code and drag out a new box instance from our Library. If we wanted to have ten boxes, our align code would start to look very repetitive:

box1.x = box0.x + box0.width;
box1.y = box0.y;
box2.x = box1.x + box1.width;
box2.y = box1.y;
box3.x = box2.x + box2.width;
box3.y = box2.y;
box4.x = box3.x + box3.width;
box4.y = box3.y;
box5.x = box4.x + box4.width;
box5.y = box4.y;
box6.x = box5.x + box5.width;
box6.y = box5.y;
box7.x = box6.x + box6.width;
box7.y = box6.y;
box8.x = box7.x + box7.width;
box8.y = box7.y;
box9.x = box8.x + box8.width;
box9.y = box8.y;

Let's take a look at how we can get rid of that repetitive code and make the number of boxes in our navigation completely dynamic:

We've reduced the amount of work needed to change the number of boxes down to the variable boxNum. On line 6 we create a movie clip and store a reference to it in a variable called nav. We place all our boxes within this clip starting on lines 13-18. It's important to note that we've set the Box movie clip in our library to export for ActionScript.

The real trick is the way we loop through and position all the boxes:

for (var i:int = 1; i < boxNum; i++) {
    var b:MovieClip = MovieClip(nav.getChildAt(i));
    var prev:MovieClip = MovieClip(nav.getChildAt(i-1));
    b.x = prev.x + prev.width;
}

Within our for..loop we have references to the current clip b and the previous movie clip prev. We start the loop counter (i) at one so b is the second box and prev is the first box. The next time the loop runs b is the third box and prev is the second, and so on. The final result looks like this:

  Download align_nav_2.fla (5.7 KB, 149 hits)

As an exercise you might consider building on this code to create an accordion widget.

Advanced Align Example

A more advanced version of this alignment allows the user to drag and drop the boxes. This technique could be used to create a myriad of different Flash widgets. I've used it to create functionality similar to photoshop layers and primitive timelines like the ones you see in video and audio editors.

  Download advanced_algin.fla (7.8 KB, 184 hits)

This is what the code looks like:

The basic structure of this code is similar to the prevous examples with a few important differences. All the boxes are stored in an array. On line 47 we call the Array.sortOn() method which sorts the boxes array according to the x position of each box. So the box with the lowest x position will become boxes[0]. Once the array is sorted we're able to run our align code (lines 56-63), which works almost exactly the same as it did in the previous examples. The only difference is that we set the local variable xDest that exists within each box instead of directly setting each box's x property. xDest is then used in conjunction with Zeno's paradox.

 Print This Post

Related Content

• Grids: Arranging Clips
• More Properties (Blend Modes and Filters)