Introducing to Stage Coordinates System

In Math, we know Cartesian coordinate system. Good knowledge in math will supporting us to understanding Stage coordinates system.

In Cartesian main axis is divided into x axis (horizontal) and y axis (vertical). X and Y axis meet in (0,0). In X axis, The value of x is rise if increasingly to right. In Y axis, the value of y axis rise if fall more down.

In Flash stage, coordinates system is same with above, but the different is in y axis and coordinate (0,0). In Flash if y axis fall more down the value of y axis is rise. And Coordinate (0,0) is place in the upper left corner. Look at this picture:

For more explicit I’ll give example in application of flash coordinate system as following below:

Problem :

Make a ball that move upper left to right bottom diagonally.

To solve this problem, I’ll illustrate visually:

Thus, to move a ball diagonally, it meant that we moving x axis to right and y axis to bottom. The process of making the application are as follows:

• Create an object with oval tool.

• Select the object then convert into symbol by press F8 (menu insert>convert to symbol). Select movieclip  option type then type ball_mc in name. Notice in regristration, this part is determine the position of movie clip. For example, when we select registration in center, then movie clip coordinate calculation is calculate from center of movie clip, it not like in properties. In properties, coordinate calculation is calculate from upper left corner.

• Select movieclip ball_mc then change postion. Place it in upper left corner of stage. Still in movie clip selcection, open action panel (press f9) then type this script:

onClipEvent (enterFrame) {

// Move ball diagonally

_x += 10;

_y += 10;

}

• Run movie clip by press CTRL+Enter, then a ball will move diagonally from upper left to rigt bottom until disappear from stage. Press CTRL+W to back into stage.

Program Explanation

• onClipEvent (enterFrame) { mean that command inside { } will run over active frame (frame default setting is 12 fps), command inside { } will run every 1/12 sec in along running movieclip.
• Line //Move ball diagonally is comment line, this line not executed by flash.
• Line _x += 10; mean that every 1/12 sec the x coordinate of ball will added 10 pixel, so the ball will move to right. += is simplification of action _x = _x+10;
• Line _y += 10; mean that every 1/12 sec the y coordinate of ball will added 10 pixel, so the ball will move to bottom.
• Because the computer calculate very fast, the calculation inside { } seem done at once, thus ball look move diagonally. 

Source Code Download = Click Here