Posted on by JesterXL

Short Stint in Skinning Flash MX 2004 Components

So, helping a friend today with figuring out how to skin the Window’s title bar and the ScrollPane’s Scrollbars.

The first took some working, but originally, she looks like this:

And using this code:

_global.styles.Window.setStyle("borderStyle", "outset");
mx.managers.PopUpManager.createPopUp(_root,
mx.containers.Window,
   true,
   {skinTitleBackground: "test",
   skinCloseUp: "bu",
   closeButton: true});

She looks like this:

Notice in the above code, I pass in the skin variables in the initialization object. There is another to do this ahead of time as I’ll show you below. The strings are the linkageID’s of the movie clip’s I’ve created. The skin creation is really simple:

– create a movie clip
– put art in it
– right click on the symbol in the library
– give it a linkageID name
– make sure it’s exporting in frame 1 (otherwise, you’ll have to put it manually on stage somewhere before you use it)
– in the AS 2.0 Class field, type “mx.skins.SkinElement” (this makes the movie clip size with the component)

Done!

However, for components within components, you don’t have control of their constructors, nor access to them usually. Now, there may be another way to do this, but accessing the default skin properties is easy. In the ScrollPane’s case, here’s how he normally looks.

However, if I want to skin the Scrollbar, I merely set the prototype values to something different than the default before creating the ScrollPane:

mx.controls.scrollClasses.ScrollBar.prototype.scrollTrackName = "scrollbar_track_green_mc";
mx.controls.scrollClasses.ScrollBar.prototype.upArrowUpName = "scrollbar_arrow_mc";
mx.controls.scrollClasses.ScrollBar.prototype.downArrowUpName = "scrollbar_arrow2_mc";
mx.controls.scrollClasses.ScrollBar.prototype.thumbTopName = "thumbTop";
mx.controls.scrollClasses.ScrollBar.prototype.thumbMiddleName = "thumbMiddle";
mx.controls.scrollClasses.ScrollBar.prototype.thumbBottomName = "thumbBottom";

attachMovie("ScrollPane", "mc", 0);
mc.setSize(320, 240);
mc.contentPath = "test1.jpg";

He now looks like this:

Granted, now that I’ve set the prototype, all Scrollbars will use the same skins, so this method does not allow for individual Scrollbar skinning, but I’m sure there is a way somehow; I’m still learning.

Hope this helps!

12 Replies to “Short Stint in Skinning Flash MX 2004 Components”

  4. I think from a design/usability standpoint, having all instances use the same skin IS a good idea, so i think setting the skin linkages on the prototype is a good thing :)

    There are also props for setting over and down states on things like the scrollbuttons (which you probably are already aware). The other cool thing is that if you know you are going to use one skin for all instances, you can just give linkage id’s to your skin symbols that are the same as the ones used by default in the component and the component will automatically know to use your new skins. For example, if you set the linkage id for your up arrow up state to “ScrollUpArrowUp”, it will automatically use it, and you don’t have to write any code to make it happen.

  6. BTW, what’s up with the scroll track being larger than the track button and the button being closer to the left or top. Is that a UI design issue (setting the track buttons closer to the content) or a mistake?

  7. Most definately!

    As far as I know currently, mx.skins.SkinElement does NOT size your component beyond the parameters of where it’s supposed to fit.

    So, the scrolltrack I gave is like a pixel bigger than the component’s. Naturally, I can either modify my own size function, or modify the graphic. This is why sometimes FLA editing of skins (of the sample theme) vs. runtime is best as you can fix things like that easier… then again, maybe not.. :: shrugs ::

    At any rate, the design I had, the green one, originally had the scrollbutton about 4 pixels smaller than the scrolltrack. I put it at x of 2 inside the movie clip… but it’s still not far enough. Don’t know if it was the component compensating or what, but didn’ mess with it too long.

    So, most of the things visually “wrong” are my fault, and can be fixed.

  8. What stinks is that it takes this much work – great post though as usual your info is very appreciated

  9. FYI: If you have a component on the stage w/ a specific theme applied then dynamically create the component, the original instance keeps your original theme and the newly created instance uses the style that you just created. I am guessing that if you create another instance dynamically it will inherit the new class that has been overwritten. I am still wondering how I can use multiple themes without overwriting the component class but I have had no such luck. I’m daBull Bitch!

Comments are closed.