Home > Articles > Graphics & Web Design > Dreamweaver & Flash

Animating in Dreamweaver MX with Timelines

Even experienced Dreamweaver users don't know how to use timelines. Many don't even know they exist! Yes, you can move objects around the screen with Dreamweaver. Learn how to create cool effects right in HTML.
This chapter is from the book

Dreamweaver's capability to create time-based animation makes it unique as a Web-based authoring tool. Those familiar with Macromedia's animation programs, Director and Flash, will quickly feel comfortable with Dream-weaver's Timelines panel. Those not familiar with animation programs will soon be creating animations after learning a few key concepts.

In this hour, you will learn

  • How to record an animation

  • How to create an animation in the Timelines panel

  • How to change layer properties over time

  • How to add behaviors to timelines

Creating an Animation

Timelines change properties over time to create an animation. To make a layer move, you change the positioning properties—left and top—over time. To make objects appear or disappear, you change the visibility properties over time. To change the stacking order of objects, you change the z-index over time. You'll learn more about time-based animations in this hour.

NOTE

You can also place images into timelines and change the image source over time. You cannot make images move around the screen unless they are contained in a layer.

The animations that Dreamweaver creates play natively in the browser. You don't need any plug-ins to play Dreamweaver timelines. Your viewer needs to have a browser capable of viewing Dynamic HTML (either Internet Explorer or Netscape Navigator 4.0 or better) to see your timelines.

When you create a timeline, Dreamweaver inserts JavaScript into your Web page. The JavaScript defines all the timeline functionality. If you edit the HTML source, be careful not to delete or move the JavaScript that creates the timeline.

Using the Timelines Panel

Open the Timelines panel, shown in Figure 18.1, found in the Others submenu of the Window menu; it appears beneath the Property inspector in Windows or as a floating panel on the Mac. The numbered channels run vertically up and down the timeline. Channels enable multiple objects to be animated in the same timeline. The numbered frames run horizontally from left to right along the top of the timeline. The number of frames affects the pace of the animation.

There is a special channel across the top of the timeline that is labeled with a B. You can set behaviors in this channel so behaviors execute in a certain frame. You'll add behaviors to a timeline later in the hour.

The red square with a line extending down is the playback head. It rests on the current frame and controls which frame is currently selected. Drag the playback head to any frame in the timeline to view a specific frame.

Figure 18.1 Use the Timeline panel to configure animations in your Web page. A timeline is made up of channels (vertical axis) and frames (horizontal axis).

The playback controls at the top of the Timelines panel, shown in Figure 18.2, manage the playback head. The rewind button moves the playback head to frame 1. The Back button moves the playback head back one frame. The Play button moves the playback head forward one frame. If you hold down the Back or Play buttons, you can move through all the frames. The current frame number is displayed between the Back and Play buttons.

Figure 18.2 The playback controls, at the top of the Timeline panel, enable you to move through all the frames in the animation both backward and forward.

You set the frames per second (fps) in the Fps box beside the Play button. This sets the number of frames that occur per second in your timeline. The higher the fps, the faster the animation because more frames are crammed into one second. If you are moving an object around the screen, more frames will make the animation smoother. There is a certain point, however, where the browser just can't animate any faster even if you increase the fps.

NOTE

The default fps setting of 15 is a good place to start. This setting means that 15 frames will take one second to play.

Recording a Simple Animation

Try creating an animation. The quickest way to make something move in a timeline is to record it. First, you will need a layer with something in it (an image, some text, or a background color). Usually animated layers contain images. All the objects that you place in your timelines need to be in layers.

TIP

Before you begin recording the movement of a layer, you'll want to make the Timelines panel small and place it out of the way of the animation path. Dreamweaver opens the Timelines panel when you begin to record an animation if the panel isn't open already. It's also a good idea to close panels that might be in the way. Be careful not to drop the layer in the Timelines panel while animating. This has a different effect than recording an animation.

To record an animation path

  1. First, make sure that Prevent Layer Overlaps is turned off in the Layers panel. Otherwise, you will not be able to move your animated layer over other layers on the screen.

  2. Select the layer that you want to animate. The layer is selected when you see its drag handles. A layer must be selected for the Record Path of Layer command to become active.

  3. Select the Record Path of Layer command under the Timeline submenu in the Modify menu.

  4. Make sure that the playback head in the Timelines panel is on frame 1. If it is not, move it there.

  5. Pick up the layer's move handle and drag the layer on the path that you want. A dotted line will mark your path, as shown in Figure 18.3. It's best to start out making your animation short.

  6. Figure 18.3 A dotted line shows the path of your animation while you are recording it using the Record Path of Layer command.

  7. When you release the mouse button, the path becomes a solid line, as shown in Figure 18.4.

Figure 18.4 The path of the animation becomes a solid line after you stop dragging the layer. This is what all animation paths look like.

Congratulations! You've created a timeline animation in Dreamweaver. The default name for your timeline is Timeline1. To change the timeline name, click in the Timelines drop-down menu shown in Figure 18.5, change the name, and press Enter. You'll learn about creating multiple timelines in a Web page later this hour. You can select different timelines to display in the Timelines panel with this drop-down menu.

Figure 18.5 The Timelines drop-down menu lists all the timelines in the Web page. You can change a timeline name by selecting it here and renaming it.

You see the name of your layer in the first channel of the Timelines panel. The line through the channel marks the duration of the animation. You can drag the playback head along the frames to see the animation in the Document window.

The solid circles in the animation bar are called keyframes, shown in Figure 18.6. Keyframes are an important part of timeline animations because changes can be defined only in keyframes. Dreamweaver calculates all the intermediate steps between keyframes. You need a keyframe every time the animation changes direction or anything else new happens. You'll explore adding and editing keyframes in a few minutes. Notice that your recorded animation probably has many keyframes. Dreamweaver added one every time the direction changed when you recorded the movement of the layer.

Figure 18.6 Keyframes appear in an animation bar as circles.

Preview the animation in the browser. Did anything happen? Probably not. You haven't yet set anything to trigger the animation to play. You'll do that next.

Turning on Autoplay and Looping Your Animation

There are two check boxes in the Timelines panel, shown in Figure 18.7, that you haven't learned about yet: Autoplay and Loop. Check the Autoplay check box to make the timeline play when the Web page loads. This setting automatically adds the Play Timeline behavior to the <body> tag, triggered by the onLoad event. After you check this setting in the Timelines panel, preview the animation in the browser. It works!

Figure 18.7 The Autoplay setting inserts a behavior into the <body> tag that makes the animation play when the Web page is loaded. The Loop setting inserts a behavior in the B channel that sends the animation back to the first frame.

To make the animation play continually, select the Loop check box. Dreamweaver inserts the Go To Timeline Frame behavior in the B channel of the Timelines panel. Dreamweaver inserts the behavior in the last frame of the animation. What timeline frame do you think the Go To Timeline Frames behavior is set to go to? You're right if you said frame 1.

Editing a Behavior in the B Channel

Edit the behavior that Dreamweaver inserted when you checked the Loop option. Double-click the symbol in the B channel to open the Behaviors panel (single-click if the Behaviors panel is already visible in the Document window). The action and event, shown in Figure 18.8, behave just like any other behavior. Notice the onFrame event, in which a frame number is added to the event name. This event is triggered when the animation reaches the specified frame.

Open the Go To Timeline Frame action. The Go To Timeline Frame dialog box appears, as shown in Figure 18.9. You select the timeline from the Timeline drop-down menu and set the frame to go to in the Go to Frame box. You can also set the number of times you want the animation to loop. Enter a number here (you might want to enter a small number so you don't use up the rest of this hour!) and click OK. Preview your animation in the browser. It should loop the number of times you specified.

Figure 18.8 Edit the Go To Timeline Frames behavior in the Behaviors panel by double-clicking the symbol in the B channel.

Figure 18.9 You configure the number of times the animation loops in the Go To Timeline Frame dialog box.

CAUTION

If you change the name of a timeline after you have referenced it in the actions of Dreamweaver behaviors, you may need to edit the behavior and select the new timeline name.

Adding a Layer to the Timeline

The Record Path of Layer command is nice for capturing animations that have complex movement. But most of the time you will want to set the length of a timeline and its keyframes manually. Plus, you can also add multiple layers to your animation.

Create another layer to add to the timeline that you just created. Make sure the Timelines panel is open. To add the layer to the timeline

  1. Pick up a layer, drag it into the Timelines panel, and drop it in the second channel beneath the previously animated layer, as shown in Figure 18.10.

  2. Figure 18.10 Another layer is dragged into the Timelines panel. The layer is placed in channel 2 beneath the other layer.

    CAUTION

    If you see the name of an image in the timeline instead of the name of the layer that contains an image you have accidentally dragged the image into the timeline. You need to delete the image from the timeline and drag the layer onto the Timelines panel instead.

  3. You might receive a message box warning you about which layer attributes Netscape does not support. You won't be using any attributes that Netscape doesn't support, so you can close this box.

  4. Note that the animation bar begins and ends with a keyframe. Pick up the animation bar and move it in the same channel or to a different channel if you want.

  5. To increase or decrease the length of the animation, drag the end keyframe.

  6. Click on the beginning keyframe. This is the position that the layer will be in at the beginning of the animation. You can adjust the beginning position only while you have the first keyframe selected.

  7. Click on the ending keyframe. This is the position that the layer will be in at the end of the animation. Only while the ending keyframe is selected, pick up the layer and move it to its end position. When you release the mouse button you will see a line in the Document window showing the animation path, as in Figure 18.11.

  8. Figure 18.11 A line represents the animation path when you have a timeline selected in the Timelines panel.

  9. Preview the animation in your browser. Note that the second layer moves in a line from one point, the beginning keyframe, to another point, the end keyframe.

If you decide to use a different object after you have created a timeline, you don't have to start from scratch. You can swap the object that you used to create a timeline with another object on the Web page. Select the Change Object command from the context menu that appears when you right-click on an animation bar in the Timelines panel. The Change Object dialog box appears, as shown in Figure 18.12. Simply select a different object from the drop-down list.

Figure 18.12 You can swap an object in a timeline for a different object using the Change Object command.

Adding a Keyframe

To create a more complex animation or make something happen at a specific frame, you need to turn that frame into a keyframe. When you hold down the Control key (ð on the Macintosh) and position your cursor over an animation bar, the cursor looks like a keyframe. Yes, you guessed it; click and you insert a keyframe at that location. You can also access the context menu, shown in Figure 18.13, by right-clicking on a specific frame in the animation bar. It contains the Add Keyframe command that accomplishes the same thing.

Figure 18.13 The context menu contains many useful commands for manipulating timelines, including the Add Keyframe command.

With the newly created keyframe selected, move the layer. When you release the mouse button, the animation path has changed, as shown in Figure 18.14.

Figure 18.14 After you add a keyframe and move the layer, the animation path changes.

You can add as many keyframes as you want. If you need to adjust the position of a layer at a certain keyframe, select the keyframe and move the layer. If you need to add or remove frames, right-click on the frame in the animation bar to select either the Add Frame or the Remove Frame command. When you add or delete frames, they will be added or deleted from the entire timeline, not just a single channel.

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT 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 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 information@informit.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 InformIT. 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.informit.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