Using CodeBaby to Create an Interactive Comic

In a previous post I mentioned that I'd won a 2009 LearnX Award for an online course I created for my employer, Telstra BigPond, using the wonderful CodeBaby application.

The lovely CodeBaby people have popped a brief snippet of said course on their site as an elearning case study. Before you skip over there to have a look, I thought I'd just explain, briefly, how I put it all together.

In one sense, it's quite a task for one person to do something like this from scratch in a short timeframe, mainly due to the need for attention to detail and being able to multi-task with different content and apps. On the other hand, using a combination of tools makes it possible for a single developer to produce something quite sophisticated and effective.

Why a Comic?
When you are producing material about expected behaviours it can sometimes make the learner feel a little anxious or possibly negative up front. As this course is about workplace culture and high performance I decided that a comic book story-telling format would immediately generate interest and a compulsion to 'turn the page' to find out what happens, rather than just relaying information.

I'm a big fan of story-telling anyway; providing examples that are meaningful and that produce an emotional reaction is much better than paragraphs of text.

This project is an interactive comic created with a range of different software tools but you can create your own comic using PowerPoint and some clip art or stock photos. If you have Articulate then adding audio is a breeze. But here's what I used:

Ingredients:

• CodeBaby
• Flash
• The Flash Flipping Book Component
• Fireworks (or other graphics software)
  
• Comic Life
• Wavepad (or other audio editing software)
• Blue SnowBall Microphone (or other mic)

Writing the Script
It's really important to make your stakeholders understand that this is a detailed production and that you get sign-off on the content before you start development. When you're dealing with audio and animation you really don't want to be going back and making changes.

As this is a story format, the content needs to be written as a script. I simply use Word to set out the storyboard and mark which bits are audio and which are visuals/text/animations. This helps your reviewers to understand the flow and how the end result will 'look'. I don't have time to create mock-ups and I usually develop on my own so I can picture what I want to do in my head, but if you're working with a team you may need to put more effort into this step.

When I start writing I often have a jumble of disparate facts and figures, bits from legals and SMEs. It can be daunting to make a start but I plonk it all into the document, separating each topic or idea into a table cell. Then I can begin to get rid of duplicate or similar information, move the order around and it soon begins to make sense.

Keep the tone conversational and mark words or phrases that should be emphasized when spoken. If you're doing the audio recording yourself, you'll be familiar enough with the content to know what you want to do with it - read it out loud as you write to hear how it will sound. If you'll be handing it on to someone else, you'll need to provide more specific direction.

Flipping Book
Realistic flipping pages are very difficult to accomplish in Flash and require more programming skills than I will ever have so a pre-built component was the way to go for me. I used Flipping Book which is very customisable. Your content is 'pulled' into the component through an XML text file which specifies each page as a jpeg, png, or swf file.

I created the surrounding interface in Flash, including the introduction, conclusion, background music and music controls, and a Flash menu component. Flipping Book just drops onto the stage as its own component.

Audio
First step is the audio. I use a Blue Snowball microphone and portable soundbooth to record each section as separate wave files. Make sure you do your recording under the same conditions - same room, same distance from the mic, same volume - in case you do need to re-record a section. I've tried Audacity and SoundBooth but keep coming back to WavePad; I just like the easy to use interface and it does the job quickly. More audio tips from me.

CodeBaby
Got your audio? Now you can play with the wonderful CodeBaby! It's such a fun app to use and makes you feel like a real director. I use one of the stock characters, but you can have one custom made if you need a particular look, (it comes with quite a big selection of male and female avatars to choose from).

I wanted the CodeBaby pieces to stand out and be reserved for the main character, rather than animate the entire comic. I can't draw so I hit on the (brilliant!) idea of using the other stock characters to create the comic effect by posing them and taking screenshots.

This worked out terrifically well as I could import the screenshots into another application (Comic Life), combining them into scenes, adding speech bubbles etc without having to engage other people for more audio work or spend more time producing complex multi-character animations, which I didn't have time for.

Because I'm going to insert each CodeBaby animation into a separate swf file I produce them individually; import an audio file, animate the character and export as a swf.

It helps to think about your naming conventions when you are handling so many files eg audio01.wav goes into codebaby01.swf which goes into flashcb01.swf and so on.

The extra good news is that there is now a brand new version of CodeBaby that includes captioning and other nice enhancements!

Fireworks
I paste my CodeBaby screenshots into Fireworks to crop, resize or position etc. Saving them as PNGs means I can then import them into Comic Life in a high quality format. I also use Fireworks to lay out pages that aren't in the comic format; these could be graphs or some other illustration.

You're probably now getting an idea of what a detailed process this type of project actually is...

Comic Life
You don't absolutely need Comic Life for this but it does help lay out your non-flash pages and makes it easy to add different kinds of speech bubbles and add text or other effects. You can import backgrounds and the CodeBaby character pngs into 'frames'. I export each Comic Life page as a high quality PNG. Make sure the page sizes match the Flipping Book component page size.

I also used Comic Life to create the comic style headings by taking screenshots of the text and editing them in Fireworks, then copy and pasting into Flash.

Are you getting confused yet?

Flash
It's a bit complex to explain in this post but I created a Flash file that pulled a CodeBaby animation (swf) into an empty movie clip, added a preloader progress bar for each clip, some smarts for checking if it had loaded, and added controls to stop, play or scrub the clip. Looking at the code I'm not quite sure how I managed it, but I did. Again, make sure your page size matches.

Once this file was set up it was just a matter of making a copy and changing the code to pull in a different swf, or move the page contents around for differently sized CodeBaby animations or other content.

Flipping Book XML
I don't complete all the different components before starting to put the comic together as I find compiling it as I go often sparks new ideas or helps me iron out layout issues, find a better page order and so on.

The Flipping Book XML text file makes it easy to pop in new pages as you go or change the order around - it's just a matter of quickly editing and resaving the file.

The Results
There are a lot of other issues and steps in such a project but I hope this overview gives you some ideas of your own. You can see the results in the case study snippet.