I thought it was interesting that we could add some CSS to the content in our Flash movies. Although there aren’t a lot of styles that can be applied, the basic styles are applicable. Here is a little demo of adding styles to html tags and CSS classes.
Here is the document class:
package
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFieldType;
import flash.text.StyleSheet;
public class FlashCSS extends Sprite
{
private var css:StyleSheet;
private var body:Object;
private var headerOne:Object;
private var headerTwo:Object;
private var paragraph:Object;
private var myTextField:TextField;
public function FlashCSS()
{
var css:StyleSheet = new StyleSheet();
// create the styles
var body:Object = new Object();
body.fontFamily = "Arial";
var headerOne:Object = new Object();
headerOne.fontSize = 20;
headerOne.fontWeight = "bold";
headerOne.color = "#336699";
headerOne.leading = 12;
var headerTwo:Object = new Object();
headerTwo.fontSize = 16;
headerTwo.color = "#333333";
var paragraph:Object = new Object();
paragraph.color = "#000000";
// set the styles
css.setStyle("body", body);
css.setStyle(".headerOne", headerOne);
css.setStyle(".headerTwo", headerTwo);
css.setStyle(".paragraph", paragraph);
// generate the text field
var myTextField:TextField = new TextField();
myTextField.autoSize = TextFieldAutoSize.LEFT;
myTextField.multiline = true;
myTextField.width = stage.stageWidth;
myTextField.wordWrap = true;
// THIS IS IMPORTANT HERE TO CALL THE CSS BEFORE YOU PPO
myTextField.styleSheet = css;
myTextField.htmlText = "<body>";
myTextField.htmlText += "Welcome To My Site";
myTextField.htmlText += "Here Is My Subtitle
";
myTextField.htmlText += "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.
";
myTextField.htmlText += "Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.";
myTextField.htmlText += "</body>";
addChild(myTextField);
}
}
}
I can’t get it to work. I’ve done everything to the letter.
I don’t get any error’s, it simply won’t apply itself, so the text comes out unformatted.
This is what I have so far.
var css:StyleSheet = new StyleSheet();
var header:Object = new Object();
header.fontsize = 20;
header.fontweight = “bold”;
header.colour = “red”;
css.setStyle(”.header”, header);
var txtField:TextField = new TextField();
txtField.multiline = true;
txtField.wordWrap = true;
txtField.styleSheet = css;
txtField.x = 200;
txtField.htmlText = “”;
txtField.htmlText += i.getName();
txtField.htmlText += “”;
Please, please, please reply. I’ve tried many different ways of formatting the text, but none of them seem to stick. There must be something really basic I’m missing.
-c
Hello!
Great work!
I have a strange problem with a styled textField and a htmlText loaded from XML file. I get a comma sign in SWF after a word in span.
For example (in XML file): “After these words comma appearRest of the text.”
In pure AS3 (like in your example) everything is OK.
Could you help me with the problem above ?
Thanks very much
grrrr… Sorry, i don’t know how to add html code here :/
I’ll try again
…
For example (in XML file): “<span class=’headerOne’>After these words comma appear</span><span class=’headerTwo’>Rest of the text.</span>”
…
Thanks
Hey Paul, I am currently on vacation .. will be back on town on Thursday – if this issue isn’t resolved at that point feel free to post another comment here or email me as a reminder – can you post your files somewhere so it can be downloaded?
Thanks, Morgan
Hey, I’m having a very similar problem. I went about my a little bit differently. I’m loading an external HTML and CSS. Everything checks out fine and i’m not getting any errors, but it just will not format the text!
What can cause flash to ignore a stylesheet???
Thanks!!
Mike S
the htmlText stuff in flash is definitely weird for how cool it is to even be available at all…
this seems to work for me for the majority of implementations…
public function getTextField():TextField { //defaults
var oTextField:TextField = new TextField();
var sCSS:String=”p{display:block;align:left;font-family:Verdana;leading:6px;font-size:12px;color:#808080}”;
var oStyle:StyleSheet=new StyleSheet();
oStyle.parseCSS(sCSS);
oTextField.styleSheet = oStyle; //this.oStyleSheet;
oTextField.wordWrap = true;
oTextField.embedFonts = true; //make sure this font is embedded in a textfield on the stage (out of view) and it will work every time. be sure to embed every glyph necessary for your application – usually basic set punctuation and latin 1 extended and such…
return oTextField;
}
/*****************************************************/
hope it helps.
Hey, you have an error in your code: you wrap the SPAN contents with double quotes (”) and use the same types of quotes to refer to your CLASS attribute. One or the other needs to be single quotation, or the inner needs to have \”
how about embedded fonts? does it work the same?
I used this outside of a package and it works wonderfully.
I had been trying to use cssParse for three days before I came across you post here. I this way just makes the most sense.
Thank you thank you thank you!