Learning the Accordion

One of the most useful user interface constructs is the accordion panel. It allows you to stack various sections of your site and then expand and contract the sections when they’re clicked on. In this tutorial, we’ll create a basic animating accordion panel that can be used as the basis for a full Flash website.

1 [EXAMINE THE FILES]
Open the accordion folder (from the download files available at www.layersmagazine.com) and you should see two FLA files: The accordion.fla file is what you’ll need to open to start the tutorial, and the accordion_final.fla file is a finished version of the tutorial that you can use as a reference. There’s also another folder named gs, which contains an ActionScript animation library called TweenLite that we’ll use to do our animation.

2 [OPEN THE FLA]
Open the accordion.fla file in Flash CS4 (this tutorial will also work with Flash CS3 if you haven’t yet upgraded). On the Timeline, you’ll see two layers: The actions layer will hold all of our ActionScript 3.0 code for this project and the panels layer will contain all of the various sections for our site. The movie is 690 pixels wide and 355 pixels high with a frame rate of 30, and it’s set to publish for Flash Player 9, as we won’t be using any of the new Flash Player 10 features.

3 [DRAW A PANEL]
Select the first frame of the panels layer and select the Rectangle tool (R). In the Property inspector, remove the Stroke color (if there is one) and set the Fill color to #0066CC (blue). Drag out a rectangle on the Stage at any size, then in the Property inspector set the following: W(idth) 600; H(eight) 355; X 0; Y 0. (Note: Make sure the chain icon is “broken” next to Width and Height.) Control-click (PC: Right-click) on the rectangle and choose Convert to Symbol. In the dialog that appears, name it “panel1,” make sure that Movie Clip is the Type, and click OK.

4 [ADD A TEXT FIELD]
In the Property inspector, give the new movie clip an Instance name of “panel1.” Double-click on it with the Selection tool (V) to enter edit mode. Select the Text tool (T), set the Character Family to Myriad Pro (or another font—make sure it’s a clean, legible font, as it will be rotated 90°), enter Size (as desired), and Color (we chose white). Click on the Stage and enter the text, “Panel 1.” Switch to the Selection tool, open the Transform panel (Window>Transform), and set Rotate to 90°. Return to the Property inspector and set the type’s X property to 0 and Y to 9. Click on Scene 1 to return to the main Timeline.

5 [DUPLICATE THE PANEL]
Now we’ll duplicate the movie clip panel for each section of the site. In the Library panel, Control-click (PC: Right-click) on the panel1 movie clip and choose Duplicate. You’ll be prompted to give the new clip a name, so let’s call it “panel2.” Now drag an Instance of the panel2 movie clip onto the Stage, and in the Property inspector, position it at X 30 and Y 0. Give the clip an Instance name of “panel2.” (Obviously, if you were building a real site you could name the various clips based on what they contained.)

6 [MODIFY THE DUPLICATE PANEL]
Double-click on the panel2 movie clip to enter edit mode so you can customize this panel. With the Text tool, change the text to “Panel 2.” Then, select the rectangle and choose another color in the Property inspector. Go back out the main Timeline. Now follow the same steps to create two more panels. Offset the X property on each panel by 30 pixels—that means the third panel will have an X of 60 and the fourth will be X 90. Be sure to give each panel an Instance name, following the same convention as above.

7 [IMPORT TWEENLITE]
Select the first frame in the actions layer and open the Actions panel (Window>Actions). Enter the code shown here into the panel. These two lines of code import the TweenLite animation library so that we can use it. TweenLite is an ActionScript 3.0 library that makes animating with code extremely simple. All that’s required is a single line of code to create some really complex animations. There are other engines such as Tweener and gTween that would also work well for this tutorial. (Note: Make sure the gs folder is in the same folder as your FLA file.)

8 [SET LEFT AND RIGHT POSITIONS]
Add the code highlighted here into the Actions panel. In these four lines of code, we’re attaching some information to each of the panels that will help us when we need to animate them. The first property, lx, is the leftmost X position of the panel. The rx property is the X position for the panel when it’s on the right side of the movie. Notice how all of these values are offset by 30 pixels from one another. The ind property simply holds the index number of the panel.

9 [ADD CLICK EVENTS]
Now we need to set up the click events for each of the panels so that they can react when one of them is clicked. Add these next highlighted lines of code to the Actions panel. The first four lines sets up the click events for each panel. All of them will call a function named onClick that’s located at the bottom of the code block. When a panel is clicked, it will animate all of the panels to the correct position allowing the user to view the full contents of that panel.

10 [WHO WAS CLICKED?]
Since all of the panels will call the same function when they’re clicked on, we need to determine which one was clicked so we can animate the panels appropriately. We can easily get a reference to that clip by using the target property of the event object that gets sent to the function. Add this highlighted code into the Actions panel at the specified location to create a variable named “clicked,” which references the clip that was clicked on.

11 [LOOP THROUGH THE PANELS]
Now that we know which clip has been clicked on, we need to loop through all of the panels and animate them to the correct position. In ActionScript 3.0, the most common way to do this is by using a “for” loop. A counter variable is incremented each time the loop is run until it no longer satisfies the condition. Enter the highlighted code into the Actions panel at the specified location. Inside the loop we create a new variable named “mc” that references the panel clip based on the value of the loop counter i.

12 [ANIMATE THE PANELS]
Enter this highlighted code into the Actions panel at the location specified. First, we check whether the index of the current clip is less than or equal to the index of the clip that was clicked on. If it is, we need to animate it to the left. If not, it needs to be animated to the right. For each case, we’re using the TweenLite.to function to do the animation. The animation length is set to 0.5 seconds and we’re using an exponential ease-out effect. Both of these settings can be customized to change the feel of the animation (see Step 14).

13 [ADD CONTENT TO THE PANELS]
Test the movie by choosing Test Movie from the Control menu. Click on the various panels to see the nice animation effect. Now that the code is complete, you can start customizing the panels so that they contain actual content. Double-click on one of the panels to enter edit mode. Now you can start adding text, images, video, or anything else that you want on that particular panel. Check out the accordion_final.fla file to see an example of a finished panel.

14 [CUSTOMIZE TWEENLITE]
As mentioned in Step 12, you can change some of the values in the TweenLite function call to customize the animation effect. Try changing Expo.easeOut to Bounce.easeOut. This makes the panels bounce into place. Another interesting choice would be Elastic.easeOut, which gives it a springy, elastic effect. You can also adjust the length of the animation to achieve different results. To see the full list of customization options, check out the documentation for TweenLite at http://blog.greensock.com/tweenliteas3.

Click here to download the files to follow along with this tutorial.

This video requires Adobe Flash Player.

Click here to download the files to follow along with this tutorial.

This video requires Adobe Flash Player.

Tom Green has made the files for this tutorial available for download. Click here (355MB)

This video requires Adobe Flash Player.

One of the most important skills for Flash developers to learn is how to utilize the vast collections of Web APIs that are available for services such as Flickr, Twitter, Facebook, and mapping using either Google or Yahoo. In this tutorial you’ll learn how to integrate Google Maps into your Flash application using just a few lines of code. The Google API is incredibly easy to use and it’s extremely powerful.

1 [DOWNLOAD THE GOOGLE MAPS API]
The first step in adding Google Maps to your Flash application is to first download the necessary files. Go to http://code.google.com/apis/maps/documentation/flash in your browser. This site is where you can find all of the information on using Google Maps inside of Flash, so be sure to bookmark it. Find the section on the right called “How do I start?” and download the Software Development Kit (SDK) using the link posted in the second item on the list. Unzip the downloaded file to your desktop.

2 [INSTALLING THE API]
In the sdk/lib folder of the SDK you’ll find a file named “map_1_9.swc.” Copy (Command-C [PC: Ctrl-C) this file to the clipboard. If you’re on a Mac navigate to [user folder]/Library/Application Support/Adobe/Flash CS4/language/Configuration/Components (create a new folder named “Components” if you don’t already have one). If you’re on a PC navigate to [user folder]\Local Settings\Application Data\Adobe\Flash CS4\language\Configuration\Components (create a new folder named “Components” if you don’t already have one). Create a new folder named “Google” and paste (Command-V [PC: Ctrl-V) the SWC file into this new directory. If you had Flash open you’ll need to restart it before trying to work with the API.

3 [OPEN THE FLA FILE]
Download the tutorial files for this article at www.layersmagazine.com. Open the map.fla file in Flash CS4. In the Library there’s a movie clip of the Adobe logo that you’ll be placing on the map at the Adobe offices in San Francisco. There’s a single layer in the Timeline named “actions.” The actions layer is where you’ll be placing all the ActionScript code for this project. This project will be built entirely using ActionScript and you won’t be adding anything to the Stage.

4 [ADD THE GOOGLE MAPS COMPONENT]
Before you can start using Google Maps you first need to add the component to your application. Open the Components panel by selecting it from the Window menu. You should see the Google folder that you created earlier. Twirl down the folder and you should see the GoogleMapsLibrary component. Drag the component into the Library to add it to your project. You’ll now be able to access all of the Google Maps APIs.

5 [CREATE A BASIC MAP]
Select the first keyframe of the actions layer and open the Actions panel (Window>Actions). Enter in the code shown in the image above. The first three lines import the Google Maps libraries. Line 5 creates a new instance of the Map class, which is the main object that creates the map. Line 6 is where you’ll need to add your API key, which we’ll get to in the next step. Line 7 sets the size of the map to the same size as the Flash stage. Finally, line 8 adds the map to display list so we can see it.

6 [GET AN API KEY]
One of the things that you have to do when using Google Maps is to get an API key. Even though it works without one, you need to get one to prevent breaking the license agreement. Go back to the API website and click on the link in the first item in the list. Agree to the terms and then enter in the website that you’ll be using the map on. If you don’t know, just enter http://localhost. Click the Generate API Key button and then copy the resulting key to the clipboard (it will ask you to sign into your Google Account if you’re not already signed in). Now replace MY_API_KEY in the code with your key.

7 [TESTING THE MAP]
Go ahead and test your application (Control>Test Movie) to make sure that you’re seeing the basic map. You should see a zoomed out map of the world but without any of the controls, such as a zoom slider or map type selector, that you’re used to seeing on Internet maps. These will be added in the next step. You must wait until the map ready event fires before adding any controls to the map. Enter in the highlighted code shown above into the Actions panel. The onMapReady function is where you’ll begin manipulating the map.

8 [ADD SOME CONTROLS]
Now you’re ready to begin adding some controls to the map so users can manipulate it. Add the highlighted code into the Actions panel as shown above. The first line of code adds a new ZoomControl to the map. This adds a slider that the user can use to zoom in and out on the map. The second line adds a MapTypeControl that allows users to select between the different map types available such as satellite or hybrid. Press Command-Return (PC: Ctrl-Enter) to test the movie and try out the map controls.

9 [CENTER THE MAP]
At this point the map is centered on the world map and is zoomed all the way out. Now you’ll reposition the map so that it’s centered at the Adobe offices in San Francisco. Enter in the above highlighted code into the Actions panel. To the setCenter method we send in three items: the latitude and longitude of the Adobe office, the desired zoom level, and the type of map. The user can, of course, change these things, but this is how we want the map to show at the start. Test your application to see the new center.

10 [HOW TO FIND LATITUDE AND LONGITUDE]
You may be wondering how I found the coordinates for the Adobe office. There are numerous ways to get this information. The easiest is to first search for an address on the Google Maps site (http://maps.google.com). Once the map is centered on the address, simply type javascript:void(prompt(”,gApplication.getMap().getCenter())); in your browser’s address bar and hit Return (PC: Enter). You’ll see a pop-up with the coordinates that you can paste into Flash. The Google Maps API has the ability to do this directly from Flash, but that’s out of the scope of this tutorial.

11 [ADD A MARKER]
Enter the above highlighted code into the Actions panel. The first line creates a new Marker object at the Adobe offices. There are many different options available for how the marker will look and behave. For now we’ll just keep everything at their default values. The second line of code adds the new marker to the map. Test the application to see the default marker. Now wherever you move the map, the marker will always be visible at the Adobe office. In the next step we’ll customize this marker with the Adobe logo.

12 [CUSTOMIZE THE MARKER]
In the Library panel you’ll see a movie clip named “marker.” Double-click on it to enter edit mode. You’ll see an image of the Adobe logo surrounded by a custom marker graphic. It’s important that the point of the marker is on the crosshairs of the registration point. This movie clip has been set up with a class name of “marker” so we can attach it at runtime. Click on Scene 1 at the top left of the Stage to exit edit mode. Add the highlighted code to the Marker object to tell it to use the custom marker (note the changes made at the end of line 16). Test your application.

13 [OTHER MARKER OPTIONS]
In the last step you customized the look of the marker but there’s much more that you can do. Since the marker is just a regular movie clip, it can contain animation, video, or any other type of interactive content that’s supported in Flash. Markers are not the only types of overlays either. You can draw lines and shapes and add them to the map to create rich, interactive mapping applications.

14 [WHERE TO GO FROM HERE]
In this tutorial you’ve created a very simple mapping application in Flash but have only scratched the surface of what’s possible with the Google API. There’s a full geocoding API that allows you to get latitude and longitude coordinates for points on the map or from addresses. You can also get directions between two points or addresses on the map. You can find the full API reference by clicking on the link in item 4 on the API website that you downloaded the SDK from.

ALL IMAGES BY LEE BRIMELOW UNLESS OTHERWISE NOTED

This video requires Adobe Flash Player.

This video requires Adobe Flash Player.

If you’d like to download the file used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All files are for personal use only.

1 [OPEN THE FLA]
Download the tutorial file from www.layersmagazine.com and open 3D.fla in Flash CS4. The new 3D features are only accessible in Flash CS4 and will also only run in Flash Player 10. The Timeline contains a single layer named “back,” which contains the artwork for the sky in our scene. In the Library (Window>Library), you’ll see three movie clips that contain the artwork that we’ll use to build a typical neighborhood scene. Each of these clips will be set in 3D space to achieve the parallax effect.

2 [ADD THE HOUSES]
To achieve the parallax effect we’ll need to place each layer of the scene at a different Z position based on how far away they are from the camera. Click on the New Layer icon at the bottom-left of the Timeline. Double-click the name of the new layer and rename it “scene.” Now drag out a copy of the houses movie clip from the Library panel and place it so that the bottom-left corner of the clip is positioned at the bottom-left corner of the Stage. This row of houses will be the object that’s furthest away from the camera.

3 [POSITION THE HOUSES]
Now we’ll position the houses in 3D space. Select the clip on the Stage and twirl down the 3D Position and View section of the Property inspector. Change the Z property to 500. This pushes the clip away from the camera and as a result, makes it smaller. Now we need to scale the clip so that it’s approximately the same size as it was originally. With the clip selected, go to the Transform panel (Window>Transform) and scale the Width and Height of the clip to 160%. Now drag the clip back down to the bottom-left corner of the Stage.

4 [ADD AND POSITION THE GRASS]
Now we’ll follow the same steps to add some grass to the scene. Drag out a copy of the grass movie clip to the Stage. This grass will be across the street from the houses and thus, will be closer to the camera. Set the Z position of the grass to 200. This positions it away from the camera but not quite as far away as the houses. Scale the clip to 120% the same way you did for the houses and position it so that it’s at the bottom-left of the Stage.

5 [ADD AND POSITION THE TREE]
The last step in constructing our 3D scene is to add a tree that’s even closer to the camera than the grass. Drag out a copy of the tree movie clip to the Stage. For this clip we actually set the Z position to a negative value so that it’s very close to the camera. Select the clip on the Stage and then set its Z property to –200. Position it so that it’s somewhere offstage to the right. When we animate the scene we’ll reveal the tree.

6 [ADD SOME DEPTH OF FIELD]
Flash CS4 doesn’t have any actual camera controls like depth of field but we can fake it by adding some blur. Select the tree movie clip and then twirl down the Filters section of the Property inspector. Click on the Add Filter icon in the bottom-left of the panel and choose Blur. You should automatically see the resulting blur effect on the tree. Change the Quality of the filter to High. Adding the blur to the tree gives the illusion that the camera is focused on the houses.

7 [CREATE THE CONTAINER MOVIE CLIP]
Now that you’ve positioned the three movie clips, you’ll need to put them all inside a single container movie clip. Press Command-A (PC: Ctrl-A) to select the three movie clips and then choose Convert to Symbol from the Modify menu. Choose Movie Clip from the Type drop-down menu, give it a name of “scene,” and click OK. Now get the Selection tool (V) and move the container movie clip around the Stage. Cool, huh? You can now see the parallax effect live on the Stage. The tree is moving faster than the grass, which is moving faster than the houses.

8 [AN IMPORTANT BUG]
There’s a known bug that exists in Flash CS4 that you need to be aware of when you’re using 3D. If you have a movie clip that contains 3D elements, you won’t be able to go into Edit in Place mode anymore. Double-click on the scene movie clip to see what I mean. You’ll now be in Edit mode where all of the 3D elements are nowhere near the way you positioned them. For this reason, you need to make sure that you wait until you’re done positioning your elements before wrapping them in the container clip.

9 [SEE THE STACKING ORDER]
A great way to visualize the 3D stacking order of elements is by rotating your scene using the 3D Rotation tool. Hit the W key to select the tool and then rotate your scene around any of the axes to see the stacking order. One of the things that the new 3D support doesn’t do is Z-sorting. As you rotate the scene around, you may notice that the tree is always in front of the other objects even when it shouldn’t be. Just be aware of this limitation as you construct your 3D scenes.

10 [ANIMATE IN 3D]
Creating 3D animation is accomplished using the exact same methods that you use for 2D animation. Select the scene movie clip, Control-click (PC: Right-click) on it, and select Create Motion Tween. This enables the movie clip for animation and places a second’s worth of frames on the Timeline. To make the clouds background appear throughout the animation, Control-click (PC: Right-click) on frame 30 of the back layer and select Insert Frame. With the playhead at frame 30, move the scene clip to the left a little ways to create a new keyframe. Test the movie (Command-Return [PC: Ctrl- Enter]) to see the animation effect.

11 [ADD INTERACTIVITY]
The 3D effect can just as easily be controlled at runtime using ActionScript. Undo the actions you did in Step 10, then create a new layer and name it “actions.” Select the clip and give it an Instance name of “scene” in the Property inspector. Select the first keyframe in the actions layer and open the Actions panel (Window>Actions). Type in the ActionScript 3 code shown above. This creates an enter frame event where the scene clip is continuously repositioned on the X-axis based on the position of the mouse. Test the movie and move your mouse around to see the effect.

12 [ADD CONSTRAINTS]
You’ll notice that when you test your movie that there’s nothing stopping the scene clip from moving completely out of the frame. Type in the highlighted ActionScript code above into the Actions panel. This code tests for the boundaries of the scene clip and only moves it if it’s inside the bounds. Test the movie now and you shouldn’t be able to go beyond the bounds of the scene. What you now have can serve as the start of a game, as many games use this parallax technique.

More on Flash 3D

While Flash Player 10 includes the first native 3D features for Flash, the Flash community has been working on their own ActionScript-based 3D engines for a while now. Papervision3D (http://blog.papervision3d.org) is by far the most popular open-source library for Flash 3D development, and its features go far beyond the new native 3D support. With Papervision3D you can import 3D models, apply materials and shaders, and also use a variety of 3D primitive objects such as spheres and cubes. Away3D (www.away3d.com) is another popular 3D engine with a similar set of features.

It’s important to note that the new native 3D support was not created to compete with these amazing open-source libraries and, in fact, Adobe is adding special features to the Flash Player specifically to help them run faster. Flash Player 10 includes many low-level features, such as the ability to draw triangle meshes and the new Pixel Bender shader language—both are extremely useful for 3D engines. Away3D has already released a new Flash Player 10 version that takes advantage of these new features, and Papervision3D is currently in development on their next release, as well.

So this brings up the obvious question of when should you use which 3D technology. The new native 3D support in Flash Player 10 and Flash CS4 is primarily for simple 3D effects such as transitions. This allows designers to create 3D animation on the Timeline without having to do any ActionScript. Open-source libraries such as Papervision3D require a fairly high-level knowledge of ActionScript 3 and, thus, makes it inaccessible to most Flash designers. It’s also important to remember the limitations of the native 3D as discussed in Step 9 of this tutorial.

If you’re looking to build fully immersive 3D experiences like the Absolut micro-site www.absolut.com/iaaw built using Papervision3D, then you’ll have to buckle down and get good at ActionScript, as sites like this require an intense amount of coding. This site makes use of many advanced 3D features that are only available in Papervision3D and would be next to impossible to build using the native 3D features in Flash CS4 and Flash Player 10.

Download these sample files and follow along with the tutorial.

This video requires Adobe Flash Player.

To download a copy of this file and follow along, click here.

This video requires Adobe Flash Player.

Inverse Kinematics (IK) is a system that allows animators to set up animation constraints by laying out a structure of bones, which determines how certain pieces are allowed to move. This is heavily used in 3D modeling tools for character animation. One of the most anticipated new features of Flash CS4 is the new built-in support for IK animation as well as the ability to control these animations at runtime using ActionScript. This tutorial will walk you through the basics of creating a simple IK animation.

If you’d like to download the file used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All files are for personal use only.

1 OPEN THE EXAMPLE FLA
Open crane.fla in Flash CS4 and inspect the contents. This file targets Flash Player 10, but the IK features will also work in Flash Player 9. In the Timeline panel you’ll see five layers. The first four contain the supporting artwork for the dock scene. All of the crane pieces that will be used in the IK animation are held in the crane arm layer.

2 TWO NEW TOOLS
If you look in the Toolbox, you’ll see a new toolset devoted to IK animation—easily identified by the bone icon. This toolset actually contains two tools. The first, the Bone tool, is the one that we’ll be focusing on in this tutorial. This tool allows you to draw bones that connect objects on the stage, allowing the IK animation to take place. The second tool is the Bind tool, which allows you to bind multiple control points to a bone and multiple bones to a control point.

3 SETTING THE TRANSFORMATION POINTS
(For those of you familiar with traditional Flash animation, the concept of a transformation point shouldn’t be new.) Select the Free Transform tool (Q), click on the first arm of the crane and rotate it. It’s not rotating from the bottom but rather from the center where the little white circle is—this transformation point controls where the rotation will pivot. Click-and-drag the transformation point to the correct place (as shown above). Do this for the remaining crane pieces, moving each transformation point to where it connects with the previous object.

4 CREATING A BONE
Now you’re ready to create your very first bone. Select the Bone tool (X) and click-and-drag a new bone from the base of the crane to the start of the second crane arm. The tool should snap to the transformation points you positioned in Step 3 to make things easier for you. When you release your mouse, you should see a bone similar to the one shown here. Flash will automatically reset the transformation point for the object based on the bone. You can always adjust this later if it isn’t perfect.

5 THE ARMATURE LAYER
After drawing that first bone you may have noticed something strange in the Timeline panel—a new layer named Armature_1 This is a new layer type introduced in Flash CS4 for holding your IK structure. It’s also known as a “pose layer.” If you turn off the visibility of the crane arm layer, you’ll see that Flash has moved the first two arms of the crane to this new armature layer. Your first bone connected the first pieces of the crane and that’s why they were the ones moved.

6 CREATE THE REMAINING BONES
Now that you’ve created your first bone, you’ll need to finish off the crane skeleton. Select the Bone tool again and click on the first crane arm to show the bone you’ve already created. Now put your mouse directly over the joint connecting the first and second arms and drag a new bone to the third piece. Again, because of the transformation points, it should snap into place. Now do the same thing from the third joint to the fourth joint, which will connect the end of the crane to the cable. Once complete your structure should look like this.

7 MOVING THE STRUCTURE
The crane arm layer is now empty so you can delete it by dragging it to the Trash icon.

Now that you’ve defined the bone structure (or skeleton) of the crane, you can start to have some fun with it. Grab the Selection tool (V), click on a piece of the crane, and begin moving it around. You should immediately see how the bones are constraining the movement of the various pieces. Another thing you should notice is that you’re able to make the crane do things that would be impossible in real life.

8 SETTING CONSTRAINTS
The IK system has the ability to set rotation constraints so that things behave more like they do in the real world. For instance, the first piece of the crane shouldn’t be allowed to rotate 360°. Get the Selection tool and click-and-drag on the first bone. In the Property inspector under Joint: Rotation, click on the Constrain checkbox. Here you can restrain the rotation to whatever you like. I found that a Min value of -57° and Max value of 0° worked well. Do the same for the rest of the joints.

9 TIMELINE IK ANIMATION
Animating an IK structure is no different than animating anything else in Flash CS4 (check out Layers, Jan/Feb 2009, p. 82 for more on the new animation features). Drag-and-select Frame 60 for all the layers in the Timeline. Control-click (PC: Right-click) and select Insert Frame to extend the entire Timeline by 60 frames. The nice thing about an armature layer is that it is automatically set up to animate. Position the playhead at frame 60 and move some of the crane arms around. Press the Return (PC: Enter) key to see the animation.

10 ANIMATION EASING
Like most types of animation in Flash, you’ll probably want to apply some easing to your motion to make it look more realistic. (Unfortunately you can’t use the fancy new Motion Editor to apply custom easing to your IK animation.) Select the entire armature layer by clicking on the layer name. In the Property inspector you’ll see an Ease section, which gives you a couple of options for your animation. The Strength property obviously controls the strength of the easing effect. The Type drop-down menu allows you to choose which type of easing to use.

11 ADDING WEIGHT
If your animation doesn’t seem realistic, set a weight for each bone. With the Selection tool, click on the first bone you created. Notice, in the Location section of the Property inspector, that there’s a Speed property, which allows you to essentially set a weight for your bone. A value of 100% means that it basically has no weight and can be thrown around like a rag doll. If you lower this value, you can make an object heavier. In this example you’d want the first piece of the crane to have the slowest speed since it’s the biggest.

12 RUNTIME IK CONTROL
Animating on the Timeline is great, but what if you want to allow your users to click-and-drag your IK structure around—luckily, this is extremely easy in Flash CS4. First you’ll need to remove any keyframes you’ve created on the armature layer: Control-click (PC: Right-click) on them and select Clear Pose. Now click on the armature layer name in the Timeline to select it. In the Property inspector, you’ll see a Type drop-down menu under the Options section. Change it from Authortime to Runtime. Now, press Command-Return (PC: Ctrl-Enter) to test the movie and you’ll be able to drag around the crane at runtime.

13 IK with ActionScript
While it’s way out of scope for this tutorial, it’s important to note that there’s a full ActionScript 3.0 API for manipulating IK armatures created in Flash CS4. When you select a bone, you’ll see that you can give it a name and that’s the name you’ll be able to call from the ActionScript. Be forewarned though that ActionScript manipulation can get extremely complicated. But for things like games it’s essential, as you need everything to be dynamically controlled.

Click here to download the NASA images and follow along with this project.

This video requires Adobe Flash Player.