Understanding how the coordinate system in Flash works — part 2

ActionScript's way of handling the coordinate system

15. Click on the Scene 1 link above the layers to exit the movie clip's timeline and get back to the main timeline (the stage).

16. The big rectangle movie clip symbol should be selected by default upon exiting it. If it isn't, just select it. Go to the Property inspector and give it an Instance name: call it bigRectangle.

Without the instance name, you just wouldn't be able to move the movie clip programatically. That's why it is a must if you wish to control it via ActionScript code.

17. Align the big rectangle movie clip with the main stage origin point. You can do it either via the Align panel or just by manually typing the coordinates directly into the Property inspector: both values should be set to zero.

Whichever method you applied, you should get the following result:

18. Lock the current layer and call it rectangle. Make a new layer above it and call it actions.

19. Click on frame 1 of the actions layer to select it for code input.

20. Select Window > Actions to access the Actions panel and place the following code inside it:

bigRectangle._x = 0;
bigRectangle._y = 0;

This simple piece of ActionScript code does the following: first you have the instance name of the movie clip that you want to manipulate, bigRectangle, followed by the _x property. This property of a movie clip is used to define its horizontal position. In this case, it is the movie clip's position on the stage, but it can be used to move a movie clip inside another movie clip, of course.

Then you have the assignment operator (=) and the value on the right side of it. The first line basically says that the X coordinate of the bigRectangle movie clip should equal zero. Nothing complicated. The second line does exactly the same thing, but for the movie clip's vertical position, via its _y property.

21. To see these lines of code act upon the bigRectangle movie clip, test your movie by selecting Control > Test Movie. Zilch! Nothing happened! If you have followed my instructions up until now, you should see an empty test window.

Yet, I assure you that everything is in order! Because you have got the right result by writing those two lines of ActionScript. Let me show you now why. Close the test window.

The two ActionScript lines have positioned the bigRectangle movie clip exactly as you wrote, on the origin point (0, 0). So the movie clip is placed outside the stage, like this:

And you don't get to see the movie clip in the test window, because the test window displays only the visible area of the stage (the white area).

Fine, you may say, but why is the movie clip positioned so? Shouldn't it be placed like it was on the stage, with its top left corner overlapping the origin point of the stage (top left stage corner)? No, it shouldn't, because ActionScript uses the Registration point of a movie clip to position it on the stage.

And this movie clip's registration point is the middle right one. Remember, you have defined it as such when you first created the big rectangle movie clip.

Don't be confused by the small circle in the rectangle's center. The registration point is on its right — it is the one that looks like a small target, with the cross inside it.

And this point is the one that was placed on coordinate points (0, 0) by ActionScript. Now you see how the ActionScript way of dealing with the Flash coordinate system differs from the one that is used when working on the stage.

If you want to place the big rectangle in the stage's top left corner via ActionScript, you would have to do it like this:

bigRectangle._x = 300;
bigRectangle._y = 100;

If you make this modification and test your movie again, you will get the following result:

This is because the big rectangle's registration point gets positioned on coordinates X = 300 and Y = 100. Since its registration point is on its right side, and its width is 300 pixels, by setting its horizontal coordinate to this same number, its left side gets aligned with the left edge of the stage.

And since its registration point is vertically in its middle, and its height is 200 pixels, by setting the Y coordinate to 100, you get the rectangle's upper side aligned perfectly with the top edge of the stage. The figure below explains this nicely.

Now you see why I made this particular choice for the registration point — to help you better understand how ActionScript deals with the Flash coordinate system.

And you also understand now why in the majority of cases it is the best option to select the upper left point for the Registration point of a movie clip symbol, like shown below.

When you make this choice during the creation of a symbol, you are making it easier for yourself to write ActionScript code later: you won't have to calculate the width and height of a movie clip in relation to the coordinate system to be able to position and move it around the stage.

That's about it for the Flash coordinate system! It was easy, wasn't it? Explore other ActionScript tutorials that I made, or the basic lessons in Flash to learn even more. Enjoy!