18 Replies Latest reply on Mar 23, 2007 6:33 AM by Greg Dove

    Embedding/loading jpeg in XML text field

    GEORGEHAHN
      Want to embed an image in an XML text field. Any ideas how? I know it can be done, but I'm at a loss. Any help is greatly appreciated.

      GHX
        • 1. Re: Embedding/loading jpeg in XML text field
          Level 7
          GHX International,

          > Want to embed an image in an XML text field. Any ideas
          > how? I know it can be done, but I'm at a loss.

          Text fields can display text (including formatting) and HTML (also
          including formatting, but done in a different way). Flash can also import
          XML, so if you're XML -- or at least part of it -- is comprised of the HTML
          tags supported by Flash, you're on easy street. Search the phrase
          "supported HTML tags" in the documentation and you'll see the full list, but
          <im> is certainly one of them. Just like normal HTML, the <img> tag
          features a src attribute, and that can be pointed to an external JPG (by
          path name) or to a JPG in your Library (by linkage id).

          Set your dynamic text field's html property to true, then set its
          htmlText property to your HTML-formatted string, including <img> tag.


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


          • 2. Re: Embedding/loading jpeg in XML text field
            GEORGEHAHN Level 1
            David...

            Thank you so much for your response. I did (I think) what you suggested, but still come up with broken text. Here's the situation:

            I'm using the DateChooser component, and successfully loading text from an external XML file into dynamic text fields on the stage. The text field into which I want to load an embedded image within the text is called "info_txt". The "info_txt" text field is HTML-enabled, but is not accepting any HTML tags (the text just stops in its tracks when it reaches a tag).

            Below is the actionscript I'm using to load the text fields with the XML ("showcalendar.xml") when the user clicks a date on the DateChooser ("myDC"). Again, the text loads perfectly into the fields. But when I add HTML tags into the mix, like the <img src="photo.jpg"> tag, the text stops.

            • 3. Re: Embedding/loading jpeg in XML text field
              Level 7
              GHX International,

              > The text field into which I want to load an embedded
              > image within the text is called "info_txt". The "info_txt"
              > text field is HTML-enabled, but is not accepting any
              > HTML tags (the text just stops in its tracks when it
              > reaches a tag).

              Sounds like a fun case of troubleshooting! ;)

              > Below is the actionscript I'm using to load the text fields
              > with the XML ("showcalendar.xml") [...]

              I see you setting the htmlText propery of that text field to an empty
              string, but that's the only time that property is used. It looks like your
              for..in loop near the bottom is the culprit. You need to specify the
              htmlText property of HTML-enabled text fields.


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


              • 4. Re: Embedding/loading jpeg in XML text field
                GEORGEHAHN Level 1
                David...

                Of all the tips I've gotten on this, yours seems the most sensible. I am importing the text from an XML. I'm quite familiar with the HTML tag <img> and I'd LOVE to use it here. However... I have the "info_txt" text field html-enabled, but Flash is not reading the HTML tags within the text inside the XML.
                • 5. Re: Embedding/loading jpeg in XML text field
                  GEORGEHAHN Level 1
                  I understand that there is an error. I just don't know how to fix the error, as I did not write this code. (My understanding of the complexity and function of this particular piece of actionscript is on a beginner level.)
                  • 6. Re: Embedding/loading jpeg in XML text field
                    GEORGEHAHN Level 1
                    In other words... what should the code look like, and exactly where should I put it?

                    A billion chunks of thanks,
                    George (GHX)
                    • 7. Re: Embedding/loading jpeg in XML text field
                      GEORGEHAHN Level 1
                      I this what is should look like? (see the "htmlText" properties near the bottom)

                      • 8. Re: Embedding/loading jpeg in XML text field
                        Level 7
                        GHX International,

                        > Of all the tips I've gotten on this, yours seems the
                        > most sensible.

                        Thanks. :) You've made quite a few replies, so I'm not sure how far
                        along you've gotten. I'll take a few snippets from your recent posts and
                        repond to them here.

                        >> I understand that there is an error. I just don't
                        >> know how to fix the error, as I did not write
                        >> this code.

                        This is one of the frustrations of "venturing into the deep end," for
                        sure. In fact, scenarios like this are what prompted me to really learn
                        ActionScript in the first place. I felt no control over the code samples I
                        found on the web.

                        >> In other words... what should the code look like,
                        >> and exactly where should I put it?

                        There are two ways a text field can display text: text and HTML. We
                        need to send plan text to the relevant text fields' text properties and HTML
                        text to the text fields whose html properties have been enabled.

                        >> I this what is should look like? (see the "htmlText"
                        >> properties near the bottom)
                        >> [...]
                        >> day_txt.htmlText = '';
                        >> performer_txt.htmlText = '';
                        >> info_txt.htmlText = '';
                        >> if(cEvent){
                        >> for(var obj in cEvent){
                        >> this._parent[obj+'_txt'].htmlText = cEvent[obj];
                        >> [...]

                        Well, as I understand it, the only text field that needs HTML-formatted
                        text is the info_txt one, right? If that's so, then day_txt and
                        performer_txt don't need their htmlText properties set to blank strings. Go
                        ahead and change those htmlText properties back to text.

                        Next you have an if() statement. Inside that is a for..in loop, which
                        loops through the properties in your cEvent object. Frankly ... I'm not
                        sure where your info_txt text field is actually getting populated. It's
                        possible -- maybe -- that this happens inside the for..in loop. In this
                        line ...

                        this._parent[obj+'_txt'].htmlText = cEvent[obj];

                        ... the value of obj, as combined with the string "_txt" and contained
                        within the entity this._parent[], might just point to the various text
                        fields we just discussed. if that's so, then, as the loop progresses, this
                        one line will eventually target the info_txt text field.

                        Keep in mind, I'm only stabbing in the dark, because I have no idea what
                        your XML file contains.

                        If this line is where it's happening, you could use another if()
                        statement to test of that text field is HTML enabled. If it is, supply
                        content to its htmlText property; if not, supply text to its text property
                        ...

                        if (cEvent) {
                        for (var obj in cEvent) {
                        if (this._parent[obj+'_txt'].html == true) {
                        this._parent[obj+'_txt'].htmlText = cEvent[obj];
                        } else {
                        this._parent[obj+'_txt'].text = cEvent[obj];
                        }
                        }
                        }

                        > I am importing the text from an XML. I'm quite familiar
                        > with the HTML tag <img> and I'd LOVE to use it here.

                        I hear ya. In this context, there's a lot more do it, of course.
                        You're using HTML in a text document (your web page), and possibly
                        JavaScript, to embed a SWF file. That SWF file is opened in the Flash
                        Player and positioned "in" the page to look as if it is actually part of the
                        page. The SWF uses ActionScript to load external XML, which then gets
                        parsed and coughs up some HTML again to populate a dynamic text field.
                        There's a lot going on. ;)

                        > However... I have the "info_txt" text field html-enabled, but
                        > Flash is not reading the HTML tags within the text inside
                        > the XML.

                        Enabling the html property of that text field isn't enough. You have to
                        also make sure to feed it HTML-formatted text to its htmlText property. Not
                        only that, but the HTML formatting must be comprised only of the subset of
                        HTML that Flash supports.

                        It would be helpful to trace the information in this for..in loop to see
                        if we're even remotely close to the actual problem. The trace() function
                        puts output to the Output panel and provides a way to see what's going on
                        under the hood.

                        The very first thing you may want to do, then, is commented out the
                        suggested new ActionScript and trace some of these values, instead ...

                        if (cEvent) {
                        for (var obj in cEvent) {
                        // if (this._parent[obj+'_txt'].html == true) {
                        // this._parent[obj+'_txt'].htmlText = cEvent[obj];
                        // } else {
                        // this._parent[obj+'_txt'].text = cEvent[obj];
                        // }
                        trace(obj);
                        trace(cEvent[obj]);
                        }
                        }

                        Give that a shot and see what you get in the Output panel. We're hoping
                        to see instance names of text fields first, and then text content second, in
                        pairs. That would be encouraging. You'll be able to see exactly what HTML
                        you're putting into the text field. If not, then this bit of
                        troubleshooting will let us know we're barking up the wrong tree altogether.


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


                        • 9. Re: Embedding/loading jpeg in XML text field
                          GEORGEHAHN Level 1
                          David...

                          First, I want to thank you for taking all this time to help. It's very humbling and I really appreciate it. I feel the only way I can "pay it forward" is to help others with the queries in this forum to which I actually know the answers. Onward...

                          I added the code you suggested, and commented out the lines you suggested as well. Here is what appeared in the Output Panel:

                          info
                          From HBO's "One
                          performer
                          BILL BURR
                          day
                          Thursday March 22 - Sunday March 25

                          Now... you'll see that the "info" text breaks at "From HBO's 'One...." because I put a bold tag <b> after "One." So something is getting lost in the HTML tag translation.

                          Even before I commented out the code and added the 'trace' script, the line still broke in the same place. (I only used the <b> tag as a simple test to see if it would follow any HTML encoding at all, which it isn't.)

                          To enlighten you further, here is the XML:

                          <?xml version="1.0" encoding="UTF-8"?>

                          <events>
                          <event date="3/22/2007">
                          <day>Thursday March 22 - Sunday March 25</day>
                          <performer>BILL BURR</performer>
                          <info>From HBO's "One <b>Night</b> Stand," Comedy Central's "Chappelle's Show," "Comedy Central Presents" and CBS-TV's "Late Show with David Letterman"</info>
                          </event>

                          <event date="3/23/2007">
                          <day>Thursday March 22 - Sunday March 25</day>
                          <performer>BILL BURR</performer>
                          <info>From HBO's "One Night Stand," Comedy Central's "Chappelle's Show," "Comedy Central Presents" and CBS-TV's "Late Show with David Letterman"</info>


                          </events>

                          Again, the <b>Night</b> tags in the first event node is just to test if the word Night appeared in bold. But it doesn't. The text just stalls at the opening bold tag. I want the image to be embedded at the beginning of the "info" text. I think the XML for that would look like this:

                          <info><img src="folder/ComicImage.jpg">From HBO's "One Night Stand," Comedy Central's "Chappelle's Show," "Comedy Central Presents" and CBS-TV's "Late Show with David Letterman"</info>

                          So... that's where we are. And again and again, I am ever grateful for your kind assistance.

                          George (GHX)
                          • 10. Re: Embedding/loading jpeg in XML text field
                            Level 7
                            George,

                            > First, I want to thank you for taking all this time to help. It's
                            > very humbling and I really appreciate it.

                            Thanks. :) I know what it's like to be stuck and not have the foggiest
                            idea how to proceed.

                            > I feel the only way I can "pay it forward" is to help others with
                            > the queries in this forum to which I actually know the answers.

                            Rock on!

                            > I added the code you suggested, and commented out the lines
                            > you suggested as well. Here is what appeared in the Output Panel:
                            > // code snipped ...

                            > Now... you'll see that the "info" text breaks at "From HBO's
                            > 'One...." because I put a bold tag after "One." So something
                            > is getting lost in the HTML tag translation.

                            Gotcha. Something in your statement just raised a red flag, too, so
                            let's see what else unfolds.

                            > To enlighten you further, here is the XML:
                            >
                            > <?xml version="1.0" encoding="UTF-8"?>

                            So far, so good.

                            > // bit of snipped XML ...
                            > <info>From HBO's "One
                            Night Stand," Comedy Central's
                            > "Chappelle's Show," "Comedy Central Presents" [...]

                            Aha! This might just be it. Keep in mind, XML is completely extensible
                            (in fact, that's what the X stands for in the acronym), so an <info> tag is
                            perfectly legit. Inside this <info> tag, you have a string, which may
                            optionally be HTML-formatted. In HTML, the tag for bold is <b>, not .
                            Let's update this line and see where you get.

                            Note: It may just be that this forum didn't let you post a message with
                            <b> in it, so if that's what your file actually uses, write back and we'll
                            keep digging.


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


                            • 11. Re: Embedding/loading jpeg in XML text field
                              Greg Dove Level 4
                              Sorry to butt in...but just saw this. Try changing your d loop in the XML parser to the code snippet attached. Because of the way its currently being read it just finds the first child of the info node... which is the text leading up to the <b> node (another xml node, not html as you think of it normally). I don't know if the way I've suggested to do this is the best, but it should work for what you want if the html inside the info node is correctly formatted for htmlText. I've done this type of thing in the past and I've added <TEXTFORMAT> and <P>as the start and end tags. I can't remember if it was absolutely necessary to do so or not. Here's an example that does work (with an embedded font) from a project that I'm working on:

                              <TEXTFORMAT LEADING="2"><P ALIGN="CENTER"><FONT FACE="Century Gothic" SIZE="45" COLOR="#000000" LETTERSPACING="0" KERNING="0">This is <B>some</B> html formatted text</FONT></P></TEXTFORMAT>

                              All I've done with the slight change to your code is convert the info nodes (only) to a string and remove the text from the beginning and end for the <INFO> </INFO> tags... which is what you need to be able to assign to .htmlText of an textfield with .html=true. The string conversion does some additional encoding of some characters.. but that's OK...
                              • 12. Re: Embedding/loading jpeg in XML text field
                                GEORGEHAHN Level 1
                                Yes, it was the proper HTML tag for bold, i.e. <b>
                                • 13. Re: Embedding/loading jpeg in XML text field
                                  Greg Dove Level 4
                                  You're correct in terms of <B> or <b> being correct for html.
                                  The problem here I think is that the XML parser in flash doesn't think of <b> as being any different to another xml node... so the when it looks inside the info node it sees a bit of text then another XMLNode and then some more text...so it appears as if the traversal code "breaks" - its actually just retreiving the first part. When it gets to an info node it looks at the nodeValue of the first Child... Here the "first child" is the text leading up to the nextSibling which is actually another node...just happens to be called <B>. I always have problems with embedded fonts and html text each time I do it and I should write down what works coz I can't remember how I got it working last time. So I again struck problems getting the text to display. I can confirm that I was able to load an image with the change I made above though... which I think is what you were trying to do. BUT in order to do so I had to do something weird and put in a closing tag for the image...i.e. <IMG SRC="myjpeg.jpg"></IMG>. This is because its been loaded into the XML object first I think. Works though...
                                  • 14. Re: Embedding/loading jpeg in XML text field
                                    Greg Dove Level 4
                                    Got the fonts working too... so I can confirm:

                                    With this XML:
                                    <?xml version="1.0" encoding="UTF-8"?>

                                    <events>
                                    <event date="3/22/2007">
                                    <day>Thursday March 22 - Sunday March 25</day>
                                    <performer>BILL BURR</performer>
                                    <info><TEXTFORMAT LEADING="2"><P ALIGN="CENTER"><FONT FACE="Arial" SIZE="8" COLOR="#000000" LETTERSPACING="0" KERNING="0">This is <B>some</B> html formatted text</FONT></P></TEXTFORMAT></info>
                                    </event>

                                    <event date="3/23/2007">
                                    <day>Thursday March 22 - Sunday March 25</day>
                                    <performer>BILL BURR</performer>
                                    <info><TEXTFORMAT LEADING="2"><P ALIGN="CENTER"><FONT FACE="Arial" SIZE="8" COLOR="#000000" LETTERSPACING="0" KERNING="0">This is <B>some</B> html<IMG SRC="Image095.jpg"><\IMG> formatted text</FONT></P></TEXTFORMAT></info>


                                    </events>

                                    and with a text field set up as follows:
                                    my_text.html = true;
                                    my_text.embedFonts = true;

                                    AND with two Arial fonts in the library (one plain, one bold) both set to export for actionscript,

                                    my_text.htmlText = value ;

                                    (above code placed where the first trace call was in my code snippet) will load and display the correctly formatted html along with an image. NB I had to use a closing tag for the image as previously mentioned.
                                    No more posts I promise... just thought I'd confirm it.
                                    • 15. Re: Embedding/loading jpeg in XML text field
                                      GEORGEHAHN Level 1
                                      GWD...

                                      Many many thanks for your help. I tried it, but no go. The best it got was displaying all the text in the field, including all HTML encoding.

                                      George
                                      • 16. Re: Embedding/loading jpeg in XML text field
                                        GEORGEHAHN Level 1
                                        All...

                                        I take it back!!! GWD's amended d loop code did the trick. The glitch was a piece of code near the bottom of the actionscript that was (literally) missing a letter. The code was "if (this._parent[obj+'_txt'].html == true)," but the word "this" was literally missing the letter "s," making the code "if (thi._parent[obj+'_txt'].html == true)". I just saw it, inserted the "s" and the photo loads perfectly.

                                        I feel like I've spent 2 days in labor. I'm much relieved, and - most importantly - my client will love the ease with which he can update the show calendar for the comedy club on his own. Thank you, thank you, thank you.

                                        The very best,
                                        George (GHX)
                                        • 17. Re: Embedding/loading jpeg in XML text field
                                          Level 7
                                          George,

                                          > I feel like I've spent 2 days in labor. I'm much relieved, and -
                                          > most importantly - my client will love the ease with which he
                                          > can update the show calendar for the comedy club on his own.

                                          Glad to hear it! When you have a moment to spare, I encourage you to go
                                          through this code and make sure you really do understand it. That said ...
                                          actually, this particular script probably isn't a good place to start (it's
                                          fairly complicated). I definitely think you'll find it very helpful in
                                          general to understand the basics of object-oriented programming -- namely,
                                          that everything you come across in ActionScript can be described as an
                                          "object," and that objects are defined by classes. A class determines a
                                          particular object's properties (characteristics), methods (things the object
                                          can do), and events (things the object can react to). Thinking in these
                                          terms, it becomes much easier to consult the ActionScript 2.0 Language
                                          Reference to draw from it what you need.

                                          http://www.quip.net/blog/2006/flash/actionscript-20/ojects-building-blocks


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


                                          • 18. Embedding/loading jpeg in XML text field
                                            Greg Dove Level 4
                                            OK one more post then. I looked up my earlier post and just realised I got my forward and back slashes mixed up in my XML for the image tag (but it still works!). However (if you use the right one!) you don't need the separate closing tag... you can close it after the src attribute. <IMG SRC="mjpeg.jpg" /> . One of those duuuh! moments, sorry.

                                            Good to hear its working too. I didn't take a look at the other part of your code so well done for tracking that part down. Unless you use XML a lot, I found it not very intuitive to "think" in the same way as the flash representation of the loaded XML, although I'm streets ahead of where I was when I started. That may just be me; perhaps I have a sequential brain rather than a hierachical one! I still find myself doing a lot more testing on XML parsing code than other parts of things that I do though. If you want to learn more about the XML support then consider something else... whether you intend to go to as3 in the future. I haven't applied the as3 preview update yet so haven't looked at the new as3 XML support but from what I've read its supposed to be easier to use.