7 Replies Latest reply on Aug 24, 2007 8:10 AM by brian914

    Dynamic text styling

    brian914 Level 1
      I am trying to style my text box with CSS in Flash. I have the following AS.

      stop();

      var thePath:MovieClip = this.scroller_all.scroller_slider;
      thePath.infoScroll.textbox.html = true;
      thePath.infoScroll.textbox.autoSize = true;
      thePath.infoScroll.textbox.condenseWhite = true;

      var cssStyles:TextField.StyleSheet = new TextField.StyleSheet();
      cssStyles.setStyle("h1", {fontWeight: "bold", color: "#000000"});

      thePath.infoScroll.textbox.styleSheet = cssStyles;

      //Text Scroller 01
      var lvInfo:LoadVars = new LoadVars();
      lvInfo.onData = function(sInfo:String):Void {
      thePath.infoScroll.textbox.htmlText = sInfo;
      }
      lvInfo.load("info.html");



      Why is this not working? The text loads, but does not get styled by the css.

      Thanks a lot!
        • 1. Re: Dynamic text styling
          NSurveyor Level 2
          Unfortunately, Flash supports a very few HTML tags that can be formatted with CSS. It includes: p, body, li, a, a:link, a:hover, a:active.
          http://livedocs.adobe.com/flash/8/main/00001453.html

          The only other way to format text would be to use <p class="CLASS">, and setStyle(".CLASS"... ,. or <span ...

          Here is one way to remedy, and that's to convert <h1> into <span class="h1"> and then you have to style .h1:

          var thePath:MovieClip = this.scroller_all.scroller_slider;
          thePath.infoScroll.textbox.html = true;
          thePath.infoScroll.textbox.autoSize = true;
          thePath.infoScroll.textbox.condenseWhite = true;

          var cssStyles:TextField.StyleSheet = new TextField.StyleSheet();
          cssStyles.setStyle(".h1", {fontWeight: "bold", color: "#000000"});
          thePath.infoScroll.textbox.styleSheet = cssStyles;

          //Text Scroller 01
          var lvInfo:LoadVars = new LoadVars();
          lvInfo.onData = function(sInfo:String):Void {
          thePath.infoScroll.textbox.htmlText = fixTag(sInfo,'h1');
          }
          lvInfo.load("info.html");

          function fixTag(str,tag){
          var s = str;
          s = s.split('<'+tag+'>').join('<span class="'+tag+'">');
          s = s.split('</'+tag+'>').join('</span>');
          return s;
          }

          • 2. Re: Dynamic text styling
            brian914 Level 1
            Thank you so much for the help.

            Could you explain the function at the bottom a little bit. Why do I have to do that?

            function fixTag(str,tag){
            var s = str;
            s = s.split('<'+tag+'>').join('<span class="'+tag+'">');
            s = s.split('</'+tag+'>').join('</span>');
            return s;
            }


            Thank you so much.
            • 3. Re: Dynamic text styling
              NSurveyor Level 2
              The idea is that it will find convert all instances of <h1> and replace it with <span class="h1"> and all instances of </h1> with </span>, because that will allow Flash to format it.

              Suppose our string is: "<h1>Hello haha</h1>interesting<h1>Hi!</h1>blah"

              Using split on a string, will break the string into an array segmented on what is given, in this case <h1>. Thus, s.split("<h1">) will be: [,Hello haha</h1>interesting,Hi!</h1>blah].

              Using on a string will combine an array with a specified string in between. In this case, we put in <span class="h1">. Thus, s.split("<h1>").join('<span class="h1">') will be: <span class="h1">Hello haha</h1>interesting<span class="h1">Hi!</h1>blah].

              So in general, str.split(s1).join(s2) replaces all instances of s1 with s1.
              The same idea follows for the closing tag: </h1> is replaced with </span>
              • 4. Re: Dynamic text styling
                brian914 Level 1
                Thank you so much for the explaination.
                So the function is to use when I have a regular h1 tag. If I can rewrite the html page and can turn the h1 tag into a .h1 class, I can not use the function, right?

                Thank you so much!
                • 5. Re: Dynamic text styling
                  brian914 Level 1
                  I just rewrote my hmtl page and now all my css tags are class tags. I am still having the problem, that as soon as I have styling on a tag, it no longer shows in the Flash file. Why would this happen? I am assuming, I am styling wrong?

                  Thank you!
                  • 6. Re: Dynamic text styling
                    brian914 Level 1
                    I just found something.
                    I figured out what is causing the type to disappear. Somehow if fontWeight: "bold" is part of the styling tag, the styled element disappears. If I change bold to normal, it shows. Any ideas on this?

                    Thank you!
                    • 7. Re: Dynamic text styling
                      brian914 Level 1
                      The same thing happens with fontStyle: "italic" so I am wondering if it might have to do with those things being part of a different font face, but the text box being set to Normal. But if I am asking for italic or bold, that would be a different font face. Could that be? And if so, how can I change this?

                      Thanks a lot