Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

basic text animation for banner

Posted on 2003-12-11
Last Modified: 2013-11-19

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.

Question by:macuser777

Author Comment

ID: 9919635
I'm happy to be pointed to a good tutorial on the net.

Expert Comment

ID: 9920017
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: http://www.echoecho.com/flash.htm
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.

Author Comment

ID: 9920428
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 :(

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

LVL 30

Expert Comment

ID: 9920770
Youve read the instructions in your Photoshop/ImageReady manual about animating GIFs?

Expert Comment

ID: 9921811
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 (http://www.anim-fx.com/faq.html), or CoffeeCup Firestarter from  http://www.coffeecup.com/firestarter/

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.

Author Comment

ID: 9923382

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.

Author Comment

ID: 9923458
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?

Expert Comment

ID: 9924012
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

Author Comment

ID: 9924336
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.


Expert Comment

ID: 9928050
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.

Expert Comment

ID: 9945983
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 ;-)


Author Comment

ID: 9956615
>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"


Accepted Solution

shamstar earned 100 total points
ID: 9959439
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 http://download.com.com/3000-2139-10247467.html?tag=lst-0-6 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.

Expert Comment

ID: 9963807
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.

Author Comment

ID: 10067297

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.


Author Comment

ID: 10067315

Expert Comment

ID: 10067436
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!

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
certificate 4 163
mpeg files joining and playing in order 7 189
Microsoft Image Composer 6 184
Question to locate the problem 18 127
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
In this second Micro Tutorial in the series,  viewers will learn more basic shortcuts and functions of Illustrator. In this tutorial you will learn about the eyedropper tool, zoom , ellipses and more.
Not only does Prezi allow you to create non-linear presentations, it also makes it easy to apply transition animations between your frames. Learn how to apply a fade-in transition to select items and entire frames in this tutorial Select "Edit Path"…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question