Rollover text

Hey everyone. I need some help. I want to load dynamic text and then make a rollover link on it like on the gif.
So when you put your mouse over it it will be highlighted with a box. Is it possible to make it easy without adjusting everything manually?
If not please explain what would be the easiest way.
Thx

Doing something like that would require some kind of CSS, but unfortunately you can’t apply CSS to dynamic text in flash.

What I would do is create the black box, convert it to a movieclip symbol. Next apply this action to that script so that it will remain invisible.[AS]on ClipEvent(load){
this._visible = false;
}[/AS]

Next apply the rollOver script to that movieclip symbol as well:[AS]on (rollOver){
this._visible = true;
}
on (rollOut){
this._visible = false;
}[/AS]

So every time you roll over that invisible black box, it will appear. Just place it over the dynamic text and you’re done.

Or you could put your your textfield inside a movie clip symbol and use this…

[AS]TextField.prototype.rollChange = function(txtColor, bgColor) {
this.textChange = new TextFormat();
this.textChange.color = txtColor;
this.background = true;
this.backgroundColor = bgColor;
this.setTextFormat(this.textChange);
};
myMovieClip.onRollOver = function() {
this.myTextBox.rollChange(0xFFFFFF, 0x000000);
};
myMovieClip.onRollOut = function() {
this.myTextBox.rollChange(0x000000, 0xFFFFFF);
};[/AS]

Where myMovieClip is the movie clip symbol that contains the textField and myTextBox is the text fields instance name.

These actions go on a frame that is on the same timeline as the movie clip symbol.

thx guys!
the first one is simple and smart :wink:
the other one is a bit tricky since i am a noob on
actionscript. could you explain a bit more or maybe
post a simple .fla ?
thx!

Ok, lemme comment my code then…

[AS]
//prototype function to change the color of the text and background color of the textfield
//txtColor is the parameter of the text color
//bgColor is the parameter of the background color
TextField.prototype.rollChange = function(txtColor, bgColor) {
//create new TextFormat to change font color
this.textChange = new TextFormat();
//set textBox font color to the txtColor parameter of the function
this.textChange.color = txtColor;
//set the textBox background value to true (so it has one)
this.background = true;
//set the background color to be the value of the bgColor parameter of the function
this.backgroundColor = bgColor;
//set the TextFormat to this textBox to the font color can be changed
this.setTextFormat(this.textChange);
};
//when your movie clip is rolled over
myMovieClip.onRollOver = function() {
//target the textbox and call the function
//0xFFFFFF = white, 0x000000 = black (hex color values required)
this.myTextBox.rollChange(0xFFFFFF, 0x000000);
};
//when you roll off of your moviec lip
myMovieClip.onRollOut = function() {
//target the textbox and call the function again
//this time change the font color to black and the background color to white
this.myTextBox.rollChange(0x000000, 0xFFFFFF);
};[/AS]

Prototype are object oriented functions, in this case the object is TextField (TextField.prototype…)

You can read more on them here…

http://www.kirupa.com/developer/actionscript/tricks/prototypes.asp

Heres an example file…

thanx dude!
very kind of you to help out.
cheers

No problem :slight_smile:

Here is a slightly “optimized” version…
[AS]textChange = new TextFormat();
TextField.prototype.rollChange = function(txtColor, bgColor) {
textChange.color = txtColor;
this.backgroundColor = bgColor;
this.setTextFormat(textChange);
};
myMovieClip1.myTextBox.background = true;
myMovieClip1.myTextBox.text = “This is item 1, rollOver me”;
myMovieClip2.myTextBox.background = true;
myMovieClip2.myTextBox.text = “This is item 2, check the new colors”;
myMovieClip1.onRollOver = function() {
this.myTextBox.rollChange(0xFFFFFF, 0x000000);
};
myMovieClip1.onRollOut = function() {
this.myTextBox.rollChange(0x000000, 0xFFFFFF);
};
myMovieClip2.onRollOver = function() {
this.myTextBox.rollChange(0xFF0000, 0xE6E6E6);
};
myMovieClip2.onRollOut = function() {
this.myTextBox.rollChange(0x000000, 0xFFFFFF);
};[/AS]

I defined the new TextFormat and set the backgrounds of the textboxes to true outside of the function. Since this really only had to be done once there wasn’t much reason to keep doing it over and over.

It works either way though :stuck_out_tongue: