Help creating a button and adding text inside it

[SirMarley]

Hi guys...

I am trying to create a button (or a MC, same thing) using only code, but it has to have what I need, inside...

var ins_btn:  ?????

var ins:String = "How to play / Como jugar";

ins_btn.x = 202,75;                  

ins_btn.y = 316;

ins_btn.width = 533,30;

ins_btn.height = 59,35;

ins_btn.text = ins;

addChild(ins_btn);

I have tried that way, making ins_btn a MC, but it did not work (it did not show up in my screen) and I am doing that, so, when someone clicks on it, it goes to frame two:

ins_btn.addEventListener(MouseEvent.CLICK, instructionF);

function instructionF(event:MouseEvent):void {

    ins_btn.removeEventListener(MouseEvent.CLICK, instructionF);

    gotoAndStop(2);

    }

So... What do I need to do to make this button or movieclip show up in the stage, with the words How to play / Como jugar inside it?

Thanks a lot!

[sinious · Accepted solution]

For a button to work it needs something to click on as a hit area. If you need a basic button without doing any design you can use either one of the premade buttons (window->common libraries->buttons) or just use the button component (window->components->user interface->button).

For instance, the latter, open the components panel (window->components), roll open User Interface, drag the Button component into your library.

In code you can use it as simply as this:

import fl.controls.Button;

import flash.events.MouseEvent;

var button:Button = new Button();

button.label = "How to play / Como jugar";

button.setSize(150,20);

addChild(button);

button.addEventListener(MouseEvent.CLICK, instructionF);

function instructionF(event:MouseEvent):void

{

          button.removeEventListener(MouseEvent.CLICK, instructionF);

    gotoAndStop(2);

}

If you want to draw your own button, use the graphics class of any display object and draw a background so your button has something to capture the click. You also need a TextField inside the button. For example a blue rounded rectangle Sprite button:

import flash.display.Sprite;

import flash.text.TextField;

import flash.text.TextFieldAutoSize;

import flash.text.TextFormat;

import flash.text.AntiAliasType;

var ins_btn:Sprite = new Sprite();

addChild(ins_btn);

// background

ins_btn.graphics.beginFill(0x6666CC,1);

ins_btn.graphics.drawRoundRect(10,10,150,20,10,10);

ins_btn.graphics.endFill();

// text

var tf:TextField = new TextField();

ins_btn.addChild(tf);

tf.width = 10;

tf.autoSize = TextFieldAutoSize.LEFT;

tf.antiAliasType = AntiAliasType.ADVANCED;

tf.selectable = false;

tf.text = "How to play / Como jugar";

tf.setTextFormat(new TextFormat("Arial",11,0xFFFFFF));

tf.x = 22;

tf.y = 10;

// hit

ins_btn.addEventListener(MouseEvent.CLICK, instructionF);

function instructionF(event:MouseEvent):void

{

    ins_btn.removeEventListener(MouseEvent.CLICK, instructionF);

    gotoAndStop(2);

}

[Ned Murphy]

One thing you will need to add to the movieclip is a textfield so that the text assignment you attempt has something to accomodate it.

[SirMarley]

var fmat2:TextFormat = new TextFormat();

fmat2.font = "Verdana";

fmat2.size = 35;

fmat2.color = "0xFFFF33";

fmat2.align = "center";

fmat2.bold = true;

var instructions:TextField = new TextField();

instructions.defaultTextFormat = fmat2;

instructions.text = "How to play / Como jugar";

Ok, I have this TextField (with its format)

how do I add it to the MovieClip to be shown in the stage? (if I add this instruction to the stage (addChild instructions) it works, but as a text and therefore I can´t click on it

[sinious]

The TextField needs the .selectable property set to false. See my Sprite button example above.

[SirMarley]

checking it now

[SirMarley]

Got it working Sinious

Thanks a lot both of you!!!!

[Ned Murphy]

You're welcome

[sinious]

You're welcome and good luck!

[Ned Murphy]

To add the textfield to the movieclip you can use...

ins_btn.addChild(instructions);

[SirMarley]

var fmat2:TextFormat = new TextFormat();

fmat2.font = "Verdana";

fmat2.size = 35;

fmat2.color = "0xFFFF33";

fmat2.align = "center";

fmat2.bold = true;

var instructions:TextField = new TextField();

instructions.defaultTextFormat = fmat2;

instructions.text = "How to play / Como jugar";

var ins_btn:MovieClip = new MovieClip();

ins_btn.x = 202,75;                  

ins_btn.y = 316;

ins_btn.width = 533,30;

ins_btn.height = 59,35;

ins_btn.addChild(instructions);

addChild(ins_btn);

Still not shown on stage... do I have to set any other property to the MC to be shown?