« Flash: Depth Control
Dynamic TextFields with system font »


Flash: Using CSS

April 29th, 2005 by Luis

Just a very basic sample of how to use CSS in flash

css file (sample.css):

PLAIN TEXT
CSS:
  1. p {
  2.   color: #000000;
  3.   font-family: arial,sans-serif;
  4.   font-size: 12px;
  5.   display: inline;
  6. }
  7.  
  8. a:link {
  9.   color: #6B8CC9;
  10.   text-decoration: none;
  11. }
  12.  
  13. a:hover{
  14.   color: #6B8CC9;
  15.   text-decoration: underline;
  16. }
  17.  
  18. .headline {
  19.   color: #000000;
  20.   font-family: arial,sans-serif;
  21.   font-size: 20px;
  22.   font-weight: bold;
  23.   display: block;
  24. }


Flash code:

PLAIN TEXT
Actionscript:
  1. var myCSS = new TextField.StyleSheet();
  2. var cssURL = "sample.css";
  3.  
  4. myText = "<p class='headline'>Lorem ipsum</p>";
  5. myText += "<a href='http://www.lipsum.com/'>Lorem ipsum</a>";
  6. myText += " dolor sit amet, consectetuer adipiscing elit.";
  7. myText += "Cras molestie tempor odio. Cras facilisis.";
  8. myText += " Vivamus est mi, fringilla nec...";
  9.  
  10. myCSS.load(cssURL);
  11. myCSS.onLoad = function(success) {
  12.     if (success) {
  13.         myTextField.styleSheet = myCSS;
  14.         myTextField.text = myText;
  15.     }
  16. };


Sample swf:

[flash]http://www.blog.lessrain.com/wp-content/upload/sample.swf,400,122[/flash]

This entry was posted on Friday, April 29th, 2005 at 11:20 am and is filed under General, Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Responses to “Flash: Using CSS”

  1. lessrain blog » Blog Archive » Flash: Extending CSS capability Says:
    June 13th, 2005 at 1:25 pm

    […] : Embed SWF Flash: Extending CSS capability Following up our post Flash: Using CSS I found out that Flash internally converts every CSS-class into a TextFormat Object. That’s w […]

  2. bhavana Says:
    December 6th, 2005 at 9:08 pm

    send me code.I am student

  3. Luis Says:
    December 7th, 2005 at 10:51 am

    The code is here already

  4. dawg Says:
    August 30th, 2006 at 3:17 am

    I tried this but it does not work in Flash MX 2004 :(

  5. Flash support for CSS at gradient dropshadow curve Says:
    September 30th, 2006 at 3:01 am

    […] extField.styleSheet = myCSS; myTextField.text = myText; } }; This info comes courtesy of: Lessrain Blog Actionscript.org Kirupa.com Update - 11/05/2006 Okay, here’s the code in action (with a f […]

Leave a Reply