I thought it would be interesting to share my experiences and chosen tools used to create my first (and only!) animation.
I stumbled upon Paper for the iPad around the time that it was starting to look like, if we wanted an explanation video for the product I was developing, I’d have to make it myself.
Fortunately, there isn’t a learning curve to using Paper and I quickly experienced the confidence to experiment, and the urge to give drawing a try. Unusually for a drawing app, there are only six tools, including eraser, and a palette of just nine colours. But, rather than this being a burden, I found that these limitations worked in my favour, forcing me to think about what I was trying to create and preventing my usual obsession for perfection, which would normally result in a form of analysis paralysis – not wanting to proceed for fear of making mistakes. Being denied the ability to obsess over every pixel, or deliberate over the ‘best’ RGB colour value to use, I was forced to experiment with, and practice, the actual process of drawing. I also found another beneficial consequence of a restricted tool set and limited colour palette is a natural consistency in the output. All pictures drawn using Paper seem to benefit from a pleasant, almost organic, natural appearance which is distinct from the drawn-using-a-computer look many graphics software produce.
Soon after beginning to use Paper seriously I thought it was wise to buy a stylus. This proved very worthwhile. Having a stylus gave me a lot more control over the placement of the “nib” since the image was no longer obscured by my fat finger. The only downside to using the pen was my natural tendency to rest the side of my hand on the iPad whilst drawing. This causes unwanted marks on the picture but i soon learned to hover my hand above the surface instead.
Now that I had a drawing tool, I just needed some way of making my pictures move. I initially toyed with using traditional animation techniques, where each frame is painstakingly drawn by hand, but a little experimentation proved this to be impractical given the time available and my limited patience! So instead, after a bit of searching, I stumbled upon Sencha Animator which is a fairly new tool for building CSS3 animations. After learning the basic principles from Sencha’s online tutorial videos I found it to be an excellent tool with an interface that soon became very intuitive to use. At the application’s heart is a timeline onto which a number of “layers” may be placed. Each layer can contain images and these can be transformed, from one keyframe to another, using transitions such as rotation, position and fade; the in-between frames are automatically generated by the app.
Sencha Animator would have been ideal for my needs if I hadn’t needed sound effects and a voice track. For a brief moment of insanity, I considered using Sencha to animate the images, importing the movie into Windows Movie Maker, then finally placing a soundtrack on top. I’m really glad I didn’t go this route! It would have been tortuous to try to synchronise each sound effect with the relevant frame and match key words from the narration to the appropriate frames. And, if I had made a mistake, or wanted to make a change, I’d have had to start all over!
Finally, I settled on the tool I wish I’d looked at earlier – Adobe Flash. It’s the obvious choice in hindsight but I think my prejudice from using poorly designed Flash websites in the early noughties blinded me from considering it. Having a steeper learning curve than Sencha’s tool it took me a couple of days to really appreciate how powerful it is, but having persevered, I can now recommend it without reservation. Flash is based around the same timeline concept as Sencha Animator, or rather Sencha is based on the concepts from Flash, but it’s power is without comparison: audio layers can be added as easily as images; a layer can itself contain an animation, consisting of many other layers, which will repeat indefinitely; layers can be added containing “motion tween” – an auto-generated transformation, similar to Sencha but a lot more flexible; traditional frame-by-frame animation can be created by adding keyframes and drawing using the built-in tools. One feature that I spent a lot of time with was the Motion Editor which allows fine control over how an object’s properties adjust over time. For example, an image’s alpha channel (its transparency) could be set to follow a Sine curve which would produce a pleasing “pulsating” effect.
To summarise, here is a comprehensive list of all the tools I used to produce the final animation:
- Paper for the iPad – for drawing the backgrounds and characters.
- Paint.net – for touching up, and fragmenting, the characters
- WavePad for the iPad – to record the voiceover
- Audacity – for editing sound effects and voiceover
- Flash Professional – for putting everything together
In part 2 I describe my script writing process.