Is is possible to create a handwriting simulation animation using Hype?


#1

Hi. Is it possible to create a handwriting simulation animation using Hype? An example is available at this website – http://stroke-order.learningweb.moe.edu.tw/teaching.do

If you type in a Chinese character (such as 大), it shows you a flash animation (top left tab plays the animation but top right tab lets you practice it). The HTML embed code is included below. Is it possible to create something like this with Hype?

Thank you so much!

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="StrokeExercisePanel" width="350" height="471" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">

(Jonathan Deutsch) #2

Hype doesn’t have any built-in functionality to decompose characters and then simulate their drawing. You could do the decomposition yourself in a graphics editor and then bring in each stroke and animate them coming in via opacity or by using groups to unmask/reveal, though this might not exactly be the desired effect.

The code example you linked to appears to be a specific flash object; you can always embed this via HTML Widget or by editing the Inner HTML of an element, if you just want to include that as-is.


(drewbullen) #3

Here is a simple way to animate handwriting that can be done natively in HYPE (i.e. no external libraries are required).

chalkboardWritingExample.hype.zip (2.4 MB)


(Greg) #4

I like that Drew, nicely done.


#5

This is great, but the only problem is that for Chinese characters, the strokes cross over each other a lot. I guess it’s possible to create multiple mask layers.


#6

I think I understand how to create the animation part.

The other part of this flash that I really like is the right tab – where you can write on a whiteboard and practice writing the word. It can be configured to automatically give you the hint of the next stroke. I saw the fingerprinting hype example here (http://cl.ly/0a0d1Y0m360p) that’s quite helpful for the basic whiteboard.

Can it be modified in Hype or HTML5 to detect the user’s stroke order or to give hints on the next stroke?


(Jonathan Deutsch) #7

Anything is possible of course, but you’d need to use a lot of JavaScript to do that.


(Lucky) #8

Even in flash you would need to use a lot of code to predict patterns user does. Look at vivus Js for self drawing text but if you want prediction there will be a lot of coding and math involved unless someones made a js library.