Adobe Dreamweaver CS3 Unleashed- P17 docx

Frame Navigator— As you'll learn in this chapter, animations are frame-based, meaning that eachframe in the timeline represents a point in time for the animation.. For instance, if you w

Trang 1

background color of a text box simply by clicking a button In that example, the amount of code needed toachieve the goal is minimal Animations however, require much more code because JavaScript must controlthe placement of the element pixel by pixel The code can become extremely complex when you are

animating curves, circles, and the like Fortunately, the timeline does all the hard work for us Not only does

it allow you to edit and manage animations using a slick and intuitive interface, but regardless of the

animation's complexity within the timeline, Dreamweaver writes all the code for us All we have to do is addour elements to the timeline (contained within an AP Element), manipulate a few timeline elements, andwe're done Next, let's review the various elements of the timeline and then discuss the process involvedwith adding AP Elements to the timeline

Elements of the Timeline

If you haven't done so already, access the Timelines panel by choosing Window, Timelines Pictured withmore detail in Figure 16.1, a timeline in the Timelines panel seems overwhelming at first glance

Figure 16.1 The timeline in Dreamweaver provides a central interface for adding, changing, and

managing animations.

[View full size image]

Observe the callouts in Figure 16.1 and refer to the following bullet points as explanations for each feature:

Options menu— Like all panels in Dreamweaver, you can access advanced features for interacting

with the timeline as well as animations within the timeline from this menu Most of the options in thismenu can also be accessed directly by choosing Modify, Timeline

Timeline menu— When working with animations in Dreamweaver, you're not limited to one specific

animation contained within one timeline Instead, the Timelines panel allows you to work with multipleanimations contained within multiple timelines If you are working with more than one timeline, youcan access them from this menu

Tip

As is the case with other timeline-based programs (Flash and Director), you might find that

your project has grown far beyond the limiting scope of a single timeline When this is the case,add a timeline to the Timelines panel (covered with more detail later) Doing this can help youmanage complex sets of animations

Trang 2

Frame Navigator— As you'll learn in this chapter, animations are frame-based, meaning that each

frame in the timeline represents a point in time for the animation You can use the Frame Navigator as

a way of jumping to the beginning, to the end, or to a specific frame within the animation

FPS— Animations are frame-based, and each frame represents a point in time for the animation But

how do you control how fast an animation will play? The answer lies in the total frames per second(FPS) at which an animation should play You can control the FPS, or speed of the animation, usingthis text box The higher the number, the faster the animation The lower the number, the slower theanimation

Autoplay— Enable this check box when you want your animations to automatically begin playing

when the page loads for the first time and every time the page is refreshed in the browser

Loop— Enable this check box if you want your animations to replay or loop when the animation

reaches a conclusion

Behavior Channel— As you'll see toward the end of this chapter, behaviors aren't limited to images,

text, or form objects You can add behaviors to the timeline in an effort to control how the timelineshould play The Behavior Channel is where you'll want to associate behaviors with particular frames inthe timeline For instance, you might want a pop-up message to appear when the animation reaches aconclusion To do this, you add the Popup Message behavior to the particular frame in the BehaviorChannel where the animation ends

Note

Some features in the timeline will automatically add behaviors for you The Autoplay and Loopcheck boxes, for instance, add behaviors to the timeline that tell the browser to play the

animation when the page loads initially and/or replay the animation when the animation ends

Frame Numbers— This bar merely acts as a visual aid indicating the numeric value of the frame in

relation to your animation

Frames— Every square you see in the Timelines panel is a frame and represents a point in time for

the animation Think of these frames as cells within a film strip Your film strip might contain

thousands of still cells Place that film strip containing those still cells in a reel-to-reel player, push theplay button, and an animation/movie is projected onto a wall

Playback head— Like the playback head on a VCR, this bar allows you to click, hold, and drag

sideways to move (scrub) through the animation, displaying the current frame's information in thepage

Animation Channels— Elements on your page are added to the timeline in one of these animation

channels In most cases, you'll work with one animation and therefore take advantage of animationchannel 1 However, you're not limited to a particular channel number, even if you are working withonly one animation

Trang 3

It's important to understand that you're not limited to the number of animations that a single

timeline can contain For instance, if you wanted two animations to play at the same time in the

same timeline, simply add an AP Element (representing the first animation) in channel 1 and thenadd a second AP Element (representing the second animation) to channel 2 However, it doesn't stopthere; channels in the timeline are virtually limitless You can add as many AP Elements to multiplechannels and create as many animations in a single timeline as your project requires

Now that you have an understanding as to what the Timelines panel consists of, let's examine how APElements can be added to a timeline

Adding Layers to the Timeline

All animations created within a timeline begin with AP Elements Because Dreamweaver requires somethingtangible to manipulate, AP Elements become the foundation for our animations and must be added to thedocument before other elements To work with AP Elements in a timeline, follow these steps:

1. Create a new HTML document by choosing File, New Select Blank Page, HTML, <none>, and clickCreate

2. Insert a new AP Element on the page by choosing Insert, Layout Objects, AP Div

3. Locate the fly.gif image located in the Images folder in the Files panel and drag it into the new APElement as shown in Figure 16.2

Figure 16.2 Drag an image into the new AP Element.

Trang 4

4. Click, hold, and drag the AP Element (complete with the image) into the first animation channel of thetimeline The result will resemble Figure 16.3.

Figure 16.3 Drag the new AP Element, complete with the image, into the first

channel in the timeline.

Trang 5

As you can see from Figure 16.3, the AP Element is represented as a blue bar with dots on either side whenit's in the timeline The blue bar you're seeing is the animation bar, and those dots on both ends representkeyframes Let's discuss those terms now.

Frames, Frame Rate, and Keyframes

Three concepts are crucial when working with animations in the timeline: frames, the frame rate (measured

in frames per second, or FPS), and keyframes To define these concepts, remember what you accomplished

in the previous section You added an AP Element to the first channel of the timeline, which resulted in theaddition of a blue animation bar that spanned a series of frames Remember that the timeline is constructed

of frames, each representing a point in time in the animation

The frame rate governs the speed of the animation, or frames per second If you want your animation toplay for 3 seconds at 15 frames per second, you must extend the animation in the first animation channel sothat the end of the animation stops at the 45th frame: 15 FPS x 3 seconds = 45 frames

Tip

The default frame rate in Dreamweaver is 15 Even though video and film play at roughly 30 FPS and

24 FPS, respectively, these media don't have the bandwidth restrictions that web pages do, and themanner in which film and video are viewed is more standardized When animating for the web, youranimation is at the mercy of the end user's machine The processor speed, the speed of the Internetconnection, how much memory is available, and the quality of the video card all play crucial roles inthe appearance of an animation So if you're developing on the latest and fastest computer, you'renot getting an accurate representation about how your animation will look to the rest of the world.That's why it is especially important to test your page on several types of computers If it chokes on

a fairly standard computer, you might want to reconsider the frame rate of the animation, as well asthe content you're trying to animate

Trang 6

Keyframes, represented by the small white dots on both ends of the animation bar, represent a change

within the animation In our case, the first keyframe dot represents the start of the animation, and the last

dot represents the end of the animation The frames between the two keyframes are known as in between

frames

Knowing what you know now of frames, frame rate, and keyframes, let's extend our animation so that itplays for 3 seconds at 15 FPS To do this, click and hold the last keyframe in the animation bar and drag it

to the 45th frame The result resembles Figure 16.4

Figure 16.4 Drag the last keyframe of the animation to the 45th frame Doing this causes the

animation to play for 3 seconds at 15 FPS.

Note

The default frame rate for our animation is 15 FPS That's not to say that you're stuck with that

frame rate If you want your animation to play faster, change the value in the FPS text box to a

higher number If you want it to play slower, change the value to a lower number

Creating an Animation

With the length and frame rate set for our animation, we're ready to actually create the animation

Remember that keyframes represent the points in time where our animation changes Because this is thecase, we'll want to select the last keyframe in our animation and then position the AP Element in theDocument window where we want our animation to end To do this, follow these steps:

Trang 7

1. Select the last keyframe in the animation bar within the timeline.

2. Select the AP Element in the Document window and drag it to your right A line should appear, similar

to the one shown in Figure 16.5, representing the path that the animation will take

Figure 16.5 A line is drawn representing the path the animation will take.

3. Enable both the Autoplay and Loop check boxes

4. Save your work as sample.html

To see the animation, preview your page in the browser by choosing F12 The fly image should move fromthe left side of the screen to the right side of the screen and then back again

As you can see, creating an animation is a fairly simple process All you had to do was select the lastkeyframe and then position the AP Element in the Document window where you want the animation to end

All the between frames are created by Dreamweaver using a process known as tweening Short for betweening, tweening is the process of generating intermediate frames between two keyframes, giving the

in-appearance that the first frame evolves smoothly into the last frame

Creating Curves in an Animation

Of course, your animations don't have to be as simple as the one you created in the previous section.Dreamweaver also allows you to specify curves in an animation to create a smoother and much morenatural effect To create a curve in your animation, follow these steps:

1. Select the animation's 27th frame in the timeline The animation bar will highlight, and the playbackhead should appear over the 27th frame

Trang 8

2. Choose Modify, Timeline, Add Keyframe A new keyframe appears within the 27th frame, similar toFigure 16.6 Alternatively, select the Add Keyframe option by right-clicking the 27th frame in theanimation and choosing the Add Keyframe option from the context menu As a third option, select theAdd Keyframe option from the Timelines panel's Options menu.

Figure 16.6 Add a keyframe to the 27th frame of the animation.

3. Keyframes mark a major change in the animation Select the keyframe you just added to the Timelinespanel Then select the AP Element in the Document window and drag it straight down Dreamweavertweens a smooth curve for the fly image to follow, as shown in Figure 16.7

Figure 16.7 With the new keyframe selected, drag the AP Element straight down to

create a smooth curve.

Trang 9

4. Save your work.

Preview the page in the browser by choosing F12 Your fly image should animate, curving straight down as itanimates

Managing Animations in a Timeline

Up to this point, we've discussed the basics of creating and working with animations As we progress

through the chapter, we'll discuss more advanced topics, such as recording the path of an AP Element,working with multiple timelines, and working with behaviors in conjunction with the timeline Aside fromthose topics, however, Dreamweaver offers other options for managing objects within AP Elements, APElements within a timeline, and the timeline as a whole Most of the options are similar and can be found ineither the context menu that appears when you right-click the animation in the timeline, when you selectthe Timelines panel's Options menu, or when you choose Modify, Timeline

Tip

Depending on which method you use to access various options, the options might be named

differently Although the options perform the same task, they are named slightly differently to

coincide with the selected object For this reason, the option name is given in the following sectionsusing both names that appear in their respective menus

The options you can use to manage objects, layers, and timelines include the following:

Add Object/Add Object to Timeline— Use the Add Object option when selecting an AP Element or

image in the Document window Selecting this option creates an animation within the timeline Selectthe Add Object to Timeline option from the context menu to add an object to the Document window,

Trang 10

starting within a selected frame in the timeline.

Remove Object— Removes a selected object from the timeline This feature works the same no

matter what method you use to access the option

Add Keyframe— Select this option to add a new keyframe to an animation in the timeline The

keyframe is added to the selected frame in the animation

Remove Keyframe— Removes a selected keyframe from an animation in the timeline.

Change Object— Choose this option to replace the object in an existing animation with a different

object When you choose this option, the Change Object dialog box opens, allowing you to choose thereplacement AP Element from an Object to Animate menu

Add Behavior/Add Behavior to Timeline— Choosing either of these options forces the Behaviors

panel to open, allowing you to add a behavior to the Behavior channel in the timeline This

functionality is covered with more detail later in the chapter

Remove Behavior— Select this option while a behavior within the Behavior channel is selected to

remove it

Record Path of AP Element— Choose this option (discussed in more detail in the next section) to

allow Dreamweaver to record a path and subsequently create an animation in the timeline As youdrag an object in the Document window, Dreamweaver records the path and creates the animation

Add Frame— Choose this option to add a frame to the animation within the timeline Alternatively,

click, hold, and drag the last keyframe within the animation to add numerous frames at once

Remove Frame— Choose this option to remove a frame from an animation within a timeline.

Add Timeline— As you'll see later in the chapter, you can use this option to add a timeline to the

Timelines panel Remember, the Timelines panel can contain as many timelines as your page needs

Remove Timeline— Choose this option to remove a timeline from the Timelines panel.

Rename Timeline— Choose this option to launch the Rename Timeline dialog, which allows you to

rename the selected timeline within the Timelines panel

As you'll see, these options provide great flexibility when you're working with an animation in a timeline aswell as with timelines as a whole

Recording the Path of an AP Element

One of the more interesting features of working with animations in Dreamweaver is the Record Path of APElement feature You can use this option to have Dreamweaver automatically build an animation simply byrecording the act of you dragging an AP Element in the Document window To use this feature, follow thesesteps:

Trang 11

1. Remove the existing animation from the timeline by right-clicking the animation in the timeline andchoosing the Remove Object option from the context menu The animation disappears from the

timeline Remember, you can also select the Remove Object option from either the Timelines panel'sOptions menu or by selecting the option from the Modify, Timelines submenu

2. Remove the loop behavior from the Behaviors channel by right-clicking the behavior and choosing theRemove Behavior option from the context menu The behavior disappears from the timeline as theanimation did in the previous step

3. Select the AP Element in the Document window and choose Modify, Timeline, Record Path of AP

Element

4. Click, hold, and drag the AP Element in the Document window, creating numerous circles, simulatingthe natural movement of a fly When you've added a few circles, release the mouse The animationpath is created and will resemble Figure 16.8 in both the Document window and the timeline

Figure 16.8 The Record Path of AP Element option allows you to drag and record the

path your cursor takes in the Document window.

5. Increase the FPS to 50

6. Make sure that both the Autoplay and Loop check boxes are selected

7. Save your page as recordpath.html

Preview your work in the browser by choosing F12 Watch the fly move around the browser in a naturalmovement

Trang 12

Managing Multiple Timelines

On rare occasions, you might find that managing multiple animations in one timeline instance is arduous atbest When this becomes the case, consider branching out of the restricting confines of a single timelineinstance into two or more timelines Remember that the Timelines panel is simply a container for timelines.The number of timelines you have within the Timelines panel is restricted only by the needs of your webpage To demonstrate how multiple timelines work in Dreamweaver, follow these steps:

1. To add a second timeline to the Timelines panel, select Modify, Timeline, Add Timeline

2. The fly image and AP Element are still present in the Document window Remember, the timelinecontrols only animations and has nothing to do with the content in the Document window This way ofthinking is contrary to programs such as Flash or Director, where an object in the workspace is directlyrepresented by its instance in the timeline In these programs, removing an object's instance from thetimeline also removes the instance from the workspace Knowing that, select the AP Element in theDocument window and drag it into Timeline2 to create a simple 15-frame animation

3. Select the last keyframe in the animation and drag it to the 45th frame Then select the AP Element inthe Document window and drag it from the left side of the screen to the right side of the screen tocreate an animation similar to Figure 16.9

Figure 16.9 Drag the AP Element from the left side of the screen to the right side to

create a 45-frame animation.

4. Make sure that the Autoplay check box is disabled and that the Loop check box is enabled for

Timeline2 If you enable the Autoplay check box and preview the page in the browser, the browserattempts to play both timeline instances at once, resulting in an undesired animated effect (unless youwant two flies buzzing around at the same time)

Preview the page in the browser by choosing F12 Notice that the animation in the first timeline plays whilethe animation in the second timeline doesn't play at all To play the second animation, we can do one of twothings: We can add a button complete with behaviors that control which timeline to play (as explained in thenext section) Alternatively, we can switch to the first timeline, disable the Autoplay option for that timeline,then switch to the second timeline and enable the Autoplay check box, resulting in the second timeline'sanimation playing instead of the first To do this, follow these steps:

Trang 13

5. Save your work as multipletimelines.html.

Preview the page in the browser by choosing F12 Notice that the animation in the first timeline plays whilethe animation in the second timeline doesn't play at all To play the second animation, we can do one of twothings: We can add a button complete with behaviors that control which timeline to play (as explained in thenext section) Alternatively, we can switch to the first timeline, disable the Autoplay option for that timeline,then switch to the second timeline and enable the Autoplay check box, resulting in the second timeline'sanimation playing instead of the first To do this, follow these steps:

1. With Timeline2 selected, enable the Autoplay check box

2. Switch to Timeline1 by selecting it from the Timelines menu similar to Figure 16.10

Figure 16.10 Switch to Timeline1 by choosing it from the Timelines menu.

3. With Timeline1 selected, disable the Autoplay option

4. Save your work

Preview the page in the browser by choosing F12 This time, the second timeline plays, resulting in ananimation that flows in a straight line from the left side of the screen to the right However, the process ofgetting the second animation to play instead of the first wasn't all that intuitive In the next section, we'llreview how behaviors can interact with timelines Using behaviors, you can easily allow the user to choosewhich timeline to play If you want both timelines to play simultaneously, enable the Autoplay option forboth timelines

Trang 14

Part IV: Incorporating Multimedia and Animation

CHAPTER 16 Working with the Timeline

CHAPTER 17 Incorporating Video and Audio

CHAPTER 18 Integrating with Fireworks and Photoshop

CHAPTER 19 Integrating with Flash

Chapter 16 Working with the Timeline

IN THIS CHAPTER

Animation with the Timeline

Behaviors and the Timeline

As you know, HTML presents data within a browser window in a multitude of shapes, sizes, and colors, andprovides extra features such as forms, hyperlinks, and the capability to work with images But most

computer programming languages have more functionality than HTML does They have a powerful range ofcommands and can produce far more spectacular effects than HTML can alone One such language is

JavaScript JavaScript was developed with the Internet in mind As you saw in Chapter 10, "Using

Dreamweaver Behaviors," JavaScript affords us the capability to create pop-up messages, calculate valuesbased on user input, create images that change color when the user's cursor rolls over them, and more.Beyond these simple features, however, web developers want a way to animate HTML elements on thescreen, show or hide elements from view, and even change the physical style characteristics of HTML

elements dynamically But these more advanced features can't be accomplished with JavaScript alone.Instead, we must use a combination of technologies to achieve this goal This is where DHTML comes in.DHTML, or Dynamic HTML, is the harmonious union of HTML, CSS, and JavaScript With DHTML, we can alterthe physical style characteristics of elements in an HTML page while it is being displayed We can createanimated objects, and we can show or hide objects Take a text box and a button on an HTML page as anexample: the text box and button alone, represented by the <input type="text"> and <input

type="button"> tags, are just plain old HTML But suppose that you wanted to change the physical

characteristics of the text box when the user clicks the button Perhaps you want to change the backgroundcolor To do this, we'd simply attach a JavaScript onClick event to the button that calls a function residing

in the <head> tag of our HTML page The JavaScript function would be responsible for changing the

background color of the text box using CSS on-the-fly That's DHTML: JavaScript using CSS to change thephysical characteristics of an HTML element (in this case, the background color of the text box)

But it doesn't have to be that simple For instance, you might decide to animate text—maybe a marquee atthe top of the page that displays sports scores to users when they visit your page This is another greatexample of DHTML In this case, when the page loads, the onLoad event is fired, a function is called, andcode gets executed, written in such a way that text within a <div> tag is animated from the left side of thescreen to the right Although this example is much more complex than the first example, it's just anotherexample of what's possible with DHTML Dreamweaver provides numerous features for working with

animations such as these Throughout this chapter, we'll focus on the tools used for working with DHTML

Trang 15

and, more specifically, animation in Dreamweaver As you'll learn, the timeline, like timelines in other Adobeprograms, is intuitive, flexible, and can provide a rich user experience for your users.

As you've found in the other chapters in this book, you can work with the examples in this chapter by

downloading the files from www.dreamweaverunleashed.com You'll want to save the files for Chapter 16 in

an easy-to-find location I'll place mine in C:\VectaCorp\Chapter16 Also, be sure to update your sitereference in Dreamweaver to point to the newly created folder

Animation with the Timeline

As a leader in vector-based animation programs, Adobe's Flash and Director applications provide developerswith uncompromised flexibility Developers create their animated applications, export them as either SWF orSWD files, and then import them into Dreamweaver so that they can be presented to users in a browser thathas the appropriate plug-in preinstalled Although Flash, Director, and Dreamweaver all provide the

capability to work with animations, the difference in file output and complexity between the three programs

is unmistakable The one similarity these applications share, however, is frame-based animation controlledusing a timeline

Make no mistake about it, Flash and Director are still considered the standard for vector-based web

animation The only drawback to using these programs is that the user's browser must have the appropriateplug-in to see the specific animation If the user's browser doesn't have the appropriate plug-in installed,the animation won't be visible, resulting in a negative user experience Because the Dreamweaver timeline

is essentially an interface for managing HTML-based animations, no plug-ins are required; thus, it might be

a viable alternative to technologies such as Flash or Director that require plug-ins

Should you decide to use timelines for animations, consider the following guidelines:

Animated elements require Internet Explorer 4.0 or later and Netscape 6.0 or later Although Netscape4.x can be used, that version of Netscape uses its own propriety tags to generate layers—the <layer>and <ilayer> tags If you code using these tags, the elements will not appear in specific versions ofInternet Explorer or Netscape (Netscape 6.0+)

If you want to animate an object in your HTML document, it must first be inserted into an AP Element(essentially a <div>) Although Dreamweaver allows you to add images straight to the timeline, itdoes not allow you to animate objects within the timeline unless they're inserted into AP Elementsfirst

When selecting a frame rate (discussed later in the chapter), keep in mind that this will be considered

a "desired frame rate," which means that the animation will play at the specified frame rate or as close

to that specified frame rate as possible Ultimately, the frame rate depends on the power of the enduser's machine

Note

As mentioned, the timeline animates AP Elements Recall that AP Elements are essentially <div>

tags So where's the DHTML in animating AP Elements? The positioning of AP Elements (which areHTML <div> elements) is controlled by CSS positioning attributes JavaScript controls these

positioning attributes, usually within a callable function in the <head> tag of the web page Called

repeatedly, JavaScript can move the AP Element by changing the positioning properties of the AP

Element incrementally, decrementally, or both, resulting in an animation

How the Timeline Works

In the previous section, I outlined a simple scenario in which we could allow the user to change the

Trang 16

background color of a text box simply by clicking a button In that example, the amount of code needed toachieve the goal is minimal Animations however, require much more code because JavaScript must controlthe placement of the element pixel by pixel The code can become extremely complex when you are

animating curves, circles, and the like Fortunately, the timeline does all the hard work for us Not only does

it allow you to edit and manage animations using a slick and intuitive interface, but regardless of the

animation's complexity within the timeline, Dreamweaver writes all the code for us All we have to do is addour elements to the timeline (contained within an AP Element), manipulate a few timeline elements, andwe're done Next, let's review the various elements of the timeline and then discuss the process involvedwith adding AP Elements to the timeline

Elements of the Timeline

If you haven't done so already, access the Timelines panel by choosing Window, Timelines Pictured withmore detail in Figure 16.1, a timeline in the Timelines panel seems overwhelming at first glance

Figure 16.1 The timeline in Dreamweaver provides a central interface for adding, changing, and

managing animations.

Observe the callouts in Figure 16.1 and refer to the following bullet points as explanations for each feature:

Options menu— Like all panels in Dreamweaver, you can access advanced features for interacting

with the timeline as well as animations within the timeline from this menu Most of the options in thismenu can also be accessed directly by choosing Modify, Timeline

Timeline menu— When working with animations in Dreamweaver, you're not limited to one specific

animation contained within one timeline Instead, the Timelines panel allows you to work with multipleanimations contained within multiple timelines If you are working with more than one timeline, youcan access them from this menu

Tip

As is the case with other timeline-based programs (Flash and Director), you might find that

your project has grown far beyond the limiting scope of a single timeline When this is the case,add a timeline to the Timelines panel (covered with more detail later) Doing this can help youmanage complex sets of animations

Trang 17