Choose the Right Tool for the Job

Nokia Smartphones Finally Good Looking? (N95) »

Sep 29

Choose the Right Tool for the Job

I just came across this Doodle Javascript app on MXNA. Mistakenly I said to colleagues, anyone could do that in under a minute in Flash. This was met with the obvious, OK go on then. Instead of getting a really bad looking jagged-lined, clunky drawing tool using 5 Javascript libraries (that don't even work in Safari I am told), you could just plug in 27 very basic lines of code into Flash...

createEmptyMovieClip("bufferMC", 1);
var mousedown = false;
var origX = 0;
var origY = 0;
function onMouseDown() {
    origX = _xmouse;
    origY = _ymouse;
    moveTo(_xmouse, _ymouse);
    lineStyle(1, 0, 100);
    bufferMC.clear();
    mousedown = true;
}
function onMouseUp() {
    lineTo(_xmouse, _ymouse);
    bufferMC.clear();
    mousedown = false;
}
function onMouseMove() {
    if (mousedown) {
        bufferMC.clear();
        bufferMC.lineStyle(1, random(0xFFFFFF), 100);
        bufferMC.moveTo(origX, origY);
        bufferMC.lineTo(_xmouse, _ymouse);
        updateAfterEvent();
    }
}
Mouse.addListener(this);

Now I am very much keen to advise using HTML and Javascript when it is the obvious choice. But what gets me is when people go out of their way to make technologies do things that others clearly do a lot more naturally. Hence this blog is HTML, so I always think to myself, choose the right technology for the job and don't create work for yourself!

As a bonus the fact that Flash is made for this sort of thing brings with it some nice extras, you might notice that with 2 seconds of extra effort here we have the line colour changing as you move until you release, or why not comment out the 3 lines that say bufferMC.clear() and see what you get.

Sample (345 bytes):

8 comments

§ Aral Balkan said on : 30/09/06 @ 05:50
Hey Rich,

That's so funny -- I just fired up Flex Builder to churn this out in AS3 :) Thanks for beating me to it, now I have more time for WoW!
§ Richard Leggett® said on : 30/09/06 @ 05:56
Haha, oh no! I've done you no favours with extra WoW time.
§ Aral Balkan said on : 30/09/06 @ 06:05
Hey, btw, a SWF demo would rock so that people can compare the visual result and performance of the two.
§ Richard Leggett® said on : 30/09/06 @ 06:20
Consider it done. Talking of performance, I could only draw a few tens of lines before the Javascript version killed my machine, looks like there's probably a memory leak somewhere in those reams of code.

This is a Flash 6 version. Not using the bitmap capabilities of Flash 8+ to allow for a lot more stuff. But hey, using a bit of physics can make for a truly addictive little game:

http://www.deviantart.com/deviation/40255643/
§ Tink said on : 30/09/06 @ 14:20
Ideally you'd add a couple of more lines and draw it onto a BitmapData object each time the mouse is released to keep performance at a peak.
§ sascha/hdrs said on : 30/09/06 @ 21:19
Funny to see how they use JavaScript to make such a crappy App but then have annoying Ad Banners made with Flash at the bottom of their page! Don't you love such people?!
§ Phillip Kerman said on : 01/10/06 @ 10:17
26 lines if you take out that last line... still works.
§ Richard Leggett® said on : 01/10/06 @ 10:26
All good comments guys! I think we could boil this down to 15 lines if you spent a little while on it, but that would defeat the object here of saving time ;)