Document setup

Progress bar

Button template

External files

Main file

Document setup

OK here's a tute to show you how to use loadMovie and still get smooth transitions between sections on your site. Below is what you will be making -

This uses a similar concept to the file found here.

You can download the source files for this tute here.

OK load Flash MX. The default stage size and background colour of the new document will be fine but change the frame rate to 21. Make 2 new layers and name the 3 layers "actions", "buttons" and "preloader graphics".

Progress bar

Click on frame one of the preloader graphics layer and draw a 150X10 rectangle down the bottom lefgt corner of the stage. Select the rectangle and convert it to a movieclip. Name it progressBarMC and make sure that its registration point is set to center left.



Click OK. Give the new mc an instance name of progressBar (this is case sensitive!!). Underneath the progress bar but still on the preloader graphics layer, type the word "loading" using static text. Next to the loading text, make a dynamic text box with a variable name of percent. Type anything you want into this text box just to get the look and placement right - whatever you type will never actually be visible as we will tell flash what to display in the text box.

OK select all 3 items on the preloader graphics layer and hit F8 it put them inside a movieclip. Name this new movieclip preloaderGraphicsMC and set the registration point to the center.



Click OK and give the new mc an instance name of preloaderGraphics.

Now would be a good time to save your file. Save it as main.fla into a folder named smoothTransitions.

Button template

Now click on frame 1 of the buttons layer and down the bottom of the stage draw yourself a button. Select what you just drew and convert it to a button. Name it buttonTemplate



Click OK and give the new button an instance name of button1. Go inside the button and give it an over state if you wish. Make 2 copies of the button on the stage change the instance names of the new buttons to button2 and button3.

External files

OK before we add the actionscript lets make our external content files. Choose File/New and leave everything on the new document as their default settings. Make a new layer and name the 2 layers "actions" and "content". Place a keyframe in frame 2 of the content layer and type some static text - "content1" for example. Select the text and covert it to a movieclip - name it contentHolderMC and click OK. Move the new movieclip off the stage to the left. Make new keyframes (F6) in frames 15 and 30 of the content layer. In the keyframe in frame 15, move the contentHolderMC to the center of the stage. Turn on shape tweening in frames 2 and 15 of the content layer. Your timeline should look like this



In the property inspector, set ease to 75 for keyframes in frame 2 and 15.



OK in frame 1 of the actions layer put this preloader code -

this.onEnterFrame = function() {
//this checks to see if the content on this timeline is still loading
if (this.getBytesLoaded()<this.getBytesTotal()) {
//make the preloader visible
_level0.preloaderGraphics._visible=true;
//make a variable to store the total file size of this timeline
Total = this.getBytesTotal()/1000;
//make a variable to store the amount of this timeline that has loaded
Received = this.getBytesLoaded()/1000;
//make a variable to store the percentage loaded
Percentage = (Received/Total)*100;
//target the text box in the preloaderGraphics mc and tell it what to display
_level0.preloaderGraphics.percent = int(Percentage) add "%";
//change the x scale of the progess bar to indicate how much has loaded
_level0.preloaderGraphics.progressBar._xscale = Percentage;
} else {
//play the intro animation
this.gotoAndPlay("intro");
//turn off the enterFrame action
this.onEnterFrame = null;
//hide the preloader
_level0.preloaderGraphics._visible=false;
}
};
//stop this timeline while it loads
stop();

Paste it in and have a read of the comments. In frame 2 of the actions layer make a new keyframe and give it a frame label of "intro". In frame 15 of the actions layer make a new keyframe and place a stop action in that frame. In frame 16 of the actions layer make a new keyframe and give it frame label of "outro". In frame 30 of the actions layer make a new keyframe and place this action in the frame -

//this gets the value of a variable set by our buttons and loads the appropriate movie into level 1
loadMovieNum(_level0.nextMovie,1);

Your timeline should now look like this -



OK save that file as content1.fla into the same folder as main.fla. Choose File/Publish Settings and uncheck the box to export an html file (we just need the swf) and then click on Publish and then click OK.

In the library of the content1.fla, double click on the only item (contentHolderMC) to go inside it. Then double click on text to change it something interesting - like "content2" for example. Now choose Save As and save the file as content2.fla into the same folder as the others. Choose Publish from the File menu to make an swf of your content2 movie. Repeat these last few steps to make a content3 as well.

Main file

OK back to the main.fla. Paste these actions into the first frame of the actions layer

//stop this timeline
stop();
//hide the preloader
preloaderGraphics._visible=false;
//initialise a variable
nextMovie="content1.swf";
//load the starting movie into level 1
loadMovieNum(nextMovie,1);
//button1 actions
button1.onRelease=function(){
//this makes sure that content 1 isn't already loaded
if(nextMovie!="content1.swf"){
//set the variable that holds the name of the movie to be loaded
nextMovie="content1.swf";
//tell the currently loaded content movie to play it's outro animation
_level1.gotoAndPlay("outro");
}
}
//button2 actions
button2.onRelease=function(){
//this makes sure that content 1 isn't already loaded
if(nextMovie!="content2.swf"){
//set the variable that holds the name of the movie to be loaded
nextMovie="content2.swf";
//tell the currently loaded content movie to play it's outro animation
_level1.gotoAndPlay("outro");
}
}
//button3 actions
button3.onRelease=function(){
//this makes sure that content 3 isn't already loaded
if(nextMovie!="content3.swf"){
//set the variable that holds the name of the movie to be loaded
nextMovie="content3.swf";
//tell the currently loaded content movie to play it's outro animation
_level1.gotoAndPlay("outro");
}
}

Have a read of the comments - they should explain what's going on pretty clearly. Basically the buttons set a variable that stores the name of the next movie to be loaded, and also tell the currently loaded content to play its outro animation.

Test your movie.

It should work like the one at the top except that the preloader graphics won't load - you need to upload your files and view them online see the preloader.

Obviously the transitions in this tutorial are very basic but look around online and you will see that all good flash sites have smooth transitions between sections - so use your imagination and do something interesting with the concepts covered in this tute.

cheers

PS I added photos to my content as well - just to increase the file size of the external swfs so I could see that the preloader was working correctly.

PPS I have attached 2 extra source files that show how to set up basic website Flash structures. One shows how to achieve a smooth transition by covering the current content with a box, the other uses a similar method to that outlined in this tutorial but is a more solid structure that will not jump if the user clicks on multiple buttons in quick succession. These files require Flash CS3.

PPPS To learn more about creating websites in Actionscript 1.0 check out 'ActionScript for Flash MX: The Definitive Guide' by Colin Moock.