 |
Metavurt
FlashDevil
Registered: Jun 2002
Local time: 11:04 PM
Location: Chicago. Always.
Posts: 377
|
| Using CSS to Style Text in Flash 8: A Tutorial | Post #1 |
Using CSS to Style Text in Flash 8: A Tutorial
If you’ve had the chance to work with Flash 8, one of the first things you’ve probably noticed is the change in rendering texts on the screen. Better than ever, working with text in Flash is no longer a chore in pixel checks, font size checks, scrolling hacks and the like. Yay!
These days, when working with text online, either in Flash or plain HTML, the use of CSS is more common. Part of this is due to modern browsers aligning (more or less) to current CSS standards. The people at Macromedia saw this coming, and included sparse support for CSS text styling in MX2004. Support in Flash 8 is better, but there are still some catches. In this tutorial I will address the things to watch out for, the best situations for CSS styling, and a walkthrough in creating a CSS stylesheet, a Flash file accessing the stylesheet and a plain HTML file accessing the same stylesheet, generating a look similar to the Flash layout. Fun!
Why do this?
You may wonder why I’m excited about this and what some of the benefits are to using CSS to style your text content. One of the main motivators for me is that, if needed, I can style both Flash content and plain HTML content using the same stylesheet. There’s no need for me to change things twice anymore. Also, due to more browsers respecting CSS standards, but some people still not upgrading or even using Flash players, you can provide a site in HTML/CSS that is nearly identical (though not animated) to your Flash site. This can also be a way to provide truly accessible pages to those with less than normal vision. And besides, it’s fun!
Flash Quirks
Flash supports some very basic HTML tags:
<p> - paragraph
<a> - anchor
<b> - bold
<i> - italic
<u> - underline
<img> - image
<font> - font
<span> - span
Flash only supports HTML-formatted text in a strict use of these tags. First, you must make sure you use LIFO (Last In, First Out) as a guide when more than one tag set define text styling and use. Second, for colors, you must use long form hex numbers. No names, and no short forms, so not #369, but #336699.
The one most annoying quirk Flash has in generating HTML-formatted text is that it does not natively render url links with the standard underline and medium blue (#000099) color. Any links you wish to be recognized by your users must be styled in order to appear different than the surrounding text.
Paragraph tags cannot be nested. So if you have text within a document that needs a different alignment than the surrounding text, it must be in a new paragraph.
Parameters of tags that accept them must be in single quotes. Not including them or using double quotes ends up in text not appearing or buggy behavior.
The good news in all of this is that Flash allows you to style each and every one of these tags with CSS. Yay!
Using CSS
One of the first reasons I wanted to use CSS in Flash was because of the annoying disrespect of the anchor tag. Until CSS support, one had to encapsulate any links within the following:
code:
<font color=’#000099’><u><a href=’url.html’ target=’_blank’>Link</a></u></font>
Being able to use CSS cuts out this long, tedious and time-consuming process!
First - let’s make our CSS stylesheet. This is an external document from your Flash file that Flash will access and apply to our text. For organizational and operational purposes, this document should end in .css. Name it “flash_style.css” and add the following:
code:
p {
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
}
.headline {
font-size: 14px;
font-weight: bold;
}
.bURL {
color: #000099;
text-decoration: underline;
}
.author {
text-align: right;
font-style: italic;
}
.errorMessage {
color: #CC0000;
font-weight: bold;
}
If you haven’t looked at CSS before, but you know HTML, this is not too daunting. I have defined one main parameter, and created four “classes” to style my text. What this stylesheet says is, first of all, for any paragraph tags that I use, within those tags, the font family will be Arial, Helvetica, or sans-serif, and be 12px in size.
Because the text will be a news segment, I made a class to style headlines and author names. The headlines are a little bigger than the regular sized text, and bold. The author’s names will appear right-aligned, and italicized.
In case of errors, I have a class to make any error text appear bold and red.
And, to bring me peace of mind, I made a class to be used on all url links in my text, that will cause the link to appear in the standard blue, underlined fashion. Woohoo! Save your file.
Now - create a new Flash document in the same directory as your CSS file, and make two layers named “Actions” and “Textbox”. (Gee what goes on these??) Select “Textbox” and on the stage create a dynamic text box with multiline and HTML set to true. Name it “news_txt”, and make sure it’s dynamic, multiline, and HTML text ready. Drop a UI scrollbar next to it and make sure it’s targeting the text box properly. Now for the good stuff.
I’m going to save you a lot of grief here with this one sentence.You must import and apply CSS styles to a text boxes before you apply text content to a text box. Remember this, and you’ll thank me later. Maybe. This is not specifically stated in any of the included Flash help documents, nor do I recall anyone ever underscoring this important tidbit. If you try to apply styles to text content after the text content already exists, you will not have styled text.
So. Our first function is to get the CSS stylesheet, parse it, and apply it to our text box. Select the first frame in your “Actions” layer and put the below in. This is straight out of the Flash help documents:
ActionScript:
function getNewsStyles() {
news_txt.text = "Getting news...";
// load stylesheet first, then get content (separate function)
var flash_css = new TextField.StyleSheet();
flash_css.onLoad = function(success:Boolean) {
if (success) {
news_txt.styleSheet = flash_css;
getNewsContent();
} else {
news_txt.htmlText = "Could not load CSS stylesheet.";
}
};
flash_css.load("news_styles.css");
};
|
The first line lets the user know something is happening. Depending on connection speeds, sometimes a user will see a blank text box for 1 - 3 seconds. Putting an informative message lets them know nothing is wrong (yet!  ). Next - we create a container, in the form of a StyleSheet object, that we will load the external styles into. Notice that StyleSheet has two capital “S”s! After that’s created, we set up a reactionary function that will apply the styles to the stylesheet of our text box when “flash_css” is loaded. If the styles do not load, we send an error message to the text box. You should only see this during testing, if at all. When the styles are loaded, we then call “getNewsContent()”, the function we will create to get the actual news. And finally, in the last line, we do the actual loading of the styles to get it all started.
Our secondary function is getNewsContent, as shown below:
ActionScript:
function getNewsContent() {
news_txt.htmlText = "<p class='loadingMessage'>Gathering news...</p>";
// stylesheet loaded and applied, get content
var news_lv:LoadVars = new LoadVars();
news_lv.onLoad = function(src:String):Void {
if (src != undefined) {
news_txt.scroll = 1;
news_txt.htmlText = news_lv.currData;
} else {
news_txt.htmlText = "<p class='errorMessage'>Unable to gather news.</p>";
}
//newsTxt_scroller._height = 350;
};
news_lv.load("news_test.txt");
}
|
The first line again gives the user a sense of ease. Or trepidation. It’s your news. We then create a container to hold variables, for future expansion of this news viewer. Next, we create a function to be triggered when the news loads. When it loads, it makes sure the source isn’t undefined (totally empty) and if not, resets the scrollbar and then applies the news content to the text box. If not, we generate an error message that can now be styled with the stylesheet. And then finally to get it all started we load the external news file.
Notice the line “news_txt.htmlText = news_lv.currData”. Our text file has one variable and that variable is all the content. In other words, your text file should begin with “&currData=” and then all the content. More on that later.
All of these files are in the same directory and will run on your local machine. However, the real news viewer that I built for a client of mine does indeed build a column of links to archived news. Instead of being filled with content from a local flat text file, all the news is contained within a database and Flash loads via a PHP page. I can add this information later if people also wish to see how that works!
At the end of all this of course, call “getNewsStyles” with:
ActionScript:
Save your work, and generate an SWF. You should see an “undefined” error. That’s ok, for now.
Now, create a plain text file, name it “news_test.txt” and fill it with content! Here’s a sample of what the content in my file looks like:
code:
&currData=<p class='headline'>No News Is Boring</p>
<p>Mauris posuere iaculis lectus. Maecenas fringilla viverra libero. Aenean adipiscing massa non orci.
Etiam quis lacus sed pede porttitor dignissim.
Do you like <a href='http://www.flashdevils.com' target='_blank' class='bURL'>Flash Devils?</a>
Nullam malesuada leo et turpis tincidunt eleifend.
Proin non eros et mauris suscipit fringilla.
In hac habitasse platea dictumst. Maecenas varius.
Duis ipsum nibh, varius a, aliquet nec, ornare ac, diam. Nam sollicitudin bibendum elit.
Sed pellentesque tincidunt mi.</p>
<p class='author'>posted by - Meta Vurt - 1.22.2006</p><br />
So, as mentioned before, the file contains one variable, “currData”. Flash likes things after an ampersand, hence “&currData=” and then the content. In order to have your text styled though, you must USE your styles! I know, smart, huh?
You can either use <p> or <span> to style text. I tend to stick with using the paragraph tag because then a break in content is automatic. When styling something like a link though, you just place “class=’bURL’ inside the anchor tag. That simple. All class names must be encapsulated between single quotes. If you use double quotes, Flash won’t like it.
ABOUT ANCHOR TAG STYLES - Just revisited this topic and have discovered that, at least at this point in time, Flash does not recognize different 'states' of the anchor tag. In other words, using the hover and visited state definers in the CSS won't break in Flash, but won't be recognized either. Your links will always appear the same, whether hovering, clicking, or viewing past visited links.
So that's it. You should have three separate files: a Flash file, a stylesheet, and a plain text file with content. They should all be in the same directory, while you learn this. When using this setup, the only rule Flash has is that you don't use "cross domain" content, unless you explicity give it permission to do so.
To see a live example of what I just discussed, you can go here: DPR News Viewer
Please do not abuse the above link!
If you have trouble, or questions, or comments - just let me know here and I’ll get back to you as soon as I can.
-+vurt
__________________
I Will Bend You Into A Spoon
Last edited by Metavurt on 10-19-2006 at 07:30 PM
Report this post to a moderator | IP: Logged
|
01-23-2006 08:23 AM |
|
|
| |
|
ShapeShifter
<- [Staff Member] -> this.brainCells++;
Registered: Apr 2005
Local time: 06:04 AM
Location: Sweden
Posts: 2344
|
I think that crucial red line should say "applying text" since you can import and store it at any time.. but you must apply it to the TextField after the StyleSheet has been applied
awesome tute, Metavurt! this deservs a place on FD tute-section! Where's Dutch when you need him? 
I'm actually working on a news-archive myself.. mysql, Services and stuff.. I'm kinda stuck on the admin-section where I need to add the bb-kinda tags so that admins can style their news as they want, but I'll make a break-thru as soon as I shake off my lazyness 
cheers!
*bowing for the author*
__________________
>[ Rate Me 5! ]< >[ Rate Me 4! ]< >[ Rate Me 3! ]<
One who makes no mistakes never makes anything.
Report this post to a moderator | IP: Logged
|
|
01-23-2006 05:23 PM |
|
|
| |
|
Metavurt
FlashDevil
Registered: Jun 2002
Local time: 11:04 PM
Location: Chicago. Always.
Posts: 377
|
Thanks Shapeshifter!
I changed the wording of that one line, is that what you mean? Yeah I looked up all the classes this weekend at my local Barnes & Noble (I love public libraries... ha ha!) using Macromedia's AS2.0 Reference Dictionary and realized not only can Flash save text for forever (kinda knew that intuitively) but it will also save any style objects until you implicitly delete them. Wack.
Yeah - I understand your pain on the backend thing. I've been working on my own CMS, all in Flash, and getting the segment to work that allows my clients to style text using existing styles is um... tedious. G'luck!
-+vurt
__________________
I Will Bend You Into A Spoon
Report this post to a moderator | IP: Logged
|
|
01-23-2006 05:29 PM |
|
|
| |
|
| |
|
Red
Computer Monitor (Staff Member)
Registered: Mar 2002
Local time: 09:04 PM
Location: Oakland, CA
Posts: 414
|
Wow, great tutorial, metavurt. Very helpful. Now my mind's buzzing with ideas. Thanks.
Red
Report this post to a moderator | IP: Logged
|
|
01-23-2006 06:22 PM |
|
|
| |
|
Mudasty
Little Devil
Registered: Jul 2006
Local time: 05:04 AM
Location:
Posts: 1
|
hello everyone.. can anyone help me with this..
i get this msg when i run script:
Scene=Scene 1, Layer=Actions, Frame=1: Line 20: '{' expected
news_lv.onLoad = function(src:String) :Void {
Scene=Scene 1, Layer=Actions, Frame=1: Line 30: Unexpected '}' encountered
};
can anyone help me .. i will gratfull
Report this post to a moderator | IP: Logged
|
|
07-03-2006 08:36 AM |
|
|
| |
|
ShapeShifter
<- [Staff Member] -> this.brainCells++;
Registered: Apr 2005
Local time: 06:04 AM
Location: Sweden
Posts: 2344
|
ehm... parse your code please.. we can't answer your question without looking at the code you try to compile
__________________
>[ Rate Me 5! ]< >[ Rate Me 4! ]< >[ Rate Me 3! ]<
One who makes no mistakes never makes anything.
Report this post to a moderator | IP: Logged
|
|
07-03-2006 08:05 PM |
|
|
| |
|
scraf
Little Devil
Registered: Jul 2006
Local time: 05:04 AM
Location:
Posts: 2
|
Thanks Metavurt, that worked a treat after trying out many other methods posted on the web to get an external style sheet to work.
/// edit problem solved I had added a closing <html> tag to the content ( out of habit or something )
Although I have a little problem...
quote:
One of the main motivators for me is that, if needed, I can style both Flash content and plain HTML content using the same stylesheet.
.... what to do if the stylesheet has for example
code:
html{
font-family:Arial,Helvetica,sans-serif;
}
.. and then the rest of the tags inherit that attribute.
( I have tried adding a <html> tag to the content )
Last edited by scraf on 07-05-2006 at 08:16 AM
Report this post to a moderator | IP: Logged
|
|
07-05-2006 08:11 AM |
|
|
| |
|
| |
|
scraf
Little Devil
Registered: Jul 2006
Local time: 05:04 AM
Location:
Posts: 2
|
quote:
Originally posted by XemonerdX
CSS that Flash doesn't understand does not get used, so it's not like you can just throw any stylesheet at it and expect things to look the same in Flash as it does in HTML. But if you know upfront you want to offer the content both in HTML & Flash you can create your stylesheet with this in mind.
Valid point.
However I did get the css to cascade by adding the <html> tag to the content.
What I am trying to acheive is put a flash front end on a cms which using css for cross browser layout, I would rather adapt the flash to listen to the css as much as possible than require that the css file need tweaking.
Report this post to a moderator | IP: Logged
|
|
07-05-2006 08:51 AM |
|
|
| |
|
LuiePL
Little Devil
Registered: Jul 2006
Local time: 12:04 AM
Location: Montgomery County, PA
Posts: 15
|
I can't quite get it to work for my application. I don't get any errors about not loading the style sheet, but the text doesn't accept the styling. I created a new field and named it "Links".
I threw up the page here so you guys can take a look.
I commented out the "Getting..." lines because it loops and I dont want my viewers to see it over and over again.
code:
_root.onLoad = getPageStyle()
function getPageStyle() {
//Links.text = "Getting Links...";
// load stylesheet first, then get content (separate function)
var flash_css = new TextField.StyleSheet();
flash_css.onLoad = function(success:Boolean) {
if (success) {
Links.styleSheet = flash_css;
getLinks();
} else {
Links.htmlText = "Could not load CSS stylesheet.";
}
};
flash_css.load("Style.css");
}
function getLinks() {
//TopLine.htmlText = BottomLine.htmlText = "<p class='loadingMessage'>Gathering news...</p>";
// stylesheet loaded and applied, get content
var links_lv:LoadVars = new LoadVars();
links_lv.onLoad = function(src:String):Void {
if (src != undefined) {
Links.htmlText = links_lv.currData;
} else {
Links.htmlText = "<p class='errorMessage'>Unable to gather news.</p>";
}
};
links_lv.load("Links.txt");
}
EDIT: This is my CSS page:
code:
BODY {
FONT-FAMILY: "Times New Roman", Arial;
COLOR: #FFFFFF;
BACKGROUND-COLOR: #000000;
}
A:LINK, A:VISITED, A:HOVER, A:ACTIVE {
COLOR: #ffcc00;
TEXT-DECORATION: underline;
}
P {
FONT-WEIGHT: BOLD;
TEXT-DECORATION: underline;
COLOR: #ffcc00;
}
.RED {
FONT-WEIGHT: BOLD;
COLOR: #ff0000;
}
.YELLOW {
FONT-WEIGHT: BOLD;
COLOR: #ffcc00;
}
.errorMessage {
COLOR: #CC0000;
FONT-WEIGHT: bold;
}
Last edited by LuiePL on 08-01-2006 at 05:55 AM
Report this post to a moderator | IP: Logged
|
|
07-31-2006 09:22 PM |
|
|
| |
|
davidesieb
Little Devil
Registered: Jul 2005
Local time: 06:04 AM
Location:
Posts: 6
|
Hi there! Thanks for this excellent tutorial; good thing we can use CSS within Flash.
Just a question though; I can't make it work; I have a dynamic flash site, when the site loads, I load several different external contents, among them the css file (the result is "success"). Later, depending on the section where we are, I load content from a DB, and dynamically create the textFields (linkage from the library) to put it in, and a that moment I set the styleSheet to the textField (which is, I confirm, set to "HTML"). But it doesn't work... (the style's not applied, the link is the same style and color as the rest of the text (I only tried with links so far)...huh? Won't it work when set dynamically on a also dynamically created (attached) textField? Any idea? Thanks for your help...
Here's my code for creating the textField and setting the style:
ActionScript:
var vElementCreated = mcContentContainer.attachMovie(vTag, "element_"+i, 20+i);
if (i == 1) {
vElementCreated._y = 0;
} else {
vElementCreated._y = mcContentContainer["element_"+(i-1)]._y+mcContentContainer["element_"+(i-1)]._height+10;
}
vElementCreated._x = Field_vTitle._x;
vElementCreated.etiquetteField.styleSheet = _root.albedisCSS;
vElementCreated.etiquette = eval("_root.cont.vContent"+i);
etc...
|
Report this post to a moderator | IP: Logged
|
|
08-07-2006 07:52 PM |
|
|
| |
|
XemonerdX
veganXcodeXwarrior (StaffMember)
Registered: Apr 2002
Local time: 05:04 AM
Location: The Netherlands
Posts: 4818
|
quote:
vElementCreated.etiquetteField.styleSheet = _root.albedisCSS;
vElementCreated.etiquette = eval("_root.cont.vContent"+i);
Yer using 'etiquetteField' and 'etiquette'? Shouldn't the second line be:
ActionScript:
vElementCreated.etiquetteField.htmlText = eval("_root.cont.vContent"+i);
|
Or even better (eval isn't really used anymore):
ActionScript:
vElementCreated.etiquetteField.htmlText = _root.cont["vContent"+i];
|
__________________
.:: PoeticTerror.Com ::.
.:: FlashDevils ::.
.:: FlashFocus ::.
.:: GalaxyGoo ::.
.:: OrganicFlash ::.
Report this post to a moderator | IP: Logged
|
|
08-08-2006 08:15 AM |
|
|
| |
|
davidesieb
Little Devil
Registered: Jul 2005
Local time: 06:04 AM
Location:
Posts: 6
|
Thanks XemonerdX, I know I shouldn't mix "oldies" of codes with newer ones; I won't use the eval() again, I promise! ; )
When I replaced the setting of the variable with the line of code you suggested; the .htmlText, I was surprised at first not to see the text anymore, and, as I found out a little later, that's because the text field (the one I attach from the library) musn't be set to "html" in the flash app from the start, but only later (.html = true), strange!?
But, despite all of this, my css styles are still not applied, can't understand why...
When I trace the htmlText, I find (I suppose it's normal) that the CSS references are gone; for example, the trace of a link shows:
<A HREF="http://www.mylink.com" TARGET="_blank">mylink.com</A>
and in my DB it's <A HREF='http://www.mylink.com' TARGET='_blank' class='bURL'>mylink.com</A>
Is there a way of checking that the CSS is correctly loaded? (more than just the "success" in the loadVars function?)
Since I'm very new to CSS, does my code need to be different than the example Metavurt gives? (I simply copied&pasted the code in a text file and saved it with the .css extension...)
Thanks for your help! ; )
Report this post to a moderator | IP: Logged
|
|
08-08-2006 01:51 PM |
|
|
| |
|
| |
|
davidesieb
Little Devil
Registered: Jul 2005
Local time: 06:04 AM
Location:
Posts: 6
|
Ok, thanks a lot:
here's my code to load the css (situated on the root of the swf):
ActionScript:
function fLoadCSSFile() {
var albedisCSS = new TextField.StyleSheet();
albedisCSS.onLoad = function(success:Boolean) {
if (success) {
trace("CSS loaded");
} else {
trace("CSS not loaded!");
}
};
albedisCSS.load("albedis_styles.css");
}
|
and here's my code to load the content in the text fields
ActionScript:
function fPlaceContent(vNbPages, vStartPosY) {
this.createClassObject(mx.containers.ScrollPane, "mcScrollPane"+vCurrentPage, 10+vCurrentPage);
this["mcScrollPane"+vCurrentPage]._y = vStartPosY;
this["mcScrollPane"+vCurrentPage]._x = 2;
this["mcScrollPane"+vCurrentPage].setSize(430, mcBkgnd._height-vStartPosY-25);
this["mcScrollPane"+vCurrentPage].contentPath = "contentContainer";
this["mcScrollPane"+vCurrentPage].hScrollPolicy = "off";
this["mcScrollPane"+vCurrentPage].setStyle("borderStyle", "none");
mcContentContainer = this["mcScrollPane"+vCurrentPage].spContentHolder;
//
mcContentContainer._y = vStartPosY;
if (vNbPages != undefined) {
for (i=1; i<=vNbPages; i++) {
var vTag = eval("_root.cont.vTag"+i);
var vElementCreated = mcContentContainer.attachMovie(vTag, "element_"+i, 20+i);
if (i == 1) {
vElementCreated._y = 0;
} else {
vElementCreated._y = mcContentContainer["element_"+(i-1)]._y+mcContentContainer["element_"+(i-1)]._height+10;
}
vElementCreated._x = Field_vTitle._x;
vElementCreated.etiquetteField.html = true;
vElementCreated.etiquetteField.styleSheet = _root.albedisCSS;
vElementCreated.etiquetteField.autoSize = true;
vElementCreated.etiquetteField._width = (mcScrollPane._width-vElementCreated._x)-60;
vElementCreated.etiquetteField.htmlText = _root.cont["vContent"+i];
}
this["mcScrollPane"+vCurrentPage].redraw(true);
_global.fApplyColor(targetPath(this["mcBtnSousNav_"+vCurrentRubrique+"_"+vActualBtn].etiquetteField), "vColorBleuHighLite");
} else {
trace("error!");
}
}
|
Tks in advance!
Report this post to a moderator | IP: Logged
|
|
08-08-2006 03:59 PM |
|
|
| |
|
| |
|
davidesieb
Little Devil
Registered: Jul 2005
Local time: 06:04 AM
Location:
Posts: 6
|
yep, the CSS is one of the first things I load, and tracing says "CSS Loaded"...
Report this post to a moderator | IP: Logged
|
|
08-08-2006 04:43 PM |
|
|
| |
|
XemonerdX
veganXcodeXwarrior (StaffMember)
Registered: Apr 2002
Local time: 05:04 AM
Location: The Netherlands
Posts: 4818
|
Okay, didn't notice it the first time, but yer declaring 'albedisCSS' as a local variable inside 'fLoadCSSFile', so once that function finishes (after the stylesheet has loaded in), 'albedisCSS' doesn't exists anymore. So declare it outside the function, and then you can load the stylesheet in inside the function. Or don't use 'var' in front of it (which makes it a local variable inside a function). Also, use lowercase CSS-properties, so text-decoration instead of TEXT-DECORATION, just tried some small stuff and it didn't work when using uppercase.
__________________
.:: PoeticTerror.Com ::.
.:: FlashDevils ::.
.:: FlashFocus ::.
.:: GalaxyGoo ::.
.:: OrganicFlash ::.
Report this post to a moderator | IP: Logged
|
|
08-09-2006 08:38 AM |
|
|
| |
|
davidesieb
Little Devil
Registered: Jul 2005
Local time: 06:04 AM
Location:
Posts: 6
|
Gosh!
Tks a lot!
It should have been so obvious to me! What the... 
No need to say that it perfectly works now...
Thanks again!
Report this post to a moderator | IP: Logged
|
|
08-09-2006 09:55 AM |
|
|
| |
|
bobalouie82
Little Devil
Registered: Nov 2006
Local time: 05:04 AM
Location: NYC
Posts: 1
|
Actually found out...
You can apply styles to a textbox after setting the text, but only after you set a textFormat with an embedded font.
I found this out in endless testing while trying to find out how I could apply css to a text box while still using my embedded font.
Here is my sample code, it worked with a couple quirks, try it, and let me know what you think!!!
Orbitz is a bitmap font that I absolutely love.
Actually, this method was the only method I found that worked with using CSS with embedded fonts.
See below:
ActionScript:
var boxText:TextField = this.createTextField("boxText", 2, 0, 0, 200, 0);
var styles = new TextField.StyleSheet();
styles.load("styles.css");
styles.onLoad = function(success) {
if (success) {
boxText.embedFonts = true;
boxText.html = true;
boxText.wordWrap = true;
boxText.autoSize = true;
boxText.htmlText = "<p >some html formatted text</p>";
boxTextFormat = new TextFormat();
boxTextFormat.size = 10;
boxTextFormat.font = "Orbitz";
boxText.setTextFormat(boxTextFormat);
boxText.styleSheet = styles;
}
|
__________________
Hmmm...
Last edited by bobalouie82 on 11-03-2006 at 05:54 AM
Report this post to a moderator | IP: Logged
|
|
11-03-2006 05:47 AM |
|
|
| |
|
Metavurt
FlashDevil
Registered: Jun 2002
Local time: 11:04 PM
Location: Chicago. Always.
Posts: 377
|
thanks bobalouie82!
i dont even wish to speculate how many times you hit "publish" before figuring that out!
nice job! :-)
i'll place a note of this post in the main/first post later today...
-+vurt
__________________
I Will Bend You Into A Spoon
Report this post to a moderator | IP: Logged
|
|
11-03-2006 12:36 PM |
|
|
| |
|
selliott
Little Devil
Registered: Jun 2007
Local time: 05:04 AM
Location:
Posts: 2
|
I am having issues with my CSS / Flash setup (A.S. 2.0) and was wondering if you guys might see where my problem is. I'm getting an extra line inserted after every line that uses the stylesheet to adjust the text. Here's my test code:
Actionscript:
ActionScript:
this.createTextField("bodytxt", 0, 50, 30, 430, 200);
bodytxt.html = true;
bodytxt.border = true;
bodytxt.wordWrap = true;
bodytxt.multiline = true;
var format = new TextField.StyleSheet();
var path = "stylesheet.css";
var quick = "<p align='center'>TESTING CENTER<strong>TESTING BOLD</strong><u><font color='#ff0000'>TESTING RED UNDERLINE</font></u><em>TESTING ITALIC</em>Just regular text</p>";
format.load(path);
format.onLoad = function(loaded) {
if (loaded) {
trace("css loaded");
bodytxt.styleSheet = format;
bodytxt.htmlText = quick;
} else {
bodytxt.htmlText = "Error loading CSS file!";
}
};
|
And here's my StyleSheet:
code:
b, strong {font-weight: bold; color: #396780;}
i, em {font-style: italic;}
Report this post to a moderator | IP: Logged
|
|
06-23-2007 07:31 AM |
|
|
| |
|
| |
|
selliott
Little Devil
Registered: Jun 2007
Local time: 05:04 AM
Location:
Posts: 2
|
Oh, I guess I left out some details...oops. This particular example will move all the words to a new line, when the stylesheet is used on them...even though they should all remain on the same line, since there weren't any <br /> tags. This was just an example to show the line breaks occuring when they shouldn't. In the actual problem I was having, the WYSIWYG editor adds <br /> tags for line breaks, so it often results in two (since the error is also resulting in one). So if I had a word on one line with code like.
<strong>Title</strong>< br/>
It would have a blank line between that word (Title) and the next line, instead of going to the next line directly under it, because the strong tags would create the extra line when displayed in Flash.
Report this post to a moderator | IP: Logged
|
|
06-27-2007 07:37 AM |
|
|
| |
|
aiphes
Little Devil
Registered: Sep 2007
Local time: 06:04 AM
Location: marseille - france
Posts: 2
|
hi
i've try this code but he doesn't work:
function getNewsStyles() {
news_txt.text = "Attente des news...";
// chargement css, then get content (separate function)
var flash_css = new TextField.StyleSheet();
flash_css.onLoad = function(success:Boolean) {
if (success) {
news_txt.styleSheet = flash_css;
getNewsContent();
} else {
news_txt.htmlText = "CSS non chargé";
}
};
flash_css.load("http://www.chateaulaganne.com/style.css");
};
/*textes*/
function getNewsContent() {
news_txt.htmlText = "<p class='loadingMessage'>Récupération des news...</p>";
// stylesheet loaded and applied, get content
var news_lv:LoadVars = new LoadVars();
news_lv.onLoad = function(src:String):Void {
if (src != undefined) {
news_txt.scroll = 1;
news_txt.htmlText = news_lv.currData;
news_txt.embedFonts = true;
} else {
news_txt.htmlText = "<p class='errorMessage'>Ne peut pas charger les news.</p>";
}
//newsTxt_scroller._height = 350;
};
news_lv.load("http://www.chateaulaganne.com/texte_actu.txt");
}
getNewsStyles();
the adress : http://chateaulaganne.com/
thanks for your help
Report this post to a moderator | IP: Logged
|
|
09-19-2007 08:37 AM |
|
|
| |
|
kosmo
Little Devil
Registered: May 2008
Local time: 05:04 AM
Location:
Posts: 1
|
Selliot,
Did you ever get to solve your extra line problem? I'm having the same issue...
Someone help!
Report this post to a moderator | IP: Logged
|
|
05-09-2008 05:51 PM |
|
|
| |
|
jpmoran
Little Devil
Registered: Oct 2006
Local time: 05:04 AM
Location:
Posts: 20
|
Quick Question. I want to use this script for a pop-up help system for a flash app I am making. I am loading an external swf with the above code in it to load a style sheet and text file. what I want to be able to do is set a variable on the root of the main timeline via a button action so that when the help pop up opens it will show the text assigned to that variable. Right now the text file variable appears to be static. How would I go about making it dynamic.
Report this post to a moderator | IP: Logged
|
|
09-18-2008 05:54 AM |
|
|
| |
|
borrows123
Little Devil
Registered: May 2010
Local time: 05:04 AM
Location:
Posts: 1
|
I am still having problem with that...
What I should have to do now.....?
__________________
BORROWS
Report this post to a moderator | IP: Logged
|
|
05-29-2010 08:07 AM |
|
|
| |
|
| All times are GMT. The time now is 05:04 AM. |
 |
|
 |
|
|
| |
Forum Rules:
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is OFF
vB code is ON
Smilies are ON
[IMG] code is ON
|
|
|
|
|
< FlashDevils - Terms of use
>
Copyright, FlashDevils Community, 2002 -
Flash Archive
|
|
