If
you’re developing with Flash, it is
likely that you’ll be loading external
movie clips at some point, and if you haven't
yet, you should really look into it. In
this tutorial, I will demonstrate an easy
way to create flawless transitions between
the loading and unloading of Flash files.
By Aaron Elliot
Instead of creating a transition animation
and preloader on every clip that loads into
your movie... you will use an embedded movie
clip to play a nice fade out, load the movie,
and then fades back in.Start by
creating a main movie that will
hold your layout, navigation, etc.
1.Open your Flash program. On a lower
layer, underneath your menu: Insert
a blank movie clip and name it “transition”.
This clip will play a transition
animation while your movies load in the
background.
2.Below the “transition”
layer, add a new layer and another
blank movie clip to the stage, name it “loader”.
This will be the target where your content-related
movie clips load into.
3.
Open the “transition” movie
clip and create three layers to hold: 1)
Actions 2) Labels and 3) Animation.
I used 17 frames to create my animation
but any number of frames will do. It's just
a fade in and out animation. I made a white
rectangle and placed alpha effects to relevant
key frames:
- Frame 2 (alpha = 0)
- Frame 9/ Midway (alpha = none)
to cover the screen during movie clip transitions
- Frame 17 (alpha = 0)
On the “labels” layer, select
Properties tab to set frame labels to:
- Frame 2 (“closing”)
- Frame 9 (“opening”)
On the “Actions” layer, I’ll
be using global variables to store the names
of the movies that are loaded. The goal
with all of this is so that your buttons
(in navigation/menu) will call a frame label
and set a variable for the “transition”
movie clip.
The first and last frames of the transition
movie clip should have stop actions. At
your midway key frame (Frame 9) you'll need
to add a LoadMovie action
because at this point the “transition”
clip has faded in a large white rectangle
and covered the loader clip.
Actions on Frame 1:
_root.section
= "blank.swf";
stop();
Actions on Frame 9:
loadMovie(_root.section,
_root.loader);
stop();
Actions on Frame 17:
stop();
4. Now
go to the “menu” layer, it contains
a movie clip with your navigational content.
Inside the movie clip add this action
to each button:
on
(release) {
_root.section = "yourmovie.swf";
_root.transition.gotoAndPlay("closing");
}
When a user clicks the button the variable
“_root.section” is set to “yourmovie.swf”
and then it tells the “transition¨
movie clip to start playing at the “closing”
frame label.
Example of Button 1 in “menu”
movie clip:
5.We’re almost done! The “transition”
clip still needs to fade out and play the
“closing” frame label—this,
after the external movie clip is loaded.
To make sure this happens only after the
entire movie is loaded, you need to add
a preloader function to the “loader”
movie clip on the main stage.
This is a very simple preloading script
that checks total bytes loaded against the
total size in bytes. Then once it has loaded
calls for the transition movie clip it goes
ahead and plays the “opening”
frame label (fading back out).
Edit the buttons on your navigation
and give them the button code above, just
change the name of each movie clip you want
to load with each button (_root.section
variable).
If you want to have something inside of
the “loader” clip by default,
you can add a basic loadMovie call on first
frame of your main timeline. I used
blank.swf for this and its code is
simply:
loadMovie("blank.swf",
"loader");
That’s it. You can obviously do much
more with this idea of using variables and
a common transitional clip and loader. See
the enclosed source files for more information.
Hosted by