text wrap arround image

Report · Jan 17, 2011

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

Report · Jan 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

Report · Jan 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

Report · Jan 17, 2011

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

tlfTextField.htmlText = "<html><body>Hi there!</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

Report · Jan 17, 2011

Hi,

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?

Jonas

Report · Jan 18, 2011

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

Report · Jan 18, 2011

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

Jonas

Report · Jan 18, 2011

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

Report · Jan 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))

Report · Jan 27, 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">Lorem Ipsum Facculpa Roma

<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"/>Pudit, Italy — 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.

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.

Xerit imolore niminih illiquis dolorem poribus doluptae et andi dolent adit, ut velecto reperat.

Nusaes re poritat iiscia nis iligenim adion rest ma dollabor a cus il eatur ate doluptat.

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.

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.

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

Iscilit acimpero essit volupta tempor ma volest latur?

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.

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

</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();

}

Report · Feb 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.

Report · May 05, 2011

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

Report · May 05, 2011

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;

}

Report · May 05, 2011

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

Report · May 05, 2011

Take a look at my comment from the following l

ink:

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

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

Report · May 06, 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 ?

Adobe Community

text wrap arround image