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
Secrets of JK Rowling's Harry Potter workings have been revealed in a new bibliography
arts + ents
Arts and Entertainment
Fearne Cotton is leaving Radio 1 after a decade
radio The popular DJ is leaving for 'family and new adventures'
Arts and Entertainment
arts + ents
Arts and Entertainment
Public Service Broadcasting are going it alone
music
Arts and Entertainment
Eddie Redmayne as transgender artist Lili Elbe in The Danish Girl

First look at Oscar winner as transgender artistfilm
Arts and Entertainment

Oscars 2015 Mexican filmmaker uses speech to urge 'respect' for immigrants

Arts and Entertainment
The Oscar nominations are due to be announced today

Oscars 2015 Bringing you all the news from the 87th Academy Awards

Have you tried new the Independent Digital Edition apps?
Arts and Entertainment

ebooksNow available in paperback
Arts and Entertainment

ebooks
Arts and Entertainment
Lloyd-Hughes takes the leading role as Ralph Whelan in Channel 4's epic new 10-part drama, Indian Summers

TV Review

The intrigue deepens as we delve further but don't expect any answers just yet
Arts and Entertainment
Jason Segal and Cameron Diaz star in Sex Tape

Razzies 2015 Golden Raspberry Awards 'honours' Cameron Diaz and Kirk Cameron

Arts and Entertainment
The Oscars ceremony 2015 will take place at the Dolby Theatre in Los Angeles
Oscars 2015A quiz to whet your appetite for tonight’s 87th Academy Awards
Arts and Entertainment
Sigourney Weaver, as Ripley, in Alien; critics have branded the naming of action movie network Movies4Men as “offensive” and “demographic box-ticking gone mad”.
TVNaming of action movie network Movies4Men sparks outrage
Arts and Entertainment
Sleater Kinney perform at the 6 Music Festival at the O2 Academy, Newcastle
musicReview: 6 Music Festival
Arts and Entertainment
Sleater Kinney perform at the 6 Music Festival at the O2 Academy, Newcastle
musicReview: 6 Music Festival
News
Kristen Stewart reacts after receiving the Best Actress in a Supporting Role award for her role in 'Sils Maria' at the 40th annual Cesar awards
people
News
A lost Sherlock Holmes story has been unearthed
arts + ents Walter Elliot, an 80-year-old historian, found it in his attic,
Arts and Entertainment
Margot Robbie rose to fame starring alongside Leonardo DiCaprio in The Wolf of Wall Street

Film Hollywood's new leading lady talks about her Ramsay Street days

Arts and Entertainment
Right note: Sam Haywood with Simon Usborne page turning
musicSimon Usborne discovers it is under threat from the accursed iPad
Arts and Entertainment
A life-size sculpture by Nick Reynolds depicting singer Pete Doherty on a crucifix hangs in St Marylebone church
arts + ents
Arts and Entertainment
Escalating tension: Tang Wei and Chris Hemsworth in ‘Blackhat’
filmReview: Chris Hemsworth stars as a convicted hacker in Blackhat
Arts and Entertainment

Oscar voter speaks out

film
Arts and Entertainment
The Oscars race for Best Picture will be the battle between Boyhood and Birdman

Oscars
Arts and Entertainment
Anne Boleyn (Claire Foy), Thomas Cromwell (Mark Rylance)
tvReview: Wolf Hall
Arts and Entertainment
Tom Meighan of Kasabian collects the Best Album Award
music
Arts and Entertainment
Best supporting stylist: the late L’Wren Scott dressed Nicole Kidman in 1997
film
Arts and Entertainment
Dakota Johnson and Jamie Dornan as Anastasia Steele and Christian Grey in Fifty Shades of Grey

Film

Arts and Entertainment
Mick Carter (Danny Dyer) and Peggy Mitchell (Barbara Windsor)
tv occurred in the crucial final scene
Arts and Entertainment
Glasgow wanted to demolish its Red Road flats last year
architecture
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.

    HIV pill: Scientists hail discovery of 'game-changer' that cuts the risk of infection among gay men by 86%

    Scientists hail daily pill that protects against HIV infection

    Breakthrough in battle against global scourge – but will the NHS pay for it?
    How we must adjust our lifestyles to nature: Welcome to the 'Anthropocene', the human epoch

    Time to play God

    Welcome to the 'Anthropocene', the human epoch where we may need to redefine nature itself
    MacGyver returns, but with a difference: Handyman hero of classic 1980s TV series to be recast as a woman

    MacGyver returns, but with a difference

    Handyman hero of classic 1980s TV series to be recast as a woman
    Tunnel renaissance: Why cities are hiding roads down in the ground

    Tunnel renaissance

    Why cities are hiding roads underground
    'Backstreet Boys - Show 'Em What You're Made Of': An affectionate look at five middle-aged men

    Boys to men

    The Backstreet Boys might be middle-aged, married and have dodgy knees, but a heartfelt documentary reveals they’re not going gently into pop’s good night
    Crufts 2015: Should foreign dogs be allowed to compete?

    Crufts 2015

    Should foreign dogs be allowed to compete?
    10 best projectors

    How to make your home cinema more cinematic: 10 best projectors

    Want to recreate the big-screen experience in your sitting room? IndyBest sizes up gadgets to form your film-watching
    Manchester City 1 Barcelona 2 player ratings: Luis Suarez? Lionel Messi? Joe Hart? Who was the star man?

    Manchester City vs Barcelona player ratings

    Luis Suarez? Lionel Messi? Joe Hart? Who was the star man at the Etihad?
    Arsenal vs Monaco: Monaco - the making of Gunners' manager Arsene Wenger

    Monaco: the making of Wenger

    Jack Pitt-Brooke speaks to former players and learns the Frenchman’s man-management has always been one of his best skills
    Cricket World Cup 2015: Chris Gayle - the West Indies' enigma lives up to his reputation

    Chris Gayle: The West Indies' enigma

    Some said the game's eternal rebel was washed up. As ever, he proved he writes the scripts by producing a blistering World Cup innings
    In Ukraine a dark world of hybrid warfare and murky loyalties prevails

    In Ukraine a dark world of hybrid warfare

    This war in the shadows has been going on since the fall of Mr Yanukovych
    'Birdman' and 'Bullets Over Broadway': Homage or plagiarism?

    Homage or plagiarism?

    'Birdman' shares much DNA with Woody Allen's 'Bullets Over Broadway'
    Broadchurch ends as damp squib not even David Tennant can revive

    A damp squib not even David Tennant can revive

    Broadchurch, Series 2 finale, review
    A Koi carp breeding pond, wall-mounted iPads and a bathroom with a 'wellness' shower: inside the mansion of Germany's 'Bishop of Bling'

    Inside the mansion of Germany's 'Bishop of Bling'

    A Koi carp breeding pond, wall-mounted iPads and a bathroom with a 'wellness' shower