Tag: Drawing API

I just finished a project that allowed a user to dynamically draw lines on a chalkboard. Obviously, I used the Flash drawing API to draw the lines, but I wanted to give the lines a chalk texture. I figured it would be simple – just create a background texture that looked like chalk and use the dynamically drawn lines as a mask…

Wrong! Flash can’t use dynamically drawn lines as a mask. It can use dynamically drawn shapes (like circles and rectangles) without a problem as long as they have a fill color. Unfortunately, Flash considers all lines to be infinitely thin vectors, so they don’t work as a mask. Even if you set the lineStyle property to be really wide, Flash simply can’t use the lines to create a mask.

I figured out a relatively easy way to do this. Check out the example below:

How is this done? Essentially, you can get around Flash's issues by creating a transparent bitmap copy of your dynamically drawn lines and then using the bitmap as your mask. Do this on every frame and you have a dynamic mask using the drawing API! Of course, with Flash, there is always a catch. The catches are:

• You must set the BitmapData properties correctly to create a transparent bitmap (download the example and check it out)
• You must set cacheAsBitmap to true for both the new mask and the masked object or this doesn't work.

As always, I've included a source file download. I commented this one VERY thoroughly, so you should be able to implement it pretty easily. You can toggle the "enableMasking" property in the code to see the line drawing without the masking. Combine this with my earlier post on drawing smooth lines and you can make something really cool. Good Luck!

Flash’s drawing API is really useful for a lot of applications and games, but it has one major drawback: user-drawn lines are usually jagged and sloppy looking. The simple fact is that it’s really difficult to draw smooth lines with a mouse. In many cases, it’s not a big deal and it is an accepted drawback of drawing with a mouse.

Recently, however, I built a flash game and those jagged lines were a real problem. I was creating a linerider-style game similar to this one, in which a user draws a track and then clicks a button to watch a character sled down the lines that they have just drawn. It’s fun to draw loops and jumps and watch the rider flip and fly all over the place. The jagged lines created by the Flash drawing API were creating a lot of problems for the physics simulation. My sled never picked up any speed because of all the little bumps on the user-drawn lines.

After spending a lot of time Googling around, I found a forum post that suggested using a basic easing script to draw smooth lines. It was so simple and so clever at the same time! It solved my problem, so I created a demo to show how it works.

Check out the Flash demo below. When it loads, the ease factor is 1, meaning that there is NO EASING. Try drawing a few circles on the gray rectangle and you’ll see that it’s the usual jagged drawing tool. Now, drag the red slider down until the easing reads about 0.25 and try drawing the circles again. You should notice that the lines look much smoother. Try drawing lines at different speeds and with different easing amounts. Remember that lower numbers mean MORE EASING (I know, it seems backwards, but it prevents a deadly “divide by zero” issue that you get by doing it the other way).

There is one drawback to this method. The line lags behind your mouse a little bit as you draw. In most cases, this isn't a huge issue and the benefit of smoother lines outweighs this drawback.

As usual, you can download the complete source code packet here.

If you've never played Linerider, check out this killer version. Please note that I did not create this awesome game. I created a similar game for a client that wishes to remain anonymous.