Bildkorten (Swedish Flash Cards)

View in Project Showroom
In the quest to learn and remember more irregular Swedish verbs, I built an interactive game based on the concept of flash cards. The focus was creating a grid-based interface on top of an Actionscript 2.0 framework developed using the MVC pattern.

The idea was that by creating a game that had a distinct starting and ending point I could judge how well I was remembering the words by comparing my scores from different sessions.

Visual Design

The interface design went through several phases. First I created a grid. Then I blocked out areas for each element that needs to be displayed in any state of the application.

Above: A worthy start!

I then created a black and white rough draft to make sure that the size and placement of each element related its importance and, ideally, it’s function. Like I’ve heard so many times before, if it’ll work in black and white, it’ll work in color.

Incorporating the preferences view.

Close up the the preferences view.

Next I added color. I used Adobe’s fantastic web application Kuler to help me identify some colors that would work well together. I knew I want the score-keeping bars to have a different scheme form the project controls. So in addition to black and white I needed at least two other colors and their various shades and saturations.

It’s all blue and gold. Get it?

Starting to look pretty sharp.

Preferences need color too

Finally I worked out the various pieces of the components and their many states. I learned the hard way that it’s better to specify these details before ever touching the code. It’s rough in color then code. And the result is always the same. Crap.

Technical Goodness

The project makes extensive use of the Drawing API. The buttons, progress bars and text fields are all drawn at runtime to keep the file size small and limit the number of external assets that need to be pulled in.

The MVC frame work was borrowed from the one outlined in Colin Moock’s “Essential ActionScript 2.0.�