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
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment

ebooksNow available in paperback
Arts and Entertainment

ebooks
Arts and Entertainment
theatre
Arts and Entertainment
Place Blanche, Paris, 1961, shot by Christer Strömholm
photographyHow the famous camera transformed photography for ever
Arts and Entertainment
The ‘Westmacott Athlete’
art
Arts and Entertainment
‘The Royals’ – a ‘twisted, soapy take on England’s first family’
tv Some of the characters appear to have clear real-life counterparts
News
Brooks is among a dozen show-business professionals ever to have achieved Egot status
people
Arts and Entertainment
A cut above: Sean Penn is outclassed by Mark Rylance in The Gunman
film review
Arts and Entertainment
arts + ents
Arts and Entertainment
James Franco and Zachary Quinto in I Am Michael

Film review Michael Glatze biopic isn't about a self-hating gay man gone straight

Arts and Entertainment
A scene from the movie 'Get Hard'
tvWill Ferrell’s new film Get Hard receives its first reviews
Arts and Entertainment
Left to right: David Cameron (Mark Dexter), Nick Clegg (Bertie Carvel) and Gordon Brown (Ian Grieve)
tvReview: Ian Grieve gets another chance to play Gordon Brown... this is the kinder version
Arts and Entertainment
Benedict Cumberbatch and Martin Freeman in the first look picture from next year's Sherlock special

TV
Arts and Entertainment
Because it wouldn’t be Glastonbury without people kicking off about the headline acts, a petition has already been launched to stop Kanye West performing on the Saturday night

music
Arts and Entertainment
Molly Risker, Helen Monks, Caden-Ellis Wall, Rebekah Staton, Erin Freeman, Philip Jackson and Alexa Davies in ‘Raised by Wolves’

TV review
Arts and Entertainment

TV
Arts and Entertainment
James May, Jeremy Clarkson and Richard Hammond in the Top Gear Patagonia Special

TV
Arts and Entertainment
Game of Thrones will run for ten years if HBO gets its way but showrunners have mentioned ending it after seven

Game of Thrones
Arts and Entertainment
Mans Zelmerlow will perform 'Heroes' for Sweden at the Eurovision Song Contest 2015

music
Arts and Entertainment
Elizabeth (Heida Reed) and Ross Poldark (Aiden Turner) in the BBC's remake of their 1975 original Poldark

Poldark review
  • Get to the point
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.

    Election 2015: How many of the Government's coalition agreement promises have been kept?

    Promises, promises

    But how many coalition agreement pledges have been kept?
    The Gaza fisherman who built his own reef - and was shot dead there by an Israeli gunboat

    The death of a Gaza fisherman

    He built his own reef, and was fatally shot there by an Israeli gunboat
    Saudi Arabia's airstrikes in Yemen are fuelling the Gulf's fire

    Saudi airstrikes are fuelling the Gulf's fire

    Arab intervention in Yemen risks entrenching Sunni-Shia divide and handing a victory to Isis, says Patrick Cockburn
    Zayn Malik's departure from One Direction shows the perils of fame in the age of social media

    The only direction Zayn could go

    We wince at the anguish of One Direction's fans, but Malik's departure shows the perils of fame in the age of social media
    Young Magician of the Year 2015: Meet the schoolgirl from Newcastle who has her heart set on being the competition's first female winner

    Spells like teen spirit

    A 16-year-old from Newcastle has set her heart on being the first female to win Young Magician of the Year. Jonathan Owen meets her
    Jonathan Anderson: If fashion is a cycle, this young man knows just how to ride it

    If fashion is a cycle, this young man knows just how to ride it

    British designer Jonathan Anderson is putting his stamp on venerable house Loewe
    Number plates scheme could provide a licence to offend in the land of the free

    Licence to offend in the land of the free

    Cash-strapped states have hit on a way of making money out of drivers that may be in collision with the First Amendment, says Rupert Cornwell
    From farm to fork: Meet the Cornish fishermen, vegetable-growers and butchers causing a stir in London's top restaurants

    From farm to fork in Cornwall

    One man is bringing together Cornwall's most accomplished growers, fishermen and butchers with London's best chefs to put the finest, freshest produce on the plates of some of the country’s best restaurants
    Robert Parker interview: The world's top wine critic on tasting 10,000 bottles a year, absurd drinking notes and New World wannabes

    Robert Parker interview

    The world's top wine critic on tasting 10,000 bottles a year, absurd drinking notes and New World wannabes
    Don't believe the stereotype - or should you?

    Don't believe the stereotype - or should you?

    We exaggerate regional traits and turn them into jokes - and those on the receiving end are in on it too, says DJ Taylor
    How to make your own Easter egg: Willie Harcourt-Cooze shares his chocolate recipes

    How to make your own Easter egg

    Willie Harcourt-Cooze talks about his love affair with 'cacao' - and creates an Easter egg especially for The Independent on Sunday
    Bill Granger recipes: Our chef declares barbecue season open with his twist on a tradtional Easter Sunday lamb lunch

    Bill Granger's twist on Easter Sunday lunch

    Next weekend, our chef plans to return to his Aussie roots by firing up the barbecue
    Joe Marler: 'It's the way I think the game should be played'

    Joe Marler: 'It's the way I think the game should be played'

    The England prop relives the highs and lows of last Saturday's remarkable afternoon of Six Nations rugby
    Cricket World Cup 2015: Has the success of the tournament spelt the end for Test matches?

    Cricket World Cup 2015

    Has the success of the tournament spelt the end for Test matches?
    The Last Word: Justin Gatlin knows the price of everything, the value of nothing

    Michael Calvin's Last Word

    Justin Gatlin knows the price of everything, the value of nothing