Push Button - script a push button skin

[imdumb]

Hello everyone....
Does anyone have a simple example on scripting a pushbutton and setting the skin to XP?

[blanius]

You can set the skin in the properties panel.
What would you have your button do?

Here's a start
With a push button named pb you first want to tell the button to watch out or "listen" for a mouse event called "click" and when it does happen to run a function called clicked

pb.addEventListener(MouseEvent.CLICK,clicked);


Then create your function and note that you send the paramater e (call it what ever you want) that is of the data type EVENT and then in the function you can know what button was clicked as well as a lot of information about that button. This example will fill a text box with interesting information about the event.

function clicked(e:Event){
txt1.text=e;
}

[imdumb]

Thanks Bret,
Let me expand on that thought. (Scripted pushbutton);
ex. var pb:LabelButton = new LabelButton();
pb.setSkin('XP');
pb.setLabel('Hello');
addChild(pb);

This would have be a nice way to set the component, but I am sure there are alot more properties to set....

[w.brants]

Why do you want to set the skin using ActionScript ?
Isn't it easier to drag a button on stage ?

[imdumb]

Static vs dynamic?
w. based on the classes I have seen you develop. Passing parameters to a class is apparently a coding style you use.
I have developed a number of classes which I script onto the stage. I have a grid class I have developed which I use often, I would like to include a couple of button if I choose. I really don't what to build a static stage every time with buttons and code those buttons every time when those buttons will perform the same function.
Do you have better idea?

[w.brants]

The AS3 based components use bitmap images to skin the components. When you add a component on stage using the GUI, KM takes care of this. If you want to script things, you gave to do these things manually. There's also a class named ScriptedSkin that can skin a button for you but it looks very basic so it's up to you if that will do or not.
For the properties and functions of the components, you can look at the KM AS3 API docs that are included with KM.

[imdumb]

More direct approach!!!!!!!
I have read the documentation which states:

setSkin () method
public function setSkin(assetName:String, usePrefix:Boolean = true):void

Sets the skin asset. It works the same as for the Image class. The difference is that the bitmap image to use has to be a three state image. This means the image has to contain the up, over and down states below each other in one single file.
Parameters
assetName:String

usePrefix:Boolean (default = true)

************************************************** ********
All that I am asking is a simple script code to show how to setSkin on the pushbutton.

I am sorry that I am asking a dumb question.....

[w.brants]

When you want to use the ScriptedSkin class, you can look at the documentation of the LabelButton class. There's a code example in the documentation.

When you want to use the XP skin, you have to embed the skin image ( C:\Program Files\KoolMoves\Bin\AS3\Skins\XP\button.png ), assign a class name to it ( for example button_png ) and skin the button instance

myButton.setSkin('button_png#4,4,10,10', false);

[imdumb]

Thank you w.
That's what makes KM and it's members superior over all other products.
The information you and others provide only makes working with KM more inviting.

[w.brants]

Another thing you can do is to pass a button instance to the constructor of your class and use its clone function to create other instances. That way you could place one button using the gui somewhere outside of the visible area of the stage so it isn't visible and pass that to your class constructor so it can clone the button.
This way you don't have to worry about how to skin and it's easy to change to another skin.

[blanius]

When you want to use the ScriptedSkin class, you can look at the documentation of the LabelButton class. There's a code example in the documentation.

When you want to use the XP skin, you have to embed the skin image ( C:\Program Files\KoolMoves\Bin\AS3\Skins\XP\button.png ), assign a class name to it ( for example button_png ) and skin the button instance

myButton.setSkin('button_png#4,4,10,10', false);

????? What the heck is #4,4,10,10 about?

Now I'm confused..

[imdumb]

blanius,
In order to use the skins km provides, and to call on those skins thru scripting. You need to setup a skin image. When you open the script editor and select the fourth icon - Symbol library. A class window will appear. You will need to select the image tab. Then select add to open a file dialog. Select the path provided above. Once you select the file a class name dialog box appears and you enter the button_png for the name.
Once that is done, when ever you add a class like the LabelButton to your script and provide the setSkin('button_pgn#4,4,10,10', false) code it will reference the XP skin.

[blanius]

I've skinned a button with my own skins but the #4,4,10,10 looked weird.. So that is needed for some reason with built in skins? (Shaking head), I'm still confused. I assume this must have something to do with the XP skin having more than one image in it or something.

[w.brants]

The XP button has a default size of 18 x 18 pixels. The #4,4,10,10 defines a scaling grid. The specified rectangle starting at (4,4) with both a width and height of 10 is the part that is scaled in both directions. Specifying these values makes sure the corners of the button still look good when the button is resized.

[blanius]

I see. That makes a lot of sense. The couple of buttons, I've made were made to size needed so not scaled much so this wasn't issue for me. But for proper skinning this makes this a good idea.

[blanius]

Oh and Imdumb, Are you going to share this grid class you allude to?