Making Flash sites scroll vertically

One of the things that has always bugged me about developing full-flash websites, is the way that Flash sometimes makes it difficult to implement behavior that users rely upon for a good experience. Things like deeplinking, context menus, mouse-wheel scrolling, are all possible – but at a cost to developer time. One such issue which I found particular irritating was the fact that Flash websites set at 100% width and height suffer from visibility issues when the end user’s monitor or window is set at a smaller setting. The easy solution is to set your containing html element at a fixed height, but that doesn’t always work – especially if you have dynamic .swf content loaded into your shell .swf at different times. Also, if you’re trying to scale a background image or other elements, this doesn’t really work. My purpose was to create a solution which would allow a full flash website vertically scroll with the use of the standard browser scrollbar, like this. I discovered this technique while developing a recent project that had several sections of expanding content.

Our Requirements

To accomplish browser based scrolling in Flash, I surmised the following as benchmarks for success:

  • Devise way to control page height _dynamically_ through my Flash website’s shell .swf
  • Provide a method for any .swf file loaded into the shell to resize the HTML window at will (e.g. user clicks on accordian element in child movie, the page height will adjust accordingly)
  • Show HTML scrollbars any time a user’s browser window dropped below the defined minimum for that page
  • Hide HTML scrollbars and act like a normal full-flash website once the user’s minimum height requirement has been met

Our assumptions:

  • Accepted browsers are the usual suspects: IE6+, Firefox 2+, Safari 2+
  • It works with Flash 9 (it’ll work in 8, too)

h2. How it works

To make our solution, there are a couple key ingredients we need:

  • Simple Javascript function which will handle events in the Flash file
  • Resize logic in the Flash movie which will react to window resizing
  • A commonly used JavaScript library called Prototype (but many others would work, too) to help access page properties

Starting off, we’ll set up our Flash movie and make sure that our movie is set to scale properly. For this example, we’re using top left stage registration, but you can use whatever you’d like. The code below are small sections of the complete code base which can be downloaded here: source files.

import flash.external.ExternalInterface;

public function Shell(){
   stage.scaleMode = StageScaleMode.NO_SCALE;
   stage.align = StageAlign.TOP_LEFT;
   stage.addEventListener(Event.RESIZE, onResize);
}

Once we know that this is in place, we can next write our resize logic, which will execute each time the Flash movie is resized
Actionscript 3

/**
* Handles screen resize
*/
private function onResize(e:Event = null) : void {
        // This function simply sets the
        // height and width of the background to stage
	resizeScreen(); 

	// Tell the outside world that the screen size has changed
	if(ExternalInterface.available) {
		ExternalInterface.call("onFlashResize", minHeight);
	}
} // end onResize

What’s going on here is that we’re simply saying “If Javascript is available, make an outside call to the Javascript function called _onFlashResize_”. We also pass it a variable called _minHeight_ which allows us to define the minimum height allowed by our Flash application. So if users on a 500px tall screen view our movie which has set a 600px minimum height, there will be an HTML scroll bar allowing users to view the rest of the content.

Now let’s take a look at the Javascript which will make this all possible:
Javascript

/**
* Called when the Flash has been resized. Triggered by the Flash movie
*/
function onFlashResize(height) {
	var newHeight = Math.max(height, document.viewport.getHeight());
	$('wrapper').setStyle({height: height + 'px'});
}

With this function, we find out the highest of these two values: our movie’s minimum height and the total height of the user’s browser. Using the largest of these two values, we set the Flash container div (called _wrapper_) to this new height. This ensures that if the user’s browser window goes below the minimum height, the browser’s scroll bars will appear.

What’s cool about this trick is that it makes it extremely easy to create multi-paged Flash movies that react to user interaction without having to rely on Flash based navigation techniques that many people dislike. For instance, this technique can be used in an accordian menu to easily display content and resize the page accordingly. The end result is an experience which is more like other websites and doesn’t require your users to learn an additional way of accessing content.

“Download Source”:http://www.natemiller.org/examples/flash_vertical_scrolling/source.zip



One Response to “Making Flash sites scroll vertically”

  1. Adrian Parr says:

    swffit is really handy for doing this.

    http://swffit.millermedeiros.com/

Leave a Reply