Highlighting a text link with mouseover animation

Okay I have this very serious problem I need help with. I’m designing a website and I need something for my menu. Imagine a text/image link. Now in the event of a mouseover, I want a thin single black line to come out of the text, going towards the right hand side. It stops at a particular distance, say three cm. Then a small text box opens up, with information about the item you had the mouseover on. For example, the Text here is called Stuff. There’s the thin black line and then a small single line text box that describes what info is contained if you were to click on that link.

Stuff ------------ Read the latest news around your campus.

Now how do I create this? And where the single line text box opens, there’s probably gonna some text or image, so the effect should also overlap over any file beneath it. Please remember that I’m a beginner, so I kinda need detailed instructions like clicking on File, then New, that kind of very basic teaching.


Hey Nischint,

I am no pro myself, but let me take a shot - I am sure one of the gurus can correct me if I am wrong :slight_smile:

As part of the button you should be able to insert a movie clip on the over status. Just place a movie clip with the line and the information you would like to display. so when the user places the mouse over the link/button it automatically plays the clip - displaying your animation of the line and information.

I did some simple testing and this seems to work.


yup that’s the best, and smallest file size way of accomplishing that effect.
Be sure to place a stop(); action at the end of the movie clip which you are placing in the button, or it will loop the animation.
It is important that you learn about the button states and what they can accomplish, so as a new user I’d say practice putting different things in the button states.

There are a couple other ways of doing this which are much more versatile, and really not any harder to do. When you are ready, just ask about them.

Hey, thanks for helping. I tried it but my knowledge of Flash is very limited. I’d really appreciate it if you could get me details, especially if the button is text.

I had said I wanted the single straight line should be something like this:

Stuff ------------ Read news from around your campus

But actually, I wanted to know how I could get it to move there, frame by frame, like a transition. Like this:

Frame 01 -
Frame 02 –
Frame 03 —
Frame 04 ----
Frame 05 -----
Frame 06 ------
Frame 07 -------
Frame 08 --------
Frame 09 ---------
Frame 10 ----------
Frame 11 -----------
Frame 12 ------------
Frame 13 ------------ R
Frame 14 ------------ Re
Frame 15 ------------ Rea
Frame 16 ------------ Read
Frame 17 ------------ Read
Frame 18 ------------ Read n
Frame 19 ------------ Read ne
Frame 20 ------------ Read news
Frame 21 ------------ Read news
Frame 22 ------------ Read news f
Frame 23 ------------ Read news fro
Frame 24 ------------ Read news from
Frame 25 ------------ Read news from
Frame 26 ------------ Read news from a
Frame 27 ------------ Read news from ar
Frame 28 ------------ Read news from aro
Frame 29 ------------ Read news from arou
Frame 30 ------------ Read news from aroun
Frame 31 ------------ Read news from around
Frame 32 ------------ Read news from around
Frame 33 ------------ Read news from around y
Frame 34 ------------ Read news from around yo
Frame 35 ------------ Read news from around you
Frame 36 ------------ Read news from around your
Frame 37 ------------ Read news from around your
Frame 38 ------------ Read news from around your c
Frame 39 ------------ Read news from around your ca
Frame 40 ------------ Read news from around your cam
Frame 41 ------------ Read news from around your camp
Frame 42 ------------ Read news from around your campu
Frame 43 ------------ Read news from around your campus

I really need to get this right guys, so please please help me.

I’ll try to put something together for you to look at tonight.

Ok… I’m trying to put something together, but I’m a little lost as to how new you are.

Do you know how to create buttons?
Do you know how to edit those buttons?
Do you understand how to create a motion tween?


i suggest you read the tutorial i wrote on kirupa.com called animated rollover, it teaches you the technique for creating the effect you want/need.

Sweet… thank you vts… I was having a lot of trouble thinking of ways of explaining that.

just a side question to this post, once you add your movie clip to the over state of your button, is there a specific amount of frames you need to add in any particular layer, wether it be on your movie clip layer, the button layer or the button layer in your scene 1 to insure that your clip will play fully. ive ran into a problem before where my movie didnt seem to want to play out all the way before stopping . i rarely use this feature yet but im sure i will alot once i begin building my site, which should be shortly assuming i learn quickly. also i had a problem once when i was trying to import a swf file of a banner i made from my desktop into the down state of a button, when i did this it broke all the elements of my banner up seperatly and when i placed the clip in the down state the only thing it showed was the first image in the first frame. i hope you can make sense of that. i hardly can

That’s why I mention that there are more effective ways of accomplishing the same goal. For one thing, if you have a m/c in frame two of your button (that’s the over state) and someone clicks on the button (down state/frame 3) then the animation will disapear, to be replaced by whatever is in that new state.

My prefered method is to make a m/c with a stop action in the first frame so that it doesn’t do anything (yet). Then to make a button which calls to the m/c to play();. This method is preferable, because no matter what the viewer does (click, or move off of the button) the animation will complete it’s cycle.

This I will explain in another thread called “Why does Upuaut use invisible buttons?” I’ll post that thread tonight sometime.

Okay guys, thanks for providing help. In answer to the question of what knowledge of Flash I have, it’s zero, nil, nothing!! When I create a new movie, I can see a white background. That’s all I know in flash. Opening a new movie. Oh yes, and saving a blank white flash. Seriously, I do not know much about it. If you tell me to create a button, I can create a circle and then F8 and then call it a button. That’s about it. I know of editing them and nothing of motion tweens.

Vts, I have read the tutorial on animated rollovers, loved it, and am using it as an enter button. I need to have the same or a similar animation for text.

I’ll explain this. There’s a rectangular button called Test. Now, in the event of a rollover/mouseover, a line comes out of the button, going towards the right. After it reaches a certain distance, a text line opens.

So here, in this example:

| Text | ---------------- Click here from new story

When the mouse rolls out of the button titled Text, the text line and the straight line retract back, until they disappear.

I really can’t explain this any better. I’ll try and find something similar. I have seen the SWF file somewhere. I just need to create an FLA. I’ll try and provide a link to it.


PS - Guys, I love the effort and time you’re taking to explain me but just help me on this!!

Hey guys,

Okay, I realized I needed to explain what I had in mind better. I need to recreate some fla’s and need a step-by-step tutorial. Remember that my knowledge in Flash 5 is limited to creating a new movie ie I know nothing of it.

Just go to the link below and check out the page. Please help me guys. I need it badly.