ON THE CD
You’ll find all the files FLASH • DREAMWEAVER
you need to complete
this tutorial in the folder
marked Tutorial\Sticker
on this issue’s CD.
TIME NEEDED
15 minutes
INFO
Computer
Arts regular
Rex Crowle
works as an
animation
director and illustrator
and specialises in
creating eye-catching
work for broadcast and
interaction. He currently
works with clients that
include Disney, MTV and
Sony. Find out more at
www.rexbox.co.uk.
56 | May 2007
ART135.tut_2 56
ANIMATED FLASH STICKERS
In the real world, people put stickers on things to send out messages and to grab the attention of passersby,
so why not try doing something similar using Flash animation? Rex Crowle shows you how
In this short tutorial you’ll be
creating an animation that features
a vector graphic (which can be replaced
with one of your own choice) that’s
peeled off the screen just like a vinyl
sticker. It’s a simple effect, but it’s also
very adaptable to different content and
can surprise your visitors. This sticker
effect can give static vector images a
life of their own, embellishing whatever
they’re stuck on to, or act as a call to
action, like the email link created here.
This tutorial also demonstrates how
masks can be used creatively to change
the nature of what they are masking. By
using two simple rectangular masks, you
can create a believable peeling animation.
One mask reveals the front of the sticker
while the other simultaneously hides the
reverse side and, as you swap from one to
another, the sticker magically gets peeled
on to your computer screen.
In order to be truly effective, you’ll
want to be able to trigger this animation
in front of any web content, to give it a
surprising and ad hoc feel. For this reason,
the final stages of the tutorial look at
how to export the Flash animation with
transparency so that it can be overlaid
over the non-Flash content on the rest of 1 Start by opening the sticker_peel.fla file
on this issue’s CD. You’ll see the sticker
appear in the top left-hand side of the
your page.
stage. Double-click directly on the sticker.
This will enable you to edit the sticker
Illustration and tutorial by Rex Crowle movieclip. Your screen should now look
www.rexbox.co.uk roughly like the screenshot above.
16/3/07 15:22:14

2 Start with the front of the sticker and the
way it’s revealed using a mask (shown
as a red rectangle in the left-hand corner of
the movieclip). Click on the last frame in its
layer on the timeline and then press F6 to
create a new keyframe.
3 With the frame still selected, use the
cursor keys to move the masking
rectangle down and right until it just covers
the sticker. You should now have two separate
keyframes – one for where the mask starts
and one for where it stops.
4 Click on the first frame of the mask layer
and then locate the Tween drop-down
menu from the Properties panel at the
bottom of the screen and change it to Motion.
Now hit Enter on the keyboard and the red
rectangle should slide diagonally as the
timeline is played.
ART135.tut_2 57
TUTORIAL |
NON-STICK
STICKERS
If your sticker will be
placed over content
that the user may want
to see without the
overlaid effect, give
them an option to hide
the Flash file. This
could be done by
simply making one
extra Close button
8 Unhide the button layer and click on the
last frame in the timeline. A blue circle
will appear. This is the hidden interaction
5 Now you need to change the mask layer
into a true mask. Right-click on the name
inside the movieclip,
which sends the
movieclip timeline to
button. Highlight the button and open the
Actions tab in Flash, which will show the
code driven by the button. Change the
of the front_mask layer and choose Mask a blank frame placed destination to your own email address.
from the drop-down box that appears. after the frame that the
Everything will now disappear, but don’t animation currently
panic, it’s just being masked. Hit Enter and pauses on.
you’ll see the sticker being revealed.
9 You’re ready to publish the file. Choose
File>PublishSettings from the main
menu to bring up the dialog. Under the HTML
tab, choose Transparent Windowless from
6 Unhide the reverse_side layer of the sticker by clicking on the red cross on
the timeline next to the layer name. Select the newly revealed sticker, then,
the Window Mode drop-down menu and hit
Publish to generate the Flash file and HTML.
in the Properties panel, change the Colour menu to Tint, choose White, and set
it to 90 per cent – simulating the sticker’s reverse.
10 By opening the generated HTML in
Dreamweaver or any HTML editor,
you can Cut and Paste the Flash code into a
7 Repeat the tinting process on each keyframe for the sticker, so that the
reverse stays white throughout. You can activate the masking for the
reverse side now, so repeat step 5, but this time on the reverse_mask layer.
layer that can be placed anywhere in front of
the rest of your HTML. Check out the example
file sticker_complete.html on the disc to see
Once done, hit Return and you should see the peeling animation. the final effect in action.
May 2007 | 57
16/3/07 15:22:20