Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
Locked
0

TLF Floating Text

Contributor ,
Mar 06, 2010 Mar 06, 2010

Hi,

how do I make Text live flow around embedded Images ?


e.g.:When I click a embedded Image and scale it, how do I make the Text automaticly flow around that image ?

Whats the best way to emmbedd Fonts ?


I tried : http://blogs.adobe.com/tlf/2008/11/embedded_font_subsetting_using.html

But that did not work whyever.

Regards

Marc

TOPICS
Text layout framework
3.9K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Mar 06, 2010 Mar 06, 2010

You can use linked containers to route the text around the graphic. You make a TextFlow, it has a FlowComposer, and the flowComposer can have one or more controllers/containers. Each one of these controllers is a rectangular area where text will be placed. So you can make a rectangular area for the part above the text, another for beside the text, and another for below the text. That's the best we can do today.

This link has some very useful info on how to embed fonts using Flash Builder/Flex SDK:

http://blog.flexexamples.com/2010/01/21/embedding-local-system-fonts-in-flex-4/

- robin

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 07, 2010 Mar 07, 2010

Hello,

thank you for your answer.

Are there any online Flex examples regarding theses linked containers?

Could I even access the embedded images via AS ? e.g to scale it ?

Best Regards

Marc

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Mar 08, 2010 Mar 08, 2010

Here's a simple example that uses linked containers:

////////////////////////////////////////////////////////////////////////////////

//

//  ADOBE SYSTEMS INCORPORATED

//  Copyright 2008-2009 Adobe Systems Incorporated

//  All Rights Reserved.

//

//  NOTICE: Adobe permits you to use, modify, and distribute this file

//  in accordance with the terms of the license agreement accompanying it.

//

//////////////////////////////////////////////////////////////////////////////////

package {

import flash.display.Sprite;

import flash.display.Stage;

import flash.display.StageAlign;

import flash.display.StageScaleMode;

import flash.geom.Rectangle;

import flashx.textLayout.compose.StandardFlowComposer;

import flashx.textLayout.container.ContainerController;

import flashx.textLayout.container.ScrollPolicy;

import flashx.textLayout.conversion.TextConverter;

import flashx.textLayout.edit.EditManager;

import flashx.textLayout.elements.TextFlow;

import flashx.textLayout.formats.TextLayoutFormat;

/** TextLayout markup example with two linked containers. */

public class LinkedContainers extends Sprite

{

private const markup:String = "<TextFlow xmlns='http://ns.adobe.com/textLayout/2008' fontSize='14' textIndent='15' paragraphSpaceAfter='15' paddingTop='4' paddingLeft='4'>" +

"<TextLayoutFormat color='#ff0000' id='hoverOverBrand'/>" +

"<TextLayoutFormat color='#00ff00' textDecoration='underline' id='mouseDownOverBrand'/>" +

"<TextLayoutFormat color='#0000ff' id='defaultLinkBrand'/>" +

"<TextLayoutFormat color='#0000ff' id='hoverOverEmail'/>" +

"<TextLayoutFormat color='#0000ff' lineThrough='true' id='mouseDownOverEmail'/>" +

"<p fontSize='48'>Ethan Brand</p>" +

"<p>The following excerpt is from <a href='http://www.4literature.net/Nathaniel_Hawthorne/Ethan_Brand/' target='_self' linkCharacterFormat='{defaultLinkBrand}' hoverCharacterFormat='{hoverOverBrand}' activeCharacterFormat='{mouseDownOverBrand}'><span>Ethan Brand</span></a> by <a href='mailto:nathaniel_hawthorne@famousauthors.com' target='_self' hoverCharacterFormat='{hoverOverBrand}' activeCharacterFormat='{mouseDownOverEmail}'><span>Nathaniel Hawthorne</span></a>.</p>" +

"<p><span>There are many </span><span fontStyle='italic'>such</span><span> lime-kilns in that tract of country, for the purpose of burning the white marble which composes a large part of the substance of the hills. Some of them, built years ago, and long deserted, with weeds growing in the vacant round of the interior, which is open to the sky, and grass and wild-flowers rooting themselves into the chinks of the stones, look already like relics of antiquity, and may yet be overspread with the lichens of centuries to come. Others, where the lime-burner still feeds his daily and nightlong fire, afford points of interest to the wanderer among the hills, who seats himself on a log of wood or a fragment of marble, to hold a chat with the solitary man. It is a lonesome, and, when the character is inclined to thought, may be an intensely thoughtful occupation; as it proved in the case of Ethan Brand, who had mused to such strange purpose, in days gone by, while the fire in this very kiln was burning.</span></p><p><span>The man who now watched the fire was of a different order, and troubled himself with no thoughts save the very few that were requisite to his business. At frequent intervals, he flung back the clashing weight of the iron door, and, turning his face from the insufferable glare, thrust in huge logs of oak, or stirred the immense brands with a long pole. Within the furnace were seen the curling and riotous flames, and the burning marble, almost molten with the intensity of heat; while without, the reflection of the fire quivered on the dark intricacy of the surrounding forest, and showed in the foreground a bright and ruddy little picture of the hut, the spring beside its door, the athletic and coal-begrimed figure of the lime-burner, and the half-frightened child, shrinking into the protection of his father's shadow. And when again the iron door was closed, then reappeared the tender light of the half-full moon, which vainly strove to trace out the indistinct shapes of the neighboring mountains; and, in the upper sky, there was a flitting congregation of clouds, still faintly tinged with the rosy sunset, though thus far down into the valley the sunshine had vanished long and long ago.</span></p></TextFlow>";

public function LinkedContainers()

{

// Makes a single, editable text flow that flows through two containers.

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;

var textFlow:TextFlow = TextConverter.importToFlow(markup, TextConverter.TEXT_LAYOUT_FORMAT);

textFlow.flowComposer = new StandardFlowComposer();

// The first container is small, and in the top left. It has an inset, because we're going to stroke it.

var firstContainer:Sprite = new Sprite();

firstContainer.x = 10;

firstContainer.y = 10;

var firstController:ContainerController = new ContainerController(firstContainer);

firstController.verticalScrollPolicy = ScrollPolicy.OFF;

var firstControllerFormat:TextLayoutFormat = new TextLayoutFormat();

firstControllerFormat.paddingTop = 4;

firstControllerFormat.paddingRight = 4;

firstControllerFormat.paddingBottom = 4;

firstControllerFormat.paddingLeft = 4;

firstController.format = firstControllerFormat;

textFlow.flowComposer.addController(firstController);

firstController.setCompositionSize(500, 60);

addChild(firstContainer);

// The second container is below, and has two columns

var secondContainer:Sprite = new Sprite();

secondContainer.x = 10;

secondContainer.y = 100;

var secondController:ContainerController = new ContainerController(secondContainer);

var secondControllerFormat:TextLayoutFormat = new TextLayoutFormat();

secondControllerFormat.columnCount = 2;

secondControllerFormat.columnGap = 30;

secondController.format = secondControllerFormat;

textFlow.flowComposer.addController(secondController);

secondController.setCompositionSize(500, 450);

addChild(secondContainer);

//  Draw the text, and make it editable

textFlow.flowComposer.updateAllControllers();

textFlow.interactionManager = new EditManager();

// Draw a stroke around the first container

var bounds:Rectangle = new Rectangle(0, 0, firstContainer.width - 1, firstContainer.height - 1);

firstContainer.graphics.lineStyle(1);

firstContainer.graphics.moveTo(bounds.left,bounds.top);

firstContainer.graphics.lineTo(bounds.right,bounds.top);

firstContainer.graphics.lineTo(bounds.right,bounds.bottom);

firstContainer.graphics.lineTo(bounds.left,bounds.bottom);

firstContainer.graphics.lineTo(bounds.left,bounds.top);

}

}

}

Yes, you can scale the image you are wrapping around. It's a display object, you can scale it using scaleX and scaleY.
- robin

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 09, 2010 Mar 09, 2010

Hello,

thank you very much for the example.

When I run it i get the following error at Line 85:          

stage.scaleMode = StageScaleMode.NO_SCALE;

Main Thread (Suspended: TypeError: Error #1009: Cannot access a property or method of a null object reference.)

Am I missing something ?

I just created a new Instance of LinkedContainers()

---

How would I use <s:Groups/> or <s:RichEditableText/>  instead of a Sprite as Container ?

Best regards

Marc

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 09, 2010 Mar 09, 2010

Hi,

I converted the example now to FlashBuilder 4 :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768"
                 creationComplete='init()'
                 
                  >
     <fx:Script>
          <![CDATA[
               import mx.core.IVisualElement;
               import flash.display.Sprite;
               import flash.display.Stage;
               import flash.display.StageAlign;
               import flash.display.StageScaleMode;
               import flash.geom.Rectangle;
               import flashx.textLayout.compose.StandardFlowComposer;
               import flashx.textLayout.container.ContainerController;
               import flashx.textLayout.container.ScrollPolicy;
               import flashx.textLayout.conversion.TextConverter;
               import flashx.textLayout.edit.EditManager;
               import flashx.textLayout.elements.TextFlow;
               import flashx.textLayout.formats.TextLayoutFormat;
               [Bindable] public static var main:adobeExamples;
               private function init():void {
                    main = this;
                    linkedContainers();
                    
               }
               private const markup:String = "<TextFlow xmlns='http://ns.adobe.com/textLayout/2008' fontSize='14' textIndent='15' paragraphSpaceAfter='15' paddingTop='4' paddingLeft='4'>" +
                    "<TextLayoutFormat color='#ff0000' id='hoverOverBrand'/>" +
                    "<TextLayoutFormat color='#00ff00' textDecoration='underline' id='mouseDownOverBrand'/>" +
                    "<TextLayoutFormat color='#0000ff' id='defaultLinkBrand'/>" +
                    "<TextLayoutFormat color='#0000ff' id='hoverOverEmail'/>" +
                    "<TextLayoutFormat color='#0000ff' lineThrough='true' id='mouseDownOverEmail'/>" +
                    "<p fontSize='48'>Ethan Brand</p>" +
                    "<p>The following excerpt is from <a href='http://www.4literature.net/Nathaniel_Hawthorne/Ethan_Brand/' target='_self' linkCharacterFormat='{defaultLinkBrand}' hoverCharacterFormat='{hoverOverBrand}' activeCharacterFormat='{mouseDownOverBrand}'><span>Ethan Brand</span></a> by <a href='mailto:nathaniel_hawthorne@famousauthors.com' target='_self' hoverCharacterFormat='{hoverOverBrand}' activeCharacterFormat='{mouseDownOverEmail}'><span>Nathaniel Hawthorne</span></a>.</p>" +
                    "<p><span>There are many </span><span fontStyle='italic'>such</span><span> lime-kilns in that tract of country, for the purpose of burning the white marble which composes a large part of the substance of the hills. Some of them, built years ago, and long deserted, with weeds growing in the vacant round of the interior, which is open to the sky, and grass and wild-flowers rooting themselves into the chinks of the stones, look already like relics of antiquity, and may yet be overspread with the lichens of centuries to come. Others, where the lime-burner still feeds his daily and nightlong fire, afford points of interest to the wanderer among the hills, who seats himself on a log of wood or a fragment of marble, to hold a chat with the solitary man. It is a lonesome, and, when the character is inclined to thought, may be an intensely thoughtful occupation; as it proved in the case of Ethan Brand, who had mused to such strange purpose, in days gone by, while the fire in this very kiln was burning.</span></p><p><span>The man who now watched the fire was of a different order, and troubled himself with no thoughts save the very few that were requisite to his business. At frequent intervals, he flung back the clashing weight of the iron door, and, turning his face from the insufferable glare, thrust in huge logs of oak, or stirred the immense brands with a long pole. Within the furnace were seen the curling and riotous flames, and the burning marble, almost molten with the intensity of heat; while without, the reflection of the fire quivered on the dark intricacy of the surrounding forest, and showed in the foreground a bright and ruddy little picture of the hut, the spring beside its door, the athletic and coal-begrimed figure of the lime-burner, and the half-frightened child, shrinking into the protection of his father's shadow. And when again the iron door was closed, then reappeared the tender light of the half-full moon, which vainly strove to trace out the indistinct shapes of the neighboring mountains; and, in the upper sky, there was a flitting congregation of clouds, still faintly tinged with the rosy sunset, though thus far down into the valley the sunshine had vanished long and long ago.</span></p></TextFlow>";
               
               public function linkedContainers():void {
                    
                    // Makes a single, editable text flow that flows through two containers.
                    var textFlow:TextFlow = TextConverter.importToFlow(markup, TextConverter.TEXT_LAYOUT_FORMAT);
                    textFlow.flowComposer = new StandardFlowComposer();
                    
                    // The first container is small, and in the top left. It has an inset, because we're going to stroke it.          
                    var firstController:ContainerController = new ContainerController(firstContainer);
                         firstController.setCompositionSize(500, 60);
                    var firstControllerFormat:TextLayoutFormat = new TextLayoutFormat();
                         firstControllerFormat.paddingTop = 4;
                         firstControllerFormat.paddingRight = 4;
                         firstControllerFormat.paddingBottom = 4;
                         firstControllerFormat.paddingLeft = 4;
                         firstController.format = firstControllerFormat;
                    textFlow.flowComposer.addController(firstController);
                    
                    var secondController:ContainerController = new ContainerController(secondContainer);
                         secondController.setCompositionSize(500, 450);
                    var secondControllerFormat:TextLayoutFormat = new TextLayoutFormat();
                         secondControllerFormat.columnCount = 2;
                         secondControllerFormat.columnGap = 30;
                         secondController.format = secondControllerFormat;
                    textFlow.flowComposer.addController(secondController);
                    
                    //  Draw the text, and make it editable
                    textFlow.flowComposer.updateAllControllers();
                    textFlow.interactionManager = new EditManager();
                    
                    
                    
                    // Draw a stroke around the first container
                    var bounds:Rectangle = new Rectangle(0, 0, firstContainer.width - 1, firstContainer.height - 1);
                    firstContainer.graphics.lineStyle(1);
                    firstContainer.graphics.moveTo(bounds.left,bounds.top);
                    firstContainer.graphics.lineTo(bounds.right,bounds.top);
                    firstContainer.graphics.lineTo(bounds.right,bounds.bottom);
                    firstContainer.graphics.lineTo(bounds.left,bounds.bottom);
                    firstContainer.graphics.lineTo(bounds.left,bounds.top);
                    
               }
          ]]>
     </fx:Script>
     <s:RichText id='firstContainer' x='10' y='10' />
     <s:RichText id='secondContainer' x='10' y='100'/>
</s:Application>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Mar 09, 2010 Mar 09, 2010

That markup definitely won't work.  Binding isn't supported on thelink*Format properties - or anything in TLF markup.

You want is to follow this pattern:

<a href="http://www.4literature.net/Nathaniel_Hawthorne/Ethan_Brand/" target="_self">
<linkActiveFormat><TextLayoutFormat color="#00ff00" textDecoration="underline"/></linkActiveFormat>
<linkHoverFormat><TextLayoutFormat color="#ff0000"/></linkHoverFormat>
<linkNormalFormat><TextLayoutFormat color="#0000ff"/></linkNormalFormat>
<span>Ethan Brand</span>
</a>

Note that you can specify the link formats at any parent element and they will inherit to the child.

Hope that helps,

Richard

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 25, 2010 Mar 25, 2010

Thank you very much for your answers, it's working nice but using containers to allow text flow is quite inconvenient

Look how easy it is doable without flex:

http://www.psacake.com/web/ar.asp

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Mar 25, 2010 Mar 25, 2010

Yes, we would like to have support for floats. Using linked containers instead is just a workaround.

- robin

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 27, 2010 Apr 27, 2010

Ok ,

i have now built a dynamic text box wher ethe user can select between different template.

one with image and one without.

I also have a Format Palete.

But how could I format a text which is flowing across 2 Rich editable Text Areas ?

I dont get it, the TLF is praised to be sooo oinnovative but cannot do such simple all day scenarios?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Apr 27, 2010 Apr 27, 2010

Linked containeres are not supported by RichEditableText.  You'll have to use TLF directly and display the Sprites as rawChildren.

Richard

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 25, 2010 May 25, 2010

The code I have posted above is working.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 25, 2010 May 25, 2010
LATEST

Hello Friends,

you know that Text Flow Feature of Apple Pages* where text is floating around a Image in realtime while moving it.

This would be a innovative, groundbreaking new feature for Web applications beside the trivial stuff i requested above and is available in ordinary html.

@Adobe, please work on that

*http://www.apple.com/ipad/guided-tours/#pages // there is a demo of TextFlow

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines