somewhere to talk about random ideas and projects like everyone else


Ajax Animator create and share animations in the browser

Ajax Animator was probably my first large project— I started it after I had exhausted all the free trials of Macromedia Flash for making silly cartoons in 5th grade.

As my primary focus from the latter half of 6th grade until my early sophomore year of high school, it evolved through many different iterations and spun off several smaller projects.

I started by downloading Mark Finkle's RichDraw SVG/VML drawing component and pasted code snippets from various DHTML widget sites until I had something that looked vaguely like the Flash I knew. Over the years, as I've learned more about programming, I've rewritten the app several times— going from raw HTML and docment.write to DHTMLSuite to YUI/Ext to Ext 2.0.

Ajax Animator has been featured on MakeUseOf, InfoQ, and has its own Wikipedia article.

Video Introduction (Gadget UI). Wave State Demo. User Made Introduction (Standard UI)

Run Application Now – New Redesigned Interface with VectorEditor, Multi-Select, Onion Skinning

Standard OnlyPaths Based Versions: Original 0.2x Standard UI

VectorEditor Based Versions: New Redesigned Interface with Multi-Select, Onion Skinning OR Standard UI OR Google Wave Gadget (new, must have Google Wave)

iPad Compatible Version:


posts forum mirror 16 February 2012

I first registered an account on on December 11th, 2006. I was 11 years old at the time. It was this time when the Ajax Animator began. I’m not sure of that, because 5 years past certainly constitutes ancient history for a teenager. It was a huge influence on the development of the Ajax Animator, and it was there that I first encountered some of the future contributors to the project. In fact, the community was kind enough to create an entire subsection of the forum intended to nurture discussion of my pet project, which paralleled their eternal vaporware attempt at resurrecting their namesake program.

Over the next few years, the community decayed and the site became desolate and spam-ridden. There was a period in late 2008 when every indication was that the site would come to an abrupt demise when the domain registration was to expire. The still active community created a backup community on some other forum hosting site and prepared for the worst. I did my part by running WinHTTrack and mirroring the site on my hard disk. It turned out the domain was renewed, and the panic was for nought.

But, when the website finally became a desolate and abandoned wasteland a few years later, the domain lapsed and all the content was lost.

In a nostalgic fit earlier today, I dug up that archive and uploaded it to Google Code. Here you can browse the near entirety of the liveswifers forum as it was, frozen in carbonite those three years ago. I can’t place that date, December, 2006 quite in context, but I would expect that to be approximately the date that the seeds of inspiration were planted. And so maybe not for anyone else, but this site and all its content holds a special place in my mind, and deserves a final resting place shielded from the harsh internet.

JavaScript <canvas> to (Animated) GIF 23 July 2010

This is the GIF which was generated from the canvas.

This is the raw canvas element saved as a non-animated PNG

I’ve tried this before but it didn’t work. <canvas> can’t do toDataURL('image/gif'), and the primitive GLIF library couldn’t do much so I never had the opportunity to test my gif-merging code that I had. But I’m at it again, this time, porting it from the AS3GIF library, an awesomely comprehensive bitmap to binary gif encoder that even supports LZW compression (and the patent has luckily expired. Yay!). AS3Gif is supposed to “play and encode animated GIFs”, but since web pages can usually natively play GIFs fine, it’s only a port of the GIFEncoder portions of the library. And it works really well. The rest of this post is copied from the Github readme. Interesting how the w2_embed/anonybot embed post was a blog post turned into readme, this is a readme turned into blogpost. I’ll start with a link to the Github repo anyway:

Basic Usage

Since it pretty much is GIFEncoder, you could consult the as3gif how-to page

But there are some differences so I’ll cover it here anyway.!

This is the GIF which was generated from the canvas.

You first need to include the JS files. It’s probably best if you include it in this order, but it shouldnt’ matter too much.

<script type="text/javascript" src="LZWEncoder.js"></script>
<script type="text/javascript" src="NeuQuant.js"></script> 
<script type="text/javascript" src="GIFEncoder.js"></script>

If you want to render the gif through an inline <img> tag or try to save to disk or send to server or anything that requires conversion into a non-binary string form, you should probably include b64.js too.

<script type="text/javascript" src="b64.js"></script>

Simple enough right? Now to convert stuff to GIF, you need to have a working or at least some imageData-esque array.

<canvas id="bitmap"></canvas> 
  var canvas = document.getElementById('bitmap'); 
  var context = canvas.getContext('2d'); 
  context.fillStyle = 'rgb(255,255,255)'; 
  context.fillRect(0,0,canvas.width, canvas.height); //GIF can't do transparent so do white 
  context.fillStyle = "rgb(200,0,0)"; 
  context.fillRect (10, 10, 75, 50); //draw a little red box

Now we need to init the GIFEncoder.

var encoder = new GIFEncoder();

If you are making an animated gif, you need to add the following

encoder.setRepeat(0); //0 -> loop forever //1+ -> loop n times then stop 
encoder.setDelay(500); //go to next frame every n milliseconds

Now, you need to tell the magical thing that you’re gonna start inserting frames (even if it’s only one).


And for the part that took the longest to port: adding a real frame. encoder.addFrame(context);

In the GIFEncoder version, it accepts a Bitmap. Well, that doesn’t exist in Javascript (natively, anyway) so instead, I use what I feel is a decent analogue: the canvas context. However, if you’re in a situation where you don’t have a real <canvas> element. That’s okay. You can set the second parameter to true and pass a array as your first argument. So in other words, you can do encoder.addFrame(fake_imageData, true)as an alternative. However, you must do an encoder.setSize(width, height); before you do any of the addFrames if you pass a array. If you pass a canvas context, then that’s all okay, because it will automagically do a setSize with the canvas width/height stuff.

Now the last part is to finalize the animation and get it for display.

var binary_gif = //notice this is different from the as3gif package! 
var data_url = 'data:image/gif;base64,'+encode64(binary_gif); 


Each of the files exposes a single global (see, at least it’s considerate!). But since there’s three files, that means that there’s three globals. But two of them are more of supporting libraries that I don’t totally understand or care about enough to document. So I’m just gonna document GIFEncoder.

new GIFEncoder() This is super parent function. You really don’t need the new keyword because It’s not really even using any special inheritance pattern. It’s a closure that does some var blah = exports.blah = function blah(){ for no good reason. Anyway, it returns an object with a bunch of methods that the section will be devoted to documenting. Note that I’ve never tested more than half of these, so good luck.

Boolean start() This writes the GIF Header and returns false if it fails.

Boolean addFrame(CanvasRenderingContext2D context) This is the magical magic behind everything. This adds a frame.

Boolean addFrame(CanvasPixelArray image, true) This is the magical magic behind everything. This adds a frame. This time you need you pass true as the second argument and then magic strikes and it loads your canvas pixel array (which can be a real array, I dont care and I think the program has learned from my constant apathy to also not care). But note that if you do, you must first manually call setSize which is happily defined just below this one.

void setSize(width, height) Sets the canvas size. It’s supposed to be private, but I’m exposing it anyway. Gets called automagically as the size of the first frame if you don’t do that crappy hacky hack.

void setDelay(int milliseconds) the number of milliseconds to wait on each frame

void setDispose(int code) Sets the GIF frame disposal code for the last added frame and any subsequent frames. Default is 0 if no transparent color has been set, otherwise 2. I have no clue what this means so I just copypasted it from the actionscript docs.

void setFrameRate(Number fps) Sets frame rate in frames per second. Equivalent to setDelay(1000/fps). I think that’s stupid.

void setQuality(int quality) Sets quality of color quantization (conversion of images to the maximum 256 colors allowed by the GIF specification). Lower values (minimum = 1) produce better colors, but slow processing significantly. 10 is the default, and produces good color mapping at reasonable speeds. Values greater than 20 do not yield significant improvements in speed. BLAH BLAH BLAH. Whatever

void setRepeat(int iter) Sets the number of times the set of GIF frames should be played. Default is 1; 0 means play indefinitely. Must be invoked before the first image is added.

void setTransparent(Number color) Sets the transparent color for the last added frame and any subsequent frames. Since all colors are subject to modification in the quantization process, the color in the final palette for each frame closest to the given color becomes the transparent color for that frame. May be set to null to indicate no transparent color.

ByteArray finish() Adds final trailer to the GIF stream, if you don’t call the finish method the GIF stream will not be valid.

String stream() Yay the only function that returns a non void/boolean. It’s the magical stream function which should have been a getter which JS does support but I didnt’ feel like making it a getter because getters are so weird and inconsistent. Like sure there’s the nice pretty get thing but I think IE9/8 doesn’t implement it because it’s non standard or something and replaced it with a hideously ugly blah blah. So Anyway, it’s a function. It returns a byteArray with three writeByte functions that you wouldn’t care about and a getData() function which returns a binary string with the GIF. There’s also a .bin attribute which contains an array with the binary stuff that I don’t care about.


The process isn’t really the fastest thing ever, so you should use WebWorkers for piecing together animations more than a few frames long. You can find the rest of the WebWorkers section on the actual readme, because the rest is just a huge block of code with comments.

stick figure animator 22 June 2010

One thing the ajax animator’s pretty bad at is stick figures. Sure it’s not impossible, but it can’t really compare with the ol-fashioned frame-by-frame joint-manipulation likeness of Pivot. It’s called stick2 because the original experiment with stickfigures was named stick.html, and when I went to extend it and didn’t feel like setting up a git/svn repo, I copied the file and named it stick2.html, and with no good project-naming skills, it stayed that way.

Anyway, this was a project that got pretty close to completion in early march, but I never bothered to blog about it until now. It should work pretty not-bad on an iPad J(except the color picker), though honestly, I’ve never tried it.

The interface is pure jQuery/html/css. The graphics are done with Raphael, but the player actually uses <canvas> for no particular reason.

Basically, it’s organized into two panels, the left-side figures-box and the bottom timeline. The figures-box contains figures (amazing!) and clicking on them adds them to your canvas. The two defaults are the pivot-style stickman, and something called “blank” which is a root node with no additional nodes. Though it shows up as a orange dot, unless you add something to it, it doesn’t have any actual look when viewed in the player.

On top is the context-sensitive buttons. Well the buttons in my screenshot aren’t context sensitive, they’re permanent. But when you click on a node, a new set of buttons (and words too!) appears. One is a line and the other is a circle. Click them to add a new segment or circle to the currently selected node. Then are various settings for the current segment (each node other than the root one is associated with a segment). Clicking those allows you to modify them. Also, a red X appears on the right, and that basically means remove the node and the child nodes.

So, now you have some extra nodes, how do you change them? Simply hold it down and drag, and the the segments move as well. But note that the length of the segment doesn’t change as you move it. That’s because by default, it locks the length of the segments. There are two ways to get around it. The first is to hold shift while dragging. The second is to tap the little lock icon on the top left.

On the bottom, is the timeline with live-previews of your frames with a semitransparent gray backdrop of numbers. Switch between each one by clicking on them and add one at the end by hitting the green “Add new frame” button.

On the canvas, there are two yellow squares, those allow you to resize the canvas.

On the very left of the top toolbar, is the play button. Hit it and the figures toolbox minimizes and it plays out your animation. Click it again to get back. Then is a little upload button. Hit it and then a little box pops up with a link to where you can find your animation in a way that you can share and to edit (not actually edit, but more like fork, as each save is given a unique id). Next is the download button which you hit, and get prompted by a big prompt-box which you use to paste in the ID of the animation you (or someone else) has saved, so you can edit it. Most of the time that’s useless as when you send a link with the player, it has a button which says “Edit”.

Sample animation:

Try the application out:


Ajax Animator for iPad Updates 17 June 2010

This isn’t really new, but I just remembered to write a post about it. Ajax Animator for iPad got a relatively minor, but certainly pretty important update.

The new update incorporates the TouchScroll javascript library to have nice flick-to-scroll-ness throughout native iPad apps.

The VectorEditor core had a few bug fixes, rotation now works and so does resizing (though it’s still susceptible to the always-existent resizing of rotated objects awkwardness - I would love it for someone to fix it). However, resizing doesn’t change the size of the bounding box, which is a somewhat awkward aesthetic but it’s still functional.

Ajax Animator iPad Support 11 April 2010

Today I went to the magical Apple Store and tried out the iPad for the first time. I really have to say that it’s quite magical, though it doesn’t fulfill the criterion for Arthur C. Clarke’s Third Law despite what Jonathan Ive says. Though I really haven’t tried any large area multitouch interface before (sadly), and I would expect it to be a somewhat similar if not exact replica of the experience. Keynote and Numbers were pretty neat (I suck at typing on the iPad in any orientation, so I don’t like Pages). That’s enough to show that iPad is not just a content consumption tool as the iPod and iPhone primarily are, but also content creation.

Anyway, in a few minutes I just swapped the mousedown, mousemove, mouseup events with touchstart, touchmove, touchend events respectively in the core of VectorEditor, while adding a new MobileSafari detection script (var mobilesafari = /AppleWebKit.*Mobile/.test(navigator.userAgent);) and in a quite analogous “magical” way, VectorEditor works in iPhone/iPod Touch and theoretically iPad, Just dragging the vectoreditor files over to the Ajax Animator folder and recompiling should bring iPad support to Ajax Animator with virtually no work.

I haven’t tested it. Downloading XCode 3.2.2 right now so hopefully I can test it soon. Stupid how it’s what? 2.31 gigabytes?!

And possibly, I could use PhoneGap to hack together a App Store app which does the same thing (and maybe charge for it, which might be a bit cruel as this application is open source and works equivalently online - but I guess that’s okay for those people who don’t read my blog >:) ). Maybe get enough to buy an iPad :P

Anyway, though I’m pretty late to this and my opinion probably doesn’t matter at all, here’s a mini iPad review: It’s really really cool, feels sort of heavy, really expensive, hard to type on in any orientation (interestingly it has that little linke on the f and j keys with the keyboard which feels useless since I always thought the point of that was so you can tactile-ily or haptically or tactically or whatever the right word is, find the home row, but since there’s no physical dimension to an iPad, it just strikes me as weird and wanting of that tactile keyboard). Otherwise, browsing really really feels great. Only thing I miss is the Macbook Pro style 3 finger forward/backward gestures (@AAPL plz add this before iPad2.0, and also, get iPhoneOS 4.0 to work on my iPhone 2g or at least @DevTeam plz hack 4.0 for the 2g!).

Oh, and for those lucky enough to have a magical iPad, the URL is at least until there’s enough testing to make sure that I didn’t screw up everything with my MobileSafari hacks.

Onion Skinning in Ajax Animator 01 March 2010

The Ajax Animator (Wave/Mini interface version) now has support for basic Onion skinning, where the last keyframe is semitransparently placed in the background to aid in the positioning of the next keyframe. It’s now enabled by default at 20% opacity but can be disabled.

To disable it, click the advanced button on the right side of the toolbar and find the entry labeled Onion Skinning, there you can set the onion skinning opacity or disable it with 0% opacity.

Stick Figures! 27 February 2010

Ubuntu’s weird and adding a bar on top of all my screenshots

I like stick figures, and browsing YouTube, I found some things on Pivot and Pencil (really awesome free desktop animation apps), and that made me think, Stick figures are awesome. So I’m going to add some better Stick Figure features into Ajax Animator and possibly upstream to VectorEditor eventually.

The future of the Ajax Animator 12 December 2009

Eventually, what will happen is a pluggable editor system and swapping between the new Mini UI and the old standard UI. The pluggable editor system will enable switching between the existing VectorEditor and OnlyPaths editors as well as SVG-edit. Possibly, OnlyPaths will be phased out as SVG-edit supports every feature of the former as well as many more. The priority editors with the new version will be VectorEditor (the Mini UI editor, based on Raphael so it works fine cross-browser, but is also much more limiting than the rest, including OnlyPaths which it partially replaces). SVG-edit is an awesome project which is being actively developed, and will add new features that may make the Ajax Animator viable for more than just stick figures. New features that will come from the transition could include Gradients, Curved paths, Wireframes, Zoom, Groups, Align tools, Rotation and Resizing (without bugs!), Polygon/Polyline editing, to name a small subset. It’s likely that SVG-edit will have far more features by the time it’s fully implemented. It’ll be awesome.

The SVG-edit UI won’t fit well with the Mini UI (which I actually like more), so the classical UI will be revived.

New Default Colors? 24 September 2009

Since the project started almost 3 years ago, the color scheme had been Red fill, Black stroke, and a stroke width of 1px. Is it time to change?

One idea is White for the fill, Black for stroke (same), and a 5px line instead. This makes lines more easily manipulated, but it tends to make rectangles large (and the canvas is small). The normal Black/Red/1px is the same used by Flash (as far as I know), and numerous other editing tools (including svg-edit).

So what do you think?

Ajax Animator Wave Gadget 18 September 2009,!w%252B3JUS0MHA%2525A.1

If you have a Google Wave developer account, you can visit the above link to use the gadget. It supports almost all the features of the full normal Ajax Animator and many more. It includes better Text, Images, Rotation, Resizing (still needs work), Layer Visibility, Stability, Platform Support, Export options, etc. However it does notably lack the entire old right (east) panel, which also means no undo, or redo. Also since it uses a different graphics editor (VectorEditor), it does not have all the transform options which were present in OnlyPaths. It also supports the whole real time editing that Wave is so famous for. Two people can concurrently edit the same frame at the same time or one user can watch the animation while the others are editing and see the animation develop.

If you aren’t fortunate enough to use wave, you can use it without the collaborative features at

Wave Syncing "Echo" 15 September 2009

The problem with the implementation of lots of things like VectorEditor, SVG-edit and the Ajax Animator is that something i’m going to randomly call “echo”.

Basically, you might delete something on your client, and right after that, since the result isn’t real time, the app adds the shape back, and it gets deleted again. With multiple users, it gets more confusing, and there’s a random chance that it might not even delete.

In wave2 which is now a really complicated and massively slow library filled with tons of inelegant crap spanning almost 600 lines, the way it’s resolved (somewhat) is by not truly deleting things, but rather replacing it with DELETED/TIMESTAMP.

Ajax Animator Storage 11 September 2009

So I decided to mix up an old project, which I was almost about to migrate to GitHub but it’s still on Google Code ( which was basically a free service that allows easy prototyping of things by providing basic persistence (using JSONP). So I mixed it up with the Ajax Animator Standalone Player, so the Google Wave version of the ajax animator will have a Publish button which will upload things to a server and give you a shareable URL Such as while it would be great if a) the URL was shorter and b) the URL was more customizable, it works basically.

Ajax Animator + Wave 07 September 2009

sadly it led to this

So I think that the Ajax Animator Wave thingy is almost done. I think it’s really awesome, there’s some new stuff in there that may help in collaboration. There is still a bit of dogfooding left (VectorEditor needs to be updated as while the new version of Raphael is being used which eliminates a lot of the hacks being used, the change in path APIs means that lines, polylines and paths all fail). So after a bit of more bug testing, I think it’s going to be pretty cool. It will definately be out by the time the 100,000 people join Google Wave (I can’t wait!). But I’m not sure if it will be today, next week, or the week after that.

So to show some cool stuff I can do, I’ll publish the first time this blog has ever really seen an animation by me. But here’s the first animation I’ve made (It uses the Wave, center and flip plugins which you can access in the script executor, but someone could easily and tediously do this by hand too):

Try ignoring the probable trademark infringement.

The cool stuff being used here are first the ability to draw a rectangle, to multi-select, multi-copy, multi-paste and manual repeatition. After that, it’s multi-dragged down, and next frame then, the Ax.plugins\["center"]() plugin is called which obviously centers all of them (by the Y axis, preserving the X one). Then it goes to the next keyframe and using Ax.plugins["Sine"](100,0.01) (first arg defines multiplier for y axis and latter defines something I forgot, i think multiplier for the current X axis). Then the same function but with (100,0.02) and then Ax.plugins.flip() to make it look like the wave logo. Do some multi-select and set the color. After that cool stuff, it gets saved as text and opened in OnlyPaths Ajax Animator (which also demos a really cool feature called forwards-compatibility). It gets saved as a GIF and uploaded to my blog after that.

Wave Gadget API issues (again) 07 September 2009

So I’ve been having issues with the Wave Gadget API (again). This one is simple, Wave isn’t really real time. So right after doing a submitDelta, you can’t get() the data and expect to have the new one instantly.

It’s been giving me some problems, but I’m getting around it by using my awesome wave gadget library which will now magically apply the changes immediately so you can access it even before things actually happen.

Also, partially due to this, things would be far more useful if you could get the date of each insertion or deletion.

RSVGShim A new SVG Shim that renders to SVG and VML using Raphael 04 September 2009

For like an hour (so, not a really long time, and nothing near SVGWeb) or so, I was working on a new SVG shim similar to SVGWeb except that it renders to VML and SVG through Raphael rather than Flash (so now I can actually brag about not having any plugins :P). Using it is somewhat simpler than SVGWeb, except that you need some replacing, but no need for a server, htcs, etc. Plus, the file is only 3.2 kb uncompressed, only 740 bytes gzipped and YUI’d. Also, it only works with rectangles and ellipses but could be somewhat easily modified to support anything that raphael does. While probably it does not work on IE (as I use linux and have no way to test), it’s an interesting concept.

It only works with pages where a SVG element is added dynamically after the page is loaded (contrasting to SVGWeb which only allows a SVG element to be added in code).

var svgroot = rshimdoc.createElementNS(null, "svg"); //you coudl also just use normal createElement("svg"), but it must be rshimdoc instead of document

svgroot.setAttribute('height', 100);

(new RHTMLElement(html element)).appendChild(svgroot)


rshimdoc.getElementById(element id).appendChild(svgroot)

So it doesn’t deviate too much from the SVG spec (just replacing document with rsvgdoc should work). And in other news, I’m moving some of my smaller works to github, so this project is also going to be hosted on GitHub.

Totally failed mini-project svg-edit + svgweb 24 August 2009

So I tried to get svg-edit to work with svgweb’s flash shim (IE support). Sadly, it’s a total failure!

I only got far enough to get drawing lines, paths, polygons and rectangles working. Ellipses and text do not work. Selecting a shape shows the tracker, but if you drag it then it just flies over to (0,0) and dies. Partly because I didn’t spend any more than an hour getting the port to work, but the issues I’ve encountered is that svgweb doesn’t implement shape.getBBox() (but it did provide shape._getX(), shape._getY(), shape._getWidth(), and shape._getHeight() so it wasn’t hard to implement that). Then was that since it’s using a flash shim, the events which they hook on the container with jQuery only show the as the <embed> which the flash resides in. But I got a strange hack where you have 2 copies of the event listeners and kill the selects from the jQuery one, but doing that makes unselecting impossible.

Future plans on VectorEditor 23 August 2009

I don’t really care about VectorEditor, If someone finds it useful and wants to take over it, well, I’m not really updating it. Not many people are updating it, and once svgweb is mixed with svg-edit for 95% browser penetration and rotation works, it will be able to do everything VectorEditor does and more.

Sure it makes the project quite fragmented, a Richdraw version, an OnlyPaths version, a VectorEditor version, and now a svg-edit one. But each one will hopefully be mostly compatible with each other (mostlyish)

WebWorkers + Canvas + Glif + GIFEncoder = Client Side Animated Gif Generation 18 August 2009

With my super awesome PHP->JS compiler that I made for Freemovie/JS, I ported GIFEncoder (the second of 2 parts of the Ajax Animator which requires a server). So with this I’m really going to be “building on the shoulder’s of giants”, since all these individual components were made by other people, I’m just mixing them up in a somewhat creative manner.

Though since Glif only supports monochrome, and I’m not aware of any browser supporting canvas.toDataURL(“image/gif”).

So after this awesome experimentation and my system for merging multiple GIF images into a single animated gif which is yet to be tested for reasons I will detail later.

So I made it and it was cool, and then I added webworkers support, but then I realized the issue isn’t that you need webworkers, but that there was an infinite loop. Fixed it and then it works fine except for the fact that it doesn’t.

So if you want to rip it’s insides apart and try salvaging the disaster, go to

Freemovie/JS Pure Javascript SWF Generator 17 August 2009

I’m making a crude python script that translates PHP to JS rather hideously. It probably will not work on any other codebase. It was a script quickly hacked together to one purpose.

Freemovie is

FreeMovie is an SWF generator library written in PHP and ported to Ruby. FreeMovie can be used to develop Web and desktop aplications. Speaking of the Ruby port, I can’t find it. So if anyone finds it, I think it might be useful somewhere. Found it in the CVS, it’s really incomplete compared to the PHP version.

The machine translated code (Not entirely autogenerated, I wrote a line or two of it) is not too hideous, the tabbing is slightly off, but it’s at least mostly readable. It was a lot worse 2 hours ago (half of the lines had indentation, other without any, debugging comments everywhere saying useless and distracting things).

The translator is only 107 lines of (hideous code, though the language is beautiful, I guess if you loved JS enough, you could try running the program though skulpt) python (+ 20 or so in another file to change chr() to String.fromCharCode, etc). After that, it uses 6 PHP compatibility functions and 5 from the PHP.js project to cover the features that I’m too lazy to put in the compiler or are just not features in JS.

The above demo generates a flash image entirely client-side, though the resulting base64 encoded data is sent to be decoded on the server since you can’t load a SWF from a data-url. If someone finds out how, it would be cool to tell me.

A big issue though, is that for some odd reason half the shapes don’t work. The ones in the demo work, but all filled shapes, and the circles/arcs do not work.

Wave2 A higher level Wave Gadget State API 17 August 2009

I was working on a new little Wave State API update. It supports lists in the form of subkeys, and something very much like hierarchy and events on specific sub-nodes. This way you don’t have everything update (someone’s edits on frame 36 doesn’t matter if you’re on frame 42).

Everything is namespaced under a singleton global, wave2. It includes functions like

  • listen (execute a callback when something beginning with the prefix is changed)
  • ignore (un-listen),
  • keys (shortcut for wave.getState().getKeys()),
  • subkeys (get keys which begin with a certain prefix, important to the pseudo hierarchy),
  • set (submitdelta with first arg as name and second as value),
  • get (shortcut for wave.getState().get()
  • reset_gadget (a simple way to empty all the data in the store) And since it’s quite short, I’m putting it under public domain at

Ajax Animator Status 17 August 2009

It’s certainly hit a milestone with the current set of modifications, IMO, it’s now, finally, after 3 years of development (Actually, nothing happened the past year), what I had envisioned. The first parts of my April 7th, 2007 post on

I am working on a project to make an open-source browser based Flash Authoring system.

….. The idea is to make an animation on the site, save to the site’s server, and continue working on it later. Later being able to publish it and be sort of a YouTube for Flash Animations/Applications. Another aim of this project is to be next-gen software, sure there are about 10 open source multiplatform C++ based flash IDEs out there, but none of them truely [sic] represend [sic] the future of software, or true platform independence. Another interesting fact is that I didn’t know what YouTube was until Google bought it. But with the idea for a “YouTube for animations”, is totally possible with the new infrastructure provided by Google Wave. People can mark their waves containing the gadget as with:public, and people could search, comment, and improve animations (Though I was thinking initially on a more opensource software-like fork system, than a wiki type system which Wave is, and I’m not certain how this will work out with in the evils called the “real world” since now, Wave is still just a theory).

What has it done which makes me think it’s reached this milestone? Well, finally, I can make stick figures and animate them as they were meant to be animated. Having multiple layers with visibility now works, and now it supports most of the beloved and mostly efficient workflow of the Flash IDE - or at least to a beginner like I was, and still am.

Visible/Invisible Frames 15 August 2009

New feature, only available at this random fork of the codebase as of yet.

Visible/Not Visible

Since Silk doesn’t have an icon for eye_closed.png, everyone has to suffer by seeing my artwork! muah ha ha ha….

Working on interface for Animator/Wave 14 August 2009

Interface of Ajax Animator as Google Wave Gadget

The name field will be replaced with buttons, and zoom may or may not be scrapped. Since gadgets only take up a fraction of the page (usually) it’s designed with size in mind, which may help on other space-constrained devices like netbooks.

It may have a cool feature like VectorEditor’s demo where you can draw off the canvas area.

As for why the tabs are now on top and the timeline is on the bottom, there’s no reason, I just think that that layout is more aesthetic.

And I might name it something other than the ajax animator, something just like Animator or something

Ajax Animator Updates 14 August 2009

I’m going to soon upload the first update to the Ajax Animator in over a year. It is basically VectorEditor integration, and is not an actual update, but a fork of the project.

Ideally VectorEditor (as a far simpler and smaller project), is more stable and the Recovery systems which are quite prominent in the v0.20.x. So the recovery mechanisms are not implemented.

Feature wise, the version has very few new features. It has a few new features like fill opacity and line opacity, and showing multiple layers. But apart from that, there is almost nothing.

It is not format compatible with r13 (v0.20.x) of the format, so importing from those will not work.

VectorEditor on Wave 12 August 2009

So I don’t actually have wave yet, but for all 2 of you (likely less) who have used pygowave, an open source third party implementation of the wave protocol. So there was how I developed it, I read through the APIs and tested on pygowave. So what does VectorEditor do that svg-edit and… erm… svg-edit don’t do?

First, VectorEditor for wave is really really real time. Waaay more real time than svg-edit (not really). But VectorEdit (VectorWave might be a nice name.. I’m going to try using that name from now on in this post) transmits the data such as even while the shape is still being drawn, rotated, or moved (rotation needs work). Another nice feature is that the transitions are animated so things are even more seamless.

Another important feature is shape locking. So when someone selects a shape, it gets locked and can’t be edited by anyone else. If anyone tries, an alert box appears saying “Shape shape:5sdfwef98dfe3ssdf is locked by user”. svg-edit (the latter) doesn’t support moving things after they’re created so it doesn’t really matter then, and I’m quite certain the former doesn’t do any type of locking.

And lets not forget the likely most important, yet totally untested feature that seperates VectorEditor from the rest: IE support, which is inherent since it uses Raphael for rendering, but it may not be necessary since google may be making some shim-type system of hacking svg awesomeness onto IE and making the whole VectorEditor project useless.

So if you want to try it out, go to pygowave, sign up, create a wave and add the

Ajax Animator + Vector Editor 24 July 2009

So yesterday, I worked a little on making a VectorEditor based Ajax Animator. It actually took suprisingly little work. The mostly modular and abstracted design of the Ajax Animator means that only a few files need to be changed. Mainly those in the js/drawing directory. Though there was a bunch of references to Ax.canvas.renderer.removeAll() which needed to be changed.

Another cool feature in that version is the ability to have layers show up concurrently. So you can see things while drawing just as they would be in export.

However, it’s not ready, it’s very very buggy, Lines and Paths aren’t tweenable yet, and it’s missing all those nice features of OnlyPaths that VectorEditor inherently lacks.

But the one really nice feature I think is the multi select. You can easily select a group of things which comprise some sort of shape, and move it all across.

Ajax Animator History 12 July 2009

The Ajax Animator project started in early 2007, when I was in 6th grade. It was spawned by my interest in Flash in 2005 (because I liked expression by stickfigures and animation, and that it was one of the few ways to make applications or media for the Sony PSP) and my reluctance to pirate the Flash software after the trials expired. This intrest brought me to the liveswifers forum, which was engaging on a (as of yet and then) vaporware called OpenSwif. The idea for the Ajax Animator started when I was talking to a friend about a software program he used called Koolmoves. After making a forum post titled “Web 2.0 Flash IDE”, the project really started.

The development started based on RichDraw. It actually started out as RichDraw with a different layout. It was for a very long time built around the HTML/CSS/JS that was included in the RichDraw Demo. I never really modified RichDraw while using it, just building around it. I added a “timeline” (not at that time functional) which was just a dynamically generated table counting from 0-100. I added more stuff, looking for random cool scripts that made windows, dialogs, and color pickers.

Eventually, I found DHTML Goodies (mostly for it’s color picker widget), and then used it’s DHTML Suite to rewrite the entire application. After it was rewritten, It still was totally disfunctional. I added support for manual frame-by-frame animation and then Flash export thanks to freemovie. Around this time, I made a Google Code project for it and began using SVN.

After looking thorugh the DHTML Suite page, I found a link to another library called ExtJS. I ported from the DHTML Suite to ExtJS 1.0. Then I versioned it 1.0. I added some pretty neat features, like tweening, sharing, and more.

Later, when ExtJS 2.0 came out, I began developing the next version of the Ajax Animator. Also, realizing how incomplete the project was, the versioning scale was changed and it was now developing 0.20. It was a full rewrite from scratch. During development Ext 2.1 came out so development migrated to that version. This version polished things up a lot with newer development paradigms and a new vector drawing editor called OnlyPaths, contributed by josep_ssv. It had a new cross-platform JSON based serialized graphics format, and supported export to many different formats. One feature that was never ported to 0.2 was support for user accounts and server side storage.

Future updates to the Ajax Animator 12 April 2009

okay, so recently something really awesome happened. Google App Engine will now support Java. The great thing about this, it that decent flash export may happen because of that (yay!) and possibly actionscript later on.

Action Limit Exceeded 30 December 2008


Action Limit Exceeded

What happened?

You have performed the requested action too many times in a 24-hour time period. Or, you have performed the requested action too many times since the creation of your account.

We place limits on the number of actions that can be performed by each user in order to reduce the potential for abuse. We feel that we have set these limits high enough that legitimate use will very rarely reach them. Without these limits, a few abusive users could degrade the quality of this site for everyone.

Your options:

  • Wait 24 hours and then try this action again.
  • Ask another member of your project to perform the action for you.
  • Contact usfor further assistance.


Porting Ajax Animator to Titanium 17 December 2008

So the issue with Adobe AIR, is that there’s no SVG support, but I have a hunch that this might support SVG, as it’s not Adobe’s fork of Webkit, but hopefully the real one :)

It has tons of awesome components like WebKit, Chromium (hope it doesn’t have that rotate bug…), Gears, GTK+, jQuery, Appcelerator SDK, NSIS, Ruby.

But this will hopefully satisfy those wishes for a Desktop version.

Dojo? 01 November 2008

IE support is something really important to most users. especially with around 80% of the world still using it.

Raphael doesn’t seem that good, much worse than OnlyPaths SVG Renderer. But something that seems better is still Dojo.GFX

It supports Circles, Ellipses, Groups, Images, Lines, Draggable things, Paths, Points, Polylines, Rectangles, Text, Fonts, etc. and renders into VML, SVG and Silverlight.

It’s size isn’t too big either and there are CDNs for it. We could also learn from xDraw to design our editor.

Ajax Animator Thoughts 25 October 2008

I’ve set some tiny goals for Ajax Animator 0.21/0.22/0.23/0.24/0.25. I’m not really good with version numbers.

0.21 is mostly to work on the collaborative, online, web 2.0 aspect of it. Enabling collaboration is important, and I’m a huge supporter of User Created content (virtually all my projects are open source, and they include some entirely user-created things like my MMORPG, Project Wikify, and a few others). At one point, since the old ajax animator (not anymore) would keep logs of everything previewed (as we needed to convert it to flash to preview). I would enjoy people trying out how things were like. That was in the day where there were to tools: rectangles and sticks, and the lines didn’t tween well. Color picking was unnecessarily complicated, the tweening engine crashed every minute, and couldn’t do anything, etc. Since the 0.2 rewrite, things are much better, but I still miss having those user-management features.

If you didn’t know that, User Management/Sharing has been in the ajax animator for a while. It was frequently added, removed, mutilated, upgraded, etc. I think it was there since the DHTML Goodies days (0.08?). It got removed for a while, got added again, removed, rewritten, and now removed again. I look forward to adding it again.

I guess much of it is already there. The login should look pretty much the same as the old one, but with the whole login thing replaced with a single OpenID box and a login button. I’m not exactly sure what to do after this. I think there should be a little profile box that replaces the login panel. I’m debating whether the profile should house a list of your saved animations, or if it should be nested into that Animation browser (that actually works!). I’m leaning towards the latter. The profile may house a link to your folder in the animation directory, a button to save your edits (as with File->Save->Webserver). Etc.

With that, it would include some form of user management system. I’ve almost completely settled on OpenID because of it’s flexibility, futuristicity, freaking-awesomeness (getting a bit overboard…). I’ve just been surfing the web (Wikipedia stuff) and I’m increasingly interested in OpenID, as it seems much more “ajax-friendly” than I previously thought.

Some time, i’d like to switch to a more scalable app-engine oriented system (it’s already serving up static JS now). I’ll use my server at more (Java-Enabled), so there can finally be decent flash export :)

One thing that i’d really like, that’s really probably painful, is to better support IE. There’s no problem with IE support in the general components of the Ajax Animator (Tweening/UI/Save/Format/Abstraction Layer/etc), but rendering isn’t very good. I’d like for it to be better. OnlyPaths is already great, but IE support is big for it to become mainstream. I’d like it for use in a more educational and amature(ish) setting, where people have the most use for free/opensource/easy-to-run apps. In education, many people are still using IE, and that’s a big problem.

I’ve been looking into other renderers for the future of the Ajax Animator to run on. For the forseeable future, the editor will be OnlyPaths, because it is the only one that really fits the needs of the project. But it’s built on a less-clean, prototype-like (non-namespaced) foundation, and isn’t built exactly as it should. It’s not up to me, but I think that OnlyPaths should be an editor, rather than a renderer, or at least the renderer and the editor to have very visible lines between. Right now, much of the editor interface is in the renderer. That means a lot of unnecesary work. The addTracker function is currently in the renderer, this is completely the wrong thing. It was fine in the days when it was Richdraw and the tracker was just a blue square, but that’s not scalable. On this trend, you would need 2 copies of essentially the same code (VML/SVG) for the tracker/etc. I’d much prefer to have a interactive-less renderer and addTracker function in the editor, where all the actions are calls to the drawing API. Either Onlypaths has to get a better VML renderer, or we have to switch rendering engines to something like Dojo.GFX or Raphael and port the editor over to the new renderers. I like the current OnlyPaths one a lot. It’s been developed side-by-side with the Ajax Animator, and is very well integrated. I dont like Dojo.GFX too much, because it’s dojo-dependencies, but it’s a very solid and stable framework. And Raphael isn’t as powerful as the current OnlyPaths engine yet.

Note To Self 20 August 2008

Ajax animator bug: Copy/Paste does not regenerate shape UUID

Login System 16 August 2008

What kind of login system do you want? Openid? Google? Custom-Ajax Animator user-management code (like in previous versions)?

VectorEditor 10 August 2008

I was experiementing with using another framework for Vector editing. So I used the relatively new Raphael framework. I wanted to use dojo.gfx, but I still don’t know how to use it without the dojo dependency. Raphael is not as powerful as dojo.gfx, or even OnlyPaths… so, it needs work.

It has many of the features in OnlyPaths, but it keeps the core showTracker() and such functions in the main script, not in the renderer. That allows the system to be simpler, and more easily cross-platform.

I’m not currently using cross-platform event handling. so it only works in Firefox for now, but converting is easy.

Refresh your cache 07 August 2008

I reverted Ext 2.2 to Ext 2.1, so refresh your cache.

Ext 2.2 07 August 2008

I did some updating yesterday, and along with it was the supposedly fully compatible Ext 2.2 update. And it wasn’t. It completely broke onlypaths :( I’m reverting now.

IE works in development version 06 August 2008

I made a mistake in the ads script that made IE unhappy (along with some other stuff). IE works in the development unstable version, which will be merged into the stable as 0.20 Beta RC2 (Aka 0.20.01)

As you can see, I’m not familiar with software versioning….

Why no demos? 06 August 2008

I’m sure quite a few of you are wondering why there aren’t any good demos of what the Ajax Animator can do. The answer is simple: I can’t draw. Interesting eh? I actually started this project so I could do stick figure animations better. Its pretty sad, I know. And the most sad part is: the ajax animator is really glitchy with lines :( !!!

The good news, is that some user-made FAQ/Manual/Tutorial stuff may be arriving tomorrow.

Ajax Animator 0.20.01 Soon 05 August 2008

I’m going to release 0.20.01 soon, which will get IE to load properly, and fix some general bugs.

Ajax Animator 0.20 Browser Support 05 August 2008

It supports Firefox 1.5 to Firefox 3.0, Opera 9+ (hopefully), Safari 3+, and it was supposed to support IE, but for some reason, the compilier makes IE fail.

Ajax Animator 0.21 Early Fork 04 August 2008

Okay, I’ve started working on Ajax Animator 0.21, right now, its just a different version with one bug fix. btw, its the one where you can’t reopen the About dialog after it’s been opened and closed (with the little X, not the “close” button)

BTW, it’s at

EDIT Okay, I fixed another bug where the tip of the day won’t open again after closed like the about window one. I also made it so you can minimize the tips window.

I also fixed the bug reported by Kermeros where Undo works improperly after File->New

JavaFX + Ajax 04 August 2008

I just noticed something. JavaFX has all the letters in Ajax. so you just switch around the J and the A (ajvafx) take out the V and the F (ajax). freaky huh? I wonder if that was intended…

0.21 Bugfixes 04 August 2008

I fixed this bug where if you drew a square, went to a blank frame, moved it, and then went to a blank frame (do nothing), and go back to a tween (between first and last frame), the tween engine would crash, and the animation would be destroyed. Fixed by wrapping SVGRenderer’s remove function in a try..catch loop.

I also split diff_core into diff_attr which allows you to diff only a single attribute at a time. I also added a diff_list function which would make it easier to implement an export format to a tweening engine like that of JavaFX and Silverlight.

On that note, I added fake support for JavaFX. so you now see the toolbar icon, and I added the script for javafx though there’s nothing in it.

new features 03 August 2008

Okay, so I’m polishing the app alot today. Right now, I’m setting the app up for a release some time this week.

I added framerate support to the Ajax Animator’s Format. I also added some messages for Help->Bugs, Help->Comments, and I renamed Help->Donate to Help->Contribute.

Help->Manual shows a page that says “Manual Currently Unavailable” and Help->FAQ actually shows a working page (OMG!)

Help->About now reports that the Ajax Animator is at “Beta RC1” Stability, and its no longer a “testing” release.

Please test things out and report bugs if you can :)

Ajax Animator 0.20 Beta RC1 Released 03 August 2008

I’m pleased to release the latest version of the Ajax Animator, 0.2. This version has been a complete rewrite of the application down to it’s core, not a single like of code copied from the old (0.14.7) release. It also happens to be the most advanced and complete release to date, with full multi-layer support, a greatly expanded toolbox, complete undo history, a shared clip-art library, a completely redesigned UI, and much more.

Lets start from when you open the app. The application speed has greatly improved, the 0.14.7 release takes ~9.5 seconds to load, 0.2 takes a mere 4.5 seconds, more than half the time. On the top toolbar, the buttons are relocated and restylized. Over at the file button, you see everything has new gorgeous icons intuitively organizing the New, Open, and Save options, where you can use the powerful new JSON based file format. Below that, you see a new Publish menu, where you can export to several formats like Adobe Flash, Processing (language), Microsoft Silverlight (XAML), and Animated GIFs.

Skipping over to the View meu, you see that there are 17 different UI themes to choose from. An unprescedented degree of customizability. And over at the Help menu, there is more useful content. A working FAQ, helpful Tip Of the Day, About page, and a list of keyboard shortcuts.

Of course the most important and powerful change in this version is the inclusion of the OnlyPaths editor. A new, powerful Vector graphics editor. The new editor allows you to draw not only the standard rectangles, ellipses, and lines, but also Text, Polygons, Freeform Paths, Images and more. You can now Rotate, Resize, and move shapes around.

The Timeline has also been reworked. The new archetecture allows the deletion of layers, expansion of tweens, and more. The Tweening engine is vastly superior, with much fewer bugs than the old one, though the new one certainly does much more and gets much more room to screw up.

A new Animations tab allows you to view and improve on public animations them. A new Properties panel allows you to adjust the canvas size and animation framerate along with the text content and image URL.

Its available here, at

Do not go to testing site 03 August 2008

I’m changing lots of things to prepare for the new 0.2 release which will be soon. When it is done, the new url will be


Ajax Animator 0.2 Beta *almost* RC1 02 August 2008

Okay, sorta a weird name for a release right? Beta and Release Canidate? Well, its Web 2.0/Ajax so really, anything can happen. I sure hope this doesn’t spark an onsalought of Stable Beta RC1 Pre-Alpha Unstable Full releases.

But… yeah. Tonight I added two very important features stemming from Properties.

the first is properties itself (duh). It allows you to change canvas Width, Height, and the animation framerate. Stemming from this, is the new feature in the Ajax Animator Format (ALEON, AXON, AXION, AJSON, AXFF, AFF or whatever you want to call it), you guessed it: Width/Height. Oh crap. I just remembered that it doesn’t support framerate yet. CRAP! oh. hmm. i’ll just post it anyway and continue from here when I get that feature done.

Almost There! 01 August 2008

We’re almost at the release of 0.2, though it has been scaled down a bit. Real usability probably won’t come until 0.21. Right now, 0.2 basically only lacks one feature, being the whole user-management system.

The only features that are really left, are some final touches and the Properties panel.

new IE not supported error 29 July 2008

This time I think my tone is a bit more acceptable (no more “Error: YOUR BROWSER SUCKS!” stuff)

Currently, support for Microsoft Internet Explorer (6/7/8) are only experimental. 
Some features do not work properly such as animation and playback of some specific animations. 
The issues are being resolved, but in the mean time, you may try out another browser such as 
<a href=''>Firefox</a>, 
<a href=''>Opera</a>, or 
<a href=''>Safari</a>.

IE somewhat works 29 July 2008

I just discovered the source of virtually all the IE problems: the non functional function. I managed to implement part of it, and magically, IE works a bit. Its nto very stable, and the tween engine gets weird errors all the time.

Bug Fixes 29 July 2008

Okay, so in IE you can now actually draw (wow!) though tweening doesn’t work yet :(

I fixed a bug when in Firefox 2 where the preview tooltips end up to be huge for no reason.

Tip Of The Day 28 July 2008

The Tip Of The Day box pops up now every time you visit the application.

Build 400 28 July 2008

Its now at build 400!

Busy. 27 July 2008

I’ve been somewhat busy in the last few days, I’m using a new computer now, its quite a bit faster, but doesn’t do everything that the old computer did, and I’m doing a lot for it to catch up.

its also a fresh start anyway, so I guess I can try out new tools/etc (still using the ol eclipse though!).

Minor Updates 27 July 2008

Now, i’m still trying to figure what to do, and now my strategy is simply polishing it. My stragegy is basically getting every feature that a normal user can get to in 2 clicks or less to work. Its somewhat close. I added some “feature(s) not available” message boxes, and made some parts a bit more serious.

Color Tweening 22 July 2008

Well, I added josep_ssv’s color tweening system. I modified it a bit, but it should work fine.

Flash Export 21 July 2008

Okay, i’ve done it. You can now export to flash. But the problem now is that I’m still using the uber limited freemovie library, which is both outdated and incapable of anything besides the rectangles and lines.

For now, I haven’t installed the server files yet so it wont work until I do, but by the time you read this, I may have already done it.

Export to Animated GIF 21 July 2008

here’s an important feature, you can now fully export your animations to raster animated gifs. Its easy, and suprisingly good.

Export to Silverlight 20 July 2008

You can export your animations to silverlight, almost flawlessly (though i’m on a linux box so I never tested them, they’re hopefully close to the Silverlight 1.0 specs).

The only problem, is that I have no idea how to put an animation in silverlight. Right now, it’ll squish every frame’s data together. into a merged display of every frame.

Exporting to Processing 19 July 2008

I’m working on the ability to export animations into various formats. Its close to usable at exporting to the Processing language. I’ve only tested running the output in John Resig’s Processing.js implementation so far. The output is very crude.

I will owrk on Flash and Silverlight export soon.

Standalone Animation Player 16 July 2008

I’ve created an animation player. It works with all ajax animator animations, and when compressed is a mere 3kb (which I believe is lower than OnlyPath Viewer).

It is built using the very same sources of the Ajax Animator, the whole purpose of all those *_core.js files. It uses the files Ext.ux.clone.js, op_view.js, svgrenderer_mini.js, vmlrenderer_mini.js, wrapper_core.js, view_wrapper.js, and tween_core.js.

svgrenderer_mini.js when compressed is just over 1.1kb and same is for vmlrenderer_mini.js

I’m on my linux development environment now, so I haven’t tested it in IE, but it will 100% fail, as the rendering engines is not detected and it uses SVGRenderer always.

See it in action here:

Improved Tweening Engine Stability 13 July 2008

as you probably know, there is a new tweening engine being used. This new one got rid of all the random anomaly checks that report when random errors occur. The error checks are now run more verbosely than eva!

Resize Grid, Improved Select, Delete Selection/Clear All 07 June 2008

You can now resize the grid through the same GUI as the line width: A simple slider. Now when you select a shape, the draw-panel adjusts itself accordingly to the colors and other values. When you leave select mode, it automatically unselects the space. Special tools like Delete Selection and Clear All now work.

New loading screen + HTML Strict Doctype 07 June 2008

The application is now HTML (I just added a doctype) and I changed the loading screen almost completely stolen from the Ext Samples page. (HTML Strict sort of broke the other one). I think one day, it’ll be XHTML. but now it’s just HTML Strict. Now it’s more descriptive. Saying “Loading UI…” and “Initializing…” rather than a simple “loading”. Its one of the ways to make it feel to load faster.

Status Fixing the compiler problem 07 June 2008

I’ve located part of the problem. If I remove the reference to VMLRenderer.js, it suddenly starts working again. But how do I include it and get it to work still. I’m investigating.


Build 117 fixes the problem completely. it was simply because of mis-arrangement of the files. It was originally.

<script type=”text/javascript” src=”../js/drawing/onlypaths.js”></script>

  <script type=“text/javascript” src=“../js/drawing/wrapper.js”></script> 
  <script type=“text/javascript” src=“../js/drawing/svgrenderer.js”></script>
  <script type=“text/javascript” src=“../js/drawing/vmlrenderer.js”></script>

for some reason, this messed up the compilier. I changed it to.

  <script type=”text/javascript” src=”../js/drawing/onlypaths.js”></script>
  <script type=“text/javascript” src=“../js/drawing/svgrenderer.js”></script>
  <script type=“text/javascript” src=“../js/drawing/vmlrenderer.js”></script>
  <script type=“text/javascript” src=“../js/drawing/wrapper.js”></script>

and now it works fine :) 

Sourceforge 29 May 2008

I’ve gotten a sourceforge page for the project: and the site is at where you can browse the latest source code. I’ll probably still use Google Code, and i’ll probably also use Google App Engine and sourceforge together.

And that Google Ajax Libraries thing looks pretty nice. Can’t wait till it supports Ext.

Build 99 27 May 2008

Its now at Build 99. I feel that not much more can be done without the critical OnlyPaths component. I don’t have anything ready yet. An Ext port of OnlyPaths is underway, but it is not necessarily very stable, and some critical features (cross-platform drawing API) is not completed yet.

I rolled back one thing yesterday: the Advanced Color-Picker tool. They will be added again later, but I don’t want to aim too high for the initial 0.20 release, or else it may never get released. The standard (albeit small) color picking system is fine for now. It also is quite big, so not yet.

IE and Opera should work flawlessly now (Aside from browser-limitations). Most problems in the app are caused by those annoying commas in JSON errors (IE/Opera don’t like it when its {blah:stuff,super:happy,})

Today's Updates 26 May 2008

It’s still 11:35 AM here, so this is likely not all that will be here today. But there are some great new features today. Renaming the layers through the GUI will actually rename layers in the back-end too. There is a combobox for the zoom sizes in both the canvas and preview tabs. There is now a slider for adjusting line width on the panel.

Today's Updates III 26 May 2008

I added the beginnings of the Users system. There is an accordian panel for switching between Register and Login. The Login panel has the standard Username and Password (labeled User/Pass). The Registration panel is the same, with 2 instances of “Pass”. As every other panel in the app, there are nice little silk icons that accompany them.

Today's Updates II 26 May 2008

As I mentioned earlier, more would happen today. I’ve just made an update. I updated the Update system to also compile (it doesn’t compress anything yet, it really doesn’t need to) CSS files. This should speed up the application a bit, and should also make it easier when updating some smaller things. As with that, it will also starting from build 83, create release archives of the CSS files. The compiler mechanism has changed a bit too, but that’s not really important.

The most visible additions, is the embedded Color Dialog. If you look at the title, you’ll find a Steve Jobs reference. Right below the huge drawing tools list (what? is it like 2 times that of the old version?) there is a Line Width slider (this is indirectly inspired by OnlyPath’s Mondrian-style color picker). it also embeds the Color Field plugin, so if you press the little button on the side, a little color palette shows up. Ideally, this will enhance user’s efficiency and be less confusing than the old one.

I don’t know if I can make a “Today’s Updates III” :P

[EDIT] BTW, the page is located at

Updates Today 06 May 2008

Now, its at Ajax Animator Build 48. It has an improved “Properties” menu. The Drawing icons have been updated (to give you a taste of features of OnlyPaths that will be added). Notice that there are some features left out. Zoom will be done via the zoom button on the canvas toolbar, and panning won’t be necessary. I’m curious of whether I should or should not include the z-index ordering. Simply, the whole purpose of layers is that. and Layers seem much more managable, visible, and such.

Speaking of layers, the Layer browser part of the timeline has been added. It is currently just a simple Editor Grid (so you can inline edit the label!). I’m going to add for the ability to remove/edit layers via a nice icon.

I have also almost sucessfully ported OnlyPaths to ExtJS. it turns out, that all prototype code is in richdraw.js, and it is as simple as replacing prototype code with Extjs counterparts.

such as this.blahlistener = this.blah.bindAsListener(this) Event.observe(this.explosion, “mouseexplode”, this.blahlistener)

becomes Ext.get(this.explosion).on(“mouseexplode”,this.blah,this);

Often, Ext code is simpler, and more consise, but other times it is not so.

Small Updates 05 May 2008

today was just a few fixes, a pseudo-key-guide thing ported from the current stable one, and some minor updates. I included the Ext.ux.ColorPicker, and I guess i’ll work on porting OnlyPaths to Ext soon (it currently uses Prototype). I’m probably not going to include Prototype because OnlyPaths is a much (~11x) larger project than RichDraw, and therefore, it is mainly out of trying to improve size. (the project is currently ~20kb, but with onlypaths, will become ~100kb, plus ExtJS, will be ~1mb)

I might set up a blag and a separate site for the Ajax Animator (based off my alpha site from last release). I’m thinking of using WordPress/PHPBB but idk

Today's (Tiny) Updates 30 April 2008

Really, nothing much. There are some corrections to the About page, and some more icons. There is also a non-working Bug-Reporting tool.

I will try adding OnlyPaths soon, but it still needs much work. (and it’s Build 40 now!!!)

New Features coming in Ajax Animator 0.15 (aka 1.5, read to find out why) 02 December 2007

Okay, so one day i felt crazy and changed everything by 1 decimal place because i don’t want this to seem misleadingly good. I mean, if it hits a 1.0 release, then some people would think it’s almost as good as Flash 1 (futuresplash animator) which it it isn’t even near yet.

So it should be 1.5 but now it’s 0.15 :D

Read more to find out the whole list, a summary of it would be axml2, UI polishing, save space, nicer code (but still hideous), css, users, tweening, finish partially completed ideas etc.

What’s done so far

  • Redesigned Register UI
  • Save Lots of code
  • New Save/Open file format (around 5x faster, and 10 times smaller)
  • Relocating stuff
  • interactive tutorials
  • Backwards Compat Mode
  • for the first time it’s gonna be a legitimate GPLv2 project (I’m gonna include the gpl.txt file for once)
  • replaced wz_tooltips with native ext.js ones
  • Change save file to computer architecture
  • change organization of Save/Open buttons in file menu (submenus)
  • optimized stuff
  • fixed bugs
  • No more save/open window (now, single-purpose dialog alerts, much better)
  • Progress bars
  • User friendly upload error message (yay!)
  • relocate css
  • delete lot’s of stuff from user-management
  • REAL SUPPORT FOR LINES/ELLIPSES, lines didn’t work for tweening, ellipses didn’t work for tweening or flash, and ALL suffered from a programming error causing line-widths to be messed up.
  • FastMode …and more to come

New File Format 17 November 2007

I’m working on a better save/preview file format, even merging the save/preview formats into one.

it’s just a string seperated by “;;” before it, is a standard JSON Array. After, is the standard XML compiler stuff. the json has info like framerate,height,width,current frame, tweens, keyframes, animation length, comments?, rating?, size? etc.

the javascript save/load implementation is so far done.

Progress Report 22 October 2007

I’ve not been releasing anything for a while, for several reasons:

1. I’m converting everything to the Ext UI (from textareas, tables, etc. to Ext grids, form fields) 2. I’m completely rewriting the timeline. including a host of new features much for speed. (several TIMES faster) mainly becuase it generates only 300 frames per layer by default, instead of 500, but automatically adds new frames DYNAMICALLY when more is needed. But the rewrite is sorta unstable 3. Tons of UI upgrades. A short list of changes from the top of my head are, a new login stystem (lot’s of fading effects) My Animations; list, faster animation loading. The user animation browser is completely changed-with stuff like Rating animations and comments coming. 4. Sorta goes in UI upgrades, is a new loading splash screen. It has a progress bar, showing status. And CSS is dynamically added, and loads from either the local server, or google code’s subversion (faster). 5. Cross Domain Ajax. The current ajax implementation only allows you to generate flash animations if you are on a php server with all the libraries/files installed. And sometimes you go to it from a proxy or google code beta or something. If that happens, you will not have any access to creating flash animations. So, soon it will curcumvent this restriction, by using a script tag hack, to load the animations from the server. Though the current ajax implementation will still be used for larger animations. And i might revive animation compression for this purpose. 6. Upgrading to Ext 2.0, this is not really happening NOW, but is being actively thought of. It’s not really a “painless” upgrade, with lot’s of stuff to modify/rewrite. 7. Everything has two options. One is to load from subversion, or the local server. It’s better if you load it from subversion, if you are mirroring it, or if your server is slow. And in many cases it’s really fast, and automatically gzip encodes the stuff. Great isnt it? so it has an option of loading all* (okay, most…) images and CSS from google code.

8. And even more stuff……

Some Progress 01 October 2007

Well, i’m adding lot’s of new stuff (as always)

New things: Improved UI (no seriously) Now supports tweening of lines (should have been there since the start) All code is loaded on init (no ajax unless needed)

New Features 29 September 2007

I’m just doing some size reduction, and ui improvement now. There has been some preliminary support for IE, and also a rewrite of the tweening engine to support lines.

New Alpha 25 May 2007

Try out the unstable version at

By unstable, I mean it has lots of features that will not work- Not, however, that it will have a higher of a chance of crashing your web browser than anything else on the internet.

Ajax Animator 20 May 2007

Ajax Animator
Ajax Animator

Gmail revolutionized email by offering a web based equivalent to Outlook and Thunderbird, except this was completely web based. No more Installing. So did Google Docs and Spreadsheets, or Zoho office, or etc, they had entirely free and web based clones of Microsoft Office or OpenOffice. Or Microsoft Windows, then there is Linux and now there is desktoptwo eyeos and youos. I think of it as a development cycle, somebody makes something that is expensive, then something free, then something entirely Web based. Now, what about Flash. According to adobe, 97% of all people who browse the Internet have flash player installed. By far larger than the amount of people who have outlook, thunder bird, Microsoft office, or Openoffice installed. Flash also accounts for a large percent of So why isn’t there a freeware open source replacement to this $400 software? There are though, UIRA, F4L, QFlash, KDSFlash, and more, but they are early in development. So when is the third generation web 2.0 equivalent for animation software coming? This is what I want to develop. This is a project to make an open-source browser based Flash Authoring system.

Please post comments in the shout box.