Create Fun, Simple Animations To Embed Around The Web With Moonbase

Create Fun, Simple Animations To Embed Around The Web With Moonbase

Images are fun, and moving images, even more so. We’ve previously shown you how to create cinemagraphs, also known as animated GIFs, using your iPhone, and in Photoshop CS5 (with a squirrel!), not to mention Vine, the new Twitter service that all the cool kids are using these days. What can I say? Short animations have a certain kind of charm â€" they work well on the Web.

Today I’d like to tell you about a different sort of animation tool, called Moonbase. It’s entirely online, so nothing to download. It doesn’t work with a series of GIFs nor with a short video. Instead, you plug in a static image and some text, and use Moonbase to make it go around the screen in (hopefully) interesting ways.

How It Works

The best way to understand what Moonbase does is to watch its swanky introduction video:

Unfortunately, I can’t embed the actual Moonbase animation into this post, but here are two you can check out quickly: Spiro by one Pasquale D’Silva, and the far less elaborate MUO animation by yours truly. Okay, and here’s one with Mark Zuckerberg, too.

So, this should give you a general idea of what Moonbase is all about. It’s not animated GIFs â€" the end result feels decidedly different. Whether it’s better or worse is subjective, I’d say (I’ve seen some really dismal GIFs in my time.) By the way, notice that’s a Vimeo video up there, not a YouTube one. This may be because Moonbase is a project by Elepath, Jake Lodwick‘s current main interest. Jake also happens to be the same guy who founded and led Vimeo between 2004-2007.

Getting Started

When you first visit Moonbase, it starts you off with a friendly little tutorial before you even set up an account:

The whole thing works by strategically stringing together boxes. Above, you can see three boxes: A wave (provides a constantly shifting number), an image (the cute little astronaut), and a box, which moves across the canvas. The wave plugs into the box’s X and Y coordinates, so they’re constantly changing around (i.e, animate). The image plugs into the box’s Image property, so that’s what the box actually shows.

The whole thing felt intuitive â€" the only part I had any trouble with, initially, was dragging connectors around, but I soon got the hang of it.

Once you finish the tiny example on the front page, it’s time to move on to the second tutorial:

Above you can see the complete Moonbase interface, with a canvas taking up the bulk of the window, a toolbar lined along the left gutter, and the animation preview itself on the top-right. The massive callouts (“First, add some stars“) are only there to guide you through the tutorial, and they go away once you’re done with it.

The tutorial takes you through the process of creating a more intricate animation, with three waves, two images, a text object, and dynamic color. The schema you end up with looks like this:

I know this doesn’t look like the simplest thing ever, but the tutorial takes you step by step so it all makes sense. You can see the resulting animation here, or as a still image, here:

Not as impressive when it doesn’t move, and not all that impressive even when it does, I must say. But then again, memes are rarely about technical production prowess, but more about the content. If you had an awesome image there with a clever bit of text, I could see it taking off.  Lolcats work, so animated Lolcats should work even better, right?

Making My Own Animation

Having diligently worked through the tutorial, I decided to try my hand at creating a simple little animation of my own. Uploading an image was easy â€" I just had to drop it on top of Chrome. The schema I ended up with looks like this:

So, let’s take a moment to figure this out. There’s just a single wave providing motion. It plugs directly into the X and Y coordinates of a string of text, making it move around the screen.

Then, there’s an image (the MakeUseOf logo), which plugs into a box. I didn’t want to use a different wave to make the box move â€" I wanted some symmetry, and felt like using that one wave to drive both animated elements. But I didn’t want them to overlap â€" hence the Math element.

The Math element take in the wave output value and doubles it by minus one, basically inverting it. I then feed that inverted value into the X and Y coordinates of the box animating the logo, and get the animation I’ve shown you at the top of the post (which might make more sense now).

Bottom Line

Moonbase’s logic and interface felt simple and intuitive to me. I’ve seen at least one reviewer on YouTube who had a different experience he termed “frustrating,” but honestly, I don’t see it. I didn’t try creating anything overly ambitious, but the humble little animation I did want to create was not only possible, but even easy.

What about you? Did you give Moonbase a try? Was it any good? If you made anything funny, share it in the comments!