15 Replies Latest reply on May 6, 2011 2:56 AM by daslicht

    text wrap arround image


      hi all,


      im experimenting with the tlf framework in cs5,

      i want to have an image in the tlf textfield and the text must wrap arround that image.

      the html text comes from an xml file.


      i don't know if this already is in the tlf 2.0 and how to use it.


      how can you determine your version of tlf?


      thanks in advance


        • 1. Re: text wrap arround image
          robin.briggs Adobe Employee

          TLF 2.0 does have a feature called "floats". This is described on our blog:




          TLF 2.0 and later have a "version" attribute of the TextFlow element in the markup, as well as a TextLayoutVersion class containing the version number and the build number (the build number is tlf_internal). TLF 1.0 and 1.1 do not have the version attribute, they have a tlf_internal class "flashx.textLayout.BuildInfo" that has the version and build number.


          - robin

          • 2. Re: text wrap arround image
            bumba154 Level 1

            i have now an tlf textfield on the stage.


            i want to assign the html text to the textfiled


            this.txt_mc.txt_txt.TEXT_FIELD_HTML_FORMAT = "<spaced>" + this._text + "</spaced>";


            but i have now the following error


            ReferenceError: Error #1056: Kan eigenschap TEXT_FIELD_HTML_FORMAT niet maken bij fl.text.TLFTextField.


            can't i use the text_field_html_format?

            how do i assign html text to an tlf textfield with the use of the image float tag?


            thanks for help


            • 3. Re: text wrap arround image
              robin.briggs Adobe Employee

              If you have a TLFTextField, you can set the content to an html string by doing this:


              tlfTextField.htmlText = "<html><body><p>Hi there!</p></body></html>";


              I think it will take most html that works in a TextField. This includes some of the special elements that are implemented in TextField.


              - robin

              • 4. Re: text wrap arround image
                bumba154 Level 1



                I tried the html and body tags, but the text still won't wrap arround the image.


                this is the code where i assign the html text:


                 this.txt_mc.txt_txt.htmlText = "<html><body><p>" + this._text + "</p></body></html>";



                when i trace the this.txt_mc.txt_txt.htmlText i got the following:


                <HTML><BODY><P ALIGN="left"><FONT FACE="Font 1*" SIZE="8" COLOR="#cccccc" LETTERSPACING="0%" KERNING="0"><IMG SRC="http://www.blockoffice.be/content/custom_window_images/1.jpg" WIDTH="50" HEIGHT="100"/> texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</FONT></P></BODY></HTML>


                i think the font face tags come there because my font is embedded.

                but i don't know why it won't wrap arround


                do you have an idea?



                • 5. Re: text wrap arround image
                  robin.briggs Adobe Employee

                  Are you using Flash CS5? Flash CS5 uses TLF 1.0, and that does not support floats (text wrapping around images). It only supports images as inline items -- they appear in the line as if they were a character. In order to get the text to wrap around an image, you have to be using TLF 2.0, which is currently in pre-release. You can use TLF 2.0 with Flex Hero, also in pre-release, available on the Adobe open source site:




                  If you get Hero, then TLF 2.0 comes with it.


                  If you are not using the Flex Framework, and you just want the latest TLF, you can get it from the TLF open source site:




                  If you are using TLF 2.0, and the text is still not wrapping, please let me know how you are inserting the image.




                  - robin

                  • 6. Re: text wrap arround image
                    bumba154 Level 1

                    I'm using indeed flash cs5, i tought that tlf 2.0 would be in some of the latest updates for cs5.

                    because i have no expierience with the flex framework i choosed for the second option.

                    (could it be that flex is only for flashbuilder, i dont know how to use it with flash)


                    i tried to install the tlf component and then use the tlf library , but when i have the component installed it wont show up in components in cs4.

                    tough it is shown as installed in the extension manager.


                    could you tell me why it won't show up? or explain me how to use the hero flex framework?


                    it would be verry appriciated, thanks for your help



                    • 7. Re: text wrap arround image
                      robin.briggs Adobe Employee

                      I got this suggestion from a savvy Flash Authoring dev. He hasn't tried this out, but he thinks it should work.


                      In order to get the TLF 2 stuff into your SWF, I think all you need to do is declare a variable in the TLF 2 library. Something like:


                      var tlf:TextFlow;


                      Then, to add in your own library, you just need to go to the Publish Settings:Advanced ActionScript 3.0 Settings and add the library. This window also allows you to set the value for using a RSL or the "merge into code" option. Use "merge into code".


                      Also, your Flash CS5 project should not use any TLF text that was created from the user interface. That will force TLF 1.0 to link in, and TLF 1.0 is not compatible with TLF 2.0 (you get name clashes between the two libraries).


                      Hope this helps,


                      - robin

                      • 8. Re: text wrap arround image
                        daslicht Level 2


                        those floats look very nice.

                        Is there somewhrere an example online to view ?


                        Are those floats now clickable ?

                             Can I give each float an instance name, so that i can add a eventListener?

                             Or how is that solved ?




                        (using Burrito))

                        • 9. Re: text wrap arround image
                          robin.briggs Adobe Employee

                          Floats are DisplayObjects, so they can be interactive.



                          Here's a sample application that just imports some markup and displays it:


                          package  {

                          import flash.display.Sprite;


                          import flashx.textLayout.container.ContainerController;

                          import flashx.textLayout.conversion.TextConverter;

                          import flashx.textLayout.edit.EditManager;

                          import flashx.textLayout.elements.InlineGraphicElementStatus;

                          import flashx.textLayout.elements.TextFlow;

                          import flashx.textLayout.events.StatusChangeEvent;

                          import flashx.undo.UndoManager;


                          [SWF(width="500", height="500")]


                          public class FloatExample extends Sprite {

                          private var textFlow:TextFlow;


                          private var markup:XML =

                          <TextFlow whiteSpaceCollapse="preserve" version="3.0.0" xmlns="http://ns.adobe.com/textLayout/2008"><p><span fontSize="36">Lorem Ipsum Facculpa Roma</span></p>

                          <p><span typographicCase="uppercase"></span></p>

                          <p><img typographicCase="uppercase" height="auto" width="auto" source="http://www.adobe.com/images/store/product_boxshots/150x150/box_design_premium_cs5_150x150. jpg" float="left"/><span typographicCase="uppercase">Pudit, </span><span typographicCase="default">Italy</span><span> — Optatur moleces endipic toratem earumendiat labo. Nam el imiliqui voloratiorio is archic to occus ut eictem nonsed quiaepe laceritium qui blantis dollesenis rerchil molor sequide sequos et dollupis ea sanime ea sit ipicitiist voluptas aut expe dit excea que quiatio. Apienet et vento blacia dolo tem volupit vent omnihillaut di conecti blature et que sunt.</span></p>

                          <p><span>Uptaeprat raepeliam, ipis am quae quae comnit pereptae velique nullabori coreptas rem vid et eliquas perepereius idit maximo occum sediassim facculpa ipsantiis as que nonseque si aut fugitiu mquame mi, odigni dolupta taquis esed et re plaborr oresciissi derio cus posse odi voluptum sundionest enis sequiditis pa cum velitionse di odia doloreictur, cus, nectur sin con ea quam labo. Nequaepel ent, con re nos maxim faccatu rendus, saped quiati volut possitem nis in con pore esci cones atur molupta tiorem voloriatem alibus ut experum re minvenit, te quae vollatem quiducimpor andusci destem alit quibusdam as endis accuptas molestendam dolor as nonsequ asperion rest, eumenimus, od que commo mil est omnis veruntis modis rerrore ma arupisto eliquam nullacipsam dolorem fugitia dipidis eventem doloratur sequat facim eat ut est poribus ius nimposam voleces sinimporeic temque sita doluptatque velibus ut faccusa nimodit rest, te nonsequatium nonet apelecum fuga. Tint, cor acero tem. Me nihit moluptae vereseq uidelec tatiatur re, etur aut adis re dolorectio quatempore, sandam aut et voles quatet, nobitistem. Nemporem. Cabo. Elignis doluptat.</span></p>

                          <p><span>Xerit imolore niminih illiquis dolorem poribus doluptae et andi dolent adit, ut velecto reperat.</span></p>

                          <p><span>Nusaes re poritat iiscia nis iligenim adion rest ma dollabor a cus il eatur ate doluptat.</span></p>

                          <p><span>Ed qui derum eliquibus volescilit faccum nobit debis consequis dolorum faccus samusapis quis dolupta turias et minci to officit a qui odi veroratur? Et eos voloribeaque ipsanturita quam veliqui unt.</span></p>

                          <p><span>Sunt hicilit et odit untotas doluptatquos dolupiciis dentiam voloreri apedigenihil inctus, sendis endisci psapeles magnamu sapidio. Sa cullam int, exeri ullor aut quae expelibus estiunt.</span></p>

                          <p><img height="auto" width="auto" source="http://www.adobe.com/images/store/product_boxshots/150x150/box_master_collection_cs5_150x1 50.jpg" float="right"/><span>Caborio. Atinum facianda volorer ferioruptas dolo moluptisciam qui omnis mollaut aperiam, unditiis as doluptur assiti inis ulparchilit ad etur?</span></p>

                          <p><span>Iscilit acimpero essit volupta tempor ma volest latur?</span></p>

                          <p><span>Pidus rae re, utes aut el est faccum, volupta erovid quidestrum recaepe llupidus dolenis aut laborib usandest, verrum fuga. Nemod quas cor aciiscitem re pratessinus acimet volorrum et, solorem non eatem sum la quam cuscips aestiatibus.</span></p>

                          <p><span>Oluptae. Luptae pelendebis pratur, ipsunt quo dolo con cuscias sequi cuptaesequid ut labore nusdae pore volorio to quo quiatin ctionseque id ut dolorepe por re, cor aut andi tem ium ius ditio te verrum solo teceatqui quia prae velenist, cum et, comniet omnimi, ut fuga. Itae quisimpor aut que doluptaspe expliquiatem rem vitioratio</span></p>



                          public function FloatExample()


                          var spr:Sprite = new Sprite();



                          textFlow = TextConverter.importToFlow(markup, TextConverter.TEXT_LAYOUT_FORMAT);

                          textFlow.flowComposer.addController(new ContainerController(spr, 480, 480));


                          var editManager:EditManager = new EditManager(new UndoManager());

                          textFlow.interactionManager = editManager;

                          editManager.selectRange(0, 0);


                          textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGE, graphicIsLoaded);




                          private function graphicIsLoaded(event:StatusChangeEvent):void


                          if (event.status != InlineGraphicElementStatus.LOAD_PENDING)






                          • 10. Re: text wrap arround image
                            injpix Level 3

                            robin, thanks for posting this example.  However I copied and pasted this example into a new project and when I run the application, it renders the text but not the image.  I am using Flex SDK build 19786.  I also have FlashPlayer 10.2 installed.


                            Update:  Well, when I copied and pasted this code in FlashBuilder it added spaces in the URLs of the TextFlow.


                            ps. i hate this forum's performance.

                            • 11. Re: text wrap arround image
                              daslicht Level 2

                              Hello Robin,

                              thank you for the example, I have uploaded it here so that we have a live example:


                              http://www.ansolas.de/dev/InlineGraphicExample/FloatTest.html  //Viewsource enabled


                              But how could I now add an event Listener to one of the images, so that I can open a bigger version in a popup for example ?




                              • 12. Re: text wrap arround image
                                josh_on Level 1

                                You can wrap it in a linkElement - which has a an event as the href - listen to the textFlow for MouseEvent.CLICK.


                                An example of the relevant code to set it up:


                                var p:ParagraphElement = new ParagraphElement();

                                var ige:InlineGraphicElement = new InlineGraphicElement();

                                ige.source = your_source;

                                var link:LinkElement = new LinkElement();

                                link.href = "event:your_event_name";


                                ige.textDecoration = TextDecoration.NONE;




                                _your_text_flow.addEventListener(MouseEvent.CLICK, textFlowClicked, false, 0, true)



                                An example of the handler:


                                protected function textFlowClicked(e:FlowElementMouseEvent):void {

                                var le:LinkElement = e.flowElement as LinkElement;

                                if(!le) return;

                                if(!le.href) return;

                                var arr:Array = le.href.split(":")

                                if(arr[0] == "event"){

                                var event_name:String = arr[1];

                                if(event_name == "your_event_name"){

                                // do something





                                • 13. Re: text wrap arround image
                                  daslicht Level 2

                                  Thank you for yor answer, how would that look as Textflow (the xml ) as used in the example from Robin ?

                                  • 14. Re: text wrap arround image
                                    injpix Level 3

                                    Take a look at my comment from the following l




                                    Forgive me if I missed the subject of your question.  My computer is half dead and I am sending this via phone.

                                    • 15. Re: text wrap arround image
                                      daslicht Level 2

                                      OK thank you very much,

                                      it's working, here I have craeted a live example with view source enabled:




                                      Is there a way to use a spark image as inline image ?

                                      Or how would create a image preloader ?!

                                      Small images are fine without preloader but how about bigger on slow connections ?