Skip navigation
bumba154
Currently Being Moderated

text wrap arround image

Jan 17, 2011 3:43 AM

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

Jonas

 
Replies
  • Currently Being Moderated
    Jan 17, 2011 10:54 AM   in reply to bumba154

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

     

    http://blogs.adobe.com/tlf/2010/07/floats.html

     

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 17, 2011 4:30 PM   in reply to bumba154

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 18, 2011 10:27 AM   in reply to bumba154

    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:

     

    http://opensource.adobe.com/wiki/display/flexsdk/Hero

     

    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:

     

    http://sourceforge.net/adobe/tlf/home/

     

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

     

    Thanks!

     

    - robin

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 18, 2011 3:57 PM   in reply to bumba154

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 27, 2011 6:37 AM   in reply to bumba154

    Hello,

    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 ?

     

    Cheers

    Marc

    (using Burrito))

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 27, 2011 4:43 PM   in reply to daslicht

    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_150x150.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>

    </TextFlow>;

     

    public function FloatExample()

    {

    var spr:Sprite = new Sprite();

    addChild(spr);

     

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

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

    textFlow.flowComposer.updateAllControllers();

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

    textFlow.interactionManager = editManager;

    editManager.selectRange(0, 0);

    editManager.setFocus();

    textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHAN GE, graphicIsLoaded);

    textFlow.flowComposer.updateAllControllers();

    }

     

    private function graphicIsLoaded(event:StatusChangeEvent):void

    {

    if (event.status != InlineGraphicElementStatus.LOAD_PENDING)

    textFlow.flowComposer.updateAllControllers();

     

    }

    }

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 17, 2011 12:21 PM   in reply to robin.briggs

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2011 9:49 AM   in reply to robin.briggs

    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 ?

     

    Regards

    Marc

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2011 10:23 AM   in reply to daslicht

    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";

    link.addChild(ige);

    ige.textDecoration = TextDecoration.NONE;

    p.addChildAt(0,link);

    _your_text_flow.addChild(p);

     

    _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

    return;

    }

    }

     

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2011 2:46 PM   in reply to josh_on

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2011 3:39 PM   in reply to daslicht

    Take a look at my comment from the following l

    ink:

    http://forums.adobe.com/thread/603707?decorator=print&displayFullThrea d=true

     

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2011 2:56 AM   in reply to bumba154

    OK thank you very much,

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

     

    http://www.wensauer.info/flex/InlineGraphicExample2/FloatTest.html

     

    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 ?

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points