Digitalplant

Featured Item - jQuery Handwriting animation tool with image decoration on the symbols.

CodeCanyon profile || NEW DEMO BETA || support@digitalplant.eu

Hi guys. I am a web developer with interest in rich web content. I spent ten years in the field of Flash Actionscript programming. Recently I moved to Javascript and started to create tools, which hopefully will substitute the ones I did in Flash. My goal is to create a portfolio with jQuery and WordPress plugins and here is my first item - jQuery Handwriting tool.


Featured Item

jQuery Handwriting

Is there handwriting like effect plugin in javascript?

Yes. There is. Here is a link to extensive demo of the tool. You can find the documentation here. If you like the effect you can purchase it from here – jQuery Handwriting.

How does it work?

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.

What does it draw actually?

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.

First version done in Flash.

I managed to create the handwriting tool in Flash and it was able to draw multi line text. Sadly some bad times for Flash came, so I had to become Javascript programmer, in order to develop rich Web content.

Next version done in Javascript

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.

Image decoration for the handwriting tool

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.

Size, weight and 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.

All that was a good effort in the right direction, but I decided to create a jQuery plugin from my Javascript code, in order to easily show multiple instances in one page with different settings, and to allow an easy integration in existing projects.

jQuery Handwriting version

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.

WordPress Plugin

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.

Support

Please feel free to take a look at my handwriting tools. If you have any questions you can send me an email to support@digitalplant.eu, or use the form from my profile page - CodeCanyon.


copyright © 2013 Digitalplant