Ted Patrick > { Events & Community } > Adobe Systems

Creating, sharing, reusing, pixel icons in Flash is difficult. As a pixel icon fanatic, I hope to change that!\0

Since the early days of Mac, icons have defined software. Although things have changed, icons remain critically important within all major software products. Icons and cursors provide visual feedback to the end user and can dramatically improve or erode both usability and perceived quality.

On a recent project, I wrote an ASCII file format and engine for using pixel icons in Flash. The icon file format is rendered through an engine (function) allowing you to draw icons and cursors on any MovieClip within the Flash Player.

Here is an example:

_level0.test0.drawIcon('0x000000,A20')
//draws a 20 pixel line in black.
//icon = 56 Bytes, Engine=606 Bytes


_level0.test1.drawIcon('0x0000FF,A20<A20<A20<A20<A20<A20<A20<A20<A20<A20<A20<A20<A20<A20<A20<A20<A20<A20<A20<A20')
//draws a blue box.
//icon = 67 Bytes, Engine=606 Bytes


_level0.test2.drawIcon('0x000000|40,A20<09|A<09|A<09|A<09|A<09|A<09|A<09|A<09|A<09|A<09|A<09|A<09|A<09|A<09|A<09|A<09|A')
//draws a T in black with 40% alpha.
//icon = 71 Bytes, Engine=606 Bytes


_level0.test3.drawIcon('0xFF0000,06|A<05|A3<04|A5<03|A7<02|A9<01|A11<A13<01|A11<02|A9<03|A7<04|A5<05|A3<06|A')
//draws a diamond red with 40% alpha.
//icon = 112 Bytes, Engine=606 Bytes


_level0.test4.drawIcon('0x000000,0xFFFF66,0x808000,07|A4<06|A|04|A|0|A<012|A2<0|A3|07|A3<A|B3|A6<A|B8|A<A|B8|A<A|B4|A9<A|B3|A|C8|A<A|B2|A|C8|A<A|B|A|C8|A<A2|C8|A<A10')
//draws a 3 color open icon
//icon = 135 Bytes, Engine=606 Bytes


*Although these samples are simple, the format is very deep and supports most any icon you can think of.

As the file format is ASCII text, Icons are easy to change and easy to share cross projects. The format is especially easy to use within V1 and V2 components. If stored as a variable within a project, the icons can be updated later in development or imported dynamically from a file or database.

The Icon File format and engine supports the following features:

1. Full RGB color palette supporting alpha transparency
2. Compression using block writing and line wrapping
3. CLUT processing (Color Look-Up Table) allowing for color changes without editing the pixel map
4. Optimized drawing instructions reduce number of steps to render an icon
5. Dimensionless format with no width or height specified. Rendered icons can be manipulated like MovieClips using _x, _y, _xscale, _yscale, _rotation, etc..
5. Supported in Flash Player 6 or higher
6. Engine == 606 Bytes total added file size

The Icon file format and engine are released under an Open Source BSD License. The license allows the software to be included in commercial products without restriction.

Below are some samples for review. I would really appreciate your feedback on the format. Feel free to use the engine and the included icons in your own projects.

Icon Home
Icon Engine and Examples (ZIP)
Icon Engine ActionScript



Icon Professional 2004 is a commercial Pixel Icon editor that will ship in February. The application is a commercial Central application with a 30 day trial. The software lets you create icons and share them online. Below is a link to an alpha preview of the editor that will install within Central. This version of the editor lacks Save, Open, Share functionality and is intended for review only, as such it is licensed as free Central application. This will let you review the drawing tools and better understand what is possible with the format and editor in combination. The editor itself uses the icon engine for rendering all icons, cursors, and tool selections.

I would truly appreciate any feedback you could provide on the editor, the icon format, and icon engine. I hope you enjoy using the tools as much as I enjoyed making them.

Cheers,

Ted ;)