For this part of the tutorial we'll create the seperate page movies for the website. Since all pages will have the same transitions, we'll just create a movie with the page title (i.e Home) and then save it as the other pages as well. Then all we have to do is change the title text to the corresponding page.

Now focus on the "home" movie we saved in the first part of this tutorial. Insert two additional layers. Name the first layer to "actions", the second to "background" and the third to "title". Also, make sure that the stage width and height are the same as the main movie or you'll only be able to see part of the page in the main movie.

Select layer "background". Create a background that will act as the page table background using Rectangle tool. Select the whole rectangle and place somewhere off the stage where it doesn't not overlap the stage at all. Insert a keyframe on frame 16 of the background layer then insert another keyframe on the 30th frame of the background layer. Create a "Motion Tween" from frame 1 to frame 30 on the background layer and then select the keyframe at frame 16. With keyframe 16
select, select the background and move it over to the stage and position it as it would be viewed by a user viewing it from the main movie.

Select the "title" layer and add the text "Home" to the stage. If you like, you can also add an additional background that is smaller than the background created on the background layer. Either way, make sure the "Home" text is positioned in the middle of the background of the background layer.

Select the "actions" layer and open up the Actions panel. Once the actions panel is opened insert the following code into it.

var midFrame = 16;

We'll need to know the middle frame at which it lets code from the main movie tell it to play. In other words, you can't go to another page until the current frame of this movie is at frame 16 which has a frame action that tells the Flash player to stop.

Now selct frame 16 and insert a keyframe there and then open up the Actions panel. Copy-and-paste the following code into it:

stop();

Now select frame 30 and insert a another keyframe on it, then insert the following code:

_root.container.loadMovie(_root.nextPage);

When you press a button from the main timeline this, code will tell the page movies to play and should start playing at frame 16 since since it stopped there. When the movie plays it will eventually reach frame 30 at which will load a movie into the container empty movie clip "container". The movie clips name will be stored in the "/:nextPage" variable located at root "/:" in the main timeline. In effect, this mechanism will allow for a smooth transition from page to page.

At this point I want you to save the movie. Then I just modify the text created on the title layer to "Image" and then save the movie as "image". Just repeat for the About Us page movie too. When you have saved as "image" the current movie you're modifing becomes the Image movie. So we will continue here. Select the "title" layer and the select the text; you'd select the background if you decided to make it. Then place anywhere off the stage as you did with the background on background layer. Insert a keyframe on frame 16 and then another keyframe on frame 30. Create a "Motion Tween" from frame 1 to frame 30. Select frame 16 and move the text so that it is positioned in the middle of the background of the background layer.

All you need to do now is repeat the above process for the Home and Image movie pages. After you do that, we're done with all of our movie pages for the website.