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.

Audio Recording Tips

I've recently been working on some audio recording and editing for training modules; it's a learning curve to get it right so I wanted to keep a record of some points that are important to the process. This post is more of a reminder to myself more than anything else. Some of these actions I already had well in hand and some are as a result of the 'experience'.

Before You Start:

• Write a script. I simply do this in Word using a table, with a new row for each recording. My final output in most cases will be using PowerPoint and then converting via Articulate so each row also represents a slide. Keep the sections reasonable in length so that mistakes can easily be re-recorded and the file size kept manageable.
  
  
• If the voice over 'artist' is not yourself and they are not recording directly into Articulate, it's a good idea to have the following details for each slide;
  
  - Slide #
  - Slide Title
  - Description of visuals on the slide (this helps the person recording to match the audio with the visuals - particularly if the visual content is not finalised or they are in another location)
  - tick box they can use to help them keep track of where they are up to
  - audio track name or number (If they don't have time to do this, you can make a note on the document as you edit each track)
  
  
• Use paragraphs to separate the content in longer slides; make the formatting simple and easy to read (I use Arial). It's also important to be clear what is to be read, for instance, don't use numbered bullet points unless you want the person to read the numbers out loud. Be careful how your format numbers and statistics; think about how the text will be interpreted.
  
  
• The script can then be used for the 'Notes' view if using Articulate or similar applications
  
  
• Provide some basic instructions about recording;
  
  - quiet place to record
  - how to use the script
  - type of microphone
  - how to avoid pops, hisses and background noise (pop shield?)

Equipment:

• You don't have to spend a lot of money to get the job done but a decent microphone is a must. Forget headsets and go for a desktop as this gives a more even balance and better control over breath sounds and pops and clicks.
  
  
• You'll also want to avoid plugging your mic directly into the mic input at the front of your computer in most cases as this picks up internal noise from the machine. Best to look for a USB option for easy use. Many of these are Plug & Play, no installation software required (of course, you'll need software to record and edit your audio). Often, they'll be labelled as ideal for podcasting.
  
  
• If your budget is minimal, a Logitech desktop noise cancelling mic will do the job. If you can afford to splash out a little, there are plenty of mics specifically designed for podcasting which will do the trick. From my research (and because it is so cool) I choose a Blue Snowball USB microphone. The best price I found was through B&H Photographic supplies. I had ordered a portable green screen from them before so already had an account, and their service is just excellent; delivery from US to Australia under a week and that included a weekend. Price? $99US (It now also has a sibling - The Snowflake - which has been designed for portability and is around $60 US)
  
  
• The Boagworld lads and The Rissington Podcast Chappies both recommend the Samson C01U mic. The Blue website has some great comparative 3rd party reviews on the main USB mics in the market and these can help you decide which is best for your purposes.
  
  
• If popping noises are a problem or lots of people will be using the same microphone, you might want to invest in a pop shield or pop filter. This simply sits in front of the mic and 'shields' it. For the budget conscious, try some stocking stretched over a piece of coat hanger wire, otherwise you're looking at around $25 US.
  
  
• A quiet room may be all you need however I came across a brilliant portable solution developed by well known US voiceover artist Harlan Hogan. It's so simple, it's genius! Take one collapsible fabric storage cube and a sheet of acoustic foam cut into tiles that slip inside the cube, place your mic inside the cube and voila! a portable recording booth. Harlan can supply these ready made, but really, it's too easy. I'm quite sure other foam would do but acoustic foam is designed to absorb sound so is the recommended option.
  
  Update: I created one of these in under 20mins. The portable cube came from Kmart ($7) and the acoustic foam from Clark Rubber ($35 for an offcut with plenty left over, almost enough for a second cube). After a few minutes testing, I was impressed; all the background noise is blocked out and the voice audio is beautifully clear and crisp. You'll have much less editing to do with such a set up. You can see some photos of my portabooth on Flickr.
  
  
• Software? If your wallet is overflowing there are heaps of specialised programs to help you record and edit, or add special effects, fades etc. Adobe offers both Audition (high end professional use formerly Cool Edit Pro) or Soundbooth but many people do just fine with free software such as the well-known and loved Audacity. Myself, I prefer the free version of WavePad over Audacity. I just find it 'nicer' to use, and easier to really get into the waveform of each track and do some fine tuning. I'm currently investigating Soundbooth though and will let you know what I think.
  
  
• Another freebie to add to your toolbox is The Levelator; this strange piece of software apparently does amazing things, particularly if you have more than one speaker. Simply drop your audio file onto the program icon and it does its thing.

How to Speak:

• This is where the script is vital. You can practice beforehand but also if you need to record again to 'fix' a section, it's easy to cut and splice separate tracks if the content is identical; ad lib would make it much harder.
  
  
• If you stumble - stop and then repeat that small piece and keep going; it's easy enough to cut out such mistakes. Or, by keeping the slide content of a reasonable length, it can be re-recorded if it's a real mess up.
  
  
• Try to avoid taking great gasping breaths; these can be edited out but just be aware of their impact. The same with pops and clicks etc. Pops are evident on 'p' words or sudden pushes of air from your mouth. The trick is to try and keep things as even as possible. Also be aware of extended 'f' and 's' and 'k' sounds. You can use your editing program to shorten these to reduce the impact but it's better if they aren't there in the first place.
  
  
• Leave a few seconds silence at the start of each track - or insert this using your software. This gives a slight 'rest' before the slide loads and the audio starts but is also useful if you output to say, podcast format - each track then doesn't run into each other but sounds more natural.
  
  
• When you are speaking, use a lower tone than normal, speak slower and have a smile on your face. The smile brightens the tone, makes you sound crisper and more friendly. Imagine you're talking to a friend across the table. Listen to yourself and take note of words that you might tend to 'twang', lisp or rush. Practice these until you are happy with the output.
  
  
• Don't read in a monotone manner but on the other don't make it sound like Children's Story Hour; you want to sound interested and appropriate for the topic
  

WavePad Settings:

• The tracks I recently edited were quite 'hissy' with lots of background. I got them practically perfect with the following filters in Wave Pad, in this order:
  
  - Normalise > Normal
  - Noise Reduction > Multi-Band Noise Gating (the better quality option introduces strange background distortion which this option does not)
  - Equalizer > High Pass (default settings)
  

My Snowball mic has arrived in the mail today so I'm sure I will have lots of other tips to add soon!