This tutorial will explain how to build a flash website with external SWF content, transition effect and also preload the external content. The following animation should give you an example of what you will be creating:

[ click the buttons in the above animation ]
 

Site structure

The Flash site in this tutorial consists of the following:

• Index Animation
  The index animation is your main movie, with the buttons and an empty movie clip to load external SWF into.
   
• Content Animations
  The content animations are animations that contain the content to be loaded into the index animation.
   
• Transition Animation
  The animation that will be played whenever you click a new button. It also contains the preloader action.

Before we begin, you should download the partial source for the animation. Don't worry, the partial source still involves you creating objects, adding actions, and more:

The Interface

1. Once you have done that, open file main.fla. Select the buttons layer. Then press F11 or go to Window | Library. Drag the button but1 and drop it on stage. Set its x coordinate to 10 and y coordinate to 50. Name this instance b1:

 
[ set the x and y coordinates ]

Repeat the same for the buttons named but2 and but3. Give them them the instance name b2 and b3. Also, ensure their coordinates are the following:

but2:    x=10 y=80
but3:    x=10 y=110

We are done with the buttons. This is how your stage will look like after completing the above step:
 

[ how your stage should look ]
 

2. Select the mask layer. Open your library, drag the mask symbol and drop it on stage. Set its x coordinate to 100 and y to 40.
    

3. Select the content layer. Open your library, drag the content symbol and drop it on stage. Set its x coordinate to 100 and y to 40. Name this instance content.
    

4. Select the transition layer. Open your library, drag the transition symbol and drop it on stage. Set its x coordinate to 240 and y to 114. Name this instance transition. We are almost done now...
    

5. Now we have to set the mask layer as a mask for the content and transition layers because we just want the transition and content to be visible inside the content area.
   
   Right click the mask layer. Select Mask. Right click on content layer. Select Properties. Now check the Masked option. This is how your layers will look like after this:

[ your layer structure ]
 

We are done with the interface. Now we have to add all the actions.

---

1. Click the actions layer. Then press F9 or go to Window | Actions. Copy and paste the following code into the Actions dialogue box:

b1.onRelease = function() { if (_root.section != "profile.swf") { _root.section = "profile.swf"; _root.transition.gotoAndPlay("closing"); } }; b2.onRelease = function() { if (_root.section != "gallery.swf") { _root.section = "gallery.swf"; _root.transition.gotoAndPlay("closing"); } }; b3.onRelease = function() { if (_root.section != "photos.swf") { _root.section = "photos.swf"; _root.transition.gotoAndPlay("closing"); } };

[ copy and paste the above code ]
 

2. Click the content layer. Click on the content movie clip. Then press F9 or go to Window | Actions. Copy and paste the following code into the Actions dialogue box:

onClipEvent (enterFrame) { if (!loaded && this._url != _root._url) { if (this.getBytesLoaded() == this.getBytesTotal()) { loaded = true; _root.transition.gotoAndPlay("opening"); } } }

[ copy and paste the above code ]
 

3. Click the transition layer. Double Click on the transition movie clip. Then select the frame 1 of the actions layer. Press F9 or go to Window | Actions. Copy and paste the following code into the Actions dialogue box:

                         _root.section =
   
     "profile.swf";
   
    

4. Click on the frame 9 of the actions layer. Press F9 or go to Window | Actions. Copy and paste the following code into the Actions dialogue box:
   
        loadMovie(_root.section, _root.content);
     stop();
    
5. Click on the frame 24 of the actions layer. Press F9 or go to Window | Actions. Copy and paste the following code into the Actions dialogue box:
   
        stop();

---

Code Explanation

The following sections provide a brief reasoning behind why the code was used and how it works in its used context.

[ Button ]

• if (_root.section != "profile.swf") {
checks if _root.section is different than "profile.swf"
   
• _root.section = "profile.swf";
  assigns to _root.section the value "profile.swf"
   
• _root.transition.gotoAndPlay("closing");
  tells transition movie to start playing its closing animation

[ Movie Clip ]

• if (!loaded && this._url != _root._url) {
  checks if loaded is false and if the content mc contains an external .swf file
   
• if (this.getBytesLoaded() == this.getBytesTotal()) {
  checks if profile.swf is fully loaded.
   
• _root.transition.gotoAndPlay("opening");
  tell transition movie to play its opening animation revealing the new content

---

You have just completed the tutorial. If you want to test it, upload it to a server. I have provided the final source for you to examine. 

If you have any questions, feel free to post them on the forums by clicking here.

Regards,

claudio

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇