Episode One Animation

As part of my efforts to expand my storytelling expertise, I’ve been teaching myself some basic HTML5 animation techniques with a program called Tumult Hype. For now I’m using the simplest artwork possible so I can focus on the animation and storytelling techniques (so please excuse the stick people).

I was originally going to start learning animation using Flash, and I understand that would still be the first choice for many people – particularly those doing this kind of thing for a living. If I had any amount of expertise with Flash already, or even if I was a bit more familiar with other Adobe products, that’s probably what I would have done. The situation I’m in, however, is starting from scratch. I have some familiarity with creating book layouts in Illustrator, but I’ve done virtually no work with Photoshop at all.

Since I’m starting from scratch anyway, it didn’t make sense for me to intentionally jump on board with a program that the biggest company in the world has decided to boycott. Besides, I’d like to be able to run my own animations on my iPad.


The source material for the animation is the first session of a roleplaying game called Diaspora that I recently started running for a small group of friends. I skimmed the major plot points and anything I thought be amusing and left out the rest.

The stick people were drawn in a program called EazyDraw that I picked up from the app store. One part of my learning curve was figuring out the best format to export them in. I’ve settled on .png with a transparent background (though you’ll probably spot places in the first few scenes where I hadn’t yet adopted that yet). Apologies to users of Internet Explorer 6 or earlier – the transparent backgrounds won’t work properly. (But seriously, if you’re still using IE, L2browser noob)

The spaceship images were taken from the Diaspora rulebook. They are © Brad Murray and used with his permission.

(Getting the animation to run in WordPress was another story. Leave me a comment if you’re interested in that process).

It has definitely been a fun, and occasionally frustrating, learning curve. I plan to keep creating these and I’m confident my skillz will advance pretty quickly. My goal is to become comfortable enough with this form of storytelling to start using it for more original content.

4 Responses to Episode One Animation

  1. Tamara Paulin August 19, 2011 at 1:57 pm #

    So, this is a summary of what’s happened in your RPG game so far? Husband tells me about his RPG sessions and I get a bit lost in his non-linear storytelling methods, because it’s a blend of the stories and the mechanics behind the scenes (Him: So Zim dug the die out of the garbage can and rolled a 20! Can you believe it? Me: I guess.)

  2. Jared August 19, 2011 at 2:06 pm #

    The animation is a summary of the first session. We’re 4 sessions in now, but I haven’t made time to do the other animations yet. In an effort not to bore non-gamers I’m trying to leave out all the mechanics details and focus on the amusing story moments.

    So much of the fun of RPG stories is in being there. If you weren’t there…

  3. Tamara Paulin August 19, 2011 at 4:18 pm #

    I love how gamers are such rules lawyers. 🙂

  4. Jared August 19, 2011 at 4:39 pm #

    Of all the things to love about gamers… 😉

Leave a Reply

Powered by WordPress. Designed by Woo Themes