Member Avatar for ehaaron

Hi,

I have an html page set up to load a flash movie and scale it to the full size of the window. This is working fine, however, I would like to place a cap on how much the movie may be scaled. i.e., i would like to allow the movie to be scaled down to a small browser window, but prevent it from being scaled up beyond its original 1024x768 pixel dimensions.

Is this possible? How might I accomplish this.

Below is my existing HTML script.

Thanks,
AZ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Bates Masi Architects Home</title>
<script language="JavaScript">
window.moveTo(0,0);
var jump;
var i;
i=window.location.href.indexOf("?")+1;
jump=window.location.href.substring(i,255);
//document.write(jump);

function displayflash(jump){

document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write('codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="1000" height="700" hspace="0" vspace="0">');
document.write('<param name="movie" value="batesmasihome.swf?'+jump+'">');
document.write('<param name="quality" value="high">');
document.write('<param name="BGCOLOR" value="#CCCCCC">');
document.write('<embed src="batesmasihome.swf?'+jump+'" width="100%" height="100%" hspace="0" vspace="0" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#CCCCCC"></embed>');
document.write('</object>');
}
</script>
</head>
<body leftmargin="0" topmargin="0" onload="window.focus();"
bgcolor="#CCCCCC" marginheight="0" marginwidth="0">
<table border="0" cellpadding="0" cellspacing="0" height="100%"
width="100%">
<tbody>
<tr>
<td align="center" valign="middle">
<script language="javascript"> displayflash(jump) </script> <br>
</td>
</tr>
</tbody>
</table>
<script language="JavaScript">

self.moveTo(0,0)

self.resizeTo(screen.availWidth,screen.availHeight)

</script>
<script language="JavaScript"> var javascript_version = 1.0;</script>
<script language="JavaScript1.1"> javascript_version = 1.1;</script>
<script language="JavaScript">

var newwin;

function launchwin(winurl,winname,winfeatures)

{
newwin = window.open(winurl,winname,winfeatures);
if(javascript_version > 1.0)
{
setTimeout('newwin.focus();',250);
}
}

</script>
</body>
</html>

  • 3 Contributors
  • 2 Replies
  • 187 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Mr. M

Dani AI

Generated

Short answer: measure the viewport, compute a scale factor limited to 1, and set the SWF’s pixel width/height (not 100%) so it never grows past 1024×768. This keeps the movie responsive downwards but prevents upscaling and preserves aspect ratio.

Example JavaScript (put this in your page and give your object/embed an id like mySwf):

function getViewport() {
  var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  return { w: w, h: h };
}

function clampFlashSize(swfId, origW, origH) {
  var vp = getViewport();
  var scale = Math.min(1, vp.w / origW, vp.h / origH);   // never > 1
  var w = Math.round(origW * scale);
  var h = Math.round(origH * scale);
  var el = document.getElementById(swfId);
  if (!el) return;
  el.style.width = w + "px";
  el.style.height = h + "px";
  // update attributes for older players/browsers too
  try { el.width = w; el.height = h; } catch(e){}
}

function initSwf() { clampFlashSize("mySwf", 1024, 768); }
if (window.addEventListener) {
  window.addEventListener("load", initSwf, false);
  window.addEventListener("resize", initSwf, false);
} else {
  window.attachEvent("onload", initSwf);
  window.attachEvent("onresize", initSwf);
}

Notes and troubleshooting:

  • ’ container/layer idea is valid—wrap the SWF in a centered block and apply the pixel sizing above so it won’t exceed the cap.
  • Add the Flash param scale="showall" (and the same attribute on the embed) so the player preserves aspect ratio; avoid exactfit (stretches) unless you want distortion.
  • ’s hint about stray characters is useful: validate the generated markup (no stray emoticons, mismatched quotes or broken document.write strings).
  • Avoid forcing window size with resizeTo (bad UX). If scaling still looks wrong the SWF itself may be authored with an ActionScript scaleMode (e.g. noScale) — you’ll need to re-export or change that setting.

This approach is robust across browsers and keeps the movie from ever scaling larger than its native 1024×768.

Member Avatar for kevin_smithers

I dont think this is possible but what you could do is this;

Create a new HTML file set the top and left margins to 0
Place a Layer onto the page set it at 95% Width, 100% Height
From the left 2.5%
Place the SWF file into the layer and set the Width to 100%

The height will auto set according to the Width.
So what you are left with is a SWF file that resizes to the size of the current browser size.

You don't have to put it into a Layer but to get the best results this is best ;-)

See Zip Attached for an example
:cheesy:
I hope this has helped.

Kev

resize_test.zip (26.61 KB)
Member Avatar for Mr. M

document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');

The :D could be your problem. I don't think a smilie is HTML lol.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.