Change size of embedded Flash movie, using Javascript calls to the containing page

Comments

A useful technique. Not sure it works on all JS-capable browsers, but then, IANABC (I Am Not A Browser Collector). I used this technique in the da Capo music notation software to adapt to different screen sizes.

This was adapted from a technique used at 2mdc.com/.

You will get funny results if you combine this with right-clicking on the movie and choosing "Zoom in." Doing so seems to cancel the Stage.scalemode = "noscale" directive.

The HTML

The movie's object and embed tags are set to height and width 100%, and placed inside a <div>

<div id="resizeDiv" style="position:relative; width:300px; height:150px;z-index=1> 

The Javascript

    function newSize(newX,newY) {
        var name = "resizeDiv";
	if(document.getElementById) {
		document.getElementById(name).style.width = newX + "px";
		document.getElementById(name).style.height = newY + "px";
	} else if (document.all) {
 		document.all[name].style.pixelWidth = newX;
 		document.all[name].style.pixelHeight = newY;
	} else {
		//alert("Unable to resize");
	}
    }
  

The ActionScript

   
  /************************************************************************\
	Code to call a Javascript function to resize the movie.
	Caution: I often embed Flash movies in a single-cell table, which
	gives them a nice border, etc.  But flash-in-table-in-div nesting 
	breaks the width adjustment in IE6.
  \************************************************************************/

  

    Stage.align="TL";	//align top left corner of Stage 		
    Stage.scaleMode = "noScale"; //don't change Stage size when movie is resized 

    bigger_btn.onPress = function() {
	    getURL("javascript:newSize(500, 400)");
	    slider.setValue(400 / 3);
    }
    smaller_btn.onPress = function() {
	    getURL("javascript:newSize(300, 150)");
	    slider.setValue(50 / 3);
    }

    //For the slider, we assemble the javascript call as a string
    slider.change = function() {
	    getURL("javascript:newSize(" + (this.value * 3 + 200) + ", " + (this.value * 3 + 100) + ")" );
    }