One of my recent projects involves developing a full screen Flash site that is of abnormal size, possibly requiring the user to scroll to view the entire site. This started out to be a bit of a conundrum, and didn’t readily avail itself to an other than lame solution. I started diving into using JavaScript to modify the CSS attributes of the container div for the flash content, an idea stemming from another project where I utilized JavaScript to equal the column lengths in a multi-columned layout, and it really works well – so I thought I could apply the same magic here.
To be fair, I did put some thought into manipulating the content within the confines of the stage, but after looking at my options I felt using the browsers built-in scrollbars was the best option. Having a scrollbar within the flash interface would take more time to build and skin to make it workable as a stage-level scrollbar, besides, why reinvent the wheel? There are several examples on how to build the scrollbar within Flash, but honestly they all looked half baked, and were little more than a couple of shaded rectangles with some code; not exactly awe inspiring. Although I was intrigued a wee bit by an ActionScript 3.0 version, but since I am nowhere near ready for that kind of commitment, that was way out of the realm of possibility. Besides, the browser is built for this.
Resize the Stage
In case you haven’t worked with resizing the stage very much, here is some basic code I used in the demo page to get the job done.
Stage.align = "TL"; // prevent the Flash movie from resizing when the browser window changes size.
Stage.scaleMode = "noScale"; // create a listener object
var stageListener = new Object();
stageListener.onResize = function() {
resizeStage();
};
Stage.addListener(stageListener);
// ————————————————————————- |
resizeStage = function () {
// center the background
this.mainBG_mc._x = Math.floor((Stage.width/2) – (this.mainBG_mc._width/2));
this.mainBG_mc._y = Math.floor((Stage.height/2) – (this.mainBG_mc._height/2));
this.mainContent_mc._x = Math.floor((Stage.width/2) – (this.mainContent_mc._width/2));
this.mainContent_mc._y = Math.floor((Stage.height/2) – (this.mainContent_mc._height/2));
};this.resizeStage();
I’m not going to dive into this bit of code in detail, since more details about full screen Flash sites and development can be found through some quick Googling, or on sites such as Were-Here, FlashKit and ActionScript.org. The basic size I choose for the content are is 930px wide by 380px tall, with a massive background image of 2500px x 661px. With that bit completed and exported, I move onto the display page.
Build the page
Again, to keep it simple it’s a simple XHTML Transitional page, you can of course embellish it any way you choose. I also used the venerable SWFObject here as well to display the Flash content within the page, and as a container and ID is needed to be able to accomplish my goal, this suits my needs perfectly. Here is the code for displaying the Flash:
<div id="flashContent"></div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("media/fullScreenFlash.swf", "fullScreenFlash", "100%", "100%", "7", "#FFFFFF");
so.addParam("quality", "high");
so.addParam("wmode", "opaque");
so.write("flashContent");
// ]]>
</script>
The target for the resize is flashContent. You will also need to apply styles to the page in order for the 100% width/height to work properly. I added them in page, again – you can do as you like to get the styles attached to your page.
<style media="screen" type="text/css">
html,body{ height:100%; margin:0; padding:0; }
#flashContent{ width:100%; height:100%; overflow:visible; }
</style>
All that is left now is for the JavaScript.
Coding the resize and CSS attribute changes
First, you will have to get the current width and height of the client browser every time it is resized, I found this handy bit of code over at howtocreate.co.uk, which is very compliant and works quite well.
var userWidth = 0;
var userHeight = 0;
// pad the height, width a bit so they don’t bump the edges of the browsers, +/- 10 – 20px
var minHeight = ‘400’;
var minWidth = ‘950’;
// set the sizes of the main content within the Flash site – NOT the stage size
// sizes for the target must be defined as Strings (i.e. ‘700px’)
// ——————————————————————————-
//determine the browser window size for various browsers
if( typeof( window.innerWidth ) == ‘number’ ) {
//Non-IE
userWidth = window.innerWidth;
userHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in ‘standards compliant mode’
userWidth = document.documentElement.clientWidth;
userHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
userWidth = document.body.clientWidth;
userHeight = document.body.clientHeight;
}
With some modifications to the handling of the gathered client window sizes, you are easily able to define the size of the flashContent div.
//change the DIV width/height properties
// set the div ID for the flash container
var resizeElement = document.getElementById(‘flashContent’);
if (userHeight < minHeight){
// you have to specify the ‘px’ here for the CSS to recognize the correct size
resizeElement.style.height = minHeight + ‘px’;
} else {
resizeElement.style.height = ‘100%’;
}
if (userWidth < minWidth){
// you have to specify the ‘px’ here for the CSS to recognize the correct size
resizeElement.style.width = minWidth + ‘px’;
} else {
resizeElement.style.width = ‘100%’;
}
Don’t forget to add the onResize to the body tag or it isn’t going to work.
<body onResize="resizeFlashContent()">
Here is the finished page. FullScreenFlash.html.
A second opinion
I ultimately finished this by getting out of the business of checking for a browser resize, and a Stage resize in Flash, instead letting Flash handle all of the heavy lifting at once. I added the function call to the resizeStage() function in Flash.
getURL("javascript:getClientSize(‘flashContent’);");
While also passing the div ID to the function to make it more portable to be used on other things rather than just a single use bit of code. So you will have to change the JavaScript function a little to accommodate this usage. Here is the final code sample:
function getClientSize(targetElement) {
var userWidth = 0;
var userHeight = 0;
// pad the height, width a bit so they don’t bump the edges of the browsers, +/- 10 – 20px
var minHeight = ‘400’;
var minWidth = ‘950’;
// set the sizes of the main content within the Flash site – NOT the stage size
// sizes for the target must be defined as Strings (i.e. ‘700px’)
// ——————————————————————————-
//determine the browser window size for various browsers
if( typeof( window.innerWidth ) == ‘number’ ) {
//Non-IE
userWidth = window.innerWidth;
userHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in ‘standards compliant mode’
userWidth = document.documentElement.clientWidth;
userHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
userWidth = document.body.clientWidth;
userHeight = document.body.clientHeight;
}//change the DIV width/height properties
// set the div ID for the flash container
var resizeElement = document.getElementById(targetElement);
if (userHeight < minHeight){
// you have to specify the ‘px’ here for the CSS to recognize the correct size
resizeElement.style.height = minHeight + ‘px’;
} else {
resizeElement.style.height = ‘100%’;
}
if (userWidth < minWidth){
// you have to specify the ‘px’ here for the CSS to recognize the correct size
resizeElement.style.width = minWidth + ‘px’;
} else {
resizeElement.style.width = ‘100%’;
}
}
This is a pretty straight-forward project once you get into it, although I am sure there is a more elegant solution out there than mine, this works well in the major browsers I have tested (IE 6, IE 7, Firefox 2 and Opera 9). The second option is what I would recommend, it seems to be more responsive and quicker than having the Flash file listening for a resize of the stage and the browser responding to the same resize. You could take it further and pass the minHeight and minWidth values into the function from the call in Flash as well with a simple modification.
Something I am already planning on is eliminating the bump from the scrollbars popping in and out when you resize the window. I know there are solutions out there, I just haven’t done to that extent yet. That’s next.