I use the function below to create a code for showing flash object. Original flash size is 320x240, but I want to show it as 200x150, so I use the function with params width 200, height 150. All browsers work correctly but chrome doesn't. It shows it as 200x151 (inspecting code shows with 200x151 size). Why?
function getFlashCode(params)
{
debug('getFlashCode');
var defaultParams = {movie: '', flashvars: {}, width:'', height: ''};
for (var key in defaultParams)
{
if (params[key] === undefined)
params[key] = defaultParams[key];
}
var flashvars = '';
for (var key in params.flashvars)
flashvars += encodeURIComponent(key) + '=' + encodeURIComponent(params.flashvars[key]) + '&';
var id = "fl" + Math.random();
var code="";
code += " <object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" width=\"" + params.width + "\" height=\"" + params.height + "\" align=\"middle\" id=\"" + id + "\">";
code += " <param name=\"movie\" value=\"" + params.movie + "\" \/>";
code += " <param name=\"quality\" value=\"high\" \/>";
code += " <param name=\"play\" value=\"true\" \/>";
code += " <param name=\"loop\" value=\"true\" \/>";
code += " <param name=\"wmode\" value=\"transparent\" \/>";
code += " <param name=\"scale\" value=\"showall\" \/>";
code += " <param name=\"menu\" value=\"true\" \/>";
code += " <param name=\"devicefont\" value=\"false\" \/>";
code += " <param name=\"salign\" value=\"\" \/>";
code += " <param name=\"allowScriptAccess\" value=\"always\" \/>";
code += " <param name=\"flashvars\" value=\"" + flashvars + "\" \/>";
code += " <!--[if !IE]>-->";
code += " <object type=\"application\/x-shockwave-flash\" flashvars=\""+ flashvars + "\" data=\"" + params.movie + "\" width=\"" + params.width + "\" height=\"" + params.height + "\">";
code += " <param name=\"movie\" value=\"" + params.movie + "\" \/>";
code += " <param name=\"quality\" value=\"high\" \/>";
code += " <param name=\"play\" value=\"true\" \/>";
code += " <param name=\"loop\" value=\"true\" \/>";
code += " <param name=\"wmode\" value=\"transparent\" \/>";
code += " <param name=\"scale\" value=\"showall\" \/>";
code += " <param name=\"menu\" value=\"true\" \/>";
code += " <param name=\"devicefont\" value=\"false\" \/>";
code += " <param name=\"salign\" value=\"\" \/>";
code += " <param name=\"allowScriptAccess\" value=\"always\" \/>";
code += " <param name=\"flashvars\" value=\"" + flashvars + "\" \/>";
code += " <\/object>";
code += " <!--<![endif]-->";
code += " <\/object>";
return code;
}
First thing first, that code is fairly unreadable and you're in for some problems down the road. Like Kos said, I strongly recommend you use swfobject to embed your Flash file, as it handles all browser weirdness. Also, most of your params aren't needed as their defaults are already what's specified. This would be my recommended way to do it:
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
var attributes = {};
swfobject.embedSWF("filename.swf", "div-id-here", "200", "150", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>
Then you simply need to add the div element with an id that you specify and set in the javascript code and you're done. I have to also mention a problem I'm seeing right away: the width/height ratio from 300/240 is 1.25, and the ratio for 200/150 is 1.333, meaning that unless the flash is made to scale and change elements around depending on size, you'll have borders on your Flash movie to keep the ratio the way it was meant to be, unless you change the scale mode (which showall
is not one of the potential options).
I don't know how the flash was programmed or what you're trying to do exactly, but I'll leave it up to you to try things out and read the params documentation on Adobe's site.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With