Preloader
and Transition for Dynamic Files
by claudio
This tutorial will explain how
to build a flash website with external SWF content,
transition effect and also preload the external content. The
following animation should give you an example of what you
will be creating:
[ click the buttons in the above animation
]
Site structure
The Flash site in this tutorial consists of the following:
Index Animation
The index animation is your main movie, with the buttons
and an empty movie clip to load external SWF into.
Content Animations
The content animations are animations that contain the
content to be loaded into the index animation.
Transition Animation
The animation that will be played whenever you click a new
button. It also contains the preloader action.
Before we begin, you should download the partial source
for the animation. Don't worry, the partial source still
involves you creating objects, adding actions, and more:
Once you have done that, open file main.fla. Select
the buttons layer. Then press F11 or go to Window |
Library. Drag the button but1 and drop it on stage.
Set its x coordinate to 10 and y coordinate to 50. Name
this instance b1:
[ set the x and y
coordinates ]
Repeat the same for the buttons named but2
and but3. Give them them the instance name b2 and b3. Also,
ensure their coordinates are the following:
but2: x=10 y=80
but3: x=10 y=110
We are done with the buttons. This is how
your stage will look like after completing the above step:
[ how your stage should look ]
Select the mask layer. Open your
library, drag the mask symbol and drop it on stage.
Set its x coordinate to 100 and y to 40.
Select the content layer. Open your
library, drag the content symbol and drop it on
stage. Set its x coordinate to 100 and y to 40. Name this
instance content.
Select the transition layer. Open
your library, drag the transition symbol and drop
it on stage. Set its x coordinate to 240 and y to 114.
Name this instance transition. We are almost done
now...
Now we have to set the mask layer
as a mask for the content and transition
layers because we just want the transition and content to
be visible inside the content area.
Right click the mask layer. Select Mask.
Right click on content layer. Select Properties.
Now check the Masked option. This is how your
layers will look like after this:
[ your layer structure ]
We are done with
the interface. Now we have to add all the actions.
Click the actions layer. Then press F9
or go to Window | Actions. Copy and paste the following
code into the Actions dialogue box:
[ copy and paste the above
code ]
Click the content layer. Click on the
content movie clip. Then press F9 or go to Window |
Actions. Copy and paste the following code into the
Actions dialogue box:
[ copy and paste the above
code ]
Click the transition layer. Double
Click on the transition movie clip. Then select the
frame 1 of the actions layer. Press F9 or go
to Window | Actions. Copy and paste the following code
into the Actions dialogue box:
_root.section =
"profile.swf";
Click on the frame 9 of the actions
layer. Press F9 or go to Window | Actions. Copy and
paste the following code into the Actions dialogue box:
loadMovie(_root.section, _root.content);
stop();
Click on the frame 24 of the
actions layer. Press F9 or go to Window | Actions.
Copy and paste the following code into the Actions
dialogue box:
stop();
Code Explanation The following sections provide a brief reasoning behind
why the code was used and how it works in its used context.
[ Button
]
if (_root.section != "profile.swf") {
checks if _root.section is different than "profile.swf"
_root.section = "profile.swf";
assigns to _root.section the value "profile.swf"
_root.transition.gotoAndPlay("closing");
tells transition movie to start playing its closing
animation
[ Movie
Clip ]
if (!loaded && this._url != _root._url)
{
checks if loaded is false and if the content mc contains
an external .swf file
if (this.getBytesLoaded() ==
this.getBytesTotal()) {
checks if profile.swf is fully loaded.
_root.transition.gotoAndPlay("opening");
tell transition movie to play its opening animation
revealing the new content
You have just completed the
tutorial. If you want to test it, upload it to a server. I
have provided the final source for you to examine.
Preloader
and Transition for Dynamic Files
