Get moving and animate your site
Monday 03 August 1998
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_ email@example.com
TV review Nick Hewer, the man whose eyebrows speak a thousand words, is set to leave The Apprentice
Film The critics but sneer but these unfashionable festive films are our favourites
TV We're so close to knowing what happened to Oliver Hughes, but a last-minute bluff crushes expectations
Arts & Ents blogs
- 1 Nigel Farage: Me vs Russell Brand on Question Time – he's got the chest hair but where are his ideas?
- 2 Harry Potter fans can apply to the Hogwarts-inspired College of Wizardry
- 3 Jessica Chambers: 19-year-old woman 'doused with lighter fluid and burned alive' in the US
- 4 Russell Brand calls Nigel Farage 'poundshop Enoch Powell' in BBC Question Time debate
- 5 Orange Wednesdays are no more
Peter Lik: The self-proclaimed 'fine-art photographer' whose work sells for millions
The best underrated Christmas movies from Love, Actually to While You Were Sleeping
Grace Dent on TV: The Lost Honour of Christopher Jefferies was a beautifully shot, immensely considered drama
The Lost Honour of Christopher Jefferies, review: Jason Watkins is brilliant, but real victim Joanna Yeates is reduced to a footnote
Marilyn Manson denies involvement in shocking Lana Del Rey rape video
Disgruntled RBS worker writes hilarious open letter to Russell Brand after anti-capitalist publicity stunt leaves him hungry
Nigel Farage defends Kerry Smith 'ch***y' comment: 'If you are going for a Chinese, what do you say you’re going for?'
Nigel Farage's approval rating hits 'record low' as popularity suffers in wake of Ukip sex scandal
Pakistan school attack live: Taliban kill at least 132 children in 'horrifying' massacre
Sony hack: Angelina Jolie branded 'seriously out of her mind' in further embarrassing leaked email saga
Panic Saturday: 13 million Britons spend £1.2bn – while 13 million others across the country live in poverty unable to afford food