Full Screen Flash Site Tutorial

October 3rd, 2007

This flash tutorial will show you how you can make a full flash site, in full screen, that resizes gracefully.
Once again, i’m using my Layout and Model classes for finer control.
I’ll demonstrate keeping models centered, unscaled, or aligned, or scaled when the user resizes the browser.
I’ll also be using a tiled pixel gif as the background. so there’s a little cereal toy for you if you wanted to know how to do that too.

Here’s a demo created from this tutorial.
Full Screen Flash Site Tutorial demo

if you want to work this through on your own (and you should) then you would probably want to download the New Flash Project Template first. This way, it’ll be easier for you to understand if you plan on tweaking the hell out of this flash project.

Download the “New Flash Project” template

download “new_flash_project.tar.bz2” 12.7 KB
download “new_flash_project.zip” 16.5 KB
visit “New Flash Project page”

otherwise, the full script (main.as) is viewable at the end of this tutorial for Copy-n-Pastin’
or you can download the entire completed project for reference or strip it and use it as a template.

Download the “Full Screen Flash Site Tutorial Project”

download “FullScreenFlash.tar.bz2” 60.3 KB
download “FullScreenFlash.zip” 77.8 KB
view the complete project in action

on with the learning stuff…

Setup Your Flash Site layout and elements

Lets start by layers… The first layer is the background gif which is drawn onto a “layout”. So create a new Flash File, and just save it as blank.fla in the “layouts” directory.

Next, is the stretchy layout, the “resizable centered” element, create a new flash file, and draw in your elements. save this file and name it scaling.fla. it’s important to note that the dimensions of these new flash files do not matter, when the layouts (or even models for that matter) are loaded, the _width and _height is determined by the actual left most, right most, top most, and bottom most elements (visible or not). keep this in mind when you create this layout, if you want some padding at the bottom or right of this movie clip, add some “border elements” to set the limit and dimensions of this movie clip, very very important since we are resizing this according to the users browser.
We are creating this object as a “layout” object (instead of model) in case you ever wanted to add models in this layout. i didn’t, but you can so they can stretch…

So our last layout (the third, on top of the stack), is another blank layout just to contain some free floating models. you don’t need to create a new blank fla file (unless you want to, and you would want to if you plan on adding some creative visual elements to this layout). we’ll just use the existing blank.fla for now since i’m not interested in styling everything up right now.

now for the models… i use 3 models to demonstrate 3 different positioning techniques.
top.fla will be plainly centered horizontally
center.fla will be absolutely centered in the browser, horizontally and vertically
bottom.fla will be aligned to the bottom left, actually 92% of the height and 10% of the width

before we create all these models, why don’t you take a break? you deserve one :)
there are a lot of interesting stuff here ====================================>
:P

You should make new flash documents for each, with a distinctive graphic for the purposes of this tutorial. (or just use mine for now)

we will also be using model.as and layout.as for loading movieclips onto the main MovieClip (main.fla)

so the entire project looks like this

final project

you will need to import a bitmap image into main.fla
so import (ALT - F - I - L) or “File -> Import -> to library”
find a tiny pattern image to use as your background
now right-click on the bitmap item in your library and choose “linkage”
check “Export for Actionscript” (Export in First Frame will automatically be enabled, leave it)
and give it an identifier (linkage name) ‘bg_png’

linkage name

open up /classes/main.as
this is where most of the code will be written.

main.as

the first line in main.as is the import directive - import the BitmapData class to create the background fill pattern

//import the BitmapData classes import flash.display.BitmapData;

now we begin the main class

//main class class main {

now define all the objects that will be created

//layouts private var main_layout:layout; private var scaling_layout:layout; private var bg_layout:layout; //models private var top_model:model; private var center_model:model; private var bottom_model:model; //bitmap data background tile private var bg_bd:BitmapData; private var bg_link_id:String; private var stageListener_obj:Object;

the constructor

function main(){

now we’ll go through step by step:

this line initializes the ‘bg_layout’ object and loads /layouts/blank.swf onto main.swf

//initialize and load the blank layout this.bg_layout = new layout("blank", true);

this initializes the ‘scaling_layout’ object and loads /layouts/scaling.swf onto main.swf (on a layer above blank.swf)

//initialize and load the scalable layout this.scaling_layout = new layout("scaling", true);

now we’ll initialize the ‘main_layout’ object and set it up to load /layouts/blank.swf onto main.swf (but not actually load it yet)

//initialize the “blank” layout to hold the models, blank.fla is blank so we can re-use this this.main_layout = new layout("blank");

here we’ll access the layout objects mcListener object to ‘do stuff’ only after it is loaded

this.main_layout.mcListener.onLoadInit = function(){

inside the onLoadInit event handler, we’ll call the 3 models’ loadModel() methods, to load these models onto the ‘main_layout’ object, but only after the ‘main_layout’ object finishes loading

//load the models into the layout _root.m.top_model.loadModel(); _root.m.center_model.loadModel(); _root.m.bottom_model.loadModel();

by the way, we are using _root.m. to access the model objects because they are outside of this scope

we also want to fill the ‘bg_layout’ with a pixel pattern

//draw the background using drawBackground(); _root.m.drawBackground();

we haven’t written the drawBackground() function yet, but we will, so just write this

we’ll also want to rescale the scalable layout to fit the users browser as soon as everything has been loaded (basically instantly)

//rescale the scaling layout using rescaleLayout(); _root.m.rescaleLayout();

we haven’t written the rescaleLayout() method yet either, but we will, so keep your panties on

ok close the mcListener.onLoadInit event handler now

}

now we can load the ‘main_layout’ object using the loadLayout() method

//load the main layout this.main_layout.loadLayout();

lets initialize the models now
this line will initalize the ‘top_model’ object, and set it up to load /models/top.swf onto the ‘main_layout’
(but not actually load it, it will load only after ‘main_layout’ has loaded remember?)

//initialize models this.top_model = new model("top", this.main_layout.loadedLayout_mc);

again, initialize the ‘center_model’ object, and set it to load /models/center.swf onto the ‘main_layout’

this.center_model = new model("center", this.main_layout.loadedLayout_mc);

oh, we will want to center this model after it has been loaded so lets call the centerModels() method as soon as this model is finished loading

this.center_model.mcListener.onLoadInit = function(){ //set model positions using centerModels(); _root.m.centerModels(); }

finally, intialize the ‘bottom_model’ object
and set it to load /models/bottom.swf onto the ‘main_layout’

this.bottom_model = new model("bottom", this.main_layout.loadedLayout_mc);

now lets make sure everything resizes and repositions nicely if/when a user resizes the browser
we’ll initialize the ‘stageListener_obj’ object
and create an ‘onResize’ property to be the ‘Stage’ object’s event handler
this “listens” for the Stage to resize then triggers these three actions
finally, add the listener object to the ‘Stage’ object’s “listeners”

//setup a listener object to reposition everything if the window is resized this.stageListener_obj = new Object(); this.stageListener_obj.onResize = function():Void{ _root.m.drawBackground(); _root.m.centerModels(); _root.m.rescaleLayout(); } Stage.addListener(this.stageListener_obj);

hope that wasn’t too confusing, just know that when the stage is resized, we’ll call these three methods, drawBackground(), centerModels(), and rescaleLayout(), make sense?

we have one last object to initialize, ‘bg_bd’.
and lets give ‘bg_link_id’ a value… this should be the linkage identifier of the bitmap image in your library (the one we setup earlier, try to keep up will ya?)
bg_bd is just a reference to a BitmapData object, just so we can use it’s loadBitmap method to fill the stage, it takes ‘bg_link_id’ as an argument

//initialize the BitmapData object to create the background tile this.bg_link_id = “bg_png”; this.bg_bd = BitmapData.loadBitmap(this.bg_link_id);

easy enough

now close the constructor

}

ok now we’ll create those methods that we were calling earlier
drawBackground() … just draws the background

private function drawBackground():Void{ this.bg_layout.loadedLayout_mc.beginBitmapFill(this.bg_bd); this.bg_layout.loadedLayout_mc.moveTo(0,0); this.bg_layout.loadedLayout_mc.lineTo(Stage.width,0); this.bg_layout.loadedLayout_mc.lineTo(Stage.width,Stage.height); this.bg_layout.loadedLayout_mc.lineTo(0,Stage.height); this.bg_layout.loadedLayout_mc.lineTo(0,0); this.bg_layout.loadedLayout_mc.endFill(); }

the centerModels() method

private function centerModels():Void{

horizontally centering the top model is simple enough
just set the model’s _x position to half the stage width minus half of the model’s width
this is how it’s done

//center the top model this.top_model.loadedModel_mc._x = (Stage.width / 2) - (this.top_model.loadedModel_mc._width / 2);

it’s like doing this in CSS:

margin: auto;

or

position: absolute; left: 50%;

you will probably use this positioning method a lot

absolute centering the center model is done in much the same way
just do it to both _x and _y

//center the center model this.center_model.loadedModel_mc._x = (Stage.width / 2) - (this.center_model.loadedModel_mc._width / 2); this.center_model.loadedModel_mc._y = (Stage.height / 2) - (this.center_model.loadedModel_mc._height / 2);

this is like doing this in CSS:

position: absolute; left: 50%; top: 50%;

there isn’t very many cases that i can see using this in a flash site, except maybe alerts, or message boxes that need attention.

now, relative aligning…

//align the bottom model to the bottom (92% of height) and left (10% of width) this.bottom_model.loadedModel_mc._x = Stage.width * .1; this.bottom_model.loadedModel_mc._y = Stage.height * .92;

it’s like doing this in CSS:

position: absolute; top: 92%; left: 10%;

this is probably the most useful positioning method, for many things like ui objects etc.

don’t forget to close the centerModels() method

}

almost done!
the last method is rescaleLayout(), this just matches the ‘scaling_layout’ object to fit the stage by stretching it out
set the scaling_layout’s width and height to the Stage’s width and height. this will execute when the layout is loaded (instantly), and whenever the user resizes the stage (or browser)

private function rescaleLayout():Void{ this.scaling_layout.loadedLayout_mc._width = Stage.width; this.scaling_layout.loadedLayout_mc._height = Stage.height; }

don’t forget to close the main class

}

that’s it for flash, compile main.fla (CTRL + Enter), you should have no errors, if you do, you did something wrong, compare your main.as file with this file:

View the complete main.as file

index.html

now for the html file.
we’ll use UFO to embed the flash file

here is the complete index.html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>New Flash Project</title> <link rel="stylesheet" type="text/css" href="stylesheets/style.css" /> <script type="text/javascript" src="js/ufo.js"></script> <script type="text/javascript"> var FlashSite = { movie:"main.swf", width:"100%", height:"100%", majorversion:"8", build:"0", salign:"lt", scale:"noscale" }; UFO.create(FlashSite, "flash_placeholder"); </script> </head> <body> <div id="flash_placeholder"> <p> Please install the latest version of <br /> <a href="http://www.macromedia.com/go/getflashplayer">Adobe Flash Player Plugin</a> </p> </div> </body> </html>

basically, the part that makes this flash project display in full screen are these lines: width:"100%"
height:"100%"
salign:"lt"
scale:"noscale"

as you can see, there is a stylesheet included (/stylesheets/style.css), this is all you need to make sure it displays in full screen correctly on all major browsers

/* hide from ie on mac \*/ html { height: 100%; } #flash_placeholder { height: 100%; } /* end hide */ body { height: 100%; margin: 0px; padding: 0px; }

that’s it, experiment, enjoy, make cool sh!t and post a comment here linking to your uber full screen flash site.

Tags » 16 comments »

16 Responses to “Full Screen Flash Site Tutorial”

Say Anything