Dynamic Color Swatches In Flash

Think Toon Boom Studio and The Tab’s ability to globally update colors dynamically is nice?

What if I told you Flash also has this ability? The truth is Flash was the first vector software to implement such a feature… trouble is, not even Macromedia (or Adobe) thought of using it for this purpose.

In this tutorial I will teach you a technique for creating and working with dynamic swatches in Flash.

Requirements:

Adobe Flash and any third-party bitmap editor of your choice such as MS Paint, Gimp, Photoshop or Fireworks.

1. Begin by creating a document with a series of images. The purpose of this is so that you can have various separate shapes that you will be testing this technique on. A single drawing won’t help you much as will need to see this effect happen across mutiple drawings at once in order to better appreciate the technique. In this example I’m using 3 drawings from various projects.

Note: The little red arrows which point to areas of the drawing that I have blanked out in order to paint them using this technique.

2. On a third party bitmap editor, create a tiny document 10 pixels wide by 10 pixels tall and fill it with a solid color such as red RED. Save this swatch as jacket.png and place it on a folder on your hard drive where you won’t have trouble locating it. In fact I recommend saving this swatch file in the same folder where you save you .Fla file, because this swatch is the key to the dynamic color technique.

Note: I’ve be used fireworks for this example, but, you can use what ever is at hand. Ms Paint and any freeware bitmap editor such as The Gimp will work just fine.

3. Import the created bitmap swatch into Flash by way of the File Import menu.

4. All bitmaps are by default brought into the library, so if you imported the symbol onto the stage rather than directly to the library, fell free to delete the bitmap from the stage. Now, as with most of my articles, I will let you in on something you will provably never see in the official manual. The Color Mixer Panel has the ability to create paints that are a solid color, Linear Gradient, Radial Gradients, and Bitmap Based. The bitmap based fill is perhaps one of the most powerful paint features yet highly underrated due to its “recommended usage” which is to use textures as paints. And even then, they don’t teach you the proper way to paint textures in Flash which I will in a future tutorial. For now let try something new, lets use the Bitmap Paint feature to paint using a solid bitmap swatch.

Because the swatch is a solid color, the paint fill it generates is a uniform color which is indistiguishable from the vector based counter part. As you can see in the image below, the black areas of my drawing have now been filled in using this new color. A color which, because it a bitmap, it may have it’s own unique identifier such as “jacket” or “shirt” or “skin” maybe.

Step 5: Now this is where it all comes together. Let’s say that I have already painted a million different graphics using a swatch called jacket.png which at the moment is the color red and now I have decided that the shapes I have painted using this particular swatch, should be blue and not red after all.

The general approach would be of course to simply go through your entire movie re-coloring every single shape or element into he new color, manually. However,because we planned ahead for this particular scenario, what were going to do here is simply go to our projects library and locate our bitmap swatch.

Right click and if you have fireworks installed you may choose the “Edit with Fireworks…” option, or else you may may chose the “edit with…” option and select the bitmap editor of your choice.

Step 6: The bitmap editor will launch with your image file ready for editing. Change the color from red to blue (or any other color).

Once you have modified your file, Save it but don’t close it yet! If you are using Fireworks the save function is replaced with “Update”. (See below)

Now click over to the Flash program window to bring it into focus and behold!

Every instance in your movie, no matter what layer, scene, symbol where the jacket.png color swatch was used has now changed to blue!

Want to see it again? Just click over to your graphics editor again and modify the color to something else. Save it, and click over to the flash window again and voila! Pretty nifty eh!

Note: At original press time, the current version of Flash was “Macromedia Flash MX”. The product version change and the acquisition of Macromedia by Adobe has not placed any bearing on the effectiveness of this technique. This technique is still quite relevant and its a shame that so many version of the product later this procedure has yet to be added to Flash as a native function.