Create Animated Flash Props for GoAnimate with Pencil

GoAnimate recently went through some major upgrades that has given more users access to uploading flash animated props. Unfortunately if you're not able to purchase Adobe CS5 or even the cheaper flash animation alternatives like Koolmoves there isn't a lot of great free flash animation software out there.

In fact Pencil Animator, which I've reviewed before, is pretty much it. Whilst it may not have all the bells and whistles of even the lower end commercial flash software products, is quite buggy and prone to crashing, it's still pretty powerful. In fact it can hold its own with the quality of the flash it produces when in capable hands.

Considering Pencil Animator is quite easy to learn, it's own manual leaves a lot to be desired, making the program seem more complex than necessary. If you just want to know enough to make great props and backgrounds for your GoAnimate animations then this is where I come in.

The animation below demonstrates an animated car prop that I made with Pencil Animator. (Note that you don't need to follow the links at the end of the animation because that's simply for people viewing the animation on GoAnimate to get links to the tutorials which I've already embeded further down the page.)

Learn Flash with Pencil Animator by etourist

Like it? Create your own at GoAnimate.com. It's free and fun!

I wanted to make a prop that looked reasonably complex to show that Pencil has the power to do a little more than just small stuff. At the same time I wanted to show that anyone can make a prop like this simply by tracing from a source photo (which Pencil allows you to do).

The first tutorial below steps you through the process of making a non-animated prop. The reason for doing this is so that you can enlarge your prop (or zoom in on it) and its lines will always remain crisp and sharp - unlike bitmap props which pixelate.



The second tutorial below continues from the first with the same car and steps you through the process of animating the wheels so it looks like the car is driving.



Depending on the complexity of whatever it is you choose to animate it shouldn't take you much longer than a couple of hours to complete both tutorials.

Once you're done you'll know enough about Pencil Animator to make pretty much any prop or background you need for GoAnimate. As you get more confident with the program you may like to explore the manual a little more to find out what else it can do.

Pencil Animator is, in fact, powerful enough to make complete animations, with sound, that you could upload to Youtube or Aniboom. It's not the greatest animation software around but it does have an incredible user interface and it is a great place to start with 2D and Flash/Vector animation.

NOTE: If you're having trouble viewing the tutorials visit them directly in my Google Docs Animation Tutorials folder.

Enigma Sunshine, Facebook Socialite on GoAnimate

In a some what futile effort to get my partner, Enigma, interested in GoAnimate I created a GoAnimate Custom Character based on her Facebook profile avatar. That's her avatar image on the right and in the image below is Enigma Sunshine, the character - whom was also named by my partner.

The character is actually meant to have green eyes, as in the avatar picture, but for some reason in the final animation the pupils show up black.

My partner spends a lot of time on Facebook so it's not hard to see where the inspiration for Engima Sunshine being a Facebook 'socialite' comes from.

I'm not a big fan of online social networks myself. I'd call myself a 'reluctant' participant. Particularly when it comes to real time chat. I prefer the old style message board forums to live chat (or even Twitter for that matter). I found coming up with a script for the first episode of Enigma Sunshine fairly difficult as result.

In fact, to try and find some inspiration, I created the entire opening sequence before the title, long before I had a script. What I finally came up with is nothing particularly new but it gets the series going and I hope you find it kind of fun all the same.

E1: Enigma Sunshine - Gary by etourist

Like it? Create your own at GoAnimate.com. It's free and fun!

The cartoon its self looks deceptively simple but I've actually spent weeks working away on it, planning out my sets and creating numerous custom elements. If you're interested to know more read on.

Set Design

Many GoAnimate cartoons tend to be flat and very two dimensional. Each scene has a back drop and you rarely get to see what the scene looks like from different angles. I've been trying to break this trend by creating sets of the same scene but from different view points beyond 'wide', 'medium' and 'close up' camera shots.

For example in the opening scenes you see a wide shot of Enigma's bedroom. Later in the intro you see her walk from the dressing table to her desk. Just before she sits at the desk the camera changes from somewhere in the middle of the room to looking at Enigma from directly behind the desk.

Then in the final part of the intro you see a shot of Enigma's Laptop screen, looking directly from Enigma's side of the desk, where you can clearly see the desk is actually up against the wall. See the images below (click the image to see the full size version).


Later in the cartoon you can see me do this again with the cafe. There's a shot from outside the window, an interior shot looking from where the window would be, then there is a second interior shot from the other side of Enigma and her friend's table with the window as a back drop.

You don't tend to notice these 'repositioned' camera angles because most of us are used to seeing scenes change like this in live footage on TV and in movies. However on GoAnimate it can be quite a challenge to do this using only the existing props and backgrounds.

Custom Props

Apart from the obvious custom props such as recreating Enigma's Facebook page and creating avatars for her 'friends' there are a couple of other custom props that you may have missed.

First, you'll see a mobile phone sitting on Enigma's desk. I know you never see her actually use it but it is, in fact, a custom flash prop created in Koolmoves. All GoAnimate Custom Characters have a 'talk on phone' action so I created this phone to look like the one they use - since GoAnimate haven't actually created the phone their characters use as a separate prop.

Second, you'll see Enigma's hands typing on her computer keyboard. Those hands are also custom made by me in flash, using Koolmoves. It's actually only one hand I made. I just flipped it for the other hand. GoAnimate have similar separate hands for their characters but for some reason they all are in a pointing position.

Voice Acting

I've described my process for adding voices before in my post about Harry Chalk. I never record voices until the animation is finished complete with speech balloons for everything that is said. I then adjust all the scene lengths so that you have time to read each speech balloon out loud.

I then play the animation through and record my voice reading each part, putting in as much expression and feeling into the words as I can muster. I usually do this three times through just to be sure I get at least one good reading of each line.


My partner has actually taken drama classes and performed in front of people but, just like most people, she was nervous about recording voices and doesn't like the sound of her own voice recorded.

She did crack up laughing at the beginning of her first take but pulled it together quickly. Just like me, it only took three takes for her to complete the voice work.

Usually the third take is the one I use with maybe bits and pieces from the first two takes where the voice sounded better. That's pretty much what happened with the voices for Enigma Sunshine.

Ambient Sounds and other Audio

If you turn the volume up a little louder than normal whilst watching Enigma Sunshine you'll notice at the Cafe there is the appropriate background noises for the scene, People talking etc.

Usually I just have music running in the background to fill in the quite spots (as I do in Enigma's bedroom scenes) but, if you don't want to use music, ambient background noise is the other alternative.

You'll also notice I added footstep sounds when people were running and a head scratch noise for Gary when he's just staring at the table. Details in audio like this can really bring your animation alive and seem more real.


That pretty much covers my behind the scenes look at Enigma Sunshine. I am hoping to make this an ongoing series but anticipate it being something of a struggle given my reluctant participation in online social networks.

Of course if you have ideas for future scripts for Enigma then feel free to suggest them in the comments below.
Related Posts with Thumbnails