Project 8

1
Project 8

• Animation and Behaviors

2
Project Objectives

• Describe a timeline
• Describe the Timelines panel
• Create a nonlinear timeline
• Add a behavior to a layer
• Add a play button to a timeline

3
Project Objectives

• Create a linear timeline
• Add a layer to a timeline
• Show and hide a timeline
• Play an animation

4
Copying Data Files to the Colorado Parks Web Site

• Click the Start button on the Windows taskbar and
  then click My Computer
• Double-click Local Disk (C) and then navigate to
  the location of the data files for Project 8
• Double-click the DataFiles folder and then
  double-click the Proj08 folder
• Double-click the parks folder and then
  double-click the images folder
• Click the first image file in the list, hold down
  the SHIFT key, and then click the last image file
  in the list

5
Copying Data Files to the Colorado Parks Web Site

• Right-click the selected files to display the
  context menu
• Click the Copy command and then click the My
  Computer Back button to navigate back to the your
  name folder
• Double-click the your name folder, double-click
  the parks folder, and then double-click the
  images folder
• Right-click in the open window to display the
  context menu
• Click the Paste command to paste the image files
  into the images folder

6
Copying Data Files to the Colorado Parks Web Site

• Click the My Computer Back button the number of
  times necessary to return to the parks DataFiles
  folder. Hold down the SHIFT key and then select
  the two data files. Right-click to display the
  context menu, and then click the Copy command
• Click the My Computer Back button and navigate to
  the your name folder
• Paste the data files into the parks folder
• Click the Close button

7
Starting Dreamweaver and Opening the Colorado
Parks Web Site

• Click the Start button on the Windows taskbar
• Point to All Programs on the Start menu, point to
  Macromedia on the All Programs submenu, and then
  click Macromedia Dreamweaver 8 on the Macromedia
  submenu
• Click the Files panel box arrow on the Files
  pop-up menu, and then click Colorado Parks

8
Starting Dreamweaver and Opening the Colorado
Parks Web Site
9
Adding the Colorado Map Image and Layer

• Double-click tour.htm in the Files panel. If
  necessary, click below the introductory
  paragraph. If necessary, close the Insert bar and
  display the Property inspector
• Click Insert on the menu bar, point to Layout
  Objects, and then click Layer
• Click the layer selection handle and type the
  following properties Layer ID, map L, 125px
  and T, 125px
• Press F2 to display the Layers panel

10
Adding the Colorado Map Image and Layer

• Click the Assets panel tab, scroll down if
  necessary, and then drag the travel_map.gif image
  onto the layer. If necessary, select the image
• Click the Image ID box in the Property inspector
  and type travel_map. Then click the Alt box and
  type Colorado Map as the alternate text
• Click anywhere on the Web page background to
  deselect the image and/or layer
• Click Insert on the menu bar, point to Layout
  Objects, and then click Layer. If necessary, use
  the Document window horizontal and vertical
  scroll bars to display the layer

11
Adding the Colorado Map Image and Layer

• Select the layer
• Click the Layer ID name in the Layers panel. Type
  motorhome as the layer name and then press the
  ENTER key
• Click the motorhome layer selection handle and
  then drag the layer so it is near the star on the
  map
• Click inside the motorhome layer and then drag
  the motorhome.jpg image from the Assets panel
  onto the layer

12
Adding the Colorado Map Image and Layer

• Type motor_home in the Image ID box and Motor
  Home in the Alt text box
• Click the expander arrow to collapse the panel
  groups
• Select the motorhome layer, click a resize
  handle, and then resize the layer to fit the
  motorhome.jpg image
• If necessary, click the layer selection handle
  and adjust the layer so that it is in close
  proximity to the star starting point

13
Adding the Colorado Map Image and Layer
14
Creating a Nonlinear Animation

• Press ALTF9 to display the Timelines panel. If
  necessary, expand the Timelines panel
• Close the Property inspector
• Double-click the Timeline pop-up menu text box
• Type tour as the timeline name and then press the
  TAB key
• If necessary, adjust the vertical scroll
  placement to display the map

15
Creating a Nonlinear Animation

• If necessary, select the motorhome layer or click
  the motorhome layer selection handle in the
  Document window and then right-click the selected
  motorhome layer or motorhome selection handle
• Point to Record Path on the context menu
• Click Record Path
• Click the motorhome layer selection handle and
  then drag it to circle 1 then down to circle 2
  and right again to circle 3 left to circle 4 and
  down and left to circle 5 up and to the right to
  circle 6 left to circle 7 and then up to the
  starting point star. Do not release the mouse
  button while dragging
• If a Dreamweaver dialog box displays, read the
  information and then click the OK button

16
Creating a Nonlinear Animation

• Click the Autoplay check box in the Timelines
  panel
• Drag the horizontal scrollbar to the right to
  view the rest of the timeline
• If a Dreamweaver dialog box is displayed, read
  the information, and then click the OK button
• Click the Save button on the Standard toolbar
• Press the F12 key to view the animation in your
  browser. Close the browser and return to
  Dreamweaver

17
Creating a Nonlinear Animation
18
Adding the Stop Timeline Behavior

• Drag the horizontal scrollbar to the left to
  display frame 1
• If necessary, click the motorhome layer to
  display the selection handle
• Click a frame in the Animation channel that moves
  the motorhome layer close to circle 1
• Use the Document window vertical scroll bar as
  necessary to reposition the image so the
  motorhome layer is displayed
• Press SHIFTF4 to display the Behaviors panel. If
  necessary, collapse the Files panel and move the
  mouse pointer over the Tag title bar and drag to
  increase the height of the Behaviors panel

19
Adding the Stop Timeline Behavior

• Point to the frame number in the timeline
  behaviors channel that is the same number as the
  one in the animation channel on your screen.
• Click your selected frame in the behaviors
  channel and then point to the Add behavior ()
  button in the Behaviors panel
• Click the Add behavior () button, point to
  Timeline on the Add behavior pop-up menu, and
  then point to Stop Timeline on the Timeline
  submenu
• Click Stop Timeline
• In the Stop Timeline dialog box, click the Stop
  Timeline box arrow and then point to tour

20
Adding the Stop Timeline Behavior

• Click tour and then click the OK button
• If necessary, scroll down in the Document window
  to display the motorhome layer and the circle 2
• Click a frame in the animation channel that moves
  the motorhome layer so it is close to circle 2.
  Use the vertical and horizontal scroll bars as
  needed to reposition the image so that the
  motorhome layer and circle 2 are displayed
• If necessary, click other frame numbers until the
  motorhome layer is in close proximity to the
  circle 2 on your screen
• Click your selected frame in the Behaviors channel

21
Adding the Stop Timeline Behavior

• Click the Add behavior () button in the
  Behaviors panel
• Point to Timeline and then click Stop Timeline
• Click the Stop Timeline box arrow in the Stop
  Timeline dialog box, click tour, and then click
  the OK button
• Repeat the previous steps using Table 8-1 on page
  DW 649 for the list of the other five circle
  names and the star and the approximate frame
  numbers to stop the motorhome layer. The frame
  numbers listed in the table are example values.
  Modify the frame numbers to fit your timeline.
  Use the horizontal and vertical scroll boxes as
  needed to scroll to display the rest of the
  animation bar in the Animation channel

22
Adding the Stop Timeline Behavior
23
Adding a Forward Button

• Click Insert on the menu bar, point to Layout
  Objects, and then select Layer
• Use the vertical and horizontal scroll bars as
  necessary to view the new layer in the Document
  window
• If necessary, select the layer. Double-click the
  Layer1 name in the Layers panel and rename the
  layer forward
• Click the forward layer selection handle and then
  drag the layer onto the travel_map.gif image
• Double-click the Files panel title bar and then,
  if necessary, click the Assets tab

24
Adding a Forward Button

• Drag the forward.gif image onto the forward layer
• Select the forward layer
• Click a resize handle on the forward layer and
  then resize the layer around the image
• Press CTRLF3 to display the Property inspector.
  Set L at 150 and T at 500
• Close the Property inspector

25
Adding a Forward Button

• Click anywhere in the animation channel (or any
  empty frame) to deselect the behavior in the
  Behaviors panel
• If necessary, doubleclick the Tag Inspector panel
  title bar in the panel groups to display the
  Behaviors panel
• Click the forward image (not the layer)
• Click the Add behavior () button in the
  Behaviors panel, point to Timeline, and then
  click Play Timeline
• Click the OK button in the Play Timeline dialog
  box

26
Adding a Forward Button

• Click the Loop check box. If a warning dialog box
  displays, read the information, and then click
  the OK button
• Deselect the Autoplay check box
• Press the F12 key to view the animation in your
  browser. Click the Forward button to move the
  motorhome image along the animation path. Close
  the browser and return to Dreamweaver
• Save and then close the tour Web page

27
Adding a Forward Button
28
Adding the First Layer and Image

• Close the Timelines panel
• Click the Tag Inspector expand/collapse button,
  and, if necessary, expand the CSS Panel title bar
• Open slideshow.htm
• Press CTRLF3 to display the Property inspector.
  If necessary, click below the heading and then
  click the Align Left button in the Property
  inspector

29
Adding the First Layer and Image

• Click Insert on the menu bar, point to Layout
  Objects, and then click Layer
• Click the Assets tab. Drag the photo01.gif image
  onto the layer
• Click the Image ID box and name the image
  bluecolumbine. Click the Alt text box and type
  Blue Columbine
• Click the Layer1 name in the Layers panel

30
Adding the First Layer and Image

• In the Property inspector, add the following
  attributes Layer ID, photo01 L, 200px and T,
  100px
• Click the Visibility column to the left of the
  photo01 layer in the Layers panel until the
  closed-eye icon is displayed
• If necessary, click the Document window to hide
  the layer and image

31
Adding the First Layer and Image
32
Adding the Next Five Layers and Images

• Click Insert on the menu bar, point to Layout
  Objects, and then click Layer
• Drag the photo02.gif image onto the layer
• Click the Image ID box and name the image
  globeflower. Click the Alt text box and type
  Globe Flower
• Select the Layer1 name in the Layers panel. Add
  the following attributes in the Layer Property
  inspector Layer ID, photo02 L, 200px and T,
  100px

33
Adding the Next Five Layers and Images

• Click the Visibility column to the left of the
  photo02 layer in the Layers panel until the
  closed-eye icon is displayed. If necessary, click
  the Document window to hide the layer and image
• Four more layers must be added to prepare for the
  slide show. Repeat the previous steps to add the
  next four layers. Table 8-2 page DW 660 contains
  the attributes for each image and for each layer.
  Apply the closed-eye icon to all of the layers
• Click the Save button on the Standard toolbar

34
Adding the Next Five Layers and Images
35
Displaying and Naming the Timeline

• Close the Property inspector. Press ALTF9 to
  display the Timelines panel
• If necessary, move the mouse pointer over the
  horizontal line below the Layers panel until the
  pointer turns into a two-headed arrow. Drag the
  mouse pointer down until all six layers display
• Click the Timelines pop-up menu text box. Delete
  the default text entry, type slideshow, and then
  press the TAB key

36
Adding the Layers to the Timeline

• Scroll if necessary in the Layers panel. Click
  the photo01 layer
• Drag the photo01 layer-code marker to Animation
  channel 1, frame 1, in the Timelines panel. If a
  Dreamweaver dialog box is displayed, read the
  information and then click the OK button
• Click the photo02 layer in the Layers panel

37
Adding the Layers to the Timeline

• Drag the photo02 layer-code marker to Animation
  channel 2, frame 1, in the Timelines panel. If a
  Dreamweaver dialog box is displayed, click the OK
  button
• Repeat the previous steps, selecting and dragging
  the remaining four layers to the Timelines panel
  the photo03 layer to Animation channel 3, the
  photo04 layer to Animation channel 4, the photo05
  layer to Animation channel 5, and the photo06
  layer to Animation channel 6
• If the photos cover the layer markers, click the
  open and closed eye icons to hide the layers

38
Adding the Layers to the Timeline
39
Adjusting the Number of Keyframes

• Click the keyframe at frame 15 in the photo01
  animation bar in the Timelines panel
• Drag the keyframe to frame 13
• Repeat the previous steps for the other five
  layers

40
Adding Keyframes to Show and Hide Layers

• Click the keyframe in frame 1 in the photo01
  timeline in the Timelines panel
• If necessary, click the Visibility column for the
  photo01 layer in the Layers panel until the
  open-eye icon is displayed
• Drag the playback head to frame 3
• Click and then right-click the photo01 timeline
  at frame 3. Point to Add Keyframe on the context
  menu
• Click Add Keyframe

41
Adding Keyframes to Show and Hide Layers

• Click the Visibility column for the photo01 layer
  in the Layers panel until the closed-eye icon is
  displayed
• Click the photo02 timeline at frame 3 in the
  Timelines panel. Right-click to display the
  context menu and then click Add Keyframe
• Click the Visibility column for the photo02 layer
  in the Layers panel until the open-eye icon
  displays
• Drag the playback head to frame 5
• Click the photo02 timeline at frame 5 in the
  Timelines panel

42
Adding Keyframes to Show and Hide Layers

• Right-click the photo02 timeline at frame 5 and
  then click Add Keyframe
• Click the Visibility column for the photo02 layer
  in the Layers panel until the closed-eye icon is
  displayed
• Click the photo03 timeline at frame 5 in the
  Timelines panel
• Right-click the photo03 timeline and then click
  Add Keyframe
• Click the Visibility column for the photo03 layer
  in the Layers panel until the open-eye icon is
  displayed

43
Adding Keyframes to Show and Hide Layers

• Click frame 7 in the photo03 timeline in the
  Timelines panel, right-click, and then click Add
  Keyframe
• Click the Visibility column for the photo03 layer
  in the Layers panel until the closed-eye icon is
  displayed
• Click frame 7 in the photo04 timeline in the
  Timelines panel, right-click, and then click Add
  Keyframe
• Click the Visibility column in the photo04 layer
  in the Layers panel until the open-eye icon is
  displayed
• Click the photo04 timeline at frame 9 in the
  Timelines panel, right-click, and then click Add
  Keyframe

44
Adding Keyframes to Show and Hide Layers

• Click the Visibility column in the photo04 layer
  in the Layers panel until the closed-eye icon is
  displayed
• Click the photo05 timeline in the Timelines panel
  at frame 9, right-click, and then click Add
  Keyframe
• Click the Visibility column in the photo05 layer
  in the Layers panel until the open-eye icon is
  displayed
• Click the photo05 timeline at frame 11 in the
  Timelines panel, right-click, and then click Add
  Keyframe
• Click the Visibility column in the photo05 layer
  in the Layers panel until the closed-eye icon is
  displayed

45
Adding Keyframes to Show and Hide Layers

• Click the photo06 timeline at frame 11 in the
  Timelines panel, right-click, and then click Add
  Keyframe
• Click the Visibility column in the photo06 layer
  in the Layers panel until the open-eye icon is
  displayed
• Click the photo06 timeline at frame 13 in the
  Timelines panel
• If necessary, click the Visibility column in the
  photo06 layer in the Layers panel until the
  closed-eye icon is displayed
• Click the keyframe in frame 13 in the photo01
  timeline in the Timelines panel

46
Adding Keyframes to Show and Hide Layers

• Click the Visibility column in the photo01 layer
  in the Layers panel until the open-eye icon is
  displayed
• Click the Autoplay check box in the Timelines
  panel. If a Dreamweaver dialog box is displayed,
  read the information and then click the OK button
• Click the Save button on the Standard toolbar
• Press the F12 key to view the presentation in
  your browser
• Close the browser window and return to Dreamweaver

47
Adding Keyframes to Show and Hide Layers
48
Using Behaviors to Pause between Slides

• Press SHIFTF4 to display the Behaviors panel. If
  necessary, collapse the Files panel
• Click frame 2 in the behaviors channel in the
  Timelines panel
• Click the Add behavior () button in the
  Behaviors panel, point to Timeline, and then
  point to Stop Timeline
• Click Stop Timeline. In the Stop Timeline dialog
  box, click the Stop Timeline box arrow, click
  slideshow, and then click the OK button

49
Using Behaviors to Pause between Slides

• Click frame 4 in the Behaviors channel. Click the
  Add behavior () button in the Behaviors panel,
  point to Timeline, and then click Stop Timeline
• Click the Stop Timeline box arrow, click
  slideshow, and then click the OK button
• Repeat the previous two steps to add the Stop
  Timeline behavior to frames 6, 8,10, and 12 in
  the Timelines panel behaviors channel

50
Using Behaviors to Pause between Slides
51
Previewing a Timeline in the Timelines Panel

• In the Timelines panel, click the Rewind button
  to move the playback head to the first frame.
  Click the Play/Forward button in the Timelines
  panel. As you click forward to each frame, verify
  in the Layers panel that the eye icon is
  appropriately closed or opened for each of the
  layers and that the minus sign displays for the
  Stop Timeline action in the correct frames

52
Adding a Start Button

• Click the Loop check box in the Timelines panel.
  If necessary, click the OK button in the
  Dreamweaver dialog box
• Click frame 1 on the animation bar. Close the
  Timelines panel
• Click to the right of the photo06 layer-code
  marker
• Click Insert on the menu bar, point to Layout
  Objects, and then click Layer
• Double-click the Files panel title bar. Drag the
  start.gif image onto the layer

53
Adding a Start Button

• Press CTRLF3 to display the Property inspector.
• If necessary, display the Layers panel. Select
  the layer. Name the layer start, and set L at 200
  and T at 500
• Click the Visibility column for the start layer
  in the Layers panel until the open-eye icon is
  displayed
• Press CTRLF3 to hide the Property inspector and
  then scroll down to view the layer and image

54
Adding a Start Button

• Resize the layer to fit the image
• Expand the Tag inspector group to display the
  Behaviors panel
• Click the image within the start layer, click the
  Add behavior () button in the Behaviors panel,
  point to Timeline, and then click Play Timeline
• Click the OK button in the Play Timeline dialog
  box

55
Adding a Start Button
56
Adding a Link from the Slideshow.htm Page to the
Natl_Parks.htm Page

• Display the Property inspector
• Click to the right of the start layer-code marker
• Press the ENTER key 13 times, type Colorado
  National Parks, and then select the text you just
  typed
• Double-click the Files panel title bar and then
  click the Files tab

57
Adding a Link from the Slideshow.htm Page to the
Natl_Parks.htm Page

• Drag the natl_parks.htm file to the Link box and
  then press the ENTER key
• Save the slideshow.htm page
• Press the F12 key and then check the link to
  verify that it works
• Close the browser to return to Dreamweaver and
  then close the slideshow.htm page

58
Adding a Link from the Slideshow.htm Page to the
Natl_Parks.htm Page
59
Adding a Link from the Tour.htm Page to the
Natl_Parks.htm Page

• Open the tour.htm page.
• Click to the right of the third layer-code marker
• Press the ENTER key twelve times or more as
  necessary, type Colorado National Parks, and then
  select the text you just typed
• Drag the natl_parks.htm file to the Link box and
  then press the ENTER key

60
Adding a Link from the Tour.htm Page to the
Natl_Parks.htm Page

• Save the tour.htm page
• Press the F12 key and then check the link to
  verify that it works
• Close the browser to return to Dreamweaver and
  then close the tour.htm page

61
Adding a Link from the Tour.htm Page to the
Natl_Parks.htm Page
62
Adding Links from the Index.htm Web Page

• Open the index.htm page
• Scroll to the bottom of the page, click to the
  right of the link, General Information, press the
  END key, and then press SHIFTENTER
• Type Colorado Parks Slide Show as the entry,
  press the END key, and then press SHIFTENTER
• Type Colorado Tour as the entry

63
Adding Links from the Index.htm Web Page

• Select the text, Colorado Parks Slide Show, and
  then drag the slideshow.htm file from the Files
  panel to the Property inspector Link text box
• Select the text, Colorado Tour, and then drag the
  tour.htm file from the Files panel to the
  Property inspector Link text box.
• Save the index.htm page and then press the F12
  key. Test the links and then close the browser

64
Adding Links from the Index.htm Web Page
65
Closing the Web Site and Quitting Dreamweaver

• Click the Close button on the upper-right corner
  of the Dreamweaver title bar

66
Project Summary

• Describe a timeline
• Describe the Timelines panel
• Create a nonlinear timeline
• Add a behavior to a layer
• Add a play button to a timeline

67
Project Summary

• Create a linear timeline
• Add a layer to a timeline
• Show and hide a timeline
• Play an animation

68
Project 8 Complete

• Animation and Behaviors