Macromedia Flash 4

Fading text with Flash

If you feel like you want to be a little bit more flash with your Website, then maybe you should think about using Flash. There's a lot you can do with Flash, but sadly it's quite a complicated piece of software. But with Masterclass you can cut through the jargon and have Flash animations up and running in no time. This tutorial will show you how to create an animation, which shows some text fading in and out, using Macromedia Flash 4.
Part 1: getting started
Flash isn't an easy tool to master, but it can produce some really cool results. There's lots of ways you can use it on your Website where it's appropriate. Maybe you want to have an animation that fades in the name of your Website when it's first accessed. Well, here's how you do it. The first thing you need to do is open up the software package.

Click on the 'Start' menu, select 'Programs' and then 'Macromedia Flash'
Click on the 'Window' menu and select 'Library'
In the library box, click on the blue cross at the bottom
In the dialogue box select 'Graphic' and give it a name
Click 'OK'
Go to the window at the top. Whatever name you chose will be displayed at the top. This is where we are going to create the first part of our animation, and we need to type our text.

Click on the 'A' symbol on the side toolbar
Change options on the side toolbar to change text font, colour and size
Click in the main window where you want text to start, and type 'FADE IN'
You will see a small cross in the window. This is a registration mark and everything you do on screen will centre around that mark. Click on the arrow tool , and pull your text over the middle of the cross.
Now we need to manipulate our text, so highlight every other letters and use the side toolbar to change its colour to white. This is our first symbol.

Toppers' tip: create all symbols first, then duplicate

Part 2: creating the elements
Any type of animation takes time to put together, and a Flash animation is no different. You need to create all the elements before you start to assembly them. In this animation we are going to create 3 different elements, but some animations will need many more. To make it easier, we can copy the image we have just created, to make it the basis of our next element. Go to the library window.

Right-click on your file name, and select 'Duplicate'
Change the name for the new file and click 'OK'
Change the text to 'FADE OUT'
Make sure that every other letter is the colour white. This is our second symbol. Now we need to draw a box, so click on the draw rectangle tool. Draw out the box, it doesn't matter what size you draw it because we can change it.

Select the pointer tool from the side toolbar
Click on your rectangle
Click on the 'Window' menu
Select 'Inspectors', then 'Transform'
Now we are going to decide what size we want the screen to be for our animation. In the dialogue box, try a width of 550 and a height of 400, and have X and Y as 0. Click OK and move it over the top of the registration mark.

Click on the 'Paint Bucket' tool
Click on the 'Fill Colour' button
Now click on the button at the top of the colour palette
Choose red as one colour and blue as the other
Click 'New'
Now click on your rectangle
Now click off your rectangle and it should have 2 colours inside it
We now have the 3 elements that are going to make out animation. We have the background colour and the 2 bits of text. Now we have to put them together. Go back to the window at the top, which is the stage window.

Click on 'Scene 1'
Click on 'Create new layer' and double-click to rename
You need to create 3 layers for each of the 3 elements of your animation.

Toppers' tip: create new layers for each stage of your animation

Part 3: animating
Now we have created the elements that we need to create our Flash animation, we need to put them all together to make it work. We have created 3 new layers for each of our different parts of the animation, and this makes it easier to undo if we make a mistake.

Click on your background in the library window and drag it into the work area. We need to create a keyframe. In the stage window, which is your timeline, go to frame 80, and click where you want to place the keyframe, making sure you are putting it along the background layer row. Press F6 to place the keyframe and a mark will appear in the box.

Put a keyframe at frame 20, 40 and 60
Click on the keyframe at 20
Click on the 'Modify' menu and select 'Instance'
In the dialogue box, you need to play with the settings. Select 'Special' from the drop-down menu and change the sliders. This will change the colour of the background. When you are happy click 'OK' and repeat at 40 and 60 frames. Now we need to add a motion tween. To do this you just right-click between each keyframe (20, 40 and 60) and select 'Create motion tween'

Now we need to add the fade in text. Between frames 30 and 40 you need to add in a blank keyframe by right-clicking and selecting 'Add blank keyframe'. Drag your first text element on to the background from the library window. Put a keyframe in at 40 and at 60, and then put in motion tweens between them.

Go to the 'Modify' menu, select 'Instance'
Change the 'Alpha' to '0'
Repeat this for the next and final layer, putting in your final image in where the other one isn't.
Click on the 'Control' menu and select 'test movie'. Now you can watch your animation and make sure it runs as it should do.

Toppers' tip: use the Alpha setting for transparency