Web Design: The flip-side of the Web

REMEMBER WHEN you got your first paperback dictionary as a kid? The first thing that I did with mine was to create "flip" movies of X- wing and Tie fighters battling each other in the margins. I would draw one picture in the right margin of the first page, then draw another picture just like it but moved up or down slightly on the next, and so on.

Now it's 1999. There is a new Star Wars movie and a new way of creating simple animations. The Graphic Interchange Format or Gif (http://www.independent.co.uk/net/980629ne/story4.html) allows you to set up your own flip book animation. They can be used to make Web pages more informative, attractive and energetic.

There are several different programs that can help you put together Gif animations, some more sophisticated than others. Fireworks from Macromedia (www.macromedia.com) has some excellent Gif animation-building capabilities, highly recommended if you are doing a lot of animation. However, if you already have Adobe's PhotoShop (www.dobe.com), there are several Freeware or Shareware alternatives that you can use to get the job done. My personal favourite is GIFBuilder (iawww.epfl.ch/Staff/Yves.Piguet/clip2gif-home/GifBuilder.html) for the Mac or Gif Construction Set (www.mindworkshop.com/alchemy/gifconcl.html) on the PC. With GIFBuilder you can create your animation frames on different Photoshop layers, and then drag and drop the PhotoShop file to GIFBuilder and convert the layers into an animation.

I have placed examples of these different uses on line for you to check out (www.webbedenvironments.com/examples/70.html). I used Photoshop and GIFBuilder to create them.

JavaScript Rollovers: Most Web sites use JavaScripted rollovers to change a button's graphic when the visitor places their mouse over it (www.independent.co.uk/net/981116ne/story5.html). Since these graphics are Gifs, you can use an animated Gif for the rollover. I created two graphics, one for the "off" state of the button and one for the "ready" state (when the mouse rolls over it). The off state is just a static arrow. The ready state flashes the arrow on and off. I created the animated arrow by placing the arrow and background on one layer and then placed just the background on another layer. I then animated this making the arrow flash on and off. I recommend just using one rollover graphic (such as the arrow) and then reusing that graphic around the page.

Backgrounds: I created a background Gif that looks like television static by setting up 10 different layers in Photoshop, applying noise to each layer, and then animating this in GIFBuilder. Of course, animation in a background can be highly distracting, so use this one with caution.

Illustrations: One of the most obvious uses for animated Gifs is to improve illustrations. Important data on how to guide your new Ram into its slot has to be shown with something like arrows. Using Gif animation the movement required to insert your Ram module and then snap it into place can be shown far more clearly.

Slide Shows: If you have several images that you want to show but a limited amount of space, you can use Gif to set up a slide show. Rather than trying to show fluid motion you simply place each image into its own frame, and then set how much time you want to pause before showing next image. By looping this, the slide show will continue infinitely.

Visit Jason Cranford Teague's website, Webbed Environments (www.webbedenvironments.com) or email him at jason@webbedenvironments.com

Arts and Entertainment
Call The Midwife: Miranda Hart as Chummy

tv Review: Miranda Hart and co deliver the festive goods

Arts and Entertainment
The cast of Downton Abbey in the 2014 Christmas special

tvReview: Older generation get hot under the collar this Christmas

Arts and Entertainment
Dapper Laughs found success through the video app Vine

comedy Erm...he seems to be back

Arts and Entertainment
Wolf (Nathan McMullen), Ian (Dan Starky), The Doctor (Peter Capaldi), Clara (Jenna Coleman), Santa Claus (Nick Frost) in the Doctor Who Christmas Special (BBC/Photographer: David Venni)

tvReview: No ho-ho-hos with Nick Frost's badass Santa

Arts and Entertainment
Bruce Forsyth and Tess Daly flanking 'Strictly' winners Flavia Cacace and Louis Smith

tv Gymnast Louis Smith triumphed in the Christmas special

PROMOTED VIDEO
Arts and Entertainment
Rhys says: 'I'm not playing it for laughs, but I have learnt that if you fall over on stage, people can enjoy that as much as an amazing guitar solo'
musicGruff Rhys on his rock odyssey, and the trouble with independence
Arts and Entertainment
Krysia and Daniel (Hand out press photograph provided by Sally Richardson)
How do today's composers answer the challenge of the classical giant?
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment

ebooksNow available in paperback
Arts and Entertainment

ebooks
News
Shenaz Treasurywala
film
News
tv
Arts and Entertainment
Jason Watkins as Christopher Jefferies
tv
Arts and Entertainment
Star Wars Director JJ Abrams: key character's names have been revealed
film
Arts and Entertainment
Pharrell Williams won two BBC Music Awards for Best Song and International Artist
music
Arts and Entertainment
Mark, Katie and Sanjay in The Apprentice boardroom
TV
Arts and Entertainment

Film The critics but sneer but these unfashionable festive films are our favourites

Arts and Entertainment
Frances O'Connor and James Nesbitt in 'The Missing'

TV We're so close to knowing what happened to Oliver Hughes, but a last-minute bluff crushes expectations

Arts and Entertainment
Joey Essex will be hitting the slopes for series two of The Jump

TV

Who is taking the plunge?
Arts and Entertainment
Katy Perry as an Ancient Egyptian princess in her latest music video for 'Dark Horse'

music
Arts and Entertainment
Dame Judi Dench, as M in Skyfall

film
Arts and Entertainment
Morrissey, 1988

TV
Latest stories from i100
Have you tried new the Independent Digital Edition apps?

ES Rentals

    Independent Dating
    and  

    By clicking 'Search' you
    are agreeing to our
    Terms of Use.

    Aren’t you glad you didn’t say that? The worst wince-and-look-away quotes of the year

    Aren’t you glad you didn’t say that?

    The worst wince-and-look-away quotes of the year
    Hollande's vanity project is on a high-speed track to the middle of nowhere

    Vanity project on a high-speed track to nowhere

    France’s TGV network has become mired in controversy
    Sports Quiz of the Year

    Sports Quiz of the Year

    So, how closely were you paying attention during 2014?
    Alexander Armstrong on insulting Mary Berry, his love of 'Bargain Hunt', and life as a llama farmer

    Alexander Armstrong on insulting Mary Berry and his love of 'Bargain Hunt'

    From Armstrong and Miller to Pointless
    Sanchez helps Gunners hold on after Giroud's moment of madness

    Sanchez helps Gunners hold on

    Olivier Giroud's moment of madness nearly costs them
    A Christmas without hope: Fears grow in Gaza that the conflict with Israel will soon reignite

    Christmas without hope

    Gaza fears grow that conflict with Israel will soon reignite
    After 150 years, you can finally visit the grisliest museum in the country

    The 'Black Museum'

    After 150 years, you can finally visit Britain's grisliest museum
    No ho-ho-hos with Nick Frost's badass Santa

    No ho-ho-hos with Nick Frost's badass Santa

    Doctor Who Christmas Special TV review
    Chilly Christmas: Swimmers take festive dip for charity

    Chilly Christmas

    Swimmers dive into freezing British waters for charity
    Veterans' hostel 'overwhelmed by kindness' for festive dinner

    Homeless Veterans appeal

    In 2010, Sgt Gary Jamieson stepped on an IED in Afghanistan and lost his legs and an arm. He reveals what, and who, helped him to make a remarkable recovery
    Isis in Iraq: Yazidi girls killing themselves to escape rape and imprisonment by militants

    'Jilan killed herself in the bathroom. She cut her wrists and hanged herself'

    Yazidi girls killing themselves to escape rape and imprisonment
    Ed Balls interview: 'If I think about the deficit when I'm playing the piano, it all goes wrong'

    Ed Balls interview

    'If I think about the deficit when I'm playing the piano, it all goes wrong'
    He's behind you, dude!

    US stars in UK panto

    From David Hasselhoff to Jerry Hall
    Grace Dent's Christmas Quiz: What are you – a festive curmudgeon or top of the tree?

    Grace Dent's Christmas Quiz

    What are you – a festive curmudgeon or top of the tree?
    Nasa planning to build cloud cities in airships above Venus

    Nasa planning to build cloud cities in airships above Venus

    Planet’s surface is inhospitable to humans but 30 miles above it is almost perfect