Creating

Finally! The last page of the tutorial. Here you will basically get a run-down of some tips and tricks to make the animation really cool load well. I am presuming you now have your full Flash site complete and adding some final touches.

Preloaders
I highly recommend you add a preloader if your individual pages are larger than 10k in size.

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:

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.

Structure of a Full Flash Site
A Full Flash site, in this version, 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 see, the 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; we use movie clips to load movies into!

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, 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. Click the action layer and drag it down 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 page link below to continue on to the fun part on the next page.

Factoid: In the code above, you will notice that I preceded anything having to do with the mouse pointer (_ymouse, _xmouse) with _root. Why would I do that? The reason is simple; Flash does everything relative to where the object containing the code is. _root tells Flash to start from the main timeline. If I did not specify _root, Flash would, relatively speaking, generate the mouse values in relation to the movie clip the code is on. Because the movie clips were randomly placed in various locations, the origin of the x and y values will not be a the standard 0, 0. To complicate matters, the movie clips are moving from left to right. Therefore, the mouse values will also change automatically with relation to the movie clips' movement. Because I am going to the main timeline where the stage begins at 0, 0, the mouse values will never go below 0, 0 and into the negatives. Also, the stage is not going to move like a movie clip! Therefore, if I did not use _root, for some movie clips, even the slightest deviation of the mouse pointer might force the code to start working on the negatives and creating a host of problems in positioning and size. A great many issues are solved by simply adding _root! Can you imagine subtracting 1000 from an already negative number? I always use _root when referring to the mouse pointer or something related to an absolute value for a relatively changing object. Now, are you not glad you learned that?

Previous Page

Discuss on kirupaforum.com