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
Smart mover: Peter Bazalgette

film
Arts and Entertainment
'Old Fashioned' will be a different kind of love story to '50 Shades'
film
Arts and Entertainment
Tracey Emin's 'My Bed' is returning to the Tate more than 15 years after it first caused shockwaves at the gallery
artTracey Emin's bed returns to the Tate after record sale
Arts and Entertainment

film
Arts and Entertainment
The Great British Bake Off contestants line-up behind Sue and Mel in the Bake Off tent

TV
PROMOTED VIDEO
Have you tried new the Independent Digital Edition apps?
Arts and Entertainment
Beast would strip to his underpants and take to the stage with a slogan scrawled on his bare chest whilst fans shouted “you fat bastard” at him

music
Arts and Entertainment
On set of the Secret Cinema's Back to the Future event

film
Arts and Entertainment
Gal Gadot as Wonder Woman

film
Arts and Entertainment
Pedro Pascal gives a weird look at the camera in the blooper reel

TV
Arts and Entertainment
Public vote: Art Everywhere poster in a bus shelter featuring John Hoyland
art
Arts and Entertainment
Peter Griffin holds forth in The Simpsons Family Guy crossover episode

TV
Arts and Entertainment
Judd Apatow’s make-it-up-as-you-go-along approach is ideal for comedies about stoners and slackers slouching towards adulthood
filmWith comedy film audiences shrinking, it’s time to move on
Arts and Entertainment
booksForget the Man Booker longlist, Literary Editor Katy Guest offers her alternative picks
Arts and Entertainment
Off set: Bab El Hara
tvTV series are being filmed outside the country, but the influence of the regime is still being felt
Arts and Entertainment
Red Bastard: Where self-realisation is delivered through monstrous clowning and audience interaction
comedy
Arts and Entertainment
O'Shaughnessy pictured at the Unicorn Theatre in London
tvFiona O'Shaughnessy explains where she ends and her strange and wonderful character begins
Arts and Entertainment
The new characters were announced yesterday at San Diego Comic Con

TV
Arts and Entertainment
Rhino Doodle by Jim Carter (Downton Abbey)

TV
Arts and Entertainment
No Devotion's Geoff Rickly and Stuart Richardson
musicReview: No Devotion, O2 Academy Islington, London
Arts and Entertainment
Christian Grey cradles Ana in the Fifty Shades of Grey film

film
Arts and Entertainment
Comedian 'Weird Al' Yankovic

Is the comedy album making a comeback?

comedy
Arts and Entertainment
While many films were released, few managed to match the success of James Bond blockbuster 'Skyfall'
film
Arts and Entertainment
Jamie Dornan as Christian Grey in the first-look Fifty Shades of Grey movie still

film
Arts and Entertainment
Sue Perkins and Mel Giedroyc, centre, are up for Best Female TV Comic for their presenting quips on The Great British Bake Off

TV
Arts and Entertainment
Martin Freeman as Lester Nygaard in the TV adaptation of 'Fargo'

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

    Save the tiger: The animals bred for bones on China’s tiger farms

    The animals bred for bones on China’s tiger farms

    The big cats kept in captivity to perform for paying audiences and then, when dead, their bodies used to fortify wine
    A former custard factory, a Midlands bog and a Leeds cemetery all included in top 50 hidden spots in the UK

    A former custard factory, a Midlands bog and a Leeds cemetery

    Introducing the top 50 hidden spots in Britain
    Ebola epidemic: Plagued by fear

    Ebola epidemic: Plagued by fear

    How a disease that has claimed fewer than 2,000 victims in its history has earned a place in the darkest corner of the public's imagination
    Chris Pratt: From 'Parks and Recreation' to 'Guardians of the Galaxy'

    From 'Parks and Recreation' to 'Guardians of the Galaxy'

    He was homeless in Hawaii when he got his big break. Now the comic actor Chris Pratt is Hollywood's new favourite action star
    How live cinema screenings can boost arts audiences

    How live cinema screenings can boost arts audiences

    Broadcasting plays and exhibitions to cinemas is a sure-fire box office smash
    Shipping container hotels: Pop-up hotels filling a niche

    Pop-up hotels filling a niche

    Spending the night in a shipping container doesn't sound appealing, but these mobile crash pads are popping up at the summer's biggest events
    Native American headdresses are not fashion accessories

    Feather dust-up

    A Canadian festival has banned Native American headwear. Haven't we been here before?
    Boris Johnson's war on diesel

    Boris Johnson's war on diesel

    11m cars here run on diesel. It's seen as a greener alternative to unleaded petrol. So why is London's mayor on a crusade against the black pump?
    5 best waterproof cameras

    Splash and flash: 5 best waterproof cameras

    Don't let water stop you taking snaps with one of these machines that will take you from the sand to meters deep
    Louis van Gaal interview: Manchester United manager discusses tactics and rebuilding after the David Moyes era

    Louis van Gaal interview

    Manchester United manager discusses tactics and rebuilding after the David Moyes era
    Will Gore: The goodwill shown by fans towards Alastair Cook will evaporate rapidly if India win the series

    Will Gore: Outside Edge

    The goodwill shown by fans towards Alastair Cook will evaporate rapidly if India win the series
    The children were playing in the street with toy guns. The air strikes were tragically real

    The air strikes were tragically real

    The children were playing in the street with toy guns
    Boozy, ignorant, intolerant, but very polite – The British, as others see us

    Britain as others see us

    Boozy, ignorant, intolerant, but very polite
    How did our legends really begin?

    How did our legends really begin?

    Applying the theory of evolution to the world's many mythologies
    Watch out: Lambrusco is back on the menu

    Lambrusco is back on the menu

    Naff Seventies corner-shop staple is this year's Aperol Spritz