Pocket PC based Animation Editor
Pocket AniEd allows anybody to quickly and easily make beautiful and smooth animations without a background in computer animation or any unnecessary complexity. See the ‘Getting Started Animating’ section to see how easy it is to create your own animations. You can even export your animations to SVG (sort of like Flash) which can be posted on the web or included in Word, PowerPoint, or many other document types. On the technical side, Pocket AniEd was written in C# using Microsoft Visual Studio .Net 2003 and the .Net Compact Framework. It was based on my earlier Tablet PC animation editor Ink AniEd, but the majority of code was rewritten to better suit the Pocket PC environment. Read more in the ‘Development of Pocket AniEd’ section or in the article about it at CodeProject.com.
Note: I'm looking for more AniEd animations to post on this site, so send all your interesting animations and doodles to firstname.lastname@example.org.
On this page: Introduction, Getting Started Animating, Download, Development Process, SVG Animations
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.
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.UPDATE - 5/28/2003 - Thanks to someone who wrote in and noticed a small bug in the previous build, I fixed it and posted the new version.
Requires: Visual Studio .Net 2003
Note: This is the C# source code,
so you don't really need the Visual Studio project it comes in,
but I highly recomend it.
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 (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.
|Some guy|| WATCH svg file || pani file || Result of goofing around during class.|
|Doubly Linked List|| WATCH svg file || pani file || I think animations should be used more in teaching, especially programming. Here is a very small animation of adding an item to a doubly linked list. The cool part is that creating it took only as long as drawing the key frames. Thus it's just as fast to create an animation as to draw a few diagrams of the same thing (actually less because I didn't have to redraw it each time).|
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.
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.