05 May 2009

Using CSS & Font Embeing in Flash CS3

I found many developers asking for implementing CSS and embed fonts in Flash but due to lack of good examples they just go into loop of forums and no results come up. 
Anyways here is a small example written in Actionscript 3.0 which will load an external CS, font file and apply CSS on a text field in Flash. So, here you go:-
  1. Create a Class file and name it CSSFormattingExample.as.
  2. Lets copy below code and paste it in "CSSFormattingExample.as".
    3. Code:
    package
{

     import flash.display.MovieClip;
     import flash.display.Sprite;
     import flash.events.Event;
     import flash.net.URLLoader;
     import flash.net.URLRequest;
     import flash.text.StyleSheet;
     import flash.text.TextField;
     import flash.text.TextFieldAutoSize;
    

         public class CSSFormattingExample extends MovieClip
     {
              private var fontLoader:URLLoader;
          private var loader:URLLoader;
          private var field:TextField;
          private var exampleText:String = "<h1>This is a headline</h1>" + "<p>This is a line of text.</p> <span class=\"bluetext\">" + "This line of text is colored blue.</span>";


    

              public function CSSFormattingExample():void
          {
    
               fontLoader = new URLLoader();
               fontLoader.addEventListener(Event.COMPLETE, onFontLoaded);
               fontLoader.load(new URLRequest("fonts.swf"));
              }
    

              public function onFontLoaded(event:Event):void
           {

    
               field = txtField;
               field.width = 300;
               field.autoSize = TextFieldAutoSize.LEFT;
               field.wordWrap = true;
               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;
          }
     }
}
  3. Create a new CSS file including below code and lets save it as "example.css"
    4. CSS File: 
    p {
     font-family: Arial Rounded MT Bold;
     font-size: 14; 
}  
h1 {
     font-family: Arial Rounded MT Bold;
     font-size: 30;
     font-weight: bold;
}  
.bluetext {
     color: #0000CC;  
font-size: 14; 
}
  4. Open a new FLA file and save it as "CSSFormattingExample.fla"
  5. Create a new movieclip name it "CSSFormattingExample".
  6. Select "Export for ActionScript" checkbox from movie clip properties panel.
  7. In Class textbox write class name as "CSSFormattingExample".
  8. Create a new text field in "CSSFormattingExample" movieclip and write instance name of text field as "txtField".
  9. Now create another new FLA file and save it as "fonts.fla".
  10. Create a new dynamic text field and select font as "Arial Rounded MT Bold".
  11. Click Embed button from Properties panel of text field and embed desired font outlines.
  12. Publish this file.
  13. Try publish your "CSSFormattingExample" FLA and you are done.
To get a copy of the above example please click here for source files.
Posted by Ankur Arora

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)