Using percentage value for dimension in swf object


I am currently working on a project for a flash application which must resize as per the browser resize.Meaning when the browser resizes,the flash application need to change its dimension in order to accomodate the browser dimension.I tried to achieve this using normal pixel dimension like 650×550 px but it didn’t work.For this,I need to use percentage value as dimension.

For many projects,in order to embed swf on html page,I have been using swfObject class whose overall information can be found at url http://code.google.com/p/swfobject/.While downloading this javascript file do grab the swf object html generator which helps to guide the user on how to use the swfobject.And this is indeed great project.

So,  when I  used percentage dimension value on my html page using swfobject and published it,nothing was shown as my page was left blank.Then after searching on Google I found some css had to be added in my page so that I can use  percentage dimension fully.Following example will demonstrate on how to use teh percentage dimension value for static and dynamic publishing.

STATIC PUBLISHING
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; 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(“myFlashContent”, “9.0.0”,”expressInstall.swf”);
</script>
</head>
<body>
<div id= “content”>
<object id=”myFlashContent” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”51%” height=”64%”  >
<param name=”movie” value=”Circle Prelaoder.swf” />
<param name=”quality” value=”high” />
<param name=”scale” value=”noscale” />

<param name=”flashvars” value=”multiplePlay=1&amp;price=60&amp;win=9&amp;goUrl=http://www.yahoo.com” />
<!–[if !IE]>–>
<object type=”application/x-shockwave-flash” data=”Circle Prelaoder.swf” width=”51%” height=”64%” >
<param name=”quality” value=”high” />
<param name=”scale” value=”noscale” />

<param name=”flashvars” value=”multiplePlay=1&amp;price=60&amp;win=9&amp;goUrl=http://www.yahoo.com” />
<!–<![endif]–>
<div id=”altContent”>

<h1>Alternative content</h1>
<p><a href=”http://www.adobe.com/go/getflashplayer”><img src=”http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif&#8221; alt=”Get Adobe Flash player” /></a></p>
</div>
<!–[if !IE]>–>
</object>
<!–<![endif]–>
</object>
</div>
</body>
</html>

Dynamic Publishing

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; lang=”en” xml:lang=”en”>
<head>
<title>WinNBuy</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 = {};
flashvars.multiplePlay = “1”;
flashvars.price = “60”;
flashvars.win=”9″;
flashvars.goUrl=”http://www.yahoo.com&#8221;;
var params = {};
params.play = “true”;
params.menu = “true”;
params.scale = “noscale”;
params.salign = “tl”;
params.bgcolor = “#000000”;
params.allowfullscreen = “true”;
params.allowscriptaccess = “always”;
params.allownetworking = “all”;
var attributes = {};

swfobject.embedSWF(“Circle Prelaoder.swf”, “ContentId”, “51%”, “64%”, “9.0.28”, “expressInstall.swf”, flashvars, params, attributes);
</script>
<style type=”text/css”>
/* hide from ie on mac \*/
html {
height: 100%;
overflow: hidden;
}

body {
height: 100%;
margin: 0;
padding: 0;
background-color: #666666;
}
</style>
</style>

</head>
<body>
<div id=”ContentId”>
<a href=”http://www.adobe.com/go/getflashplayer”&gt;
<img src=”http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif&#8221; alt=”Get Adobe Flash player” />
</a>
</div>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s