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?
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.
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.
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?
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.
Hi Drew, just found this example which really is very very good. I'm aware I'm a bit out of date but do you have a tutorial explaining the steps you took to take to create this?
Best regards Geoff
