Flash transitions

Getting Started with Flash Transitions

When you first open a Flash project that aims to move users smoothly between pages or sections, you’ll notice that the key lies in timing and order. A transition isn’t just a single visual effect; it’s the choreography of hiding one piece of content while revealing another. In Flash, you usually control this choreography from the main timeline or a dedicated action script that runs when the movie starts.

Imagine you have a site with four distinct sections. Each section sits on a frame labeled “section1”, “section2”, etc., and you want to let users jump from one to another by clicking a navigation button. The first step is to set up a global function that listens for button clicks, figures out which button was pressed, and then triggers the appropriate transition. Because the function is global, you can call it from any button or component, ensuring consistency across the project.

In practice, you’ll write the function inside the first frame of your main timeline, often referred to as frame 1. This is the most common place because the timeline starts there and the function is available immediately when the movie loads. By keeping the logic in one place, you reduce duplication and make future changes easier. The function typically takes a single argument – the name of the button that was pressed. That name is passed automatically from the button’s own event handler, which you set up on each button instance.

Let’s look at how the button event is wired. Every button in the navigation bar is an instance of the same movie clip symbol, say “navButton”. Inside that symbol, you attach a small script:

this.onRelease = function(){
  navigate(this._name);
};

Here, this._name is the instance name of the button that was clicked. Flash automatically sends that name to the global navigate function. The function then uses that name to decide which section to display. This separation of concerns – button handling inside the symbol and navigation logic in a global script – keeps the code clean and maintainable.

Now that you understand the skeleton, you can start experimenting. Change the labels on the frame tags, swap out the button symbols, or add new sections. Because the logic stays the same, adding a new button is as simple as giving it the right instance name and making sure it’s placed on the navigation movie clip. The rest of the flow – hide the old content, show the new content – is handled by the navigate function. That’s the power of keeping the transition code in one place.

When you first start, you may find that the transitions feel a bit abrupt. That’s normal – the default behavior is to stop the current frame’s motion and jump straight to the new one. Later, you’ll learn how to add fade‑in or slide animations that give the user a visual cue that something changed. But the foundation you’re building now – a global navigation handler that maps button names to frame labels – will stay the same no matter how fancy the animation gets.

Creating the Global Navigation Function

Once you have the button clicks wired up, the next step is writing the navigate function. In Flash ActionScript 1.0, you can declare a global function by prefixing it with _global. That tells Flash to make the function available anywhere in the movie. The function needs to accept the button name as its parameter, compare it to the section the user is already viewing, and then update the state accordingly.

Below is a streamlined version of the original logic that still accomplishes everything you need. The function first stores the pressed button name in a global variable, pressed. It then checks whether the pressed button differs from the last one that was active, stored in already. If it’s the same, nothing happens, preventing a redundant transition. If it’s a new section, the function updates already to match pressed, extracts the numeric part of the button name (e.g., “button3_mc” yields “3”), and then tells the content movie clip to play the corresponding frame label.

Here’s the code in a cleaner form:

_global.navigate = function(buttonName) {
  _global.pressed = buttonName;
  if (_global.pressed != _global.already) {
    _global.already = _global.pressed;
    var sectionNum = buttonName.charAt(6);
    var targetLabel = "section" + sectionNum;
    content_mc.section = targetLabel;
    content_mc.play();
  }
};

The content_mc is a movie clip that houses all your sections. The script sets a section property on that clip to the target frame label and then calls play() to move to that frame. Flash will automatically stop at the frame label you’re pointing to, so you don’t need any extra code to pause.

Notice that the function doesn’t handle the visual transition itself; it only instructs the content clip where to go. That separation is intentional – it lets you swap out the transition style (fade, slide, etc.) without touching the navigation logic. For instance, if you later add a tween that fades out the current section and fades in the new one, you can keep this function the same and just change the tween on the content_mc clip.

It’s also worth noting that this approach relies on the naming convention of the buttons. Because you use button1_mc, button2_mc, and so on, you can extract the section number with a simple charAt. If you ever need to support more than nine sections, you’ll need a slightly different extraction method, such as substring or a regular expression, but the idea stays the same.

Finally, keep the global variables tidy. Use a single already variable to remember the current section, and use pressed only temporarily. That way, the script stays fast and you won’t run into name clashes if you add more functionality later.

Preventing Rapid Clicks During Transitions

When users click the navigation buttons quickly, the script can attempt to start a new transition before the previous one finishes. In Flash, that can cause flickering, incomplete fades, or even a state where the content clip is stuck on an old frame. The original code solved this by simply hiding or disabling the buttons while a transition runs.

There are a few practical ways to handle this. The simplest is to disable all navigation buttons at the start of a transition and re‑enable them once the transition completes. In ActionScript 1.0, you can change a button’s enabled property or set its mouseEnabled flag to false. Because your buttons are instances of the same symbol, you can loop through them quickly. For example, if you store the buttons in an array, you can set each one’s enabled to false, start the transition, and then restore it in the tween’s completion callback.