[AS] AS3: Inline graphics using Text Layout Framework 액션스크립트 텍스트필드에 원하는 대로 한줄 부분의 글중간에 이미지 넣기 관련

 

 

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

출처: http://taskinoor.wordpress.com/2011/02/21/as3-inline-graphics-using-text-layout-framework/

AS3: Inline graphics using Text Layout Framework

Posted on February 21, 2011by taskinoor

A little bit of history
Few days ago I was working on something which required graphics and text in same line. The text and graphics were fully dynamic. At first I thought it’s a 15 minutes work, asTextField supports HTML img tag. So It should be a simple one line code.

textField.htmlText = "before img <img src='img.png'> after img";

The output was horrible.


As shown in the screenshot, the image was moved on the next line. This is really not inline graphics what I was looking for. Then I checked the manual of TextField again and found that img tag is not fully supported, the image will be placed on the line following the img tag. Well well well, I am not going to write here how I solved the problem, as that was a little bit of dirty solution.

As a result, I was looking for a better solution, Googled and asked a question on StackOverflow. Someone suggested to use Text Layout Framework from Adobe Labs. After checking, I found that this is a very powerful framework and supports many things. And now I am going to write how to show inline graphics using TLF.

Text Layout Framework
So what is Text Layout Framework anyway? It is a AS3 library built on the new text engine of Adobe Flash Player 10 and Adobe AIR 1.5 with lots of features like bidirectional text, vertical text, inline graphics, advanced styling capabilities, selection and editing of text and many more. It requires Flash Player 10 or Adobe AIR 1.5. The library is open source now and it is included in Flex 4 SDK.

Organization of Text in TLF
TLF uses a tree to represent text. Every node in the tree is an instance of a class defined inflashx.textLayout.elements package. The root node is always an instance of TextFlow class. It can have two types of children, instance of DivElement and instance of ParagraphElement which are similar to HTML div and p tag respectively. Similarly DivElement can have two types of children, DivElement instance and ParagraphElement instance. And ParagraphElement can have four types of children, instances of SpanElement, InlineGraphicElement, LinkElement andTCYElement. These four types contain primitive text and graphics. SpanElement represents the text with a common formatting, InlineGraphicElement represents inline graphic elements which are treated as a single character, LinkElement represents a hyper link and TCYElementrepresents text which can be perpendicular with the rest of the line (interesting?). All these elements are structured hierarchically to represent the entire text in TLF.

Inline graphics using TLF

1. First I want to embed the test image for simplicity. Don’t want to load dynamically just for this demo.

   [Embed(source='img.png')] private static var Img:Class;

2. Create a TextFlow instance which is the root node of the tree.

   var textFlow:TextFlow = new TextFlow();

3. Create a ParagraphElement and add this as a child to the root TextFlow.

   var para:ParagraphElement = new ParagraphElement(); textFlow.addChild(para);

4. Create the SpanElement to represent the text before the image and add this as a child to the ParagraphElement. I am using the default styling here.

   var spanBefore:SpanElement = new SpanElement(); spanBefore.text = "before img "; para.addChild(spanBefore);

5. Create the InlineGraphicElement to represent the image and add this as a child to theParagraphElement.

   var inlineImg:InlineGraphicElement = new InlineGraphicElement(); var img:Bitmap = new Img(); inlineImg.source = img; para.addChild(inlineImg);

6. Create the second SpanElement to represent the text after the image and add this as a child to the ParagraphElement.

   var spanAfter:SpanElement = new SpanElement(); spanAfter.text = " after img with TLF"; para.addChild(spanAfter);

7. Now we have our text with inline graphics ready. We need to render this. For rendering simple TextFlowTextLineFactory is used here. There is another sophisticated method for rendering which I am not discussing. TextFlowTextLineFactory is sufficient when user don’t need much control over the text like editing the text. TextFlowTextLineFactoryinstance has a method createTextLines which takes a callback function and a TextFlowinstance as parameters. Naturally TextFlow parameter is the root node of the tree that we are trying to render. The callback is fired when rendering is complete and theDisplayObject is passed to the callback. Then we simply need to add this display object in the display list.

   var factory:TextFlowTextLineFactory = new TextFlowTextLineFactory(); factory.compositionBounds = new Rectangle(30, 100, 500, 100); factory.createTextLines(addTextLineCallback, textFlow); // callback private function addTextLineCallback(textLine:DisplayObject):void {     addChild(textLine); }

And here is the result

Conclusion
Full code for this demo can be downloaded from here. Here I have shown only a tiny portion of the power of TLF. It is capable of much more things. Please follow the links in the reference section for the details of TLF.

And as usual, any feedback is welcome.

References

• Text Layout Framework in Adobe Labs and Text Layout Framework in Adobe Open Source.
• Text Layout Framework Overview. It describes the TLF in some detail.
• Reference manuals for TextFlow, ParagraphElement, DivElement, SpanElement,InlineGraphicElement and TextFlowTextLineFactory.

Share this:

• Facebook4
• Twitter
• Google

Like this:

This entry was posted in AS3 and tagged AS3. Bookmark the permalink.

← Compiling the Linux kernel

Encapsulate a family of algorithms using Strategy Pattern→

8 Responses to AS3: Inline graphics using Text Layout Framework

1. songhuaninchina says:i want that: test ,
   i want set verticalAlign to middle , but not success , why?
   • taskinoor says:It’s not very clear what is your problem. Can you explain more?
   • Reply
   • September 14, 2011 at 10:06 PM
2. Reply
3. September 14, 2011 at 3:15 PM
4. Jagan says:Need Help about Vertical Align in TLF…Reply
   • taskinoor says:Sorry I’m not sure how to do this. Need to check the manual.
     • migacz1125 says:http://forums.adobe.com/thread/596846 here its answer
     • November 6, 2013 at 4:38 PM
   • Reply
   • September 5, 2012 at 12:09 PM
5. I have added an InlineGraphicsElement in TextFlow which has some text in it. and i want to align the text verticalAlign.MIDDLE. ie. the text to be vertically aligned middle to the InlineGraphicsElement. rite now its bottom aligned. how can i make it to middle alligned.. please help me..?
6. August 24, 2012 at 9:07 PM
7. Nemi says:Great! Thank you!
8. Reply
9. November 8, 2012 at 5:14 AM
10. Kenny says:Hey, just wondering how it would be possible to do this with dynamically loaded images from a server. I know this is a relatively old post, but any help would be appreciated.
    • taskinoor says:If you can load an image from server to a Bitmap object then there should not be any problem.
    • Reply
    • July 30, 2013 at 9:31 PM
11. Reply
12. July 29, 2013 at 11:59 PM

 

 

 

반응형

 

728x90

 

 

 

=================================

=================================

=================================

 

 

 

출처: http://forums.adobe.com/thread/596846

 

TextFlow.verticalAlign

Mar 15, 2010 11:47 AM

When Setting Vertical Align on a TextFlow to VerticalAlign.MIDDLE or VerticalAlign.BOTTOM, The First TextFlowLine Selection and Caret is vertically offset with respect to the distance of vertical space between the top of the Container boundary and the top of the First Line of Text.

 

What is the trick to make the Text Selection line up on the First TextFlowLine when verticalAlign is not set to 'top'?

 

below is a simple code example that demonstrates it. The first line of text "Hello World" is positioned properly, however when you click on

the TextLine to edit it, the Caret appears some 100 pixels below where its supposed to, and so does the text selection.

 

I am loading this module within an app that is compiled in SDK 3.2

 

/******************************      BEGIN CODE ******************************/

package {
    import flash.text.engine.BreakOpportunity;
    
    import flashx.textLayout.container.ContainerController;
    import flashx.textLayout.edit.EditManager;
    import flashx.textLayout.elements.Configuration;
    import flashx.textLayout.elements.ParagraphElement;
    import flashx.textLayout.elements.SpanElement;
    import flashx.textLayout.elements.TextFlow;
    import flashx.textLayout.formats.TextLayoutFormat;
    import flashx.textLayout.formats.VerticalAlign;
    
    import mx.core.UIComponent;

 

    public class TextFrameExample extends UIComponent
    {
        var textFlow:TextFlow;
        public function TextFrameExample()
        {
            var config:Configuration = new Configuration();
            var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
            textLayoutFormat.color = 0xFF0000;
            textLayoutFormat.fontFamily = "_sans";
            textLayoutFormat.fontSize = 22;
            textLayoutFormat.breakOpportunity = BreakOpportunity.ANY;
            textLayoutFormat.verticalAlign = VerticalAlign.MIDDLE;
            
            config.textFlowInitialFormat = textLayoutFormat;
            textFlow = new TextFlow(config);
            var globalP:ParagraphElement = new ParagraphElement();
            
            var p:ParagraphElement = new ParagraphElement();
            var span:SpanElement = new SpanElement();
            span.text = "Hello, World!";
            p.verticalAlign = VerticalAlign.TOP;
            p.addChild(span);
            textFlow.addChild(p);            
            
            p = new ParagraphElement();
            span = new SpanElement();
              p.verticalAlign = VerticalAlign.TOP;
            span.text = "Next Line should be split into some columns after all this right? i mean come on";
            p.addChild(span);
            textFlow.addChild(p);
            
            p = new ParagraphElement();
            span = new SpanElement();
            span.verticalAlign = VerticalAlign.TOP;
            span.text = "Next Line should be split into some columns after all this right? i mean come on";           
            
            p.addChild(span);
            textFlow.addChild(p);
            
            
            textFlow.interactionManager = new EditManager();
            textFlow.flowComposer.addController(new ContainerController(this, 0, 0));
            textFlow.flowComposer.getControllerAt(0).setCompositionSize(500, 500);
            textFlow.flowComposer.updateAllControllers(); 
            
        }
        
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            textFlow.flowComposer.getControllerAt(0).setCompositionSize(unscaledW idth, unscaledHeight);
            textFlow.flowComposer.updateAllControllers();
        }
    }
}

/******************************      BEGIN CODE ******************************/

 

Thanks for your time!

Bow

 

 

=================================

=================================

=================================