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.

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

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.

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.

Over the past decade, we’ve seen a revolution in the way in which we interact with sites on the Web. A great deal of these changes has been fueled by Flash and other rich media technologies. These days, we think nothing of being on a site that seamlessly incorporates audio, video, and textual content. The traditional, mainstream ideas about user experience and interaction are constantly being challenged, or out-and-out ignored, by a new breed of designers and developers.

The revolution that has taken place on the World Wide Web stands in stark contrast to the world of desktop applications, which has been somewhat stagnant for many years. Desktop applications, for the most part, look and behave very similar to one another. Most consist of different groupings of form elements and menus, and they usually share the same default look and feel for whatever operating system they’re being viewed on. Now let me first say that this is usually preferable so the user has a consistent experience, no matter what they’re doing on the computer. However, there are times when users don’t get the full experience that could be possible if developers had the ability or desire to think outside the box. Apple is probably the best at providing nicely designed, original desktop experiences, but it has been extremely hard for most developers to create similar applications. That is until now.

The world of desktop application development is one that typically required many years of advanced study in languages such as C++, Java, or Objective-C. This put it out of reach for most Web designers and developers, who have a whole set of skills and languages of their own to learn. Adobe recognized that their own community already possessed the potential for creating the next generation of applications for the desktop. This led to the development of Adobe AIR, which sole purpose is to allow the Web design and developer communities to build desktop applications using the skills that they already have.

It’s in the AIR
Adobe AIR is a cross-platform runtime allowing designers and developers to create desktop applications using their existing Web development skills. Okay, so what does that mean? It means that if you’re a Flash developer, you can now build desktop applications using Flash that run exactly the same on Windows, Mac, Linux, and eventually mobile devices. This also holds true for traditional HTML and JavaScript developers. There’s a misconception that AIR requires the use of Flash technology. This is absolutely untrue, as developers have the ability to create desktop applications using nothing more than HTML. Of course, there are advantages to using Flash in your AIR applications, but more on that later.

The other important thing to note about AIR development is that it doesn’t cost you a penny to use it. AIR is simply a runtime that allows you to run Web applications on the desktop and doesn’t require you to buy any additional tools. If you already use Flash for Web development, you can simply use Flash to create your AIR desktop applications. Using Dreamweaver for Web design? No problem. You can simply continue using it to do all of your AIR development. The same holds true for Flex developers using Flex Builder. In fact, you can download the free AIR SDK (software development kit) and write your applications in Notepad or TextMate if you wish, although to make development easier, it’s highly recommended that you use a tool with built-in support for AIR.

After developing your application, just publish it from whatever tool you’re using to an AIR file, then distribute it to the public so that users can install it. There’s no need to provide different versions for different operating systems, as the AIR file can be installed anywhere. The only requirement for installing your application is that the user has the AIR runtime installed on their system. If they don’t, they’ll be prompted to do so during the installation of your application—a very seamless experience.

Limitations of browser-based apps

At this point, you may be wondering why you’d ever want to build a desktop application. It seems that nowadays everything is moving into the browser, so what benefits can be gained by being on the desktop? If we take a look at some of the problems that are encountered when an application runs in a browser, we can discover some of the benefits of AIR applications.

Branding limitations:
No matter how great your brand’s experience is within the browser, it’s still confined within the walls of that browser. Your message will always be enclosed by an unknown number of browser features and chrome. It could be viewed in Firefox with a very minimal set of browser controls, but it also could be viewed in Internet Explorer with a myriad amount of toolbars and buttons infringing on your brand. AIR solves this by breaking out of the browser, allowing you take full control of the look and feel of your application.

Only available online:
This is a huge limitation of Web-based experiences. Your application may be great when the user is connected to the Internet, but as soon as they disconnect or close their browser, your app is no longer available to them. A classic example would be that of airline travel. Your application works nicely while the traveler is in the terminal connected to the free airport Wi-Fi. But as soon as the flight attendant closes the door to the plane, your application is unreachable until the plane lands and another Internet connection can be found. AIR doesn’t suffer this same fate, as your applications work seamlessly regardless of Internet connection.

No operating system integration:
Apps that are run within the browser have very limited access to the user’s operating system. They don’t have the ability to easily read and write files, receive things via drag-and-drop, or accept the full spectrum of keyboard commands. They do what the browser says they can do—and nothing more. With AIR, you’re creating a fully trusted desktop application with the power needed to interact with the user’s operating system, regardless of whether it’s Windows, Mac, or Linux. This often leads people to think that AIR is a security concern. Yes, it’s true that an AIR application could be built that maliciously deletes files from your hard drive; but this is just as easy to do with other desktop technologies such as .NET and Cocoa. So just as you shouldn’t install a traditional desktop application from sources you don’t trust, you should have the same vigilance when it comes to AIR applications.

Limited desktop presence:
This is similar to the first limitation regarding branding. When you run your message in the browser, not only are you surrounded on all sides by the browser, but you also have very limited options when it comes to placing your brand in other areas of the user’s computer. AIR addresses this by allowing you to place your brand in places such as the Dock on Mac systems, the System Tray on Windows, and of course, the user’s desktop. You can set your applications to run at system startup as well as being able to run in the background with no user interface whatsoever.

Now that you’re aware of some of the benefits that can be gained by running outside the browser on the desktop, I want to make it clear that AIR isn’t trying to replace browser-based experiences. AIR is meant to enhance that experience by allowing greater integration with the user’s desktop. As an example, take a movie website. The site is the central place for viewing the trailer, reading the synopsis, and perhaps playing some games associated with the movie. A site like this could take advantage of AIR by allowing users to watch the trailer and play those games while they’re offline. Perhaps the application would pop up a branded desktop alert when the movie begins playing in theaters. The possibilities are endless.

How about some examples

I can write all day long about the benefits of building AIR applications, but let’s take a look at some examples that back up what I’ve been saying. Adobe AIR was officially released in early 2008, and already the community has created a ton of great applications. They range from more-traditional enterprise applications to completely wild branding experiences. Here are just a few of my favorites:

TweetDeck (www.tweetdeck.com)
There are many, many Twitter clients built on AIR but this one is unique. If you’re not familiar with Twitter, it’s a social networking site that allows you to keep track of what your friends are doing right now—a kind of micro-blogging. Even Layers magazine is on Twitter (www.twitter.com/LayersMagazine). With TweetDeck, you can set up various columns of Twitter content, giving you a broader overview of your Twitter feeds. This allows you to stay informed about not just what you and your friends are up to but also the technology community in general—a great way to track current developments. For instance, I can set up a column that shows me every message someone writes with the word “Adobe” in it. Sometimes it’s painful to read, but it’s actually great, uncensored feedback from the community.

DestroyFlickr (www.destroytoday.com/index.php?p=Project&id=DestroyFlickr)
Despite the scary name, this application delivers an amazing experience for viewing your Flickr photos. This application can run in full-screen mode, is very well designed, and includes some really nice transitions between screens. The really cool part of this application is that when you view either your own photos or those of your contacts, you’re actually creating virtual workspaces. At any time, you can zoom out to see a high-level view of all your workspaces and then zoom back in to the one you want to see. Insert

Desktop Keeley (www.thesun.co.uk/desktopkeeley)
This application is a great example of taking a fresh approach to branding. The Sun is a popular British newspaper that’s quite a bit more risqué than the papers I’m used to reading in America. One such risqué feature is the “page 3 girl” that shows scantily clad women in various poses and provides celebrity gossip and other pieces of lighter “news.” The Desktop Keeley AIR application combines a simple RSS newsreader with video clips of Keeley Hazell walking around your desktop in various outfits ranging from conservative to, um, less conservative. At anytime you can Control-click (PC: Right-click) on the application’s icon to make Keeley come out for a visit.

Getting started with AIR

Hopefully, you’re now ready to go right out and start building your own AIR applications, so let’s focus on getting started. One thing you’ll definitely need in order to build AIR applications is the ability to do basic programming in either HTML/JavaScript or ActionScript 3.0. Having said this, you don’t have to be a hardcore developer to build some really cool applications. There are essentially three routes you can take to create AIR applications. Which route you take is primarily based on your existing skills as well as the tools that you’re currently using.

Building HTML and JavaScript AIR applications: If you’re currently a Web designer or developer who uses tools such as Dreamweaver to build HTML-based websites, then you can continue that same workflow to build AIR applications. You don’t have to know or use Flash to create applications with AIR. Dreamweaver users can download a free extension from Adobe at www.adobe.com/products/air/tools that adds support for creating AIR applications.

Once you have the extension installed, creating your first AIR application couldn’t be easier. Let’s say you already have some existing HTML content that you’d like to package into an AIR application. All that’s required is to select Preview in Adobe AIR from the File>Preview in Browser menu. All of the settings for your application can be accessed by choosing AIR Application Settings from the Site menu. Now obviously you’ll more than likely want to take advantage of some of the AIR-specific functionality so that you can better integrate your application with the user’s desktop. For more details on programming AIR applications using Dreamweaver, make sure to visit the Adobe Developer Center (ADC), which focuses specifically on this topic. You can find that by going to www.adobe.com/devnet/air/ajax.

Building AIR applications using Flash:
If you’re currently building Web experiences using Flash, then you’ll be happy to know that Flash is one of the best tools for creating AIR applications. If you’re using Flash CS4, then you already have built-in support for building AIR applications right out of the box. If you’re using Flash CS3, then you’ll want to download a free extension at www.adobe.com/products/air that enables the same functionality.

Much like the Dreamweaver extension, you can turn an existing Flash project into an AIR application by simply changing the publish settings to target Adobe AIR instead of the browser-based Flash Player. New AIR projects can be created by simply choosing Flash File (Adobe AIR) from the Flash Welcome screen. All of the details about how you want your application to look, such as window chrome and icons, can be set by launching the AIR settings dialog from the Flash CS4 Properties inspector.

It’s important to note that you must use ActionScript 3.0 to build AIR applications in either Flash or Flex. This is yet another good reason to upgrade your skills to the new language. To learn more about Flash-specific techniques for building AIR applications, be sure to check out www.adobe.com/devnet/air/flash at the ADC.

Building AIR applications using Flex:
The Flex framework allows developers to quickly create Rich Internet Applications (RIAs) using Flash technology. You can essentially think of Flex as “Flash for developers.” Typically, developers aren’t very comfortable inside Flash because of the abundance of drawing tools and the timeline-based approach to animation. Flex and Flex Builder, which is the Eclipse-based IDE (integrated development environment) for creating Flex applications, are meant to appeal directly to developers who come from backgrounds such as Java and .NET. Flex applications will look and behave more like traditional applications and can utilize an advanced set of components for things such as charting and data visualization.
Adobe AIR is a first-class citizen within Flex Builder 3. When creating a new project, you simply choose Desktop Application (Runs in Adobe AIR) from the New Flex Project dialog. To find out more about building AIR applications with Flex, check out www.adobe.com/devnet/air/flex at the ADC.

Regardless of which route you take, you’ll have the ability to create powerful, unique, desktop applications without the need for learning yet another language. AIR applications can range from simple widgets to full-blown enterprise applications. If you’ve ever said something along the lines of, “I wish someone would make an application that did this,” well you can stop sitting around waiting and just build it yourself.

1 OPEN A NEW FLA FILE
…or download the FLA from the Layers magazine website and open it. The download is an ActionScript 3.0 Flash document that’s set to publish to Flash Player 10. If you want to be able to take advantage of some of the cool new features such as 3D, you’ll need to obtain this new version of the Flash Player. But the new Timeline and animation features can be used no matter what player you’re publishing to. This FLA file has a single movie clip of the Flash icon that we’ll use for our animation on the Stage.

2 SIMPLE POSITION ANIMATION
Let’s start out with the easiest possible animation where you simply animate the X and Y position of an object. With the new Timeline there’s no need to manually create or delete keyframes. Simply Control-click (PC: Right-click) the movie clip on the Stage and choose Create Motion Tween. This creates a motion tween on the Timeline and puts down one second’s worth of frames. Since our movie is set to 30 fps, you should now see 30 frames on the Timeline. Now simply move the subject (in this case the butterfly) to a new position to create the animation. Hit the Return (PC: Enter) key to preview the animation.

3 MOTION PATHS
In Flash CS4 there’s no need to use motion guide layers like in previous versions of Flash, as a motion path is automatically created for every animation. In the previous step, you should’ve seen the green motion path after you created your animation. You can easily click-and-drag on that path to modify the route that the movie clip takes to get to a new position. With the clip not selected, click-and-drag on the green path to create a curved motion path and hit Return (PC: Enter) to preview the animation.

4 ADD SOME COMPLEXITY
Now that you have a nice curving animation, let’s add another keyframe in the middle to make the curve a little more interesting. Move the Current-Time Indicator (CTI) in the Timeline to frame 15 and then move the clip to a different position. Notice how the motion path adjusts nicely to make the animation as smooth as possible. Move the clip to new locations and take note of how the motion path is redrawn. To finish, make a motion path similar to the one shown in the screenshot above.

5 ADJUSTING ANIMATION LENGTH
This is an area that was very frustrating in previous versions of Flash. Imagine you have an animation with 50 perfectly laid out keyframes. Then you’re asked to slow down the animation a little without affecting the rest of the movie. There goes your lunch hour. With Flash CS4 all you have to do is grab the end of a motion tween in the Timeline and adjust its length; all of the keyframes inside of it will be adjusted for you. So place the mouse over the end of the motion tween in the Timeline until you see the scrub icon. Now click-and-drag to adjust it so that it takes 50 frames to finish.

6 TRANSFORMING AN ANIMATION
What if you want to resize or move an animation without affecting the movie clip? Good luck to you if you’re using an earlier version of Flash. With Flash CS4, you can use the Free Transform tool to easily modify an animation’s size or position. Hit the Q key to get the Free Transform tool and then click on the motion path of your animation, not on the clip itself. From there try scaling the animation up and down as well as moving the entire animation to a new position. When you’re finished, press Return (PC: Enter) and observe the animation. Very cool stuff!

7 THE THIRD DIMENSION
One of the most exciting new features of Flash CS4 is the built-in support for manipulating objects in 3D space. This support takes the form of two new tools: the 3D Rotation tool (W) and the 3D Translation tool (G). Hit the W key to activate the 3D Rotation tool. Now click on the movie clip on the Stage and you’ll see the rotation handles that allow you to rotate the object on the X, Y, or Z axes. Move your mouse over the green handle and drag it clockwise to rotate the clip on the Y axis.

8 EXPLORING THE MOTION EDITOR
The real power of animation in Flash CS4 comes when you use the new Motion Editor panel. Choose Motion Editor under the Window menu to launch the editor. Now select your movie clip on the Stage to see the properties for your animation. You may need to expand the panel so you can see it better. At the bottom of the panel you can adjust the viewable frames so that your whole animation is shown. You should be able to see the keyframes that were created for the X, Y, and Rotation Y properties.

9 ADJUSTING ANIMATIONS IN THE MOTION EDITOR
Once you’ve done your rough animation on the Timeline, you can easily fine-tune it using the Motion Editor. You can even do all of your animation inside of the editor and bypass the Timeline altogether if you wish. With your animation selected, place the CTI at frame 25. Click in the Rotation Y section to maximize this property so you have more room to work. Now scrub the value slider shown in the screenshot to a new value. Notice how a new keyframe was automatically created for you at frame 25.

10 ADD SOME EASING
For more life-like animation you’ll want to apply some easing effects to the animation. Flash CS4 comes stocked with a bunch of easing effects to choose from. Scroll to the Eases section at the bottom of the Motion Editor panel and click on the plus sign. From here you can select one of the available easing types. Choose Stop and Start (Fastest) for this example. Now scroll to the top of the panel, and in the Basic Motion section, select your new ease type from the Ease pull-down menu and test your movie to preview it. What’s really powerful is that you can apply different easing effects to each property creating really complex animations.

11 CUSTOM EASING
While the eases that come with Flash CS4 are nice, you may decide that you want to create your own effect instead. Expand the Eases section of the Motion Editor and click the plus sign again. Choose Custom as the ease type and Flash will then create a blank easing curve for you to tweak. Click the Custom ease section to expand it and then click on the left-most point of the curve to expose the Bezier handles. From here you can tweak the curves to create any effect you want. Apply it to your animation the same way you did in the last step.

12 ACCESS MOTION PRESETS
Let’s say you just created an incredibly complex animation using the Motion Editor. It would be nice if you could save that work so you can apply it to other objects later on. The Motion Presets panel allows you to do just that. Open the Motion Presets panel by selecting Motion Presets from the Window menu. In the panel you’ll see a bunch of presets provided by Adobe to help get you started.

13 SAVE YOUR OWN MOTION PRESETS
To save your own preset, Control-click (PC: Right-click) on the motion tween up in the Timeline and choose Save as Motion Preset. You’ll be asked to provide a name for the preset, so name it, and then click OK. That’s all there is to it.

To become proficient at Flash you need to learn how to utilize the amazing community we have for inspiration and code samples. This tutorial will show you how to bring a still photo to life using the mysterious displacement map filter and some Perlin noise. Completely understanding this filter isn’t necessary in order to achieve some stunning effects with it. What is important however, is the ability to take some example code and experiment with it until you achieve the effect that you’re looking for.

If you’d like to download the files 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 PSD FILE
For this tutorial we’ll work with this photo of a canal in Amsterdam and we’ll make the water come to life. Open the water.psd file from the tutorial folder in Photoshop CS3 so we can take a look at the layer structure. This file contains two layers with the photo on each layer. The original layer contains the untouched photo. The other layer contains the same photo except the canal has been masked out. Once we get into Flash we’ll apply the filter effect to the bottom layer; only the water of that layer will be visible under the masked layer.
CREDIT: LEE BRIMELOW

2 OPEN THE FLA FILE
Now open the water.fla file from the tutorial folder in Flash CS3. This file was set up by creating a new ActionScript 3.0 document, setting the frame rate to 30, resizing the stage to the photo’s size, and renaming the first layer to actions and locking it. It’s important to note that all the techniques we’ll show you here are also available in ActionScript 2.0 but there will be considerable performance increases if you use the latest version of the language.

3 IMPORT THE PSD FILE
In Flash, select File>Import>Import to Library to open the import dialog. Select the water.psd file and click the Import to Library button to open the PSD importer. Here you can adjust the settings that affect how the Photoshop file is imported. Click the masked layer and under Publish Settings change the Quality to Custom: 90. Now select the original layer and click the Create Movie Clip for This Layer checkbox. Also set the Quality of this layer to Custom: 90. Click OK to complete the import.

4 LAYING OUT THE ASSETS
Click the Insert Layer icon to create a new layer above the actions layer. Double-click on the layer’s name and rename it photo. In the Library panel (Window>Library), go into the water.psd Assets folder by double-clicking it, and drag out a copy of the original movie clip onto the stage. In the Property inspector (Window>Properties>Properties), set its X and Y values both to zero and give it an Instance Name of photo. Create another new layer and name it masked. Drag out a copy of the masked image from the Library panel onto the stage and position it to X:0, Y:0 in the Property inspector. You can now lock all of the layers on the Timeline.

5 START WRITING THE CODE
Now that we’ve taken care of the entire visual layout, it’s time to start writing the ActionScript code that will turn the photo of the canal into a beautiful moving animation. Select the first keyframe in the actions layer and then open the Actions panel by selecting Window>Actions. One helpful tip for working with the Actions panel is to pin your script so that your code will always be visible no matter what you’re clicking on. Click on the Pin Active Script (pushpin) icon to pin the main script into the Actions panel.

6 CREATE THE DISPLACEMENT FILTER
Copy the code you see above into your Actions panel. On line 1, we create an instance of the BitmapData class that will allow the filter to manipulate our image on a pixel-level basis and we set its width and height to the same as our photo. On line 2 we create an instance of the DisplacementMapFilter and pass to it the BitmapData object we created on line 1. You can look in the help files to see what the rest of the parameters do. As always, experimentation is key here.

7 SOME PERLIN PROPERTIES
We’ll use something called Perlin noise to create the water effect. (You can read more about Perlin noise at the end of this tutorial.) In order to use this we need to create a few variables that the Perlin noise function requires. Copy the code you see above into the Actions panel. On lines 4 and 5 we create a couple of Point objects. These are objects that contain an X and Y position. On line 6, we create a new Array that will hold the two Point objects. An Array is simply an object that holds other objects.

8 SET UP THE EVENT
In order for us to make the water move we’ll need to apply the displacement filter continuously in a loop, altering some of its properties as we go. To create a loop we need to set up the ENTER_FRAME event. This event calls a function every time the player hits a new frame. Since we set our movie to 30 fps, the function will be called 30 times a second. Copy the code you see above into the Actions panel. It creates a new ENTER_FRAME event and tells it to call the loop function every time it fires.

9 CREATE THE LOOP FUNCTION
In the last step we told the ENTER_FRAME event to call the loop function each time it fires. In this step we’ll actually create this function. Copy the code you see above into the Actions panel. This code creates a new function named loop. Inside of this we’ll adjust properties of the displacement filter and then apply this filter to our photo movie clip. Again, if some of this is confusing don’t worry. The beauty of Flash is that you don’t need to understand all of the code in order to use it!

10 INCREMENT THE OFFSETS
Enter the code you see above into the Actions panel. On lines 12 and 13 we made increments for the Point objects we created earlier. Changing these two values can create a wide array of different effects. (The values I chose here were based on my experimenting until a realistic water effect was reached.) Line 12 controls the effect on the X axis and line 13 the Y axis. These values will change 30 times a second and are what causes the displacement filter to do its magic.

11 CREATE SOME NOISE
Copy this line of code shown above into the Actions panel, which calls the perlinNoise function on the bitmap data object we created in Step Six. This function takes a slew of parameters and it’s not important that you understand what each of them does. The main thing to take notice of is that we pass in the perlinOffset object that we manipulated in the previous step. (I definitely recommend that you look up perlinNoise in the help files to learn more about what each of the parameters does.)

12 APPLY THE FILTER
The last step needed to make this effect work is to simply apply the displacement filter to the photo movie clip. Copy the code shown above into the Actions panel. Here we’re setting the filter to the movie clip’s filters property. We use square brackets since the filters property is actually an Array designed to hold multiple filters. Test your movie and you should now see the canal come to life. I’m still amazed how realistic this effect looks. If you added some ambient sound people would swear it was video footage.

More About Perlin Noise

As mentioned in the tutorial, generating Perlin noise is the key to making this technique work. It’s also vital in the creation of hundreds of other effects like fire, smoke, and clouds. Perlin noise is named after its creator, Ken Perlin, who created the algorithm while doing the special effects for the movie Tron. He won the Academy Award for Technical Achievement in 1997. The actual math behind this technique can get quite complex but if you want to learn more about it you can point your browser at http://en.wikipedia.org/wiki/Perlin_noise. I have tried a number of times to get a firm grasp on all of the details of this algorithm but gave up in the end. The beauty of Flash is that you don’t need to understand how everything works in order to use it to create some stunning effects. I mean do Photoshop users actually understand how the Liquify filter achieves its effects?
]]> http://www.layersmagazine.com/adobe-flash-cs3-professional-tutorial.html/feed 22 http://www.layersmagazine.com/closed-captioned-video-in-flash.html http://www.layersmagazine.com/closed-captioned-video-in-flash.html#comments Tue, 03 Feb 2009 22:20:52 +0000 Lee Brimelow http://www.layersmagazine.com/?p=5233 With the release of Flash CS3, Adobe has made the process of adding closed-captioning information to video files a whole lot easier. Taking the time to provide captions for your video is not only helpful for hearing-impaired viewers, but captions are also very useful for those times when people just can’t listen to audio.

[If you’d like to download the files used in this tutorial to practice these techniques, click here to download the images for the flash tutorial. All files are for personal use only.]

1 GET THE FILES
Download the exercise files for this tutorial at www.layersmagazine.com and unzip them to your desktop. The files consist of a QuickTime video named captions.mov and an XML file named captions.xml, which will serve as the template for the caption information. The new FLVPlaybackCaptioning component in Flash allows you to easily incorporate captions from an external Timed Text (TT) XML file. The Timed Text format is a standards-based method of representing captioning information. The first step in the process is to write this XML file with your captions.

2 OPEN THE CAPTION FILE
Open captions.xml in your favorite editor. We’re using Dreamweaver CS3 as it has many handy features for editing XML files. You can use this XML file as a template for your future projects. Lines 1 and 2 are required and should never change. Lines 4 thru 8 define the head block, which contains styling information for the captions. Lines 10 thru 14 define the body block where your captions will be entered. Line 12 shows the format that the captions use followed by the actual caption. This paragraph tag can contain a begin time, a duration time, and a style definition.

3 ENTERING THE CAPTIONS
Open up the video file in a player that displays the playhead time. You’ll need to play the video and each time there is an appropriate break for a caption, pause the video and enter the information in the XML file. Unfortunately there is no easy way of automating this process without buying additional software. Each caption should be on its own line using the paragraph tag as shown in line 12 in the previous step. For each caption, enter the begin time and a duration time in the format of HH:MM:SS.m. For a complete list of possible parameters, look in the Flash help files.

4 SET UP THE FLASH MOVIE
Open Flash CS3 Professional and from the welcome screen, choose Flash File (ActionScript 3.0). Rename the first layer on the timeline to “video,” as it will contain the video and captioning components, and click anywhere on the Stage. In the Property inspector change the Frame Rate of the movie to 30. Create a new folder for your project and save this Flash file as captions.fla. Then, move your edited captions.xml file into this folder, as well.

5 IMPORT THE VIDEO
Select the first keyframe in the video layer. Select File>Import>Import Video. In the Import Video dialog, browse to the captions.mov video file and click Continue. Choose Progressive Download From a Web Server as the deployment type for your video, which will keep it externally from your Flash file and is appropriate for most situations. Click Continue. Choose an appropriate encoding method and click Continue. From the Skin menu, select SkinUnderPlayMuteCaptionFull. You need to choose a skin with the caption button included if you want to be able to toggle the captions on and off. Click Continue and then Finish to import the video onto the Stage.

6 ADD THE CAPTION COMPONENT
Now that you have the video component on the Stage, the next step is to add the captioning component. Open the Components panel by pressing Command-F7 (PC: Ctrl-F7). Twirl open the Video folder and drag out FLVPlaybackCaptioning onto the Stage. If there is only one instance of the FLVPlayback component on the stage, the captioning component will automatically hook itself up to the video component. Don’t worry about where you place the component, as it won’t be visible when you view your movie.

7 SET UP THE COMPONENT
The first thing needed to set up the captioning component is to point it to your XML file. With the captioning component selected on the Stage, open the Component Inspector by pressing Shift-F7. Set the Source property to captions.xml. Test the movie by pressing Command-Return (PC: Ctrl-Enter). You should see your captions display as the video plays. You can toggle the captions on and off by pressing the caption icon on the player. If you’re satisfied with the default look of the captions then you can stop here. The rest of this tutorial will explain how you can style the captions.

8 STYLING OVERVIEW
More than likely you’ll want to customize the look and feel of the captions in some way. Any style information needs to be added to the captions.xml file. In the Flash CS3 implementation of the Timed Text format you have the ability to change the font family, font color, font size, background color, text alignment, and text justification. For those familiar with CSS and HTML, styling the captions will be a very straightforward procedure.

9 CUSTOMIZING THE FONT FAMILY
Open up the XML file again in your editor. In the head block remove the “Add styles here” comment line. Enter the code shown in the graphic above. Within the code you’re creating a new style tag with an id of 1 and are setting the fontFamily property to _sans. Unfortunately, you can’t set the font to any old font on your system. You’ll need to set it to one of the device fonts in Flash. Your options include _sans, _serif, and _typewriter.

10 OTHER FONT OPTIONS
You can continue adding new style properties to the style tag. In the example shown above, we’ve added styles for the font color, weight, and size. The color property needs to be set with a valid hexadecimal color value, so we’re using #FFFFFF which will color the text white. We set the font weight property to bold to help it stand out better against the video, and finally, we set the font size property to 16. You should, of course, customize these values to your own liking.

11 CUSTOMIZE THE BACKGROUND
You have a couple of options available for customizing the background for the captions. The background color property can be set to a value of transparent to make Flash not render the background. This can make the captions hard to read depending on the color of your video. You can also set the background to a valid hexadecimal value similar to the font color property. In the code shown above, we set the background to transparent. Now that you’ve defined the style for your captions, you need to assign that style id to each caption by typing style=“1” after the duration time in each paragraph tag.

12 TEST THE FINAL MOVIE
Save the XML file and jump back over to Flash. Test the movie by pressing Command-Return (PC: Ctrl-Enter). You should now see your styled captions display as the movie plays. (To learn more about the full set of options available to you when using the FLVPlaybackCaptioning component, consult the Flash help files.) Taking the time to add captions to your videos is an important step towards improving the accessibility of your Flash movies. In government and educational settings you’ll more than likely be required to implement them into your projects.

More on Captions

In a previous issue of Layers (Sept/Oct 2006, p. 74), we showed how you could add simple captions using embedded cue points for scene changes. This technique works but it’s not best suited for doing full-blown closed-captioning as in this example. It’s much better to keep your caption text in an external file so that they can be easily updated later without having to re-encode the video file. This will also make things much easier if you need to internationalize your content so it can be translated simply by using a text editor. Using the Timed Text format also automates the process of doing captions as you can use the FLVPlaybackCaptioning component.

If you plan on doing a lot of captioning work, you may want to consider some dedicated software to help you out. MAGPie (http://ncam.wgbh.org/webaccess/magpie) is a popular free tool that runs on both Windows and Mac for creating Timed Text captions. Captionate (www.buraks.com/captionate) is a Windows-only tool for doing Flash video captioning and is very popular in the community.

[If you’d like to download the files 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 [GET THE FILES]
Download the project files at the Layers website and unzip it to your desktop. Open the orb.fla file in Flash CS3. This Flash file contains two layers in the Timeline: one is named actions and will contain all of your ActionScript code; the other is named clips and will contain all of the visual assets. The frame rate has been set to 30 to make the animation nice and smooth. In the Library panel (Window>Library), you’ll see an image of a glassy orb created in Photoshop and a movie clip that contains the orb.

2 [DOWNLOAD THE LIBRARY]
The TweenLite library consists simply of an ActionScript file that you’ll be including in your project. Open a browser and navigate to http://blog.greensock.com/tweenliteas3. Click on the Download Now button to download the latest version as a ZIP file. Unzip it to your desktop. Inside of the TweenLiteAS3 folder you should see a folder named “gs.” This folder needs to be in the same

3 [IMPORT THE LIBRARY]
After downloading the TweenLite library, you need to import those files into your Flash project so that you can use them. Select the first keyframe in the actions layer and open the Actions panel (Window>Actions). The way that you import external ActionScript files into your project is by using the import command. Enter the code shown above into the Actions panel. This imports all of the ActionScript files found in the gs folder.

4 [CREATE THE BUTTON MOVIE CLIP]
Now you’ll create the movie clip that you’ll animate using TweenLite. Select the first keyframe in the clips layer and drag out a copy of the orb movie clip from the Library to the Stage. With it selected, give it an Instance Name of “innerOrb” in the Property inspector. We need to wrap this movie clip inside of another, so press the F8 key to open the Convert to Symbol dialog. Give this new movie clip a name of “orbButton” and then click OK. Give this newly created movie clip an Instance Name of “orb1” in the Property inspector.

5 [CREATE RECTANGLE FOR HIT STATE]
Double-click on the orbButton movie clip on the Stage to enter edit mode. We need to create a hit state for the button that will trigger the animation. Double-click Layer 1, rename it “orb,” and click the Insert Layer icon to create a new layer above it. Rename this layer “hit.” Get the Rectangle tool (R) and draw a rectangle over the innerOrb movie clip. It should cover the clip, so look at the Property inspector to make sure it’s positioned roughly at X:0 and Y:0 on the Stage. Since this rectangle is only for the hit state and shouldn’t be visible, remove any Stroke color and set the Fill Alpha value to 0% in the Color panel (Window>Color).

6 [CONVERT RECTANGLE TO MOVIE CLIP]
With the rectangle still selected, press the F8 key to open the Convert to Symbol dialog. Name it “hit,” select Movie Clip as the Type, and click OK. Now give it an Instance Name of “hit” in the Property inspector. In the final movie, when the user rolls over the hit movie clip, the orb will animate up, and when they roll off, the orb will return to its original position. Click Scene 1 under the Timeline to go back to the main Timeline.

7 [IMPORT BOUNCE & EASING EFFECTS]
Select the first keyframe in the actions layer and open up the Actions panel. The first thing you’ll need to do is import some ActionScript classes that describe the various types of easing effects that you can use with TweenLite. These include effects such as bounce and elastic easing. Type in the second line of code you see above into the Actions panel directly below the import statement that you entered in Step 3. With these two ActionScript libraries imported into your project, you can now begin writing the code to handle the rollover and rollout mouse events.

8 [TELL FLASH TO LISTEN TO THE MOUSE]
There are two mouse events that Flash needs to listen for. The first is the rollover event that gets fired anytime the user moves their mouse over the object, and the second is the rollout event that fires when the user moves their mouse off of the object. Type the next two lines of code into the Actions panel. In this code you’re telling Flash to call the orbOver function when the rollover event fires. In a similar fashion you’re telling Flash to call the orbOut function when the rollout event fires.

9 [WRITE THE ORBOVER FUNCTION]
Enter the next few lines of code into the Actions panel to assign your function. When the orbOver function is called, the TweenLite.to() function is called to make the animation start. The first thing we pass to the function is the object we want to animate. In this case, it’s the innerOrb clip. The second item is the time in seconds that we want the animation to take. Lastly, we pass in an object containing the destination values for whatever properties that we want to animate. Here we’re animating the Y position to –50. The ease property is set to Exponential.easeOut, which gives a strong easing effect.

10 [WRITE THE ORBOUT FUNCTION]
Type the next function into the Actions panel. When the orbOut function is called we’re again calling the TweenLite.to() function, but this time we’re animating the orb back down to its original Y position. Another difference is that we’re using Bounce.easeOut as the easing type, which will make the orb bounce back into place. Test the movie by hitting Command-Return (PC: Ctrl-Enter) and roll your mouse over the orb to see the animation. In the next step you’ll duplicate your work to add some more orbs.

11 [ADD MORE ORBS]
Now that you’ve successfully animated a single orb, you can duplicate your work to create a row of orbs. This could be useful as a site navigation element or quasi-Dock-look from a Mac. Click the clips layer in the Timeline, drag out additional orbButton movie clips from the Library panel onto the Stage, and align them as shown. Give each an Instance Name of orb along with the next number in the sequence. For instance, the next orb would have an Instance Name of “orb2,” etc. In this example we’ve added a total of five orbs but you can add however many you like.

12 [DUPLICATE YOUR CODE]
For each orb that you added to the Stage in Step 11, you’ll need to duplicate some of the ActionScript code. Click the first frame in the actions layer, copy lines 4 and 5, paste these lines for each additional orb, and change the Instance Name for the two events. The functions were written in such a way that they don’t need to be duplicated. All of the orbs will call those two functions. That way if you want to change something in the animation, you only need to do it in a single place.

13 [CONTINUE THE EXPERIMENT!]
I’ve shown you one effect out of potentially thousands that are possible using this code. You can play with animating different movie clip properties besides the Y property. You can also change the animations duration and/or easing types to achieve a wide range of different effects. TweenLite is just one community ActionScript library that makes things much easier for Flash developers. You should never reinvent the wheel unless you really have to.

1 SET UP YOUR MOVIE
Open Flash CS3 and from the Welcome screen, choose Flash File (ActionScript 3.0) to create a new movie. The newly improved UI components can be used only in ActionScript 3-based Flash projects. In the Property inspector, set the frame rate to 30 fps. You can leave the Size and Background color of the movie at their default values. Save the file somewhere on your hard drive as textSizer.fla.

2 SET UP YOUR LAYERS
You’ll only need two layers in this example. Rename the first layer “actions” and click on the Lock icon to lock it. This layer will hold all of the ActionScript code. It’s considered good practice to lock this layer to prevent you from placing any visual assets on it. Click the Insert Layer icon to create a new layer above the actions layer, and rename it “components.” This layer will hold all of the UI components in the movie.

3 ADD THE TEXTAREA COMPONENT
Select the first frame of the components layer and choose Window>Components. In the Components panel, twirl down the User Interface folder to see a list of all the available UI components. Click on the TextArea component and drag it onto the Stage. In the Property inspector, set the Width to 515 and the Height to 340 (make sure the Width and Height aren’t linked together by clicking on the Lock icon). Set the location to x: 17 and y: 18, and give it an Instance Name of “ta.”

4 ADD THE SLIDER COMPONENT
The next component to add is a slider. In the Components panel, click-and-drag a Slider onto the Stage. In the Property inspector, give it a Width of 180. Set the location to x: 280 and y: 380, and give it an Instance Name of “slyda.” With the component still selected, choose Window>Component Inspector and set the following values: Maximum: 100; Minimum: 5; and Value: 12.

5 ADD THE NUMERICSTEPPER COMPONENT
The last component you’ll need to add is a NumericStepper. This component allows you to adjust numeric values by either changing the number in the text field or by clicking on the up and down arrows. Drag out the component onto the Stage. In the Property inspector, set the Width of the component to 55. Set the location to x: 477 and y: 370, and give it an Instance Name of “ns.” With the component still selected, return to the Component Inspector and set the following values: Maximum: 100; Minimum: 5; and Value: 12.

6 IMPORT THE COMPONENT EVENTS
Now you’ll start writing the ActionScript code needed to wire up the components. Select the first keyframe of the actions layer and press Option-F9 (PC: F9) to open the Actions panel. The first piece of code is an import statement to pull in some external ActionScript classes for handling the component events. Some classes are imported automatically by Flash and others will need to be imported manually. Enter the code as shown above.

7 POPULATE THE TEXTAREA
The next step is to fill the TextArea component with some text. You can fill it with your own content but in our example, we’ll fill it with “Lorem Ipsum” filler text. This type of text is used by designers when creating design comps. (You can generate Lorem Ipsum text at www.lipsum.com.) In the Actions panel, set the text property of the TextArea as shown above. Make sure to begin on Line 3, enter ta.text = “, paste your text, then add “; and press Return (PC: Enter).

8 CREATE A TEXTFORMAT OBJECT
To modify the text properties of the TextArea component, you need to create a new instance of the TextFormat class. This class allows you to modify things such as font family, style, and color. Enter the code as shown above into the Actions panel. We used Myriad Pro as the font but you can use whatever font you want. The font size of 12 matches the current values of both the Slider and NumericStepper components.

9 LISTEN TO THE SLIDER
Whenever the slider changes its value, we need to respond and adjust the size of the text in the TextArea. The event you’ll need to listen for is the thumb drag event. Enter the code as shown above into the Actions panel. The first line of the code sets up the event listener so that whenever the event happens, it will call the slydaChange function. The remaining code is the slydaChange function block.

10 HANDLE SLIDER CHANGES
Now that you’ve set up the slider’s event listener, it’s time to write the code that will modify the text size based on the current slider value. Enter the code shown above into the Actions panel. The first line sets the size of the TextFormat object equal to the value of the slider. To see the changes, you need to call the setStyle method of the TextArea and pass in the TextFormat object as shown in the second line of code. The last line of code sets the NumericStepper to the same value as the slider.

11 LISTEN TO THE NUMERICSTEPPER
The NumericStepper component will fire a change event whenever the value is changed in the embedded text box or if either of the arrow buttons are clicked. Add the code shown above into the Actions panel. The first line of code sets up the event listener so that it calls the nsChange function whenever the value changes. The remaining lines of code set up the nsChange function.

12 HANDLE NUMERICSTEPPER CHANGES
Now you’ll essentially be doing the same thing for the NumericStepper component as you did for the Slider component in Step 10. Enter the code shown above into the Actions panel. The first line sets the size of the TextFormat class to the current value of the stepper. The second line applies the modified TextFormat object to the TextArea to change the text size. The third line sets the value of the Slider equal to the current value of the stepper.

13 TEST THE APPLICATION
Test the application by choosing Control>Test Movie to see the finished result. You should be able to drag the slider and see the text size dynamically change, as well as seeing the value in the NumericStepper change. Making changes to the NumericStepper should also cause the text size to change, and also change the position of the slider. You should now have a good understanding of how to use the rich component set in Flash CS3.

[If you’d like to download the files used in this tutorial to practice these techniques, click here. All files are for personal use only.]

1 GET THE FILES
Download the exercise files for this tutorial at www.layersmagazine.com and unzip them to your desktop. The files consist of a QuickTime video named captions.mov and an XML file named captions.xml, which will serve as the template for the caption information. The new FLVPlaybackCaptioning component in Flash allows you to easily incorporate captions from an external Timed Text (TT) XML file. The Timed Text format is a standards-based method of representing captioning information. The first step in the process is to write this XML file with your captions.

2 OPEN THE CAPTION FILE
Open captions.xml in your favorite editor. We’re using Dreamweaver CS3 as it has many handy features for editing XML files. You can use this XML file as a template for your future projects. Lines 1 and 2 are required and should never change. Lines 4 thru 8 define the head block, which contains styling information for the captions. Lines 10 thru 14 define the body block where your captions will be entered. Line 12 shows the format that the captions use followed by the actual caption. This paragraph tag can contain a begin time, a duration time, and a style definition.

3 ENTERING THE CAPTIONS
Open up the video file in a player that displays the playhead time. You’ll need to play the video and each time there is an appropriate break for a caption, pause the video and enter the information in the XML file. Unfortunately there is no easy way of automating this process without buying additional software. Each caption should be on its own line using the paragraph tag as shown in line 12 in the previous step. For each caption, enter the begin time and a duration time in the format of HH:MM:SS.m. For a complete list of possible parameters, look in the Flash help files.

4 SET UP THE FLASH MOVIE
Open Flash CS3 Professional and from the welcome screen, choose Flash File (ActionScript 3.0). Rename the first layer on the timeline to “video,” as it will contain the video and captioning components, and click anywhere on the Stage. In the Property inspector change the Frame Rate of the movie to 30. Create a new folder for your project and save this Flash file as captions.fla. Then, move your edited captions.xml file into this folder, as well.

5 IMPORT THE VIDEO
Select the first keyframe in the video layer. Select File>Import>Import Video. In the Import Video dialog, browse to the captions.mov video file and click Continue. Choose Progressive Download From a Web Server as the deployment type for your video, which will keep it externally from your Flash file and is appropriate for most situations. Click Continue. Choose an appropriate encoding method and click Continue. From the Skin menu, select SkinUnderPlayMuteCaptionFull. You need to choose a skin with the caption button included if you want to be able to toggle the captions on and off. Click Continue and then Finish to import the video onto the Stage.

6 ADD THE CAPTION COMPONENT
Now that you have the video component on the Stage, the next step is to add the captioning component. Open the Components panel by pressing Command-F7 (PC: Ctrl-F7). Twirl open the Video folder and drag out FLVPlaybackCaptioning onto the Stage. If there is only one instance of the FLVPlayback component on the stage, the captioning component will automatically hook itself up to the video component. Don’t worry about where you place the component, as it won’t be visible when you view your movie.

7 SET UP THE COMPONENT
The first thing needed to set up the captioning component is to point it to your XML file. With the captioning component selected on the Stage, open the Component Inspector by pressing Shift-F7. Set the Source property to captions.xml. Test the movie by pressing Command-Return (PC: Ctrl-Enter). You should see your captions display as the video plays. You can toggle the captions on and off by pressing the caption icon on the player. If you’re satisfied with the default look of the captions then you can stop here. The rest of this tutorial will explain how you can style the captions.

8 STYLING OVERVIEW
More than likely you’ll want to customize the look and feel of the captions in some way. Any style information needs to be added to the captions.xml file. In the Flash CS3 implementation of the Timed Text format you have the ability to change the font family, font color, font size, background color, text alignment, and text justification. For those familiar with CSS and HTML, styling the captions will be a very straightforward procedure.

9 CUSTOMIZING THE FONT FAMILY
Open up the XML file again in your editor. In the head block remove the “Add styles here” comment line. Enter the code shown in the graphic above. Within the code you’re creating a new style tag with an id of 1 and are setting the fontFamily property to _sans. Unfortunately, you can’t set the font to any old font on your system. You’ll need to set it to one of the device fonts in Flash. Your options include _sans, _serif, and _typewriter.

10 OTHER FONT OPTIONS
You can continue adding new style properties to the style tag. In the example shown above, we’ve added styles for the font color, weight, and size. The color property needs to be set with a valid hexadecimal color value, so we’re using #FFFFFF which will color the text white. We set the font weight property to bold to help it stand out better against the video, and finally, we set the font size property to 16. You should, of course, customize these values to your own liking.

11 CUSTOMIZE THE BACKGROUND
You have a couple of options available for customizing the background for the captions. The background color property can be set to a value of transparent to make Flash not render the background. This can make the captions hard to read depending on the color of your video. You can also set the background to a valid hexadecimal value similar to the font color property. In the code shown above, we set the background to transparent. Now that you’ve defined the style for your captions, you need to assign that style id to each caption by typing style=“1” after the duration time in each paragraph tag.

12 TEST THE FINAL MOVIE
Save the XML file and jump back over to Flash. Test the movie by pressing Command-Return (PC: Ctrl-Enter). You should now see your styled captions display as the movie plays. (To learn more about the full set of options available to you when using the FLVPlaybackCaptioning component, consult the Flash help files.) Taking the time to add captions to your videos is an important step towards improving the accessibility of your Flash movies. In government and educational settings you’ll more than likely be required to implement them into your projects.

more on captions

In a previous issue of Layers (Sept/Oct 2006, p. 74), we showed how you could add simple captions using embedded cue points for scene changes. This technique works but it’s not best suited for doing full-blown closed-captioning as in this example. It’s much better to keep your caption text in an external file so that they can be easily updated later without having to re-encode the video file. This will also make things much easier if you need to internationalize your content so it can be translated simply by using a text editor. Using the Timed Text format also automates the process of doing captions as you can use the FLVPlaybackCaptioning component.

If you plan on doing a lot of captioning work, you may want to consider some dedicated software to help you out. MAGPie (http://ncam.wgbh.org/webaccess/magpie) is a popular free tool that runs on both Windows and Mac for creating Timed Text captions. Captionate (www.buraks.com/captionate) is a Windows-only tool for doing Flash video captioning and is very popular in the community.

[If you’d like to download the project file used here to follow along with this tutorial (as well as preview the final effect), click here . All files are for personal use only.]

1 OPEN THE ILLUSTRATION
In Illustrator CS3, choose File>Open and navigate to the butterflyDream.ai download file. This file has lots of different design elements that we’ll turn into symbols to use in Flash CS3. This workflow has been helped tremendously by allowing designers to create Movie Clips directly from within Illustrator. Illustrator artwork will also now render perfectly inside Flash, which it certainly didn’t do before CS3. Now let’s get started by creating our symbols.

©ISTOCKPHOTO/BRANKA POPOVIC

2 CREATE THE BACKGROUND SYMBOL
With the Selection tool (V), click the green background to select it and all of the white elements, then press the F8 key to make it a symbol. In the Symbol Options dialog, choose Movie Clip and name it “background.” Click OK and then open the Symbols panel (Window>Symbols) and you’ll see your background symbol in the panel. (You can already see the enhanced Flash integration because you can now create Flash symbols from within Illustrator.)

3 CREATE A BUTTERFLY SYMBOL
Next, choose specific design elements on the artboard to turn into symbols. Choose one of the butterflies and once again press F8 to open the Symbol Options dialog. As we’ll be scaling this symbol in our animation, we need to set the Flash Registration point to the center, as shown in the graphic. This will make the symbol scale up from the center when we animate it in Flash.

4 CREATE THE REMAINING SYMBOLS
Now go ahead and create symbols from the other design elements that you plan to use in your animation. You can choose your own set of elements or you can choose the ones that we did (shown here). Make sure that you set the Flash Registration point of the symbol to the center if you plan on scaling it in Flash; otherwise, you can just leave it in the upper-left corner.

5 ASSEMBLE YOUR MASTERPIECE
Now that you’ve created all the symbols, you can select and delete everything that’s on the artboard. This will give you a clean slate to begin assembling your final scene. First, drag the background symbol from the Symbols panel onto the artboard and align it on the artboard. Then you can assemble your scene however you like by dragging symbols onto the artboard and positioning them where you want. When you’re finished, Save the file and open Flash CS3. Here’s our finished scene.

6 CREATE A NEW FLASH FILE
In the Flash CS3 welcome dialog, under the Create New section, choose Flash File (ActionScript 3.0), which creates a blank Flash document that, when published, will be playable in Flash Player 9 and above. Go ahead and change the Frame Rate of the movie to 30 fps in the Property inspector—this ensures that our animations will be nice and smooth. That’s all we need to set up our Flash document. Now we can import our Illustrator file.

7 IMPORT THE ILLUSTRATOR FILE
Choose File>Import>Import to Stage to open the Import dialog, then choose your Illustrator file, and click open. This will launch the Illustrator Import dialog, where you can specify all of the different import options that are available. Because we did most of our prep work in Illustrator, we only need to check the second box (circled) to ensure that our Flash movie will have the same dimensions as the Illustrator file. Click OK to import the Illustrator file.

8 DISTRIBUTE SYMBOLS TO LAYERS
Notice that all of the symbols came into Flash on the same layer. We could have put them on different layers in Illustrator to remedy this, but I prefer this faster approach: Select all of the items on the Stage by pressing Command-A (PC: Ctrl-A). Now Control-click (PC: Right-click) on the items and choose Distribute to Layers. This will take each symbol on the Stage and place it on its own layer in the correct stacking order. You can delete Layer 1, which should now be empty. Also lock the background layer so you don’t accidentally select it.

9 SET UP THE TIMELINE
Next, we need to add some frames to the Timeline to begin animating. Select frame 90 on all layers by clicking-and-dragging down the entire layer stack on frame 90. Press the F5 key to insert new frames on all layers—these new frames equal 3 seconds because we set our movie’s frame rate to 30. You can add or remove frames based on how long you want your animation to be.

10 CREATE A MASK LAYER
Now choose a layer that you want to animate using a mask; for our example, we chose one of the green branches. Click the Insert Layer icon to create a new layer above this layer and rename it “mask.” Click on the Rectangle tool (R) in the Toolbox, then choose a Fill color that won’t be mistaken as part of the artwork, and draw a rectangle at the bottom of the symbol (as shown). Make sure that this rectangle isn’t covering any part of the symbol that you’re revealing with the mask.

11 SCALE THE MASK SHAPE
Let’s insert a new keyframe on the mask layer at frame 15 by selecting the frame and pressing the F6 key. Now Control-click (PC: Right-click) on the rectangle, choose Free Transform, and scale the rectangle up so that it completely covers the symbol, creating the two endpoints for our mask animation. (Note: Simply scaling a rectangle mask over a symbol is a quick-and-dirty way to reveal an item in Flash. Of course, you can create a more complicated mask reveal, but this is fine for our example.)

12 CREATE SHAPE TWEEN
Now that the endpoints of the mask are set, we can fill the other frames of our animation using a shape tween: Control-click (PC: Right-click) anywhere between the two keyframes and select Create Shape Tween. With the tween selected, set its Ease to 100 in the Property inspector to give it a more realistic movement.

To make this an actual mask layer, Control-click (PC: Right-click) on the layer name and choose Mask. Now if you test the movie (Control>Test Movie) you should see the item reveal itself.

13 SCALE THE PINWHEEL
Next, we’ll look at how to scale up one of the symbols (we’re using the pinwheel in our graphic). Select one of the circular symbols on the Stage at frame 1 of the Timeline and open the Transform panel (Window>Transform). Check the Constrain box and then set the scale down to 0. Now insert a new keyframe on the layer at frame 10 and another at frame 20. With frame 20 selected, set the scale back up to 100%.

14 CREATE THE SCALE ANIMATION
Now Control-click (PC: Right-click) anywhere between frames 10 and 20, choose Create Motion Tween, and then set the Ease to 100 in the Property inspector. Also select CW from the Rotate pop-up menu in the Property inspector to make the symbol rotate once during the animation.

From this point, just continue animating using the techniques shown above. Be creative and be sure to experiment.