Incremental Blogger

Top-Secret InkPlayer

Don't tell anyone, but here's a version of InkPlayer. Really, I mean, don't tell anyone because it's got too many embarrassing rough edges. Too much daytime work, too little night time available.

Since several people have asked for a version I decided not to wait any longer and post one I could cobble up from what I have. I stripped out most of what wasn't working, but you'll find some undone features and tons of screen flicker. Sorry. I'll be inching along cleaning up InkPlayer because its a fun app to work on, but in the meantime I hope there's enough for you to experiment with.

What does this version do? Two things: You can sketch out a figure and have an animated version saved to a Flash SWF file or you can draw multiple frames of a drawing and then export those to a Flash file. I started InkPlayer with the latter use in mind, but it's funny, it doesn't work very well right now. I've been working on the frame editing and I found it best to remove just about all of it. Otherwise, the app was going to be too unstable. OK. Enough excuses.

Let me focus on the first use: creating animated drawings of the form shown in the Flash animation above.

The first step is to draw something in InkPlayer. There currently are currently three pen widths and a limited palette of colors, so think simple. I'm not an artist, so I cheat. I usually temporarily insert an image into InkPlayer, trace over it, hide the image, and then export the drawing. The whole drawing is saved in one frame and the strokes are played back in the
Flash file as shown above.

You can download a zipped version of InkPlayer here. Simply download the file, unzip and place the extracted InkPlayer.exe file wherever you'd like.

Here's a step-by-step set of instructions for creating an animated drawing like that shown above:

1. Insert a background image to trace over by selecting the Frames | Insert Background Image menu option and choosing a jpg file to load into InkPlayer. I've done all my samples with images under 1000 pixels in size, so there's no guarantee that larger images will load correctly.

2. If the image does not display, make sure that menu option Frames | Show Background Image is checked.

3. Now click on the pen tool and trace the image as you'd like. There currently is a limit to the number of strokes. It's an arbitrary limit of 300 strokes that I've been using for testing. I'll remove the limit later.

4. Now you can hide the background image so only your drawing shows. To do this uncheck Frames | Show Background Image.

5. Make sure that the Frames | Animated Strokes menu option is checked. If not, the strokes won't be animated individually and all of the strokes will be rendered to the Flash file as one still frame.

6. Set the frame rate. I've found that 30 frames per second is good for animated stroke playback like in this example and 4 frames per second is good as a lower limit for flip-chart style multi-frame animations.

7. Export the drawing to a Flash file by selecting the File | Export to Flash menu option.

Now you'll be able to open the saved Flash file in Internet Explorer.

The Flash drawing can be resized and for best quality I keep the Flash file at least one-half the size of the original drawing. Later I'll smooth out the original strokes so this isn't necessary.

To insert your drawing animation in an html page, you can use the html block:

<object width="210" height="200" align="left" valign="top"><param name="movie" value="yourfile.swf"><embed src="yourfile.swf" width="210" height="200" align="left" valign="top"></embed></object>

You'll need to change the name of the file and set the desired width and height. Note that the settings are given twice in order to support different browsers.

The flip chart animations aren't working well, so I won't go into them another time.

As you can see, this is a very rough app. Hardhats are required.

(InkPlayer Version 0.3 download)

Posted by Loren at June 24, 2003 01:49 PM