How do I make multiple lines of text fade in and out?

programming flash
1

I have been pulling my hair out about this. What I want to do is make several lines of text fade in like this:

  1. sample text 1 (this should appear as nothing in the first frame and then gradually fade in to show the text by let say frame 5)

  2. Keeping sample text 1 in place underneath that comes sample text 2 but in frame 5 it is the same thing. You shouldn’t see sample text 2 until frame 10

  3. same thing with the third and fourth lines of text all of them easing in gradually so by the end of the 4 line of text (I am guessing by frame 20 or so) the full message should appear.

Did I make any sense?

2

first, put each line of text on its own layer.

start with frame 1, layer 1.
type in the text line. Then select it and convert it to a symbol.
Then click on frame 5, layer 1. Press F6 to insert a new keyframe.
Do the same on frame 10 and 15 of this layer.
Right click on frame 1, layer 1, and create motion tween. Do the same on frame 10 of layer 1.
Now click on frame 1, and go to the Instance panel, click on the effect tab, and click the dropdown box and select alpha and set it to 0. Do the same on frame 15, layer 1.

Now, repeat these steps on each layer and then stagger the layers so that as one layer fades out, the other layer fades in… example, layer 1 starts on frame 1, layer 2 starts on frame 10, layer 3 starts on 20, layer 4 starts on frame 30, etc…

hope this helps…

3

Or you can create your block of text.

Use the gradient editor (Window/Color Mixer I believe, at least that is how it is in MX) and make the linear gradient be your background color that fades out into alpha = 0. Then create a block in a layer above your text. You will have to rotate your block counter clockwise so the faded part is at the top since linear gradients go from left to right.

Anywho, tween this block down to uncover the text.

I hope I was clear. I was going to set up an example .fla, but Flash 5 can’t open Flash MX files :frowning:

<B>EDIT: </B>Here is a visual example of my method…

Fade Down Example

I hope that helps you to understand what I am talking about

4

For the first method, I was not able to get the layers working properly as when I went to the second layer and inserted the second keyframe, the first line of text would disappear (without the fading out tween motion in place) leaving just the second line in place…thereby not making the message not make any sense at all.

For the second method, I was not able to get the Linear Gradient working properly and I don’t know how to create a block that slowly uncovers the text. See I am still new to Flash and I would appreciate some tutorials that could help. I wonder if what I am trying to do is too difficult for a beginner…:(…I was really hoping to make that effect for my website.

5

Ok for my method.

On your one layer, create your block of text on Frame 1.

Create a new layer above the layer with your text.

Select the square shape tool.

Go to Window/Color Mixer

Select Linear Gradient from the drop down menu.

In the slider, change the color in the first block (the one on the left) to white (or your background color), then slide it over to the level of fade that you want.

On the block on the right, click on that and use the alpha slider to set it to 0 so it is transparent. Now you will have your fill color be your fade gradient.

Now create a large box over your text using the box shape tool (make sure you have outlines disabled, or just delete the outline when you are done making your shape).

The fade will go from left to right. So what you have to do is select the free transform tool (In FLash MX it is in the first column of the tools toolbar, and it is the 6th one down).

This will create a border around your block that allows you to resize. If you go to a corner you will see a curved type shape that has an arrow on each side, this means “Rotate”. Hold Shift on your keyboard and click down, then drag the square counter clockwise so the faded part is at the top and the solid color is at the bottom.

Now align this box so that your text is completely covered in the solid color.

In the layer with your block, right click on frame 20 (or whichever you like) and hit “Insert Keyframe”. Now on your layer with your text, right click on Frame 20 and hit “Insert Frame”

Now click on frame 20 in the layer with your box. Drag this box down so that all the text is viewable. Right click in the grey area between the frames and hit “Insert Motion Tween”

Voila, I think I went through everything. If you get confused somewhere, just ask. Keep in mind I do have MX, so some steps might be a little different, but it all can still be done in Flash 5, so if something isn’t exact, you will have to find out how/where to make it work in 5.

6

Good answer, except it’s:

Window>Panels>Fill

in Flash 5, but otherwise perfectly functional I think.

I think the problem Dominions has with method one is that he doesn’t have enough frames in text layer 1

select the last keyframe in text layer 1 and press f5 (or Insert>Frame) repeatedly until there are as many frames as on text layer 2, and, eventually, layers 3, 4 and so on. All layers need to end up with the same number of frames.

If you program all this into a new symbol in the first place you can more easily move and re-use the objects (maybe buttons in a menu?

Anyway, although not as smooth and snazzy as the gradient method, if you want your text to appear snappily, it’s perfectly adequate.

If you wanted each line of your text to fade in as a whole (instead of a sliding gradient) you can make a new fading object

press [Ctrl+f8] (or Insert>New symbol…)
Select Movie Clip radio button from the dialog box and name the object. I called mine whiteFade

In the blank stage draw a white rectangle with no stroke. It doesnt actually matter what size the box is, as you can resize the final object however you like, but for convenience you might want to make the rectangle the height and width of your text objects.

If you are working on a white background, you might find it easier to see the object if you click the Show All Layers As Outlines button (a coloured square line) next to the layer name on the timeline.

Select your object with the Arrow Tool (press [V] on the keyboard) and press [f8] or Insert>Convert to symbol…

As before, select Movie Clip radio button from the dialog box and name the object. I called this one whiteBox

Select a frame on the layer with the box. This will determine how long the fade takes. If your movie is at 12fps (Modify>Movie… to chek and alter) and you want the fade to take 1/2 a second, select frame 6 (I’m sure you get the picture)

Hit [f5] to insert a frame. The timeline fills with fames up to the point you clicked.

Hit [f6] to insert a keyframe at frame 6

Select all the frames 1-6 in the timeline (I do this by Click frame one, Ctrl+Click frame 6) and right click ([Ctrl+Click] on mac) and select Create Motion Tween (or Insert>Create Motion Tween)

Select whiteBox in frame 1 and go to he Effect panel (Window>Panels>Effect) from the drop down list select Alpha and set the slider or type in the box to 0%

Finally, double click frame 6 to bring up the actions panel and select Stop from Basic Actions, then close the Actions panel

Now return to Scene 1 (Click where it says Scene 1 above theTimeline)

If you want to change the fade speed at a later date enter whiteFade (double click on an instance on the stage or in the Library (Ctrl+L) and simply drag the keyframe at frame 6 to the new position

Back at scene one you can simply place new instances of whiteFade over your text objects, one per line.
Position them in the timeline as you have placed the text objects in method one. It easiest to put them on their own layers. Remember to include enough frames on each layer to run to the end of your timeline.

You will notice that it is not necessary to refer to the object names that we entered to make this, but it really helps to keep tarack of things and make your library useable

and thats all she wrote ladiesand gentlemen…

Hope it all makes sense!

7

Ha!! It worked! This is what I wanted to achieve. http://astro-galaxy.hypermart.net/horror.html

However, don’t click on the link at the end of the message cause I haven’t set up that page yet and you will get Hypermart’s ever so lovely popups and 404 page. Gotta love that.

Thanks everyone! :slight_smile:

8

Glad you finally got it to work.

And very good description Crazylegs. I for one went with the gradient method because it is the easiest to explain. I am 100% horrible at explaining things sometimes so I figured it would be easier for me to explain the gradient way.

And thank you for the correction on the Fill panel :slight_smile: