Supported CSS properties

This didn't work for me at all - I'm using Flash CS3 Professional and flash 9.0 as out put AS3 as the language.

I am making multiple TextFields with a for loop. I am making 4 in all. When I try to apply the htmlText I cannot seem to access the instance to apply it to only one instance.

Here is my code:

var textContainer:Sprite=new Sprite;
var textBox:TextField;


var fillType:String=GradientType.LINEAR;
var colors:Array=[0x999999,0xFFFFFF];
var colors02:Array=[0x333333,0x999999];
var colors03:Array=[0xFFFFFF,0x999999];
var alphas:Array=[80,100];
var alphas02:Array=[.1,.9];
var ratios:Array=[0,255];
var matr:Matrix=new Matrix;
var matr02:Matrix=new Matrix;
var matr03:Matrix=new Matrix;
matr.createGradientBox(600,690,55,-100,-120);
matr02.createGradientBox(300,30,55,60,10);
matr03.createGradientBox(95,11,(Math.PI/2),1,1);
var spreadMethod:String=SpreadMethod.PAD;

var mainContainer:Sprite=new Sprite;
mainContainer.graphics.lineStyle(6,0x999999);
addChild(mainContainer);

var mainInterfaceBorder01:Shape=new Shape;
mainInterfaceBorder01.graphics.beginFill(0x999999);
mainInterfaceBorder01.graphics.drawRoundRect(0,30,380,225,25);
mainContainer.addChild(mainInterfaceBorder01);

var mainInterfaceBorder02:Shape=new Shape;
mainInterfaceBorder02.graphics.beginFill(0x999999);
mainInterfaceBorder02.graphics.drawRect(0,30,380,25);
mainContainer.addChild(mainInterfaceBorder02);

var mainInterface01:Shape=new Shape;
mainInterface01.graphics.beginGradientFill(fillType,colors,alphas,ratios,matr,spreadMethod);
mainInterface01.graphics.drawRoundRect(1,33,378,222,25);
mainContainer.addChild(mainInterface01);

var mainInterface02:Shape=new Shape;
mainInterface02.graphics.beginGradientFill(fillType,colors,alphas,ratios,matr,spreadMethod);
mainInterface02.graphics.drawRect(1,32,378,25);
mainContainer.addChild(mainInterface02);

var tabSprites:Array=new Array;

function loadTabBg():void {
for (var i:Number=0; i < 4; i++) {
var tabBg:Sprite=new Sprite;
addChild(tabBg);
with (tabBg) {
tabBg.graphics.beginFill(0x999999);
tabBg.graphics.drawRoundRect(0,1,95,28,10);
tabBg.graphics.beginFill(0x999999);
tabBg.graphics.drawRect(0,4,95,28);
tabBg.x=i * 95;
}
}
}

var currentTab:Shape=new Shape;
var currentTabBtm:Shape=new Shape;
currentTab.graphics.beginGradientFill(fillType,colors,alphas,ratios,matr,spreadMethod);
currentTab.graphics.drawRoundRect(1,2,93,28,10);
currentTabBtm.graphics.beginGradientFill(fillType,colors,alphas,ratios,matr,spreadMethod);
currentTabBtm.graphics.drawRect(1,12,93,20);




function loadTabs():void {

for (var i:Number=0; i < 4; i++) {
var tab:Sprite=new Sprite;

var tabHlite:Shape = new Shape();
tabHlite.graphics.beginGradientFill(fillType,colors03,alphas02,ratios,matr03,spreadMethod);
tabHlite.graphics.drawRoundRect(5,3,85,9,5,5);
tabHlite.x=i * 95;
tabHlite.y=1;

tabSprites.push(tab);
tab.name="tab" + i;
addChild(tab);
tab.buttonMode=true;
addChild(tabHlite);


tab.addEventListener(MouseEvent.MOUSE_UP,clicked);
function clicked(evt:MouseEvent):void {
trace(evt.target.name);

var currentX:int=evt.target.x;
currentTab.x=currentX;
currentTabBtm.x=currentX;
var tag:String=evt.target.name;


switch (tag) {
case "tab0" :
tab0();
break;
case "tab1" :
tab1();
break;
case "tab2" :
tab2();
break;
case "tab3" :
tab3();
break;
}
}

with (tab) {
tab.graphics.beginGradientFill(fillType,colors02,alphas,ratios,matr02,spreadMethod);
tab.graphics.drawRoundRect(1,1,93,28,10);


tab.x=i * 95;
tab.y=1;
}
}
addChild(currentTab);
addChild(currentTabBtm);



}




function loadTextContainers():void {
for (var i:Number=0; i < 4; i++) {
addChild(textContainer);
textContainer.mouseEnabled=false;
with (textContainer) {

textContainer.x=i * -1;
textContainer.y=2;
}
}
}
//

var tab00text:String = "UPDATES";
var tab01text:String = "VIDEOS";
var tab02text:String = "PROMOTIONS";
var tab03text:String = "FEATURED PRODUCTS";


var tabArray:Array=new Array(tab00text,tab01text,tab02text,tab03text);

function loadText():void {

for (var i:Number=0; i < 4; i++) {
textBox=new TextField ;
textBox.text=tabArray[i];
textContainer.addChild(textBox);
//textBox.mouseEnabled=false;
var CSSFile:String = "assets/pDentalAds.css";
var XMLFile:String = "assets/content.xml";

var cssLoader:URLLoader = new URLLoader();
var cssRequest:URLRequest = new URLRequest(CSSFile);
cssLoader.addEventListener(Event.COMPLETE, cssLoaded);
cssLoader.load(cssRequest);

function cssLoaded(evt:Event):void {
var css:StyleSheet = new StyleSheet();
css.parseCSS(URLLoader(evt.target).data);

textBox.styleSheet = css;
textBox.htmlText = tab00text;
textBox.htmlText = tab01text;
//textBox.htmlText = tab02text;
//textBox.htmlText = tab03text;
textArea
}
//var tFormat:TextFormat=new TextFormat;
//tFormat.font="Verdana, Arial, Helvetica";
//tFormat.size="10";
//textBox.wordWrap=true;
//tFormat.align="center";
//textBox.multiline=true;
//tFormat.underline=true;
//tFormat.color = 0xFFFFFF;
//textBox.setTextFormat(tFormat);
//hFormat.color = 0x000000;
//hFormat.size = "12"



with (textBox) {
textBox.x=i * 95;
textBox.y=1;

}
}
}

loadTabBg();
loadTabs();
loadTextContainers();
loadText();

Well... the htmlText got stripped.
Try this - replacing the "[" and "]"

"[p class='header'] CSSTextArea [/p][p] Lorem ipsum dolor sit amet.[/p][a href='#' class='link'] Link [/a]"

Hi googi,

To apply external ccs to the TextArea component try this:


// Import Classes
import CSSTextArea
import CSSLoader

// CSSLoader
var css:CSSLoader=new CSSLoader("CSSTextArea.css")

// CSSTextArea
// - be sure that you have an instance of TextArea in your library
var cssTextArea:CSSTextArea=new CSSTextArea()
cssTextArea.width=400
cssTextArea.height=400
cssTextArea.htmlText="CSS TextAreaLorem ipsum dolor sit amet.Link"
cssTextArea.textField.styleSheet=css

addChild(cssTextArea)




To make this work you'll need the two classes and the css file:


// ------------------------------------------------
// CSSLoader
// ------------------------------------------------
// Class for loading external stylesheets
//
// Usage Example 1:
// var tf:TextField=new TextField()
// tf.StyleSheet=new StyleSheetLoader("styles.css")
//
// Usage Example 2:
// var css:StyleSheetLoader=new StyleSheetLoader("styles.css")
// var tf1:TextField=new TextField()
// tf1.StyleSheet=css
// var tf2:TextField=new TextField()
// tf2.StyleSheet=css
//
// To limit size the class only dispatches COMPLETE and IO_ERROR
// without loader parameters
//
// To get the full range of events add event listener to the
// public property loader - like:
// var css:StyleSheetLoader=new StyleSheetLoader("styles.css")
// css.loader.addEventListener(ProgressEvent.PROGRESS,....)
//
package {
import flash.text.StyleSheet;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.IOErrorEvent;

public class CSSLoader extends StyleSheet {
public var loader:URLLoader;
public var data:String;
public function CSSLoader(css:String=""):void {
super();
if (css!="") {
load(css);
}
}
public function load(css:String):void {
loader=new URLLoader();
loader.load(new URLRequest(css));
loader.addEventListener(Event.COMPLETE,completeHandler,false,0,true);
loader.addEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler,false,0,true);
}
private function completeHandler(e:Event):void {
parseCSS(e.target.data);
data=e.target.data
dispatchEvent(e);
destroy();
}
private function ioErrorHandler(e:Event):void {
dispatchEvent(e);
destroy();
}
private function destroy():void {
loader.removeEventListener(Event.COMPLETE,completeHandler);
loader.removeEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);
loader=null;
}
}
}


// ------------------------------------------------
// CSSTextArea
// ------------------------------------------------
// Extends the TextArea to handle StyleSheets
package {
import fl.controls.TextArea;
import flash.text.StyleSheet;
public class CSSTextArea extends TextArea {
public function CSSTextArea() {
super();
}
// When adding text to the textarea the class tries to add default
// TextFormat to the textfield. Since TextFormat conflicts
// with StyleSheets adding styles will cause an error.
// To add a bypass we add a StyleSheet check in the drawTextFormat
// function - skipping the default TextFormat.
override protected function drawTextFormat():void {
if (!textField.styleSheet) {
super.drawTextFormat();
} else {
setEmbedFont();
if (_html) {
textField.htmlText = _savedHTML;
}
}
}
// Pass styleSheet to textField
public function set styleSheet(css:StyleSheet):void {
textField.styleSheet=css;
}
}
}


/* ------------------------------------------------
CSS File: CSSTextArea.css
------------------------------------------------ */
.header{
font-family:Verdana;
font-size:24px;
font-weight:bold;
color:#ff6600;
display:block;
}
p{
font-family:Verdana;
font-size:12px;
font-weight:bold;
color:#cfcfcf;
display:block;
leading:14px;

}
a{
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#b80000;
}
a:hover{
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#ff0000;
}




Best, Jakob E

plz help me

how can i apply external css style sheet to component text area

Shut up, Acomplia...

Anyways im having the same issue adreb(above) is having. While i did not use this tutorial verbatim, everything i have matches up logically, its returning no errors, BUT IT WON'T FORMAT THE TEXT!

I am successfully importing both CSS and HTML files. (i know CSS is being imported by using trace)

What could cause Flash to ignore CSS??

Acomplia represents one of the latest and indeed a most novel method for controlling body weight. Acomplia operates by being a cannabinoid receptor antagonist. This means that Acomplia prevents the normal action of endogenous cannabinoid in the brain from stimulating the so-called CB1 receptors. It would appear that these receptors stimulate appetite and therefore when they are "subdued" so is the need to eat.

To yav:

the order is wrong:
a:link {}
a:visited {}
a:hover {}

'hover' should always be defined last ...
stupid ... I know ... but it should work

solution for using textArea.textField with css bug see http://www.sharedknowhow.com/2008/07/fixed-flash-textarea-css-incompatibility/

Working on menu buttons that control the External Text with AS3. I have everything working with the main menu button, but when trying to get buttons with in a page to control the External Text i get an error and the site wont run.

code for my a button that work in the main stage.

home_btn.addEventListener(MouseEvent.CLICK,b1Listener);

function b1Listener(event:MouseEvent):void {
loadFile("external.txt");
sections.gotoAndStop("home");
}

Ok but now say you are on the artist page and want to display infomation on each artist once that artist is clicked. the button is not on the main stage its main stage then sections. this is the code i tried.

sections.skinner_btn.addEventListener(MouseEvent.CLICK,b8Listener);

function b8Listener(event:MouseEvent):void {
loadFile("skinnerl.txt");
sections.gotoAndStop("skinner");
}

Whats wrong?

I've noticed an issue when using class in the CSS and then trying to style the hover, link and rollover effects of that class. Flash seems to hate that and none of the text is styled in the text field.

.className
{

}

.className a:hover
{

}

.className a:link
{

}

.className a:visited
{

}

when importing into Flash it just ignores the entire style.

I've also been using this nice little class that I wrote to handle my CSS loading:

package com.barkley
{
import flash.text.*
import flash.events.*
import flash.net.*

public class cssStyle
{
public var urlLoader:URLLoader
private var css:StyleSheet
private var callback:Function

public function cssStyle(path:String, _callback:Function)
{
callback = _callback

urlLoader = new URLLoader()
urlLoader.addEventListener(Event.COMPLETE, cHandler)
urlLoader.load(new URLRequest(path))
}

private function cHandler(e:Event):void
{
css = new StyleSheet()
css.parseCSS(urlLoader.data)

callback()
}

public function getCSS():StyleSheet
{
return this.css
}
}
}

All works fine as long as I'm not using custom link styles in the CSS Class.

Hey guys, for line-height, try leading. (default is 2)

leading:0;

Hey George,

I don't think flash supports the line-height as it is not in the supported CSS list above. If is is there it will be lineHeight. Although not all hope is lost there are some great kits like flash wrapper and FlashML that convert HTML to flash and they have methods in there to get around some css that is not supported in flash (since flash css and html support is pretty ancient).

Dont suppose you know anything about implementing Line-height? Its supported within the TextFormat class (leading) so its possible within AS3 but the CSS property (line-height) is not supported when using an external style sheet.

Ive found a few hacks around for AS2 but nothing on AS3 and wouldnt know where to start on migrating them.
Any insight Id love to know,

great site btw
g

thanxs i'll have a look at that

HumbleOne. The only way flash can save locally is by using an SWF2EXE like MDM zinc or Adobe AIR. Flash by itself cannot write to the file system for security reasons. But AIR sounds like a perfect candidate for you. It is meant for desktop flash and has access to system info and files.

thank you in advance

I appreciate the information but is it possible that you could further clarify the consept of server script or show me an example?Because the software i have to create is a selfcontain application which is suppost to be installed in the user's machine, played and store results and user name with any internet connection.

I am sorry for any incovinience is just that i've made so many attempts and now i am running out of time.

please if methods u describe abouve doesn't require interenet connection in order to work then please illustrate it to me

Hey Humble,

Here there are lots of ways. You will need external server script to help you save it to the file system (flash can't do that by itself due to security).

You could:
- simple post it to a php or asp.net file that would then save the post variable to the file
- use a service (web service or json service) to catch the remoting call and save it to disk
- use a service to do a partial update (so you can stream the file and not kill the entire app when the file is writing)

You can accomplish the first items with a URL loader with params.

The second way you will need to have some service knowledge to pull off with NetConnection, PendingResult etc.

ok so what i want to be able to do is load some xml data into flash, then be able to change it around in flash and then save the data over the original xml file.. (pretty much just a simple flash cms, using an xml file instead of a database)

now i know actionscript very well, however thats about it.. don't really know any other languages, like php, asp, etc etc..

im guessing the easiest way to do this is to import the xml data, change it, place it within a variable, and then have some kind of script overwrite the oringal xml file with the variable.

anyone able to help me out?

robert you are almost there. You just need to now have a Stylesheet object that you can load from a css file or use flash to create (flash internally uses names without the "-" in them.

Where loader.data is from the css file.

var req:URLRequest = new URLRequest("example.css");
loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onCSSFileLoaded); loader.load(req);

public function onCSSFileLoaded(event:Event):void
{
var sheet:StyleSheet = new StyleSheet();
sheet.parseCSS(loader.data);
field.styleSheet = sheet;
field.htmlText = exampleText;
}

Be sure your htmlText data has the HTML tags in it like etc. Also one thing about flash HTML is it only supports limited tags. See above for all the styles it supports.

You can also look at wrapper or flashml to look at HTML to flash conversion which can handle more like divs and tables etc.

ok so i have this code(below) and i want to style the text, as in change the font, textcolor, size, etc. I dont know what i am doing and i am sooo frustrated, please help. cs3 as3

var eMain_txt:TextField = new TextField();
var eMainReq:URLRequest = new URLRequest("text/eMain.txt");
var eMainLoad:URLLoader = new URLLoader();
var eCap_txt:TextField = new TextField();
var eCapReq:URLRequest = new URLRequest("text/eCap.txt");
var eCapLoad:URLLoader = new URLLoader();

eCapLoad.load(eCapReq);
eMainLoad.load(eMainReq);

eMainLoad.addEventListener(Event.COMPLETE, eMainReady);
eCapLoad.addEventListener(Event.COMPLETE, eCapReady);
up_btn.addEventListener(MouseEvent.CLICK, scrollUp);
down_btn.addEventListener(MouseEvent.CLICK, scrollDown);

eMain_txt.x = 245;
eMain_txt.y = 80;
eMain_txt.border = false;
eMain_txt.width = 174.9;
eMain_txt.height = 620;
eMain_txt.wordWrap = true;
eCap_txt.x = 36;
eCap_txt.y = 223.3;
eCap_txt.border = false;
eCap_txt.width = 186;
eCap_txt.height = 109;
eCap_txt.wordWrap = true;

addChild(eCap_txt);
addChild(eMain_txt);

function eMainReady(event:Event):void
{
eMain_txt.htmlText = event.target.data;
}
function eCapReady(event:Event):void
{
eCap_txt.text = event.target.data;
}
function scrollUp(event:MouseEvent):void
{
eMain_txt.scrollV --;
}
function scrollDown(event:MouseEvent):void
{
eMain_txt.scrollV ++;
}

Hi, i've tried this example (exactly like it is) and it gives me no errors but the textfield doesn't get formated! Anyone has any idea why this could hapen??

thanks

I would like to know how to write to a file in actionscript.could someone illustrate that to me

Hey Thomas,

You need to set the text property of htmlText and then also when you have the styles object set it to the styles formatter.

field.styleSheet = sheet;
field.htmlText = exampleText;

Or for your specific samples

external_txt.styleSheet = styles;
external_txt.htmlText = event.target.data;

i see to be having an issue using this code to format external text loads. is there an alternative code i need when trying to format external text? thanks.

var external_txt:TextField = new TextField();
var externalReq:URLRequest = new URLRequest("aboutus.txt");
var externalLoad: URLLoader = new URLLoader();

externalLoad.load(externalReq);

externalLoad.addEventListener(Event.COMPLETE, textReady);
{
external_txt.text = event.target.data;
}

external_txt.x = 104;
external_txt.y = 140;
external_txt.width = 522;
external_txt.height = 272;

addChild(external_txt);

var styles:TextField.styleSheet= new TextField.styleSheet();
styles.onLoad = function(success:Boolean):void {
if (success) {

trace(this.getStyleNames());
} else {
trace("Error loading CSS file.");
}
};
styles.load("styles.css");

I'm looking at the as3 example starting on line 16. Will this cause an "Error 1095: The string literal must be terminated before the line break."?

Also, do you need to escape the quotes around "bluetext" in line 21 or does as3 somehow figure that all out?

Hey Jason,

Are you immediately setting it or doing it in the onload of the css file in flash? If you set it without waiting for it to load it will not whos.

Also, setStyle is an older AS1 method. The above samples are as2 and for AS3 especially where you have StyleSheet classes that you set to the .styleSheet properties.

Then you just use html tags like to set styles to in the TextAreas.

# public function onCSSFileLoaded(event:Event):void
# {
# var sheet:StyleSheet = new StyleSheet();
# sheet.parseCSS(loader.data);
# field.styleSheet = sheet;
# field.htmlText = exampleText;
# }

How does this work with TextArea? I tried using setStyle("textFormat", myFomat) but I'm not getting anything.

RaQ: Void needs to be lowercased in AS3... Use "void" instead.

I'm receving an error when i compile the file ...

1046: Type was not found or was not a compile-time constant: Void.

What can i do ?

Hey felisan. You are on the right track all you have to do now is set htmlText of your textbox to include spans or classes from your stylesheet. i.e.

var label:TextField = new TextField();
label.styleSheet = style;
label.htmlText = “Hello World…”;

nice blog.
looking forward to read more!

and sorry, but actionscript 3.0 is really hard to understand, I think.
so here's my rookiequestion.

I've added this code to my file:

var styles:TextField.StyleSheet = new TextField.StyleSheet();
styles.onLoad = function(success:Boolean):Void {
if (success) {
// display style names.
trace("this is the styles name: "+this.getStyleNames());
} else {
trace("Error loading CSS file.");
}
};
styles.load("styles.css");
/*
content of styles.css:
//
body {
background-color: #cccccc;
width: 400px;
height: 300 px;
border: 1px solid #4b4b4b;
margin: 10px auto;
text-align: center;
}
//
h1 {
margin: 0;
font-family: verdana, arial, sans-serif;
color: #4c4c4c;
font-size: 14px;
font-weight: bold;
}
//
h2 {
color: #999999;
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
//
p {
font-family: verdana, arial, sans-serif;
color: #000000;
font-size: 11px;
}
//
p.Right {
text-align: right;
}
//
#content {
text-align: left;
background-color: #ffffff;
padding: 10px;
}
*/

how do I actionscript a textfield, that uses this .css-file?


thanks in advance
felisan