Get moving and animate your site

Web Design

FLASH IS rapidly becoming the tool of choice for creating dynamic websites, despite definite limitations (see last week http://www.independent.co.uk/net/980727ne/story4.html). Although Macromedia will set you back a few quid, you can take it for a test drive by downloading a fully functional, though time-limited version from the Macromedia Web site (http://www. macromedia.com). Grab this (and the Flash plug-in for your browser, of course) and follow along as I explain how I created a simple animated logo with Flash.

The idea: For this Flash animation, I wanted to add movement to the logo I use for my freelance business. I call myself "moonshadowNM" and my logo is a moon covering a sun, with a starburst glow coming off the edge of the moon. I wanted to animate the moon, slowly moving it across and eclipsing the sun. You can take a look at the final results at: http://www.webbed environments.com/examples/30/ index.html

Creating vector graphics and bringing it into Flash: Flash has some fairly sophisticated drawing tools and can even render complex gradients, but I had created the logo in another vector drawing program, in this case Freehand. This file included each of the elements I mentioned above. I ran Flash and imported the vector graphic by selecting File-Import and then selecting the file I created in Freehand.

Setting up the layers: Now that the elements are in Flash, we need to put each one on its own layer so that we can give each element an action independent of the other elements. I created three more layers (four in total), cut the elements off the first layer, and placed each on to its own layer with the topmost element in the deign residing in the topmost layer.

Setting the key Frames: Like a film strip, a Flash animation is made up of still frames. As each still frame is played back in sequence, the result is the illusion of action. In Flash, we set up key frames to define the starting and stopping points of the action. For this move, the animation lasted a little over a second, so I set key frames by selecting the first frame of all five layers and clicking Insert-Key frame and then did the same in the 30th frame (1.2 seconds later). This copies the information from the first frame into all of the frames to the 30th frame.

Moving elements: I wanted the moon to move from the bottom right corner across to its final position. To do this, I set its starting position by selecting frame one in layer three, clicking on the moon and moving it down to the position I wanted it to start at. Next, I selected all of the frames in layer three and choose the Frame option in the Modify menu. Finally, I select motion in the Tweening menu and clicked OK. This will automatically fill in the frames between the two key frames to give the illusion that the moon is moving across the face of the sun.

Resizing elements: Resizing an element works very much like moving one, where you set the starting size and then use the Tweening control to set up the frames in between to the final size. To resize the starburst, I enlarged the element in the first frame until it was the same size as the sun behind it. I then selected Frame from the Modify menu and then shape from the Tweening menu. This will fill the in-between frames, giving the illusion that the starburst shrinks as the moon moves across the face of the sun.

Exporting the animation: You can save the Flash file in its native format, but in order to use the animation on the Web, you have to export the Flash movie into the Shockwave format so that it can be played in a browser using the Shockwave plug-in. This is actually fairly easy. I just selected Export Movie under the File menu, clicked Save, and accepted the default settings by clicking OK.

Embedding the movie in a Web page: To see the Flash movie, I had to embed it into an HTML page. I used the following code for my movie:

This places my Flash movie into the Web page and expands it to fill 95 per cent of the space available to it, turns looping off so that it only plays once, and sets the quality of the image to be high.

Take a look at the final results online and notice that no matter how the window is sized, the Flash animation will resize to fit in the window. Not only will a GIF animation not resize in this manner, the same animation as a GIF is 51K versus 5K for the Flash file.

Send comments or questions to Jason Cranford Teague at indy_ webdesign@mindspring.com

Suggested Topics
Arts and Entertainment
Caroline Flack became the tenth winner of Strictly Come Dancing
tvReview: 'Absolutely phenomenal' Xtra Factor presenter wins Strictly Come Dancing final
Arts and Entertainment
J Jefferson Farjeon at home in 1953
booksBooksellers say readers are turning away from modern thrillers and back to golden age of crime writing
Arts and Entertainment
Nick Hewer is to leave The Apprentice after 10 years

TV review Nick Hewer, the man whose eyebrows speak a thousand words, is set to leave The Apprentice

Arts and Entertainment
Female fans want more explicit male sex in Game of Thrones, George R R Martin says

film George RR Martin owns a cinema in Santa Fe

Arts and Entertainment
Clued up: John Lynch and Gillian Anderson in ‘The Fall’

TV review

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.

    The week Hollywood got scared and had to grow up a bit

    The week Hollywood got scared and had to grow up a bit

    Sony suffered a chorus of disapproval after it withdrew 'The Interview', but it's not too late for it to take a stand, says Joan Smith
    From Widow Twankey to Mother Goose, how do the men who play panto dames get themselves ready for the performance of a lifetime?

    Panto dames: before and after

    From Widow Twankey to Mother Goose, how do the men who play panto dames get themselves ready for the performance of a lifetime?
    Thirties murder mystery novel is surprise runaway Christmas hit

    Thirties murder mystery novel is surprise runaway Christmas hit

    Booksellers say readers are turning away from dark modern thrillers and back to the golden age of crime writing
    Anne-Marie Huby: 'Charities deserve the best,' says founder of JustGiving

    Anne-Marie Huby: 'Charities deserve the best'

    Ten million of us have used the JustGiving website to donate to good causes. Its co-founder says that being dynamic is as important as being kind
    The botanist who hunts for giant trees at Kew Gardens

    The man who hunts giants

    A Kew Gardens botanist has found 25 new large tree species - and he's sure there are more out there
    The 12 ways of Christmas: Spare a thought for those who will be working to keep others safe during the festive season

    The 12 ways of Christmas

    We speak to a dozen people who will be working to keep others safe, happy and healthy over the holidays
    Birdwatching men have a lot in common with their feathered friends, new study shows

    The male exhibits strange behaviour

    A new study shows that birdwatching men have a lot in common with their feathered friends...
    Diaries of Evelyn Waugh, Virginia Woolf and Noël Coward reveal how they coped with the December blues

    Famous diaries: Christmas week in history

    Noël Coward parties into the night, Alan Clark bemoans the cost of servants, Evelyn Waugh ponders his drinking…
    From noble to narky, the fall of the open letter

    From noble to narky, the fall of the open letter

    The great tradition of St Paul and Zola reached its nadir with a hungry worker's rant to Russell Brand, says DJ Taylor
    A Christmas ghost story by Alison Moore: A prodigal daughter has a breakthrough

    A Christmas ghost story by Alison Moore

    The story was published earlier this month in 'Poor Souls' Light: Seven Curious Tales'
    Marian Keyes: The author on her pre-approved Christmas, true love's parking implications and living in the moment

    Marian Keyes

    The author on her pre-approved Christmas, true love's parking implications and living in the moment
    Bill Granger recipes: Our chef creates an Italian-inspired fish feast for Christmas Eve

    Bill Granger's Christmas Eve fish feast

    Bill's Italian friends introduced him to the Roman Catholic custom of a lavish fish supper on Christmas Eve. Here, he gives the tradition his own spin…
    Liverpool vs Arsenal: Brendan Rodgers is fighting for his reputation

    Rodgers fights for his reputation

    Liverpool manager tries to stay on his feet despite waves of criticism
    Amir Khan: 'The Taliban can threaten me but I must speak out... innocent kids, killed over nothing. It’s sick in the mind'

    Amir Khan attacks the Taliban

    'They can threaten me but I must speak out... innocent kids, killed over nothing. It’s sick in the mind'
    Michael Calvin: Sepp Blatter is my man of the year in sport. Bring on 2015, quick

    Michael Calvin's Last Word

    Sepp Blatter is my man of the year in sport. Bring on 2015, quick