Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
Like this article? We recommend

Making a Web Site Intro

To prepare the file, follow these steps.

Step 1: Preparing the File

  1. Open Flash and open a new file (see Figure 1).

  2. Figure 1 Open a new file in Flash.

  3. Click File, Save As, and save your file to any location.

    Save frequently while you are working on any project in Flash, so you don't lose any work when something goes wrong (computer crashes, power outages, and so on).

  4. Click Modify, Modify Movie (see Figure 2). Select the Frame rate, which controls how many frames-per-second are played.

  5. Figure 2 Click Modify, Modify Movie.

    Increasing this rate will slightly increase the speed of the movie (but also make animations look smoother), and the movie dimensions. Make sure that the movie will fit on a small monitor with low resolution. You can also make two movies, one for high- and one for low resolution.

  6. Select the background color of your movie (see Figure 3). Close the window.

  7. Figure 3 Select the background color.

Step 2: Adding Content

This, of course, is entirely up to you! You can work with graphics, images, animations, and sound (an example will appear later on). If you followed the tutorials that come with Flash 5.0, you should know how to import all these files, and how to have them play. Here are some tips:

  • Use the Library (click Window, Library) to keep track of all the files you have imported so far (see Figure 4). Be sure to delete any unused files because they increase the total file size!

  • Figure 4 Click Window, Library to keep track of the files.

  • Try to use only one scene for your intro movie, which also keeps the file size down.

  • Don't use very short or boring sound loops in your intro movie.

  • Try to make animations and text appear "coordinated" with the music.

  • Display the company logo and "slogan" as much and as long as possible; this is what you want your visitors to remember. It is also good to have a sound play at the moment the logo first appears on the screen.

  • Label frames to keep track of several points in the movie (see Figure 5).

  • Figure 5 Label your frames.

There are some new useful tools on the market that can help you import even more into your flash movies and make animations easier. They include

  • Flix. Adds video to your flash files.

  • SWfX. Adds cool text effects in minutes.

  • Swish. Adds interesting text effects.

  • Swift 3D. Adds 3D animations to Flash files.

There is not much more I can say about content—it's entirely up to you. Be sure, however, that the animation fits the company image. For some examples of good intro movies, visit Flash Kit, the best Flash resource on the Web.

The content can be similar to the normal content you would have on a Flash site. But although you should keep animations on the main site limited, this is the place to show off your artistic skills! Throw in some text effects, animations, sound loops, sound effects, and company information. People will remember your site, which means they are more likely to come back! I can still remember the intro movies of some great Flash sites that I visited more than two years ago!

Step 3: Adding a Preloader

Preloaders are a must for movies with a size above 50Kb (that is, virtually every intro movie). A preloader, as you might expect, "preloads" the whole (or part of) the file before starting to play it, which means that you will not get any stuttering or stops in the movie because it is still downloading. Remember that the majority of today's Internet users are still on a low-speed connection, and an intro movie that doesn't play in one piece really loses its purpose. To make a preloader, we need to use the "If frame is loaded" expression. You would add the frame that you want to be loaded after this expression, and add "Goto (and play) *" (* is the location where you want the movie to start playing). You would usually place the preloader before the actual intro movie.

So, if your intro movie started at frame 6, for example (the first five frames being the preloader), and it had a total of 210 frames, the expression you would use would is the following (see Figure 6):

ifFrameLoaded (210) {
  gotoAndPlay (6);
}

Figure 6 Using the expressions discussed here.

You don't have to type this all in, instead just right-click on a frame to add the expressions. The point is to have the movie go back to frame 1 when it reaches frame 5, until the movie is completely loaded. This is done simply by adding the following expression to frame 5:

gotoAndPlay (1);

Now, the movie will loop continuously until the whole movie is loaded and then start playing at frame 6 (the start of the actual intro movie).

You can add a simple animation, logo, text and/or sound to the preloader to make the waiting a "bit more comfortable." You can also program a preloader that actually displays the percentage loaded and has more fancy effects. You can download some examples of great preloaders (also much more complicated than the couple of lines of code above) from Flash Kit.

  • + Share This
  • 🔖 Save To Your Account