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!

You may have a need to add in some scrolling text to your flash animation. I add this functionality to a lot of musician websites where I scroll the currently playing music track, but it can easily be used to display content such as blog posts or news headlines - really anywhere you want to display a larger amount of information than you have space for. The very simple example is below:

For this example I created a new flash document and then created a new movie clip symbol which I called scoller_mc. Here I created some static text and placed it on the stage. Selecting it, I hit F8 to convert it to a graphic symbol so I can easily add motion tweening to it.

Next I create a new layer in the movie clip above the first layer with the text graphic symbol placed on it (I’ve renamed this first layer to text and name the new layer I’ve created to mask - thats right we’ve dealing with the dreaded masking options!). In this new mask layer I created a rectangle using the drawing tools and placed it right over my text. I hit F5 out around the 90th frame of the mask layer to extend the length of this movie clip.

 I then insert some keyframes on the text layer. The first one is about 40 frames out, with subsequent keyframes at 65,66 and 90. At the 65th frame I move my text right horizontally so that it is no longer covered up by the rectangle on the mask layer. In the 66th frame I move the text left horizontally again so that it is not covered by the rectangle but this time on the other side. The 40th and 90th frame I do not touch.

I then add motion tweens between the 40th and 65th frame and 66th and 90th frame. Scrubbing the timelime shows the text stay hidden under the rectangle for awhile, then move out from under it to the right, then back under it from the left. Now is where the mask comes into play - I right click on the mask layer and select the mask option. This makes many changes to timeline namely nesting the text layer under the mask layer and locking them both. For those unfamiliar with masks, any content on a mask layer acts as a sort of template for the content beneath it - only content beneath it that is covered by content in the mask layer is visible in the rendered animation.

Next go back to your main movie and drag an instance of this scrolling text movie clip to the stage and test your movie - you should have a similar effect to above.

Now this is obviously a pretty simple effect - how can we make more out of it? Well there are lots of options! You can convert the text from static to dynamic and add an instance name to it. Then you can dynamically change the text displayed in the scroll using actionscript (for example you could parse a blog rss feed and scroll the latest blog headlines). You can add additional shapes to the mask layer to create different effects as the text moves off (consider checkerboards on the edges for example). You can add actionscript to the movie clip for the onRollOver method of the clip to pause it so the text stays in place. You can add a link to the text that scrolls so your users can click it to go to that particular blog entry or news headline (this requires updating the links each time you update the dynamic text of course).

Please drop a comment if you have thoughts or ideas on this concept. Thanks for reading!

Download Flash Simple Scroll Animation Sample FLA Files

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.