On my computer whether looking at the presentation by directly loading the file from my hard drive, or viewing it from an html page. I was only seeing 23 of the round buttons. The creation of the flash presentation was subcontracted, so I didn't know what the final product was supposed to look like. On mine it looked fine. The 24th button points to a brief "Thanks for your time" slide which I just thought was part of the 23rd slide.
After viewing the movie on a couple different machines, I could see that the 24th button was part of the movie controller, but it would be cropped on some machines, and not on others when viewing the file directly off a hard drive. It would always be cropped when viewing it from the html files.
After consulting the creator of the flash files, and learning that the presentation's original size is 1280x720px, I set the flash <object> tag width and height attributes to be 1280 and 720, respectively. This produced the same result as before: only 23 buttons showing. I then increased the width attribute by 100, and low and behold I could see the 24th button (along with a good bit of extra white space). I think this cropping issue has to do with a Flash movie's "staging area". If the staging area is the same size as the movie's original width, but and object within the movie is wider than the width of the staging area, then it is cropped from view (at least on Windows XP, and from within web pages--Vista and Win7 would show the object when loading from the hard drive).
Luckily with just a few modifications to my resize code, using the new ratio 720/1335 (I used 1335 for the width as it showed all the 24th button with just a little extra margin), I could see the 24th button and have the flash movie resize to the width of it's container.
Here is the modified code:
function initFlashResize () {
/* add resizeFlash function to the window.resize event for Firefox
* (and other browser's which use the addEventListner method).
*/
var addEvent = false;
if (window.addEventListener){
window.addEventListener('resize', function(){resizeFlash();}, false);
addEvent = true;
} else if (window.attachEvent){
window.attachEvent('onresize', function(){resizeFlash();});
addEvent = true;
}
if (addEvent===true) {
resizeFlash((720/1335));
}
}
function resizeFlash(screenRatio) {
/* Find the width of a parent node to the div holding the flash object,
* and use this value, modified by the desired viewing ratio, to set the
* containing div's height attribute.
*/
if(!screenRatio) {
var screenRatio = (720/1335); // default screen ration for flash movie
}
var parentalNode = document.getElementById('flash_screen').parentNode;
while (parentalNode.offsetWidth === 0) {
parentalNode = parentalNode.parentNode;
}
var divWidth = parentalNode.offsetWidth;
var container = document.getElementById('ob_flash');
container.style.width = (divWidth + 'px');
container.style.height = ((divWidth * screenRatio) + 'px');
container = document.getElementById('flash_screen');
container.style.width = (divWidth + 'px');
container.style.height = ((divWidth * screenRatio) + 'px');
}
I also made slight modifications to the html
<style type="text/css">
div#flash_screen {
margin-left:auto;
margin-right:auto;
padding:0;
width:668px;
height:360px;
border:thin black solid;
}
object#ob_flash {
margin-left:auto;
margin-right:auto;
padding:0;
width:668px;
height:360px;
}
</style>
</head>
<body onload="initFlashResize()">
<div id="flash_screen">
<object id="ob_flash" width="668" height="320" type="application/x-shockwave-flash" data="flash/flash_module.swf">
<param name="movie" value="flash/flash_module.swf" />
<param name="base" value="flash/" />
<param name="quality" value="best" />
</object>
</div>
No comments:
Post a Comment