Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

Building Complexity in Flash MX

This sample chapter describes approaches to building complex animations through layering, combining, and extending basic Flash capabilities.
This chapter is from the book

The key to creating complex animations in Flash is building them from simpler parts. Just as the movement of a runner is essentially a collection of rotating limbs, you should think of your Flash project as being a collection of simpler motions. Isolating individual components of a much larger, complicated motion allows you to treat each component with the most appropriate technique, simplifies the tweening, and gives you better control with more refined results.

To animate a head that's turning quickly to face the camera, for example, you would first consider how to simplify the animation into separate motions. Animating the entire sequence at the same time would be difficult, if not impossible, because the many elements making up the head change in different ways as they move. The outline of the head could be a frame-by-frame animation to show the transformation from a profile to a frontal pose. Some of the features of the face could be symbol instances that you squash and stretch in a motion tween to match the turn of the head. And the hair could be a shape tween that lets you show its flow, swing, and slight bounce-back effect when the head stops.

Learning to combine different techniques and break animation into simpler parts not only solves difficult animation problems, but also forces you to use multiple layers and establish symbols of the component parts. By doing so, you set up the animation so that it is easy to manage now and revise later.

This chapter describes approaches to building complex animations through layering, combining, and extending basic Flash capabilities.

Motion-Tweening Strategies

Motion tweening lets you interpolate any of the instance properties of a symbol, such as its location, size, rotation, color, and transparency. Because of its versatility, motion tweening can be applied to a variety of animation problems, making it the foundation of most Flash projects. Because motion tween-ing deals with instance properties, it's a good idea to think of the technique in terms of instance tweening. Whether or not actual motion across the Stage is involved, changing instances between keyframes requires motion tweening. Thinking of it as instance tweening will help you distinguish when and where to use motion tweening as opposed to shape tweening or frame-by-frame animation.

Creating seamless animated loops

Animated loops are important because they provide a way to continue motion by defining only a few keyframes. You see animated loops in interface elements such as rotating buttons and scrolling menus, as well as in cyclical motions such as a person walking, a butterfly's wings flapping, or a planet revolving. The important point in making seamless loops is making sure that the last and first keyframes are identical (or nearly identical) so that the motion is continuous.

In this section, you consider ways of making two of the most common types of animated loops: scrolling graphics and graphics on closed motion paths.

Scrolling graphics are familiar effects in interface elements such as menu options that cycle across the screen. You can also use this technique to create background animations that loop endlessly, such as a field of stars behind a spaceship or passing scenery from a car window.

To create a continuous scrolling graphic:

  1. Create the necessary elements that will scroll across the Stage, and place them as they would appear at any given moment (Figure 1.1).

    Figure 1.1Figure 1.1 Five objects placed across the Stage as they would appear when they begin scrolling across from right to left. The objects could be buttons or simple graphics.

  2. Select all the elements, and choose Modify > Group (Figure 1.2).

    Figure 1.2Figure 1.2 Group the objects by choosing Modify > Group.

  3. Copy the group, and paste the copy next to the original group to create a long band of repeating elements. If your elements scroll from right to left, for example, place the second group to the right of the first group (Figure 1.3). Your scrolling elements usually will be larger than the Stage, but if your first group is smaller, you'll need to duplicate it more than once to create a repeating pattern that extends beyond the Stage (Figure 1.4).

    Figure 1.3Figure 1.3 Create a pattern by copying and pasting the group.

    Figure 1.4Figure 1.4 This group has only two objects. Repeat the groups to extend well past the Stage.

  4. Select all your groups, and convert your selection to a graphic symbol (Figure 1.5). An instance of the symbol remains on the Stage, allowing you to apply a motion tween.

    Figure 1.5Figure 1.5 Create a graphic symbol of the entire pattern.

  5. Create a keyframe at a later point in the Timeline.

  6. Select the instance in the last keyframe, and move it so that the second repeated group of elements aligns with the first. When you move your instance, use its outlines to match its previous position (Figure 1.6).

    Figure 1.6Figure 1.6 The second repeated group is moved where the first group was originally.

  7. Apply a motion tween between the keyframes.

  8. Insert a new keyframe just before the last keyframe, and remove the last frame (Figure 1.7). This technique makes the animation not have to play two identical frames (the first and the last) and creates a smooth loop.

    Figure 1.7Figure 1.7 Create a new keyframe (top), and delete the last keyframe (bottom).

A motion path in a guide layer provides a way to create smooth movement along a path from the beginning point to the end point. If you make the end point of the path match the beginning point, you can create a seamless loop and effectively close the motion path.

To make a closed motion path:

  1. Create a graphic symbol, and place an instance of it on the Stage (Figure 1.8).

    Figure 1.8Figure 1.8 An instance of a graphic symbol is placed on the Stage for motion tweening along a path.

  2. Create a guide layer by clicking the Add Motion Guide icon below your layers. A new guide layer appears, and your first layer becomes a guided layer (Figure 1.9).

    Figure 1.9Figure 1.9 The guide layer above Layer 1 will contain the motion path.

  3. Draw an empty ellipse in the guide layer.

  4. With the Snap to Objects modifier for the arrow tool turned on, grab your instance by its registration point and place it on the path of the ellipse (Figure 1.10).

    Figure 1.10Figure 1.10 The registration point of the earth instance snaps to the motion path.

  5. Add frames to both layers, and create a new keyframe in the last frame of the guided layer. The first and last keyframes remain the same to create the animated loop (Figure 1.11).

    Figure 1.11Figure 1.11 The position of the earth at keyframe 1 and at keyframe 18 in Layer 1 are the same.

  6. Select the middle frame of the guided layer, and insert a new keyframe, moving your instance in this intermediate keyframe to the opposite side of the ellipse (Figure 1.12).

    Figure 1.12Figure 1.12 The registration point of the earth in the middle keyframe is positioned at the far side of the ellipse.

  7. Select all the frames between the three keyframes, and in the Property Inspector, choose Motion Tween. Your instance now travels along the path of the ellipse, but it returns on the same segment of the ellipse rather than making a complete circuit (Figure 1.13).

    Figure 1.13Figure 1.13 The earth bounces back and forth on the same segment of the ellipse.

  8. Grab the instance in the last keyframe of the guided layer, and move it slightly closer to the instance in the middle keyframe while maintaining its registration point on the path (Figure 1.14).

    Figure 1.14Figure 1.14 The three keyframes of the earth. The first instance is closer to the middle instance on the top path of the ellipse, and the last instance is closer to the middle instance on the bottom path of the ellipse.

  9. Flash tweens two instances by taking the most direct path, so by shortening the distance between the last two keyframes on the bottom segment of the ellipse, you force Flash to use that segment of the ellipse.

    Your instance now travels along both sides of the ellipse (Figure 1.15).

    Figure 1.15Figure 1.15 The earth moves around the closed path.

    TIP

    You can accomplish the same kind of looping effect by deleting a small segment of your path. When you create a gap, you essentially make an open path with beginning and end points for your instance to follow (Figure 1.16).

    Figure 1.16Figure 1.16 A tiny gap provides beginning and end points for your motion path.

Using multiple guided layers

A single guide layer can affect more than one guided layer, letting multiple motion tweens follow the same path. This approach is good for creating complex animations that require many objects traveling in the same direction, such as marching soldiers, blood cells coursing through an artery, rapid gunfire, or a stampeding herd of cattle. Although the individual instances may vary slightly, you maintain control of their general direction with a single guide layer.

Several leaves blowing across the Stage could be animated to follow one guide layer, for example. The guide layer establishes the wind's general direction; the leaves could have slight individual variations by being offset in separate guided layers. Just by changing the path in the guide layer, you make all the leaves change accordingly. Using a single path to guide multiple layers this way is an example of how you build complex animations (in this case, swirling leaves) from very simple parts (one guide layer and one leaf symbol).

To assign a second guided layer to a guide layer:

  • Select the first guided layer, and click the Insert Layer icon. A second guided layer appears above the first (Figure 1.17).

    Figure 1.17Figure 1.17 Selecting the guided layer (Layer 1 above) and inserting a new layer automatically modifies the new layer as a guided layer (Layer 3).

    or

  • Drag an existing normal layer below the guide layer. The normal layer becomes a guided layer (Figure 1.18).

    Figure 1.18Figure 1.18 A normal layer (Layer 3) can be dragged below the guide layer to become a guided layer.

To offset a second guided layer:

  1. Create the second guided layer as described earlier in this section, and drag in an instance that you want to tween (Figure 1.19).

    Figure 1.19Figure 1.19 An instance on the Stage in the leaf 2 layer.

  2. Select the instance in the second guided layer, and choose the Free Transform tool in the Toolbox. Control handles appears around your instance, along with a white circle in the center marking the current registration point (Figure 1.20).

    Figure 1.20Figure 1.20 Select the instance in the second guided layer, and select the Free Transform tool in the Toolbox.

  3. Drag the registration point to a new position. An instance's registration point can lie anywhere, even outside the boundaries of the Free Transform tool's control handles. The new registration point will be set where you just placed it (Figure 1.21).

    Figure 1.21Figure 1.21 Change the registration point of your instance by moving the white circle.

  4. Now select the Arrow tool to exit the Free Transform tool, and make sure that the Snap to Objects modifier is turned on.

  5. Grab the instance by its new registration point, and attach it to the beginning of the guide-layer path (Figure 1.22).

    Figure 1.22Figure 1.22 The registration point of the leaf, shown selected here, is attached to the path.

  6. Insert a new keyframe into the last frame. The newly created instance in the last keyframe will have the same registration point as the edited instance.

  7. Now attach the instance in the last keyframe to the end of the guide-layer path, and apply a motion tween between the two keyframes. The motion tween in the second guided layer follows the same path as the first guided layer. The new registration point of the instance in the second guided layer, however, offsets the motion (Figure 1.23).

    Figure 1.23Figure 1.23 The two tweens follow the same motion path. The second leaf is offset because of its moved registration point.

To vary the timing of a second guided layer:

  1. Continuing with the preceding example, drag the first keyframe of the second guided layer to a later point in time. The motion tween for that guided layer will begin after the first one starts, but both of the animations will end at the same time (Figure 1.24).

    Figure 1.24Figure 1.24 The leaf in the leaf 2 layer follows the motion path only after the one in the leaf 1 layer has already started.

  2. Drag the last keyframe of the first guided layer to an earlier point in time. The motion tweens following the path in the guide layer are staggered relative to each other (Figure 1.25).

    Figure 1.25Figure 1.25 Move the last keyframe in the leaf 1 layer closer to the first keyframe.

  3. Refine the timing of the motion tweens by moving the first and last keyframes in both guided layers.

TIP

Create variations in the second guided layer by placing the instances on any point along the path in the guide layer. The instances do not have to lie at the very beginning or end of the path for the motion tween to work.

You can increase complexity by using animated graphic symbol instances along the guide layer's motion path. Animated loops within graphic symbols provide localized motion that still follows the guide layer in the main Timeline.

To add local variations to multiple guided layers:

  1. Enter symbol-editing mode for the graphic symbol you use on the motion path.

  2. Select the contents of this symbol, and convert it to a graphic symbol. You create a graphic symbol within another graphic symbol, which allows you to create a motion tween within your first graphic symbol.

  3. Create a looping motion tween (Figure 1.26). This type of animation ends where it begins.

    Figure 1.26Figure 1.26 An animated graphic symbol of a leaf moving up and down.

  4. Exit symbol-editing mode, and play the movie to see how the motion tween of the graphic symbol gets incorporated into the motion tween on the main Stage (Figure 1.27).

    Figure 1.27Figure 1.27 Play the movie to see how the leaves follow the motion path while going through their own animation.

    TIP

    In the Property Inspector, adjust the play mode option and First parameter to vary how the animated graphic instances play (Figure 1.28). By having your loops begin with different frames, you prevent them from being synchronized with one another (Figure 1.29). Rotating your instances at this point can produce even more complex, interesting, and seemingly random movements. Experiment with rotating your instances as they travel along the motion path.

    Figure 1.28Figure 1.28 The First parameter is set to 10 so that the leaf graphic will loop beginning with frame 10. The other play-mode options in the pull-down menu include Play Once and Single Frame.

    Figure 1.29Figure 1.29 Three instances of the same graphic symbol with different first-frame play options. The left butterfly loops beginning with frame 1;its wings will start to close. The middle butterfly loops beginning with frame 4; its wings are already closed and will start to open. The right butterfly loops beginning with frame 10; its wings are opening.

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020