Making Apps for Kids – My Journey Part 1 : Design and Code

Should designers also learn to code?

It is now nearly a year since my adventure into app creation began, and what a year it’s been! Learning new skills is always exciting, if you really get into it, in the way that it becomes addictive and obsessive: there’s an infinite amount of things to learn. I’ve learnt to code, which is a new thing for me, and I hope this blog will inspire other designers to feel that they have the power to develop apps without having to hire a coder. Firstly, there’s the development costs involved. Secondly, there’s the fact that one has to relinquish control on the project. I’m sure there are many designers and animators out there who have great ideas for interactive projects, but feel powerless to start, due to their lack of technical knowledge.

Now, I can see myself working with programmers in the future, but I feel that the functionality that goes into a visual, animated app is actually very much part of the creative process. Designing interactive apps for the iPad is a medium that is barely established. The rules haven’t been written yet, and the game is wide open for experimentation. Call me a control freak, but in order to tell a coder what I want to happen, I would need to have a solid plan and detailed wireframe before I even started. That doesn’t sound too fun, right? And as Picasso once said: “If you know exactly what you are going to do, then what is the point of doing it?”

As a designer, if you’d asked me even a year previously if I wanted to learn programming, I would have said ‘No way – it’s ridiculously complicated’! It’s surprising how, at the right time in life, we can be ready to tackle anything.

Using Flash to make iPad apps

For me, the impetus was the announcement that the Flash software could now export to iPad and iPhone as stand alone apps – something many people seem to have missed. This doesn’t mean that you can see Flash in a web browser on the iPad or iPhone, but through the Adobe Air plugin in Flash, you can create and sell apps. I’d been working as a freelance Flash animator for years in London’s ad agencies, but my main interest was to somehow get my character brand: Frosby, off the ground. I started by making an interactive Flash website, with the intention of building a virtual world, but handling this alone quickly became too much. Later, having worked in a company that owns the online world ‘Bin’ – I saw what was needed to keep a site of that size going: a team of animators and developers, constantly adding new content to keep thousands of demanding 6-12 year old kids coming back. I put the project on the back burner for a couple of years, and I’ve recently returned to it.

Flash is still the best tool for creating educational learning programs and games online, but as an online platform it’s fading away, due to the shift to mobile web.

This has created a double-edged sword. Steve Jobs has famously been declared as the man who killed off Flash. But on the positive side, he did create the Appstore, which allows designers and developers a chance to directly sell their digital content as apps, which is a revolutionary step that has customers now willingly paying for content. Although for how long and at what price is the next question. Whatever the outcome in this fast moving economy, I could not resist having a go, and have jumped excitedly onto the Apple platform: “If you can’t beat them, join them!”

Since I’d started with Flash and loved using it, I wanted to re-use my knowledge for app creation. But here’s the catch: the programming language had completely changed, so I had to learn Actionscript 3 (AS3) from scratch: the coding for buttons, how to turn sound on and off through code, to more complex interactivity, such as drag and drop and a counting and point system that would enable me to make basic games.

Frosby Learning Games Scarecrow

A Drag and Drop Scarecrow game from my kids app: Frosby Learning Games

In my college days, as a graphic design student, I’d been more into filmmaking than design, and I learnt the whole process from start to finish. I would spend hours editing the footage I’d shot to a soundtrack – the patience needed to tweak a time-based project is unbelievable, but boy was it satisfying to get that sequence perfect! And then came interactive media…

Get ready for time-travel

And now, I feel I’m close to those short film days again, but with a new dimension to deal with: Interactivity. This element is truly mind-boggling – I think of it as being like time-travel. A film, painstaking as it is to make, is at least linear. It moves in one direction, from beginning to end. The viewer is led down the exact path the director wants him or her to take. With interactive media, if the user is on page 2 of a story (the present) they can navigate back to page 1 (the past) or forwards to page 3 (the future). The implications of this can get hugely complicated. When the user presses the button to move on, the present doesn’t exist now right? Not exactly. Let’s say on Page 2, the child can press a little bee character, who flies down onto a flower and sings a song. Half way through the song, the child gets bored and changes page. The sound, which is playing through time, has to be told to turn off, and furthermore, what state is page 2 in, when we navigate back to it? It needs to be back at the start of it’s sequence. Imagine your pages are filled with interactive objects, and you can see how every small detail has to be managed and thought about. To give the viewer the exact functionality you want them to have, when buttons are touchable and not, or for how long, becomes a real craft – it really is engineered entertainment!

App no. 1: Creating an interactive eBook story: my approach

My first app, Vlad’s Vampire Bats is about a lonely vampire with a curse – everything he touches turns to bats. It was a concept that I thought would work for touch screens, so I wrote and illustrated a linear story, as one would a picture book, with at least one or more interactive elements on each page. With some AS3 code I found on forums and tutorials online, I managed a few nice touches: the child can drag a flaming candlestick to light up the room, they can pick flowers, and feed baby bats in a bat sanctuary. In my apps I try to find a balance between the linear direction of the story and play: at some points there should be scenes where the user can play with something. It could be a touchable animation with a funny sound, or something that’s immersive and entertaining. This is what the medium is best for: creating a pleasing sensation in the world you’ve created that’s an end in itself. I added a looping animation on as many scenes as I could, for replay value. The child can then move on when they’re ready, at their own pace.

Vlads Vampire Bats

A screenshot from my first eBook app: Vlad's Vampire Bats

So what have I Learnt about designing an educational app for preschool children? I’ll cover this in my next chapter: Interaction and Navigation.

3 thoughts on “Making Apps for Kids – My Journey Part 1 : Design and Code

  1. Great post on interactivity vs timeline based content, I guess that for animator and traditionally trained film makers it is hugely difficult to project ourselves into non linear story telling project , it is a challenging exercise of development and interactivity especially in as3, and with children as primary users you can really expect the unexpected in terms of usability.

  2. Great blog Matt. That’s the first time I’ve read it all. You have done so much work for this! Well done. shame I’m not on Facebook any more so can’t see your film. Show it to me next time we meet.

    LOL Moo

  3. Wow Frosby is coming on in leaps and bounds!

    A truly classy, and worthwhile website for formative education, full of colour, interactivity, and ingenuity, with the added bonus that you can download clever apps, to keep your kids engrossed, and up to speed in this fast growing world.

    I vote this site a massive 5*****