pantsnetwork.com
Saving the world from cavities.

Codename "Amber"

Please select a gallery page. This page also includes production notes.

Page 01The planning stages.
Page 02The face gets off to a start...
Page 03Nearing completion of the facial work (for now...).
Page 04Detail views of the face so far.
Page 05Experiments & tech-tests with Flash, plus work begins on her hair...
Page 06Development screenshots (or product placement, you decide...).

Gallery Notes

Project information


 » Timeframe: April 2004 - June 2004
 » Status: Still in production, I'm just taking a bit of a break...
 » Software used: Flash MX 2004

Production notes


Page 01:
While an idea may mull around in my head for a few weeks (or months in this case), most of my creative projects officially start off with one or more extremely rough sketches. The sketches are usually done in the crappy Windows Paintbrush, then formalised in Flash later on... The idea for this project began for me near the start of 2004, although it took until April to find the inspiration to take the concept out of my head and into a form which everyone else could appreciate...

Because I had almost four months to think about the challenges of the content (details & features, composition/blocking, etc.) and how I would approach the technical hurdles of creating this piece, I didn't really have a need to Paintbrush a general plan; my work started straight away in Flash.

Basic facial shapes are blocked into Flash and refined until they look as I imagine them. For this project I knew the outlines would probably be used as reference guides throughout the production so I took my time getting everything right, especially the facial proportions & the shape of the eyes and the nose. The four months of 'in-my-head' planning ironically was so focused on her head, there wasn't anywhere near as much thought put into the body or clothing to be used.

Page 02:
The first image here is a very basic description of what I go through to get the shading to look like it does. The actual act of planning where those initial shader lines go is the biggest headache. You kind of need to work backwards from what the end product should look like, thinking about where the highlights and shadows are, the general textures of the face, features you want to isolate (or ignore), etc...

An incredible amount of adjustment is needed to get things looking right, especially as the shader plates start being combined together. Say if a gradient between the cheek and the curve of the nose doesn't quite look right, it means I have to go back and edit several different layers of outlines, recreate and reposition the shader plates and so on. If the changes didn't work, the process begins again. A lot of this is just pure luck and a lot of patience. There's often a big time gap between creating the shader outlines and seeing how the gradients actually turn out (and to see if they're successful or not).

Page 03:
More images of the facial gradient progression, eventually getting up to eleven separate shading plates and around 25 outlines for different shading levels. At this stage of development, I can feel I'm starting to push Flash to its limits; things are starting to get chuggy and I can understand why.

My working canvas is 2000x2000 pixels; every canvas plate has two or more fairly complex vector shapes, each with different levels of transparency, which is normally not a problem for Flash. When you stack eleven of these shader plates on top of one another, Flash needs to draw 25 or more of these detailed shapes all at the same time and on such a large canvas. Complicated stuff.

Page 04:
Close ups of parts of the face. I think this page really gives an idea of how much work has been put into this so far... At the higher zoom levels the shading lines become more obvious but you can see how the lines near the ears and the eyes are constructed. Each blue or green line might have taken 4-5 hours to initially draw, then lines were constantly refined over and over (and over) again as the gradients started to take shape.

I started experimenting with the inner shader lines (near the middle of the cheeks) with using some random spikes or 'horns' for some plates. The idea was that these minor random bits would add a bit of noise (or roughness) to the skin to make it look less smooth and a bit more realistic. I didn't really continue with this as the lines grew outwards, but it's something I might start again when I go back to the smoother areas of the face (wherever the shader lines are fairly spaced apart) to add more bands of shading.

Page 05:
There gets a stage where I get tired of doing the same thing over and over again, so once I was reasonably happy with the facial shading I started work on some other stuff. I experimented with Flash's basic layer masking to see what the face would look like without the background (although I had always intended the BG to stay dark in the end product). You can see that the bottom outer edges of the ears don't look exactly right (the shaded edges/shadows don't quite match the outline mask), but I'm pretty happy with how close it got in the end...

I also tried changing each black/white/grey shader plate to a different skin-tone colour (second image), to see how they would all combine together. It was a horrible disaster, but it was purely a technology test out of curiosity; my original plan for the project was to keep it all monochrome.

And with that little break, I return to the shader plates as I begin the work on her hair. As previous projects have taught me, I'm trying to keep the hair relatively simple with Amber: flat hair, simple shapes and easy highlights. It's mainly random shapes at the moment, but it is organised chaos because I know roughly where the shader plates need to add detail.

Page 06:
This is how I've set up the interface in Flash for this project. Flash's animation timeline (which usually runs horizontally across the top of the window) is repositioned to the right and is being used very much like the layers system works in any traditional image editor like Photoshop or Fireworks. When I took this screenshot there were about 94 active layers in the timeline tree.

The other tree list (in the lower-right corner of the screenshot) is the Flash asset/symbol library. Each shader plate is converted to a symbol so I can easily recreate instances of it or adjust the colour and alpha/transparency settings on the fly. I'm running a multi-monitor setup so often my secondary monitor will be running a second copy of Flash, usually displaying my detailed outline sketches or other useful reference stuff.