DESIGN  |  ILLUSTRATION  |  ANIMATION  |  WRITING  |  FILMMAKING  |  MUSIC  |  GAMES

The AlphaNumerizer


Here's another Flash application for young kids - The AlphaNumerizer. I tried to find a simple tool for my son Nico. He's a year and a half old and he loves letters and numbers - seeing them and hearing them pronounced makes him very happy (in fact, he's playing with my wife's alphabet cookie cutters as I write this).

Every letter/number game I found online was more complex than what I was looking for - most commercial educational sites clutter the screen with lots of links to additional content and branding elements, and many of their tools and games have animations and other images that supplement each letter as it's typed. That's fine (and probably better suited to kids older than Nico), but I didn't want those kinds of visual distractions - I tried a couple with Nico and I actually had to point to show him where the letters were on the screen.

So I built The AlphaNumerizer. It was a very quick Flash build - about four hours of work total. The audio was recorded on my new Blue Mikey external microphone for the iPhone. It's an excellent quality mic - you can hear the clarity on the samples. I gave the audio very little compression when exporting from Flash - so it's a fairly large file for such a simple application (about 500k ) but it's worth it for me in terms of the quality.

I used typical color scheme, though a bit desaturated - I don't like the kind of overblown colors that you usually find in websites and games for kids. I went with VAG Rounded for the typeface - it really represents the letters and numbers in a nice, traditional typographic style but with rounded ends, which keeps things looking kid-friendly. We wouldn't want kids to get hurt on sharp-cornered letters or - heaven forbid - serifs.

Nico likes when I use the aggressive, excited voice I wound up using for the AlphaNumerizer - we have foam letters that he plays with in the bathtub, and the way I pronounce those letters when I hold them up for him is the same way I voiced them in this application. I exaggerated the pronunciations while still keeping them as clear as possible.

I put the featured letter on a colored card and animated it so it would fly in quickly, slowing to a gentle stop. I also added a timer so it would fade out after a few seconds, essentially clearing the slate.

After I got the basic functionality working (I spent an hour wondering why only certain keys worked while I was testing in Flash before I found out the Flash test environment was "stealing" my key presses - I had to disable the keyboard shortcuts to fix that), I thought about tracking which keys had been pressed. It seemed like that would be a helpful feature, so I added a little strip of letters and numbers at the bottom that fade out as each key is pressed. I kept them small so as not to distract from the main huge letter, and added in another function that fades them back in when the mouse rolls over them.

And besides a title bar and an About section, that's the whole thing. Some early testers have suggested adding a other features, like detecting when certain words are typed. I'm not sure I'd go that route, but if I did, I'd still keep this version as it is. There's something nice about a full screen devoted to one primary element to focus your attention on. Now if I could only find a way to prevent Nico from hitting keys that get him out of the browser window...

Check out The AlphaNumerizer.

2 comments:

  1. Sharing on the FILIPINOAMERICANHOMESCHOOLER FB page. I got here via Donna Heleniak sharing your page

    ReplyDelete
    Replies
    1. That's very cool - please thank Donna for posting it!

      Delete