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
PROMOTED VIDEO
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment
Pointless host Alexander Armstrong will voice Danger Mouse on CBBC

TV
Arts and Entertainment
Pharrell dismissed the controversy surrounding

music
Arts and Entertainment
Jack Huston is the new Ben-Hur

film
Arts and Entertainment

TV
Arts and Entertainment
Cara Delevingne modelling

film
Arts and Entertainment
Emma Thompson and Bryn Terfel are bringing Sweeney Todd: The Demon Barber of Fleet Street to the London Coliseum

theatre
Arts and Entertainment
Sheridan Smith as Cilla Black

TV
Arts and Entertainment
Robin Thicke's video for 'Blurred Lines' has been criticised for condoning rape

Robin Thicke admits he didn't write 'Blurred Lines'

music
Arts and Entertainment
While many films were released, few managed to match the success of James Bond blockbuster 'Skyfall'

film
Arts and Entertainment
Matt Damon as Jason Bourne in The Bourne Ultimatum (2007)

film
Arts and Entertainment
Sheridan Smith as Cilla Black

Review: Cilla, ITV TV
Arts and Entertainment

TV
Arts and Entertainment
Tom Hardy stars with Cillian Murphy in Peaky Blinders II

TV
Arts and Entertainment

art
Arts and Entertainment
Keira Knightley and Benedict Cumberbatch star in the Alan Turing biopic The Imitation Game

film
Arts and Entertainment
Kanye West is on his 'Yeezus' tour at the moment

Music
Arts and Entertainment
Rob James-Collier, who plays under-butler Thomas Barrow, admitted to suffering sleepless nights over the Series 5 script

TV
Arts and Entertainment
Bradley Cooper and Jennifer Lawrence star in new film 'Serena'

film
Arts and Entertainment
Some might argue that a fleeting moment in the actor’s scintillating, silver-tongued company is worth every penny.

TV
Arts and Entertainment
Colin Firth stars as master magician Stanley Crawford in Woody Allen's 'Magic in the Moonlight'

film
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.

    Mystery of the Ground Zero wedding photo

    A shot in the dark

    Mystery of the wedding photo from Ground Zero
    His life, the universe and everything

    His life, the universe and everything

    New biography sheds light on comic genius of Douglas Adams
    Save us from small screen superheroes

    Save us from small screen superheroes

    Shows like Agents of S.H.I.E.L.D are little more than marketing tools
    Reach for the skies

    Reach for the skies

    From pools to football pitches, rooftop living is looking up
    These are the 12 best hotel spas in the UK

    12 best hotel spas in the UK

    Some hotels go all out on facilities; others stand out for the sheer quality of treatments
    These Iranian-controlled Shia militias used to specialise in killing American soldiers. Now they are fighting Isis, backed up by US airstrikes

    Widespread fear of Isis is producing strange bedfellows

    Iranian-controlled Shia militias that used to kill American soldiers are now fighting Isis, helped by US airstrikes
    Topshop goes part Athena poster, part last spring Prada

    Topshop goes part Athena poster, part last spring Prada

    Shoppers don't come to Topshop for the unique
    How to make a Lego masterpiece

    How to make a Lego masterpiece

    Toy breaks out of the nursery and heads for the gallery
    Meet the ‘Endies’ – city dwellers who are too poor to have fun

    Meet the ‘Endies’ – city dwellers who are too poor to have fun

    Urbanites are cursed with an acronym pointing to Employed but No Disposable Income or Savings
    Paisley’s decision to make peace with IRA enemies might remind the Arabs of Sadat

    Ian Paisley’s decision to make peace with his IRA enemies

    His Save Ulster from Sodomy campaign would surely have been supported by many a Sunni imam
    'She was a singer, a superstar, an addict, but to me, her mother, she is simply Amy'

    'She was a singer, a superstar, an addict, but to me, her mother, she is simply Amy'

    Exclusive extract from Janis Winehouse's poignant new memoir
    Is this the role to win Cumberbatch an Oscar?

    Is this the role to win Cumberbatch an Oscar?

    The Imitation Game, film review
    England and Roy Hodgson take a joint step towards redemption in Basel

    England and Hodgson take a joint step towards redemption

    Welbeck double puts England on the road to Euro 2016
    Relatives fight over Vivian Maier’s rare photos

    Relatives fight over Vivian Maier’s rare photos

    Pictures removed from public view as courts decide ownership
    ‘Fashion has to be fun. It’s a big business, not a cure for cancer’

    ‘Fashion has to be fun. It’s a big business, not a cure for cancer’

    Donatella Versace at New York Fashion Week