Quick question

1

Hey does anyone know how to make this type of effect. When you make your browser window smalller or bigger the content adjusts but without losing quality. Below is a link with an example of what I’m refering to. Thank you.

http://www.uniqlo.jp/uniqlock/?id=nms2GzIVHiGv4dvr

2

[quote=RGS;2356379]Hey does anyone know how to make this type of effect. When you make your browser window smalller or bigger the content adjusts but without losing quality. Below is a link with an example of what I’m refering to. Thank you.

http://www.uniqlo.jp/uniqlock/?id=nms2GzIVHiGv4dvr[/quote]

To make it full screen you’ll need to use SWF Object.

I use it on my site, you can have the whole thing scale, or have it not scale by changing the stages ScaleMode property.

3

Thanks for the reply, is there a code that i can use for this. not sure what you ment. Thank you.

4

Here’s the HTML. You need the javascript code for the latest version of SWFObject (I would just google it).

<!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" lang="en" xml:lang="en">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <style type="text/css" media="screen">
            html, body, #content    { height:100%; }
            body                    { margin:0; padding:0; overflow:hidden; }
            #altContent                { /* style alt content */ }
        </style>        
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
        swfobject.registerObject("myId", "8.0.0", "expressInstall.swf");
        </script>
    </head>
    <body>
        <div id="content">    
            <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
            <param name="movie" value="teaser.swf" />
            <param name="scaleMode" value="showAll" />
            <param name-"quality" value="best" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="teaser.swf" width="100%" height="100%">
                <!--<![endif]-->
                <div id="altContent">
                    <h1>You need to upgrade your Flash player.</h1>
                    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
                </div>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>

Are you using actionscript 2 or 3?

5

Thank you. using AS2. Forgot to mention that I’m using flash CS3.

6

To make it scale up and down I would put this code in your SWF.

Stage.align = "T"
Stage.scaleMode = “scale”;

7

Sorry to bother you again. I’m not that familiar with coding, so please bare with me. In order to accomplish what I’m seeking I should paste this code, shown below in my SWF file. So just this code and not the html code. Correct me if I’m wrong.

[quote=BenBart;2356413]To make it scale up and down I would put this code in your SWF.

Stage.align = "T"
Stage.scaleMode = “scale”;[/quote]

8

Alright I used the latest version of swfobject to generate the html. Now the thing is that it still wont center in the browser window nor does it scale when you drag the browser window. What am I doing wrong.

Here is the html that was generated.

<!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” lang=“en” xml:lang=“en”>
<head>
<title></title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<script type=“text/javascript” src=“swfobject.js”></script>
<script type=“text/javascript”>
var flashvars = {};
var params = {};
params.menu = “false”;
params.scale = “showall”;
params.wmode = “window”;
params.bgcolor = “514E44”;
params.allowfullscreen = “true”;
var attributes = {};
attributes.align = “middle”;
swfobject.embedSWF(“intro.swf”, “myAlternativeContent”, “1024”, “790”, “9.0.0”, “expressInstall.swf”, flashvars, params, attributes);
</script>
</head>
<body>
<div id=“myAlternativeContent”>
<a href=“http://www.adobe.com/go/getflashplayer”>
<img src=“http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif” alt=“Get Adobe Flash player” />
</a>
</div>
</body>
</html>

9

You should use a [COLOR=“Blue”]liquid GUI[/COLOR] to control the scaling and positioning of the various components in your site, so that the site will fit various sized browser windows.
For example, this is how a Flash site might have horizontal navigation bars anchored to the top and bottom of the window, while allowing central content to remain centered.

An if statement can be included in the resizeHandler function to scale specific components according to specific conditions.
It’s really just a matter of creative thinking, once you have the basic concept understood.
ie: if (stage.width <= 1024){
//scale and position content to fit within 800 pixels (or some other value smaller than 1024 pixels)
}else if (stage.width >= 1024){
//scale and reposition content to fit within 1024 pixels
}

SWFOBject is not strictly required for this, and is essentially just an embedding script.
BTW, SWFObject is going to be the official embedding method for Flash CS4.