.:|:. home .:|:. resources .:|:. links .:|:. contact .:|:.


Resizing Flash To A Web Page

  • Resizing Flash movies to fit an html page requires both the code in the movie, and the web page's embedding code.

  • A "listener" is added to the movie, and it responds when the window is resized by calling the onResize function.

  • Inside the OnResize function are other functions and the code that applies one or more of the functions to each movie clip.

  • The result is that every time the web page is resized, the listener calls the onResize() function and the clips are placed, resized, or whatever.

  • Be sure to give any movie clips that will be called in the code an instance name so they can respond.

  • 7 movie clips are on stage, with instance names of critter1, 2, 3, 4 and 5, ftn, and title.

  • The code that applies functions to the clips is towards the bottom, after the functions have been defined.
HTML Code, change .swf names (2) as needed. Flash uses the html code for scale first but this is overridden by code in the movie (Stage.scaleMode = "noScale" found in the actionscript):

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab #version=6,0,0,0" WIDTH="100%" HEIGHT="100%" id="ResizeToScreen" ALIGN="MIDDLE">
<PARAM NAME=movie VALUE="fullscreenTute.swf /"> <PARAM NAME=quality VALUE="high" />
<PARAM NAME=scale VALUE="noscale" />
<PARAM NAME=wmode VALUE="transparent" />
<PARAM NAME=bgcolor VALUE="#000000" />
<EMBED src="fullscreenTute.swf" quality="high" scale="noscale" wmode="transparent" bgcolor="#000000" WIDTH="100%" HEIGHT="100%" NAME="ResizeToScreen" ALIGN="MIDDLE" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" />
</EMBED>
</OBJECT>
Actionscript, place in the first frame of the movie:


//Keep Flash from resizing the movie. Overrides the html code.
Stage.scaleMode = "noScale";
//Default alignment of the movie, not really used here since we're using the full stage. TL = top left.
Stage.align = "TL";
//Create a listener.
myListener = new Object();
//Tell the listener what to respond with when the window is resized.
myListener.onResize = function()
    {
    stageW=Stage.width;
    stageH=Stage.height;
    //This function centers the clip. It will also scale the clip up or down according to the window size.
    placeCenterFull=function()
        {
        //Place the clip center stage
        this._x=stageW/2;
        this._y=stageH/2;
        //Determine if the stage is wider and/or taller than the clip. The "-5" gives a small cushion to the stage size.
        //If the stage width/height -5 is the same size as the clip's width/height, the result is 1.
        percentFactorW=(stageW-5)/ftnW;
        percentFactorH=(stageH-5)/ftnH;
        //Set the scale factor to the lesser of width and height factors.
        if(percentFactorW<percentFactorH){percentFactor=percentFactorW;}
        else{percentFactor=percentFactorH;}
        //Limit the size of the clip if stage is larger than the clip.
        //ftnW and ftnH are set to the original size of the clip in code found farther down.
        if(percentFactor>1)
            {
            this._width=ftnW;
            this._height=ftnH;
            }
        //Scale the clip if stage is smaller.
        else
            {
            this._width=int(ftnW*percentFactor);
            this._height=int(ftnH*percentFactor);
            }
        }
    //The following function is based mostly on code found in the book,
    //the "Designers Actionscript Reference".
    placeRandom=function()
        {
        moveMe = function ()
            {
            this.dx = Math.cos(this.ang)*this.speed;
            this.dy = Math.sin(this.ang)*this.speed;
            this._x += this.dx;
            this._y += this.dy;
            //random call with no parameters gives number between 0 and 1,
            //gives ang the value ranging from -.5 to .5.
            this.ang += (Math.random()-.5);
            this._rotation = this.ang*(180/Math.PI);
            //These 4 "if" statements control the bounding box that limits the clips movement.
            //It will also add some rotation to help it turn away from the boundry.
            if (this._x<(this._width/2))
                {
                this._x = (this._width/2);
                this._rotation+=Math.random(60)-30;
                }
            if (this._x>(stageW-(this._width/2)))
                {
                this._x = stageW-(this._width/2);
                this._rotation+=Math.random(60)-30;
                }
            if (this._y<(this._height/2))
                {
                this._y = (this._height/2);
                this._rotation+=Math.random(60)-30;
                }
            if (this._y>(stageH-(this._height/2)))
                {
                this._y = stageH-(this._height/2);
                this._rotation+=Math.random(60)-30;
                }
            };
        this.ang = Math.random(360);
        this.speed = 18;
        this.onEnterFrame = moveMe;
        }
    placeLowerCenter=function()
        {
        //Use the next line to stretch the clip along the
        //bottom of the movie if needed.
        //this._width=stageW-(this._height*2);
        //Place the clip center screen.
        this._x=stageW/2;
        //Place the clip 2 pixels up from flush with bottom.
        this._y=stageH-(this._height/2+2);
        }
    //Apply the functions to the movie clips.
    placeRandom.apply(critter1);
    placeRandom.apply(critter2);
    placeRandom.apply(critter3);
    placeRandom.apply(critter4);
    placeRandom.apply(critter5);
    placeCenterFull.apply(ftn);
    placeLowerCenter.apply(title);
    }
//Get the original size of the FTN logo.
ftnW=ftn._width;
ftnH=ftn._height;
//Add our listener to the stage.
Stage.addListener(myListener);
//Call the onResize() function when the listener detects that the page has been resized or when initially opened.
myListener.onResize();

.:|:. home .:|:. resources .:|:. links .:|:. contact .:|:.

.:|:. (c) copyright May 2004 flashingthenet.com .:|:. contact webmaster .:|:.