Using Animation in Your Web

Animate/Modify A Page Element

You can apply Dynamic HTML (DHTML) animation effects to just about anything on a page — text, paragraphs, pictures, buttons, marquees, and so on — and tie the effect to a trigger event, such as clicking a mouse, pointing a mouse, loading a page, and so on. You can create an animation that makes text fly in from the right when the page is loaded, as in the following example:

DHTML animation makes this text fly in from the right when the page is loaded.

1. Select the page element you want to animate, and then click Dynamic HTML Effects on the Format menu.

   The DHTML Effects toolbar is displayed.

2. In the On box, click the down arrow, and then select the event that will trigger the animation:
   • To start the animation when a site visitor points to the page element and clicks the left mouse button once, select Click.
   • To start the animation when a site visitor points to the page element and double-clicks the left mouse button, select Double click.
   • To start the animation when a site visitor points to and rests on the page element, select Mouse over.
   • To start the animation when the page is loaded in a site visitor's browser, select Page load.

   Note   The events listed in the On box depend on the type of page element you selected.

3. In the Apply box, click the down arrow, and then select the type of animation effect you want to occur:
   • To apply an animation that moves a page element, click Fly out, Fly in, Drop in by word, Elastic, or one of the other movement animations.
   • To apply an animation that changes the appearance of the page element, such as changing a font color or applying a border effect, click Formatting.
   • If you selected a picture, to apply an animation that swaps the picture with another one, click Swap picture.

   Note   The effects listed in the Apply box depend on the type of page element you selected, and on the type of event you selected in step 2. 
   

4. In the Choose Settings box, click the down arrow, and then choose the settings for the effect:
   • If you applied Fly out animation in step 3, select the direction or type of movement, such as to left or to top-right by word.
   • If you applied Formatting animation in step 3, select Choose font to change the font style, size, color, effects, or character spacing, or select Choose border to change the border or shading.
   • If you selected a picture and a Swap picture effect in step 3, click Choose picture and then select the picture to swap on the event you selected in step 2.

   Note    The settings listed in the Choose Settings box depend on the type of page element you selected and the type of effect you selected in the Apply box.

Tips

• To highlight page elements that use DHTML animation, click Highlight DHTML Effects on the DHTML Effects toolbar.
• To quickly view the details about a DHTML animation applied to a page element, point to the element.
• The best way to determine the type of animation you want is to experiment by applying different events and effects and then previewing the page in a browser. To preview the page, click the Preview tab, or click Preview in Browser on the File menu.
• To remove the effect, click Remove Effect on the DHTML Effects toolbar. You can also remove animation in Page view by selecting the page element and pressing CTRL+SPACEBAR.
• You can copy animation from one page element to another by using Format Painter . Select the element whose animation you want to copy, click Format Painter , and then click the page element to which you want to apply the animation.
• You can apply multiple effects to most page elements. For example, you can animate text to fly in from the right when the page is loaded, and then add a border around the text when a site visitor clicks it.

Highlight animated elements on the Normal tab in Page view

When you're editing a page on the Normal tab in Page view, you can turn on highlighting beneath page elements that use Dynamic HTML (DHTML) animations or effects, such as text that flies off the page or an image that changes when a site visitor clicks it. You can then see at a glance which page elements use DHTML animation or effects.

1. On the View menu, point to Toolbars, and then click DHTML Effects if it is not already checked.
2. On the DHTML Effects toolbar, click Highlight DHTML Effects

Tips

• To quickly view the details about an effect applied to an element, point to the element.
• You can copy animation from one page element to another by using Format Painter . Select the element whose animation you want to copy, click Format Painter , and then click the page element to which you want to apply the animation.
• To remove an animation from a page element, select the page element and press CTRL+SPACEBAR.

Remove animation from a page element

If you've applied Dynamic HTML (DHTML) animation or special effects to a page element, you can easily remove the animation without removing the page element. For example, if you've created an animation in which a paragraph flies off the page to the left when clicked, you can remove the animation but leave the paragraph intact.

• In Page view, select the page element from which you want to remove the animation or effect, and then press CTRL+SPACEBAR. Or, if the DHTML Effects toolbar is displayed, click Remove Effect.

Tips

• To highlight page elements that use DHTML animation, click Highlight DHTML Effects on the DHTML Effects toolbar.
• You can copy animation from one page element to another by using Format Painter . Select the element whose animation you want to copy, click Format Painter , and then click the page element to which you want to apply the animation.

Animate menus

You can use animation to open menus. When you click or point to the name of a menu, that menu can "unfold" from top to bottom and left to right, "slide" from top to bottom, or randomly use either effect.

• On the Tools menu, click Customize, and then click the Options tab. In the Menu animations list, select the type of animation you want to use, or click None

Create a transition effect for a page or web

You can create special effects that are displayed when a site visitor enters or leaves your site, or browses to or from a specific page. For example, this page uses a "vertical blinds" effect that lasts 5 seconds when a visitor browses to it the first time. By applying transition effects consistently and judiciously throughout your web, you can create slide-show-style presentations with professional-looking transitions between pages.

1. In Page view, open the page for which you want to display the transition effect. On the Format menu, click Page Transition.
2. In the Event box, click the the event that will trigger the transition effect. For example, click Page enter to display the transition effect when a site visitor browses to the page for the first time.
3. In the Transition effect box, click the type of transition effect to use when the page is displayed or exited.

   Tip  

   • The best way to choose a transition effect is to create one, save the page, and preview the page in your browser.
     
4. In the Duration box, type the amount of time that you want the transition effect to last.

Tip

• To animate a specific page element when a page is loaded, select the page element, and then click Dynamic HTML Effects on the Format menu. On the DHTML Effects toolbar, click Page load in the On box, and then select the animation effect and settings in the other boxes.

Add a video

You can add a video to your page. You can add any type of video that can be played by the Windows Media Player.

1. In Page view, position the insertion point where you want to insert a video.
2. On the Insert menu, point to Picture, and then click Video.
3. If the video clip file is not in a web, click the File button .
4. Browse to the video file and select it.

Tip   If Microsoft Internet Explorer is installed on your computer, you can click the Preview tab to preview the video.

Note   Some Web browsers do not support video.