Flash Explained

Learn Flash easily.

Understanding how the coordinate system in Flash works

October 24th, 2008 | Author: Luka | Category: Basics


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.

Modifying the properties of a Flash document.

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):

The snapping to objects and object drawing are turned off.

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).

Blocking out the line color in Flash.

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.

A blue rectangle with black border on the stage in Flash.

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:

The classic Cartesian coordinate system.

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):

Flash coordinate system.

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 coordinates of the rectangle shape marked on the stage.

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).

Every object in Flash has a top-left point which defines its position in Flash space.

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).

The Align panel with the align/distribute to stage option turned on.

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.

The aligned circle.

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.

The new, big rectangle.

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.

Making a movie clip symbol.

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.

Just 2 layers inside this movie clip.

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.

A small rectangle inside the movie clip symbol.

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.

The small rectangle is aligned inisde the movie clip symbol.

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.

The coordinates of a shape inside a movie clip symbol.

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).

Moving the shape inside the movie clip symbol.

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).

Exiting the movie clip symbol.

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.

The instance name of the symbol.

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.

Manually adjusting the position of the Movie clip symbol.

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

The big rectangle is aligned with the origin point now.

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

Adding a layer for actionscript code.

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

The first frame of the actions layer was just selected.

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.

The SWF test window in Flash.

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:

The movie clip as positioned via ActionScript.

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.

The registration point of a movie clip symbol.

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:

Positioning a movie clip programmatically.

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.

The ActionScript way of working with the coordinate system explained.

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.

Upper left corner as a registration point of a movie clip symbol.

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!

Be Sociable, Share!

Comments

Submit a comment

  • Tim Dec 15, 2008 at 5:40 pm

    Although I am not entirely new to flash I am somewhat of a novice. I primarily use simple motion and alpha tweens to get the result I want and have yet to create a movie clip. Since my skill level has progressed I am now ready to delve a little deeper.

    I am grateful to have found this explanation of the coordinate system within flash. It has helped me understand a lot of things concerning object placement. However, I do have one question. While trying to place an object within the clip I cannot see the stage. Some of my objects need to move from off stage to an on stage location. Is there a way to show the boundaries of the movie clip stage?

    Any clarification on this would be appreciated.

  • J10 May 11, 2009 at 8:57 am

    Thank you The explaination was very useful.

  • Abhisek Nag May 23, 2009 at 8:57 am

    I had experimented with flash long back.That exercise proved futile.
    Today, I decided to learn it and searching for a proper tutorial. I found yours.It really made my go.

    Thanks a lot for such a well-explained tutorial.

    If you don’t mind, may I have your e-mail id to get in touch with you, in case I need some help?

  • George Jul 24, 2009 at 1:48 pm

    It is very useful info!

  • Wayne Sep 23, 2009 at 5:11 pm

    Thanks for this information. It proved very useful

  • mubarak Oct 15, 2009 at 6:56 am

    tanks for this important basic information

  • m polson Dec 10, 2009 at 7:05 pm

    a university and or others thought they could use the flash cordinate and ora carttession cordinate systems and by using vowifi and bluetooth cell phones manipulate sound and to stream imiages with cell phones by actionscript and flash cordinate systems by pointing a cell phone at ur headf will u sleep and using angles and xyz from base puter could stream imiages back to cell phone and stream it at ur head is it possable hell yes it is and by accessing directorys and altering the sound onfourier transform actionscripts and using symmetrics of cell phones could stream dangerous radio waves to streaming the same way

  • nhotz Dec 20, 2009 at 4:02 am

    Loua and clear, great tutorial. this is my problem before.more thanks… it helps me alot..

  • Varun Bhardwaj Jan 19, 2010 at 6:38 pm

    Simple yet very effective to understand important basics, Thanks !!

  • Staging Feb 25, 2010 at 12:54 pm

    I want to add an mouse click event which sends the x,y-coordinates of the underlying image to a database. I do not have a solution how to get these values especially in the case when I zoomed in the image or paned the viewport.

  • technology analysis Feb 26, 2010 at 8:23 am

    Yes, you can define the Michigan GeoRef coordinate system in MapViewer 7 and Didger 4 and use it as the original coordinate system of imported files, or as the destination coordinate system when performing a projection conversion.

  • […] created via ActionScript in the main movie’s upper left corner, which is the origin point of Flash coordinate system. Before I explain to you how the rectangle was created, you will move the myButton1 movie clip so […]

  • Kathleen Mar 7, 2010 at 7:25 pm

    If all of the lessons are this easily explained, I think I stand a good chance of actually learning this! I tried Macromedia’s version of the tutorials and was confused very early on. This actually makes sense! On I go to the next lesson.

  • […] is the reference point by which your movie clip will be handled by ActionScript in relation to its coordinate system. Also, all the modifications and transformations such as distortion, rotation, skewing etc will be […]

  • Anonymous May 19, 2011 at 9:01 am

    […] […]

  • Andrei Jun 23, 2011 at 9:48 am

    Very nicely written, thanks! Easy to understand.

  • Anooj Muljee Feb 15, 2012 at 5:37 am

    Hello,

    In step 17, when I try to set the X & Y value to 0.0, mine rather gets move to a different position. That said, for some reason, it is still basing its coordinate system on the rectangle not on the stage.

    Below is the link for the picture as how it’s appearing on my end for step 17: http://bit.ly/zDrT3P

    Your help would be greatly appreciated on this.

    Best Wishes,
    Anooj

  • […] gems such as the comment below (I was looking for some random shit to do with ActionScript 2): m polson Dec 10, 2009 at 7:05 […]

  • […] In addition to getting the album together I’ve been constructing an interactive Flash animation for some promo materials.  That has slowly been doing my head in but it’s damn near ready now.  Which brings me to the topic of crazy people – no, really.  You see, if you’re anything like me then you won’t be able to resist reading the comments on various blog posts that you happen across.  Sometimes I skim the post and meticulously read the comments.  It’s a glaring fault in my character. However, you can’t really blame me when it’s possible to stumble across intellectual gems such as the comment below (I was looking for some random shit to do with ActionScript 2): m polson Dec 10, 2009 at 7:05 pm […]

  • nirav Jul 9, 2014 at 2:43 pm

    nice work. so easily explained.

You must log in to post a comment.