« May 2004 | Main | September 2004 »

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.


Kickbiking Japan Title Animation


Title: Kickbike
Background: Simple Flash animation
Length: Continous
Audio: None
Download Size: 6k
Format: Flash SWF
Notes: I wanted a title animation for a new weblog on kickbiking. I built the kickbike, rider, and text as separate objects. The only tricky part was getting the rider's actions to look reasonably correct.


Kickbike Modification


Title: Kickbike
Background: Simple Flash animation
Length: Continous
Audio: None
Download Size: 50k
Format: Flash SWF
Notes: I needed to have a modification done on my kickbike to raise the handlebars without modifying the basic geometry. This involved adjusting the existing bracket angle and changing the handlebar. The most important factor was to keep the existing centerlines intact so that I didn't change the way the bike handles. Since I live in Japan, but my language skills are still pretty primative, a simple Flash animation was the easiest way to show the bike shop owner what needed to be done. It was easy to transfer to my PDA and show him in his shop while we discussed the bike.



  • "When I was a little kid, I knew exactly what comics were. Comics were those bright, colorful magazines filled with bad art, stupid stories, and guys in tights."
       - Scott McCloud
         Author of "Understanding Comics"


Recent Posts

Categories

  • Audio/Soundtracks
  • Cartoon
  • Flash
  • Moho
  • Quicktime
  • Swish
  • Web/Tech
  • Weblogs

Recommended Links



  • Robots Dreams

    ROBO-ONE, Robosapien, Roboraptor, Micromouse, Mindstorms, Battlebots, and other cool robot adventures


  • Favorite Quotes

    Quotes can cheer us up, calm us down, give us insight, make us chuckle, and remind us that we are never alone


  • Hello Kitty Sightings

    Hello Kitty is everywhere....


  • Kickbiking Japan!

    Fun and adventure on a Kickbike HPV scooter and mountain bike exploring the "Land of Wa"


  • What's Up

    Unique perspectives from a foreigner with one foot in the US, one foot in Japan, and his head definitely in the clouds


  • Sketchpad

    Unstructured observations and explorations into NLP, OODA, creativity, mastery, and other magical stuff

  • Big Mikan
    Cross cultural marketing and website development


  • Tokyo Rent

    Modern Western apartments with no key money, no agents fees, and no guarantor - in English!

I Love Books!


  • Google
    This site
    Web

Powered by TypePad
Member since 09/2003