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

Ball Guy

Title: Ball Guy
Tools Used: Swishmax
Length: Continous
Audio: None
Download Size: 20k
Format: Flash SWF
Notes: I ran across a very interesting website called 'Cartoon Smart.' It's centered around doing animations and cartoons using Flash. Although I use SwishMax rather than the other alternatives, I was still able to get tremendous value out of the on-line tutorials. One of the CartoonSmart lessons centers around drawing a simple manga-like ball figure. After I completed the lesson, I decided to feature 'ball guy' in a short animation.

Japanese Haiku - Shiki

Title: Japanese Haiku - Shiki
Tools Used: Swishmax
Length: Continous
Audio: None
Download Size: 37k
Format: Flash SWF
Notes: Inspired by one of my favorite haiku poems by Shiki. The illustration is based on a train advertisement for an onsen trip.

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

Kickbike Kicking - Style Analysis

Title: Kickbike Kicking - Style Analysis
Background: Simple Flash animation
Length: Continous
Audio: None
Download Size: 75k
Format: Flash SWF
Notes: Video frame grabs, scaled to match dimensionally using the Kickbike as a constant reference, line tracing to eliminate background distractions, then animated in Flash.
More detail: see Kickbiking Japan

Kickbiking Japan - Animated Link Image

Title: Kickbike
Background: Simple Flash animation
Length: Continous
Audio: None
Download Size: 6k
Format: Flash SWF
Notes: A small flash icon to add to the links on my weblogs. The basic kickbike animation is the same as the Kickbiking Japan title animation. I added a moving background with trees, a tree in the foreground that appears twice using slightly different animation paths, and a fork on the kickbike.