Preventing animation problems in Flash

This article describes situations to avoid and best practices to follow to ensure that your Timeline animations play acceptably in Adobe Flash Professional. These tips are also helpful for creating modular projects that are easier to update when shared with other team members. Check out the strategies listed below to animate elements efficiently and resolve issues that can occur when creating tweens in the Timeline.

One of the most common ways to break a classic motion tween animation in Flash Professional is to delete the beginning or ending keyframe in the Timeline. Keyframes store the information about the object being animated to track the changes, so once an active keyframe is removed, the animation stops working.

Another way that both classic and the newer type of motion tweens are broken involves deleting the tweened symbol from the Library panel. When this happens, the dark diamond icon for the property keyframe is replaced by a hollow dot, indicating that the target object is no longer present in a newer motion tween. However, in this case, you can apply a new target object to the existing motion tween to fix it.

Classic tweens work similarly, but display a dashed line when a tween has been broken. If you delete the symbol for a classic motion tween, you'll need to delete and recreate the classic motion tween to fix the issue.

If you notice issues with broken tweens in your Timeline, try choosing Edit > Undo repeatedly to see if you can backtrack and undo the recent changes to return both classic and newer motion tweens to a working state.

To get more information about tweens, see Identifying animations in the Timeline in the Flash Professional online documentation.

When you drag an instance to the Stage and use it to create a tween animation, Flash references the symbol name to track the movement on the Stage. If you delete symbols that are in use within your project, any tweens that referenced that symbol will break.

Additionally, you can break existing tweens by renaming symbols in the Library panel. Always convert graphics to symbols and name them descriptively before creating animations in the Timeline.

Make a habit of always naming each symbol as soon as it is created. See the information about naming conventions in the ActionScript section of this article for details about naming instances and common naming conventions.

If you allow Flash to name the symbols with the default names—symbol1, symbol2, and so on—then it makes the project much more difficult to understand and update. Additionally, if you later choose to rename the symbols after animating them, you can break the tween animations.

Follow best practices for naming to make assets in the Library easier to navigate.

Although it may be tempting to position a movie clip off the Stage while it is playing, so that it can fly into view at the appropriate time, it demands extra system resources when the movie clip is running. This practice is not recommended because it can slow the performance of a Flash project. This is especially true if multiple animations are kept running even while they are not within the visible area of the movie at run time. Additionally, it is not a good idea to set running animations to hidden, rather than stopping the animation when you want it to disappear.

Using ActionScript 3, you can set the visible property of an instance to false . You can also set the object's alpha property to 0.

If you want an object to slowly fade out, you can animate the instance's alpha value to 0. Once the animation is finished, always set the the object's visible property to false .

It's important to set the visible property to false because visible objects still respond to mouse events. A hidden instance could also potentially obscure items below it in the stacking order from receiving user interactions. Visible objects, regardless of their alpha setting, also consume more resources.

To save the most resources, completely remove objects from the display list instead of hiding them with ActionScript. This strategy enables you to show and hide symbol instances programmatically as desired. To get more details, read Display list programming in ActionScript 3.

When you create a guide layer, you add a path that is attached to an existing tween animation. In many cases, if you draw the path close to the animated object's starting and end point, the guide path will snap to the symbol instance's transformation point. However, sometimes it is necessary to manually align the beginning and end points so that the instance is linked to the path.

Start by selecting the first keyframe of the tween. As needed, zoom into the Stage so that you can see the beginning point of the path and the transformation point of the instance. Drag the instance to the path (if it is not already aligned) to snap the points together.

Repeat this step by selecting the last keyframe in the tween. Verify that the end point of the path is snapped to the transformation point of the instance.

Zoom out and scrub the playhead (drag it from left to right across the Timeline) to check the animation and confirm that the animation is tied to the path on both ends.

To get more details about working with guide layers, see the Guide layers section of the Flash glossary.

It is a best practice to set the frame rate as low as possible, because a high fps setting tends to decrease performance. Additionally, movie clips and rich media (audio and video) may stutter if the fps is set too high for Flash Player to display the content, because it has less time to draw the objects on the Stage and process the ActionScript.

However, you also want to avoid setting the fps so low that animations and other content plays so slowly that a project appears non-responsive or broken.

A good starting point is 24 fps for animations. If you are incorporating digital video, a frame rate of 30 often works best because it is closest to the speed the video content is usually displayed. (Video footage is often shot at the equivalent of 29.97 fps).

If you are designing an application that displays a user interface, without video or animations, you may find the content plays back acceptably at 12 fps.

Note: If you are developing a project that is mostly a UI but includes intermittent animations, you can write ActionScript code to change the movie's frame rate at runtime.

Before creating an animation with three or more parts, take some time to imagine how the pieces could be separated in a way that makes the project easier to manage so that you can drill down to make changes to tweak a specific area.

For example, consider an animation of a dog. In its most basic setup, a single static drawing of a dog is tweened across the Stage, moving its x location from one side to another. If this is all that is required (such as a background element for a scene) then this could be created as a single movie clip named dog.

Now imagine that the dog's face is also animated. The two eyes blink periodically to create a secondary movement as the dog slides across the Stage. In this case, it might make sense to create a single movie clip for the right eye that blinks named dog_eye_right. After creating the right eye animation, you can duplicate it to create the left eye (dog_eye_left). Both eye movie clip symbol instances are nested inside the larger movie clip named dog .

When it comes to determining how many movie clips to nest inside each other, it really depends on the project. If the dog is going to be more complex (smile and pant as he runs by), then it might be best to create additional separate movie clips (dog_mouth and dog_tongue) that are nested within a movie clip named dog that also contains the left and right eye movie clips.

While it might seem more complicated to set up, this strategy has many advantages. If your client wants to change one aspect (such as the dog's eye color) you can quickly double-click the dog movie clip to enter symbol-editing mode. Double-click the dog_eye_left movie clip to edit it, and then select the eye shape and change its fill color. Move back up the hierarchy to select to the dog movie clip again, and then double-click the dog_eye_right movie clip to edit its fill color as well.

To learn more about nested movie clips, read About nested movie clips and parent-child hierarchy in the Flash Professional online documentation. To get tips for animating complex characters, read Designing and animating characters in Flash on the Adobe Developer Connection.

Click the lock option in the Timeline to lock the layers that you don't want to move accidentally as you are animating other objects on the Stage. While objects are locked, they cannot be selected or repositioned.

You can toggle individual layers to lock and unlock them by clicking the dot or lock icon in the lock column of the Timeline or by clicking the top lock icon to lock or unlock all of the layers at once (see Figure 1).

When building complex animations, it is ideal to lock all of the other layers that you are not currently working with to avoid accidentally moving instances on the Stage. However, if you do accidently move the wrong objects, choose Edit > Undo as soon as possible to fix repositioning issues.

Flash Professional CS5.5 includes the Motion Editor and a wide range of prebuilt eases that you can choose from to make movements appear realistically. In the earlier versions of Flash, you could only choose between a percentage of Ease In or Ease Out. However, now you can create very complex movements with relatively simple tweens by simply applying a custom easing setting (see Figure 2).

The Motion Editor enables you to create more realistic animations because you can assign a custom easing to each property that is changing during the animation. So if a star is moving across the Stage and simultaneously rotating, you can apply one ease setting to the rotation and a second ease setting to the horizontal movement. You can also use the drawing tools to create your own paths to create custom ease settings.

To learn more about applying easings to animated properties, read Easy animation with the Motion Editor in Flash.

Now that you've learned some approaches to creating animations with Flash, see the following articles to get more information about working with tweened objects:

• Animation Learning Guide for Flash
• Creating a simple animation in Flash
• Using Flash Professional: Animation basics (Flash documentation)

Refer to Avoiding common authoring mistakes to find links to other articles in this series.