Fit Browser to Flash, without fitting Flash to Browser

I've figured out how to tell my flash website not to scale itself (which degrades the quality of the buttons i've created as .gifs).
And then how to keep it centered within the browser. But this leads to unwanted white, negative space on all sides, since i'm keeping my site small enough for everyone to view (at 800 x 600).
So what code can I add that will scale the browser to the set dimensions of the site? Rather than vice versa.

You can use the window.resizeTo() Javascript method to reshape the browser window to the size that you want. You can call this from an onLoad Javascript method either in the head of the document or from the <body> tag. Be aware that every browser interprets its window size property differently. Additionally, users can customize the chrome on their browser window to include more than normal or remove some normally seen parts of the browser window space.
You may want to give your window resizing a little breathing space on each side. If you set the background color or image to something that complements your movie then the border will be less obvious.

Similar Messages

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

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.

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

Flash Catalyst CS5.5 Scale to fit the Browser size.

Hello,
I've create a website and when i preview on my browser ( 1280x664 website size) it look very good ,but when i try to see it from a different desktop will smaller or bigger size my website is croped ,some important functions are croped.
I've been all the day looking in internet trying to fund a solution how to fix this but nothing.
I saw an article that explaind how to fix that in flash catalyst cs5 and i tried to but didnt work
so please help me to tell me how to make this work, i want just my website to get scaled
''to work in any monitor size''
Thank you

Could you add a link to your site here at all ? That would help with some workarounds maybe.
I have noticed that many of the professional websites designed by web-agencies use a common design. They design the content to fit the majority of users who can view and do seem to view at around 800 x 450 - take a look at this as a good reference point.
They then place the main content in a container - and centre it - so that it moves with fluidity - as the users resize the browser window, the content stays central on the page. Often a background image is used behind the main content - and the background image can be scaled to fit the window.
There are some good examples like Carl Cox's Intec Label Website and some more at a great London Design Agency called bobbentleydesign.com
You will note that many of these sites use the same method. Since such reputable designers use the same methods I would assume there's a damn good reason to do it that way, it must be the best way available . . . if there was a reliable way to scale everything then I would bet these pro's would be doing so - but they dont.
Sorry I do not have the kind of solution that you are looking for. I am not a pro and very new to CS5 myself but I hope it may help you out. I think you are looking for something that can not be done effectively or consistently but I may be wrong. Perhaps someone knows but in the meantime . . . work around it.

How do I resize my flash to fit browser? Help plz

Yes I searched but none of the answers I saw made any sense so how do I make my flash fit any browser? like I made it 1280x800 to fit mine and then how do I make it fit a bigger or small one eg. 1800x1200?

There's is a way to do it? Flash Builder?
Basicaly, this is what i want: www.parasuco.com (resize the browser to see!)
Thanks!

Flash based website.. stage/background resize to fit browser?

Hi,
I've built a pretty basic portfolio-style website using Flash and Actionscript 3. All is functioning well, with the exception of stage size vs. browser size. Basically, I want the stage/background image to resize to fit the stage, while having the main content stay fixed in the middle. What is the easiest way to go about doing this? Also, if at all possible, a step-by-step guide would be amazing since I'm pretty new to AS3/coding in general.
Thanks so much!

That helps with it resize with the browser, but there is still a considerable gap on either side of the background(striped) image. I know I can handle the top/bottom gap with a little CSS, but how do I make the background stretch all the way left and right? I think even tiling it might work fine, but I'm still unsure of how do do that.
I've attached a screen cap of what's seen in the browser preview.

Auto-fit browser in Flash Catalyst

Hello wise people :-)
I'm an old veteran in photoshop, and just discovered the wonders behind flash catalyst.
I just have this one problem.
Let's see.
I'm creating a beautiful website on my 20" screen, and publish it to my server.
It looks great! But when I try to visit the page from my laptop (wich is smaller), and here comes the problem.
The page was made to fit an 20" inch screen! I don't know how to make it auto-fit ALL browsers and computers.
Does anyone know a solution to my problem ?
Thanks!
Ben

You will need vectorized graphic to solve that becuse the bitmap gonna deform the pixel when you scale it up or down. A idéa - do the graphic in flash import them as .swf and a javascript on the html-page that get the screensize should solve it. Or resize the ria with a fullscreen mode ActionScript.
Is there anyone that have tried to run in fullscreen mode in catalyst?

Stretch Flash movie to fit web browser.

I can't achieve doing this simple thing :
I have a flash that resolution is 800*600, on small displays
it's okay, but on an HD screen it looks very small.
Web browser resize function is not good, it's badly stretched
and runs very slowly.
After searching; I found Publish Settings, Dimensions : Match
Movie; changed it to 100% percent.
Things gets resized properly but now too much space is shown,
as you can see on picture 2.
Original,
working.
Stretched
but showing too much.
Do you know how can I fix this ?
Thanks a lot ! :-)

When you embedding the flashmovie, made two changes in the
embedding code.
1.Set the width and height of the movie to 100% instead of
pixels.
2.And add an extra parameter 'scale = exactfit'.
This will set the movie to the browsers window.
Thanks

Scaling My Flash Movie Proportionally To Fit Any Browser

Hi,
Thanks for any help.
I am trying to make my flash site scale to the browser size, just like this site: http://www.flashcomponents.net/upload/samples/1213/index.html?full=true
The reason is because I want to design for bigger screens (that most of us have) yet still be able to view my website on small monitors i.e. 800 x 600.
I don't think I want a 'liquid/fluid' layout (as mentioned in many tutorials) because they can compromise the design aesthetic if browser window is too big or small.
I just want the movie to shrink or grow proportionally with the browser. I would also like it to stop growing beyond the dimensions that I build the flash movie- to avoid losing bitmap quality.
I currently have my flash centered in the browser with fixed dimensions. What settings do I need to change in Flash or Dreamweaver to make this happen? Also, if you have any comments or criticisms about this type of layout please do mention it. I have found only one issue with this layout - it does not zoom in when you press "command & +", but other flash sites do.
Thank you!

Hi animated_cloud.
In all honesty, I dont think you should create a scalable template if you will be using bitmap images in your movie. On the other hand, if you will be using vector images, or dinamically drawn content within your movie, then making it scale is fine. But this is up to you! =)
ok. first off, you should go check in your File ---> Publish Settings. In the SWF Tab you should see scaling options. You should play around with some of these to understand what each do.
Have a look through those settings, and if you cant find what you want come back and we'll go from there.
good luck.

Are Adobe EVER going to make Edge Animate scale-to-fit (like Flash)?

I've been following the progress of Edge Animate (formerly Edge) ever since Steve Jobs decided he wasn't having Flash on the iPad.
With each new version I've been desperately looking for the feature that I consider the most important of all: Scale-to-fit
There are a couple of discussions already on this forum where people have requested this feature - but both have been sidetracked by replies from people who haven't understood what 'scale-to-fit' is. So let me explain Scale-to-fit:
I'm talking about the feature in Flash - where if the HTML dimensions are set to 'Percent' - then the resultant movie will scale-to-fit any browser window. Here is an example of what I mean:
http://www.skippingschool.co.uk
- try changing the browser size and you'll see the whole frame (graphics and images) scales without changing its proportions.
When the latest version of Edge Animate came out with its built-in easy-to-follow 'Resize' Lesson, I thought Adobe had finally found an answer. But good though this feature is, it doesn't solve the problem. It's only possible to properly scale-to-fit images - not graphics.
It's now more important than ever that Adobe finds a solution to this problem. The world is going 'Responsive' - its not just a fad. And 'Responsive' is not just about three columns being squeezed into one. All Responsive sites require images, graphics AND animations to scale-to-fit. So Adobe's tutorial showing how Edge Animate can be added to WordPress sites is of limited use because it won't work for Responsive web sites.
So please Adobe, will someone tell me if scale-to-fit is EVER going to happen? I don't mind if it's 3 months, 6 months, 9 months down the line - but I need to know if it's worth me sticking with Edge Animate - or whether I should be looking toward HTML5 Canvas or something else for a solution?
Alternatively, is there some fundamental reason why it can NEVER happen?
Please tell me? Just put me out of my misery!

Hi Sarah,
I hope you don't mind but I played around with your code a bit and managed to get the kind of scale-to-fit behavior that I believe the OP was asking about. I think the trick is to make sure that you also check whether the scaled height of the stage exceeds the height of the browser window and change the scaling so that it is responsive to changes in both the width and height of the window, whichever is the limiting factor. The code I changed in CompositionReady appears in bold below. I hope this helps.
sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage
"transform-origin":"0 0",
"-ms-transform-origin":"0 0",
"-webkit-transform-origin":"0 0",
"-moz-transform-origin":"0 0",
"-o-transform-origin":"0 0"
function scaleStage() {
    var stage = sym.$('Stage'); // Set a reusable variable to reference the stage
    var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage
    var parentWidth = stage.parent().width(); // Get the parent of the stage width
    var parentHeight = $(window).height(); // Get the browser window height
    var stageWidth = stage.width(); // Get the stage width
    var stageHeight = stage.height(); // Get the stage height
    var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales
    var desiredHeight = Math.round(parentHeight * 1); // Set the new height of the stage as it scales
    var rescaleWidth = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales
    var rescaleHeight = (desiredHeight / stageHeight); // Set a variable to calculate the new height of the stage as it scales
    var rescale = rescaleWidth;
    if (stageHeight * rescale > desiredHeight) // Do not scale larger than the height of the browser window
                    rescale = rescaleHeight;
// Rescale the stage!
           stage.css('transform', 'scale(' + rescale + ')');
     stage.css( '-o-transform', 'scale(' + rescale + ')');
           stage.css('-ms-transform', 'scale(' + rescale + ')');
     stage.css('-webkit-transform', 'scale(' + rescale + ')');
           stage.css('-moz-transform', 'scale(' + rescale + ')');
     stage.css('-o-transform', 'scale(' + rescale + ')');
           parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts
// Make it happen when the browser resizes
$(window).on('resize', function(){
           scaleStage();
// Make it happen when the page first loads
$(document).ready(function(){
    scaleStage();

Adjust IE window to fit flash size?

I've put a link on my page that opens up a separate browser
window with a slideshow (in flash format). How do I get the new
opened browser to open to fit the exact size of the slides?
See this:
http://www.theneverendingslideshow.com/Flashfile.swf
(It fits height-wise but there is space on the sides)

tness1977 wrote:
> I've put a link on my page that opens up a separate
browser window with a
> slideshow (in flash format). How do I get the new opened
browser to open to fit
> the exact size of the slides?
>
> See this:
http://www.theneverendingslideshow.com/Flashfile.swf
>
> (It fits height-wise but there is space on the sides)
>
sorry I'm not going to actually answer your question, just
comment on the slide show.
It takes for ever to load (more than 30 seconds), that's not
how you make an efficient slide show in
Flash.
Take a look at this customaizable Flash slide show you can
down load fro free, I think that could
help you:
http://www.webtrans1.com/demos/slide_show/slide_show_instructions.php
in this slide show the images are loaded dynamically so there
is no waiting time. The size and speed
of the fades is cunstomizable. You can use as many images as
you want, by simply adding or removing
them from a folder...
seb ( [email protected])
http://webtrans1.com | high-end web
design
An Ingenious WebSite Builder:
http://sitelander.com

Make flash website fit to screen

Hi! I'm having trouble width my AS3 flash site. I know there is a code that will make my website fit to any browser. but i can't find it anywhere?? Can anybody help me out here??

stage.displayState = "fullScreen"

Flash site does not fit on screen on PC

I have a flash site that measures 700 (Width) x 770 (Height).
I have published this and uploaded it within a HTML Doc. When
I view the site on a Mac, the site fit on screen lovely. When I
check the same site on a PC, I need to scroll down to see the rest
of the site.
How can I ensure that when viewed on a PC that the entire swf
will be resized to fit? Its giving me a serious headache as I spent
ages designing it!!
Thanks
lawrenceging

Welcome to the world of designing for the web
cross-platform/browser.
Every setup is different - from display resolutions to
browser to installed browser add-ons and
plugins. You really have to decide who your target audience
is and develop your site for that
audience. There will always be somebody who has to scroll
unless you develop for the lowest display
res possible and consider a browser with as many toolbars
installed and open as possible.
go here:
http://www.webmonkey.com/webmonkey/99/41/index3a_page3.html?tw=design
--> **Adobe Certified Expert**
--> www.mudbubble.com
--> www.keyframer.com
lawrenceging wrote:
> I have a flash site that measures 700 (Width) x 770
(Height).
>
> I have published this and uploaded it within a HTML Doc.
When I view the site
> on a Mac, the site fit on screen lovely. When I check
the same site on a PC, I
> need to scroll down to see the rest of the site.
>
> How can I ensure that when viewed on a PC that the
entire swf will be resized
> to fit? Its giving me a serious headache as I spent ages
designing it!!
>
> Thanks
>
> lawrenceging
>

Flash fit all resolutions

Hi
I have noticed that a lot of profesional flash websites now
have a full screen view that fits any resolution.
I have been trying to create the full screen flash for a
client but any of the scripts I've found did not work well for me.
I have some big graphic images on the website so if I stretch
it - the images get all stretched and don't look good.
I have also tried using the 100% option on the publish
settings but it only adjusts the height and the width remain too
small/big for the browser, or sometimes it stretches the flash
width to the whole screen size and minimizes the height to really
small and out of proportion.
does anyone here know where I can find a good tutorial or how
to make this problem work?
thanks.

Here you go:
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
The above tutorial explains how to take a Fireworks design and slice it up in Dreamweaver. You can substitute "Fireworks" for "Photoshop" pretty easily.
You'll need to adapt the CSS/HTML to a "fluid" layout to accomplish your goal.
If you don't mind, here's a few tips from someone who's been designing and developing web interfaces for over a decade:
Fluid width designs are almost always a horrible idea, that's why you don't see them being used very often these days.
The "mystery" navigation you designed is a beginners mistake. You have abour four or five seconds to convey the point of your website to the user. If they can't immedietly locate the information they want they hit the back button and leave. Making them mouse-over each naviagation element to find the info they want is a really bad usability idea.

How can I resize my Flash site to fit any screen resolution?

I built a 100% flash site with tiled framing but I have a
problem. My flash was built 766 x 750 pixiels. When viewed at
resolutions greater than 1024x768 the webpage looks great but
anything less than that it looks like @#$@. I know most people
probably view at 1024 x 768. Is there anyway to auto resize based
up on screen resolution or something to detect the screen size and
adjust the webpage accordingly.
www.platlimosvc.com
Below is my html (index.html) for my flash movie:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<link href="style.css" rel="stylesheet"
type="text/css">
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0"
style="width:100%; height:100%">
<tr>
<td valign="top" style="width:100%" height="750">
<table cellpadding="0" cellspacing="0" border="0"
width="766" style="height:100% " align="center">
<tr>
<td valign="top" width="234" style="height:750px ">
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swfl
ash.cab#version=6,0,29,0" width="766" height="750">
<param name="movie" value="flash/xxxx_main.swf">
<param name="quality" value="high">
<param name="menu" value="false">

<object data="flash/xxxx_main.swf"
width="766" height="750"
type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="pluginurl" value="
http://www.macromedia.com/go/getflashplayer">
FAIL (the browser should render some flash content, not
this).
</object>

</object>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="width:100%; height:1px;
background-color:#6C6C6C">
<table cellpadding="0" cellspacing="0" border="0"
style="width:100%; height:1px">
<tr>
<td valign="top" style="width:50%;
height:1px"></td>
<td valign="top" style="width:766; height:1px">
<table cellpadding="0" cellspacing="0" border="0"
width="766" style="height:1px ">
<tr>
<td valign="top" width="766" style="height:1px
"></td>
</tr>
</table>
</td>
<td valign="top" style="width:50%;
height:1px"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="width:100%; height:100%">
<table cellpadding="0" cellspacing="0" border="0"
style="width:100%; height:100%">
<tr>
<td valign="top" style="width:50%;
background:url(images/bottom-3.gif) top right;
height:100%"></td>
<td valign="top" style="width:766;
background-image:url(images/bottom-5.gif); height:100%">
<table cellpadding="0" cellspacing="0" border="0"
width="766" style="height:100% ">
<tr>
<td valign="top" width="766" style="height:100%
"></td>
</tr>
</table>
</td>
<td valign="top" style="width:50%;
background:url(images/bottom-4.gif) top left;
height:100%"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

tlcarl,
> I know most people probably view at 1024 x 768.
You think so? Even if they have their resolution that high
(which is
fairly standard, nowadays), do you think most people maximize
their browsers
to fill that whole area?
> Is there anyway to auto resize based up on screen
> resolution or something to detect the screen size and
> adjust the webpage accordingly.
There is, indeed. :) Check out the Stage.onResize event in
the
ActionScript 2.0 Language Reference. That event is dispatched
when the
browser (or whatever container) is resized -- in cases where
the SWF is
embedded with percentages. If that's your aim, you'll need to
code against
that event, which can be done like this ...
http://www.quip.net/blog/2006/flash/how-to-position-movie-clips-browser-resizing
It can take a bit of thought, depending on the complexity of
your goal,
but the result is usually worth it. The site in your URL is
already built,
so this wouldn't do much of anything without opening the
hood, so to speak,
and completely rebuilding the engine. A Flash movie has to be
designed and
programmed to respond to the Stage.onResize event.
David Stiller
Adobe Community Expert
Dev blog,
http://www.quip.net/blog/
"Luck is the residue of good design."

Flash video - YouTube/ iPlayer does not fit my secondary display, please help

For the last few weeks, everytime I try and play video such as in iPlayer or YouTube on my secondary (1920x1080 Samsung TV 40") monitor, from my MacBook Pro 15" (New Thunderbolt version) it has a border and does not fill the screen. The YouTube divx mode works fine and does fill the screen, it's happening on Chrome and Safari, I've reinstalled flash, but no luck - Please help

You need to have Image+Wireframe ON to grab a drag point (little squares at each corner) to re-size to full screen.
Ensure the Viewer and Canvas are set to "Fit to Window" before starting.
Double click the small clip in the Timeline, it opens in the Viewer.
Place the playhead over the Timeline clip.
When you scale the clip in the Viewer you will see it update in the Canvas.
This way you see waht you will get straight away.
Al

Fit Browser to Flash, without fitting Flash to Browser

Similar Messages

Maybe you are looking for