One of the most basic and fundamental things to draw with code is a line - in terms of importance it is right up there with the pixel.

Line drawing in Flash is, on the whole, pretty darned fantastic. You get curves, lines, varying stroke widths and colours etc. all nicely anti-aliased with just a few commands thrown at the API. However, when it comes to pure quality and flexibility it has quite a few short comings, which is especially a problem when it comes to drawing interesting, varied, magical lines.

Here’s a few (to get the ball rolling) limitations with line drawing in the Flash drawing API.

1. Fractional stroke widths aren’t supported

Want a stroke width 0.234 points / pixels wide? Bad luck champ!

2. Anti-aliasing could be better

I have no references (anyone?) to the type of anti-aliasing that Flash does, perhaps as a guess it looks like some kind of an A-Buffer or just a basic super sampling algorithm, but whatever it is it could be a whole lot smoother.

3. Dotted lines aren’t supported in code

Easy to hack for straight lines but quite a bit harder for curved lines

4. Gradients on lines don’t follow curves

5. You can’t change stroke widths, colours, alpha etc. values smoothly along the length of a line

6. Brush strokes, texturing, sampling etc. aren’t supported

7. Line “edges” are always perfect and parallel

Thankfully all of this can be worked around with code (ahh, beautiful, powerful code) which I am going to go through in series to build up some really powerful line drawing code that a lot of nice effects can be achieved with.

If there are any things that you want covered or have seen done (journal article references are also good!) please let me know so that I can have a go at incorporating into this series.

Ahh Flash, my old nemesis!

Anyone who has built Flash websites and cares about the details of pixel perfection will have had to jump through hoops just to get something to look just so. On a recent project the hoop was getting a monospaced typeface to look sharp and legible, line up like a monospaced typeface should and do this on dark and light backgrounds with animation.

The first problem, sharp and legible, can nowadays (Flash 8+) be done by just selecting “Antialias for readability” on the antialising combobox. Mmm, nice a crisp now. However, that introduces a number of problems:

1) Bold and regular weights can look very similar

2) Strokes in the typeface are snapped to as many whole pixels as possible which may introduce weird kerning and will throw out the fixed spacing of a monotype typeface. This means that if you have multiple lines all the characters will go slightly out of alignment the longer the lines.

3) The dynamic range of the typeface color is severely reduced. You won’t be able to tell the difference between type with a color value of #fff and #ddd - it will be white either way

4) The weight of the font will look different on different backgrounds i.e. if you start on one background and change / animate it to another (ARGH!)

So what to do?

Well 1) can be tweaked around in the custom anti-aliasing settings. 3) is not so bad, and in this project the type is only grey, white and black - we didn’t need the full dynamic range so we got lucky there. 4) can be handled, by initially (before anyone sees it) setting the text color to a mid gray, say #888, and then by using script to change it to white and black when needed. It seems the Flash text rendering engine compromises on the anti-aliasing and it looks ok. Also we opted to minimise any fading and instead to go for a “typewriter” style animation effect.

2) Is the real problem. The only “solution” is to create textfields for each single character (including spaces) and positioning them on exact points. The main drawback is that doing this almost completely wipes out the possibility of HTML textfields (which we needed as the site was content managed) unless you want to right your own HTML textfield implementation (cost / benefit time!). In our case we left it unaligned - the soft “Antialias for animation” just wasn’t good enough and we didn’t think many people would notice it wasn’t aligned (except for the odd designer) - we may still go back to the soft type yet or we may still have a go at implementing the “textfield per character” solution (we only tested it so far).

Large format printing from Flash has always been difficult. By “Large Format” I mean LARGE - for instance, 5 metres wide by 3 metres tall at 72dpi or in computer pixel terms approx. 14,000 pixels wide by 8,400 pixels tall.

Over the years there has been a number of work arounds / solutions. The following is a run down:

1. Print via a vector file.

This can be accompilshed using a postscript printer driver (back in ye olde days) or by just using Acrobat via print in the context  menu (PC only I believe?). Joshua Davis was one off the first to output images via this method. On the bright side this gives you vector output that you can scale up to whatever size you like. On the downside you don’t get gradients, transparency or effects and since it is vector it can be unwieldy or un-preocessable when you have a few hundred thousand or million vectors (!).

2. Print the screen to tiles

This is horrid but it works. Basically hit “zoom in” via the Flash context menu on a published SWF then take screenshots to create tiles. Stitch together in your favourite image editor. Ouch.

3. Output to bitmap tiles directly

The idea with this is to scale up the containing MovieClip and draw it across a grid of images that cover the output image that is the size that you want. As you are rendering to bitmap you can do all sorts of nice things like gradients, multipasses, transparency etc. The main problem with this is that you get a lot of tiled bitmaps to deal with. The easiest way to deal with the tiled images is to use something like Image Magick and automatically create a script file that stitches it all together - one click to stitch. If you want you can also delete the intermediate images via a script. If Air let you call an external program you could save yourself a click (alternatively you could just bundle up a Flash app in something like Zinc and that let’s you call an external program). The size of the tiles can either be a maximum of 2,880 x 2,880 if you are going out from Flash or a maximum of 8,192 x 8,192 if you are using ImageSnapshot in Flex.

4. Output to bitmap tiles using a single virtual canvas

This is the same as 3, however you do it via a nice class inbetween to treat the tiles as one big fat canvas, or rather one BigAssCanvas. To get this to work you will need to allocate memory for all the tiles before you do anything with them. This can be a limiting factor and if the output image is too large it won’t work.

5. Output to a single bitmap via external image hackery

This is mentioned in the comments for BigAssCanvas and is apparently what Erik Natzke is (was?) doing. The trick involves loading in an image of the dimensions that you wish the output to be, and then you write to the BitmapData of that image before saving. This has the same issue as 4 in that you will be limited by the amount of RAM that you have. Another issue is that you have to create a target image file before you start so it won’t work if you need to dynamically set the dimensions of the output file. Also check out BitmapDataUnlimited for another implementation that works along these lines.

One question is what about bitmap effects? Well I need to test this further! In my initial test I got drop shadows and glow working quite well when I used small tile sizes. I expected there to be artificats when an object got clipped but it seems the Flash renderer is smart enough to work out the bounding box for the effect and clip that (there is a built-in function which does just that!). I guess that there is probably a maximum size for the effect bounding box before the effect will refuse to render but I need to confirm this. I did note that lots of effects on top of each other in the same MovieClip slows rendering down a lot and sometimes kills Flash. You can get around this by layering effects in separate MovieClips or you can just compute the effects yourself!

Personally, if the image isn’t truly massive (i.e. it fits in RAM), I go with option 4 and if it is truly massive then I head for option 3. To get option 3 to work without allocating a lot of memory you need to make sure that you can render your artwork multiple times. i.e. that it is repeatable. Another thing to notice is that you then have to render the artwork as many times as there are tiles. So if it takes a few minutes or more to render the artwork you could potentially be waiting hours or days.

If you are doing something a bit smaller but still greater than 2880 x 2880 you could try something like SWFShot.

This site is built on Wordpress (version 2.7 at the time of writing) and the following is a dump of the problems I came across when putting together this site. If you have similar problems and need more detailed solutions drop me a line.

Here we go:

1. The wp-typogrify setting that adds extra   s breaks nextgen gallery when you have more than one gallery on a page

Solution: It’s not a big deal so I disabled the wp-typogrify setting. Otherwise it would be hackery into the wp-typogrify module.

2. Getting pixel pattern transparent gifs to line up!

Solution: Gah! Had to create slightly different images that are offset by a pixel, and, well it doesn’t always work the same across all browsers. Good grief to think that I was thinking of a more crazy theme with more complex patterns instead of the chosen differing “transparencies”. Come to think of it I may end up trying to implement that… also I had to use tables for certain parts of the design - yeah, yeah, if table-cell was better supported I would be doing it that way.

3. The pager doesn’t work properly if you shift the main blog posts to something else like /blog/

Solution: It’s a bug! Patch can be found here. Hopefully this will fixed in Wordpress 2.8.

4. WP Super Cache didn’t work out of the box

Solution: Had to step through the FAQ suggestions. I would say it was to do with permissions on the wp-content directory at time of installing the plugin.

5. Hacked modules stopped working when upgraded.

Solution: Well duh - how embarrassing! Don’t hack the modules themselves. Just work around it in the theme. Move along - nothing to see here!

6. Getting background images that work

Solution: I originally thought that most backgrounds would work with the faux transparency, however, backgrounds that are very bright, very dark or have dithering of their own look rubbish. So I just had to put an hour into selecting background images instead of 5 minutes.

7. Need at least 5 posts to make front page look ok.

Solution: Get busy, don’t tell anyone about website until more than 5 posts!

8. Getting the latest image thumbs to perfectly align left and right in three columns

Solution: Wrap the output from nextgen in a table. Again, if only table-cell was better supported. *sigh*

9. No spacing in Twittter Tools output

Solution: Well you can either hack or regex. In this case a hack was more suitable.

9. Tags and long headings went over the edge of the design

Solutions: Oops. Thankfully that heading really was too long and the tags mostly useless. Style : 1, F orm : 0

So I finally have my personal site up.

It’s funny - one initially has so many thoughts about a”first post” but in the end who really cares? It’s probably better to jump into some meaty articles with some proper value eh?

Well I’ll just leave this “first post” here as a kind of a book cover with scribblings on the inside which are partly humorous but inconsequential. Perhaps there are a couple of pen testing scribbles, perhaps a game of tic-tac-toe (another draw).

Onward and upward.