Watching:

Placing objects at the edges of the stage


show more Placing objects at the edges of the stage provides you with in-depth training on Developer. Taught by Todd Perkins as part of the ActionScript 3.0 in Flash Professional CS5 Essential Training show less
please wait ...

Placing objects at the edges of the stage

Often when working with ActionScript, you want to align an object to the edge of the Stage, or particularly in a game, detect whether the object has touched the edge of the Stage. On the Stage, here I have boarder_mc and trash_mc. I'll select the first keyframe in the actions layer, and open up the Actions panel. Centering an object to the left or top edge of the Stage is really easy, if you have top-left registration. Type boarder_mc.x = 0 and test the movie.

So there is the border at the left edge of the Stage. I can copy and paste this line of code - Command+C or Ctrl+C to copy, Command+V or Ctrl+V to paste - and simply change x to y in the pasted code and test the movie to see the boarder aligned to the top edge of the Stage. It's a little different if you want to the object to be aligned to the right edge of the state, or to detect whether an object is at the right edge of the Stage. The right edge of the Stage can be reached by Stage.StageWidth - remember that always represents the width of the Stage, minus the width of the object.

Because remember, if we set the x position of the boarder at the StageWidth, then it would be off the Stage because the left edge of the border would be aligned with the right edge of the Stage. So after the Minus sign, we'll offset that by boarder_mc.width. Test the movie, see the boarder at the top-right of the Stage. Now if I simply copy and paste this line of code, change x to y, StageWidth to StageHeight, and boarder_mc. width to boarder_mc.height, test the movie, and the same principle applies.

Now let's say you wanted to reuse this code and put it inside of a function. Let's wrap this code around a function. Push everything down, create a function called alignToEdge, parentheses, colon, void, tab the lines in and wrap everything with curly braces. So now I've wrapped this into a function. I can just call it whenever I want. I am going to write obj, as a parameter, datatype it to a MovieClip, and then change boarder_mc to obj inside of the function.

That way, anytime I want to align an object to the edge of the Stage, I can run the alignToEdge function and pass in whatever object I want, and it won't just apply to the boarder. Let's go below the function, and then I am going to type alignToEdge. Then I am going to pass in trash_mc. So we'll align that to the bottom-right edge of the Stage. And test the movie, and it applies to the trashcan. So if I were to change that to boarder_mc, it would apply to the boarder.

So I can apply it to any object I want, as many times as I want. Now if you really wanted to add features in this function, you can have it specify whether you want to align to the left, or to the right, or to the top, or to the bottom. Let's look at how to do that. After MovieClip, inside of the parameters area of the alignToEdge function, type a comma and then type a t. This will represent whether you want to align to the top edge of the Stage. Type a colon after the t and then type Boolean. This is going to be a true or false value.

We'll do the same thing for the right, with an r, also Boolean, for the bottom - I am working clockwise, you see - Boolean, and the left which will also be Boolean. So I can specify how I want to align the object to the Stage. And in here I can use IF statements to determine how I want to align the object. All right, inside of the function, I am going to use an IF statement, and I am just going to see if t is true. If t is true, then I'm going to align the object to the top edge of the Stage.

So obj.y equals zero. I can copy and paste this IF statement, change t to l, representing the left edge of the Stage. If that's true then we can set the x position to zero. I'll go down below the curly braces, I'll type if r, in parentheses, and wrap this next line of code into curly braces. So this will align to the right edge of the Stage if r is true. And lastly, check to see if b. If we want to align to the bottom edge of the Stage, tab that code in and wrap it in curly braces.

So now we'll scroll down, and let's say we want to align the boarder to the bottom-left of the Stage. So when we run alignToEdge, we're going to pass in those four Boolean parameters; remember, Boolean is simply true or false. So after boarder_mc, I'm going to type a comma, and then I have - my code hinting even shows me - t, r, b, l. So top is going to be false, right is going to be false, bottom is going to be true and left is going to be true.

So I'll test the movie, and the boarder is aligned to the bottom-left of the Stage. So you can pass in whatever parameters you want to align any object to any corner of the Stage. Now, if any of this got a little bit confusing, don't worry. I just went out there for people who want to learn a little bit more and go a little bit deeper into ActionScript. If you take anything from this movie, just take away that you can align the object to the top-left, by setting its x and y positions 0, and you can align an object to the bottom-right by setting its position to the width or height of the Stage, minus the width or height of the object.

Placing objects at the edges of the stage
Video duration: 5m 53s 7h 8m Beginner Updated May 23, 2012

Viewers:

Placing objects at the edges of the stage provides you with in-depth training on Developer. Taught by Todd Perkins as part of the ActionScript 3.0 in Flash Professional CS5 Essential Training

please wait ...