Introduction

Aaah, the Flash intro. Why, oh why do we do it? Especially when we know that almost everyone who sees our lovingly crafted animations and sound-scapes will hit the “skip intro” button before a handful of frames have played.

Why? Simple:

• Visitors know that there is nothing important in the Flash intro.
• They tend to take forever to download.
• If there is a loader, it tends to be on the dull side.
• The intro stands apart from the remainder of the site (which will usually be in HTML).
• It’s only an ad.

Server logs

We have already seen some of the reasons why people tend to skip our intros. Don’t believe me? Check out your server logs and see how many times your intro.swf file downloads completely, and compare that to the number of times you have incomplete transfers of intro.swf (or whatever your intro is called). And if they are skipping your intros, you are probably annoying your site visitors (or worse still: your client’s visitors).

What? You don’t have access to your client’s server logs? Our advice is to sign whatever confidentiality agreements you have to to get access to this invaluable resource. It will help you to optimise the work you deliver. The logs will:

• Enable you to see how visitors are using your sites.
• Make sure that the marketing aims of the site are being met.
• Let you fine tune the traffic flow through your site, supporting the business goals of your clients.
• Establish popular resources within the site so you may develop more of that media or redevelop some of the weaker content of the site.
• Know how visitors are finding your sites.
• Find out who is linking to your sites.

Armed with this information, you are able to deliver premium content and advice for your clients (especially if you have a SEO clause in your contract). And in this case it may even let you know that you are annoying every new visitor to your site with an intro movie.

We have developed some custom Microsoft Excel spreadsheets and Access databases to make analysing server logs quick and easy. The Excel templates contain scripts to import and tidy up the raw log files which we then transfer to our Access databases. With each database we can write any custom queries we like to review the log files. This gives us (and our clients) an opportunity to ask any questions concerning what people are doing on our sites, where is our traffic coming from, what areas are the most popular, how effective a particular promotional campaign is, or anything else that interests us. The cost to us was that we had to learn Microsoft Office scripting, spreadsheet and relational database skills. It’s really been worth the effort, though!

How may we avoid the intro?

Anyway, back to avoiding intros. You may find that most of the time, a good solution to the loader problem is to stream a stylish animation of your sites’ GUI components (including logos). Build it fast (not too many frames) and lean (not too many bytes). It will impress site visitors with a “less is more” approach while actually providing a useful service: animating the construction during the file download phase. Magicians do this all the time. They wave one hand in the air saying “Look at me, look at me,” while the other hand is busy supporting the illusion.

It must be quick, though, otherwise it will get tedious for the viewer to watch animations every time they go to your site. We will develop a piece of code for this later. It will detect if enough of the SWF file has loaded so that you may play an alternate animation, or simply jump to a fully constructed page.

The added bonus is that if the build animation is quick enough, when your visitors subsequently return, the GUI build (our non-intro) shouldn’t have enough time to annoy anyone!

Why would we want an intro?

This is great for sites that want to get down to business as quickly as possible (keep it fast), have strong branding that is easily converted to vector art (keep it lean), and have a small set of resources that are required for the user interface (that is: a clean, minimal style).

But there are better ways to support sites that have a richer design style, large audio resources, or substantial quantities of bitmapped or vectored components.

You may also have clients that have special requirements for an intro. And it may have to tie in with cross media branding. A parallel to this is the “Station ID” used by TV or cable broadcasters. They are usually quick, punchy, let you know who’s delivering the great media you are about to view, then they get out of your way.

Building a high quality site intro under these conditions will challenge anyone’s Flash skills. It will have to start displaying the intro as quickly as possible (not just a loading message), buffer further intro content at appropriate places within the intro before displaying it, and allow viewers that have already seen the intro (or are not interested in it) to skip the intro.

What should an intro do?

All right, if we are going to build a real site intro what should we do and not do? Here’s a list:

1. Life is short: intros should be too.
   Don’t waste other people’s lives by making them wait for site intros to download.
   
2. Start showing real content as soon as possible.
   Don’t download video, large audio or images first: animate in some text or vector art first (possibly accompanied by small sounds) while downloading larger media. Preloaders are not counted as real content.
   
3. Entertain with what you have.
   A good entertainer can amuse audiences with a simple coin, spinning it across fingers or pulling it from unsuspecting kids’ ears. Similarly, we may build animations from available resources while we wait for the next piece of media to arrive.
   
4. Reuse resources.
   If we are going to make people wait for our intro, we should try to use some of those elements (vector art, bitmap images, or sounds) within the site proper, so that those resources won’t have to be downloaded again.
   
5. Give people an out.
   Do provide a “skip intro” button for visitors that have seen the intro before.

Points one through three will be obvious to many readers, but points four and five may be new ground. Sharing resources is a great way to download once and reuse over and over again. Here’s a quick primer.

Any resource in your library may be shared with other Flash files. Shared resources do not have to be downloaded more than once, no matter how many SWF files you include them in. This makes sharing perfect for interface sounds, logos, and style elements that are repeated across multiple SWF files.

Open your Library (Ctrl+L). Right click on a resource and choose Properties… from the context menu. This will open the Symbol Properties dialog box.

This dialog lets you define how you want a resource to be shared (under the Advanced drop down). In a site intro, never “Export in frame 1″. This will force the resource to be loaded before any animation starts, negating the cool streaming of content that Flash does so well and instead leaving visitors with plenty of nothing to look at until the loading has completed.

Also check out “Using Flash Professional > Symbols, instances, and library assets > Sharing library assets at runtime” in your help file for more info.

If you are going to spend time downloading resources, you may as well put the elements into a site intro and do some funky moves while you are waiting. Try to load the smallest elements first then do cool stuff with them while you load the larger resources.

Not sure about the sizes of your resources? Use your Bandwidth Profiler. See “Using Flash > Best practices > Optimizing FLA files for SWF output > Test document download performance” in your help file for more info.

And because you have shared the resources, your intro will not be wasting anybody’s precious seconds on this planet!

Time to look at some ActionScript coding ‘cos we still have to add in a clever “skip intro” button.

A clever skip intro button (AS2 version)

Clever? How? Our skip intro button will only show itself when the entire site intro has loaded. This is because our site intro is not wasting time; it is entertaining while loading important resources that will be used in the remainder of the site by exporting the shared resources.

The method is to drop a button on to a layer in the main timeline and add your code to load the appropriate file when it is clicked (put the code on the button, not on the timeline). Ours looked like this:

on (press) {
        loadMovie("main.swf", 0);
}

Convert your button to a movie clip (F8) and give it an appropriate name.

Now add the following code to it (again, put the code on the movie clip, not on the timeline):

onClipEvent (enterFrame) {
        if (_parent.getBytesLoaded() == _parent.getBytesTotal()) {
                this._visible = true;
        } else {
                this._visible = false;
        }
}

This code will make the button visible the instant the entire file has loaded; otherwise the button will be invisible. With this version, the file may be skipped as soon as possible.

With a few changes, you can make it show only if everything has loaded in the first frame (so that the skip intro only shows if the intro has already been viewed), forcing the intro to be viewed at least once:

onClipEvent (enterFrame) {
        if (_parent._currentframe == 1) {
                if (_parent.getBytesLoaded() == _parent.getBytesTotal()) {
                        this._visible = true;
                } else {
                        this._visible = false;
                }
        }
}

Automatic skip build

Finally, we may use these ideas to skip animations that have already played once for the viewer. This is great if we have managed to avoid building an intro by animating in screen elements as we were streaming in content, but are now stuck with that animation every time the viewer returns.

This piece of code checks to see if the file has already been loaded. If not, then we should let our loading animations play (this could be things like logos sliding in, menus building, whatever takes your fancy). But if the file has fully loaded already this means that your visitor has probably already been entertained by your media callisthenics and would just like to use your site. In this case you can just jump forwards to an appropriate frame where the visitor may get down to business. (If you animations are really cool, you can still add in a button that says “play intro”!)

Add a layer and name it “actions”. Keyframe frames 1 and 2. Add this code on frame 1 of the actions layer.

if (getBytesLoaded() == getBytesTotal()) {
        gotoAndPlay("skip build");
}

Now add a layer and name it “labels”. Keyframe frame 1. Label this frame “start”. Also add a keyframe where you would like to skip forward to if the file has already been fully loaded. Label this frame “skip build”.

All done. Easy.

Conclusion

The actual approach that we used in our intro for the Western Australian Museum’s “Western Australia: Land and People” online exhibition involved a mixture of all of the methods we have discussed here. The intro was used as a last resort when resources became too large to be included in our main SWF file.

In the intro we streamed the smallest content first (mainly logos) and animated them in while waiting for a large map image to load. When that was available, the map was animated in, providing the background image for the online virtual exhibition.

Throughout this, we are constantly checking the download progress and as soon as the intro is fully down, we display the “skip intro” button. Clicking on the button doesn’t load our main SWF file, but instead jumps to the end of our intro (straight to our unfolding map animation) providing an appropriate segue to the virtual exhibition proper.

This exhibition is no longer on line, but served the WA Museum well into 2009.