Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Creating Animation with Timelines

You saw how easily you can add interactivity to your web pages with behaviors. Now you'll see how to add a different type of interactivity: animation! Animation is made possible in Dreamweaver through the use of timelines, which allow you to reposition objects on your page and control their sequence. You can also use timelines to trigger behaviors according to timing that you set.

Timelines allow you to reposition objects on your page and control their sequence, to create animations.

You can set up timing so that surfers experience effects in a certain order. For example, maybe you want a message for your visitor to drop down from the top of the browser window, hover for a moment, and then be whisked away. Or maybe you want an object to zoom across your screen whenever a visitor clicks a specific button. This level of interactivity is no problem with Dreamweaver's timeline commands.

Any content that you want to animate must be contained in a layer. A timeline can contain as many layers as you want, which means the level of interactivity and the complexity of your animations is limited only by your imagination.

The timeline is made up of frames, just like the frames in a traditional animation. Whenever you want a change to occur in your animationperhaps you want the object in the animation to change direction, size, or stacking order, for exampleyou insert a keyframe, which then sets the change within the overall timeline.

A nice thing about timelines in Dreamweaver is that they don't rely on any additional technologies like plug-ins. To view your animation, all your visitors need is a version 4 browser or later. That makes life easy for us designers.

Creating a Basic Animation

To create animations on your page, you use the Timelines panel (Window > Timelines). The Timelines panel contains a grid of cells, each of which represents a frame in the animation. Each row of cells is a channel in the timeline, and each channel can contain its own animation. This means that you can have multiple animations happening at the same time, without one interfering with the others. Each column of cells represents a specific point in time on your timeline (measured in seconds). As you add animations to the Timelines panel, they appear as horizontal purple bars, which you can adjust until your animation is set exactly as you want.

To use Dreamweaver's timeline, you'll need a layer on your page to animate.

To use Dreamweaver's timeline, you'll need a layer on your page to animate. So before you get started with timelines, you'll first create a layer and give it some content.

The Timelines Panel

[View full size image]

(1) Animation channel

(2) Behaviors channel

(3) Timeline pull-down menu

(4) Playhead

(5) Rewind to Beginning

(6) Rewind

(7) Current frame

(8) Play

(9) Behavior marker

(10) Frame rate

(11) Autoplay

(12) Loop

Here's how to animate a layer:

Click the Draw Layer button in the Layout category of the Insert bar; then draw a layer on your page.

Add some content to the layer and set any options that you want in the Property Inspector.

For example, you might insert your web site's logo on the layer with the idea of having it fly across your page. In the Property Inspector, you would then specify the size, stacking order, background color, and any other layer settings.

Once you have a layer containing some content, you're ready to add it to Dreamweaver's timeline.

On your page, move your layer to where you want it when the animation begins.

For example, you might want your logo to come swooping in from the top-left corner. Therefore, you'd position the layer at the top left of your page, where it should be before the animation sequence starts.

Open the Timelines panel by choosing Window > Timelines.

Add your layer to the timeline by choose Modify > Timeline > Add Object.

When the layer is added, Dreamweaver displays a message detailing the layer attributes that can be animated in the timeline. This message will appear every time you add a layer to the timeline, so if you want to disable it, select Don't Show Me This Message Again and click OK to continue.

Dreamweaver adds the layer to the timeline, as indicated by a purple bar. New animations are always 15 frames long by default, with white circles at each end that represent keyframes: the beginning and end of a movement.

Next, you'll set the position for where the layer should be at the end of the animation.

Click the keyframe at the end of the purple bar in the Timelines panel.

This keyframe represents the end of the animation.

Drag the layer on your page to where you want it to appear when the animation ends.

When you drag your layer to a new position, Dreamweaver draws a path on your page, indicating where the animation begins and ends. That's how easy it is to animate objects in Dreamweaver!

To preview your animation, click and hold the Play button at the top of the Timelines panel.

You can preview your animations directly in Dreamweaver without having to open the page in a browser. If you were to open your page in a web browser, you'd find that the animation doesn't play. This is because no controls on the page have been set up yet to play the timeline.

If you want to add a second animation to your page, repeat these steps with a new layer.

[View full size image]

When new animations are added, they're inserted into their own channels in the Timelines panel. With two or more animations in the Timelines panel, you can drag each to the left or right to set their timing in relation to one another. For example, you might want the first animation to begin playing right away, and have the second animation starts five frames later.

Modifying Your Animation

Now you'll see how easily you can make changes to your timeline so that your animation plays back just as you want for your visitors. You'll see how to set your animation so that it plays more slowly or quickly, begins playing automatically as soon as it's loaded into a web browser, or loops indefinitely. You'll also see how to adjust keyframes.

Make your timelines even more interesting by adding keyframes, setting the timeline to play automatically, and tweaking it in other ways.

[View full size image]

Here's how to modify your animation:

To adjust your animation's frame rate (that is, the speed at which it plays back), enter a new value in the Fps field at the top of the Timelines panel.

Decreasing the frame rate plays the animation more slowly; increasing it plays the animation more quickly. Keep in mind, though, that the actual frame rate your visitors will see depends on their browser, computer speed, and Internet connection. If the playback speed is important, test your animation on different computers that use a variety of connection speeds so that you can find a frame rate that meets your needs. For most animations, though, the default setting of 15 fps is fine.

Select Autoplay to have your animation play as soon as the page opens in your visitor's web browser.

Recording Animations Freehand

Sometimes, you may want your layer object to follow a specific path around your page. Rather than creating an animation path within the Timelines panel, you may find it easier to drag out your own animation path and have Dreamweaver create all the required frames and keyframes that your animation needs.

To create a path by dragging, follow these steps:

Select the layer that you want to animate and move it to where you want the timeline to begin.

Choose Modify > Timeline > Record Path of Layer.

Drag the layer around on your page to draw the path that the animation should follow. When you're done, release the mouse button.

As you drag around your page, you'll see a series of gray dots, indicating the path of your animation. When you release the mouse, Dreamweaver inserts the animation in the Timelines panel, complete with the necessary number of frames and keyframes.

Preview your animation by clicking and holding the Play button at the top of the Timelines panel.

If you want to tweak your animation, you can go back and manipulate your keyframes, which you'll see how to do in "Modifying Your Animation."

[View full size image]

When Autoplay is selected, Dreamweaver displays a message indicating that the Play Timeline behavior has been added to control the timeline.

Rather than using Autoplay, you can set objects on your page to control the playback of a timeline. For example, maybe you want the animation to play when the visitor performs some sort of action, like clicking a button or hyperlink. To see how this is done, head down to "Using Behaviors with Timelines."

Noteworthy

If you've set your timeline to loop, you can control the number of times the animation repeats by editing the Go to Timeline Frame behavior. Double-click the Go to Timeline Frame behavior in the Behaviors panel; then in the dialog box that appears, enter a value in the Loop field.

If you want your animation to loop continuously, select the Loop setting.

When looping is selected, Dreamweaver displays a message informing you that the Go to Timeline Frame behavior has been added.

If you want to increase or decrease the length of your animation, drag the keyframe at the end of the animation timeline.

Dragging toward the left removes frames, therefore shortening the length of the animation. Dragging toward the right adds frames, increasing the animation's length.

To add a keyframe to your animation, click the timeline where you want the keyframe to appear; then choose Modify > Timeline > Add Keyframe.

A white circle representing the keyframe is added to the timeline.

Keyframes are needed whenever something in the animation changes, such as the layer object's position or properties. You can reposition a keyframe on the timeline by dragging it to the left or right, which affects the animation's timing. With the keyframe selected in the timeline, you can make changes to the layer that it controls.

To have your animation play in an arc, drag the layer object to a new location on the page. The animation path on your page will curve to adjust to the new keyframe's position.

Use the options in the Property Inspector to change the layer's dimensions, visibility, and stacking order.

Even when a layer is being animated with a Dreamweaver timeline, you can make changes to it. If you change the layer's size, for example, when the animation is played back, the layer will appear to shrink or expand as the timeline plays. You can achieve some very interesting effects by changing layer properties.

If you want to remove frames or keyframes in your timeline, choose Modify > Timeline; then choose either Remove Frame or Remove Keyframe. Dreamweaver will remove the frame or keyframe from your animation, shortening the timeline by one frame.

If you selected the Autoplay option, preview your animation in your browser to see how it works. If you didn't use Autoplay, just click and hold down the Play button at the top of the Timelines panel to see your work.

Using Behaviors with Timelines

In the previous section, you saw how you can use Autoplay to make your animation begin playing right away for your visitors. But rather than using Autoplay, you could control the playback by using a few Dreamweaver behaviors. For instance, you could set your animation to play only when the visitor performs some kind of action, like clicking a link or rolling the cursor over a graphic. You can also set up behaviors within the timeline, so that they trigger when a specific point in the timeline is reached.

You can control your animation with a behavior. You can also set up behaviors within the timeline, so that they trigger when a specific point in the timeline is reached.

Adding behaviors to your timelines allows you to sequence the interactivity on your page. When behaviors are added to the timeline, they appear as markers in the Behavior channel at the top of the Timelines panel.

Here's how to control the playback of your timeline using behaviors:

On your page, select the object that you want to use to trigger the playback of your timeline.

For example, you could select a graphic that looks like a Play button, or a piece of text that says "Click here to play animation."

Be sure that Autoplay is turned off at the top of the Timelines panel.

In the Behaviors panel, click the Add Behavior button; then in the menu that appears, choose Timeline > Play Timeline.

In the Play Timeline dialog box that appears, choose the timeline whose playback you want to control from the Play Timeline pull-down menu; then click OK.

Dreamweaver loads the behavior into the Behaviors panel. At this point, you can choose a different triggering event from the pull-down menu in the left column, which you saw earlier in this chapter.

Test your page in your browser. When your page loads into your browser, click the object that you set the behavior for.

The animation should begin playing.

In addition, you can set up behaviors to jump to a specific frame in the timeline and to stop the timeline. In the Add Behavior menu in the Behaviors panel, choose the Go to Timeline Frame and Stop Timeline behaviors from the Timeline submenu.

You can also set up behaviors in your timeline so they are tripped by the timeline itself when the animation reaches a specific frame.

Here's how to add a behavior to your timeline:

In the Timelines panel, click a frame in your animation to select it.

Choose Modify > Timeline > Add Behavior to Timeline.

Dreamweaver displays a message indicating that the Behaviors panel will need to be used to add a behavior to the timeline.

In the Behaviors panel, click the Add Behavior button; then choose an action from the menu that appears.

From this point forward, you set a behavior just as you did earlier in this chapter. You might, for example, want a browser window to open when the animation reaches a certain point, or to make other layers on your page visible or hidden.

The dialog box for the behavior you chose appears. Set the parameters that you want; then click OK.

When you click OK, the action appears in the Behaviors panel as usual, but notice the event in the left column. It's set to trigger on a specific frame in your animation. Also take a look at the Timelines panel. The first channel is marked with a B, indicating the Behaviors channel. Whenever a behavior is set for a specific frame, as is the case here, a marker appears in this channel. This marker is helpful if you need to go back and make adjustments to your timeline behavior later.

[View full size image]

If you want to adjust your behavior, select the marker in the Behaviors channel in the Timelines panel; then in the Behaviors panel, manipulate your behavior's event or action, as you saw earlier in this chapter.

If you want to delete a behavior that you've added to the timeline, select it in the Behaviors channel; then choose Modify > Timeline > Remove Behavior.

The behavior marker is removed from the Timelines panel.

Once you have a behavior or two set up in your timeline, view your page in a web browser to make sure that the behavior is being triggered as you want.

There it is: timelines controlled by behaviors, and timelines triggering behaviors. Whether used together or by themselves, behaviors and timelines add a lot of interactivity to your pages. They can help make your site a more enjoyable place to visit.

Just the Gist

Inserting Flash Files

To insert Flash files on your page, choose Insert > Media > Flash.

Use the options available on the Property Inspector to control your Flash filesmost important, Quality and Scale.

Adding Audio

Linking to audio files is the easiest way to incorporate sound into your site. Use the Link field in the Property Inspector to link to an audio file.

When you embed an audio file, the visitor's media player controls appear on your page, allowing the visitor to play the sound file. To embed a sound file, choose Insert > Media > Plug-in.

Adding Video

Linking to video allows visitors to download the video file to their computers, minimizing compatibility issues. Use the Property Inspector's Link field to specify the path to the video clip that you want to link to.

When you embed video in your page, you can make it stream, so the visitor can view it as it loads on the page. To embed video, choose Insert > Media > Plugin.

Using Behaviors to Add Interactivity

Dreamweaver's behaviors are JavaScript functions that you insert by clicking. They're available from the Behaviors panel (Window > Behaviors).

Behaviors have two parts: an event and an action.

To add a behavior, select an object on your page; then choose a behavior from the Add Behavior menu.

To set a new event to trigger your behavior's action, use the pull-down menu in the left column of the Behaviors panel. To change an action's settings, double-click it in the right column of the panel to open its dialog box.

Creating Animation with Timelines

Timelines let you animate objects in Dreamweaver, by sequencing events and special effects. All animations are created in the Timelines panel (Window > Timelines).

Keyframes are needed whenever there's a change in the animation.

Any object that you want to animate on your page must be contained in a layer. To add a layer and its contents to the timeline, choose Modify > Timeline > Add Object to Timeline. To animate a layer, click the animation's last frame in the Timelines panel; then move the layer to a new position on your page.

Using Behaviors with Timelines

To use a behavior to control a timeline, use the behaviors in the Add Behavior > Timeline submenu: Go to Timeline Frame, Play Timeline, and Stop Timeline.

To have a timeline trip a behavior, click a frame in the animation, choose Modify > Timeline > Add Behavior to Timeline, and use the Behaviors panel to set the behavior of your choice.

Ten Ton Dreamweaver [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی