Dreamweaver

1
Tutorial 7 Creating Animation with Dynamic Layers
and Behaviors
2
Creating Animation with Dynamic Layers and
Behaviors

• In this tutorial, you will
• Learn about animation
• Create a timeline and add layers to a timeline
• Move and resize animation bars
• Add keyframes to animation bars
• Adjust the visibility of layers
• Preview a timeline in Dreamweaver and in a browser

3
Creating Animation with Dynamic Layers and
Behaviors

• In this tutorial, you will (cont)
• Adjust layer stacking order
• Move and resize a layer
• Delete an animation bar
• Start a timeline with a button
• Add behaviors to the Behaviors channel
• Create multiple timelines

4
Understanding Animation

• Animation adds interest and interactivity to a
  Web site.
• Animation is created with a series of graphics
  that move over time like a flip book.
• In computer animation, the computer helps draw
  the pictures in the series.
• In Dreamweaver, you use the Timelines panel to
  create animations.

5
Understanding Animation

• Animation is created in the Timelines panel by
  using timeline actions to change layer properties
  over time
• Move a layer change X and Y coordinates
• Show or hide a layer switches between three
  states, visible, hidden, or default
• Resize a layer changes the width and height
  dimensions
• Change the z-index or stacking order changes
  the order of the layer by modifying the z-index
  number

6
Understanding Animation

• The timeline can also change the image source,
  allowing image rollovers without using added
  JavaScript.
• It is important to plan the animation on a Web
  page to avoid overloading and distracting the
  user.
• Each animation should support the site goals and
  provide the user with useful information.
• Timelines can only be viewed in 4.0 and later
  browsers.

7
Understanding Animation
The Open Timelines Panel
8
Exploring the Timelines Panel
The Timeline panel has many different components
9
Exploring the Timelines Panel

• The Timelines panel has a toolbar with buttons
  and a timeline area.
• The timeline area is divided into frames
  vertically and channels horizontally.
• Timeline frames represent one cell of animation.
• Frames are numbered so that you can keep track of
  them.
• The playback head (a red bar) indicates the frame
  that is visible in the Document window.

10
Exploring the Timelines Panel

• The length of an animation depends on the number
  of frames and the speed the frames play.
• The speed of the animation is called playback
  rate and defaults to 15 frames per second.
• The playback rate of the users browser and their
  machine speed can slow down an animation, but it
  will never exceed your set playback rate.
• The Behaviors channel which holds called
  behaviors is the first row above the timeline.

11
Exploring the Timelines Panel

• Animation channels in the rows below the frame
  numbers row are the rows where objects are
  animated.
• The Timelines panel toolbar contains buttons
• Timelines list allows movement to the selected
  timeline when there is more than one on a Web
  page
• Rewind moves the playback head back to the
  first frame
• Back rewinds the timeline frame by frame

12
Exploring the Timelines Panel

• The Timelines panel toolbar contains buttons
  (cont)
• Frame number text box shows the number of the
  current frame
• Playback plays one frame of the timeline.
  Holding the button plays the entire timeline
• Autoplay Adds a behavior that starts the
  animation playing when the Web page loads
• Loop Adds a behavior that plays the animation
  continuously

13
Creating a Timeline

• To create an animation, start by dragging a layer
  to the Timelines panel.
• The image or text to be animated must already be
  in the layer.
• You can place a new layer and graphics on top of
  hot spots already created since they will work
  through the layer.

14
Creating a Timeline
The Tour Dates Page With the Graphic Added to the
map Layer
15
Creating a Timeline
Adding a New Layer over the Top of the First One
and Selecting it.
16
Creating a Timeline
The New layer Dragged to the Timelines panel to
Start the Animation
17
Creating a Timeline

• When a layer is dragged to the Timelines panel,
  an animation bar and keyframes are also added.
• The animation bar is by default 15 frames, and
  displays as a purple line appearing in the
  channel of the added layer.
• Keyframes are frames where events occur.
• Every timeline has at least two keyframes in
  the first and last frames of the bar.
• The next step is to add other layers with
  graphics showing the movement for the animation.

18
Creating a Timeline
Adding Layers Each One With the Next Graphic in
the Animation
19
Creating a Timeline
Timeline After all 13 Layers Have Been Added
20
Moving and Resizing Animation Bars

• Animation bars can be moved to another animation
  channel or another location within the same
  channel.
• To move an animation bar, select it by clicking
  somewhere between the keyframes and dragging to
  the new channel.
• To reposition to another location within the same
  channel, select it and drag it to the desired
  frame.

21
Moving and Resizing Animation Bars
Selecting an Animation and Dragging it to Another
Channel
22
Moving and Resizing Animation Bars
The Timelines Panel Showing all of the Animations
in Channel 1
23
Moving and Resizing Animation Bars
Dragging the Selected Animation to Frame 190
24
Moving and Resizing Animation Bars

• Animation bars can also be resized to contain
  more or less frames.
• To resize an animation bar, drag the beginning or
  ending keyframe to the desired frame.
• Since number of frames is only one part of the
  animation speed, adding frames respaces all of
  the frames so that each event is quicker,
  preserving the animation.

25
Moving and Resizing Animation Bars
Moving the Endframe to Lengthen the Animation to
30 Frames
26
Adding Keyframes to an Animation Bar

• You write the instructions for an animation in a
  keyframe.
• You need a keyframe to control each action.
• Keyframes are used to control such things as
  movement and of layers or visibility.
• After the keyframe is added, the layer name no
  longer displays.

27
Adding Keyframes to an Animation Bar
Adding a keyframe to Frame 2
28
Adding Keyframes to an Animation Bar
After the Keyframe is added
29
Adjusting Layer Visibility in the Timelines Panel

• Changing visibility is one of the easiest ways of
  showing animation.
• Visibility is immediate not gradual.
• There are three visibility attributes visible,
  hidden, and default.
• There is a column in the layers panel that shows
  the visibility attribute for each layer.
• For instance, you can display the tour path just
  built by making the layers visible in sequence.

30
Adjusting Layer Visibility in the Timelines Panel
Starting the animation by setting the first
keyframe to invisible
31
Adjusting Layer Visibility in the Timelines Panel
The Layer Visibility Set
32
Previewing a Timeline

• You can preview an animation in Dreamweaver as
  you are working.
• You can also preview in a browser which often
  shows the animation differently.
• To preview in Dreamweaver, drag the playback head
  across the timeline, or click and hold on the
  Playback button.
• To preview in a browser, add a behavior to the
  Web page to play the timeline.
• You can do this by clicking the Autoplay checkbox
  in the Timelines panel toolbar.

33
Previewing a Timeline
Adding Autoplay Behavior to the Web Page
34
Previewing a Timeline
Viewing the Animation in Browser Window
35
Adjusting Layer Stacking Order in the Timeline

• You change stacking order of layers by adjusting
  their z-index number.
• You can make something appear to be animated by
  jumping the layer to the top.
• Changes in stacking order occur immediately when
  the timeline reads a keyframe with instructions
  to change the z-index number.

36
Adjusting Layer Stacking Order in the Timeline
Adding a Graphic Layer showing a Tour Bus
37
Adjusting Layer Stacking Order in the Timeline
Viewing the Animation with the Tour Bus
38
Adjusting Layer Stacking Order in the Timeline
Changing the layer stacking order to hide the bus
at the end of the animation
39
Adjusting Layer Stacking Order in the Timeline
Viewing the stacking order in Dreamweaver Frame
1
40
Adjusting Layer Stacking Order in the Timeline
Viewing the stacking order in Dreamweaver Frame
17
41
Moving a Layer in the Timelines Panel

• You can also animate by moving a layer to other
  positions on the page over time.
• To move a layer, select a keyframe and move the
  position of the layer.
• Unlike other animation methods, the layer moves
  to the new position gradually in the frames
  between the keyframes.
• Adding frames between keyframes makes the
  movement slower and smother.

42
Moving a Layer in the Timelines Panel
The bus layer with the bus positioned over
another point on the tour path
43
Moving a Layer in the Timelines Panel
The bus layer with the bus positioned over the
final point on the path
44
Resizing a Layer Over Time

• Changing the size of a layer over time is another
  way to add animation.
• Resizing a layer doesnt change the size of the
  images on it, but changes the amount of the image
  that is visible if the layers overflow is set to
  Hidden in the Property inspector.
• If you add a background color to the layer, you
  can see the change in dimensions.

45
Resizing a Layer Over Time
The Web page with a resized background layer
46
Deleting an Animation Bar

• Too much animation can make a page difficult to
  read and focus on the intended message.
• If you decide you dont need an animated element
  you can easily delete it.
• To delete, select the particular animation bar in
  the Timelines panel, right-click it, and select
  Delete.
• You may also have to select and remove any added
  layers.

47
Starting a Timeline with a Button

• Timelines can be started on loading the page with
  Autoplay, or they can be set to start when the
  user clicks a button.
• For instance, you can set different timelines
  based on user choices as they select different
  features of the Web page.
• A button will trigger a timeline to begin playing
  if you add a behavior to the button.

48
Starting a Timeline with a Button
First add a rollover image button for the user to
select
49
Starting a Timeline with a Button
Adding the Play Timeline Behavior to the button
50
Starting a Timeline with a Button
Changing the event from onLoad to onClick
51
Adding Behaviors to the Behaviors Channel

• Many of the behaviors from the Behaviors panel
  can be added to a timeline.
• This will let you make things happen over time
  within a Web page even without user interaction.
• You add behaviors by selecting the desired frame
  in the Behaviors channel and selecting the
  desired behavior in the Behaviors panel.

52
Adding Behaviors to the Behaviors Channel

• We will first set all of the layers to Hide in
  frame 1.
• The Diagram below shows the Hide behavior added
  to the Bus layer
• This operation will be repeated in frame 1 for
  each of the layers.

53
Adding Behaviors to the Behaviors Channel
Frame 1 of the Timeline after the Hide behavior
is added
54
Adding Behaviors to the Behaviors Channel
Stop and GoToFrame behaviors added to the
timeline at frame 215
55
Creating Multiple Timelines

• You can create more complex animations by adding
  multiple timelines to the same Web page.
• If each animation is in a separate timeline, you
  can control them independently.
• Additional timelines are added in the same way
  the first one was added.
• You can use an object in more than one timeline
  without adding a new copy of it to the page.

56
Creating Multiple Timelines

• All of the timelines are independent.
• They can all run at the same time, be set so that
  one starts at the end of another, or be kicked
  off independently by a user action.
• The more animation occurring at a given time, the
  more processor power is needed to run it.
• Too much or too complicated animation can slow
  the speed of the users computer.

57
Creating Multiple Timelines
Adding a second timeline to the Tour dates Web
Page
58
Creating Multiple Timelines
Repeating the steps to add layers and adding the
second tour path to the Web page
59
Creating Multiple Timelines
The Web page with a second bus rollover
image. Clicking the second bus will show the
second tour path and then reset to the beginning
after hiding the path
60
Creating Multiple Timelines
The finished Web page with both animations set to
Hide and ready to be played
61
Updating the Web Site on the Remote Server

• When pages are changed, they should be updated on
  your remote site.
• To update
• Connect to the remote server using the Connects
  button on the Site panel
• Click View list and Local View
• Select the updated files and then the Put Files
  button
• Click the View list and then Remote view
• Disconnect using the Disconnects button

62
Tutorial Summary

• You should now be able to
• Create several different types of animation
• Create a timeline and add layers to it
• Move, resize and add animations to animation bars
• Adjust the stacking order and visibility of
  layers
• Start a timeline automatically or with a button
• Add behaviors to the behavior channel
• Create multiple timelines