5 Replies Latest reply on Jan 24, 2011 12:25 AM by MauriceMul

    Loading SWF with embedded fonts at runtime / set fontFamily for Spark RichText

    Marcel __ Level 1


      Hi everybody,

       

      I've got a problem with using embedded fonts for the Spark RichText Component.

       

      I am loading swf files at runtime that have got a font embedded. The swf itself registers the font by calling Font.registerFont(EmbeddedFontClassName).

       

      So each time the user choses a font from a list component the swf is loaded (if it hasn't been already) and the font gets registered. That work's fine.

       

      Setting the fontFamily style for a Spark Label to the name of the loaded font does work, the font changes. When trying it with a RichText it doesn't work. The standard font Arial won't change.

       

      Any help appreciated.

       

      Thank you, regards
      Marcel

        • 2. Re: Loading SWF with embedded fonts at runtime / set fontFamily for Spark RichText
          Marcel __ Level 1

          Hi,

           

          sorry for replying so late.

           

          I couldn't solve this problem yet. When trying it a week ago, the RichText was showing the text, but not in the desired font. The font stayed the standard Arial.

           

          Meanwhile I updated the Flex SDK from 4.0 to 4.1 and now the RichText doesn't show any text at all. The text information is still there, because when I switch back to Arial (in my font list component) it appears.

           

          Besides the RichText is changing its dimensions when switching the fonts and it seems to me that the dimensions are correct.

           

          When setting the fontFamily for the label it works.

           

          It also works fine when activating the desired fonts for my system.

           

          Thanks, regards

          Marcel

          • 4. Re: Loading SWF with embedded fonts at runtime / set fontFamily for Spark RichText
            Marcel __ Level 1

            Hi,

             

            this is what I do:

             

            I  have created several swf files with embedded fonts in the library. For  example:

             

            - font 'Comic Sans'
            - font exported for  ActionScript, class name 'ComicSans'
            - TLF
            - all characters  included

             

            In the first frame I register the font and I  create an instance of it:

             

            Font.registerFont(ComicSans);
            var  theFont:ComicSans = new ComicSans();

             


            In Flex I  load a XML file with some informations about the fonts. I use it to  populate an ArrayCollection that serves as a  dataProvider for a Spark List.

             

            <fonts>
            
                 <font id="0" fontName="Airplanes in the NightSky" className="AirplanesInTheNightSky">
                      <ttfurl>assets/fonts/selection/airplanesInTheNightSky.ttf</ttfurl>
                      <afmurl>assets/fonts/selection/airplanesInTheNightSky.afm</afmurl>
                      <swfurl>assets/fonts/swf/airplanesInTheNightSky.swf</swfurl>
                      <tooltipurl>assets/fonts/tooltips/airplanes.png</tooltipurl>
                      <styles>
                           <style name="">
                                <ttfurl />
                                <afmurl />
                           </style>
                      </styles>
                 </font>
                 
                 <font id="1" fontName="Comic Sans" className="ComicSans">
                      <ttfurl>assets/fonts/selection/comicSans.ttf</ttfurl>
                      <afmurl>assets/fonts/selection/comicSans.afm</afmurl>
                      <swfurl>assets/fonts/swf/comicSans.swf</swfurl>
                      <tooltipurl>assets/fonts/tooltips/comicSans.png</tooltipurl>
                      <styles>
                           <style name="">
                                <ttfurl />
                                <afmurl />
                           </style>
                      </styles>
                 </font>
            
                    ...
            
            </fonts>
            

             

             

            I have a  class called 'FontController' that handles everything concerning fonts.

             

            public class FontController extends EventDispatcher
                 {
                      
                      [Bindable]
                      public var fonts:ArrayCollection;
                      public var loadedFonts_arr:Array = [];
                      public var fontsServiceURL:String;
                      private var fontService:HTTPService;
                      
                      public function FontController() {
                      }
                      
                      public function requestFontsData():void {...}
                      
                      private function fontService_resultHandler(e:ResultEvent):void {...}
                      
                      // event handler for selection in list
                      public function updateFont(e:IndexChangeEvent):void {...}
                            
                      // load the external swf with the embedded font
                      public function loadFontSWF(pSelectedFont:Object):void {     
                           
                           var indx:Number = fonts.getItemIndex(pSelectedFont);
                           
                           var loader:Loader = new Loader();
                           var request:URLRequest = new URLRequest(pSelectedFont.swfurl);
                           loader.load(request);
                           loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event):void {onFontSWFLoaded(e, indx);});
                      }
                      
                      private function onFontSWFLoaded(e:Event, pIndex:Number):void {
                           
                           // get the instance created in the external swf
                           // I use it to update the fontName of the item in the ArrayCollection
                           var theFont:Object = e.target.content.theFont;
                                    
                           // set the correct font name
                           fonts[pIndex].fontName = theFont.fontName;
            
                           // for debugging
                           var registeredFonts_arr:Array = Font.enumerateFonts(false);
            
                           loadedFonts_arr.push(fonts[pIndex]);
                           
                           // dispatch custom event
                           var fe:FontEvent = new FontEvent(FontEvent.FONT_LOADED);
                           fe.params = fonts[pIndex];
                           dispatchEvent(fe);
                      }
                      
                      // this is the method where I apply the loaded font to custom components on the stage
                      public function applyFont(e:FontEvent = null, pFontInfo:Object = null, pTarget:Object = null):void {
            
                           // the item in the ArrayCollection
                           var fontInfo:Object;
                           if (e) {
                                fontInfo = e.params;
                           } else {
                                fontInfo = pFontInfo;
                           }
            
                           // the custom component, either StageText(= Spark Label) or StageList (= Spark RichText)
                           var target:Object;
                           if (pTarget) {
                                target = pTarget;
                           } else {
                                target = StaticVars.SELECTED_TRANSFORM_ITEM;
                           }
                           
                           if (target.targetObject.hasOwnProperty("textData")) {
                                var st:StageText = target.targetObject as StageText;
                                st.setStyle("fontFamily", String(fontInfo.fontName)); // works
                                st.textData.fontInfo = fontInfo;
                                
                           } else if (target.targetObject.hasOwnProperty("myListData")) {
                                var sl:StageList = target.targetObject as StageList;
                                sl.setStyle("fontFamily", String(fontInfo.fontName)); // doesn't work
                                sl.myListData.fontInfo = fontInfo;
                           }
                                
                           // TextController class listens
                           var fe:FontEvent = new FontEvent(FontEvent.FONT_APPLIED);
                           dispatchEvent(fe);
                           
                      }
            }
            

             

             

            Thank you, regards

            Marcel

            • 5. Re: Loading SWF with embedded fonts at runtime / set fontFamily for Spark RichText
              MauriceMul

              Hi Marcel,

               

              have you resolved this issue? I am curious because i am having trouble loading an swf at runtime. I keep getting SWF is not a loadable module, no matter how i create the swf.

               

              Thanx

              Maurice