How to create a background that is 100% width and height of the screen (=full screen), and content that is always right in the center, no scaling involved? That is a question I asked myself a few days ago, creating a website for my client. To give you the whole idea of the problem, let me tell you that the website in question had a gradient as the background, so definitely using html for the background was out of the question.
Solution
We'e gonna have to have a good look at two things. First of all, the embed script (I'm going to be using swfobject library).
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("swfs/home.swf", "Home", "100%", "100%", "8", "#000000");
so.addVariable("flashVarText", "this is passed in via FlashVars for example only");
/*so.useExpressInstall('/swfs/expressinstall.swf');*/
so.addParam("scale", "noscale");
so.write("flashcontent");
// ]]>
</script>
As you probably noticed, these are regular SWF embed scripts except there is one parameter that isn't usually there - no scale. This is crucial because we want movie clips constrain dimensions.
Secondly, the SWF. For the sake of this tutorial let's assume there are only 2 symbols: bg_mc and content_mc.
- function stageResize(){
Stage.align = "L,T"; - bg_mc._width = Stage.width;
- bg_mc._height = Stage.height;
- content_mc._x = Math.floor(Stage.width/2);
- content_mc._y = Math.floor(Stage.height/2 +20);
- }
Explanation
- function stageResize(){
- Stage.align = "L,T";
- bg_mc._width = Stage.width;
- bg_mc._height = Stage.height;
- content_mc._x = Math.floor(Stage.width/2);
- content_mc._y = Math.floor(Stage.height/2 +20);
- }
In this several lines of code we define a function that will do all the resizing and postioning stuff. Line 2 tells Flash how things should be aligned in SWF, L stands for left, and T for top. The next 2 lines make sure that Movieclip bg_mc is always as big as the stage - we change the _width and _height properties. In the last 2 lines we change the coordinates of the main Movieclip called content_mc, so that it is always centered.
- stageListener = new Object();
- stageListener.onResize = function ()
- {
- stageResize();
- };
- Stage.addListener(stageListener);
- stageResize();
Now we create a new object called stageListener that will hold a function that is supposed to act when stage is resized. Finally in the line last but one, we add the listener to the Stage and execute the function.
Yes, that's it! The stage is always 100% width and height of the window and content is right in the center.
This is really cool and can be used presentation and such like!
