Flash Hacks. 100 Industrial-Strength Tips & Tools

< Day Day Up >

Hack 3 Simulate Old Film Grain

Create the effect of old film grain using Photoshop and Flash.

Flash's vector graphic engine has a lot going for it, but sometimes you want something a little less clean-edged. Adding an old film grain effect is one of the easiest ways to add instant atmosphere or a grungy hard edge to an otherwise crisp and clean clip. It can be combined with video colorization [Hack #8] or sepia tone colorization [Hack #13] for more dramatic and specialized effects.

The most obvious way to add a film grain effect is to add random vector lines and dots to an image. That reproduces the effect, but it doesn't really reproduce the atmosphere of old film; we still end up with a crisp rendering. In this hack we use a bitmap, which allows us to avoid the clean effect of vectors.

The hack has two parts: creating the film grain bitmap in Photoshop and then importing and using it in Flash. (We could of course use Fireworks in place of Photoshop; the principles are the same.)

Create the Film Grain Bitmap

Dirt, scratches, and dropouts add a real-world edge to a photograph. Dust, dirt, and hair or lint that has made its way onto the film or negative appear as dark patches and lines. Scratches appear as white lines.

To begin adjusting the image in Photoshop:

Figure 1-10. The newly created layer selected in Photoshop

We now need to draw our effects. Three types of noise are seen on old film:

Hairlines

Hairlines are caused by dark strands in the film.

Dots and patches

Dark dots are caused by specks of dirt or other material on the film, and light dots are caused by scratches or dropouts in the film.

Scratches

These are caused by scratches in the film that erase part of the film image.

Using the Photoshop tools (typically the Pencil and Brush tools), add the three types of effect on Layer 1. In Figure 1-11, I have created small dots to the left, large patches in the middle, and scratches to the right. I have also created hairlines at the top and bottom.

Figure 1-11. Simulated imperfections in Photoshop

Using Photoshop's Eraser tool with a medium opacity, fade some of your pixels. On real film, deep scratches and other effects appear white, but many imperfections affect the film surface only partially, and this is what we are simulating in Figure 1-12.

Figure 1-12. Simulating shallow scratches

Although we have used only white, many effects on old film are black, so we also need to simulate those:

You should end up with something like the image shown in Figure 1-13 (the checkerboard background is Photoshop's way of representing zero alpha, or no pixels).

Figure 1-13. Simulating drop outs

Save the image as a PNG file. Do not optimize it for the Web in any way.

Many designers optimize their graphics at this point, given that they are about to be loaded into a web design package (Flash). There is really no need to do so; leaving the optimization until the point you create the SWF in Flash always gives you more flexibility.

For example, if the client decides she wants a high-bandwidth version of the site, you simply change the bitmap export settings in Flash. If you had optimized your bitmaps before importing them into Flash, you would have to go to Photoshop and reexport the images at the new setting. Then, you would have to swap all instances of the old bitmap on the Flash timeline for the new one. Obviously, then, importing full-quality bitmaps into Flash, and letting Flash optimize them, can be a real time-saver compared to the alternatives. For those who prefer working in Fireworks, its integration with Flash (i.e., its launch and edit feature) can also speed your workflow.

Using a Bitmap in Flash

Once you've exported the bitmap as a PNG file from Photoshop, you still need to use it in Flash:

Figure 1-14. Bitmap properties in the Flash Library

Note that we have created an image that has both JPEG compression and an alpha channel! You cannot have a JPEG image with an associated alpha channel as a standalone file, but Flash doesn't seem to mind, which is very useful to know when you want to overlay Flash vectors with a bitmap.

Drag the bitmap onto the Stage, then press F8 (ModifyConvert to Symbol) and convert the bitmap into a movie clip symbol named grain.

All you have to do now is overlay a quick-moving version of our movie clip onto a video, bitmap, or vector animation. In Figure 1-15, I have overlain it over a static image, making the image appear as if it is a section of video.

Figure 1-15. Simulating old video, steps 1 through 3

I have also used a mask to hide areas of the grain clip that don't appear over the image. The final effect is shown in Figure 1-16 (or take a look at grain.fla, which is downloadable from this book's web site).

Figure 1-16. Using a mask to complete the effect

Final Thoughts

Not only can this technique add interest to a section of video that isn't doing much, it can also:

• Hide imperfections in the video (such as pixelation caused by high compression rates).

• Give movement to static images, making them appear as if they are a video clip.

• Hide discontinuities. If you are mixing video and still images (such as a main video section and vector-based opening or closing titles), you can hide this by adding a grain effect over the whole production.

< Day Day Up >