Skinning 2004 Components : Tutorial

[FrozenMedia]

I've just had a hard time figuring out how to successfully customise 2004 components such as the TextPane, the Button, and the View based components.

1. Changing the "halo" colour of MX2004 components:

Just a simple one to start, but you can alter the default green of your components with the following line of code:_global.style.themeColor = 0xFF0000; // Changes to redThe same can be used to set the global Font style for ALL components:_global.style.setStyle("fontSize",16);
_global.style.setStyle("fontFamily" , "_serif"); or for a single component:myComponent.setStyle("themeColor", 0xFF0000);
http://digital.tasc.ac.uk/student/2002_Students/0201096/beta/componentsTutorial/buttons.jpg

2. Buttons:
Lets start with the button as this is the most straight forward, you saw how to change the overall "halo" colour above (shown in picture), but here's how to completely skin the button component.

Changing the appearance with Code/Library:

You can alter the the appearence of a button with AS, if you create a movieclip in the library with the Linkage identifier "myFalseUpSkin", you can use it to replace the default button skin:myButton_btn.falseUpSkin = "myFalseUpSkin";In order to pull this off successfully also alter the other button states (such as "true" when the button is being pressed, up down etc) full listing here http://livedocs.macromedia.com/flash/mx2004/main/wwhelp/wwhimpl/js/html/wwhelp.htm?href=03_cus11.htm If you are creating your components on the fly, you can simply pass in the "falseUpSkin" etc values in the initObj.

http://digital.tasc.ac.uk/student/2002_Students/0201096/beta/componentsTutorial/custombutton.jpg

...and here's the full list of button skin states:

falseUpSkin - The up state. The default value is RectBorder.
falseDownSkin - The pressed state. The default value is RectBorder.
falseOverSkin - The over state. The default value is RectBorder.
falseDisabledSkin - The disabled state. The default value is RectBorder.
trueUpSkin - The toggled state. The default value is RectBorder.
trueDownSkin - The pressed-toggled state. The default value is RectBorder.
trueOverSkin - The over-toggled state. The default value is RectBorder.
trueDisabledSkin - The disabled-toggled state. The default value is RectBorder.
falseUpIcon - The icon up state. The default value is undefined.
falseDownIcon - The icon pressed state. The default value is undefined.
falseOverIcon - The icon over state. The default value is undefined.
falseDisabledIcon - The icon disabled state. The default value is undefined.
trueUpIcon - The icon toggled state. The default value is undefined.
trueOverIcon - The icon over-toggled state. The default value is undefined.
trueDownIcon - The icon pressed-toggled state. The default value is undefined.
trueDisabledIcon - The icon disabled-toggled state. The default value is undefined.



3. TextPane, TextInput and any others with borders.

If you've had a look at the source files in C:\Program Files\Macromedia\Flash MX 2004\en\First Run\Classes\mx\skins you'll notice that all of the border elements are stored in theComponent.border_mc. This makes it nice and easy if you just want to flood it white with a setRGB() on one line, unfortunately setting the _alpha to 0% doesn't actually work, but I'm still working on that one.

Anyway, setting the various border parts is done like so:textArea.setStyle("borderColor", "0xFF0000");
textArea.setStyle("highlightColor", "0xFF0000");
textArea.setStyle("borderColor", "0xFF0000");
textArea.setStyle("shadowColor", "0xFF0000");
textArea.setStyle("borderCapColor ", "0xFF0000");
textArea.setStyle("shadowCapColor", "0xFF0000");
textArea.setStyle("shadowCapColor", "0xFF0000");
textArea.setStyle("borderCapColor", "0xFF0000");



4. SCROLLBARS!

Notice how on the previous examples the scrollbars remained the same, the scrollbars are slightly more complicated. You can set the theme color easily enough, but odds are you want to completely custom skin the scrollbar with your own graphics.

Step 1: Open up C:\Program Files\Macromedia\Flash MX 2004\en\First Run\ComponentFLA\StandardComponents.fla

In the library find : "Flash UI Components 2 > Themes > Scrollbar Assets" and then open the ScrollBars Assets MC.

Edit this until your hearts content, each of the sub MCs are clearly labelled so it should be easy, make sure you keep the alignment correct tho. When you have finished, the easiest way to apply this new style to your scrollbars is to drag this "ScrollBars Assets" MC onto the stage in your movie (that uses the scrollbar components). You can then delete it from the stage and the effects should remain.

Here's a sample:

http://digital.tasc.ac.uk/student/2002_Students/0201096/beta/componentsTutorial/scrollbar.jpg

continued...

[FrozenMedia]

continued...

4.2 (SCROLLBAR THEME COLOUR)

You may also notice that the theme colour for a scrollbar is actually found in 8 MC's in the library (used before). Simply edit the colour of "Flash UI Components 2 > Themes > Scrollbar Assets > Elements > *ThemeColorN" then follow the same steps as in part 4.


NOTE:::: You may notice that if you are also using a MenuBar component etc in the same movie as the scrollbar containing component, the scrollbars theme colour will actually revert back to the haloGreen theme. To change this you must first comment out the following line from all of the previously stated "*ThemeColorN" MC's :mx.skins.ColoredSkinElement.setColorStyle(this, "themeColor");

5. Re-Usability

In order to successfully create your custom component, why not wrap it up in it's own class like this:import mx.controls.ComboBox
import mx.controls.scrollClasses.ScrollBar
class MyComboBox extends ComboBox{
function getDropdown():Object{
var oldName = ScrollBar.prototype.downArrowDownName;
ScrollBar.prototype.downArrowDownName = "MyScrollDownArrowDown";
var r = super.getDropdown();
ScrollBar.prototype.downArrowDownName = oldName;
return r;
}
}

Well thats all for now, hope that helps someone out there and provides some interesting questions...

Rich :)


EXTRA:

Anyone using the MenuBar Component out there, setting the theme for this one is independant of other themes, and can be done so with:myMenuBar_mb.setStyle("themeColor", "0xFF0000");

AND:

For those of you that want to get really down and dirty, in the near future I will cover using a CustomBorder class...

p.s. these files are located in:
C:\Program Files\Macromedia\Flash MX 2004\en\First Run\Classes\mx\skins

[FrozenMedia]

New addition, to remove backgrounds in scrollPane based components such as ... the ScrollPane! or textArea etc, you can use:
_global.styles.ScrollSelectList.backgroundColor = undefined;

Rich

p.s. To remove all backgrounds and add in backgrounds for specific components try:_global.styles.ScrollView.backgroundColor = undefined;
myComponent.border_mc._visible = false;
myComponent.setStyle("backgroundColor", "0xFF0000");

[Matthew]

Rich -

Try this for removing borders...

component.setStyle("borderStyle", "none");

[Pingster]

I am trying to remove the border from a scroll pane. Here suggest the following AS,

component.setStyle("borderStyle", "none");

Where do i put this actionscript?

I have tried so many things but have not found the answe :(

Pingster

[FrozenMedia]

Totally depends on how you are creating the scrollpane, if you are dropping it on stage then the Actionscript needs to go on a keyframe "in line" with the keyframe containing your scrollpane...

i.e. it has to be on a keyframe that is on or after the frame containing the scrollpane but not necessarily on the same layer. Also make sure your component is named "component" for this example to work.

Something that may bug you:

If your scrollpane is on a layer that is being masked on the timeline, you will also need to place this code on every keyframe that the mask layer has (each keyframe in a mask layer will reset the style of components it is masking.

Rich

[Pingster]

FrozenMedia, You are a -=star=-

Innitially i could not get it to work. i had applied it to a scroll plane from "flash UI Components Set2".

It works fine on the standard scroll Plane in flash pro :)

Does anyone know why it does not work on the version in Set2? Also whats the difference bewteen the two scroll planes?

Thanks Rich:D :thanks:
*this prob took me a whole week of depression ;)

[Pingster]

I have another probem :/

Situation A:

I drag scroll plane to the scene. I insert a MC into it. I add AS "component.setStyle("borderStyle", "none");" to the frame.

When i run the movie i get a scroll plane without borders!

Yet,

Situation B:

I convert the above scroll plane into a MC. I export it as a SWF file. I goto scene and use loadMovieNum and load the SWF into a level. When i run movie i get a scroll plane without borders. Yet when i click on the scroll bar a green border appears around the whole scroll plane! I assume this is the 'halo' theme? It does not appear in SituationA. How do i stop this from happening?

Also can anyone recommend a good downloadable component i can use to scroll a MC, one that has controls for setting the scroll planes BG colour/transparency and border visability. Flash UI components is driving me crazy :'(

Thnaks for all your time :D

Pingster

[FrozenMedia]

You can remove the default "green focus rectangle" with the following code:myComponent.drawFocus = undefined;


or change the color using:

_global.style.setStyle("themeColor", "0xFF0000");
Rich

[bilsalak]

Great information in this thread.

One thing that should be mentioned is the ability to alter all of these things by creating your own theme and then applying this theme to your .fla's.

Why should you get in the habit of creating themes? If you're like me you don't want to create anything you can't re-use or build upon in a later project (when appropriate). Programmers write modular code so that it can be re-used, 3d developers create wireframe models that can be used over and over, so as Flash becomes more complex we must also find more ways to save time while taking our projects further.

How to create a theme...

Find the folders located within Macromedia/Flash MX 2004/en/First Run/Classes/mx/skins/ and copy and paste one of the folders available. I recommend using "sample" as it uses all of the classes available where as "halo" only uses some of them. Rename this to your new theme name. Now it's time to make your changes to these files directly.

All done?

Now go to Macromedia/Flash MX 2004/en/First Run/ComponentFLA and open this folder. See the Sample Theme.fla ? Copy, paste and rename this file to your theme name. Open this file and edit everything in the library under Flash UI Components 2 > Themes > MMDefault until your hearts content.

Then go to the .fla you want to use your new theme in and with the library still open from your new theme drag and drop the folder MMDefault to your new project .fla

Now add a quick line of AS code to your first frame of your new project .fla that looks like this:

import mx.skins.Insert_Your_New_Theme_Name_Here.*;

this will overwrite the values of the default theme "halo"

Well, that's it. You can reuse this theme over and over again by follwoing the last steps of this short tutorial. Comments and questions are welcome.

I am currently developing a full tutorial with detailed step by step procedures for creating themes in this manner. There are alot of inconsistancies with flash themes and it will try your patience as you come across these things. I hope you will all help me to put together a comprehensive document so that others can learn from our mistakes allot quicker. I'll post to this forum when the big tutorial is ready.

Thanks,
Bill

[Burnwine]

Hey!

I am using a textarea to display news from a database. Recieving it from a .php script an editing the text with .html tags for a nice display
in flash. But the color tag doesn't seem to work. I've tried .css files and I've tried to set the color in flash, sry I'm using 2004 version, and the color seem to work when the instance.html is set to false but then my news doesn't work :D ...

Any ideas on how I can fix this anoying problem would be nice....

/Burnwine

[demonpixel]

anyone ever skin a media component? i find access to all of the visual elements fairly easily, but i don't know where to find where you can change the look of the play/pause button. i can change the look of a normal component button, with Frozen Media's tutorial, but the media playback component play/pause button remains unchanged.

[FrozenMedia]

Sorry I haven't checked this thread in a little while...

@Bill Thanks for the welcome addition, I hope to hear more from you in FlashMove in the future :)

@Demon Pixel...

Skinning Media Components
-----------------------------------

First up, although these are technically Halo skinned components, you won't find the assets in the same HaloSkin.FLA, instead take a look in:

(Windows XP)

C:\Documents and Settings\YOUR_USERNAME\Local Settings\Application Data\Macromedia\Flash MX 2004\en\Configuration\ComponentFLA\MediaComponents .fla

Hit F11 (or Cmd+L on Mac) and navigate to the following folder for editing your Play button etc:
http://digital.tasc.ac.uk/student/2002_Students/0201096/beta/componentsTutorial/media_skinning.jpg


When your done editing save the FLA as "MediaComponentsCustomName.FLA" (as you wish). Once done export the new component as a SWC in:

"Windows: C:\Documents and Settings\user\Local
Settings\Application Data\Macromedia\Flash MX
2004\language\Configuration\Components\Media Components\"

You can then drag from the components panel your midified version...

Hope that helps you,

Rich

[demonpixel]

cool, that seems to work to a certain extent. if i change that icon.play movie clip, it seems like it goes over the halo button. if i make the graphic inside icon.play thin enough though, you can see the halo button underneath. is there a way to get rid of that halo button altogether? or alter all of its up down, over, and hit states?

[FrozenMedia]

As you have determined it is the HaloTheme button (mx.controls.Button) and not an mx.controls.SimpleButton being used you can have a look in the library for button assets and modify those, odds are you will find what you are looking for there. (I'm sorry I don't have the time to dig too far into the media components myself).

Rich

[demonpixel]

Ok, I found the .as file that creates the button look out of code. you can go here:

C:\Program Files\Macromedia\Flash MX 2004\en\First Run\Classes\mx\skins\THEME NAME

and edit ButtonSkin.as or Default.as to create the button you want. Here, you can "code-create" your button states. Best thing to do would be to make copies of these .as files, and one of the ComponentFLA files, rename them to whatever theme name you want, and make sure your Linkage all matches up. At least, I think that's right...be great if someone could confirm. Thanks!!!

[demonpixel]

oh yeah one more thing...i found that after editing the .as files, you have to close mx 2004 and reopen it to see the changes in the component (in this case, the mediaplayback component). not sure if everyone has to do this, but i had to to see the changed results.

[FrozenMedia]

Instead of doing that, clear out your ASO folder (within the USER/..../Classes folder) or use FlashTrayTools, essential utility!!

Rich

[demonpixel]

never heard of FlashTray; I'll check it out soon. Thanks! Yeah, seems like 2004 was geared more towards developers this time around. It was nice to just edit components by right clicking. Less protection though.

[lawrie]

hi

i bought my license for mx 2004 pro a couple of weeks ago, but only installed it this weekend. after deciding to use components on a project instead of my own clunky cobbled-together desktop system. i've already figured out how to skin the components, and i've spent a great many hours skinning the everloving crap out of them.

now what i would like to do is add a resize button to the window component; i coded an experimental button myself that attaches a semi-transparent movieclip to the stage, and when you let go, resizes the component to the size of the square using setSize(). but, the button i coded simply sits on the stage and follows the component around, and i'd like to add this button *inside* the component.

any ideas? thanks!

[FlashMove]

Since there have been Ellipsis updates on Flash, here are more concepts on skinning the new skins. ;)
http://www.macromedia.com/devnet/mx/flash/articles/skinning_2004.html

[FrozenMedia]

Thanks FlashMove,

I think it's about time I went ahead an consolidated everything in the thread so far, this should take a couple of days, wish me luck!

Rich

[edit] Just reading the new additions to the Flash Help, would be overkill to write any more on the subject they have done a great job now.

[dioptre]

any one know how to change the rollover color of the background of the menubar? I can't make it anything but white ;(

Andy

[biancahope]

Excellent tutorial, Rich, as always! It helped me create a beautiful scrollbar :-)

Bianca

[MayconSouza]

HI, i´m trying to modify the combobox border color, but, don´t work, just a litlle line stay diferent...

somebody help me please...

Regards
MayconSouza

[flashy11]

First up, although these are technically Halo skinned components, you won't find the assets in the same HaloSkin.FLA, instead take a look in:

(Windows XP)

C:\Documents and Settings\YOUR_USERNAME\Local Settings\Application Data\Macromedia\Flash MX 2004\en\Configuration\ComponentFLA\MediaComponents .fla

Hit F11 (or Cmd+L on Mac) and navigate to the following folder for editing your Play button etc:
http://digital.tasc.ac.uk/student/2002_Students/0201096/beta/componentsTutorial/media_skinning.jpg


When your done editing save the FLA as "MediaComponentsCustomName.FLA" (as you wish). Once done export the new component as a SWC in:

"Windows: C:\Documents and Settings\user\Local
Settings\Application Data\Macromedia\Flash MX
2004\language\Configuration\Components\Media Components\"

You can then drag from the components panel your midified version...

Hope that helps you,

Rich

I have tried and made changes to the .fla but how do I export it into SWC?

I looked through the export - save as and publis settings, but can't find SWC.

[flashy11]

I found it, export in the library option, :D

[flashy11]

Hi, I have now tried 4 examples, I have changed the button size and colour of the mediaplayback. After I have exported it to a swc, none of the changes show. I have tried to fill the flv video in the display window, but still I got white around it. Even the controll that I've tried to be smaller it's still the default size.

I have tried to edit all of this in their layers and on the Library component assets.

[mosorno]

I just attempted to use your code and it didn’t work for the media component. Where does the code have to be placed and change the colors and text for a media component? All the tutorials I see are to vague and aren’t specific enough.

[learning]

This is awesome,

How would I just change the Checkbox label font properties

_global.Checkbox.setStyleProperty("textColor", 0xFFFFFF);
_global.Checkbox.setStyleProperty("textFont", "Verdana");
_global.Checkbox.setStyleProperty("textSize", 20);

doesn't seem to work.

[Scottae]

Here are the styles (http://livedocs.macromedia.com/flash/8/main/00003145.html) for the checkbox component. Here's how to set global styles (http://livedocs.macromedia.com/flash/8/main/00002995.html) for components.

[learning]

you covered everything except label size, any comments on how to AutoSize?

[Scottae]

Use fontSize to set the size of the text. I don't think there is an autoSize for checkboxes

[learning]

Thanks for your reply:

I am refering to the label box next to the checkbox, some of the post say enter Checkbox.autoSize = "true" and that should let the box grow and wrap to the text that is imputed.

I have placed it everywhere but it doesn't seem to effect the label box. I included a sample.

Thanks

[Scottae]

I said I don't think there is one. Trying to include it everywhere isn't going to change that. If you look at the help info on the CheckBox (http://livedocs.macromedia.com/flash/8/main/00003147.html) class, you won't see an autoSize method/property. That usually means there isn't one.

[learning]

I was looking at this page http://livedocs.macromedia.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00002482.html and I thought that is would control the label for the checkbox. Sorry I will try another method, thanks for you help. I included a sample in another post. But thanks for your help

[nighternet]

Is it possible to use "embedfonts", "fontFamily" etc. in accordioncomponent in MX2004?

I use:
myacc.setStyle("embedFonts", true);
myacc.setStyle("fontFamily", "Frutiger 45 Light");
myacc.setStyle("fontSize", 18);

but it din't change anything.

[Scottae]

Did you create a font symbol (http://livedocs.macromedia.com/flash/8/main/00000527.html) in your library? And if so, is it exported to the first frame?

[nighternet]

Thanks a lot! I completely forgot about this part, but then I've discovered that i don't need even that if I create a childIcon array in params and create text movie clips in library for each of the menu items.

[nighternet]

BTW. Is it possible to change the menu text color? Say, the selected one is different from others.

[nighternet]

Hmm. Font embedding still doesn't work. I did put a font symbol into library, exported it in first frame under name "frutiger". In script I've changed to:
_global.styles.Accordion.embedFonts=True;
_global.styles.AccordionHeader.setStyle("fontFamily","frutiger");
_global.styles.AccordionHeader.setStyle("fontSize", 12);

Still doesn't work.

[jaxx0rr]

I have a question:

is there any way I could define all the colors for all the components at once using _global.style.setStyle( ... ? I mean I know there's a way I just dont have the list of all the variables :|

and a related question:

Is there no place where I cand download the actionscript of some new themes? I mean theres so mutch flash-related stuff you can download but there are no flash skins/themes on the entire internet :eek:

what I would like to do is define 5-10 basic colors for a theme and use them troughout the components to make them look good.

I'm not sure if I made myself understood but I hope u know what I mean

thanks

[m0di]

hi there...
is there any one who can help me solving this problem
i'm new to Component in flash
i've made the comboBox and put inside it an array filled with values.
all what i want to do is once clicking on value
to put this value in a variable
please help:weep:

thanks

[JolieAni]

Thanks for your reply:

I am refering to the label box next to the checkbox, some of the post say enter Checkbox.autoSize = "true" and that should let the box grow and wrap to the text that is imputed.

I have placed it everywhere but it doesn't seem to effect the label box. I included a sample.

Thanks

I know this is about a year too late, but I figured I'd post the answer up here just in case someone else is looking for the answer to this question.

In order to set the label on a checkBox as auto-sizeable, you must access the Label component first.

myCheckbox.labelPath.autoSize = true;