Featured Item - jQuery Handwriting animation tool with image decoration on the symbols.
CodeCanyon profile || NEW DEMO BETA || email@example.com
Few years ago, when I was actively developing Flash content, I started to work on the idea of handwriting tool. I soon came up to the conclusion, that in order to achieve that I will have to prepare the information for each symbol in series of drawing commands. I used the Flash ability to draw quadratic curves. When you have a curve with start, end and control point, it is not that hard to divide it in equal parts and then draw it with Actionscript frame by frame. Having that figured out, I decided to convert each symbol to series of curves, some of them to be actually drawing the symbol itself and some of them to just move the pencil, without drawing the curve.
I chose a font for my first tests. I did not want fat letters, with different stroke width, because I intended to only draw letters with consistent stroke width. I found Scriptina. I created a small tool in Flash, which allowed me to draw quadratic curves over a selected symbol and then getting the coordinates of start, end and control point for each curve. It was a painfully slow process, but I managed to write down the coordinates for 85 symbols from Scriptina font, and then 85 more for a Verdana like font. The information is stored in XML files.
Some time later on, I created a more complex tool in Flash, so I can more easily draw curves and get their coordinates in order to add symbols to existing sets, or create entirely new sets.
I decided to learn more about the canvas object for HTML5. I created the code that opens the XML file and gets the curves information. Then I managed to draw a letter, then a word. Then I coded the animation. I really wanted to add some improvements to the Flash version, so I coded some image decoration of the curves.
Every curve has evenly distributed images over it, which can be static, or can gradually zoom in and rotate. That added greatly to the effect, so I decided to go further and added support for animation sequences. I created a blooming flower animation in 20 frames and exported these to PNG files. Then the task was to distribute the images over the curves, but consider which frame to show, in order to animate the whole blooming sequence in every spot. When I was ready with the cool stuff, I went back to some more basic features like fonts-size, font-weight, text-alignment.
I achieved change in font size by adding a scale parameter. Every point in each curve has its x and y coordinates, which can be multiplied by the scale factor to achieve smaller or larger size of symbols. The user needs to test few scale values to achieve the size they want. The weight was easy with setting the stroke width of the animated curves. Alignment was a bit tricky – I coded it along with the multi line support. Basically I find the width of all symbols on each line animated by the handwriting tool. Then I offset the symbols to the left or right, based on the alignment setting.
The plugin I wrote achieved the goals I have. It supports all the options that give the tool a very flexible behavior, it also has public methods to pause and play the animation and it has ability to define a function to execute when the tool finishes the handwriting animation.
My next goal is to create a WordPress plugin. Also I want to create more fonts, with more symbols. I want to optimize my font XML filesize.
Please feel free to take a look at my handwriting tools. If you have any questions you can send me an email to firstname.lastname@example.org, or use the form from my profile page - CodeCanyon.
copyright © 2013 Digitalplant