Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Download
Standard view
Full view
of .
Save to My Library
Look up keyword
Like this
2Activity
0 of .
Results for:
No results containing your search query
P. 1
Web Animation

Web Animation

Ratings: (0)|Views: 221|Likes:
Published by chepimanca

More info:

Published by: chepimanca on Apr 11, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

08/09/2010

pdf

text

original

 
e ruaryu or
 Web Animation
q
nimated GIFs remain the mostpopular way to add movementto a Web page. In fact, they’rethe de facto standard for ban-ner ads on the Internet. The reason issimple: most people who surf the We bcan actually see a GIF animation un-fold, re g a rdless of the computer they ownor the type of browser they use. This con-trasts with Flash, Java and DynamicH T M L, which are very robust and in-c reasingly popular formats, but whichre q u i re special plug-ins, downloadableapplets or the newest browser in ord e rto be viewed. Animated GIFs are based on one of theoldest of all animation principles—theflip book. Basically, an animated GIF filecontains a series of individual imagesthat, when viewed in sequence, cre a t ethe illusion of movement. The pro b l e mis, saving a sequence of images can pro-duce very large file sizes. Large file sizeis anathema on the Web, where it re s u l t s
The use of animated GIFs on Web sites is an ancient method of attracting users to click to places they might otherwise not have gone—it has been around since the first Web pages came online. As a meansof communication, they’ve proved remarkably resilient, thanks largely to the fact that not only can they be effective in catching the eye, but also because they’re small and can be seen on almost any browser.
a nimate
the web
A
88
February 2000
www.
DITnet
.co.ae
s
www.
pcmag
-mideast.
com
12
 
in lengthy download times. Advertisers want the audience to see the entire mes-sage which means the animated bannerad must display quickly. Downloadspeed is determined by file size, and thisspeed is so important that most large We bsites have instituted strict size limits forfiles. The rule of thumb is that a ban-ner ad should never be larger than 12K.T h e re are some standard techniquesthat can help you optimise the size of a GIF image. These include re d u c i n gthe number of colours in the image, re-d u c i n gthe number of frames, cro p p i n gthe dimensions of individual frames andavoiding dithered colours altogether. All of these techniques are based onthe premise that less is better. Fewercolours, fewer frames and fewer frame-to-frame changes result in smaller files.But less is also boring. Ultimately, abanner ad that isn’t visually intere s t i n gisn’t effective. We’ll show you how toc reate dynamic animated GIF bannersthat download efficiently and play backs m o o t h l y . Animated GIFs have been around fora long time and because of this they exhibit certain intrinsic limitations. Forexample, the format is restricted to 256colours and employs the older L Z c o m p ression scheme. Furtherm o re, itdisplays the images in a strict sequencethat you cannot modify at playback time.But it also supports some wonderf u lf e a t u res. You can determine the amountof time each frame is displayed on-s c reen, make areas transparent andchoose the disposal method by whichnew image data replaces old.If you understand these admittedly technical concepts, you’ll be able to de-sign animation sequences that take ad- vantage of them. The following tipsshow you the kind of content that workshand in hand with GIF optimisationt e c h n i q u e s .Most of today’s full-featured Web graph-ics programs, such as Macromedia Fire- works (www.macromedia.com) and Adobe ImageReady (www.adobe.com),p rovide access to these functions. Wegenerated the sample animations forthis article using Fireworks.
SLOW DOWN (OR SPEED UP) THE ANIMATION
The GIF 89A format allows you to de-t e rmine the delay between individualframes of an animation (specified in0.01-second increments). This gives youthe power to control the pace of theanimation. Aesthetics aside, in many cases you’ll find that slowing an ani-mation down (or speeding it up) allows you to reduce the overall number of frames in the file.For example, an animation containinga text phrase must be displayed on-screen long enough for the viewer to read it comfortably. You can either cre a t efour identical frames that each display for the default amount of time (0.2 sec-onds), or you can create one frame andspecify an exact delay time of 0.8 sec-onds. In a GIF file that has not been oth-erwise optimised, deleting three framesf rom a four-frame animation can re d u c ethe file size by 75 percent.The same technique works in re v e r s e . You can often create a more believablemotion effect in fewer frames by de-c reasing the delay time to 0.1 secondsor less. To see this theory in action, ex-amine the animation with the word s“The illusion of motion” in figure 4, w h e re the first frame is set at 0.6 sec-onds and the remaining three framesa re set to 0.1 seconds.
CROP AWAY REDUNDANT IMAGERY
The first frame of a GIF animation typ-ically determines the overall dimensionsof the image, but subsequent framescan be smaller. They can even be posi-tioned, using relative x, y co-ord i n a t e s ,a n y w h e re within the boundaries of thefirst image. You can use this feature toc rop away redundant image data and re-duce the overall size of the file. Thep rocess may sound complicated, but itis often as simple as activating an ex-port option. For example, Macro m e d i aF i reworks contains an Auto Crop checkbox in the Export dialog box. In somer a re cases, you can achieve a tighterc rop (and save one or two more kilo-bytes) by using a dedicated utility suchas Alchemy Mindworks GIF Construc-tion Set Professional to crop each framemanually.This cropping technique works best when you plan your animation withc ropping in mind. Basically, you shouldrestrict the frame-to-frame changes to asmall, contiguous area. In addition, youshould make sure that the new imagedata completely obscures the part of the picture you want to erase from thep revious frame.The two sample animations in figure1 prove this point. The ineff i c i e n t l c ropped image contains only a smallamount of change in each frame. And yet, because the changes appear in sev-eral diff e rent locations, a great deal oredundant information must be re t a i n e d when the subsequent frames arec ropped. The changes in the eff i c i e n t-ly cropped image occur in the same lo-cation and each new elementhides the object beneath it. As a result, a very smallc ropped rectangle can en-compass all of the necessary image data. When you choose a partic-ular animation technique,think about how well it fitsinto a cropped re c t a n g l e .Glows, for example, whichrely on a colour change, work well with cropping. Enlarg-ing a shape while keeping itin the same position is also agood choice. A true motione ffect is the least efficient an-imation option because youmust paint the new positionof the moving object and re -paint the background to hide
u ore ruary
q
 
 Web Animation
www.
DITnet
.co.ae
s
www.
pcmag
-mideast.
com
February 2000
89
34

You're Reading a Free Preview

Download
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->