Adding CSS Support to the CS3 Components

good job!

I have been working with CSS yesterday and it works like a charm. For example, i used an style for links in my htmltext. One error occured here and I was wondering if anybody encountered this. When you have a mask for your textField,(as3 btw), the textfiles is unable to detect the mouse click! The mask is a shape, so it should block the mouse...

Maybe sombody knows a solution?

Cheers,

Joris

Why is it that when you post something you always find the solution 10 minutes later?

masking works perfectly.(made a mistake in the hyrachie with other movies)

textBox = new TextBox(width,"auto");

textBoxMask = new Sprite();

textBoxMask.mouseEnabled = false;

textBoxMask.buttonMode = false

textBoxMask.mouseChildren=false;

addChild(textBoxMask);

addChild(textBox);

textBox.mask=textBoxMask;

textBoxMask.graphics.beginFill(0xFF0000,1);

textBoxMask.graphics.drawRect(0, 0, width, height);

textBoxMask.graphics.endFill();

hummm... the textarea is not editable!!??

@Freddy

TextFields with stylesheets are not editable. Good point, I will add it above :)

You wrote, "TextFormats can not be set on textFields with a styleSheet." Check this out: http://livedocs.adobe.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00002846.html

@ozgur

The document you linked to covers the styleSheet property of the AS2 TextArea component. If you try and set a textFormat on a textField with a styleSheet on it, you will see the error I was referring to. You *can* set both properties, but they are mutually exclusive.

GOOD

thanks~

I get the following error.

1172: Definition fl.managers:StyleManager could not be found.

can't seem to find any documentation on why anywhere.

@caleb

The source for the components (including StyleManager) are not available in your classpaths by default. You can add them simply by dropping any UI Component (like TextArea or Button) into your application - since the components have a "componentShim" symbol, which contains all the compiled classes.

Ah, makes sense. Thanks Lanny. So if I wanted to use the style manager without having a component, I would need to add the class path.

This is extremely useful information!

But it is a pain to rewrite existing css stylesheets into the actionscript. Is there a way you can use URLLoader to import an external .css document?

I can do it with text fields like this...

var tf:TextArea = new TextArea();

tf.width = stage.stageWidth;

tf.height = stage.stageHeight;

addChild(tf);

var wordList:Array = new Array();

var textLoader:URLLoader = new URLLoader();

textLoader.addEventListener(Event.COMPLETE, textLoaded);

var cssLoader:URLLoader = new URLLoader();

var css:StyleSheet = new StyleSheet();

function cssLoaded(e:Event):void {

css.parseCSS(e.target.data);

blog.styleSheet = css;

for (var i:int = 0; i " + wordList[i] + "";

}

}

function textLoaded(e:Event):void {

wordList = e.target.data.split("\n");

cssLoader.load(new URLRequest("http://technobreakfast.com/xml_css/blog.css"));

cssLoader.addEventListener(Event.COMPLETE, cssLoaded);

}

textLoader.load(new URLRequest("http://technobreakfast.com/xml/xml_blog.php"));

But the text field component will not add a scroll bar, and that is too limiting for blog text...

css textboxt ınput (textfield) style - examples - -

http://www.css-lessons.ucoz.com/textbox-css-examples.htm

about css parameters

http://css-lessons.ucoz.com/css-parameters.htm

this works for the style sheets, but i was also trying to extend the component to skins scrollbars for different textareas and found a few issues.

1. public static function getDefaultStyles():Object should be getStyleDefinition();

2. the implementation of that method should be

return UIComponent.mergeStyles(SCROLL_BAR_STYLES, TextArea.getStyleDefinition());

here is my class

public class CSSTextArea extends TextArea {

private var __styleSheet:StyleSheet;

protected static const SCROLL_BAR_STYLES:Object = {

downArrowDisabledSkin:"ScrollArrowDown_disabledSkinTextArea",

downArrowDownSkin:"ScrollArrowDown_downSkinTextArea",

downArrowOverSkin:"ScrollArrowDown_overSkinTextArea",

downArrowUpSkin:"ScrollArrowDown_upSkinTextArea",

thumbDisabledSkin:"ScrollThumb_upSkinTextArea",

thumbDownSkin:"ScrollThumb_downSkinTextArea",

thumbOverSkin:"ScrollThumb_overSkinTextArea",

thumbUpSkin:"ScrollThumb_upSkinTextArea",

trackDisabledSkin:"ScrollTrack_skinTextArea",

trackDownSkin:"ScrollTrack_skinTextArea",

trackOverSkin:"ScrollTrack_skinTextArea",

trackUpSkin:"ScrollTrack_skinTextArea",

upArrowDisabledSkin:"ScrollArrowUp_disabledSkinTextArea",

upArrowDownSkin:"ScrollArrowUp_downSkinTextArea",

upArrowOverSkin:"ScrollArrowUp_overSkinTextArea",

upArrowUpSkin:"ScrollArrowUp_upSkinTextArea",

thumbIcon:"ScrollBar_thumbIconTextArea",

repeatDelay:"repeatDelay",

repeatInterval:"repeatInterval",

scrollBarWidth:8,

scrollArrowHeight:0

};

public static function getStyleDefinition():Object {

return UIComponent.mergeStyles(SCROLL_BAR_STYLES, TextArea.getStyleDefinition());

}

public function CSSTextArea() {

super();

}

override protected function drawTextFormat():void {

if(!this.textField.styleSheet) super.drawTextFormat();

else {

setEmbedFont();

if(_html) textField.htmlText = _savedHTML;

}

}

override protected function configUI():void {

super.configUI();

}

}

Hi Grant,

Just wondering if you have any idea how I could add CSS styles to a Flash multiple choice quiz. I need to be able to make some of the text in a text field italics.

any ideas?

Thanks for the code!

My textArea was coming up blank because I'd also set a textFormat, so I replaced the drawTextFormat function as follows:

override protected function drawTextFormat():void {

var styleSheet:StyleSheet = getStyleValue("styleSheet") as StyleSheet;

textField.styleSheet = null;

super.drawTextFormat();

textField.styleSheet = styleSheet;

}