Introduction
This tutorial was created with and for
Flash 5. The example available with
this tutorial makes use of both static
and dynamic bitmap effects. It
was made specifically for use with
the effects generated by Wildform
Wild FX, but also includes techniques
for masking any kind of bitmap. These
techniques can be employed for creating
an infinite number of different effects,
both with and without text. The example
below shows you four different kinds
of effects using masked bitmaps.
There are two effects that incorporate
imported Flash 3 effects from Wild FX
and two effects that do not make use
of Wild FX at all. Effect 1 is a Wild
FX effect that was applied to the Wildform
logo which also shows you how to fade
in the effect as it plays, since you
lose any transparency you may have in
your effect once you turn it into a mask.
Effect 2 utilizes an animated mask over
a static bitmap. This effect also
illustrates the use of the "attachSound" method
in Flash. You can use this technique
to add sounds to your effects. Note
that Flash loads all attached sounds
with the first frame of the movie. Keep
this in mind when you are wondering why
the first frame takes so long to load
after adding a train load of sound effects. :)
Effect 3 makes use of a Wild FX effect
that is used to mask a static bitmap.
It also illustrates how you can apply
transformations to your text after your
effect has played. Effect 4 makes use
of an animated bitmap behind a static
mask.
As I mentioned in the first paragraph,
we will be using both static and dynamic
bitmap effects. Let me explain what I
mean by that. When I say "static" bitmap
effects, I mean those that have an animated
mask, but the bitmap itself does
not move.
When I talk about "dynamic" bitmap
effects, I speak of those that may have
an animated mask, but also use an animated
bitmap. You can make your bitmaps spin,
jump, bounce, or even sway with the rhythmic
motion of the sea. Your imagination
is the only limit.
In order to get the masking to work,
you will need to import your Wild FX
effect into Flash and then separate the
effect so that each keyframe resides
in its own layer. Each keyframe will
end up masking an instance of the bitmap
that you choose for your effect.
There is a broad range of different techniques
employed throughout this example. In
addition to the bitmap effects explained
in this tutorial, the example also makes
use of the "attachSound" method,
a sometimes confusing aspect of Flash
5. This subject merits a small tutorial
in its own right, but I thought it was
worth mentioning for those of you willing
study the .FLA to see how it works.
Another element worthy of note is the
movie clip that houses the spinning globe.
You can study this clip to learn about
tweening motion along a path, looping
animations (the continents), and the
use of transparency to create the illusion
of a 3D object. It also includes a Smart
Clip that allows users to control its
movement with the arrow keys. This is
just something I added mostly for fun.
The Smart Clip can be downloaded from
the Macromedia Exchange.
Another very useful technique employed
in the example is the use of variables
to hide or show different movie clips.
The navigation buttons each check a set
of variables that will send any other
active content clip to the frame that
begins the closing animation for each
clip. It also activates the "intro
clip" that has the text telling
people to choose an effect from the choices
on the right and the spinning globe,
which is really just a glorified set
of arrows. Using variables in this fashion
can be extremely useful for creating
navigation systems or entire sites based
on "content clips".
When you are choosing the font to use
in conjunction with your masking effect,
make sure that you pick one that is sufficiently
wide enough to show the bitmap behind
it. You can use a thinner font if you
want, but you are going to get a different
result.
Rather than becoming a window for viewing
your bitmap, thinner fonts would be more
appropriate for an effect where it wasn't
important that you could make out what
is behind it, maybe you just want some
movement. Sort of like the effect
that I applied to the intro text. It
is very difficult to tell that this is
the same bitmap that I use in Effect
2. In Effect 3, you'll notice that
not only did I pick a nice wide font,
but I also set the character spacing
so that the letters were very close together.
This allows for a good clear picture
of the bitmap behind the text.
Another consideration is composition.
You need to make sure the shapes that
are represented by the text characters
(and thus your viewing window) need to
line up with the content you wish to
show. The top part of the screenshot
below gives you an example of good font
usage. Not only does the size of the
font give you an adequate picture of
what is behind it, the word also reflects
the content.
The bottom part of the screenshot illustrates
poor font choice. You either have to
be psychic or have a really good eye
for detail to discern what lies behind
the text. The exact same effects were
applied to each.....only the font is
different, yet the one on top conveys
the message in a far more successful
manner.
There are some things to consider when
choosing your Wild FX effect as well.
It is best to choose an effect that is
not too complex or lengthy. Any
transparency the effect contains will
be lost and it will just be more work
for you during the masking process, as
each keyframe must be separated into
its own layer. The longer your effect,
the more keyframes you will have to adjust
when you separate them out for masking.
You also might want to choose an effect
that is contained within a fairly small
space. You don't want the characters
in your effect to fly outside of your
bitmap area.
The screenshot above shows the settings
I used when creating the Wild FX effect
for Effect 3 in the example. Keep in
mind that it doesn't matter what color
you choose for the background of your
effect. This will not be in evidence
once you import your effect into Flash.
Also make sure that you choose one of
the Flash 3 effects. These are the non-highlighted
ones in the effects list.
When you import your effect into Flash,
you are probably going to want to import
it into its own movie clip. There are
several advantages to doing this. Once
you give it an instance name, you can
target your effect. This allows you to
start or stop it, even go to a specific
frame and start playing if a certain
condition is true.
This is what makes it possible for the
active effect in the example to fade
out while the next one fades in. If you
hit the "close effect" button,
it will fade out the currently displayed
effect and bring back in the intro clip
by targeting its instance name. Study
the movie clip that contains the navigation
buttons to see how this is done.
When you first import (File>Import
or Ctrl+R) your effect into Flash,
you will be presented with a series
of keyframes much like those in the
screenshot above. This would be a good
time to study the example .FLA to see
how the effect clips are put together.
If you plan on integrating your effect
with other elements, this would also
be the time to plan it out. In the
example, I have the close and replay
buttons and the background inset fading
in before the effect plays. These need
time to play before your effect starts,
so you will need to move the keyframes
that contain your effect farther down
the timeline. How far will be determined
by what other things you need to have
happen before beginning the text animation.
Take a look below to see what it looks
like after we have modified it a little
bit.
At this point, you might want to add
some layers for your actions, labels
and variables. I like to separate out
these elements so that everything is
clear at a glance. I find it helpful
to be able to see my labels on the
timeline as opposed to stacking them
up in the same layer as the actions,
where they will be obscured if you
have two keyframes right next to each
other.
The variables being set are to let
Flash know which clip is active at any
given time. I kept it pretty simple,
so the name of this variable is "appeal" and
its value is set to "on" at
the second frame. There is a "stop" action
on the first frame of each of the clips
so that they will load, but not play
or be visible until they are specifically
targeted and told to start playing. Once
the clip begins to play, the corresponding
variable is set to "on".
It is not evident in this screenshot
because we have not yet set up the closing
animation (you can see it in the screenshot
below), but the frame that sets the variable
to "off" is set at the very
end of the closing animation of each
clip. The closing animation is activated
by pushing the "close effect" button
or by pushing one of the buttons for
one of the other effects. These buttons
check the variables to see which clip
is "on" and targets a label
in that clip that begins the process
of fading out the graphic elements. The
time it takes for each clip to fade out
is accounted for by adding an equivalent
number of blank frames to the beginning
of each clip. This allows for a smooth
transition between clips.
TIP: I always import Flash 3 Wild
FX effects into their own movie clip.
I also add a layer and name it "Placement
Guide". I then copy the last frame
of the Wild FX effect that contains all
of the symbols in their final orientation
and paste them into this layer. This
will aid you in placing your effect on
the main timeline. Once you are satisfied
with its placement, you can re-enter
the symbol and turn this layer into a
guide layer so it won't get published
with the final movie. If you ever need
to adjust its placement, you can just
go into the symbol and turn it back into
a normal layer.
Alright, let's move on to the real
meat of this tutorial.....the masking
process. Click on the layer directly
beneath the layer containing the imported
Wild FX effect and then hit the add layer
button to add as many layers as there
are keyframes in the effect. Next, you
will want to drag each keyframe down
to its corresponding layer. It will look
something like the screenshot below.
Now you will want to import your bitmap.
Place it in a layer directly beneath
the first frame of the imported Wild
FX effect. Right-click the appropriate
frame in the timeline and choose "Insert
Keyframe". Then drag your imported
bitmap onto the stage and convert it
into a graphic symbol by going to Insert>Convert
to Symbol or hit F8 on the keyboard.
Adjust the placement of the bitmap so
that each letter of the effect will reveal
part of the bitmap. Drag the playhead
down the timeline to make sure the entire
effect fits within the bitmaps boundaries.
Once you are satisfied with the placement
of the bitmap, right-click on this frame
and choose "Copy Frames". You
will be pasting this symbol into a layer
and frame directly below each keyframe
of the imported effect. You will also
need to remove all trailing frames after
the one containing the bitmap symbol.
Each layer of the masked effect will
contain only one active keyframe.
Next, you will need to break apart all
of the symbols in each layer of the imported
Wild FX effect. Select the layer and
hit Ctrl+B. You will also need to turn
each of the layers containing the imported
Wild FX keyframes into a mask layer.
You can do this by right-clicking the
layer and choosing "Mask".
While you are adding layers and pasting
your bitmap symbol, you might want to
apply the rest of the steps to each layer
as you go. Here is a little "operational
outline", if you will, that outlines
the steps involved.
1. Right-click the layer directly below
the layer containing the Wild FX symbols
that will be your mask for that frame
and choose "Insert Layer".
2. Right-click the frame in the layer
you just created directly beneath the
corresponding keyframe for the Wild FX
symbols and choose "Paste Frames".
3. Using Flash 5 selections style, drag
the last frame in that layer to remove
all trailing frames after the frame that
you just pasted.
4. Click the layer above that contains
the Wild FX symbols and hit Ctrl+B to
break apart all of the symbols.
5. Right-click layer and choose "Show
Masking".
6. Repeat for each layer.
Your movie should look like the screenshot
above, with each keyframe of the imported
Wild FX effect masking a separate instance
of the bitmap symbol. On the last frame
of the effect is where you want to place
your second "stop" action.
In order to create your closing animation,
copy the frame that you pasted as your "Placement
Guide" layer. This contains all
of the symbols used in your animation
in their final orientation. Paste this
into a frame just after the last frame
of your effect and convert all of the
symbols into one single graphic symbol.
Go a few frames down the timeline and
insert another keyframe. Set the alpha
in this keyframe to zero using the Effect
Docker Panel. If this is not visible,
go to Window>Panels>Effect. Go
back to the first keyframe and using
the Frame Docker Panel, set the tween
to "motion". This will fade
out your effect. Set up a similar tween
to fade out the rest of your graphic
elements as well.
Although it is not strictly necessary,
the last frame contains an action that
tells the playhead to go to frame 1 and
stop. It is not vital, because in Flash
5 movie clips loop by default and it
would just go to the first frame and
find the "stop" action there,
but I like to make sure.
So there you have it, by following this
tutorial and going over the construction
of the .FLA, you will be able to create
an endless number of spectacular bitmap
effects using Flash and Wild FX. Have
fun!
Wildform
provides a 100% satisfaction guarantee on all our Flash software.
If you are not completely satisfied with our Flash multimedia software
for any reason you may request a refund within 15 days
of purchase.
