Ink �AniEd
An Ink Based Animation Editor
�Adding a New Dimension to Digital Ink�
Written/Developed by Lewey Geselowitz
At the
Using AniEd in Your Application
����������� Ink AniEd is an animation tool based around Microsoft�s Ink architecture. The goal is to create an animation tool which is easy and intuitive to use, and allows the user to quickly create animations which can be used for any number of tasks, from prototyping moving GUIs, to storyboarding for movies, to creating your own cartoons. It was developed both as a standalone animation tool, and as a Windows Control that can be easily integrated into any application using the .Net Framework. And while AniEd was designed for the Tablet PC, and contains certain features only available on the Tablet PC, it will run with little noticeable difference on almost any computer with the .Net Framework.
����������� In it�s standalone form, AniEd is a revolutionary step in animation, allowing for the greatest amount of quality animation, based on a small amount of user input. Specifically designed for the Tablet PC AniEd�s user interface makes bringing your Ink drawings to life as easy as cut and paste. All the normal Inking features which you know and love, are fully available to be applied to any single frame of animation. This means you can copy and paste frames to and from other documents allowing you to make animations as easily as you can think them.
����������� As a component for other .Net applications, AniEd can be used as any other Control, and uses a few simple functions to manage it (like Play(), Pause() and the Time and UseEditor properties, which make creating your own animation editor or player a piece of cake). Also, the AniEd control gives you access to an Ink object which represents the current frame being viewed, this allows you to perform any normal Inking operation just as you would on any other Ink object. Using the AniEd control is recommended because it simplifies almost all operations to one or two simple function calls, however the architecture also allows you to make your own animation controls using a series of structures similar to the Ink class diagram. For instance you have StrokePath (to represent a Stroke through time), and InkPath (which represents a set of Strokes though time).
����������� First of all, AniEd has been designed to be easy to use, and if you just follow these simple examples you�ll be up and animating in no time:
����������� Okay, when you first start you should see a blank page. Draw a single line on it using your pen tip or left mouse button. Now that we�ve got a line, try dragging the �time bar� at the bottom of the screen until it says �Time = 2�. This means that you�ve gone ahead in time to 2 seconds from the first drawing. Now click the line you drew before, you�ll notice that a yellow border is drawn around it. Now draw another squiggly line, and you�ll notice it replaces the one you highlighted. Now hit the Stop button ( [] ), this sets you back to Time = 0. Now hit the Play button ( > ), and you�ll see your first stroke blend into your second stroke. Quickly press the Pause ( | | ) or Stop button to stop the animation from going on for ever.
����������� What happened here was that you drew what your animation looked like at Time = 0, and what it looked like at Time = 2, then when you hit Play, the program went from 0 to 2 and worked out what it imagines the line would look like in between. You�ll find that it�s generally pretty good at guessing. These drawings are commonly known as �key frames� to animators, and are the basis for most animation techniques.
����������� You can also change the color or width of any stroke, and the system will automatically fade between colours and width as it�s playing.
����������� A little more useful task: Set the time to 0 using the �time bar�, and then draw a stick figure (so a head, a body, legs, arms etc.). Now set the �time bar� to some time ahead of 0, let�s say 4 seconds. Now click on the first part of the stick figure that you drew, and draw it again somewhere else. You will notice that once you�ve drawn the new position, the next part of the stick figure that you drew will automatically be selected. This means you can then also draw that part in it�s new position. In this way, you see how as long as you are doing drawings in a specific order (which most people do anyway), you can easily update a sketch to a new time and place, and make a cool looking animation.
����������� Keep in mind, that you can also move the �time bar� to between two sketches, and redraw the sketch there as well, there really are no limitations on this. If you draw a sketch at any time, it will only appear at or after that time. So if you draw a sketch at 4 seconds, you will only see it after the 4th second of animation (you can also make sketches stop at a certain time, as will be discussed later).
����������� You can also move, and modify sketches. To do this, first select them, which means draw a loop around them using either the �barrel switch� on your pen, or the right mouse button on your mouse. Just hold down that button, and draw a sort of outline of the strokes you wish to selected (this is known as the lasso). Once you�ve selected the strokes, you can drag them around, and perform all sorts of operations on them which you can find in a pop-up menu which you get by either right clicking on them, or taping them with your pen while holding down the barrel button.
����������� There are of course a lot of other things you can do with AniEd other than what�s above, but with what you know now, you can easily work the other things out and have alot of fun doing it. Just keep in mind a few of the terms defined below and you should have no problem, Enjoy!
Stroke: a stroke is a single line that you�ve drawn
Path: a path is a stroke across time. It represents the path that the strokes you have drawn will take as time progresses and the stroke move, change colour, etc.
����������� AniEd was
developed on a Tablet PC (which I kindly lent to by the
����������� What we must realize is that the Tablet PC makes for us a new metaphor for input purely based on it�s ease. As we see in AniEd, the ability to quickly and easily create drawings is a tool we must not ignore. In the future, more applications will lean more toward dynamic content creation, rather than content manipulation. Consider that most animation systems such as those used for modern cartoons and computer games are based on an initial model being made and then doll style rotated and shifted into the goal position. With the Tablet PC we begin to see an environment when it is easier to make original drawings rather than mutate and manhandle previously existing ones. This I believe will be a major step forward in the evolution of time based user interactions.
Technical Stuff
����������� This section and below are intended to give a technical overview of AniEd, and are by no means necessary for the average person to use AniEd. It�s intended audience are developers interested in AniEd, animation, Microsoft Ink, user interfaces, .Net, etc.
����������� First of all, AniEd is designed to compliment and extend the Ink API, not to replace it. Internally, the architecture of AniEd is similar to the Ink API, and tries to use it whenever possible. With this I hope to gain from all the time and effort put into the Ink API, automatic integration into future advancements of the API, and also to make integration into future and existing applications as easy as possible. In a time when more and more APIs and standards are coming out, the last thing a developer needs is another one, in this way I hope you will see that the AniEd can be easily introduced into most applications, with little additional work, and you still keep and use all of your Ink based utilities.
����������� AniEd itself is written entirely in C#, using Visual Studio .Net. This means that it is easy to compile down to a library and include in any .Net application. It does however require the Microsoft.Ink library which is on most, but not all .Net enabled PCs.
����������� At it�s core the animation process is executed by interpolating between �key frame� strokes. The main difference between the standard Ink architecture and AniEd is obviously that standard Ink doesn�t contain any time based information. This along with numerous other differences make using standard Strokes a non-ideal choice for a animation. This is not to take anything away from the Ink API which I believe is a superb piece of work and does it�s job amazingly well, it just simply wasn�t designed to do animations. One of the main issues is the public accessibility of the data which make up each stroke without having to go through an intermediary like GetPoints. This allows for vastly improved look up speed which is exactly what is necessary for the interpolation used in animation.� There are also a large number of other design changes, mostly based around the fact that standard Ink objects aren�t meant to be animated. However, repetition of code is avoided as much as possible, and where ever it was possible I exposed Ink conversion tools, and implemented features such as rendering and selection using modified version of the standard Ink API. The rendering is broken into a high performance renderer for animation playback, and a high quality renderer for normal viewing/editing (for the high performance renderer, the quality is adjustable, to give fine tuned control to the editing application). I use linear interpolation (i.e. only C0 continuity) because I found that it is more intuitive, and brings the giant goal of �pick up and use� much closer. C1 continuity of animation would have looked good in some cases, but would have made it a little more complicated to perform quick prototyping type work AniEd was designed for. Almost all of the system was designed for ease of use, from automatic selection of the next stroke to be drawn, to lasso selection, to an easy to understand animation metaphor.
����������� Before Strokes are entered into AniEd, they are lengthwise resampled or reparameterized. This solves a major problem when using the Tablet PC pen for input, which generally creates a line with a large cluster of points all at one point along the line (i.e. whenever the user slowed down just a bit). This would make point based interpolation a nightmare and would cause it to cost way too much CPU time. My solution is to essentially move the control points around a little bit so that each point is an equal distance away from it�s two neighbors. While this causes a slight loss of quality in certain areas it is vastly made up by the time and quality of the resulting animations. Also due to the large amount of samplings from the pen, my early experimentation shows the loss of quality to be almost unnoticeable. Consider the diagram below:
*--*--*--*--*--*--*
�������� *
������� / \
*-�� -*-��
-*-�� -*
� \ /��������
\ /
�� *����������
*
�������� *
������� / \
������ /��
\
*���� *����
*���� *
�\��
/������ \�� /
� \ /��������
\ /
�� *����������
*
The input points are drawn as *s, and the lines drawn between the points are dashes or slashes. This gives you a rough idea of how how the input coordinates relate to the resulting line. The top most line is the initial line, the bottom most the final line, and the middle is the interpolant between the two.
Now see what happens when the input points for the initial line are not evenly spaced. Remember that the user cannot see the control points, but only the resulting line.
*-*-*-*-*-*-------*
������ *
����� / \
*�� -*��
*-�� ----*
�\ /������
\ /
� *��������
*
�������� *
������� / \
������ /��
\
*���� *����
*���� *
�\��
/������ \�� /
� \ /��������
\ /
�� *����������
*
Notice now how the middle line is sort of bunch up onto the left side of the line, this is due entirely to uneven control point spacing, which is removed by the AniEd system.
����������� Random access playback � Unlike certain over animation systems, AniEd can jump between rendering different times easily without really even noticing. This allows for features like backwards playing, slow-motion, fast replay all without almost any additional effort. The AniEd Control even includes a RateOfTime property which can be set to any positive or negative number to adjust how the animation is viewed.
����������� Interpolation Architecture � The interpolation subsystem used by AniEd is available to your application as well, which gives you utilities like interpolating betweens colors, ints, floats and such, and more advanced tools such as interpolating between point based lines, resampling an array to a different length, floating point indexing (from 0.0 to 1.0 instead of integer based), and length wise resampling of point based lines.
����������� Stores pressure information � only available on the Tablet PC of course, the AniEd architecture is designed to store, interpolate, etc. pen normal pressure information along with the points and other information making up a Stroke. While the current Ink API doesn�t allow new Strokes to be created with user defined packet information (including pressure), the AniEd architecture is silently keeping all this information so that when hopefully newer versions of the API are released the changes which need to made to AniEd should take no time at all. Also, all previous animation files, which had pressure information, will finally be able to use it. Most of the Ink developer community (including myself) are waiting patiently for this addition.
����������� Cut and Paste operations, using the clipboard are integrated into AniEd, so that any single frame or collection of strokes can be copied out of an animation and pasted into a document. Or ink object from other applications can be pasted as into AniEd, and then managed like any other Ink. The majority of cut and paste operations are based around the default Ink cut and paste methods, and thus will automatically update themselves as new versions and new formats arise.
����������� Serialization is fully supported in that the InkPath object is serializable, and also exposed a custom set of save/load functions which offer a slight performance boost over the serialization method, and write into standard StreamWriter and StreamReader objects so that they can be made a part of a large file format. They also use a text based format, which compressed very well.
����������� Low-memory usage: It uses a more direct access to information philosophy than the Microsoft Ink classes, for instance giving direct access to point buffers rather than first copying it into an intermediary buffer and then giving it to the requester. One of the distinct advantages here is that the dynamic memory usage during real-time playback is very minimal, and on the whole not a lot of memory is wasted or unnecessarily created and destroyed.
����������� You can also use AniEd as an Ink collector (by just never adjusting the time) and benefit from features like lasso selection, dragging, copy/paste, save/load, etc, which while they may not be too much of a hassle to code, are nice to have wrapped into one neat little bundle.
����������� For anyone looking for examples on how to use many of the features in .Net and the Ink API, I think you�ll find AniEd a good source. I know a few of the other projects I�ve been working on included me copy and pasting a lot of code from AniEd. Any, for those interested, here is a short list of some of the more important operations which you can find somewhere or other in AniEd:
����������� Double
buffering, continuous updating, Ink collection, dynamic Ink rendering, rendering
using Ink, serialization, saving/loading Ink, Ink events, lasso selection, hit
testing, Ink manipulation and interpolation, working with multiple Ink objects,
copy and pasting Ink, animation playing/editing, Stroke packet management (in
Strokes and in the NewPackets event), dragging Ink,
and of course a whole bunch of other little things.
Using
AniEd in Your Application
����������� The simplest way to do this, is to include the AniEd control into your application as you would any other Control.� Once you�ve done this, you�ll notice a few key functions. First of all the �Ink� property returns to you a standard Microsoft Ink object which you can use as you would any normal Ink. Also, the UseEditor property can be used to turning the editing mode on and off. But most importantly is probably the Play() and Pause() functions, which do exactly as one would expect. A smart move would also be to make sure you adjust the RateOfTime variable before playing, the default value of 1.0 means normal playback. Other than those basics, you will find that using AniEd is a very hands off process, as it does most of the work for you. In fact, if you simply turn the editor on (UseEditor=true) and then never adjust the Time variable or hit Play(), you can easily use AniEd as a Ink collector with most of the work done for you already.
����������� There are also a few events you can subscribe to, such as the time change event, which is useful for say updating a text label as to the time in the animation, or moving along a track-bar to match the time. And there is even a context menu event, which is how AniEd tells you that you should bring up a context menu. If you look at the source code for the example application, you see that most features you would want to perform are only a few short method calls away.
����������� If your feeling a little more �hard core� and want to create your own animated Ink control or other such app, you will find that your knowledge of the Ink API will make moving to animated Ink very simple. The equivalent of a Stroke is a StrokePath, which is a Stroke across time. The InkPath is equivalent to an Ink object, except also across time, and the InkPathViewer is semi-equivalent to the Renderer object. The difference is that the InkPathViewer includes a built in �selection� system where you can specify which strokes are currently being selected. This is necessary as Strokes are destroyed and recreated each frame, which makes keeping track of them a task which is more easily handled by the renderer itself.
����������� Also, each StrokePath is made up of a collection of StrokeITs (Strokes In Time), which are really the direct equivalent of Strokes, just with slightly looser access privileges (for faster access), and some time based information.
����������� You will find the entire AniEd API fully and (fairly) clearly commented and explained. Also be sure to check out the example editor, which shows you how easy it is to integrate animated Ink into your application. Oh, by the way, just because the AniEd example is non-resizable doesn�t mean that the AniEd control is, infact it doesn�t even notice when it�s resized, as it doesn�t affect it much. I was just going for that wide-screen movie editor look when creating the example app.
����������� Included with the AniEd package you will get the executable, a few examples files, and the source code for AniEd.exe. This is of course just an example application of what can be done with AniEd, but it still quite a decent app in and of itself. If you look in the source directory you will find AniInk.cs, which contains the AniInk (animated Ink) namespace and everything is all in there, as a reference you can look at the example app and see how to use it. If you have any questions, feel free to contact me at lewey@ufl.edu . Of course I�m not liable for any damages that you may incur caused by your usage of anything in this package.
����������� One thing some people have asked for is sound effects, that would be cool, but it brings in a lot of headaches that I simply didn�t have time to deal with right now.
����������� A Shockwave exporter would also be a nice addition, so that animations could be posted on the net for anyone.
����������� And of course flat out more editing tools! Some of the most expensive software available is animation editing tools, there is no way I could complete with such people, the difference is just more coders creating more tools over more time (and being paid to do it), I believe the architecture I designed to be flexible enough to make the creation of such tools fairly easy, if someone just invested the time into it.
Thank you for you time, and I hope you enjoy AniEd.
If you have any questions or comments I�d love to hear from you.
- Lewey Geselowitz
My email: lewey@ufl.edu
My webpage: http://plaza.ufl.edu/lewey/
The AniEd homepage: http://plaza.ufl.edu/lewey/anied/