Animating Mike and Molly


Way back in May, Molly and I were brainstorming about what we wanted our new combined blog to look like.   We spent a lot of time looking at websites and discussing what we did or didn’t like about them.  It’s was one of those I don’t know what I want but that’s not it sort of situations. We knew we wanted something slick but not too slick, we’re not a corporation.  We wanted something crafty and home made but not crude and crappy.  Our website needed to visually express our ‘message’ (whatever that was going to be) in a way that was memorable and entertaining.

We both liked sites that had a large slide show playing featured articles across the top of the page.  The moving pictures caught your eye and delivered a lot of  information.  We looked at a bunch of templates for WordPress sites.   First we went through the free ones and then we decided to buy a premium theme because it looked pretty cool in the “store”.   After we purchased it and I downloaded it to my computer I quickly realized that it was going to be quite a lot of work to make it look like the demo that the author had up.  We went to the author’s site and searched around for information on how to modify this “premium” theme.  The documentation was pret-ty skimpy.   This theme was looking less and less cool and more and more annoying.

We were hitting a low point.  We were both eager to stop talking about making a site and get on with actually doing it.  We could find a theme that did part of what we wanted and we could find another that did some other part but we couldn’t find any one theme that did everything.  Trying to modify a pre-made site that was close but not really what we wanted was going nowhere and we were getting a lit-tle grumpy.

After we had flushed $35 down the virtual toilet I started thinking that what we really needed to do was to create a site from the ground up and if that included having to learn how to code a wordpress theme so be it.

Molly: I wasn’t so convinced that starting from scratch was a good idea.  You couldn’t even figure out how to set up the theme we bought.  I wanted to find something, turn it on and get writing already!!!

Mike: I know, I know, it didn’t seem very convincing and at least half the reason I wanted to take it on was to see if I could do it, but you have to admit it was worth it in the end.

Molly: I don’t know why you feel the need to take on these gargantuan projects but I do love how our website turned out!

Mike: Hey, it was only 120 hours (of pain).

Molly: I felt it too baby!  I have to live with you.

By at least thinking about what our ideal theme would look like freed us up to think more expansively about what possibilities we could try.  I had seen a site while we were looking for ideas called Spritely.  It was a small library of javascript code that let you easily put animation on the screen without needing special programs or a video player.

Molly: Hold on, Javawoohoo? library?

Mike: Javascript’s the language that you use to tell the browser how to make things happen on the screen.  The library is a set of instructions written in Javascript to make something specific happen.  In this case to animate stuff on the screen.  Because the Spritely library is already written all I had to do was tell it what I wanted to move and where instead of having to describe to the computer exactly what it would need to do to even move something in the first place.

Molly: OK, well I’m glad you two worked it out.  It was pretty cool to see the spritely demos.  I liked the one with the little bouncing guy.

We both liked spritely and after talking for a while as to what we might animate, we came up with the idea of having our header show us walking through our yard.

Where would the blog title go?  Not sure, maybe on a sign in the yard?  We’ll figure it out when we get there.

Great! we’ve got a concept now we (I) just need to implement it….

The first step was to download the Spritely demo code and take a look at it.  It’s actually pretty well documented (unlike some ‘premium’ themes) and had lots of options for controlling the speed and direction of what you want to animate.  I started in the way I usually do with new code which is to find something that works and then slowly tweek it until it’s doing what I want it to.   The demo has two birds flying in front of a hilly landscape so I tried making my own landscape picture and inserting it into the program.

first background

The practice background looks kind of trippy

It worked!  Yea!  Next and harder was to get a walking person into this landscape.  Molly drew a set of three pictures depicting a walking Molly.  We scanned her drawings into the computer, assembled them into one sequence and adjusted them to the correct size.  I replaced the birds with the walking Molly and it worked.  Fabulous!  Now we had a blocky Molly who looked like she was doing the Elaine dance from Seinfeld through a surreal slapped together landscape.  It really wasn’t all that impressive but there was a proof of concept that this could work.  We felt our way, slowly, through a process of making a drawing, scanning it into the computer, adjusting the color and size and adding it to the animation.

early Molly

The first walking Molly.

First we got the basic layout of the buildings and other elements of the landscape blocked out.  Then we worked on getting the walking people to look somewhat natural.  It took a looooong time to get all the bits and pieces to fit with each other and look like they belonged together but we were humming.  Our creative juices were flowing and we each found a task we could be successful at.  Molly did the bulk of the drawing and I took her drawings, modified them on the computer and fit them into the project.  It felt good to be working together and making progress.

next molly

The next Molly looks a little emaciated. Somebody get her a sandwich!

After about a month of work we had the header animation finished.  It was somewhat anti-climatic.  We would proudly show people what we had made but have to qualify it with ” Well, I’m not sure how the rest of the site is going to look but this will be on top…..I think.”  The blog title never made it into the animation and eventually the header moved down to its current home.  We both love the way it came out.  It’s interesting and eye catching and describes what Mike and Molly are all about.

Thanks Spritely!!

Guess what? You can subscribe to Mike and Molly’s House through our RSS feed or email. You can also follow our Facebook Fanpage  or join us on Twitter.  You’ll never miss a thing and it lets us know that we’re giving you posts that you value.

 Like what you see here?  Spread the word to your friends and family!


  • Share this article
  • Post a comment below


    Error thrown

    Call to undefined function ereg()