Buttons with Dynamic Text in AS3?

[soggybag]

I have been in the habit of making buttons with a dynamic text field. This way assigning a value to the var property of the text field would allow me to reuse the button symbol and assign different text to each.

In AS3 it looks like the text field Var property does not exist any longer.

Does anyone have a suggestion for a work around? I would like to avoid having to make a new symbol for each button.

The var property worked well because it allowed you to change the text field on different frames of a movie clip button. If each text field had the same Var name it would display the same text label.

[johnnyWeiss]

take a look at my posting earlier today. you may have a suggestion on how to solve my problem while you get what you need.

[Flash Gordon]

give the text field an instance name You shouldn't have been using the var property since flash 5!

[soggybag]

Thanks for the reply. This is not a good solution. Using the TextField.text property doesn't allow you to create a label at frame the button may display.

For example, let's say you have a movie clip button with a text field inside. the text field is on a layer with two key frames. One key frame at the _up frame and another at the _over frame. This allows you to adjust the color and other properties of the text field for the rollover effect. The text field is dynamic and has myLabel set as the var.

Setting the myLabel property of the container movie clip allows the text field to display the value at all of it's key frames.

Using the text property, the text field loses it's assigned text when go to the next key frame.

Another thing I noticed is that a button with a text field inside doesn't show the finger or the rollover when you are over the text field.

[Flash Gordon]

maybe not a good solution, but it is your only one ;)

[soggybag]

What do you mean? Which solution is not good and what do think is a better solution?

[Mazoonist]

soggybag,

Here's a solution for you (attached). Hope it helps.

Inside the button, the lines:

this.buttonMode = true;
this.mouseChildren = false;

(on frame 1)
...will allow the movie clip to behave as a button, and the second line will cause the hand cursor to still show over the top of the dynamic text box.

There's always a way to accomplish what you want, and the var box is gone from the properties inspector, anyway. It wasn't a really great idea to begin with. Why not? Because it allowed you to set a variable, but do it in a kind of hidden way, so someone else viewing your file (or you two months or so down the road) might have difficulty finding the darned thing. That makes it hard to figure out how something works.

[Mazoonist]

I was wondering what you meant by the text field not retaining the text on it's different keyframes. If you want it to always retain the text you assign it, don't give it different keyframes, just one. Then fill the rest of the space with frames (F5).

[soggybag]

Thanks for the reply.

I have already used the buttonMode property.

The mouseChildren property I had seen. This fixes the problem with the text field taking focus.

The problem with only adding frames is that the text can not change. If you've designed a button where the style of the text changes you'd need a key frame.

Imagine you have a movie clip that you've set up as a button using the _up and _over frames. At the _up frame your text field shows the button label in black. At the _over frame you'd like the color to be red.

Using the text property you'd need to add some cumbersome actionscript to set the text property when ever your button changed frames.

Using Actionscript to dynamically generate or modify the text field is in-flexible. You'd have to rewrite the code if the design changed. You also have to write extra code.

Using the var property of the text field allows you to make a button that can display any text in any style at any key frame within the button movie clip. Modifying the look of the button is as easy as editing the text field.

Making a button like this allows you to make a button that can be used anywhere in your movie with any label you might need. This way you make a single clip to cover all of your button needs.

There must be a solution in AS 3.

[Mazoonist]

Ok, I see more clearly now what you mean. Interesting. I'll be working on it.

[barliesque]

Although this is a fairly old thread to be posting on, my search for an answer to this problem proved fruitless. However, I've found a solution of my own, which I'm posting here for others having the same difficulty. There are several techniques out there that apparently all have their own problems, but this technique has proven totally reliable.

First, here's the problem in a nutshell. You want to set a dynamic text field with some button label text. It's dynamic, so each instance of this button can have a different label. Now, you want to be able to make the label brighten up when the mouse moves over it, so you start adding keyframes to your button label.

Here's what happens: When the button is created, you apply your custom button label. So far so good. The playhead advances frame-by-frame until it arrives at a keyframe for your button label. Flash destroys the old button and creates a new one with the brighter lettering, and play continues. But now your button's label has reverted to its default text!!! Easily solved, right? Just set add an eventListener to update the text at the right moment. Well, what kind of event?

As it turns out neither Event.ENTER_FRAME nor Event.RENDER occur reliably at the exact right moment. The ENTER_FRAME event occurs at a moment after the old TextField has been destroyed, but before the new one has been created! The RENDER event has a few problems of its own that I haven't taken the time to explore.

The answer to the riddle came in an undocumented function...


public class LabelButton extends MovieClip {

private var labelText:String;

public function LabelButton(_labelText:String) {
labelText = _labelText;

for (var i:uint = 0; i < totalFrames; i++) {
addFrameScript(i, frameScript);
}
}

protected function frameScript() {
this["label"]["text"] = labelText;
}
}


While scouring the internet for a solution, I found this undocumented function addFrameScript() which allows you to apply code to a frame, in the same manner as the Actions panel in the Flash IDE. This frameScript is the *ONLY* opportunity I've found for executing code at the proper moment. With the above code, you can have your dynamic label with keyframes.

:cool:

[soggybag]

Thanks I'll have to give this a try. This problem had stumped me so far.

[soggybag]

Great idea, addFrameScript() looks like it has some interesting possiblities.

This works but not acceptably. There is a flicker each time the clip goes to a new frame. If there's text in the field you see it for the shortest time. If the text field is empty there is still a flicker as the text disappears momentarily.

I'm really sad that this feature does not exist in Flash anymore.

After some experimentation I'm coming to the conclusion that you can't set the text property of a TextField before it is drawn to the stage. I tried using an ENTER_FRAME event to set the value of the TextField. This still had the flicker as the clip jumped to each new frame.

[Jayhawk]

I found a decent solution for this problem. It's using TextFormat. Let's assume you have a MovieClip called myButton which includes a dynamic TextField called myText. The number of frames within the MovieClip is not relevant; however, the myText cannot be broken up into keyframes.

var over_style:TextFormat = new TextFormat();
var out_style:TextFormat = new TextFormat();

over_style.color = 0xFF0000; // Red
out_style.color = 0x000000; // Black

myButton.myText.text = "Hello World";
myButton.myText.setTextFormat(out_style);
myButton.myText.mouseEnabled = false; // This allows the hand to show up for dynamic textfields
myButton.buttonMode = true;
myButton.addEventListener(MouseEvent.MOUSE_OVER, OVER_Handler);
myButton.addEventListener(MouseEvent.MOUSE_OUT, OUT_Handler);

function OVER_Handler(e:MouseEvent):void
{
var mc:MovieClip = e.currentTarget as MovieClip;
mc.myText.setTextFormat(over_style);
mc.gotoAndStop(2); // For other button changes on Over state
}

function OUT_Handler(e:MouseEvent):void
{
var mc:MovieClip = e.currentTarget as MovieClip;
mc.myText.setTextFormat(out_style);
mc.gotoAndStop(2); // For other button changes on Out state
}


Hope this helps!

[soggybag]

Maybe a button class would be good. Something that could take a TextFormat for each of the buttons faces _up, _over and _down. They could be passed in the constructor or later. The class would set up it's own listeners for ROLL_OVER, ROLL_OUT and MOUSE_DOWN.

[jrutter]

soggybag,

Here's a solution for you (attached). Hope it helps.

Inside the button, the lines:

this.buttonMode = true;
this.mouseChildren = false;

(on frame 1)
...will allow the movie clip to behave as a button, and the second line will cause the hand cursor to still show over the top of the dynamic text box.

There's always a way to accomplish what you want, and the var box is gone from the properties inspector, anyway. It wasn't a really great idea to begin with. Why not? Because it allowed you to set a variable, but do it in a kind of hidden way, so someone else viewing your file (or you two months or so down the road) might have difficulty finding the darned thing. That makes it hard to figure out how something works.

I was having the same problem with the dynamic text field on buttons, when I moused over and clicked. It totally messed up my flash file, it would break everything.

Then I added: this.mouseChildren = false; and now its fixed! But my question is, what does this code mean?

[Yavstr]

Just use HTML text and CSS to style the text.

You can call an AS function from the html text with an <a href='event:someting'>Button Label</a>

You'll have full control of the navigation outside of flash and can change the colors as needed.

[soggybag]

That's a great idea. But, it limits what you can make. It also requires knowledge of AS. Being able to create a button with customized text at each of it's faces is the goal. With the TextField Var property in AS2 this was easily accomplished. This task seems to be much more difficult in AS3.

[boodaba]

I feel your pain soggybag. I've gone through the same issues in trying to create a base button class that allows setting the text dynamically for the button's label.

I've settled for the following workaround:
1. In Flash IDE create a one dynamic text per button state. Each text resides in one layer that spans across all button state keyframes.
2. Name each text field consistent with the button state (e.g. btnText_up, btnText_down, etc.).
3. In the associated button class code, set the text and control visibility of each of the text fields dependent on button state (i.e. addListeners for MouseEvents).

This workaround requires a few extra line of codes but does provide better behaviour (e.g. no flickering of text at each key frame).

Another potential solution might be to create a new Text component that extends the TextField class and instantiates/constructs with a 'Var' value passed to it to set the text (essentially recreating what Adobe took out for AS3).

[soggybag]

Thanks for the reply. Those are some good ideas. I'm glad someone can appreciate what's we're missing out on since this feature was removed.

[aneuryzma]

So in conclusion, how can I have a hand cursor on a text area ?

I've tried out mouseChildren=false;

But I've frozen the movieClip functionalities...

thanks

[Jayhawk]

the hand cursor is by using buttonMode=true;

[mondobiondo]

If Boodaba (or any other helpful soul *grin*) is around. I've tried Boodaba's solution to this problem but when I put the texts in their own layers they keep being placed behind the popup on which the button is placed. I try bring the textfield to the front but to no avail. Why?

mondobiondo

[mondobiondo]

Hm, ok, so I managed to create a layer with dynamic textfields for each of the button states as Boodaba suggested. But they are inside the button and I cannot seem to change them during runtime. Converting the button to a movieclip doesn't seem to help either.

Help anyone?

mondobiondo

[popflier]

You can also use TweenLite to control the mouseover functions on the TEXT and/or background button. ** make sure you have first placed the TweenLite folders in your folder with your main fla/swf file. -- Google TweenLite from Greensock to get the files you need**

buttonLinkMovie
1) layer with dynamic text box - choose an instance name
2) layer with movie that has the shape and color of the button you want - choose an instance name
2) actions layer:

this.mouseEnabled = true;
this.buttonMode = true;
this.mouseChildren = false;

MenuMovie
1) layer with your ButtonLinkMovie
2) layer with following actions:

this.mouseEnabled = false;
buttonLinkMovie.name of dynamic text box instance.text = "name of link you want";

In your mainMovie
1) layer with MenuMovie
2) layer with the following actions:

import gs.*;
import gs.easing.*;
this.mouseEnabled = true;

this.addEventListener(MouseEvent.MOUSE_OVER, linkOver, false, 0, true);

function linkOver(e:MouseEvent):void
{
TweenLite.to(e.target.instanceNameOfButtonShape, .1, {tint:null});
TweenLite.to(e.target.instanceNameOfDynamicText, .1, {tint:0x750000});

You can then change the background color tint of the button shape or the color of the text itself by changing the "750000" to whatever color code you want.