Flash mx 2004 Component skinning

[aaike]

Does anybody have a link to a good tutorial on how to link skin elements to your component and then how to apply different skins and colors to the component ?

i know this for flash mx , but with flash mx 2004 i feel kinda stupid, the skinning system has changed a lot.

[grandmasterC]

Hi,

I'm having the same nightmare with skinning components in MX 2004 PRO.

Any one got this to work? I have followed the limited instructions in the help files using "themes" but this still doesn't work.

Any help or advice would be much appreciated.

chris

[catbert303]

I have to agree, editing components does feel slightly over complicated for MX2004, and it not helped by the action of dragging a component from the library to the stage continually crashing flash (at least it seems to happen quite often when i'm doing it) anyway...

First find the ComponentFLA folder (for me this is at C:\Program Files\Macromedia\Flash MX 2004\en\First Run\ComponentFLA) from here open the HaloTheme fla file.

The first thing to do is save this as TestTheme.fla

Now open the library and to edit the scrollbars go to the scrollbar assets folder (Flash UI Componets 2 > Themes > MM Default > ScrollBar Assets) This folder contains the clips and graphics used in the scrollbars. Open the states subfolder and edit the movie clips to change the appearence of the skin.

Once this is done drag the ScrollBar Assets folder from the library of TestTheme.fla into the movie you want to use the skinned scrollbar. Drag a TextArea component onto the Stage, give it an instance name and fill it with some text and it should use the new edited scrollbars.

[grandmasterC]

Whaoooooo! Thank you so much it works! There are still lots of symbols to go through and edit but the changes will eventually be reflected in the new document.

I have noticed something interesting which I think I should post. Although you can change the theme colour in your MyThemes.fla the over states of the buttons will still default to green. I guess there is some code somewhere that overrides the actually physically colour of the symbol.

The solution...well its actually quite simple

just put this in the first frame

_global.style.setStyle("themeColor","0x7A99E0");

thanks to gerr who posted this in the ultrashock forum.

Thanks for your help catbert303,

gmc

[aaike]

yes changing the theme for the build in flash components is relativly simple.

But when you create your own component , and want to create skins than can be changed at runtime , that's another story.

anyway i have found a solution after a lot of digging.
i think i didn't find it because i was looking too far. skinning your own components also became pretty simple.

a flash 2004 component should always be linked to a class file.
the class file contains a constructor, init() and size() function at least
the init and size class have to call their super functions.

you should add the drawing code in the draw() function

if you want to use skins you should declare them as variables so they can be changed from the outside.


here is an example :

class myPackage.myComponent extends UIComponent{
	

	var buttonUpSkin:String = "myButtonUp";


	// constructor
	function myComponent() 
	{	
	}

	//initiator
	function init(Void):Void {
		super.init();
	}
	
	//size 
	function size(Void):Void {
		super.size();
	}
	
	//draw
	function draw():Void {
		this.attachMovie(buttonUpSkin,buttonUpID,1);
		this[buttonUpID]._y = 0;
	
	}
	
}

this code will attach the myButtonUp as a skin of your component.
users can change the skin by creating another movieclip and link it as myButtonUp.
or they can change the linking of the skin directly like

buttonComponent.buttonUpSkin = "anotherButton"

if you want your skin to react to the setStyle like grandmasterC was saying

then you have to register that skin with the mx.skins.SkinElement.registerElement() function

hope this helps for anybody trying to create components

[Neumy]

Nice. This helps a lot.

[ericflash]

Great thread helped out a lot. Is there a way to just change the theme of just one component and not the other’s? Global sets all components what if I had a combo box and a list box I wanted the combo box to have one theme and a list box to have another.
I tried:

combo_cp.style.setStyle("themeColor","0x990000");
liast_cp.style.setStyle("themeColor","0x0099FF");

But it didn't work????

[tarabuehner]

i'm going to bump up this thread because i'm trying to learn how to skin components as well and i'm starting from scratch. by that i mean that i didn't know how to in previous versions of flash, as i'm just learning how to use flash in general.

anyways, i also would like to know the answer to that last reply ... how to skin a single component. i tried the exact same code for a combo box, except with a different color and instance name of course, and i came up with an error that said:

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 11: Statement must appear within on/onClipEvent handler
myCombo.setStyle("backgroundColor","0xFFCC00");

What does this mean? I could use some help.

Thanks!

[madzigian]

you got that error message because you were trying to attach that code onto the comboBox. that code should work but the actions have to be placed on a frame where the comboBox is located...not on the comboBox itself.

GL HTH