I just want to show off an awesome illustration. A group of classmates and I made a short film that may or may not include people in banana suits. I liked a particular still from the film and it was later drawn by the talented and lovely JoanneFX. I highly suggest checking out her work! It’s always been a bit of life goal to see a cartoon version of myself (maybe as a guest spot on Family Guy) and I’d say this damn well counts!
The original still:
Have to admit I’ve haven’t taken to coding with ActionScript as smoothly as I did with web coding, but it’s an interesting subject that opens a lot of doors. But here is a early prototype of a cool project I hope to explore.
It’s just a bit of fun. Something this simple could have been done just using buttons but I wanted some AS3 practice plus I found it ran just a tad smoother with the embedded code.
Once you check it out you might notice the circles look familiar, which something else I’d like to mention. To any another aspiring designers out there, I just wanted to say I think it’s a really good idea to design/make as any projects as possible just for fun. Even if you’re busy making stuff for school/clients, you never know what you might end up drawing inspiration from. And the bigger arsenal of work you have, the bigger the pool of assets you then have access too. I have a few other examples of this so I might write a separate blog post detailing this further at a later time.
Anyway, enjoy the circles!
So I recently underwent the interesting process of creating a run cycle animation in Adobe Flash. It was to be a completely hand-drawn, frame-by-frame animation which had to show each all the different poses someones makes when they’re running. The first step was to find inspiration and a reference to base my drawings off. After some searching around, I liked this one the best.
This was one of the more realistic looking human bodies I found. I had decided to base my run-cylce on a soccer player and I wanted to give a realistic look oppose to a cartoon style. Now it was time to open up Illustrator and to get work, I had twelve frames of somebody running to draw.
I used two of my new best friends (a Wacom tablet and Illustrator’s brush tool) to create the outline of my soccer player.
Then I added colour, using the pen tool to draw shapes underneath.
This would be the point where usually I’d have said I was finished drawing. But for this assignment I now had to do this eleven more times. And I have to keep all the existing proportions I’ve established in this first drawing. But luckily I’m dealing with vector artwork, and Illustrator is home to many features that’ll help me do this.
Firstly I’d copy-and-paste this drawing and then begin all the edits. Objects like his arms I could just select the right paths and shapes, and move and rotate them. Of course once the back arm starts disappearing behind the torso, a little more editing is required.
The legs are where the majority of the work was done. I’d select one of the legs and move it roughly to where it needed to be to give an idea what of it’s supposed to look like. But then I’d bust out the direct selection tool and the whole pen tool family (add, minus, convert anchor point) and really get to work. As I’ve found in the past with Illustrator projects it can be tough to get your grove at first but eventually you get the hang of it and the process moves much faster.
The run-cycle illustration was completed. Now it was time for the actual animating to begin.
The first step was to import each pose into Flash as it’s own keyframe. You can do this directly from Illustrator exporting it as a swf file and choosing keyframes. But I ran into a few issues after exporting this way as the soccer player’s hands and hair would look all messed up. I later found discovered this was because you’re converting from Illustrator vector to Flash vector and some of the stroke properties aren’t the same, so a solution would have been to convert the strokes to shapes before exporting. However instead I just imported the ai file directly from Flash (hooray for Adobe cross-platform user ability).
So I imported these drawings to the stage inside a movie-clip each on their own keyframe. I then went through and changed each frame’s positioning to x=0, y=0 so the player was running in stationery position. For those unaware, when dealing 2D animations of this nature the background moves, not the runner.
The next step was creating the background. I wanted to have a sports field for him to run on and this was a bit of a tricky component because all the lines on field had to be evenly spaced apart, and seeing as the background has to loop, the first and last lines had to be perfect or else the animation would glitch.
To create a parallax background I needed to have two elements of the background moving at different speeds to create some depth of field. The grass field would be in the foreground, and in the background I wanted have the crowd moving at a slower speed.
If you look at the layers, “newcrowd” takes the entire duration of the animation to scroll across the stage. Whereas it takes two instances of the grass field (layers “grass” and “grass2”) to cover the same distance.
Lastly to give this animation an extra kick (no pun intended) I added a soccer ball and there were a few animations to go along with it.
This was another instance of an embedded movie-clip as I put the animation of the ball rotating inside the movie-clip. I also found it easier to place the ball’s shadow inside the same movie-clip just on a different layer, because unlike the runner’s shadow, I was also animating the ball on the main timeline and I didn’t want to have to do everything twice. I wanted to have the ball move around and be kicked by the soccer player. This also required perfect timing and I had to count out the exact frames where I knew the player’s foot would be extended forward as to create the appearance of him kicking the ball.
You can check out the final animation here!
Overall I really enjoyed this project. I remember last year when I was first learning Adobe Illustrator I soon realized how much I liked the vector format. Now learning Flash I can take my love for Illustrator to a whole new level. Expect to see more cool Flash work from me in the future!
Can’t help but show off the awesome technology I used today. Ignore the 2nd grader’s sketch on the screen (that was the style I was going for…yeah let’s say that) and marvel at the beauty that is a Wacom Cintiq!
citizenwoodward 