Resizable Swf

@r4gn0Jan 15.2009

Hi, where can i find how to make a swf resizable?? first i want it to be in 100% in the body, then, i want it to adapt to different screen resolutions…like this ~~[URL=”http://www.thecoronabeach.com”]~~one[/URL]

thanks!!!

to post a comment

14 Comments(s) _↴

@TheTeenScripterJan 15.2009 — #does the Style="width:100%; height:100%" not work?

@TheTeenScripterJan 15.2009 — #That would be the best way to do it, this way is not recommended:

// JavaScript Code:

document.getElementById("swfname").style.width=document.body.clientWidth;

document.getElementById("swfname").style.height=document.body.clientHeight;

All you need to do is put it in a function and call that function when there is a size change detected.. I have noticed, though that when you use JavaScript to do that sort of thing, if the user is using the drag sizing method, an "Access Denied" error occurs.. The website you have posted gives no such error though, which leads me to believe they have either found a way to get around that or they don't use JavaScript to size it..

@r4gn0authorJan 15.2009 — #

[code=html]
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>OBM International - Emerald Bay at Great Exuma</title>
 <script language="javascript">AC_FL_RunContent = 0;</script>
 <script src="AC_RunActiveContent.js" language="javascript"></script>
 <style type="text/css">
 <!--
 body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 }
 -->
 </style></head>
 <body bgcolor="#0081A1">
 <!--url's used in the movie-->
 <!--text used in the movie-->
 <!-- saved from url=(0013)about:internet -->
 <script language="javascript">
 if (AC_FL_RunContent == 0) {
 alert("This page requires AC_RunActiveContent.js.");
 } else {
 AC_FL_RunContent(
 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
 'width', '100%',
 'height', '100%',
 'src', 'index',
 'quality', 'best',
 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
 'align', 'middle',
 'play', 'true',
 'loop', 'true',
 'scale', 'noscale',
 'wmode', 'window',
 'devicefont', 'false',
 'id', 'index',
 'name', 'index',
 'menu', 'true',
 'allowFullScreen', 'false',
 'allowScriptAccess','sameDomain',
 'movie', 'index',
 'salign', ''
 ); //end AC code
 }
 </script>
 <noscript>
 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" align="middle">
 <param name="allowScriptAccess" value="sameDomain" />
 <param name="allowFullScreen" value="false" />
 <param name="movie" value="index.swf" /><param name="quality" value="best" /><param name="scale" value="noscale" />	<embed src="index.swf" quality="best" scale="noscale" width="100%" height="100%" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
 </object>
 </noscript>
 </body>
 </html>
 [/code]

I've Tried with this code, did it on my own, the problem is that it shows q background color of the swf, i have objects that are out of the canvas, they come in with AS...

@TheTeenScripterJan 15.2009 — #

[code=html]
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>OBM International - Emerald Bay at Great Exuma</title>
 <script language="javascript">AC_FL_RunContent = 0;</script>
 <script src="AC_RunActiveContent.js" language="javascript"></script>
 <style type="text/css">
 <!--
 body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 }
 -->
 </style></head>
 <body bgcolor="#0081A1">
 <!--url's used in the movie-->
 <!--text used in the movie-->
 <!-- saved from url=(0013)about:internet -->
 <script language="javascript">
 if (AC_FL_RunContent == 0) {
 alert("This page requires AC_RunActiveContent.js.");
 } else {
 AC_FL_RunContent(
 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
 'width', '100%',
 'height', '100%',
 'src', 'index',
 'quality', 'best',
 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
 'align', 'middle',
 'play', 'true',
 'loop', 'true',
 'scale', 'noscale',
 'wmode', 'window',
 'devicefont', 'false',
 'id', 'index',
 'name', 'index',
 'menu', 'true',
 'allowFullScreen', 'false',
 'allowScriptAccess','sameDomain',
 'movie', 'index',
 'salign', ''
 ); //end AC code
 }
 </script>
 <noscript>
 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" align="middle">
 <param name="allowScriptAccess" value="sameDomain" />
 <param name="allowFullScreen" value="false" />
 <param name="movie" value="index.swf" /><param name="quality" value="best" /><param name="scale" value="noscale" />	<embed src="index.swf" quality="best" scale="noscale" width="100%" height="100%" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
 </object>
 </noscript>
 </body>
 </html>
 [/code]

I've Tried with this code, did it on my own, the problem is that it shows q background color of the swf, i have objects that are out of the canvas, they come in with AS...[/QUOTE]

When loaded, it says that I am missing AC_RunActiveContent.js

@Eye_for_VideoJan 15.2009 — #If what you are trying to accomplish is something like this (resize a few times to test)

http://www.bozboz.co.uk/examples/liquidFlash/

It’s being done simply by setting the width and height in swfobject to 100%. But, resizing must be done in the same aspect ratio as the .swf in order for it to work perfectly. Drag in the width and height separately to test. If you want 100% height, you can only have 100% width when the aspect ratio of the window matches that of .swf. And the reverse is true for the width.

If your .swf is showing the background color, it’s because the resizing is not being done in exactly the same aspect ratio as the original .swf. So for example, resizing a 1:1 .swf (a square, say 400 X 400) to a 2:1 ratio (a rectangle 400 X 200) will result in a perfect replica of the original .swf (but only 200 X 200, an exact 1:1 ratio) inside a 400 X 200 box. The extra space will take the background color of the .swf. You can’t fit a square .swf perfectly into a rectangle without distorting it.

A pretty good explanation of the scale / noscale and when it affects the resizing is at

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14149

So resizing will work but not perfectly at all aspect ratios.

Best wishes,

EfV

@TheTeenScripterJan 15.2009 — #It all depends on how the .swf is built.. It can be built to support any aspect ratio, but it depends on if the .swf file uses relative sizing, absolute, etc. for certain objects...

@r4gn0authorJan 15.2009 — #@TheTeenScripter:

its maybe because yo have the "AC_RunActiveContent" inside another folder.

@Eye For Video:

im confused with [CODE]var mystage:myStage = new myStage(_mc)[/CODE]
where should i use that code??

Thxs a lot!

@Eye_for_VideoJan 15.2009 — #Yes that is true. But only the original aspect ratio will produce a perfect replica of the .swf, any other aspect ratio will result in distortion. As mentioned in the link above there are 3 params that can be used for “scale”, not counting “no scale”

Show All

No Border

Exact Fit

Perhaps “Exact Fit” would be a better choice in this situation, if distortion is not an issue. Not sure what you mean by relative or absolute sizing of certain objects..are you talking about setting the object dimensions as a percentage of the stage via actionscript or something else? If so, yes that can be done and I suppose if all the objects on the stage where just shapes, and distortion was no problem…go for it.

My testing with a relative sized flash object placed on stage (via AS) and then using scale/noscale displays original aspect, original size in a 100% <div>, showing everything off stage with a background color the same as the .swf. Not the desired effect.

Show All displays large version at 100% width but not 100 % height. At correct aspect ratio but not enough room for 100% height.

Only "Exact Fit" displayed only the entire .swf, no parts of the stage. Display was as distorted as I wanted, and only stage was showing.

Give that a try
[CODE]<param name="scale" value="exactfit" />[/CODE]
I just noticed a last minute post about a var. Test suggestion above first and then if needed we'll work on the next step.

EfV

@r4gn0authorJan 15.2009 — #The exact-fit parameter makes it, but with distortion...my swf has 990 x 792 measures...could it be that??

Plz help me with the [CODE]var mystage:myStage = new myStage(_mc);[/CODE] issue

@Eye_for_VideoJan 15.2009 — #Is any distortion of the aspect ratio acceptable? (990 X 792 is 1.25:1) An size that does not maintain the 1.25:1 ratio will cause distortion.

EfV

@r4gn0authorJan 16.2009 — #Sure, distortion isn't the problem...how should i use [CODE]var mystage:myStage = new myStage(_mc);[/CODE]????

@Eye_for_VideoJan 16.2009 — #I'm not sure. Where did your AS code come from? Are you following a tutorial or just making it up as you go.

Not sure I want to say this.......but without seeing the rest of the code, it's pretty hard to tell how it's being used.

EfV

@r4gn0authorJan 16.2009 — #Im using the tutorial you gave me, i just don't know where to use that line...it says "Now, create object of myStage and pass movieclip reference (which you want to align at center of stage) as parameter:" but i don't know what he means with that...im confused! :S

@Eye_for_VideoJan 16.2009 — #Without working through the whole tut, it's a little hard to say. But in general if the variable "mystage" is a global variable, you can declare it anywhere outside of the function it's called in.

So look for the function where "mystage" is first called, and put that line in just above any of the lines that have to do with the function. For example, here is a gobledeegoop function, used only to show where you would place the var in relation to the function calling it (assuming it’s a global function).

[CODE]var mystage:myStage = new myStage(_mc);
 var maybesomeothervar:array = new Array();[/CODE]

name the var outside the function, then the function

[CODE]jbx.onLoad = function(success) {
 if (success) {
 songArray = jbx.firstChild.childNodes;
 for (i=0;i<songArray.length;i++) {
 maybesomeothervar.push(songArray[i].attributes.url);
 }
 mystage.loadSound(urls[currentIndex],true);
 }[/CODE]

mystage is called inside the function.

So if you have a var, it needs to be called somewhere in a function for it to be of any use. Look for the call inside the function, put the var outside and before the function.

Not sure if this will help but that’s about the best I can do.

EfV

Success!

Help @r4gn0 spread the word by sharing this article on Twitter...

Tweet This

Resizable Swf

14 Comments(s) _↴

Success!

Social

Version

Resizable Swf

14 Comments(s) ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴