It’s Friday again – and that means we’ve just uploaded another Actionscript training video to YouTube! This one forms the beginning of a series on Maths-based Actionscript programming and looks at positioning and centring visual elements on screen. Think of it as something gentle to get you started…
I really love these topics and it’s an area that at first leaves quite a few people stumped on our Introduction to Actionscript Training Course so it seemed like an excellent candidate for another training video.
We’d also love to hear about what kind of maths causes you difficulties when writing Actionscript - please leave a comment.
View the video after the break, along with further tips and tricks.
Although it’s not exactly glamorous, writing code to position elements on screen is perhaps one of the most common tasks for Actionscript development. Pretty much every project requires it. That’s the same whether you are developing in the Flash IDE or creating a Flex application. More often than not you’ll also be required to adjust the layout relative to the width and height of the SWF – and this is where some simple mathematics work wonders.
Take a look at the YouTube tutorial – or view it on YouTube – and then read the rest of the post for a more in-depth look at the topic.
Remember the registration point
When you write positioning code, it’s vital to consider the registration point of your display object. You’ll need slightly different calculations depending on where it is. This is because setting the x and y values moves the display object so that the registration point is positioned at those coordinates.
Note that the registration point only really comes to bear in Flash – when you’re working with external code-editors and graphics that are loaded or created with code, your registration point is generally in the top-left corner.
It’s easy to see the effect the registration point:
- Create a MovieClip from any kind of shape, place it on the stage and give it an instance name (‘mc’ will do for now).
- Write a line of code that positions the MovieClip instance at a certain location:
mc.x = 200; mc.y = 200;
- Publish and see where the MovieClip ends up.
- Now go back into the MovieClip symbol (double-click on it on the stage) and simply move the graphics around a little. This in effect changes the registration point.
- Re-publish and compare the different positions.
Once you are aware of the importance of the registration point, everything else suddenly becomes very straightforward.
Calculating stage dimensions
To do any kind of relative positioning or centring, you’ll need to be able to retrieve the width and height of the SWF. This is straightforward via the stage object:
trace("The stage width is: ", stage.stageWidth); trace("The stage height is: ", stage.stageHeight);
That is actually pretty easy, isn’t it?
stage.stageWidth and stage.stageHeight also work in Flex and Actionscript-only projects – but you must make sure that your code is in a DisplayObject which has already been added to the stage, otherwise you’ll get a null object exception. There are events for that kind of thing but that’s another story.
Right-aligned objects
So now you know the dimensions of the stage – how do you align an object to the right-hand edge? This is done in three easy steps – and we’ll assume that the registration point is in the top-left hand corner for now.
We’ll continue with the ‘mc’ MovieClip instance from the previous example:
mc.x = stage.stageWidth - mc.width - 10; // 10px margin
Not sure why that works? Well, either consider the little diagram below or grab a pencil and try to sketch it.
I find that visualising this scenario in my head or scribbling on a bit of paper works wonders for finding the right positioning code.
Centring
Never mind writing Actionscript – finding the right spelling for that word was a whole different ball-game! If you’re reading this from the USA, you might prefer “Centering”…
Anyway, one of the most frequent positioning tasks is to centre objects either relative to one another or relative to the entire SWF. The same techniques we used for relative positioning above also work here!
Centring with a top-left registration point looks like this:
mc.x = ( stage.stageWidth - mc.width ) / 2; mc.y = ( stage.stageHeight - mc.height ) / 2;
Not sure how it works? Again, scribble on a piece of paper or consider the following diagram:
Centring with a middle registration point looks like this. It’s a little more straightforward, so if you know the object will be centred, you can choose your registration point accordingly.
mc.x = stage.stageWidth / 2; mc.y = stage.stageHeight / 2;
And, finally, if you need to centre one object relative to another, you can use exactly the same technique – just replace the stage object with another MovieClip!
mc.x = otherMc.x + ( otherMc.width - mc.width ) / 2; mc.y = otherMc.y + ( otherMc.height - mc.height ) / 2;
And, as a final little twist, if you need to ensure that the resulting position will always sit on a full pixel, you can simply round the result:
mc.x = otherMc.x + Math.round( ( otherMc.width - mc.width ) / 2 ); mc.y = otherMc.y + Math.round( ( otherMc.height - mc.height ) / 2 );
No more diagrams for this one – hopefully you’ll have worked it out by now!
Conclusion
These techniques should give you all the tools you need to create a wide range of dynamically calculated layouts. I can’t stress enough how much easier it is if you work everything out on paper first – I’ve even been known to cut little squares out and move them around to see the effect it has.
Still not sure what it’s all about? Leave a comment and I’ll try to help.
There’s more coming soon, happy coding in the meantime!
Tags: Beginner