Flash Explained

In this easy Flash lesson I will show you how to use the coordinate system in Flash. You will learn the following:

• The directions in the Flash coordinate system,
• The difference between the way the coordinate system works in the Flash authoring environment and the way it is used by ActionScript,
• The main coordinate system and the movie clip based ones and more.

Preliminary steps

To learn more easily how the Flash coordinate system works, you will create some simple objects that will serve as practical examples. So, let’s get started!

1 Open a new Flash document. Select Modify > Document to gain access to the Document Properties panel. Set the width to 400 pixels and height to 300 pixels. Click OK.

There is no need to have a large document for this kind of lesson and I will also save on page real estate :).

2 Select the Rectangle tool (R). Jump over to the Options part of the Tools panel (at its bottom) and make sure that the Object Drawing option is turned off, like in the image below (the little circle in the blue outline square):

You can also turn off the magnet icon, which will disable the Snap to objects option.

3 Go to the bottom of the Tools panel, where the colors are situated. Block the stroke (line) color like this:

1. Click on the small pencil icon to select the stroke color (see 1 below).
2. Click on the red-stripe rectangle icon to block the stroke color (see 2 below).

This will make your work a bit easier. Since there will be a lot of selecting in this tutorial, it is better to draw a borderless rectangle — this will make possible for one-click selecting. Because when you have an outline around your drawn shape, you must double-click the shape to select both the fill and the outline. With just a fill, all you have to do is click once on it to select it.

4 Click and drag with your mouse to draw a rectangle on the stage. Make it about 80 by 60 pixels.

Fine. Before proceeding, I just want to point out one thing: when I say “select” (a shape, a movie clip, etc), I mean by that selecting the object in question with the Selection tool (V). Other tools won’t be used much here.

5 Save your document now and leave it open. OK, let me explain you now the main characteristics of the Flash coordinate system, before you start to play around with the rectangle.

Top of page

The basics of the Flash coordinate system

The classic Cartesian coordinate system (used in mathematics and geometry) consists of the origin point (0, 0) from which the x values spread in horizontal direction and the y values in vertical direction. The x values are positive to the right of the origin point and negative to the left. The y values are positive above the origin point and negative below it. The following figure displays that clearly:

On the other hand, Flash has a different coordinate system. The origin point of the stage (the main timeline) is always in its upper left corner. The main difference in regard to the classic system is that Flash has an inverted Y axis. So in Flash, the negative Y values are above the origin point and the positive ones below it. Here is a visual representation (the gray area is the zone outside the visible stage):

Why is the Y axis inverted? In my opinion, this is because of the direction in which all web pages scroll. When you load a web page in your browser, the only possible direction of vertical scrolling is down. Once you begin scrolling downwards, you can go back up again, but not any more once that you arrive on top of the page. So it makes sense that the downward direction of scrolling is the positive sense of direction, where all Y values are positive. And this applies to Flash documents.

The points in the Flash coordinate system are expressed in pixels. I will explain you now how the objects’ position is determined within the Flash’s coordinate system.

Top of page

The positioning of objects on the main stage in Flash

6 Go back to your Flash document. Select the blue rectangle, no matter where it is currently positioned. Have a look at the left part of the Property inspector. The X and Y fields indicate the current horizontal and vertical position (coordinates) of your rectangle.

The above rule applies to non-rectangular objects too. For example, draw a circle with the Oval tool (O). You will see that although it has no upper left corner, Flash takes this imaginary point as the reference for coordinates. The point in question is formed at the joining of imaginary lines that go from the circle’s topmost and leftmost points (marked by the dashed red lines in the image below).

7 This can be further proved if you align the circle to the stage’s origin point with the use of the Align panel, like this:

1. Select the circle.
2. Open the Align panel by selecting Window > Align.
3. Make sure that the Align/Distribute to Stage button is turned on (see 1 in the image below).
4. Click the Align left edge button (see 2 in the image below).
5. Click the Align top edge button (see 3 in the image below).

As you can see, the circle’s imaginary top left corner is aligned to the top left corner of the stage (its origin point). And if you take a look at the Property inspector, you will see that both the X and Y coordinates are set to zero.

As you have noticed, the coordinates are always displayed as a number, followed by a decimal point which is followed by a numer: 77.0, 10.1, 340.5, 60.0 etc. This means that an object’s coordinate (whether X or Y) may or may not be a round number.

Does this affect your movie in any way? Well, before (think Flash MX), precisely drawn objects like hairline lines wouldn’t render well if they were placed on non-round coordinates. In the final SWF, they would show up blurred or messed up. This was especially true for pixel fonts, which require to be placed on round coordinates (whole pixels). With the arrival of Flash 8, this isn’t necessary any more. I have tested movies with pixel fonts and thin lines drawn inside them, and they turn out good basically all the time. The rendering capabilities of Flash 8 are simply great. So I don’t think this is an issue any more.

OK, let’s move on to movie clips so that you can see the difference between these and the main timeline!

Top of page

The coordinate system of a movie clip symbol

8 Erase the rectangle that you made previously and draw a new one, but bigger. Make it about 300 by 200 pixels.

9 Select the rectangle and then choose Modify > Convert to Symbol (shortcut key: F8). In the dialog that appears, type any name you want (like big rectangle, for example), select Movie clip as type, choose the middle right Registration point (you can see it in the screenshot below) and click OK.

You will see in a few steps why this registration point was chosen instead of the standard top left one.

10 Enter inside this movie clip by double-clicking on it.

11 Lock the first layer inside the movie clip and call it background. Make a new layer above it and call it object.

12 Choose the Rectangle tool (R) and draw a small rectangle (let’s say about 50 by 40 pixel) in the object layer, with a different color than the big background one.

13 Select the small rectangle you just made and align it like you aligned the circle in step 7. If you followed the steps exactly as I laid them out, you will get the same result as the one shown in the image below.

This can also be confirmed by the small rectangle’s coordinates: take a look at the Property inspector. You will see that the small rectangle’s X and Y values equal zero.

So, if you were to move the small rectangle to the left, its X coordinate would become a negative value, which is logical — because it is currently situated left of the origin (i.e. the movie clip’s registration point).

Remember that you can move the big rectangle movie clip as you like on the main stage — this won’t affect its own coordinate system in any way. The small rectangle will have the same coordinate values, independently of the main stage.

14 Save your document and keep it open.

You’ll see now how ActionScript handles the Flash coordinate system.

Top of page

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!

Comments

Submit a comment