Automatic scale of Flash movie to fit different screen/browser sizes

[Grundog]

Hi guys,

I am a mid level Flash user. I have a online portfolio site which I have had running for around 4 years.

The site at the moment is in its 4th incarnation as I keep growing tired of the layout and design and keep striving to improve it visually. The previous designs have always been at the standard 800x600px or slightly bigger. So when viewed on the majority of different screen sizes and browsers the site was always fully visible at 100%.

For the latest redesign I've opted for a much larger site size of 1024x768px. This is obviously alot clearer for the user and looks great when viewed on a 19" monitor and above. I for example have a 27" iMac so the site in my opinion looks great.

The problem I have is when the site is viewed on a smaller screen 17" and below, laptops etc. Due to the size of my Flash site if I view it on a laptop screen the side and bottom scroll bars obviously appear on the browser. I want to know if there is anyway that I can publish the Flash site so that whenever the site is viewed on whatever sized screen or browser it is always seen at 100% without scrollbars.

I have played about with the publish settings but can't seem to find a way to do this. I have also downloaded SWFFit (Flash Fit) but i'm not sure whether this will do the trick?

My site can be viewed at:

www.nineteeneightyone.co.uk

Any help or advice would be greatly appreciated.

Thanks in advance.

[adninjastrator]

I was a little confused when you mentioned wanting to "scale" the site and then you mentioned that "the site was always fully visible at 100%".

Now I understand that when you say 100%, you simply meant that all of the site was visible at the same time... no scrolling needed.

"whenever the site is viewed on whatever sized screen or browser it is always seen at 100% without scrollbars".

By this I assume you mean that the site is fully visible? not that you want to view the site at !00%... correct?

Typically when discussing Flash scaling, 100% mean 100% of the browser window, and has nothing to do with how much of the site is visible inside that window.

When looking at Flash scaling, there are a number of things to consider, width, height, aspect ratio, and the use/no use of scrollbars.

Using a size of 1024 X 768 is a good example of a size that will require scrollbars or downscaling in order to display in a Web browser on a  1024 X 768 monitor. A 1024 X 768 will only display about 1000px or less in width and of course with the Web browser address bars etc, a height of 600 or so would be more realistic. So by default, the size requires both horizontal and vert scroll bars when viewed on a 1024 X 768 monitor.

So what would be required to display the entire site without scrollbars? Well in this case, since only 600 px in height are available, the height has to be downscaled about 78% of the original height... so to maintain the same aspect ratio (the ratio of width to height), then the width was also be downscaled to about 78% or original or about 800 px wide... OK that's fine, but because the monitor is about 1000px wide, there will now be about 100 px unused space on the right and the left.

By default, Flash likes to maintain that aspect ratio, so that round things stay round and square things stay square. It just means that as you increase or decrease width or height, the corresponding dimension will also change.. decrease height.. and width decreases also.

Here is an old post that illustrates Flash scaling and how aspect ratio can be maintained or distorted:

Here are examples of different scaling parameters available in the Publish settings. You can also add these parameters directly in the html (<param name="scale" value="noscale"). All the examples replace the actual Flash dimensions with 100% for both width and height (width="100%" height="100%"). These examples use the old <object> and <embed> to illustrate the different ways to scale Flash. Once you understand how it works I’d recommend that you use swfobject to place the Flash in your final project.

View the source code for each page to see the full code.

http://www.cidigitalmedia.com/tutorials/scale/exact_fit.html

"exactFit" scales the file to fit exactly within the confines of the screen, irregardless if the movie becomes consequently distorted. The original aspect ratio is not maintained. So round things are not round and squares are not square.

http://www.cidigitalmedia.com/tutorials/scale/noScale.html

"noScale" is the default setting, and causes the movie to be displayed at the originally designed dimensions.

http://www.cidigitalmedia.com/tutorials/scale/no_border.html

"noBorder" causes the movie to be scaled to what ever dimensions are needed to have no border surrounding the movie within the player, which consequently could result in some of the movie being cut off from view. In other words, the movie will maintain the original aspect ratio and will fill the screen completely. But if the movie has to be streched wider to fill both sides of the screen, it will also stretch taller, but then some of the top and the bottom of the movie may be cut off from view.

http://www.cidigitalmedia.com/tutorials/scale/show_all.html

"showAll" scales the movie to the size of the screen (which could cause pixelation if the file contains raster information), the difference between showAll and exactFit is that showAll mantains initial movie size proportions. Because it maintains the original aspect ratio, there can be space to the sides or the top and bottom. But everything always shows and they are not distorted. But notice the photo in the center, it becomes pixilated at larger screen resolutions.

The trickiest part of trying to go full screen is that it’s difficult to make the Flash wider without making it taller also, that is, to maintain the correct proportions or aspect ratio of everything on the stage. These methods are just simple scaling accomplished with html. There are also methods to dynamically scale the stage and it’s elements using Actionscript… but that’s a much more complex undertaking.

Best wishes,

Eye for Video

www.cidigitalmedia.com

Best wishes,

Adninjastrator

[AttaBoy2]

Are you talking about a liquid site like this http://www.droolpigs.com/  if so that's easy. You can do it like this

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

var bmp:Tile = new Tile(35, 35);
var tile:BitmapData = new BitmapData(35, 35);
tile.draw(bmp);

shelter.x = stage.stageWidth /2;
shelter.y = stage.stageHeight /2;

function fillBG(evt:Event = null):void {
  graphics.beginBitmapFill(tile);
  graphics.moveTo(0, 0);
  graphics.lineTo(stage.stageWidth, 0);
  graphics.lineTo(stage.stageWidth, stage.stageHeight);
  graphics.lineTo(0, stage.stageHeight);
  graphics.lineTo(0, 0);
  graphics.endFill();
shelter.x = stage.stageWidth /2;
shelter.y = stage.stageHeight /2;
};
fillBG();

stage.addEventListener(Event.RESIZE, fillBG);

you can easily have the stage and display items on it resize along with the browser.

[bbkrn]

@AttaBoy2 - Thank you so much for sharing that example, i have finally been able to create a page with a liquid video background that does not show a border depending on the aspect ratio of the browser.

I am still new to actionscript though, i am having trouble understanding how to adjust the code to allow me to include navigation buttons that will not resize and maintain constant positions around the browser window  (like a footer situated at the bottom right or navigation on the left side of the screen)

I have included an example of what the screens look like when resized if that helps, please ignore the silly titles i gave the buttons, it's just placeholder content while i struggle to get the background video to work.

Here is the code for the first version, i've tried to include parts of it into the code you wrote but with no joy, again i am fairly new to actionscript so it's no surprise really, if you can offer any help or point me in the right direction with any tutorials that apply i would be very grateful

// ***Stage aligned top left
Stage.align = "TL";
// *** Stop the stage from scaling with the browser window.
Stage.scaleMode = "noScale";
stop ();

var videoAspectRatio = videoBKG._width/videoBKG._height;

// initiate postitions and scaling values for objects

videoBKG._width = Stage.width;
videoBKG._height = Stage.width/videoAspectRatio;
navigation.align = "L";
footer._x = Stage.width - footer._width;
footer._y = Stage.height - footer._height;
// end initial position setting


//create a listner that checks to see if the browser window is resized
sizeListener = new Object();
sizeListener.onResize = function() {
     // change movieclip properties when the window is resized.
     
     videoBKG._width = Stage.width;
     videoBKG._height = Stage.width/videoAspectRatio;
     navigation.align = "L";
     footer._x = Stage.width - footer._width;
     footer._y = Stage.height - footer._height;
};
Stage.addListener(sizeListener);

Thanks for your time.

[AttaBoy2]

I see you're using AS2.

here's some example code that works with AS2:

import flash.display.BitmapData;

//this will center an image named shelter on stage assuming shelter has been
//converted to a MovieClip symbol with center registration

shelter._x = Stage.width / 2;
shelter._y = Stage.height / 2;

// tile here is a inage in the library in this case a gif that's 36 x 36 px the linkage is
// set to Export for Actionscript in frame 1 idenifier is "tile" tile fills the background
var tile:BitmapData = BitmapData.loadBitmap("tile");

function fillBG()
{
    this.beginBitmapFill(tile);
    this.moveTo(0,0);
    this.lineTo(Stage.width,0);
    this.lineTo(Stage.width,Stage.height);
    this.lineTo(0,Stage.height);
    this.lineTo(0,0);
    this.endFill();
}

fillBG();

var stageL:Object = new Object();
stageL.onResize = function()
{
    fillBG();
    shelter._x = Stage.width / 2;
    shelter._y = Stage.height / 2;
}

Stage.addListener(stageL);

This is a great tutorial and it's in AS2 it's the one I learned Full Browaer on

http://www.gotoandlearn.com/play.php?id=31