Chapter 8:  Applying Animation

    Animations can be a nice addition to a page that's not visually exciting, or can enhance an already exciting page. This chapter will discuss the process of applying animation using Microsoft FrontPage. We turn to the FrontPage program because this application generates the JavaScript required to move a layer from point A to point B on the page, and to associate the movement with an event such as a mouse click or the loading of the page.

Tools needed:

Computer & Monitor with internet acsess PC is preferred, but Macintosh is ok.
Microsoft FrontPage Ask your instructor if a student copy is available.
At least 100MB of memory A 100MB zip disk will be able to hold enough space.

Overview:

With Microsoft FrontPage, you can animate elements on your web site, creating items like text that flies across the web page or banner ads that display multiple images.

You can apply more than one effect to most items on your web page. 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 that is displayed when a site visitor clicks it.

Dynamic HTML effects

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 what's known as a " trigger event," such as clicking a mouse, pointing a mouse, loading a page, and so on.

Page transitions

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. By applying transition effects consistently and judiciously throughout your web site, you can create slide-show-style presentations with professional-looking transitions between pages.

Banner ads

A banner ad is like a rotating billboard on a Web page. It displays a timed sequence of pictures using a transition effect between pictures.

Web site designers typically use banner ads to place advertising on pages. You can create a hyperlink from the banner ad to the web site for the company, product, or service advertised in the ad. Or, if you're using the banner ad to promote a section of your own web site, you can direct the link to one of your own pages.

Hover buttons

Creating a hover button is an easy way to add animation to your web site without any scripting. Like a standard button, a hover button contains a hyperlink to another page or file. However, when a site visitor clicks or points to a hover button, the button can also glow, display a custom picture, or play a sound effect. You can also select a picture for a hover effect on a hover button. When a site visitor points to the hover button, the picture is displayed.

Marquees

A marquee displays a scrolling text message. You can customize a marquee to achieve exactly the effects you want, as in the following example:

This marquee repeats itself continuously and uses a yellow background color.

Sound effects

Sounds add another dimension to your web site. If your company has a musical or audio logo, jingle, or theme, you can play it when a site visitor browses to your home page from another site on the World Wide Web.

You can also add sound effects to a hover button. When a site visitor browsing your page clicks or points to the hover button, the sound effect is played.

 

Animating a page element:

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

    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.

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

    Events

    Click   Starts the animation when a site visitor points to the page element and clicks the left mouse button once.

    Double click   Starts the animation when a site visitor points to the page element and double-clicks the left mouse button.

    Mouse over   Starts the animation when a site visitor points to and rests the pointer on the page element.

    Page load   Starts the animation when the page is loaded in a site visitor's browser.

  3. In the Apply box, click the down arrow, and then select the type of animation effect you want to occur.

    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.

    Effects

    Fly out, Fly in, Drop in by word, Elastic, Hop, Spiral, Wave, Wipe, Zoom    Applies an animation that moves a page element.

    Formatting   Applies an animation that changes the appearance of the page element, such as changing a font color or applying a border effect.

    Swap picture   Applies an animation that swaps one picture with another one.

  4. In the Choose Settings box, click the down arrow, and then choose the settings for the effect.

    Settings

    Choose Settings   The settings listed depend on the type of page element you selected and the type of effect you selected in the Apply box. If you applied Fly out animation in step 3, select the direction or type of movement (such as To left or To bottom-left).

    Choose Font   If you applied Formatting animation in step 3, select this to change the font style, size, color, effects, or character spacing.

    Choose border   If you applied Formatting animation in step 3, select this to change the border or shading.

    Choose picture   If you selected a picture and a Swap picture effect in step 3, select this and then select the picture to swap in when the event you selected in step 2 occurs.

          Tip

To preview the page, click the Preview button or click Preview in Browser

 

click on this picture to see video

Designed by: Melde Rutledge

melderutledge@yahoo.com