This was my final project for my Introduction to Flash class. The goal was to create a simple walk cycle animation in flash. First we needed to trace out a walk cycle in Illustrator and then create our own character to use for the animation.
This is the walk cycle that I went with.
I was lucky enough to find a walk cycle that was already complete. This walk cycle actually had one extra drawing that I didn’t need to use. I began using the pen tool to trace each frame. With all the practice I’ve had with the pen tool in semester 1, I was able to trace out the first 4 frames with relative ease.
Frames 5-8 mirror frames 1-4, so I simply had to copy the layers over and put them into place. Unfortunately it wasn’t as easy as I thought. There were adjustments that needed to be made so that the walk cycle would look as clean and realistic as possible. After some tweaking I was finished tracing out the entire cycle.
At this point I needed to figure out what kind of character I wanted to created. At first I thought of creating a Santa figure, but quickly scrapped that idea. Not being able to decide, I thought of some cartoon television shows and eventually came up with Bart Simpson. Not the most creative idea, but it’ll do.
Colouring in each frame was pretty tedious. It ended up taking almost as long as the tracing. I eventually finished and thus completing the walking cycle.
Let’s just say this is Bart Simpson as a teenager…
Now it is time to move into flash. First I needed to create a new movie clip and import the walk cycle onto the stage. To make Bart walk in place, I had to set the x position of each frame to 0. Alright, we’ve got him walking, now it’s time to create a moving background.
We had a in-class Lab where we learned how to create a continuous background. After that class I thought I had it down…but I was wrong. This part gave me the most trouble BY FAR! I couldn’t seem to get the timing right. The background would go from moving nice and slowly to really fast, and I couldn’t understand the problem.
I spent over an hour trying to mess around with the position of the key frames but no luck. Frustrated, I downloaded the assets from the in-class Lab and used it as a guideline. Finally I was getting somewhere. I figured out the timing for the street and now I had to add something on the horizon. I decided to start with some trees. I created to layers for 2 sets of trees. One for the front and one for the back. The front set of trees would be moving faster, while the back trees would be moving slower, creating depth.
Timing the movement of the trees was another tricky task, however I was able to figure it out with minimal trouble. I added a sky and a sun, but I wasn’t quite satisfied with that. The animation still seemed rather plain and boring.
I animated the sun so that it rose and set, and as it set, the moon would appear. I then thought it would be cool if as the sun sets, the sky would get darker. I achieved this by tinting the sky background and creating a classic tween so that it looked legitimate. Too finish off this part, I added a nice glow to both the sun and the moon to make the animation feel more alive.
Almost done!
At this point I am very happy with the animation, but I wanted to add just a bit more. I found an image of Nelson from The Simpsons and stuck him in the background as Bart walks by. I also decided to have the Duff blimp fly across the the sky. With these final 2 additions, I have completed the animation.
And with that, the project is complete. You can view the final animation by clicking on the link below.
