tutorial 7 creating animations n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Tutorial 7 Creating Animations PowerPoint Presentation
Download Presentation
Tutorial 7 Creating Animations

Loading in 2 Seconds...

play fullscreen
1 / 61

Tutorial 7 Creating Animations - PowerPoint PPT Presentation


  • 88 Views
  • Uploaded on

Tutorial 7 Creating Animations. 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. Objectives.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Tutorial 7 Creating Animations' - miller


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
objectives
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

Dreamweaver CS3 Tutorial 7

objectives1
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

Dreamweaver CS3 Tutorial 7

understanding animation
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.

Dreamweaver CS3 Tutorial 7

understanding animation1
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.

Dreamweaver CS3 Tutorial 7

exploring the timelines panel
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.

Dreamweaver CS3 Tutorial 7

exploring the timelines panel1
Exploring the Timelines Panel

Dreamweaver CS3 Tutorial 7

exploring the timelines panel2
Exploring the Timelines Panel

Dreamweaver CS3 Tutorial 7

exploring the timelines panel3
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.

Dreamweaver CS3 Tutorial 7

exploring the timelines panel4
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

Dreamweaver CS3 Tutorial 7

creating a timeline
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.

Dreamweaver CS3 Tutorial 7

creating a timeline1
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 keyframes—one at the first frame and one at the last frame.

Dreamweaver CS3 Tutorial 7

creating a timeline2
Creating a Timeline

Dreamweaver CS3 Tutorial 7

creating a timeline3
Creating a Timeline

Dreamweaver CS3 Tutorial 7

moving and resizing animation bars
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.

Dreamweaver CS3 Tutorial 7

moving and resizing animation bars1
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.

Dreamweaver CS3 Tutorial 7

moving and resizing animation bars2
Moving and Resizing Animation Bars

Dreamweaver CS3 Tutorial 7

moving and resizing animation bars3
Moving and Resizing Animation Bars

Dreamweaver CS3 Tutorial 7

resizing an animation bar
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.

Dreamweaver CS3 Tutorial 7

resizing an animation bar1
Resizing an Animation Bar

Dreamweaver CS3 Tutorial 7

adding keyframes to an animation bar
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.

Dreamweaver CS3 Tutorial 7

adding keyframes to an animation bar1
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.

Dreamweaver CS3 Tutorial 7

adding keyframes to an animation bar2
Adding Keyframes to an Animation Bar

Dreamweaver CS3 Tutorial 7

adding keyframes to an animation bar3
Adding Keyframes to an Animation Bar

Dreamweaver CS3 Tutorial 7

creating an animation
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.

Dreamweaver CS3 Tutorial 7

creating an animation1
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.

Dreamweaver CS3 Tutorial 7

adjusting ap div visibility in the timelines panel
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.

Dreamweaver CS3 Tutorial 7

previewing a timeline
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.

Dreamweaver CS3 Tutorial 7

previewing a timeline in dreamweaver
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.

Dreamweaver CS3 Tutorial 7

previewing a timeline in a browser
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.

Dreamweaver CS3 Tutorial 7

previewing a timeline in a browser1
Previewing a Timeline in a Browser

Dreamweaver CS3 Tutorial 7

previewing a timeline in a browser2
Previewing a Timeline in a Browser

Dreamweaver CS3 Tutorial 7

adjusting ap div stacking order in the timeline
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.

Dreamweaver CS3 Tutorial 7

adjusting ap div stacking order in the timeline1
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.

Dreamweaver CS3 Tutorial 7

moving an ap div in the timelines panel
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.

Dreamweaver CS3 Tutorial 7

moving an ap div in the timelines panel1
Moving an AP Div in the Timelines Panel

Dreamweaver CS3 Tutorial 7

moving an ap div in the timelines panel2
Moving an AP Div in the Timelines Panel

Dreamweaver CS3 Tutorial 7

resizing an ap div over time
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 div’s overflow must be set to Hidden.
  • Resizing an AP div does not change the dimensions of images in the AP div.

Dreamweaver CS3 Tutorial 7

resizing an ap div over time1
Resizing an AP Div Over Time

Dreamweaver CS3 Tutorial 7

deleting an animation bar
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.

Dreamweaver CS3 Tutorial 7

starting a timeline with a button
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.

Dreamweaver CS3 Tutorial 7

starting a timeline with a button1
Starting a Timeline with a Button

Dreamweaver CS3 Tutorial 7

starting a timeline with a button2
Starting a Timeline with a Button

Dreamweaver CS3 Tutorial 7

adding behaviors to the behaviors channel
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.

Dreamweaver CS3 Tutorial 7

adding behaviors to the behaviors channel1
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.

Dreamweaver CS3 Tutorial 7

creating multiple timelines
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.

Dreamweaver CS3 Tutorial 7

creating multiple timelines1
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.

Dreamweaver CS3 Tutorial 7

creating multiple timelines2
Creating Multiple Timelines

Dreamweaver CS3 Tutorial 7

creating multiple timelines3
Creating Multiple Timelines

Dreamweaver CS3 Tutorial 7

creating multiple timelines4
Creating Multiple Timelines

Dreamweaver CS3 Tutorial 7

updating the web site on the remote server
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

Dreamweaver CS3 Tutorial 7

updating the web site on the remote server1
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

Dreamweaver CS3 Tutorial 7

tutorial summary
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

Dreamweaver CS3 Tutorial 7

tutorial summary1
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

Dreamweaver CS3 Tutorial 7