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.