To Homepage

Stage 3 - The Animation

You are going to create a promotional animation in Flash that will appear in your website.

Flash allows us to move elements on the screen, change their colour and to swap them with other elements. It is a very powerful tool used to create all sorts of effects and cartoons.


1 - Animating the Tie fighter

  1. Download this file to your user area and then open it.
  2. Go to modify...document and change the dimensions to width 400 and height 350 pixels. We will leave the background colour white but you can change it later.
  3. Press F11 to open the library of symbols for this movie.
  4. Drag the symbol TieFighter into the main part of your movie and put it in the top left.
  5. In the timeline at the top of the screen, go to frame 45. Right-click in the frame and Insert Keyframe. You should see a black dot appear in the timeline. Now drag the Tie Fighter from the top left to the bottom right.
  6. Finally, right-click in a frame between the two key frames and select Create Motion Tween.
  7. You can now press Ctrl - Enter to view your animation.

2 - Adding the X-Wing

  1. Add a new layer to your animation by using the new layer tool
  2. In the timeline, drag the red bar to frame 1. Place the symbol of the X-Wing in the top right of this layer. Animate the X-Wing in the same way as you did with the Tie Fighter.


3 - Adding some Text

 
  1. When we animate elements in our movie, it is a good idea to create new symbols.
  2. Go to Insert...New Symbol. Call the symbol 'Text' and make sure the option 'Movie Clip' is selected.
  3. Now use the test tool (the A symbol) to insert a word. You can change the font and colour in the properties panel at the bottom of the screen.
  4. Under the timeline, click on 'Scene 1' and now you can put your text on a new layer and animate it.

4 - Now Experiment

 
  • Explore some of the animation tools of Flash
  • Try making your own symbols by importing images. You can prepare images in Fireworks
  • Make cartoon symbols with the drawing tools. Look at the video of one way to make a cartoon (there are hundreds of others - be creative!)

Remember:

 
  • Each animated element should be on its own layer
  • Animations should begin and end with a keyframe (black dot)
  • You can change the background by going to Modify...Document... or you can simply put a new layer in your animation, create a rectangle and drag it to the bottom layer
  • Save your work often and use Ctrl Z to undo any mistakes
 

Getting the Animation into Your Website  
  1. Go to File...Export Movie... and save the movie in your web folder. Click OK when shown the possible settings.
  2. In Dreamweaver, you can drag the swf animation file into your website just like a picture.
 

Year 7 | Year 8 | Year 9 | Year 10 | Year 11 | ASVCE | AVCE | A2 | Videos | Staff
ICT Website of Finchley Catholic High School