7 Replies Latest reply on Feb 2, 2007 4:36 PM by Newsgroup_User

    embedFonts woes Pt. II

    aniebel Level 2
      So, I'm back to haunt! Ok, kglad helped me earlier today by showing me how to apply several styles to one dynamic text field. This is great but part of the reason I couldn't get it to work was because I was using the variable name of the text field instead of the instance name.

      But.. if I want to associate a variable from a parsed XML, how do I do that? Don't you have to use the variable name to populate the text field?
        • 1. Re: embedFonts woes Pt. II
          kglad Adobe Community Professional & MVP
          no. i have never found a need to use the variable name associated with a textfield. i'm not sure i have any good reason to avoid using the variable associated with a textfield and strictly use the instance name, but i sure avoid the variable.

          i believe my phobia stems from flash 6 when using the same name for the instance and variable of a textfield caused the textfield to populate with its own path/instance name.

          anyway, enough of my nostalgia/trivia. if you have a string variable (say sVar) that you want to assign to a textfield (with instance name tf), just use:

          • 2. Re: embedFonts woes Pt. II
            aniebel Level 2
            Not sure if I have something out of order here or not:
            • 3. Re: embedFonts woes Pt. II
              Level 7
              aniebel,

              > Not sure if I have something out of order here or not:

              Here's my thought -- but I'm not certain I'm right.

              > bhrCSS.setStyle("bodyID", {

              With this line, you're creating a CSS class (a style) called bodyID. I
              *believe* this would be the equivalent of a "class selector" in the real
              world of CSS; that is, if this style were defined in an external CSS file,
              it would look like this:

              .bodyID {
              font-size: 13pt;
              // etc.
              }

              ... which means this style would have to be associated with a given HTML
              element by way of a class attribute, such as:

              <p class="bodyID">text here</p>

              Flash is capable of handling both class selectors and element selectors.
              By contrast, an "element selector" styles *all* HTML elements of the
              specified sort; for example, all P tags. In an external CSS class, that
              would look like this:

              p {
              font-size: 13pt;
              // etc.
              }

              ... note the absense of a dot in front of the selector *and* the fact that
              the selector matches the name of an existing HTML tag (namely, P). In this
              case, you couldn't need a class attribute in your HTML element ... any tag
              that's a P tag will be styled according to this element selector.

              The tricky part -- the part I'm not sure of -- is how Flash handles
              these selectors when they're created by ActionScript rather than imported
              from a CSS document. I don't see a way to specify to the setStyle() method
              whether this selector should be a class or element selector.

              If it's only possible to do class selectors in this way, then you'll
              have to put bodyID inside a class attribute of whatever HTML element you use
              to wrap your text.


              David Stiller
              Adobe Community Expert
              Dev blog, http://www.quip.net/blog/
              "Luck is the residue of good design."


              • 4. Re: embedFonts woes Pt. II
                aniebel Level 2
                Ok, I've changed my XML to :
                <?xml version="1.0" encoding="iso-8859-1"?>
                <bhr>
                <section>
                <p class="bodyID">This is test text to see if this works.</p>
                </section>
                </bhr>

                And my CSS definition in my FLA to:

                ("p", {
                fontFamily:'Univers Light',
                fontSize:'13pt',
                color:'#808080'});

                And it didn't work. So then I tried my CSS that's defined in my FLA to:

                ("bodyID", {
                fontFamily:'Univers Light',
                fontSize:'13pt',
                color:'#808080'});

                and that didn't work either. Am I missing something or maybe not understanding what you're suggesting?

                BTW, my linkage identifier is still "bodyID"
                • 5. Re: embedFonts woes Pt. II
                  Level 7
                  aniebel,

                  > Ok, I've changed my XML to :
                  > <p class="bodyID">This is test text to see if this works.</p>

                  Okay.

                  > And my CSS definition in my FLA to:
                  > ("p", {
                  > fontFamily:'Univers Light',
                  > fontSize:'13pt',
                  > color:'#808080'});
                  >
                  > And it didn't work.

                  If ActionScript allows you to make element selectors -- that is,
                  non-class selectors -- then the above *should* apply its styling to any P
                  tag fed into your text field. In that case, you wouldn't need the
                  class="bodyID" part, because you're styling *all* P tags. I know Flash
                  handles this when styles are read from an actual CSS file (a simple text
                  file with CSS syntax in it), but again, I'm not sure how this is handled
                  when done internally.

                  > So then I tried my CSS that's defined in my FLA to:
                  >
                  > ("bodyID", {
                  > fontFamily:'Univers Light',
                  > fontSize:'13pt',
                  > color:'#808080'});

                  Okay, for this ... this looks like you're making a CSS "class selector,"
                  which means the selector -- bodyID -- is not a common HTML tag; rather a
                  custom style (a "class selector") that must be referenced as such in your
                  HTML. In this case, you would indeed have to put class="bodyID" into your P
                  tag (or any other tag) in order to associate this style with that tag.

                  When handled via an external CSS file, that selector, bodyID, would have
                  to be preceeded by a dot -- like this, .bodyID -- in order to work. The AS2
                  docs don't show any dots, so it must not be necessary without the external
                  CSS file. The only thing is, that confuses the matter (for me), because CSS
                  proper requires a dot in front of class selectors.

                  > BTW, my linkage identifier is still "bodyID"

                  Aha. So you've imported a font (Univers Light) and gave that font asset
                  the Linkage id "bodyID" -- that clarifies quite a bit for me. If the font
                  Univers Light is "known to Flash" as bodyID (by virtue of its Linkage id),
                  then *that's* the name you should be using in your fontFamily property.

                  ("myStyle", {
                  fontFamily:'bodyID',
                  fontSize:'13pt',
                  color:'#808080'}
                  );

                  See that? And that causes the myStyle style to use the *embedded*
                  Univers Light font.

                  See if this URL helps ... this guy is using dots in front of his class
                  selectors, so who knows. But it shows him using embedded fonts in his CSS,
                  even CSS defined by ActionScript.

                  http://www.oscartrelles.com/archives/bug_or_feature_css_and_embedded_fonts


                  David Stiller
                  Adobe Community Expert
                  Dev blog, http://www.quip.net/blog/
                  "Luck is the residue of good design."


                  • 6. Re: embedFonts woes Pt. II
                    aniebel Level 2
                    Ok, I'm going to show the test file I'm working on. Nothing so far has seemed to work. FYI, if I change the style name, it doesn't work even when just typing a string variable in the actions window. So here are my two files (XML and FLA) as they currently stand. Note the three last lines of code where two are commented out. Also note that the same exact line from the XML, when typed as a string in the actions window, works. It must be how I'm accessing that node maybe?

                    Thanks, guys for all your efforts!
                    FILES ARE HERE
                    • 7. oRe: embedFonts woes Pt. II
                      Level 7
                      aniebel,

                      > Ok, I'm going to show the test file I'm working on. Nothing so
                      > far has seemed to work.

                      You've given it some good effort, though. ;)

                      I took a look at your files. Here's what I came up with. The
                      documentation for the StyleSheet.setStyle() method is potentially
                      misleading, I think. They show an "emphasis" style, which is fine -- but to
                      anyone who knows CSS, it looks like that's supposed to be an element
                      selector, because there's no dot in front of the style's name. That would
                      mean the HTML (which is actually XML) would have to have at least one
                      <emphasis> node.

                      It turns out the ActionScript approach does indeed accept CSS class
                      names with a dot in front of them, which makes perfect sense. There's
                      really no reason why it should work differently in ActionScript than it does
                      when you're reading an external CSS file.

                      So ... in hopes I haven't completely sullied the waters, here's two
                      versions of a solution that works for me.

                      GIVEN:
                      Three font assets in the Library, univers 45 light, univers 45 light italic,
                      and univers 65 bold. Respectively, these have Linkage IDs of bodyID,
                      italicID, and headerID. These Linkage IDs *could* be Larry, Curly, and Moe,
                      of course, just to be perfectly clear -- but what you've got is totally
                      fine.

                      VERSION ONE:
                      This uses class selectors (notice the dot in front of each selector name in
                      the setStyle() method).

                      // ActionScript 2.0
                      var bhrCSS:TextField.StyleSheet = new TextField.StyleSheet();
                      bhrCSS.setStyle(".u45light", {
                      fontFamily:'bodyID',
                      fontSize:'13pt',
                      color:'#FF0000'});
                      bhrCSS.setStyle(".u45lightItal", {
                      fontFamily:"italicID",
                      fontSize:'18pt',
                      fontStyle:'italicID',
                      color:'#00FF00'});
                      bhrCSS.setStyle(".u65bold", {
                      fontFamily:'headerID',
                      fontSize:'24pt',
                      color:'#0000FF'});
                      //
                      this.createTextField("dynamic_txt", this.getNextHighestDepth(), 60, 70, 430,
                      200);
                      dynamic_txt.antiAliasType = "advanced";
                      dynamic_txt.border = true;
                      dynamic_txt.wordWrap = true;
                      dynamic_txt.multiline = true;
                      dynamic_txt.selectable = false;
                      dynamic_txt.html = true;
                      dynamic_txt.embedFonts = true
                      dynamic_txt.condenseWhite = true;
                      dynamic_txt.styleSheet = bhrCSS;
                      //
                      //NEW XML
                      var xnRoot:XMLNode;
                      var bhrXML:XML = new XML();
                      bhrXML.ignoreWhite = true;
                      bhrXML.load("BHRtext07b.xml");
                      //
                      bhrXML.onLoad = function(success:Boolean):Void {
                      if (success) {
                      xnRoot = bhrXML.firstChild;
                      dynamic_txt.htmlText = xnRoot.firstChild.childNodes.join("");
                      } else {
                      trace("xml not loaded");
                      }
                      };

                      // XML file
                      <?xml version="1.0" encoding="iso-8859-1"?>
                      <bhr>
                      <section>
                      <p class="u45light">This is text using u45light (headerID).</p><br />
                      <p class="u45lightItal">This is text using u45lightItal (bodyID).</p><br
                      />
                      <p class="u65bold">This is text using u65bold (italicID).</p>
                      </section>
                      </bhr>

                      VERSION TWO:
                      This uses element selectors (notice the *lack* of dot in front of each
                      slector name in the setStyle() method).

                      // ActionScript 2.0
                      var bhrCSS:TextField.StyleSheet = new TextField.StyleSheet();
                      bhrCSS.setStyle("u45light", {
                      fontFamily:'bodyID',
                      fontSize:'13pt',
                      color:'#FF0000'});
                      bhrCSS.setStyle("u45lightItal", {
                      fontFamily:"italicID",
                      fontSize:'18pt',
                      fontStyle:'italicID',
                      color:'#00FF00'});
                      bhrCSS.setStyle("u65bold", {
                      fontFamily:'headerID',
                      fontSize:'24pt',
                      color:'#0000FF'});
                      // the rest is identical

                      // XML file
                      <?xml version="1.0" encoding="iso-8859-1"?>
                      <bhr>
                      <section>
                      <u45light>This is text using u45light (headerID).</u45light><br />
                      <u45lightItal>This is text using u45lightItal
                      (bodyID).</u45lightItal><br />
                      <u65bold>This is text using u65bold (italicID).</u65bold>
                      </section>
                      </bhr>


                      David Stiller
                      Adobe Community Expert
                      Dev blog, http://www.quip.net/blog/
                      "Luck is the residue of good design."