RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Loading External Assets in Flash with Transitions

When using MovieClips, smooth transitions are often preferred over abrupt starts and stops. This article discusses how to load and unload external content with an accompanying alpha-fade transition.

ow can I add a fade transition when I load, or unload, external SWF movies?

This question arises because, when loading a movie, the loaded content begins to appear as soon as there is enough data to display the beginning frames of the movie. This causes the loaded content to "pop in" without any transition. When unloading content, the effect is similar. An unloaded movie just disappears without any additional ceremony. How then, can a user load an external movie, with a nice fade in? Or, for that matter, fade out the current movie when unloading content?

One way to do this, of course, is to add a timeline fade-in at the beginning, and a timeline fade-out at the end, within every external movie. This requires no scripting and can be accomplished by using a motion tween to change the alpha of the beginning and ending frames in each external file.

However, this not only requires a lot of additional tedious work, it also imposes strict limitations on the loaded movies in that each file must fade in every time it is loaded and fade out every time the end of the movie is reached. Ideally, you want a more modular solution that would allow you to fade in the movie when you wanted to, or "pop" it in immediately if preferred. In this tutorial, I'll pursue this with a simple scripting approach to fade loaded movies that requires no asset modification.

To answer the question that inspired this article, I'll be using three external SWF files to create a slide show. They feature the amazing drawing collages of Tony Fitzpatrick, used by kind permission from TonyFitzpatrick.com. The following technique will also work equally well with animated and/or interactive SWFs or, as of Flash MX and later, with simple JPG files.

Author's Note: To follow along with this article, download the source files here.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date