A basic tutorial on Flash animation

 

I myself am very new to Flash, so I thought I would start with something that is very simply yet I think quite effective. For my project I will be using a flash generated menu system, I wanted to create a brief animation to introduce the menu. We will essentially be producing a very basic flash animation using shape tweens to morph from some simple shapes into a text message.

 

For this tutorial I will be using Flash 8 but most of the instructions should still apply or at least be similar.

 

  1. Open Flash and if you are not already prompted to click ‘Flash Document’ under the create new section. This will create a blank time line and stage, essentially a blank canvas on which to work. The default settings should be fine for our purpose. Those used to working with adobe products like Photoshop will probably feel fairly familiar with the general layout.

  2. Like in Photoshop and other graphics software Flash operate with a layers system where by each layer can be manipulated independently of each other. Start by renaming the 1st and default layer ‘Layer 1’ to something more memorable in this case I am calling background as it will be the background for my menu animation. To do this simply double click on the layer name and type in your new name.

  3. Then click on the rectangle and drag the pointer to draw a rectangle that enclose all of the stage area. This should turn the whole stage into a filled rectangle (by default black).

  4. I want to change the colour of the fill for my background. To do so change tools into the section tool (top left mouse pointer on the toolbox). Then Click on the inside of the rectangle to select it (it should display a checked pattern over the area to confirm the selection). With the fill selected look at the options panel that is docked to the bottom of the screen by default. Click the box next to the colour bucket and select a new colour. For simplicity I am just going to chose a normal solid colour, in my case blue. The rectange should now change colour.

  5. With our background created we will move on to create our animation. In this instance we are going to start of with two shapes that will morph into text by the end of the animation. We are going to draw our shapes onto a new layer. To create a new layer click on the ‘Insert Layer’ button on the bottom left of the time line. Rename the new layer as before this time call it something along the lines of morph. To avoid interfering tampering with our background layer we are going to temporarily turn its visibility off. Click on the radio button beneath the eye symbol for the background layer on the timeline.

  6. You should now have a blank area again. Select your morph layer and draw two simple shapes in my case a circle and a square. First select the circle tool from the toolbox and then change the colour in the properties box so that the colour will be different to that of your background. Then repeat this process for a square.

  7. Now we have a background layer and a morph layer with some shapes on. Right now we only have on frame of content. Go to frame 35 on the time line click the box under 35 to select it and press F6 on your keyboard. Repeat this step for both layers. This has expanded your drawing to run for 35 frames.

  8. Click on the frame 35 box for your morph layer. Select both of your shapes and press delete.

  9. Click on the text tool whilst still on frame 35 and type something. Right hand click on the text and select break apart, select all of the word again and again chose break apart.

     

  10. Go back to frame 34 and right hand click on the box for your morph layer. Then look at your properties box and click select shape under the tween dialogue box.

  11. Click to make your background visible again and you should now have morphing text. Press control and enter to test your video.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: