Animated interfaces with Flash CS4’s Bone tool
Flash CS4 already has some new powerful animation features
Flash CS4 already has some new powerful animation features. get to grips with the Bone tool to create an animated interface
The now previous version of Flash has some handy tools for animating, with one of the newest additions being the Bone tool. This may sound like a pretty strange tool but this has been the mainstay of character animation in 3D packages for years. Even rival packages to Flash such as Toon Boom Studio use a Bone tool. So you may be wondering what’s so special about this new tool? Well, if you draw any shape on the stage and add bones to it, you can move those bones around to animate the shape. This can add life to any object you can draw. As bones can be added to Movie Clips, stage drawings or graphic symbols, animating movement becomes much simpler.
It also introduces a new animation concept to Flash users, known as inverse kinematics. This is when you take the end of a bone chain, such as an arm or a leg, and move it. What it actually does is move all the other joints as well, giving you the ability to create realistic movement in a snap. This tutorial will create an animated arm that will bring content onto the stage by pressing a button.
(This tutorial originally appeared in Web Designer issue 158, authored by Mark Shufflebottom)
01 Getting started
From the cover CD, drag the file ‘start.FLA’ onto the desktop and then double-click this file to open Flash CS4. Once open you will see a background image on the stage and two symbols in the library. Press Ctrl+F8 to create a new symbol, make this a graphic symbol and then name it ‘animation 1’.
02 Add the symbols
Click OK to create the new symbol then drag the ‘arm’ symbol from the library onto the stage. Using the Free Transform tool, rotate the ‘arm’ symbol 90º counter-clockwise. Drag two more ‘arm’ symbols to the stage and using the transform palette reduce the sizes to 80% and 40% respectively. Position as shown above.
03 Add the screen
From the Library drag the ‘screen’ symbol onto the stage and position it on the end of the arm as shown above. In the Properties panel, under Color effect, change the style to Alpha and then set this at around 60%. This is to help us see the arm so that we can set the bones up properly and effectively.