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!

I frequently am asked to create flash sites with several different sections of content. Take for example a musician website - when the site first loads, it will likely be a full size publicity photo of the artist or their album along with a little bit of content. Aside from the splashy homepage though, these sites always have navigation linking to sections that display tour dates, news, biography, etc. And usually these links will generate nice transitions between the sections - possibly as simple as fading one out and the other in or as complex as a complete screen redraw.

So how can you structure your flash movie to flow between all sections smoothly? I have always architected this scenario using multiple movie clips and a little bit of actionscript. When I’m done everything existis in a single FLA file - for larger projects you may want to import external .swf files to keep file sizes down, but for smaller scale sites this approach has worked for me. Below is the barebones example and below that I explain my approach. Source files are downloadable at the end of this post.

Lets assume our site will have four sections - home, tour, news and biography. Once I created my empty stage, I created these four movie clips - you’ll notice that in my example these are nothing more than colored squares with some text on top - but these can hold any content you’d like. I then created container movie clips for each actual content movie clip. For my example, I set up the navigation to fade the current section out and the new section in, so thats what these containers do. You can let your imagination go wild for posible transitions - explode, collapse, change color or shape, grow, shrink, etc. or involve other elements to your effect.

I set up each container to first tween the alpha of content movie clip from 0% to 100%. The actionscript layer stops the playhead once alpha is 100%. I then tween the alpha from 100% to 0% and again stop the playhead. Finally, I added frame labels to the start of the fade in and fade out (called ‘in’ and ‘out’ respectively). Once I created one of this container clip, I duplicated it and swapped in the content clips - this was a simple solution for this example, but you can certainly use more advanced actionscript to do more of these steps on the fly.

Once all of my containers are set, I placed instances of them all on the main stage on their own timeline layers. I then gave them all individual instance names. Its now just about time to code up the action script, but first I had to create the navigation. I did this as simply as possible, just typing out the navigation and dropping blank button clips on top of the individual navigation words (to make my button I created a new button symbol and drew a rectangle in the hit area frame, leaving the rest blank - I can then drop this symbol on the stage and resize each instance to my buttons dimensions). I assigned an instance name to each blank button I dropped on the stage as well.

Now it’s finally time for the actionscript. I placed the following in the actions layer of the main timeline:

var curPage = "";

function changeSection(newSect) {
 if (curPage != "") { curPage.gotoAndPlay('out'); }
 curPage = newSect;
 curPage.gotoAndPlay('in');
}

btn_home.onPress = function() { changeSection(mc_home); }
btn_tour.onPress = function() { changeSection(mc_tour); }
btn_news.onPress = function() { changeSection(mc_news); }
btn_bio.onPress =  function() { changeSection(mc_bio);  }

The curPage variable holds the current section that the user is viewing - to start it is blank because no section is visible. Lets skip down to the function definitions for our buttons - I assign the changeSection function to each passing the instance name of the content containers that we put on the stage earlier.

When changeSection() is called, it first checks if a section is currently open - if one is, it players that movie clip from the ‘out’ label that we set in the container clips. It then assigns the new section that was passed into the function as the current section. Finally it players the new active section from the ‘in’ frame label.

Thats all there is to it - certainly very simple and straightforward, but I think it’s a good starting point towards generating impressive sites complete with intelligent transitions. The options to extend this are countless.

Download the files used in this tutorial.