This tutorial will show you how to create a simple website using Flash MX and ActionScript. Lets jump right into it.

First open two new documents. The first document you opened, save it as "main" and save the second as "home". Now focus on the "home" movie. First we'll create a menu that contains three buttons; "Home", "Images" and "About Us". One of the things we're going to accomplish is to have threeseperate movies that act as each page of the website. When you click a button from the main movie, in our case the movie named "main", it will load a movie into an empty Movie Clip. Also, we will
want a nice smooth transition from one page to the next.

Create three more layers in the main timeline.Re-name the first layer of the "main" movie to "actions" and the second to "background", the third to "menu" and the fourth to "container". Select the "container" layer go to the "Insert" menu option and click "New Symbol". Create a MovieClip and name it "container". From the Library panel Drag-and-drop the object labeled "container" onto the stage and give it an instance name of "container". This will be the empty MovieClip that
will hold the movie pages (i.e home).

Select the background layer and import a background image onto the stage. This will be the background image for your site so try to pick a nice looking image. Position the background image appropriately.

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.

[as]var midFrame = 16;[/as]

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:

[as]stop();[/as]

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

[as]_root.container.loadMovie(_root.nextPage);[/as]

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.

This is the final part of this tutorial. Ok, focus on the "main" movie once more. Now select the "menu" layer we'd created before. Selct the Oval tool from the tools panel and draw a circle on the stage. Select the whole circle, convert it into a Movie Clip and give it the name "menu". Double-click the circle on the stage. When you enter the timeline of the "menu" movie clip, select the whole circle again and convert it into a movie clip again. This time, give it the name "button". Insert two more layers. Double-click the first layer (Layer 1) and re-name it to "home". Re-name the second and third layer to "images" and "about". Open up the Library panel and select the "images" layer. Drag-and-drop the object labeled "button" from the library panel onto the stage. Now select the "about" layer and Drag-and-drop the "button" object from library panel onto the stage again.

Ok, now we need to give the buttons some action. Select the button on the "home" layer and open up the Actions panel, then Copy-and-paste the following code into it:

[as]
on (release)
{
     if (_root.nextPage == undefined)
     {
          _root.nextPage = "home.swf";
          _root.container.loadMovie("home.swf");
     }
     else if (_root.nextPage != "home.swf")
     {
          if (_root.container.midFrame >= _root.container._currentframe)
          {
               _root.nextPage = "home.swf";
               _root.container.play();
          }
     }
}
[/as]

Now select the button on the "images" layer and in the Actions panel Copy-and-paste the following into it:

[as]
on (release)
{
     if (_root.nextPage == undefined)
     {
          _root.nextPage = "image.swf";
          _root.container.loadMovie("image.swf");
     }
     else if (_root.nextPage != "image.swf")
     {
          if (_root.container.midFrame >= _root.container._currentframe)
          {
               _root.nextPage = "image.swf";
               _root.container.play();
          }
     }
}
[/as]

Now select the button on the "about" layer and in the Actions panel Copy-and-paste the following into it:

[as]
on (release)
{
     if (_root.nextPage == undefined)
     {
          _root.nextPage = "about.swf";
          _root.container.loadMovie("about.swf");
     }
     else if (_root.nextPage != "about.swf")
     {
          if (_root.container.midFrame >= _root.container._currentframe)
          {
               _root.nextPage = "about.swf";
               _root.container.play();
          }
     }
}
[/as]

Last but not least, navigate back to the main timeline and select the "actions" layer.
With the actions layer selected, open up the Actions panel. Once opened, Copy-and-paste the following into it:

[as]
var nextPage = "home.swf";
container.loadMovie(nextPage);
[/as]

That is pretty much it, for a description on how the system works continue to the next page.

Hello again! Ok, to understand the code you should consider what happens when you click a button. Consider that following scenario:

From the "main" page, you press the "Images" button when the the "home" page is currently being viewed. Note that when the home page is visible, the "home" movie is stopped at frame16 on the "actions" layer for that movie. The same behaviour should be portrayed from the "images" and "about" page movies.

After you press the "images" button, the following code will be executed:

[as]on (release)
{
     //Will execute when you release the mouse button on the "images" button
     if (_root.nextPage == undefined)
     {
          _root.nextPage = "image.swf";
          _root.container.loadMovie("image.swf");
     }
     else if (_root.nextPage != "image.swf")
     {
          if (_root.container.midFrame >= _root.container._currentframe)
          {
               _root.nextPage = "image.swf";
               _root.container.play();
          }
     }
}[/as]

This is what this code does:  If the "images" button is pressed, check to see if the
"_root.nextPage" variable is defined, if not, initialise it with the string "image.swf" andload the movie "image.swf" in the "_root.container" movie clip which is initially empty. If  "_root.nextPage" is denfined then the if  "_root.nextPage" doesn't hold the name of the movie requesting to be load ("image.swf") in "_root.container" check to see if the current is not equal the midframe of the currently loaded movie. If the it is on the midFrame at which the movie is stopped, set the the nextPage variable to "image.swf" and player the rest of the movie currently loaded in the "_root.container" movie clip.Remember when we wrote code on the last frame (30) on each page movie? Well when frame thirty of the currently loaded movie is reached it will load the movie whos name is located in the "_root.nextPage" variable. In effect a page transition occurs.

For closure, the folling code is what is executed when the 30th frame of what ever movie is loaded in the "_root.container" movie clip:

[as]_root.container.loadMovie(_root.nextPage);[/as]

Ok that is the end of this tutorial. I hope this was some help and you understood it.
You can also add different stuff to each movie page that gives it its own characteristics and such. But make sure that they have the commonalities explained above. That concludes this tutorial.

Click this link to see the completed work: Completed Website