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
Blackman: Landscape of children’s literature does not reflect the cultural diversity of young people
booksMalorie Blackman appeals for a better ethnic mix of authors and characters and the illustrator Quentin Blake comes to the rescue
Arts and Entertainment
'Eminem's recovery from substance abuse has made him a more potent performer, with physical charisma and energy he never had before'
musicReview: Wembley Stadium ***
Arts and Entertainment
‘Dawn of Planet of the Apes’ also looks set for success in the Chinese market

film
News
Arts and Entertainment
The successful ITV drama Broadchurch starring David Tenant and Olivia Coleman came to an end tonight

tv
PROMOTED VIDEO
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment
Chocolat author Joanne Harris has spoken about the financial struggles most authors face

books
Arts and Entertainment
A scene from How To Train Your Dragon 2

Review: Imaginative storytelling returns with vigour

film
Arts and Entertainment
Josh Hutcherson, Donald Sutherland and Jena Malone in Mockinjay: Part 1

film
Arts and Entertainment

film
Arts and Entertainment
Characters in the new series are based on real people, say its creators, unlike Arya and Clegane the Dog in ‘Game of Thrones’
tv
Arts and Entertainment
A waxwork of Jane Austen has been unveiled at The Jane Austen Centre in Bath

books
Arts and Entertainment
Britney Spears has been caught singing without Auto-Tune

music
Arts and Entertainment
Unless films such as Guardians of the Galaxy, pictured, can buck the trend, this summer could be the first in 13 years that not a single Hollywood blockbuster takes $300m

tv
Arts and Entertainment
Miley Cyrus has her magic LSD brain stolen in this crazy video produced with The Flaming Lips

music
Arts and Entertainment
Gay icons: Sesame Street's Bert (right) and Ernie

tv
Arts and Entertainment
Singer Robin Thicke and actress Paula Patton

music
Arts and Entertainment
The new film will be shot in the same studios as the Harry Potter films

books
Arts and Entertainment
Duncan Bannatyne left school at 15 and was still penniless at 29

Bannatyne leaves Dragon's Den

TV
Arts and Entertainment
The French economist Thomas Piketty wrote that global inequality has worsened

books
Arts and Entertainment
David Tennant and Benedict Cumberbatch

TV
Arts and Entertainment
Ben Affleck plays a despondent Nick Dunne in David Fincher's 'Gone Girl'

film
Arts and Entertainment
Pete Doherty (L) and Carl Barât look at the scene as people begin to be crushed

music
Arts and Entertainment

tv
Independent
Travel Shop
the manor
Up to 70% off luxury travel
on city breaks Find out more
santorini
Up to 70% off luxury travel
on chic beach resorts Find out more
sardina foodie
Up to 70% off luxury travel
on country retreats Find out more
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.

    Iraq crisis: How Saudi Arabia helped Isis take over the north of the country

    How Saudi Arabia helped Isis take over northern Iraq

    A speech by an ex-MI6 boss hints at a plan going back over a decade. In some areas, being Shia is akin to being a Jew in Nazi Germany, says Patrick Cockburn
    The evolution of Andy Serkis: First Gollum, then King Kong - now the actor is swinging through the trees in Dawn of the Planet of the Apes

    The evolution of Andy Serkis

    First Gollum, then King Kong - now the actor is swinging through the trees in Dawn of the Planet of the Apes
    You thought 'Benefits Street' was controversial: Follow-up documentary 'Immigrant Street' has got locals worried

    You thought 'Benefits Street' was controversial...

    Follow-up documentary 'Immigrant Street' has got locals worried
    Refugee children from Central America let down by Washington's high ideals

    Refugee children let down by Washington's high ideals

    Democrats and Republicans refuse to set aside their differences to cope with the influx of desperate Central Americas, says Rupert Cornwell
    Children's books are too white, says Laureate

    Children's books are too white, says Laureate

    Malorie Blackman appeals for a better ethnic mix of authors and characters and the illustrator Quentin Blake comes to the rescue
    Blackest is the new black: Scientists have developed a material so dark that you can't see it...

    Blackest is the new black

    Scientists have developed a material so dark that you can't see it...
    Matthew Barzun: America's diplomatic dude

    Matthew Barzun: America's diplomatic dude

    The US Ambassador to London holds 'jeans and beer' gigs at his official residence – it's all part of the job, he tells Chris Green
    Meet the Quantified Selfers: From heart rates to happiness, there is little this fast-growing, self-tracking community won't monitor

    Meet the 'Quantified Selfers'

    From heart rates to happiness, there is little this fast-growing, self-tracking community won't monitor
    Madani Younis: Five-star reviews are just the opening act for British theatre's first non-white artistic director

    Five-star reviews are just the opening act for British theatre's first non-white artistic director

    Madani Younis wants the neighbourhood to follow his work as closely as his audiences do
    Mrs Brown and her boys: are they having a laugh?

    Mrs Brown and her boys: are they having a laugh?

    When it comes to national stereotyping, the Irish – among others – know it can pay to play up to outsiders' expectations, says DJ Taylor
    Gavin Maxwell's bitter legacy: Was the otter man the wildlife champion he appeared to be?

    Otter man Gavin Maxwell's bitter legacy

    The aristocrat's eccentric devotion to his pets inspired a generation. But our greatest living nature writer believes his legacy has been quite toxic
    Joanna Rowsell: The World Champion cyclist on breaking her collarbone, shattering her teeth - and dealing with alopecia

    Joanna Rowsell: 'I wear my wig to look normal'

    The World Champion cyclist on breaking her collarbone, shattering her teeth - and dealing with alopecia
    Bill Granger recipes: Our chef gives raw ingredients a lift with his quick marinades

    Bill Granger's quick and delicious marinades

    Our chef's marinades are great for weekend barbecuing, but are also a delicious way of injecting flavour into, and breaking the monotony of, weekday meals
    Germany vs Argentina World Cup 2014 preview: Why Brazilians don't love their neighbours Argentina any more

    Anyone but Argentina – why Brazilians don’t love their neighbours any more

    The hosts will be supporting Germany in today's World Cup final, reports Alex Bellos
    The Open 2014: Time again to ask that major question - can Lee Westwood win at last?

    The Open 2014

    Time again to ask that major question - can Lee Westwood win at last?