[2009.02.14] Learn To Write in WPF v2.0

Requirements:
Before getting into this, let me say this program requires the .NET Framework 3.0 to run but I would suggest getting the latest, which is .NET 3.5 SP1. Actually, you don't need the full .NET package (see Installation Instructions below) but I highly recommend it now, for this program as well as future software you may run. As such, here are the links to get each version.

[1] Microsoft .NET Framework 3.0 Redistributable Package
[2] Microsoft .NET Framework 3.5 SP1 Full Install Package

This is a continuation of the program LearnToWrite from my previous post. As mentioned, this project is based on an idea from Shanie Dasrath, my sister who is an Occupational Therapist. It is designed to use current technologies to create an environment to help children learn to write the characters of the alphabet as well numbers.

I have added several new features to make this much better than its predecessor. LearnToWrite version 2.0 has new features such as:

• Redesigned interface and buttons
• Numbers are included
• Century Gothic is used as the primary font instead of Arial
• Each section of the character is highlighted a different color based on how it can be written
• Each button click generates a random image/message pair to encourage the user

It is interactive, where each button click activates a new storyboard which generates an animation for that particular button pressed. In addition to the storyboard, a random image/message pair is triggered and all of this is done at the same time.

Originally, I planned on using animated gifs for the images. While each image here is an animated gif, there is no animation. That is because Microsoft does not provide native support for animated gifs. So if you add an animated gif to an Image element, all you would actually see is the first frame of the animation. There are workarounds to this issue, but I did not have the time to implement any just yet. When/if I make a revision of this program, I will try to incorporate this.

One quirk that I have not been able to address is the animation of the smiley face used to trace the letters. The first time you run the program, everything works as expected, but when you click another button, even though you see the path is highlighted, you do not always see the smiley face as it traces the letter. As of now, I am sure it is a rendering + animation timeline issue, but I have not had the time to fully address it. All in all, the program does what it was designed to do.
Note: I am no expert on Bezier curves, so don't expect perfect curves in this program!

Here are some screenshots of the program in use:

Fig.1 LearnToWrite v2.0 main window

Fig.2 Redesigned buttons for upper and lower cases as well as numbers

Fig.3 Some features illustrated

Fig.4 Different characters during execution

Fig.5 The About box

Technologies/Concepts used:

• Microsoft Expression Blend 2 SP1
• Microsoft Visual Studio 2008 Professional SP1
• Microsoft .NET Framework 3.5 SP1
• Windows Presentation Foundation 3.5 SP1
• Templates
• Styles
• Regular Expression
• Paths
• Storyboards and animation
• Resources and ResourceDictionary

Download Links:

Get the zipped setup files [~5MB]. All Windows Versions come preloaded with decompression software for .zip file types. However, you can also use programs such as WinZip, WinRar or 7Zip.

Installation Instructions:

The compressed file you downloaded will extract to a folder with a setup.exe as well as several other files. Running setup.exe will check that you have the correct version of the .NET framework installed, which is .NET 3.5 SP1 in this case. Actually, you do not need the full version of the .NET framework to run this program, though I highly recommend you do get the full package. This installer will actually attempt to download and install a slimmed down version of the framework, called a Client Profile, basically the files needed just to run this application.

I tested the installation on a machine running Windows XP SP2 and I will include some images to show you what to expect from this process.

Fig.6 Checking if the Client Profile in installed

Fig.7 Installing the Client Profile after download

Fig.8 Installing .NET 3.5 SP1

Fig.9 Updating system for .NET 3.5 SP1

** Note **: After this step I noticed that nothing was happening. This could just be an issue with my computer, but if you are experiencing the same, then restart your computer, and run setup.exe again. After that the framework was quickly installed.

Finally, a link will be placed in your start menu, pointing you to the program. I did not make a full blown installer, so after installation, the program is located at:
Start -> Programs -> Microsoft -> LearnToWriteV2

Fig.10 Install location of LearnToWriteV2