Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
In this easy Flash lesson I will show you how to use the coordinate system in Flash. You will learn the following:
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:
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.
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.
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.
REMEMBER It is the upper left corner of an object that is determining its position on the stage.
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:
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!
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.
IMPORTANT The above example shows you that a movie clip symbol has its own coordinate system which is independent from the main stage coordinate system, with the movie clip's registration point being the origin.
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.
Move on to the next page to see how ActionScript handles the Flash coordinate system.
