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
Rhino Doodle by Jim Carter (Downton Abbey)

TV
Arts and Entertainment
Christian Grey cradles Ana in the Fifty Shades of Grey film

film
Arts and Entertainment
Chris Pratt stars in Guardians of the Galaxy
film
Arts and Entertainment
Comedian 'Weird Al' Yankovic

Is the comedy album making a comeback?

comedy
PROMOTED VIDEO
Have you tried new the Independent Digital Edition apps?
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
Arts and Entertainment
A scene from Shakespeare in Love at the Noel Coward Theatre
theatreReview: Shakespeare in Love has moments of sheer stage poetry mixed with effervescent fun
Arts and Entertainment
Dwayne 'The Rock' Johnson stars in Hercules

film
Arts and Entertainment
Standing the test of time: Michael J Fox and Christopher Lloyd in 'Back to the Future'

film
Arts and Entertainment
<p><strong>2008</strong></p>
<p>Troubled actor Robert Downey Jr cements his comeback from drug problems by bagging the lead role in Iron Man. Two further films follow</p>

film
Arts and Entertainment

theatre
Arts and Entertainment
Tycoons' text: Warren Buffett and Bill Gates both cite John Brookes' 'Business Adventures' as their favourite book

books
Arts and Entertainment
Panic! In The Disco's Brendon Urie performs on stage

music
Arts and Entertainment

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

film
Arts and Entertainment

TV
Arts and Entertainment
Radio 4's Today programme host Evan Davis has been announced as the new face of Newsnight

TV
Arts and Entertainment
Pharrell Williams performing on the Main Stage at the Wireless Festival in Finsbury Park, north London

music
Arts and Entertainment
Carrie Mathison returns to the field in the fourth season of Showtime's Homeland

TV
Arts and Entertainment
Crowds soak up the atmosphere at Latitude Festival

music
Arts and Entertainment
Meyne Wyatt and Caren Pistorus arrive for the AACTA Aawrds in Sydney, Australia

TV
Arts and Entertainment
Rick Astley's original music video for 'Never Gonna Give You Up' has been removed from YouTube

music
Arts and Entertainment
Quentin Blake's 'Artists on the beach'

Artists unveils new exhibition inspired by Hastings beach

art
Arts and Entertainment
MusicFans were left disappointed after technical issues
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.

    Evan Davis: The BBC’s wolf in sheep’s clothing to take over at Newsnight

    The BBC’s wolf in sheep’s clothing

    What will Evan Davis be like on Newsnight?
    Finding the names for America’s shame: What happens to the immigrants crossing the US-Mexico border without documents who never make it past the Arizona desert?

    Finding the names for America’s shame

    The immigrants crossing the US-Mexico border without documents who never make it past the Arizona desert
    Inside a church for Born Again Christians: Speaking to God in a Manchester multiplex

    Inside a church for Born Again Christians

    As Britain's Anglican church struggles to establish its modern identity, one branch of Christianity is booming
    Rihanna, Kim Kardashian and me: How Olivier Rousteing is revitalising the house of Balmain

    Olivier Rousteing is revitalising the house of Balmain

    Parisian couturier Pierre Balmain made his name dressing the mid-century jet set. Today, Olivier Rousteing – heir to the house Pierre built – is celebrating their 21st-century equivalents. The result? Nothing short of Balmania
    Cancer, cardiac arrest, HIV and homelessness - and he's only 39

    Incredible survival story of David Tovey

    Tovey went from cooking for the Queen to rifling through bins for his supper. His is a startling story of endurance against the odds – and of a social safety net failing at every turn
    Backhanders, bribery and abuses of power have soared in China as economy surges

    Bribery and abuses of power soar in China

    The bribery is fuelled by the surge in China's economy but the rules of corruption are subtle and unspoken, finds Evan Osnos, as he learns the dark arts from a master
    Commonwealth Games 2014: Highland terriers stole the show at the opening ceremony

    Highland terriers steal the show at opening ceremony

    Gillian Orr explores why a dog loved by film stars and presidents is finally having its day
    German art world rocked as artists use renowned fat sculpture to distil schnapps

    Brewing the fat from artwork angers widow of sculptor

    Part of Joseph Beuys' 1982 sculpture 'Fettecke' used to distil schnapps
    BBC's The Secret History of Our Streets reveals a fascinating window into Britain's past

    BBC takes viewers back down memory lane

    The Secret History of Our Streets, which returns with three films looking at Scottish streets, is the inverse of Benefits Street - delivering warmth instead of cynicism
    Joe, film review: Nicolas Cage delivers an astonishing performance in low budget drama

    Nicolas Cage shines in low-budget drama Joe

    Cage plays an ex-con in David Gordon Green's independent drama, which has been adapted from a novel by Larry Brown
    How to make your own gourmet ice lollies, granitas, slushy cocktails and frozen yoghurt

    Make your own ice lollies and frozen yoghurt

    Think outside the cool box for this summer's tempting frozen treats
    Ford Fiesta is UK's most popular car of all-time, with sales topping 4.1 million since 1976

    Fiesta is UK's most popular car of all-time

    Sales have topped 4.1 million since 1976. To celebrate this milestone, four Independent writers recall their Fiestas with pride
    10 best reed diffusers

    Heaven scent: 10 best reed diffusers

    Keep your rooms smelling summery and fresh with one of these subtle but distinctive home fragrances that’ll last you months
    Commonwealth Games 2014: Female boxers set to compete for first time

    Female boxers set to compete at Commonwealth Games for first time

    There’s no favourites and with no headguards anything could happen
    Five things we’ve learned so far about Manchester United under Louis van Gaal

    Five things we’ve learned so far about United under Van Gaal

    It’s impossible to avoid the impression that the Dutch manager is playing to the gallery a little