Home > Articles > Design > Voices That Matter

Web Design Reference Guide

< Back Page 44 of 339 Next >

Creating a Full-Screen Web Site with Flash CS3

Last updated Oct 17, 2003.

If you’re looking for more up-to-date information on this topic, please visit our Web Design article, podcast, and store pages.

With all of the flexibility of liquid layouts in CSS, it’s easy to see why full-screen Flash web sites are becoming more popular. A full-screen Flash web site is one that takes up 100% of the browser window, but doesn’t scale according to the window size. This functionality is nothing new; it just hasn’t become popular until recently. In this article, we’ll take a look at how to create a simple full-screen Flash web site, starting from the files that are published through Flash. The sample that’s created in this article can be downloaded here.

First, fire up Flash and create a box in the middle of the stage (see Figure 1). The size of the movie doesn’t matter, because we’ll set the dimensions to 100% in the HTML file.

Figure 1 A simple box.

Our goal now is to publish this movie and keep the box centered in the middle of the browser window regardless of the window’s size. In the Publish Settings dialog, make sure that the Scale option is set to "No scale" and that the Flash alignment is set to Center for both Horizontal and Vertical (see Figure 2). Then publish the movie.

Figure 2 Publish Settings.

Now open the HTML file that was published by Flash (see Listing 1). Change all of the width and height options to 100%. There should be three of each—one in the JavaScript, and one each in the object and embed tags.

Listing 1 Updating the HTML for full-screen.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Full Screen Flash</title>

<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body>
<script language="javascript">

    if (AC_FL_RunContent == 0) {
       alert("This page requires AC_RunActiveContent.js.");
    } else {
       AC_FL_RunContent(
           ’codebase’, ’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0’,
           ’width’, ’100%’,
           ’height’, ’100%’,
           ’src’, ’shell’,
           ’quality’, ’high’,
           ’pluginspage’, ’http://www.macromedia.com/go/getflashplayer’,
           ’align’, ’middle’,
           ’play’, ’true’,
           ’loop’, ’true’,
           ’scale’, ’noscale’,
           ’wmode’, ’window’,
           ’devicefont’, ’false’,
           ’id’, ’shell’,
           ’bgcolor’, ’#ffffff’,
           ’name’, ’shell’,
           ’menu’, ’true’,
           ’allowFullScreen’, ’false’,
           ’allowScriptAccess’,’sameDomain’,
           ’movie’, ’shell’,
           ’salign’, ’’

           ); //end AC code
    }
</script>
<noscript>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" id="shell" align="middle">

    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />

    <param name="movie" value="shell.swf" />
    <param name="quality" value="high" />

    <param name="scale" value="noscale" />
    <param name="bgcolor" value="#ffffff" />

    <embed src="shell.swf" quality="high" scale="noscale" bgcolor="#ffffff" width="100%" height="100%" name="shell" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

    </object>
</noscript>
</body>
</html>

If you test the movie at this point, it will provide the results, but we’ll be left with scrollbars. To lose the scrollbars, we’ll need to add a little CSS to the head in order to eliminate the margin around the body (see Listing 2).

Listing 2 Eliminating the margin around the body.

<style type="text/css">

body
{
    margin: 0px;
}
</style>

We’ve created a flexible full-screen Flash web site. It’s not very exciting, though, so let’s spice it up with a Stage event and a little Tween action.

First, we’ll need to convert our box into a MovieClip and create a class for it. Let’s name the class Box and put it in a shape package (see Figure 3).

Figure 3 Creating a Box class.

The Box class will define how Box instances position themselves when the stage is resized. In the constructor function, we’ll listen to the RESIZE event and fire a positionBox function when the stage is resized. We’ll also add the positionBox function to the constructor to make sure that we position it when the movie initially loads. In our positionBox function, we’ll determine the stage width and height and animate the box to the center of the stage with the Tween object (see Listing 3).

Listing 3 Creating a `Box` class.

package com.krishadlock.shape
{
    import flash.display.MovieClip;
    import flash.events.Event;
    import fl.transitions.Tween;
    import fl.transitions.easing.*;
    
    public class Box extends MovieClip
    {
       
       public function Box()
       {
           this.positionBox();
           stage.addEventListener(Event.RESIZE, onStageResize);
    }

       private function onStageResize(event:Event):void
       {
           this.positionBox();
       }
       
       private function positionBox():void
       {
           new Tween(this, "x", Elastic.easeOut, this.x, stage.stageWidth/2, 1, true);
           new Tween(this, "y", Elastic.easeOut, this.y, stage.stageHeight/2, 1, true);
       }
       
    }
    
}

With this new code in place, the box won’t position itself in the center of the movie until we change the alignment in the publish settings to upper left. This is because if the movie is centered in the page, the upper-left corner of the movie won’t be the upper-left corner of the browser, which will obviously throw off the calculations when positioning the box. Open the Publish Settings dialog box again, and change the Flash alignment settings to Top for Vertical and Left for Horizontal (see Figure 4). Be sure to reapply the CSS and the 100% width and height to the HTML file after you republish it.