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
Don’t send in the clowns: masks and make-up conceal true facial expressions, thwarting our instinct to read people’s minds through their faces, as seen in ‘It’
film
Arts and Entertainment
Go figure: Matt Parker, wearing the binary code scarf knitted by his mother
comedy Mathematician is using comedy nights to teach and preach sums
Arts and Entertainment
Ryan Gosling in 'Drive'
filmReview: Ryan Gosling is still there, but it's a very different film
Arts and Entertainment
Urban explorer: Rose Rouse has documented her walks around Harlesden, and the people that she’s encountered along the way
books Rouse's new book discusses her four-year tour of Harlesden
Arts and Entertainment
Shock of the news: Jake Gyllenhaal in ‘Nightcrawler’
film
PROMOTED VIDEO
Arts and Entertainment
Orson Welles made Citizen Kane at 25, and battled with Hollywood film studios thereafter
film
Arts and Entertainment
A scene from Franco Zeffirelli's production of 'Aida' at Milan's famed La Scala opera house
operaLegendary opera director in battle with theatre over sale of one of his 'greatest' productions
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment
Juergen Wolf won the Young Masters Art Prize 2014 with his mixed media painting on wood, 'Untitled'
art
Arts and Entertainment
Iron Man and Captain America in a scene from
filmThe upcoming 'Black Panther' film will feature a solo black male lead, while a female superhero will take centre stage in 'Captain Marvel'
Arts and Entertainment
The Imperial War Museum, pictured, has campaigned to display copyrighted works during the First World War centenary
art
Arts and Entertainment
American Horror Story veteran Sarah Paulson plays conjoined twins Dot and Bette Tattler
tvReview: Yes, it’s depraved for the most part but strangely enough it has heart to it
Arts and Entertainment
The mind behind Game of Thrones George R. R. Martin
books

Will explain back story to fictional kingdom Westeros

Arts and Entertainment
Dorothy in Return to Oz

film Unintentionally terrifying children's movies to get you howling (in fear, tears or laughter)
Arts and Entertainment

music
Arts and Entertainment

film
Arts and Entertainment
Robert James-Collier as under-butler Thomas

TVLady Edith and Thomas show sad signs of the time
Arts and Entertainment

music
Arts and Entertainment
The Dad's Army cast hit the big screen

film
Arts and Entertainment

music
Arts and Entertainment
JK Rowling is releasing a new Harry Potter story about Dolores Umbridge

books
Arts and Entertainment
On The Apprentice, “serious” left the room many moons ago and yet still we watch

TV
Arts and Entertainment
The Doctor finds himself in a forest version of London in Doctor Who episode 'In the Forest of the Night'
TVReview: Is the Doctor ever going stop frowning?
Arts and Entertainment
A scene from David Ayer's 'Fury'

film
Arts and Entertainment
Taylor Swift performs at the 2014 iHeart Radio Music Festival
music review
Arts and Entertainment
Paul Anderson plays Arthur Shelby in Peaky Blinders series two
tvReview: Arthur Shelby Jr seems to be losing his mind as his younger brother lets him run riot in London
Arts and Entertainment
Miranda Hart has called time on her award-winning BBC sitcom, Miranda
tv
Arts and Entertainment
Sir Nicholas Serota has been a feature in the Power 100 top ten since its 2002 launch
art
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 drugs revolution starts now as MPs agree its high time for change

    The drugs revolution starts now as MPs agree its high time for change

    Commons debate highlights growing cross-party consensus on softening UK drugs legislation, unchanged for 43 years
    The camera is turned on tabloid editors in Richard Peppiatt's 'One Rogue Reporter'

    Gotcha! The camera is turned on tabloid editors

    Hugh Grant says Richard Peppiatt's 'One Rogue Reporter' documentary will highlight issues raised by Leveson
    Fall of the Berlin Wall: It was thanks to Mikhail Gorbachev that this symbol of division fell

    Fall of the Berlin Wall

    It was thanks to Gorbachev that this symbol of division fell
    Halloween 2014: What makes Ouija boards, demon dolls, and evil clowns so frightening?

    What makes ouija boards and demon dolls scary?

    Ouija boards, demon dolls, evil children and clowns are all classic tropes of horror, and this year’s Halloween releases feature them all. What makes them so frightening, decade after decade?
    A safari in modern Britain: Rose Rouse reveals how her four-year tour of Harlesden taught her as much about the UK as it did about NW10

    Rose Rouse's safari in modern Britain

    Rouse decided to walk and talk with as many different people as possible in her neighbourhood of Harlesden and her experiences have been published in a new book
    Welcome to my world of no smell and odd tastes: How a bike accident left one woman living with unwanted food mash-ups

    'My world of no smell and odd tastes'

    A head injury from a bicycle accident had the surprising effect of robbing Nell Frizzell of two of her senses

    Matt Parker is proud of his square roots

    The "stand-up mathematician" is using comedy nights to preach maths to big audiences
    Paul Scholes column: Beating Manchester City is vital part of life at Manchester United. This is first major test for Luke Shaw, Angel Di Maria and Radamel Falcao – it’s not a game to lose

    Paul Scholes column

    Beating City is vital part of life at United. This is first major test for Shaw, Di Maria and Falcao – it’s not a game to lose
    Frank Warren: Call me an old git, but I just can't see that there's a place for women’s boxing

    Frank Warren column

    Call me an old git, but I just can't see that there's a place for women’s boxing
    Adrian Heath interview: Former Everton striker prepares his Orlando City side for the MLS - and having Kaka in the dressing room

    Adrian Heath's American dream...

    Former Everton striker prepares his Orlando City side for the MLS - and having Kaka in the dressing room
    Simon Hart: Manchester City will rise again but they need to change their attitude

    Manchester City will rise again but they need to change their attitude

    Manuel Pellegrini’s side are too good to fail and derby allows them to start again, says Simon Hart
    Isis in Syria: A general reveals the lack of communication with the US - and his country's awkward relationship with their allies-by-default

    A Syrian general speaks

    A senior officer of Bashar al-Assad’s regime talks to Robert Fisk about his army’s brutal struggle with Isis, in a dirty war whose challenges include widespread atrocities
    ‘A bit of a shock...’ Cambridge economist with Glasgow roots becomes Zambia’s acting President

    ‘A bit of a shock...’ Economist with Glasgow roots becomes Zambia’s acting President

    Guy Scott's predecessor, Michael Sata, died in a London hospital this week after a lengthy illness
    Fall of the Berlin Wall: History catches up with Erich Honecker - the East German leader who praised the Iron Curtain and claimed it prevented a Third World War

    Fall of the Berlin Wall

    History catches up with Erich Honecker - the East German leader who praised the Iron Curtain and claimed it prevented a Third World War
    How to turn your mobile phone into easy money

    Turn your mobile phone into easy money

    There are 90 million unused mobiles in the UK, which would be worth £7bn if we cashed them in, says David Crookes