Anime DreamsFlash animations, Photoshop tricks, cartooning, and graphics fun

Simple Flash Anime can often be a better fit

We usually try way too hard to come up with impressive Flash. We spend hours trying to orchestrate really complex movements, and generally end up tearing our hair out just to come up with a cartoon or anime that will WOW the customer, or our friends and family.

Cartooning and Anime - Finding Inspiration Everywhere

As I touched on in my previous post, one of the most difficult challenges for an illustrator or animator is finding inspiration. You know you want to create a new cartoon, illustration, or anime, yet that blank screen or blank piece of paper keeps staring you in the face daring you to try. Yet for a few lucky artists it doesn’t seem to be a problem at all. Why? What’s their big secret?

Creating A Flash Cartoon Animation - Where To Start

Almost all of the cartoonists, manga-ka and comic strip artists started off by drawing characters from other sources. Developing your own style and unique characters takes time, and lots of it. If you do a Google search and track down the very first Peanuts comic strip you will be surprised at how simple and almost primative Charlie Brown, Snoopy, and the rest of the Peanuts gang appears.

New Years Card - Simulating Brush Strokes

Animation is the second cousin to magic. Your animation doesn't actually have to be perfect, it only has to look close enough to the real thing so that people "get the idea".

Building Teams - Flash Animation

Title: Building Teams
Background: Flash animations (2)
Tools used: SwishMax
Length: Continous
Audio: None
Download Size: 101k
Format: Flash SWF
Notes: Animation for a series of articles on building teamwork.
The basic character was built one time in red using simple primitives and then shading them. The character base shape was done by creating a sprite with some underlying mask geometry. Copies were then made for the green and blue characters. These were then instanced to create the rest of the characters. The pulsating energy illusion was created using a simple elipse shapes in red, green, and blue and varying the color alpha settings so that they taper off transparently towards the edges. Swish effects were then applied to make them fade in and pulse.

Flash with Soundtracks - Yoda

Title: Flash Soundtracks
Tools Used: Swishmax
Length: Continous
Audio: Three wav clips
Download Size: 47k
Format: Flash SWF
Notes: The challenge was to include sound with some of my Flash animations. This was a 'learning' exercise - trying to figure out how to embed the audio, and have it start/stop at the right times. Some 'side benefits' were-

• Masked sprites to create the eye movement - this was fun, and something that will be very useful for future projects
• All the animation takes place in one Swish scene which was set to act as the background. The individual audio clips and corresponding text were added as additional scenes using the same background.

Virtual Exercise with Flash

Title: Virtual Exercise
Tools Used: Swishmax
Length: Continous
Audio: None
Download Size: 22k
Format: Flash SWF
Notes:

I really wanted to go out kickbiking this weekend, but the weather decided it had other plans. A typhoon hit Japan, and for the past few days it's been impossible to log any physical exercise time outside. But, why should that keep me from enjoying my kickbike?

This Flash animation was built using a series of nested sprites. The bike is a group of shapes with the inside of the wheels using a radial gradient. The kicker was built based on an early project, but with full Swish shapes this time, and then animated through one complete kick cycle. That was then grouped as a sprite representing a kick with the left foot. That was copied and edited by reversing the layering of the legs, shins, and feet to form a sprite for a right foot kick. They were then animated so that each sprite does three kicks before switching to the other foot. The result was then grouped into a new sprite to facilitate movement and rotation of the kicker.

The moving background was constructed using simple shapes and groups. The stream has some animation to try to simulate running water, but it needs more experimentation before it looks right.

The tree and tori gate shadows were constructed by copying each object, then grouping it as a shape. The shape was filled with black, flipped vertically, shortened, skewed, and the alpha fill set to 20%. All of the background elements were then grouped into a single sprite that was animated to move from right to left giving the impression that the kicker is moving from left to right.

Key learnings:

• Planning ahead makes a tremendous amount of difference. A little upfront thinking and analysis showed that the left and right leg kicking motions are exactly the same so it was easy to animate once, then copy and change the relative order (bring forward, send back) of the leg elements.
• Using overlapping fade-in effects rather than place/remove effects made the transitions from one leg to the other very smooth, as long as the leg doing the fading (in or out) was the one on top. You can also use this technique at the end of the animation so that it doesn't flash when it restarts from the beginning.

For more information on kickbiking, see Kickbiking Japan

Creating Text Reflection

Title: Text Reflection
Tools Used: Swishmax
Length: Continous
Audio: None
Download Size: 40k
Format: Flash SWF
Notes: The initial text was created and formated. Font type was set to 'vector'. The text was then copied and flipped vertically. The new text height was reduced, and the text style changed to italic. Wave action was applied along with a 5 degree slant. The original text was given a shadow by copying it, changing the new text color to black, and then adjusting the positioning and layer. The water and earth were done by creating simple Swish shapes.

Running-Jogging Kinematics Animation

Title: Running Kinematics
Background: Simple Flash animation
Length: Continous
Audio: None
Download Size: 61k
Format: Flash SWF
Notes:

Running or jogging generates significant repetitive stress on the hip, knees, lower leg, and ankles. To illustrate the kinematics involved, I started with a short video clip of a runner and captured 10 evenly spaced frames. I used PhotoShop elements to size the frame grabs and convert them to jpg images. In Swish I built the initial matchstick runner, then animated him by following the frame grab image sequence. This was then grouped as a sprite and given the lateral movement. The paths traced by the runners hip, knees, and ankles were highlighted, and light red and green vertical bands were added to emphasize the timeframes when the legs are undergoing extreme stress.

For more background see Kickbiking Japan

Cycling Kinematics

Title: Cycling Kinematics
Background: Simple Flash animation
Length: Continous
Audio: None
Download Size: 7k
Format: Flash SWF
Notes: I needed to show what goes on with our leg bone structure when we use a bicycle, especially the stress on the hip, knee and ankle joints. I modeled the individual bones, then animated the structure using Swish. The total motion path is broken down into 8 major steps keyed to the bicycle crank rotation. Swish does the interpolation of the motion in between each rotation step. The slight jump at the top of the cycle is when the animation restarts its cycle and will be eliminated next time I work on this animation.
For more background see Kickbiking Japan