Cool Stuff For Websites
Published by Techpin, on Nov 24 2009, in the categories: Websites
Creating animation on a Web page relies on the human eye's ability to retain an image (called persistence of vision). Persistence of vision refers to the fact that the shape of an image lingers on the eye after the image is removed from view or you look away. For example, go into a room, turn out the lights, and then flick the lights quickly on and off. Each time you switch the lights off, your eye retains a ghostly image of what you saw while the light was on. Persistence of vision causes you to see the ghostly images.
Another good example is when you go to the movie theater to see a movie. As you watch the movie, the projector displays a series of still images (typically 30 images [or frames] per second). Due to persistence of vision, your mind stitches the images together to create the illusion of motion. Of course, in both the movies and on a Web page, you are not limited to silent objects moving across the screen. Animation can also include speech and music. For example, a lightning strike displayed onscreen has a far greater impact when accompanied by a clap of thunder. In addition, sound, in the form of a narration, background music, or special effects like the "clicking" of an interactive button, helps to set the mood of the page and keep your visitors entertained and focused.

Although adding cool stuff for websites (like animation and sound) can bring life to what might otherwise be a dull or boring Web page, whether that life is necessary to the Web site you are designing is a question you must ask yourself before venturing into the world of animation.
Depending on an animation's file format, your Web browser may not provide built-in support you can use to display the animation. Instead, before you can view the animation, you must install special software (plug-in) that you normally download from the Web and install into your browser-sometimes as you are viewing the page that contains the object. For example, before you can display your first Flash animation, your browser must have a Flash plug-in. Years ago, users had to download the plug-in from the Macromedia Web site. Today, most newer browsers ship with the Flash plug-in already installed. Normally, the HTML statements that place the animated object within a page will also include instructions the browser can use to locate and download the corresponding plug-in. Before it downloads and installs the plug-in, however, your browser displays a dialog box informing you that the page requires software not yet installed on your machine, and the location on the Web from which the browser will download the needed plug-in. If you agree to download the plug-in, your browser will retrieve the program and install it. If you do not let your browser perform the download, you will view the Web page contents minus the animated object. In the Windows environment, most plug-ins are ActiveX controls.
In the beginning, Web content was static. After the browser finished loading a graphics image, the picture stayed in the same place within the browser window. Web designers found this too limiting on the creative process, and they looked for a way to add content that would change even after the visitor downloads a page.
In a simplistic way, Dynamic HTML (DHTML) makes this possible. Within a Web page, designers often produce DHTML content by using a scripting language, such as JavaScript, to access something called "the document object model" (DOM, an underlying software object) within the Internet browser. Basically, the DOM lets a script control the appearance of all the elements (that is, all objects) the browser displays on a Web page. What you must remember with respect to DHTML is that all processing occurs within the browser. DHTML uses client-side processing as opposed to a serverside operation.
Today, almost all visitors use Web browsers that let client-side scripts take control of the DOM. As such, designers can use scripts to alter and/or move the elements within a Web page. For example, you can use DHTML to change the text color as the visitor moves the mouse pointer over a word within a hypertext link. Although changing the color of text is not strictly animation, it does create a change onscreen that helps focus the visitor's attention.
Graphic Interchange Format (GIF) animation is the most popular form of animation on the Internet today. Animated GIF files work like traditional hand-painted, frame-by-frame animation created by companies such as Disney. Each GIF file contains a number of cells, with each cell representing one part of the animation. When you save the GIF file, the image-editing software stacks the images (that is, the cells) one on top of another and saves all them within a single file. When the Web browser opens the file, it displays the individual images one at a time, and creates a visual impression of movement.

When you save a GIF animation, you select from a series of options that let you control the speed and duration of the animation. The program you use to create the GIF saves the options you select within the GIF file, and the Web browser interprets the choices when it opens the file to play the animation. Because animation attracts attention, GIF animation is used extensively in marketing and advertising..
Animation attracts attention, it entertains, and it informs. However, as wonderful as animation is, there are concerns to using animation on a Web page:
-Use animation to attract attention, but don't overdo it - Animation is an attention grabber, but too much animation can be a problem. If you create animation to attract your visitor's attention, refrain from using more than one, or possibly two animations on each page.
-Use animation to enhance the message of the Web page, but make sure that it adds value - Attempt to use animation that relates to the other static information on the page. For example, is that rotating logo in the upper-left corner of the browser window contributing to the overall design and message of the page, or did you place it there simply to prove you could do it?
-Do not use animation when it becomes distracting - Avoid animation on Web pages that contain large bodies of text. Animation impacts the visitor's concentration and distracts from the reading of the text. Animation attracts attention; too much animation keeps the visitor from focusing.
-Do not use animation for animation's sake - Because animation files have larger file sizes, and consequently take longer for the Web browser to download and display, use animation only when it contributes to the page.
Now another cool stuff for websites is the sound. If you do not believe that sound is part of a visual experience, watch a television show with the sound turned off. Although this might be an acceptable practice during commercials, television without sound creates only half the experience. And it's not just the voices of the characters that keep the attention of a viewer riveted to the screen; the full experience also includes background music.

Just as the sound coming from a television helps set the mood for the audience, you can provide a more engaging experience for your site's visitors by adding sound to the text, graphics, and animations you use. A properly designed soundtrack helps your visitors gain a total experience by setting a mood that draws them into the content and thereby keeps them on the Web site. However, just as a well designed soundtrack keeps visitors riveted to the page, a poorly designed soundtrack will drive them away.
So, animation and sound are pretty important for websites in our days.







Want to add something? Post your comments