Ah yes! The culmination of ones Flash experience can be seen in a full-Flash site. Needless to say, creating a fully "Flashnetized" site can be a frustrating and tiresome process. While this tutorial will not help you design the Flash site, this tutorial will help you to take care of the technical and usability details such as linking between pages, creating a good navigation, and other common stumbling blocks one will encounter when creating a Full-flash site.

Before you begin this tutorial, make sure you are somewhat familiar with the following concepts:

• LoadMovie
• Layers
• Adding Actions
• Buttons

I am sure you are wondering how/what you will be accomplishing in this tutorial. You will basically take a Flash site I have created and modify it to make it work properly when linked. For an example of the final Web site you will have a hand in creating, click the link below and explore:

View Sample Site

You have just seen the animation above and how all the links work. While it is easier for you to understand seeing my animation, the real test is creating your OWN animation and making everything work. Read on...

Structure of a Full Flash Site

A Full Flash site, in this tutorial, consists of the following:

• Index Animation
  The index animation is nothing but the pavement on which your actual animation will be built on. The index animation will contain nothing but the navigation menu and an empty movie clip to load external SWF files into.
   
• Content Animations
  The content animations are animations that contain the content to be loaded into the index animation.

As you can understand, a full flash site is comprised of several individual swf files. The index animation is what loads first. Clicking on any of the navigation links loads the content animations into a blank movie clip stored on the index animation. If you are familiar with loadMovie you will remember that you can load animations into a movie clip or a level.

I am sure you are probably confused out of your mind. Instead of learning from something abstract, like my explanation, how about you get your hands dirty with what I mentioned above? I have created a sample site with a lot of key features missing so you can add them in yourself.

Without further delays, let's start creating the sample site viewed above:

1. First, download the source file with the sample files in it. Don't worry, you will add the buttons, links, and code yourself with instructions found in the tutorial.
   
      :: Download Zip File
    
2. Once you have downloaded and unzipped the files, open the file called clubkirupa.fla. After the file has been opened, you will see a basic structure of a main animation.
    
3. What good is a site without navigation? Let's add the navigation menu. I have already an outline of a navigation menu without any coding. Select the layer marked "navigation". Then, press F11 or go to Window | Library.
    
4. The library will appear. Drag the symbol named "nav_background" and drop it onto the stage:

[ drag and drop the nav_background symbol to the stage ]

5. Make sure the object is aligned perfectly on the top-left edge of the edge. To easily set the position of the menu on the top-left edge, select your movie clip, look in the Properties panel below, and enter a 0 in both the X and Y fields:

[ entering a zero in the X and Y fields positions the menu perfectly ]

6. Now, we need to create a place where the external SWFs would load. Remember, to use LoadMovie, we need a target to load the movies. The target will be a movie clip.
   
   Go to Insert | New Symbol. The Create New Symbol dialog box will appear. Give the movie clip a unique name , select Movie Clip, and press OK. You will then see the movie clip opened in the work area. Simply click the Scene 1 Tab:

[ click the Scene 1 tab ]

7. You should now be back on your main timeline. Anyway, while we created the movie clip symbol, we haven't added it to anywhere on our animation. Click the "action" layer. Press F11 or go to Window | Library.
    
   Your Library dialog box will be appear. Select the movie clip you just created and drag it on your main timeline. Set the co-ordinates of the movie clip to 0, 0 - just like you did in Step 5.
    
   You should see the hollow circle of your movie clip on the top-left corner of your timeline:

[ the hollow circle on the corner is actually your movie clip ]

8. Select your movie clip and give it the instance name contents. If you don't give the movie clip the instance name contents, your movie simply will not work.
    
   Now that you have the movie clip fixed, here comes the tricky part (just kidding). Click the action layer and drag it below the navigation layer:

[ drag the action layer below the navigation layer ]

---

Well, you have the interface of the animation completed. We still have to add the actions, and then you'll have to learn the basics of creating your own Flash site. Click the next section link below to continue on to the fun part in the next section.

---

Let's continue on with this tutorial, shall we? In case you stumbled on this page from another location and did not chance to finish page one, click here to start the tutorial from the beginning.

Adding Actions

As is the case with almost all of today's animations, you will need to have some minimal knowledge of ActionScript programming to make the most out of Flash. The following sections of text and code will help you to accomplish what you desire in Flash.

Let's add the code to our Flash animation, and I will explain why we used the code afterwards. Make sure you have the movie displayed in Flash:

1. Right click on the menu and select Edit in Place. You will now be editing the movie clip that contains the buttons.
    
2. Right click on the locations button and select Actions. Copy and paste the following code into the Actions dialog box:

                      on (release) {

 _root.contents.loadMovie("locations.swf");

}

[ copy and paste the above code into the actions dialog box ]

3. Now, right click on the music button and select Actions. Copy and paste the following code into the Actions dialog box:

                      on (release) {

 _root.contents.loadMovie("music.swf");

}

[ copy and paste the above code into the actions dialog box ]

4. Now, you guessed it, right click on the membership button and select Actions. Copy and paste the following code:

                      on (release) {

 _root.contents.loadMovie("membership.swf");

}

[ copy and paste the above code into the actions dialog box ]

5. You only have the home button to deal with. Right click on the home button and select Actions. Copy and paste the following code:

                      on (release) {

 _root.contents.loadMovie("main_content.swf");

}

[ copy and paste the above code into the actions dialog box ]

You have just completed adding the code to all the buttons. Save the animation and preview it in your browser by going to File | Publish Preview |  HTML. Now, click the buttons. Notice that the individual pages load in the main window.

Once you have completed exploring the animation, press the Refresh button. You will see the splash page again. Do you notice something strange from your animation and from my sample animation in the previous section? No? Maybe the following images should help you out:

[ my example ]

[ your example ]

If the difference still eludes you, click the home button. Notice how the CLUB Kirupa logo appears. Yet, when the page is loaded initially in the browser (press the Refresh button), the home page containing the logo does not appear in your version of the animation.

That is because we did not code that in there. We did code the home page button, but that works only when the user actually clicks on the home link. When the page initially loads, the user does not click anything. The home page content should display without having the user input anything.

To solve that problem, follow the following steps:

1. Click the Scene 1 tab. I am presuming you are still editing your buttons in the menu movie clip. If not, ignore this step!
    
2. Right click on the keyframe on the action layer and select Actions. Copy and paste the following code:

                      _root.contents.loadMovie("main_content.swf");

[ copy and paste the above code into the actions dialog box ]

3. Save the file and preview the animation in your browser by going to File | Publish Preview | HTML.

Much better! Notice how the logo from the home page animation displays when the animation loads. Now, let me explain how and why the code works the way it does.

---

The Code: An Explanation

For the movie clips to load, I basically had two requirements:

1. When the user clicks a button (or loads the page) a movie file from another location has to load.
    
2. The movie file loaded has to be loaded into a specific location.

Here is where knowing a little bit of ActionScript comes in quite handy. Having read and used the loadMovie action, I figured that it would suit my requirements perfectly. The loadMovie action in Flash MX follows the basic structure:

                    movieClipName.loadMovie("url

  to movie.swf");

MovieClipName in the above code is the name of the movie clip that the movie, "url to movie.swf", will load into. Basically, the LoadMovie action helps me to accomplish the two requirements I set forth above.

Therefore, let us take a peek at a section of code added to one of our buttons. The following section of code has been taken from the home button.

on (release) {

  _root.contents.loadMovie("main_content.swf");

  }

The first line is basically the event handler that triggers the code in the lines that follow. The second line is where the loadMovie code appears. While the code looks a little different from the loadMovie code I explained above, it is quite similar.

The name of my movie clip where the animation main_content.swf loads is called contents. I added _root before contents because the movie clip contents is located on the main timeline.

Each of the other buttons have similar code with only the movie different. For example, the locations button will not have the action "main_content.swf". The locations button has the movie's name specified as location.swf. You can see the other animations by going to the folder where you extracted all the animations.

Finally! You have completed this tutorial. Your animation should work properly, and, when you are heading off on creating your own animation, the following tutorials should help you some more:

• Preloader with Load Progress
  Avoid boring loading delays by adding a nice preloader.
   
• Centered Pop-Up Window
  Display your animation in a pop-up window that centers on the user's screen.
   
• Submitting to Search Engines
  Follow Phil Jayhan's tricks to get search engines to like your site.
   
• Text in Flash: Make it Legible!
  Learn how to make text easier to read for your viewers.
   
• Flash Detection Scripts
  Use the Flash Detection scripts to ensure your visitors have Flash and can see your site!

You may be wondering where the final FLA for the animation is. If you downloaded the partial source code, the final SWF and FLA are available. Open the file clubkirupa_final.fla (part of larger download) to see my version of the same animation you modified.

---

Randomness from Kirupa

I really hoped you enjoyed this tutorial. I still feel this tutorial is unfinished (after weeks of re-writing) and missing a few more tricks/steps to help the user out. If you have any modifications or suggestions to make this tutorial better, don't hesitate to drop me a line on the forums. I would really appreciate any comments, good or bad!

---

---

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 my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇