Official website for Web Designer - defining the internet through beautiful design
Author: Imagine Admin
11th May 2010

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

Animated interfaces with Flash CS4’s Bone tool

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

Animated interfaces with Flash CS4’s Bone tool

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

Animated interfaces with Flash CS4’s Bone tool

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.

Pages: 1 2 3 4

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • vikaas Chowdhary

      we want flash

    • Pingback: Flash CS4's animated interfaces [Web Designer] | Integral Forum

    • Jayson Winfield

      I have just started a new job at Dream Media Design Manchester as a trainee and i have been looking around the web for good tips to make sure I impress my new boss, so anything to give me a leg up the flash design ladder is great, designing at uni is nothing like doing it at work the pace is so so fast, I’m on my dinner browsing this site and I just wanted so say thanks to all you guys who left this fantastic content ;) I look forward to reading much more so please keep up the good work I can’t wait to leave articles of my own!!!! thanks