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
The new Fondation Louis Vuitton in the Jardin d'Acclimatation in Paris
architecture

Arts and Entertainment
Richard E Grant as Simon Bricker and Elizabeth McGovern as Cora, Countess of Grantham
Downton

Arts and Entertainment
Lynda Bellingham stars in her last Oxo advert with on-screen husband Michael Redfern

tv
Arts and Entertainment
Hunger Games actress Jena Malone has been rumoured to be playing a female Robin in Batman v Superman

film
Arts and Entertainment
Clara takes the lead in 'Flatline' while the Doctor remains in the Tardis
tvReview: The 'Impossible Girl' earns some companion stripes... but she’s still annoying in 'Dr Who, Flatline'
PROMOTED VIDEO
Arts and Entertainment
Sean Harris in 'The Goob' film photocall, at the Venice International Film Festival 2014
filmThe Bafta-winner talks Hollywood, being branded a psycho, and how Streisand is his true inspiration
Arts and Entertainment
X Factor contestant Fleur East
tvReview: Some lacklustre performances - but the usual frontrunners continue to excel
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment
Richard Tuttle's installation in the Turbine Hall at the Tate Modern
artAs two major London galleries put textiles in the spotlight, the poor relation of the creative world is getting recognition it deserves
Arts and Entertainment
Hunger Games actress Jena Malone has been rumoured to be playing a female Robin in Batman v Superman
film
Arts and Entertainment
On top of the world: Actress Cate Blanchett and author Richard Flanagan
artsRichard Flanagan's Man Booker win has put paid to the myth that antipodean artists lack culture
Arts and Entertainment
The Everyman, revamped by Haworth Tompkins
architectureIt beats strong shortlist that included the Shard, the Library of Birmingham, and the London Aquatics Centre
Arts and Entertainment
Justice is served: Robert Downey Jr, Vincent D’Onofrio, Jeremy Strong and Robert Duvall in ‘The Judge’

Film

Arts and Entertainment
Clive Owen (centre) in 'The Knick'

TV

Arts and Entertainment
J.K. Simmons , left, and Miles Teller in a scene from

Film

Arts and Entertainment
Team Tenacity pitch their fetching solar powered, mobile phone charging, heated, flashy jacket
tvReview: No one was safe as Lord Sugar shook things up
News
Owen said he finds films boring but Tom Hanks managed to hold his attention in Forrest Gump
arts
Arts and Entertainment
Bono and Apple CEO Tim Cook announced U2's surprise new album at the iPhone 6 launch
Music Album is set to enter UK top 40 at lowest chart position in 30 years
Arts and Entertainment
The Michael McIntyre Chat Show airs its first episode on Monday 10 March 2014
Comedy
Arts and Entertainment

Review

These heroes in a half shell should have been left in hibernation
Arts and Entertainment
Richard Flanagan with his novel, The Narrow Road to the Deep North
books'The Narrow Road to the Deep North' sees the writer become the third Australian to win the accolade
Arts and Entertainment
New diva of drama: Kristin Scott Thomas as Electra
theatre
Arts and Entertainment
TV
Arts and Entertainment
Daenerys Targaryen, played by Emilia Clarke, faces new problems

Sek, k'athjilari! (That’s “yes, definitely” to non-native speakers).

TV
Arts and Entertainment
Polly Morgan

art
Arts and Entertainment
The kid: (from left) Oona, Geraldine, Charlie and Eugene Chaplin

film
Arts and Entertainment
The Banksy image in Folkestone before it was vandalised

art
Arts and Entertainment

Review: Series 5, episode 4 Downton Abbey
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.

    Two super-sized ships have cruised into British waters, but how big can these behemoths get?

    Super-sized ships: How big can they get?

    Two of the largest vessels in the world cruised into UK waters last week
    British doctors on brink of 'cure' for paralysis with spinal cord treatment

    British doctors on brink of cure for paralysis

    Sufferers can now be offered the possibility of cure thanks to a revolutionary implant of regenerative cells
    Let's talk about loss

    We need to talk about loss

    Secrecy and silence surround stillbirth
    Will there be an all-female mission to Mars?

    Will there be an all-female mission to Mars?

    Women may be better suited to space travel than men are
    Oscar Pistorius sentencing: The athlete's wealth and notoriety have provoked a long overdue debate on South African prisons

    'They poured water on, then electrified me...'

    If Oscar Pistorius is sent to jail, his experience will not be that of other inmates
    James Wharton: The former Guard now fighting discrimination against gay soldiers

    The former Guard now fighting discrimination against gay soldiers

    Life after the Army has brought new battles for the LGBT activist James Wharton
    Ebola in the US: Panic over the virus threatens to infect President Obama's midterms

    Panic over Ebola threatens to infect the midterms

    Just one person has died, yet November's elections may be affected by what Republicans call 'Obama's Katrina', says Rupert Cornwell
    Premier League coaches join the RSC to swap the tricks of their trades

    Darling, you were fabulous! But offside...

    Premier League coaches are joining the RSC to learn acting skills, and in turn they will teach its actors to play football. Nick Clark finds out why
    How to dress with authority: Kirsty Wark and Camila Batmanghelidjh discuss the changing role of fashion in women's workwear

    How to dress with authority

    Kirsty Wark and Camila Batmanghelidjh discuss the changing role of fashion in women's workwear
    New book on Joy Division's Ian Curtis sheds new light on the life of the late singer

    New book on Ian Curtis sheds fresh light on the life of the late singer

    'Joy Division were making art... Ian was for real' says author Jon Savage
    Sean Harris: A rare interview with British acting's secret weapon

    Sean Harris: A rare interview with British acting's secret weapon

    The Bafta-winner talks Hollywood, being branded a psycho, and how Barbra Streisand is his true inspiration
    Tim Minchin, interview: The musician, comedian and world's favourite ginger is on scorching form

    Tim Minchin interview

    For a no-holds-barred comedian who is scathing about woolly thinking and oppressive religiosity, he is surprisingly gentle in person
    Boris Johnson's boozing won't win the puritan vote

    Boris's boozing won't win the puritan vote

    Many of us Brits still disapprove of conspicuous consumption – it's the way we were raised, says DJ Taylor
    Ash frontman Tim Wheeler reveals how he came to terms with his father's dementia

    Tim Wheeler: Alzheimer's, memories and my dad

    Wheeler's dad suffered from Alzheimer's for three years. When he died, there was only one way the Ash frontman knew how to respond: with a heartfelt solo album