Flash Movie to Scale to Browser

[Sem_White]

Hi I have a little experience reading into xhtml and css and developed an ok understanding.

Kind of rushed head-first into flash. I wanted to create an website in the format of an online book. To do this used this software:

page-flip.com

When I publish my movie (using flash 8) it stays immobile centered in browser, when I would like it to adapt to the browser/ monitor size.

I have changed the publish settings to percent in flash program itself.
And also attempted the object, embed settings in the HTML code.. although some clarification on the correct code is necessary.

How I can succeed in making the movie scale?

[jamiemac2005]

Hey, i've created full-browser flash sites before so i guess i can help.

First, when you publish in flash i assume that you're outputting as a website aswell?

Theres a common problem in this in that flash inserts an annoying 10pxish border around your movie?

To start with heres a basic fix for that:

 
-Add the following to the body tag in the HTML file:
topmargin="0" leftmargin="0"

so it looks like <body...other stuff... topmargin="0" leftmargin="0">

That's just an annoyance fix (incase you hadn't done it already).

Okay, you've changed the settings to output as a percentage so that doesn't need doing.


Now in the actionscript:

This depends on how you want your movie to scale.
If you don't care about pixellation in your flash file (which i think you should [read on anyway])... you can use the following code to get your page to scale the un-intelligent way:

Add it somewhere where it will run early (e.g. in the first frame at the top of your AS)

Stage.scaleMode = "exactFit";//this will distort the flash though so i don't suggest it

Now to the intelligent way:
This relies on you being able to dynamically scale your objects within your flash file.

- Add the following actionscript to your flash file:

Stage.scaleMode = "noScale";

That stops the flash file from scaling.

Next you need a handler for when the Stage's size changes:

var stageHandler:Object = new Object();//sets up a listner
stageHandler.onResize = resizeStuff;//set up an event handler
Stage.addListener(stageHandler);//adds the listener to the stage

//write the function to handle re-sizing
function resizeStuff(){
//within this function resize all the stuff on the stage
//i used a movie clip for the background
//so as an example
background_mc._width=Stage.width;
background_mc._height=Stage.height;

//or as a cleverer way to do it
//you could define two global variables (newXScale, y aswell)
//and modify them values with the stage
//e.g:
newXScale = (Stage.width/500)*100;// 500 being the initial width of the movie
//and the same with height and y

// then ensure the xscale and yscale of each object is set correctly (literally scaling)
myPage_mc._xScale = newXScale;
//and the same for y

}

I know my notation and examples may be hard to understand so if you need me to clarify on anything then please do post saying so.. i do also have examples of this in flash files that i can upload if you'd like.

I hope i make some sence.

Cheers,
Jamey

[Sem_White]

Thanks I am going to put this into practice. Be back to you later.

[jamiemac2005]

Hope it works.

Cheers,
Jamey

[Sem_White]

I wasn't originally using the flash publshing to create a html file, in this case the very index.html, which was a good starting point.

I was pleased to see your advice working with:

Stage.scaleMode = "exactFit";

Still it did male me laugh when I saw the scaling.

So far so good. Thanks, will now attempt the more detailed code, will let you know the scaling results then.

I think afterwards if all scales appropriately, I will start using a standard index page and inserting the flash movie to scale to a percentage of window within the index file as I like the presentation aspects of css and standard xhtml. i.e. to complement the surroundings of the flash movie.

I also set up the same query at:

http://www.designerstalk.com/forums/...e-browser.html

Urban1977 started talking about how to achieve full-screen using buttons... similar to the idea of flash within html page...

I followed the link to ffiles but was introduced to javascript, again! so I hesitated experimenting further.

Anyway will again update on the progress.

[Sem_White]

Hi tried replacing the:

Stage.scaleMode = "exactFit";

with:

Stage.scaleMode = "noScale";

var stageHandler:Object = new Object();
stageHandler.onResize = resizeStuff;
Stage.addListener(stageHandler);

function resizeStuff(){
background_mc._width=Stage.width;
background_mc._height=Stage.height;
}

Received no syntax errors but movie content has now disappeared with just the flash background visible.

Am I following the example correctly?

[Sem_White]

My mistake I missed the flash file.

It seems to be scaling. Just one issue left:

On my laptop screen it fills the full-screen (11.1")

On my TFT monitor (22") it doesn't, as if there is some limiting factor....?

[jamiemac2005]

Hmm, it's hard to debug flash without actually seeing what's going on... If you could upload the fla it would be easier to help. I don't know exactly what's going on, but the order of the movies may be messing up (if they're on the same layer it could be brought forwards) but it's really hard to think of what could be going on.

Cheers,
Jamey

[jamiemac2005]

Ah okay, what exactly isn't filling the screen? is it the flash not filling the HTML or is it the objects in the flash file not filling the screen?

[Sem_White]

Ok. Most importantly it is scaling, just not to the full degree on monitor.
Right take a look
semiotically.com
semiotically.com/semi12.fla

[Sem_White]

it is the objects in flash

[jamiemac2005]

Okay, i'll take a look and get back to you in a few.

Cheers,
Jamey