I created a site recently where there needed to be static fixed width and height content on top of a slideshow background. The tricky part here is the client wanted the flash movie to fill the entire browser screen no matter what its dimensions, and wanted the slideshow to stretch to these dimensions without distorting the slideshow background.

I accomplished this goal using actionscript. First I started with David Stiller’s quick tutorial on resizing movie clips on stage resize here. I will paste all the code I used here which started from David’s and was modified with my own.

Stage.scaleMode = “noScale”;
Stage.align = “TL”;
var stageListener:Object = new Object ();
stageListener.onResize = positionContent;
Stage.addListener(stageListener);

originalWidth = mc_slideshow._width;
originalHeight = mc_slideshow._height;

function positionContent():Void {
//resize the slideshow to the total height and width of the stage
//however we dont want to distort the slideshow, so keep the slideshow’s aspect ration
if ((Stage.width/Stage.height) < = (originalWidth/originalHeight)) {
mc_slideshow._height = Stage.height;
mc_slideshow._width = (mc_slideshow._height/originalHeight)*originalWidth;
} else {
mc_slideshow._width = Stage.width;
mc_slideshow._height = (mc_slideshow._width/originalWidth)*originalHeight;
}

// position the content in the middle of the resized stage
content._x = Stage.width / 2 - content._width / 2;
content._y = Stage.height / 2 - content._height / 2;

// make sure we don't position the content off the edge of the stage,
// when the stage is smaller than the content
if (content._x < 0) { content._x = 0; }
if (content._y < 0) { content._y = 0; }
}

positionContent();

I started out with David’s code, where I set the stage scalemode and alignment. Next I add an event listener to the stage. This code makes flash call the positionContent() function whenever the stage is resized.

Next I save the original width and height of my slideshow background movie clip - this is the clip that will always fill the entire width and height of the stage regardless of its size.

Next is the positionContent function that is called onResize. First I check if the ratio of stage height to width is less than the ration of the slideshow width to height. If it is, I know I need to make the height of the slideshow equal to the width of the stage and the width of the slideshow wider than the available stage space (otherwise there will be exposed whitespace). If the ratio is greater the opposite is true.

Next I position the content movie clip in the middle of the stage as David did in his example. After that I make sure the content isn’t moved off the stage (if the stage width or height is less than the content width or height, this can be true). Finally I call the positionContent function once when the flash movie loads initially - this positions the content for stretches the stage for me on load.

This swf file (which includes content in the content and mc_slideshow movie clips) is loaded into a html file with the width and height of the object/embed tags set at 100%. Good luck!

I recently developed a site for a client where a visual tour option was linked to throughout the site. The tour was a popup and the popup was called via a javascript window.open call. All of the links to pop it up worked for me, but I heard back from the client that the tour popup link within the flash movie on the homepage was being blocked for them in Safari.

Turns out they were using safari on a mac, and the reason was because I had the flash movie calling the javascript popup code via a getUrl in on the onPress event of the button. However, by changing the call to a onRelease, it started to work. This appears to be a weird safari quirk where it blocks onPress popups but allows onReleases. I found this solution on the MochiBot Blog. Thanks!