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
The Secret Cinema performance of Back to the Future has been cancelled again
filmReview: Sometimes the immersive experience was so good it blurred the line between fiction and reality
Arts and Entertainment
Sydney and Melbourne are locked in a row over giant milk crates
art
Arts and Entertainment
Crowd control: institutions like New York’s Metropolitan Museum of Art are packed

Art
Arts and Entertainment
Cillian Murphy stars as Tommy Shelby in Peaky Blinders

TV
PROMOTED VIDEO
Arts and Entertainment
The cast of The Big Bang Theory in a still from the show

TV
Arts and Entertainment

art
Have you tried new the Independent Digital Edition apps?
Independent
Travel Shop
the manor
Up to 70% off luxury travel
on city breaks Find out more
santorini
Up to 70% off luxury travel
on chic beach resorts Find out more
sardina foodie
Up to 70% off luxury travel
on country retreats Find out more
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.

    Dress the Gaza situation up all you like, but the truth hurts

    Robert Fisk on Gaza conflict

    Dress the situation up all you like, but the truth hurts
    Save the tiger: Tiger, tiger burning less brightly as numbers plummet

    Tiger, tiger burning less brightly

    When William Blake wrote his famous poem there were probably more than 100,000 tigers in the wild. These days they probably number around 3,200
    5 News's Andy Bell retraces his grandfather's steps on the First World War battlefields

    In grandfather's footsteps

    5 News's political editor Andy Bell only knows his grandfather from the compelling diary he kept during WWI. But when he returned to the killing fields where Edwin Vaughan suffered so much, his ancestor came to life
    Lifestyle guru Martha Stewart reveals she has flying robot ... to take photos of her farm

    Martha Stewart has flying robot

    The lifestyle guru used the drone to get a bird's eye view her 153-acre farm in Bedford, New York
    Former Labour minister Meg Hillier has demanded 'pootling lanes' for women cyclists

    Do women cyclists need 'pootling lanes'?

    Simon Usborne (who's more of a hurtler) explains why winning the space race is key to happy riding
    A tale of two presidents: George W Bush downs his paintbrush to pen father’s life story

    A tale of two presidents

    George W Bush downs his paintbrush to pen father’s life story
    Restaurateur Mitch Tonks has given the Great Western Pullman dining car a makeover

    The dining car makes a comeback

    Restaurateur Mitch Tonks has given the Great Western Pullman dining car a makeover
    Gallery rage: How are institutions tackling the discomfort of overcrowding this summer?

    Gallery rage

    How are institutions tackling the discomfort of overcrowding this summer?
    Louis van Gaal has £500,000 video surveillance system installed to monitor Manchester United players

    Eye on the prize

    Louis van Gaal has £500,000 video surveillance system installed to monitor Manchester United players
    Women's rugby: Tamara Taylor adds fuel to the ire in quest to land World Cup

    Women's rugby

    Tamara Taylor adds fuel to the ire in quest to land World Cup
    Save the tiger: The day America’s love of backyard tigers led to a horrific bloodbath

    The day America’s love of backyard tigers led to a horrific bloodbath

    With only six per cent of the US population of these amazing big cats held in zoos, the Zanesville incident in 2011 was inevitable
    Samuel Beckett's biographer reveals secrets of the writer's time as a French Resistance spy

    How Samuel Beckett became a French Resistance spy

    As this year's Samuel Beckett festival opens in Enniskillen, James Knowlson, recalls how the Irish writer risked his life for liberty and narrowly escaped capture by the Gestapo
    We will remember them: relatives still honour those who fought in the Great War

    We will remember them

    Relatives still honour those who fought in the Great War
    Star Wars Episode VII is being shot on film - and now Kodak is launching a last-ditch bid to keep celluloid alive

    Kodak's last-ditch bid to keep celluloid alive

    Director J J Abrams and a few digital refuseniks shoot movies on film. Simon Usborne wonders what the fuss is about
    Once stilted and melodramatic, Hollywood is giving acting in video games a makeover

    Acting in video games gets a makeover

    David Crookes meets two of the genre's most popular voices