Expanding/Resizing a Flash SWF Using Javascript
I just did a bit of research on expanding a SWF beyond its original boundaries. You often see video players with a button that lets you expand the size of the player. This article looks at a couple ways to implement this functionality.
Resizing a Flash movie is just like resizing any other HTML element. You just modify the "width" property. To get a nice animated effect, you simply combine this with a setInterval call.
// we need to store the interval ID so we can stop the interval var intervalID; // this method will be called repeatedly every 50 ms function incrementSWFWidth() { var swf = getFlashMovieElem(affectedInstanceID); if (swf.width < 250) { swf.width = Number(swf.width) + 10; } else { swf.width = 250; clearInterval(intervalID); } } // start calling the incrementSWFWidth method every 50 ms intervalID = setInterval(incrementSWFWidth, 50);
If you embedded your Flash movie normally, you'll get an effect like below. Click the hand and notice how the resizing of the SWF changes the widths of the table cells beside it.
| A | B | C | |
| A | B | C | |
| A | B | C | |
| A | B | C |
Thanks to grievous angel for the original photo of the hand, by the way.
All of the content shifting around is a little ugly so what you probably want is something like below. In this case, the Flash movie grows out of its bounds over the surrounding content. The adjacent table cells don't get disturbed by the change in size.
| A | B | C | |
| A | B | C | |
| A | B | C | |
| A | B | C |
To prevent this resizing we have to be a little sneaky. First, replace the Flash movie with a <div> of the same dimensions and call it "placeholder". Now put the Flash movie embed/object tags in a separate <div> directly under the <body>. This <div> should have the CSS property position set to absolute. We'll give it the ID, "container".
<div id="container" style="position:absolute"> ...flash embed code... </div> ...content... <div id="placeholder" style="width:150px;height:150px;"></div>
The position:absolute bit actually does most of the work for us and resizing the SWF now occurs overtop of the other HTML content. However, the SWF is stuck in the top left corner—probably not where you want it. To solve this we'll create a method which determines the position of the placeholder and moves the container so it's right over top of it.
function getPosition(obj) { var curleft = curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); } return [curleft,curtop]; } function refreshFlashMoviePosition() { var container = document.getElementById("container"); var placeholder = document.getElementById("placeholder"); container.style.left = getPosition(placeholder)[0] + 'px'; container.style.top = getPosition(placeholder)[1] + 'px'; }
The first method gives the global coordinates of an object. I grabbed the code for it from quirksmode. The second method does the actual work of moving the SWF container over top of the placeholder.
To make it look like the SWF is embedded in the page using relative positioning, you should call refreshFlashMoviePosition() when the page loads and whenever the window is resized.
<body onload="refreshFlashMoviePosition()"
onresize="refreshFlashMoviePosition()">
Alternately, if you're worried about page elements moving around for reasons other than a window resize, you might just call the method repeatedly using setInterval. This hogs more resources but your user is less likely to see the Flash movie floating above your content in some strange location.
setInterval(refreshFlashMoviePosition, 100);
There you have it. Now your Flash movies can be resized dynamically without having to reload the browser.
Delicious
Digg
Reddit
Facebook
Google
Yahoo
Technorati
Comments
thanks
That is pretty damn cool,
could you PLEASE upload a complete file we can all download with all the code in place and working.
I think that would really help a lot of people out there including me.
Post new comment