Tutorial 7 Creating Animations

1
Tutorial 7Creating Animations
2
Objectives

• Learn about animation
• Create a timeline
• Add AP divs and graphics to a timeline
• Move and resize animation bars
• Add keyframes to an animation bar
• Adjust AP div visibility
• Preview a timeline in Dreamweaver and in a browser

3
Objectives

• Adjust the AP div stacking order
• Move and resize an AP div
• Delete an animation bar
• Start a timeline with a button
• Add behaviors to the Behaviors channel
• Create multiple timelines

4
Understanding Animation

• Adding animated elements to a Web site can create
  interest and interactivity.
• Animation is a series of graphics or images that
  appear to move over time.
• Adding too much animation to a page can distract
  users from the main message or information.

5
Understanding Animation

• You should not include more than one animated
  element in a page unless you have a compelling
  reason for doing so.
• You should not include more than three or four
  animations in a site.

6
Exploring the Timelines Panel

• The Timelines panel enables you to create
  animation using dynamic HTML code and AP divs.
• To open the Timelines panel, click Window on the
  menu bar, and then click Timelines.
• Timeline frames are the units of temporal
  measurement used in animation.

7
Exploring the Timelines Panel
8
Exploring the Timelines Panel
9
Exploring the Timelines Panel

• The playback head (the red bar) indicates which
  frame of the animation is visible in the Document
  window.
• Playback rate is the speed of an animation.
• The default setting for the playback rate is 15
  frames per second (Fps).
• The Behaviors channel is where you insert any
  behaviors that will be called from a frame in the
  timeline.

10
Exploring the Timelines Panel

• Animation channels are the rows in which objects
  are animated.
• The Timelines panel toolbar includes the
  following buttons
• Timelines
• Rewind
• Back
• Current frame number
• Playback
• Autoplay
• Loop

11
Creating a Timeline

• The first step in creating an animation is to
  create a timeline for the AP div you want to
  animate.
• You create a timeline for an AP div by dragging
  the AP div to the Timelines panel.
• The image or text that you want to animate must
  be in an AP div before you can add it to the
  Timelines panel.

12
Creating a Timeline

• When you drag an AP div to the Timelines panel,
  an animation bar and keyframes are added for the
  AP div.
• An animation bar is the purple line that appears
  in the channel to which the AP div is added.
• A keyframe is a frame in a timeline where an
  event occurs.
• Every timeline has at least two keyframesone at
  the first frame and one at the last frame.

13
Creating a Timeline
14
Creating a Timeline
15
Moving and Resizing Animation Bars

• You can move an animation bar to another
  animation channel or to another location within
  the same animation channel.
• You move an animation bar to another animation
  channel by selecting the animation bar and
  dragging it to the new channel.
• To select an animation bar, click the animation
  bar anywhere between the keyframes, but not on
  the keyframes.

16
Moving and Resizing Animation Bars

• You can select and move more than one animation
  bar at a time by using the Shift key.
• To move an animation bar to a new location within
  an animation channel, select the animation bar
  and then drag the animation bar to the frame you
  want.
• The horizontal position within the channel
  determines when that animation bar plays within
  the timeline.

17
Moving and Resizing Animation Bars
18
Moving and Resizing Animation Bars
19
Resizing an Animation Bar

• You can resize an animation bar by selecting the
  keyframe at either end of the bar and dragging
  the keyframe to a new position within the
  animation channel.
• Lengthening the animation bar increases the
  duration of the animation by adding more frames.
• Shortening the animation bar decreases the
  duration of the animation by reducing the number
  of frames.

20
Resizing an Animation Bar
21
Adding Keyframes to an Animation Bar

• Keyframes are where you input instructions for an
  animation.
• You need a keyframe in each frame of the timeline
  where something happens, for example
• If you are moving an AP div, you need a keyframe
  each time the movement changes direction, stops,
  or starts.
• If you are changing the visibility of an AP div,
  you need a keyframe each time the AP div changes
  visibility.

22
Adding Keyframes to an Animation Bar

• To add keyframes to an animation bar
• Select the animation bar to which you want to add
  a keyframe.
• Click in the frame to which you want to add the
  keyframe.
• Right-click the selected frame, and then click
  Add Keyframe.
• When you add a keyframe to an animation bar, the
  AP div name disappears.

23
Adding Keyframes to an Animation Bar
24
Adding Keyframes to an Animation Bar
25
Creating an Animation

• You create animation by doing one of three types
  of things
• You can change AP div position.
• You can change the source of an image.
• You can automatically call behaviors without
  using Flash, ActiveX, Java, or any other plug-in
  application.

26
Creating an Animation

• Timeline actions, used to change AP div
  properties over time, are
• Show or hide an AP div
• Change the z-index or stacking order
• Move an AP div
• Resize an AP div
• You can also change the image source with the
  timeline.

27
Adjusting AP Div Visibility in the Timelines Panel

• To change AP div visibility
• Select the desired keyframe.
• In the AP Elements panel, click the visibility
  column until the appropriate icon appears.
• The three visibility attributes are visible,
  hidden, and default.
• The change in visibility is not gradual it
  occurs immediately.

28
Adjusting AP Div Visibility in the Timelines Panel
29
Adjusting AP Div Visibility in the Timelines Panel
30
Previewing a Timeline

• You should preview an animation in Dreamweaver as
  you create it.
• It is also important to preview the animation in
  a browser window.
• You should also test a finished animation on a
  number of computers after you have posted the
  animation.

31
Previewing a Timeline in Dreamweaver

• There are two ways to preview a timeline in
  Dreamweaver
• You can drag the playback head across the
  timeline in the Timelines panel.
• You can click and hold the Playback button on the
  Timelines panel toolbar.

32
Previewing a Timeline in a Browser

• To preview a timeline within a browser window,
  you must add a behavior to the Web page that
  instructs the browser to play the timeline.
• When you check the Autoplay check box,
  Dreamweaver inserts the Autoplay behavior into
  the code of the Web page.
• The Autoplay behavior tells the browser to play
  the timeline as soon as the page is finished
  loading.

33
Previewing a Timeline in a Browser
34
Previewing a Timeline in a Browser
35
Adjusting AP Div Stacking Order in the Timeline

• You adjust the z-index number of AP divs to
  change their stacking order.
• You can change the order in which AP divs are
  stacked during a timeline.
• The change in stacking order occurs immediately
  when the timeline encounters a keyframe with
  instructions to change the z-index number of an
  AP div.

36
Adjusting AP Div Stacking Order in the Timeline

• To change the AP div stacking order
• Select the keyframe in which you want the
  stacking order to change in the animation bar.
• Type the desired z-index number in the Z column
  in the AP Elements panel, and then press the
  Enter key.

37
Adjusting AP Div Stacking Order in the Timeline
38
Adjusting AP Div Stacking Order in the Timeline
39
Adjusting AP Div Stacking Order in the Timeline
40
Adjusting AP Div Stacking Order in the Timeline
41
Moving an AP Div in the Timelines Panel

• The timeline enables you to move an AP div from
  one position to another position in the page over
  a period of time.
• You move an AP div by selecting a keyframe and
  changing the position of the AP div.
• Dreamweaver moves the AP div in such a way that
  the AP div arrives at its new position as the
  playback head reaches the keyframe that has
  instructions to change the AP div position.

42
Moving an AP Div in the Timelines Panel
43
Moving an AP Div in the Timelines Panel
44
Resizing an AP Div Over Time

• Changing the dimensions of an AP div over a
  period of time is another way to add animation to
  a page.
• Adding a background color to an AP div enables
  you to see the AP div change dimensions over
  time.
• To see the AP div shrink or grow, the AP divs
  overflow must be set to Hidden.
• Resizing an AP div does not change the dimensions
  of images in the AP div.

45
Resizing an AP Div Over Time
46
Deleting an Animation Bar

• To delete an animation bar
• Select the animation bar you want to delete.
• Press the Delete key.
• In the AP Elements panel, select the AP div, and
  then press the Delete key.

47
Starting a Timeline with a Button

• Buttons are a good way to start a timeline
  because they enable you to tie the animation to a
  user decision.
• You start a timeline with a button by adding a
  behavior to the button that triggers the timeline
  to begin playing, such as the Play Timeline
  behavior.
• The button can be a rollover image.

48
Starting a Timeline with a Button
49
Starting a Timeline with a Button
50
Adding Behaviors to the Behaviors Channel

• You can add many of the behaviors from the
  Behaviors panel list within a timeline.
• Placing behaviors in a timeline enables you to
  make things that are not necessarily triggered by
  user interaction (such as a mouse click) happen
  over time within a Web page.

51
Adding Behaviors to the Behaviors Channel

• To add behaviors to the Behaviors channel
• Select the frame to which you want to add the
  behavior in the Behaviors channel in the
  Timelines panel.
• Select the behavior from the behaviors list in
  the Behaviors panel, and then set any required
  parameters.

52
Adding Behaviors to the Behaviors Channel
53
Creating Multiple Timelines

• You can create more complex interactions in a Web
  page by adding multiple timelines in the same
  page.
• You add additional timelines to a page in the
  same way that you added the first timeline to the
  page.
• You toggle between timelines using the Timelines
  list on the Timelines panel toolbar.

54
Creating Multiple Timelines

• With multiple timelines, all of the timelines can
  run at the same time, or you can use behaviors to
  make one timeline start another timeline and so
  forth.
• When using multiple timelines in one page, each
  timeline should be fairly simple so that the page
  will be able to run at a reasonable speed.

55
Creating Multiple Timelines
56
Creating Multiple Timelines
57
Creating Multiple Timelines
58
Updating the Web Site on the Remote Server

• To update
• Connect to the remote server using the Connects
  to Remote Host button on the Files panel toolbar
• Click the View list arrow, and then click Local
  View
• Select the tourdates.htm file, and then click the
  Put File(s) button
• Click the Yes button when asked if you want to
  include dependent files

59
Updating the Web Site on the Remote Server

• To update (cont.)
• Disconnect using the Disconnects from Remote Host
  button
• Click the View list arrow, and then click Local
  View

60
Tutorial Summary

• Add AP divs to a timeline
• Move AP divs
• Change the duration of AP divs
• Insert additional keyframes into animation bars
• Move and resize AP divs

61
Tutorial Summary

• Change the visibility and the stacking order of
  AP divs
• Use a button to start your timeline
• Add behaviors to the timeline using the Behaviors
  channel
• Add multiple timelines to a Web page