Animated Flash stickers

In the real world, people put stickers on things to send out messages and to grab the attention of passers-by, so why not try doing something similar using 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 your page.

Click here to download the support files

Click here to download the tutorial for free