basic text animation for banner


I've created a banner in photoshop elements.

Now i'd like to animate a series of text messages on it - nothing too fancy
I just want them to fade in and out of view in sequence.

I have Flash MX, FireworksMX and DreamWeaverMX.

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

macuser777Author Commented:
I'm happy to be pointed to a good tutorial on the net.
You can do this faily easily in Flash.

Here is a link I found to some very good tutorial on using flash, right from the basics to some more advanced things:
That should provide you with enough guidence to be up and running with flash and to make your banner.

Ideailly, I would suggest that you create symbols of all the different layers that are in your Photoshop Elements banner.  You can do this by selecting a layer in PSE, and then copying and pasting it into Flash.  Once you have the pasted graphics selected in flash you can convert it to a symbol.
You can then use tweening to move/fade elements in and out of the scene.

If you have any questions then just let me know.
macuser777Author Commented:
Hi Shamster,

Thanks for the link.
Can you recommend something simpler, specifiaclly just to put a series of text captions on the banner and have them fade in and out in sequence?

For instance if i wanted the words "free to join" and then "no subsriptions" to fade in and out in sequence.

Maybe there is some kind of shareware/freeware that will simplify this for me?

Ideally i'd rather learn how to use the flash in the long term - but right now i just need to get this job done. This is my first time trying to use Flash and i'm a bit lost at the moment.
I tried importing the layers into flash but the text layer just becomes a blank panel?
Also the layer in Flash does not display the graphic - it just says content - is that right?

To import i chose the layer in PSE - select all - copy - then select layer in flash - paste.

Newby blues :(

OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.

Youve read the instructions in your Photoshop/ImageReady manual about animating GIFs?
If you are unable to create a Flash banner of your own in this time then you might want to consider using a Flash banner making program such as Anim-FX (, or CoffeeCup Firestarter from

Both programs offer downloads for you to use for 30 days.

If you arnt able to do what you want with these programs, then you might just find it easier doing it yourself in FlashMX.  It will probally take you a little while to figure out what to do but shouldnt take more than an hour or two if you go through the tutorials that come with Flash.

I suggest you read up on Tweening if you decided to do it yourself, since tweening will allow you to easily create the effects you want.

As for the problems importing, the graphics layer shouldnt have said "content" but should have displayed to picture.  As for the text, you would probally be better off creating the text in Flash itself, since this will make the file smaller and allow you to do the effects easier.

I'm not on a computer with Flash on it at the moment so I cant give you the exact guidence to creating the effects you need, but if you want them then reply back and I will write some instructions on how to do it.
macuser777Author Commented:

I've got some images tweening. Will keep at it for and see how i get on

>Youve read the instructions in your Photoshop/ImageReady manual about animating GIFs?

I bought a second hand mac.
I have a load of software but no manuals, which is why i've been asking these beginners q's.

I bought some books to learn D/weaver and HTML which i'm still going thru but as i have had little cause to use the PSE and
Flash I haven't bought any how to books on those yet. I might if i find i'm using them a lot.
macuser777Author Commented:
I can make images tween and text move

But if i try and tween text to blank or text to text it doesn't work?
OK, here's how to do a text fade-out in 9 very simple steps:

1. Use the text tool to write the text you want (e.g. frame 1).
2. At the required time frame (say 20 frames from the current frame) right-click and Insert a Blank Keyframe.
3. Right-click somewere between the first text frame and then last frame (so bewteen frame 0 and 20 in this example).
4. Select Create Motion Tween from the popup menu.
5. Now double click on the last keyframe for the text (e.g. frame 20). Also click to select the text element.
6. From the Properties window, choose Alpha from the Color drop down box.
7. A new edit box should appear near the Color box... it should have a percentage value in it, like 100%.
8. Click on the little down arrow next to it, and move the slider to 0. Note the Text is no longer visible.
9. Play the movie and you should see the text fading out.

To do a text fade-in is pretty much the same, apart from you set the first frame to an alpha of 0, and last to 100%.

You mentioed you couldnt get text to text working, Im guessing you mean shape tweening here, so for example getting the words "Welcome" to shange shape to "Home" ?

If thats the case then that can be done as follows:
1. In frame 0, make the text you want to start off with using the text tool.
2. Add as many frames to the document as you would like, say 30 new frames.
3. Now double click on frame 30, then right click-and add a Blank Keyframe.
4. Still in frame 30, add the other bit of text you want to show.
5. For the shape tween to work you will have to break apart the text.  Do this by selecting the text, and then press Ctrl+B or Modify -> Break Apart from the menu.  You will most likely have to break it apart twice, once to change the sentance to letters, and then again to break apart the letters.
6. Double click on frame 1, and break apart the text here as well (twice).
7. Right-click on frame 1, and then choose Create Motion Tween.
8. From the properties window, change the tween to Shape.
9. Thats it, should be done now.

Hope those instructions worked for you, think i might keep that suff and publish it on my website! :-p
macuser777Author Commented:
OK up to here

5. Now double click on the last keyframe for the text (e.g. frame 20). Also click to select the text element.

on part 1 - text fade out

Can't see where to >"click to select text element."

I can reduce alpha to 0 but this has no effect. Presumably because i'm going wrong at step 5.

when i play text stays visible until blank key frame where it disappears.

btw - single button mouse on mac - fine on everything except doubleclicking - presuming this is the same for mac mouse.

I wrote those instructions as I did them on Flash MX so it should work.

On Right-clicks: You should be able to hold down the Command key (or something like that) and then click to bring up the context menu.  If not, then equivilent commands are in the standard menu bar.

On double clicks: Doubleclicking on the frame is just something that im in the habit of doing now since it was necessary to do it in an old version of Flash to select the frame you wanted to reference.  Now you just need to single click on the frame to select it.

As for the problem around step 5... what i mean there is:
 - Click on the keyframe that has the final animation of the text, e.g.if you wanted it to fade from frame 1 to frame 20, then click on frame 20 to select that frame.
- Then, click on the Text, to select the text element.  What I mean by that is click on the text that you have typed, so that is it selected.. (you might need to use the Selection too to do that).  Or in more simpler terms, just select your text.

If you couldnt get thigns to work, you should start from the begining again and just do everything as it says making sure you didnt miss anything out.  If you still cant figure something out then let me know and I'll put together a proper worked through example.
Also note that you should NOT have added any Blank Keyframes.
Its easy enough to create effects in Flash, but can be painfully time consuming and mind numbingly boring!

If you want to create quick and effective text effects in Flash then there is a great little application called SWISH

Download the 15 day trial its fully functional and will do pretty what you want without all the hassle. A lot of prodesigners use it although they never admit it ;-)

macuser777Author Commented:
>martin - thanks - had a good look but unfortunately swish doesn't support Macs :-(


I've been trying but can't get it going.
you said
>Also note that you should NOT have added any Blank Keyframes.      

     But originally you said
>>2. At the required time frame (say 20 frames from the current frame) right-click and Insert a Blank Keyframe.

I might be getting confused here.

I still can't select the text as in step 5 - when i try i get this flash error message "There is no current frame to draw into. Also check the current frame is not an interpolated frame"

Oopps.. yea, step 2 should say to insert a keyframe (not a blank keyframe).
But to aid you in the process, Ive made a little video that goes through the steps needed.
Here is the video file to download:

The file is a DivX video to keep the file size small (1.17MB).  I also suggest you save the file to your hard drive first rather than playing it over the net.  You can download the DivX codecs from if you dont already have them.

If that helps you then let me know and I'll make a video of the Motion Tweening as well.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Here is the link for the Macintosh version of DivX (just download the free version):

Have a go at the second tutorial that I posted above as well... the motion tweening on, that could help you to figure a few other thigns out as well.  Let me know how you get on with them.
macuser777Author Commented:

Well i caved in on this one in the end and got the banners made on a lance service.

Thanks for your efforts - i'm sure the answer is in there - i couldn't get the .avi to run propoerly (I have the Mac divX).

I did mange to entertain my young cousin with some animations of his name and some squares turning into rectangles and circles so well worth 100 points!

Thanks - i'll sort out the points now.

If you want to see what i ended up with you can see here - they're animated gifs - i got flash ones made too - but they were a bit of a pain to use in terms of making them available to the user.
I probably should have asked for a lesson on animated gifs - next time.
macuser777Author Commented:
They look quite good.
At least you got some of motion tween going then :p

I intend to properally write up some of my drafted tutorials for doing some of the basics in flash soon.  I'll also be making use of flash video files so hopefully people wont have the same problems with viewing them.  I'll send you a link when the tutorials are ready as I think it would still be nice to be able to make your own flash banners etc.  Of course there are some good resources already around on the net - its just a matter of finding them!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Graphics Software

From novice to tech pro — start learning today.