Skip to main content
Participant
January 17, 2011
Question

text wrap arround image

  • January 17, 2011
  • 3 replies
  • 6661 views

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

This topic has been closed for replies.

3 replies

daslicht
Known Participant
May 6, 2011

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 ?

daslicht
Known Participant
January 27, 2011

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))

Adobe Employee
January 28, 2011

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_CHANGE, graphicIsLoaded);

textFlow.flowComposer.updateAllControllers();

}

private function graphicIsLoaded(event:StatusChangeEvent):void

{

if (event.status != InlineGraphicElementStatus.LOAD_PENDING)

textFlow.flowComposer.updateAllControllers();

}

}

}

Inspiring
February 17, 2011

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.

Adobe Employee
January 17, 2011

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

bumba154Author
Participant
January 17, 2011

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

Jonas

Adobe Employee
January 18, 2011

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