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
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

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

Enroll in July's Course of the Month

July's Course of the Month is now available! Enroll to learn HTML5 and prepare for certification. It's free for Premium Members, Team Accounts, and Qualified Experts.

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 (, 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.

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 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
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…
In this tutorial viewers will learn how to create blended and gradiated shapes in Illustrator using the blend tool Draw two shapes, one of them in a different color: Select both and create a blend by going to Object > Blend > Make: Blends can also b…
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.
Suggested Courses

628 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