Reid Beels

I’ve been using sIFR for a while to get pretty typography for my headers on this site. As part of my latest design refresh, I upgraded to the beta of sIFR 3 and discovered something cool in the process. It’s possible to embed an image within the flash movie used by sIFR and use the dynamic text to mask the image, creating some nifty effects. The gradienty text in the header (which displays my current Twitter status) is done using this technique and I’m exploring how it can be used for other fun things. The drawbacks to this is that you have to create a separate flash file for every image you want to mask and that file is also separate from any other sIFR stuff that you happen to be doing. The same effect could be acheived by using server-side tech to generate images (which would be a bit smaller than the flash file), but the ease-of-use and ability to modify the text at runtime makes sIFR masking interesting. If you’re curious as to how to pull it off (even if you’ve never touched flash before), read on.

1. Set up your font properties as per the sIFR instructions.
2. Return to Scene 1 by clicking the icon in the upper left of the window.
3. Create a new layer.
4. Drag your new layer to the bottom of the layer stack.
5. With the new layer selected, paste the image you want to mask. Since the flash movie is enlarged by sIFR, the image you paste should bleed off the right side enough to accomodate whatever text you want to render.
6. Right click (or control-click) on the ‘font’ layer and choose ‘Mask’ from the contextual menu.
7. That’s it! Just export your movie and use it like any other sIFR movie.