Change TextArea Vertical Scrollbar Style in Flex 3

On June 20, 2012, in Flash Flex AIR, by James Liu

There are too many tutorials teaching us how to change textArea styles in Flex 4 with Spark theme styles. It is unlucky for people like me who are still working on legacy Flex 3 project. It cost me several hours to change the textarea component styles in Flex 3. In my project, I want to change the Flex TextArea vertical scrollbar truck style, drag thumb style, and hide the scroll arrow. First, I create the scrollbar truck skin and thumb skin in flash and publish as swc file, then change the Textarea vertical scrollbar style by following code:

	trackSkin: Embed(skinClass='VScrollBar_trackSkin');
	thumbSkin: Embed(skinClass='VScrollBar_thumbSkin');
	downArrowSkin: ClassReference(null);
	upArrowSkin: ClassReference(null);

In the mxml file, we need to apply the above style css to verticalScrollBarStyleName attribute:

    <mx:TextArea width="579" height="200" y="12" x="13" verticalScrollBarStyleName="vScrollBarSkin"/>
Tagged with:  

2 Responses to “Change TextArea Vertical Scrollbar Style in Flex 3”

  1. Ajeeth Boaz says:

    Hi, thanks for the tip, but still am not sure how u call these two lines without reference of the swc.
    trackSkin: Embed(skinClass=’VScrollBar_trackSkin’);

    thumbSkin: Embed(skinClass=’VScrollBar_thumbSkin’);

    Please explain…

  2. James says:

    Hi, Ajeeth:

    You are right. I am using flash to create the swc skin file. VScrollBar_trackSkin and VScrollBar_thumbSkin are the class name of the Movieclip Class.

Leave a Reply