I took on this little project at my sister's suggestion given that she is an Occupational Therapist and also because it gave me a chance to become more proficient with Expression Blend. I am far from being a graphic designer or just designer in any shape or form and I hope to improve on what I have here in version 2.0 as I already have some ideas.
This program is basically to help kids, especially autistic kids, learn how to write the letters of the alphabet. It is designed to be interactive, so each button click will trigger an animation which follows a ball that guides the user on how to form the particular letter clicked. I used Arial font for this initial project and will look into others on the next round.
Expression Blend was used heavily here and very little code was written. Actually the only code is for the menu items, to trigger the About box and to exit the program from the menu. Everything else was done in Blend.
First off, I made the main window a fixed size (1022 x 660) to accommodate the letters and it cannot be resized, or else the animation will get messed up. This is something I intend to address in the next iteration.
![[2009.01.06].01.learnwriting.mainWindow](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim40m5qSyoG6lqdHXw5tjGhQBue9oFQLg5a63DnN-mJjCP7iU2svPVV8HRoLvXRNQBsioaX_4PdI0R1nJmM6rZqnXBtecDQjhUNwv6lTmipbEHvZ0jd8MvopKrP1Yz5uIDbzVqDAn2dxSt/s1600-h/%5B2009.01.06%5D.01.learnwriting.mainWindow%5B2%5D.png "[2009.01.06].01.learnwriting.mainWindow") |
| Fig.1 LearnWriting main window |
The buttons are template driven to be custom to this application and there are MouseIn and MouseOut animations. Two templates were used for upper case and lower case, where the animation is just a different color. The Click event also uses template bindings to change the look of the buttons.
![[2009.01.06].02.mousein](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIrN8cMGw6XPqMALfG418CsGNjiIvXVWo3WNtX1Pr1OC8AD9NlRdkjZE4iCFdam9ejD0lwBKYe9dWvggbLX8Jgzc6Qrn78ssr25hT3qqY012XT3lF28m7yOC_GdAeIQ-hkZ7fBv98o9UuW/s1600-h/%5B2009.01.06%5D.02.mousein%5B2%5D.png "[2009.01.06].02.mousein") |
| Fig.2 MouseIn animations |
Once a button is clicked, a little yellow ball traces the shape of the letter and the letter color will change from black to red back to black.
![[2009.01.06].03.letter.tracing](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsbMBKFG1D8Dlbj5OMBQoZqsm94m-OMhvTUfWG5CRseDCna6F-rpGAs_ABJ-NsJYyA1o4KgKx4i_uL5P7Icin0WV_6IZA66Hh1XmUwMfMtXgaANuEGVL7rI1item70TBgzucRJDNv_ewoQ/s1600-h/%5B2009.01.06%5D.03.letter.tracing%5B2%5D.png "[2009.01.06].03.letter.tracing") |
| Fig.4 Letter tracing |
NOTE: You may need to download and install the Microsoft .NET 3.0 or 3.5 to get this program to work. Here are links to each version (I'd recommend you get the latest, which as of this writing is 3.5 SP1):
[1] Microsoft .NET Framework 3.0 Redistributable Package
[2] Microsoft .NET Framework 3.5 SP1 Full Install Package
Technologies used: .NET 3.5 SP1, Expression Blend 2 SP1, Visual Studio 2008 SP1, WPF 3.5 SP1
Download Links:
Get the LearnToWrite executable (19Kb, zip)Get the LearnWriting source files (556Kb, zip)
2 comments:
Visually good, Sparky, but I think that if you were to completely blank out the black letter first and then have it be shown as the yellow dot is drawing it, it may help the kids by seeing it actually being drawn, or another idea along the same lines would be to just dim it way down before tracing it with the yellow dot. Wonderful idea though! Works good too.....
Hey thanks, actually I will post the 2nd version very soon. I think I have incorporated your suggestion in this version, what will happen is that you will see the letter, and as the ball traces it out, each section is highlighted. Just give me a few days to get it together. Thanks again :-)
Post a Comment