Introduction

Pocket AniEd is an experiment in pen-based computing and hopes to embody the power of this interface as opposed to more common mouse oriented systems. One of the principals of Pocket PC development is that when it comes to drawing it is faster to create a new stroke than to correct and old one; and this lies at the heart of Pocket AniEd. Most modern animation systems have you create a static object and then animate it with rotations, scales and other transforms, however AniEd has you simply recreate the new object at a different time and then interpolates between the shapes for you. Hopefully this will lead to a more intuitive user interface and one which makes rapid animation prototyping take just as long if not shorter than single frame diagramming. Consider a professor teaching a class, most of the good professors will draw diagrams and explain the process occurring as they draw the diagram, with AniEd the process of drawing is the same as that of animating so while the professor looses no time during his talk at the end not only has the student seen the process being created, but he can also now see it animating! See a very short example of this here.

Getting Started Animating

Here are a few simple steps to creating your own animations:
1) Download and run Pocket AniEd (see the 'Download' section below')
2) Draw a square (as one line)
3) Drag the bar at the bottom of the screen to change the time
4) Tap somewhere on the square to select it (on the line that is). You will notice that it turns green with a small dot where you started drawing the line.
5) Now draw a triangle. The square will vanish indicating that at this time that square has become a triangle.
6) Now hit the play button (labeled '>') to watch your animation come to life!

This shows the principal of how Pocket AniEd works: you set the time you want a stroke to appear at by dragging the bar and then move it to different times to have the drawings appear there. Additionally, if a drawing consists of multiple lines (say a stick figure) then as you select and redraw the first line, it automatically select the next one in order, basically this means you can draw a stick figure, change the time and then simply redraw the figure in a different position to animate him!

Once you have selected a stroke, you can also apply all sorts of operations on it from the 'Selected' menu. To select on multiple strokes simply tap on them one after another, and to unselect all strokes simply tap on an empty space. Also keep in mind that if you draw a line when no other are selected that line becomes a new stroke which only start appearing at the current time. Enjoy.

Download

Downloading and installing Pocket AniEd is very simple. First of all, for the Pocket PC you will need to install the .Net Compact Framework (you can you can get for free from Microsoft). Then simply download and copy PocketAniEd.exe onto your Pocket PC and run it. It's that simple.

If you appreciate this application, a small donation to support me writing more interesting apps like it (and not get a job writing accounting software) would be greatly appreciated.

I've also rebuildt PocketAniEd for the standard .Net Framework. This is 99% exactly the same source code but with a few tiny changes to better suit the desktop environment. While you can run the Compact Edition version on a normal Windows machine, this version is just a little bit more 'comfortable'.

Please note that Pocket AniEd saves animations in it's own .pani format, this is NOT compatable with Ink AniEds .inka format.

SVG Animations

SVG (Scalable Vector Graphics) is sort of like Flash but without all the junk. If you can't see the animations on this page, be sure to get Adobe's free SVG viewer and plu g-in for Internet Explorer (it works sort of like Acrobat but alot smoother). With SVG you can do amazing graphics, animation, interactive systems; and all in Notepad (you don't need expensive Flash design software or some special compilers)! Being based on XML and a W3C standard, you can easily read and edit it by hand and include it in all sorts of different documents (from HTML, to PowerPoint to even your desktop environment). In fact including the animat ions Ink AniEd produces is as easy as putting in a single tag into your HTML: <embed src="myanimation.svg">

Below are a some animations to show off a few of Pocket AniEd's features. Keep in mind that the whole point of Pocket AniEd is rapid animation creation leaning on the Pocket PC pen's unique ability to sketch rapidly and effectivly. So it's not about getting it perfect it's about getting the idea across quickly. To make an SVG file, simply draw or load an animation into Pocket AniEd, and select 'File'-'Export as SVG...' and then choose the filename you want to export it as. It's that simple!

Hit 'WATCH' to view any of these animations. Or you can download the 'pani' (Pocket Animation) file which was used to produce the watchable SVG file. Pocket AniEd works with .pani files and merely exports SVG files.

If you are interested in using Pocket AniEd to create animations for your website, I'm sure you will find the process exceedingly easy. Keep in mind that once you have the SVG file generated by Pocket AniEd, you can always open it up and change things around. You can make the animation loop and all sorts of other such tricks. So anyway, take a look at a few SVG related links I put below to help you learn SVG and you should be well on your way.

Development Process

Pocket AniEd is based on my previous Tablet PC animation system Ink AniEd. However Ink AniEd was design exclusively for the Tablet PC using all it's fancy Ink based features and also so that it could be seamlessly integrated into any Ink based animation without any noticeable changes to the application code (other than that it is now animate able!). When it came time to write the Pocket PC port, the majority of the code had to be changed so that it no longer uses the Tablet PC SDK (which was deeply rooted into Ink AniEd), so that it didn't require any features unavailable in the .Net Compact Framework, to remove dependence on too much floating point arithmetic, to do general performance optimization, but primarily to redesign the interaction model to better suit Pocket PCs. This section will cover my initial work porting the code base over from Ink AniEd, and then how I worked it into a real Pocket PC app.

First of all, let me say that porting C# between .Net and .Net Compact is a breeze; the only major differences was not having the Tablet SDK and the lack of the full GDI+ commands, namely pens with widths other than 1 would have been really nice, and the ability to draw a Point[] polyline instead of polygon. The main idea to carry away is that you take your normal C# code, you drop it into the compact framework, you make a few tiny adjusts and your done! I'm sure I'll be porting most of my .Net apps to the compact framework now because it's just a matter of drag, drop, and move around the controls and you've just put your code 'in the hands of your customers'.

The first major difficulty was getting rid of references to the Ink API, which isn't nice because it meant I couldn't even compile for a quite a while, and meant I basically rewrote the majority of the code. But all of that was basically just grunt work, nothing too complex (replacing ink events with mouse events, custom drawing and hit detection code etc.). Seriously though, the Ink API is really nice, it's rendering mechanism are unbelievably fast and produce great quality drawing, I highly recommend you try them out sometime. Once that was done, I had a working (albeit crippled) application to work with, and quite frankly it is a lot easier to work on a project that is up and running than one which you haven't even seen in action yet. This I see as one of the major cool factors about porting to the compact framework, even if your code doesn't work quite right, or it runs very slowly at first, IT RUNS which is a lot better than many platforms I have ported to before (consider porting from software rendering to hardware rendering, and how long it is before you actually see anything on the screen).

The next issue was floating point arithmetic which is something to seriously keep in mind when developing an app with the concept of porting to PPC in the back of your mind. Floating point math on the PPC is VERY slow compared to integer math (much slower relatively to floating point versus integer math on a normal CPU), so it should be avoided as much as possible when performance is important. While I didn't completely remove floating point arithmetic from the system, it was kept only on the higher level architectures so that it was used very infrequently, and my testing of the final architecture seemed to show that none of the bottlenecks were floating point related. However this isn't something to really worry about as fixed point math is amazingly powerful and easy to use whenever you really get down to it. If you don't know about fixed point math basically it's a way to represent numbers with decimals using integers and integer math. Look it up on Google. There were also plenty of other little performance issues I changed to reduce GC time and such but there aren't of general interest. One point that I would like to make concerns using DllImport to make calls to QueryPerformanceCounter, this is an effective technique and is also nice for those of us used to using this in Win32, however there is a major draw back here because it means that your .Net binary will not only run on Pocket PCs and not on normal desktops (actually your app only crashes when you call the method not at load time). It was for this reason that I switch over to Environment.TickCount to do my timing. As far as I can see the animation quality is not noticeably different and being able to run on a normal desktop is a major plus and definitely worth it.

User interface design was of course the biggest part of development considering how heavily this application relies on interaction with the user and how very different the Pocket PC is to more traditional computer systems. One of the interesting issues I first notices was the lack of a right mouse button, the Tablet PC even has a button mounted on the side of the pen with is usually used to do right click operations and 'selection strokes' around multiple objects. So I landed up both removing features like pressure sensitive animations, and adding features like selecting multiple strokes with single taps instead of key-combinations or complex 'lasso selections'. Basically if you try to approach the Pocket from as much of a 'fresh' perspective as possible then you will probably find development a lot easier when you're not cloged down by tradition interaction methods.

All in all Pocket AniEd had an interesting development process and I believe created a well rounded tool which will hopefully help to improve pocket interaction and breath some animated life into the static and uninteresting diagrams we find in our day to day lives. It also stands to show that the Compact Framework is a powerful platform easily capable of complex real-time interactive systems such as this.

SVG Info

For those of you interested in SVG, Google is of course always your friend but here are a few of the sites which I found most useful: