Features

Flash Camo (for short) is a graphics framework that allows AS 3 applications to be easily skinned from pngs, jpgs, or gifs. The framework is broken down into 3 core areas: Decals, the CSS Parser, and the CamoDisplay. These systems can be used individually or combined to fit your needs. When used together they form a powerful set of tools to help skin and style any Flash application. With Camo’s modular approach, you can use as little or as much of the framework as you want. The entire framework is under 40k.

Flash Camo is open source (under the MIT License), is compatible with FlashPlayer 9/10, Flex 3, and AIR. It can be built with the open source Flex SKD compiler or used in Flash CS 3/4 as a SWC.

In this introduction we are going to cover version 2.2 beta. You can check it out from Google Code here:

https://flash-camouflage.googlecode.com/svn/tags/FlashCamo_2.2.0_beta


Here are each of the major systems of the framework:

PropertySheetManager

August 6th, 2009

Camo’s custom CSS parser, the CamoPropertySheet (found inside of the camo.core.property package), goes well beyond the native StyleSheet class by supporting style inheritance, pseudo selectors, and merging styles on the fly. The goal of the CamoPropertySheet is to make styles something you can apply to any of your classes instead of just TextFields. CSS is a great way to define your class’s properties in an external file and Camo helps convert these css styles into property/value pairs you can apply to any Object.

Read the rest of this entry »

CamoDisplay

August 6th, 2009

The CamoDisplay is the final building block of the framework and a powerful alternative to the native Sprite class. Before getting into the CamoDisplay we should take some time to talk about the AbstractDisplay and the BoxModelDisplay.

Read the rest of this entry »

Decals and Decal Sheets

August 6th, 2009

The main feature of the framework is the DecalSheet system (located in the camo.core.decal package); made up of the DecalSheetManager, DecalSheet and Decal classes. The DecalSheet concept was inspired by the decals you would get with model airplanes. Each model kit would contain sheets of graphics and on each sheet you could peal off a decal and place it on the model. Camo’s version of the DecalSheet allow you to load in external images, cut out decals, and skin your application with the Decals. The following diagram will help when explaining the relationship between the three classes:

Read the rest of this entry »

The End

This covers a very in depth introduction to the Flash Camouflauge Framework. Like any framework there is a learning curve but hopefully these examples have shed a little light onto the mechanics going on behind the scenes. As always I am happy to answer any questions you may have by leaving a comment. Also, if you come across any bugs feel free to add it the the issues list on Google Code.


PHVsPjxsaT48c3Ryb25nPndvb19hZGRibG9nPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19hZHNfcm90YXRlPC9zdHJvbmc+IC0gdHJ1ZTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzE8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzL3dvb3RoZW1lcy0xMjV4MTI1LTEuZ2lmPC9saT48bGk+PHN0cm9uZz53b29fYWRfaW1hZ2VfMjwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbS9hZHMvd29vdGhlbWVzLTEyNXgxMjUtMi5naWY8L2xpPjxsaT48c3Ryb25nPndvb19hZF9pbWFnZV8zPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL2Fkcy93b290aGVtZXMtMTI1eDEyNS0zLmdpZjwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzQ8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzL3dvb3RoZW1lcy0xMjV4MTI1LTQuZ2lmPC9saT48bGk+PHN0cm9uZz53b29fYWRfdXJsXzE8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb208L2xpPjxsaT48c3Ryb25nPndvb19hZF91cmxfMjwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX3VybF8zPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fYWRfdXJsXzQ8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb208L2xpPjxsaT48c3Ryb25nPndvb19hbHRfc3R5bGVzaGVldDwvc3Ryb25nPiAtIGRhcmtibHVlLmNzczwvbGk+PGxpPjxzdHJvbmc+d29vX2F1dG9faW1nPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19ibG9nY2F0PC9zdHJvbmc+IC0gL2NhdGVnb3J5L2RldmVsb3BtZW50LWJsb2cvPC9saT48bGk+PHN0cm9uZz53b29fYmxvZ19jYXRfaWQ8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19jYXRtZW51PC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jdXN0b21fY3NzPC9zdHJvbmc+IC0gYm9keXsNCgliYWNrZ3JvdW5kOiB1cmwoL3dwLWNvbnRlbnQvd29vX3VwbG9hZHMvYmdyLmpwZykgIzIxMjYyYSByZXBlYXQteCB0b3A7DQoJY29sb3I6ICNiZmM3Y2Q7DQp9PC9saT48bGk+PHN0cm9uZz53b29fY3VzdG9tX2Zhdmljb248L3N0cm9uZz4gLSBodHRwOi8vZmxhc2hjYW1vLmZsYXNoYXJ0b2Z3YXIuY29tL3dwLWNvbnRlbnQvd29vX3VwbG9hZHMvNS1mYXZpY29uLTEuaWNvPC9saT48bGk+PHN0cm9uZz53b29fZXhfZmVhdHBhZ2VzPC9zdHJvbmc+IC0gdHJ1ZTwvbGk+PGxpPjxzdHJvbmc+d29vX2ZlYXRoZWlnaHQ8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19mZWF0cGFnZXM8L3N0cm9uZz4gLSAzNiwgNDcsIDg5PC9saT48bGk+PHN0cm9uZz53b29fZmVlZGJ1cm5lcl91cmw8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19nb29nbGVfYW5hbHl0aWNzPC9zdHJvbmc+IC0gPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPg0KdmFyIGdhSnNIb3N0ID0gKCgiaHR0cHM6IiA9PSBkb2N1bWVudC5sb2NhdGlvbi5wcm90b2NvbCkgPyAiaHR0cHM6Ly9zc2wuIiA6ICJodHRwOi8vd3d3LiIpOw0KZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoIiUzQ3NjcmlwdCBzcmM9JyIgKyBnYUpzSG9zdCArICJnb29nbGUtYW5hbHl0aWNzLmNvbS9nYS5qcycgdHlwZT0ndGV4dC9qYXZhc2NyaXB0JyUzRSUzQy9zY3JpcHQlM0UiKSk7DQo8L3NjcmlwdD4NCjxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4NCnRyeSB7DQp2YXIgcGFnZVRyYWNrZXIgPSBfZ2F0Ll9nZXRUcmFja2VyKCJVQS0yODY0MDM2LTQiKTsNCnBhZ2VUcmFja2VyLl90cmFja1BhZ2V2aWV3KCk7DQp9IGNhdGNoKGVycikge308L3NjcmlwdD48L2xpPjxsaT48c3Ryb25nPndvb19ncmF2YXRhcjwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb19pbWFnZV9oZWlnaHQ8L3N0cm9uZz4gLSAyNTA8L2xpPjxsaT48c3Ryb25nPndvb19pbWFnZV93aWR0aDwvc3Ryb25nPiAtIDM5MDwvbGk+PGxpPjxzdHJvbmc+d29vX2ludHJvPC9zdHJvbmc+IC0gPHAgYWxpZ249ImNlbnRlciI+Rmxhc2ggQ2Ftb3VmbGFnZSBpcyBhbiBvcGVuIHNvdXJjZSBmcmFtZXdvcmsgZm9yIHNraW5uaW5nIEFTIDMgQXBwbGljYXRpb25zLiBUaGlzIHNpdGUgaXMgeW91ciBiZXN0IHJlc291cmNlIGZvciBnZXR0aW5nIHVwIGFuZCBydW5uaW5nIGFzIHF1aWNrbHkgYXMgcG9zc2libGUhPC9wPjwvbGk+PGxpPjxzdHJvbmc+d29vX2xvZ288L3N0cm9uZz4gLSBodHRwOi8vZmxhc2hjYW1vLmZsYXNoYXJ0b2Z3YXIuY29tL3dwLWNvbnRlbnQvd29vX3VwbG9hZHMvNi1sb2dvLmpwZzwvbGk+PGxpPjxzdHJvbmc+d29vX21hbnVhbDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbS90aGVtZS1kb2N1bWVudGF0aW9uL292ZXItZWFzeS88L2xpPjxsaT48c3Ryb25nPndvb19tZW51cGFnZXM8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19yZXNpemU8L3N0cm9uZz4gLSB0cnVlPC9saT48bGk+PHN0cm9uZz53b29fc2hvcnRuYW1lPC9zdHJvbmc+IC0gd29vPC9saT48bGk+PHN0cm9uZz53b29fdGhlbWVuYW1lPC9zdHJvbmc+IC0gT3ZlciBFYXN5PC9saT48bGk+PHN0cm9uZz53b29fdGhlX2NvbnRlbnQ8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX3VwbG9hZHM8L3N0cm9uZz4gLSBhOjM6e2k6MDtzOjY4OiJodHRwOi8vZmxhc2hjYW1vLmZsYXNoYXJ0b2Z3YXIuY29tL3dwLWNvbnRlbnQvd29vX3VwbG9hZHMvNi1sb2dvLmpwZyI7aToxO3M6NzM6Imh0dHA6Ly9mbGFzaGNhbW8uZmxhc2hhcnRvZndhci5jb20vd3AtY29udGVudC93b29fdXBsb2Fkcy81LWZhdmljb24tMS5pY28iO2k6MjtzOjY4OiJodHRwOi8vZmxhc2hjYW1vLmZsYXNoYXJ0b2Z3YXIuY29tL3dwLWNvbnRlbnQvd29vX3VwbG9hZHMvMy1sb2dvLmpwZyI7fTwvbGk+PC91bD4=