« Simple Shape Extruder using FP10 Drawing API
Mouse interactions on Text Layout Framework InlineGraphicElements in EditMode »

Insert image from File System into text using the Text Layout Framework

For the past few weeks I've been building a Rich Text Editor using the TLF. It's been a great opportunity to dig into it, and I have to say it's mostly been a pleasure. One of the features was to insert images, which turned out to be easy. So dead easy, that I found it cool enough to warrant a blog post.

Click the image for a demo:

Once you've created a TextFlow and activated an EditManager (Making the text editable), it takes just 4 steps:

1) Open an OS Dialogue box, wait for the user to select an image file:

PLAIN TEXT
Actionscript:
  1. public function addImage(e:MouseEvent):void {
  2.   _file_ref = new FileReference();
  3.   _file_ref.addEventListener( Event.SELECT, handleFileSelect,false,0,true );
  4.    var filter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
  5.   _file_ref.browse([filter]);
  6. }

2) Load the selected file:

PLAIN TEXT
Actionscript:
  1. protected function handleFileSelect(e:Event):void {
  2.   _file_ref.removeEventListener( Event.SELECT, handleFileSelect );
  3.   _file_ref.addEventListener(Event.COMPLETE, handleFileOpen,false,0,true );
  4.   _file_ref.load();
  5. }

3) The file is now in the form of a ByteArray. Use a Loader, to loadBytes() and wait for a COMPLETE event.

PLAIN TEXT
Actionscript:
  1. protected function handleFileOpen(e:Event):void {
  2.   _file_ref.removeEventListener(Event.COMPLETE, handleFileOpen );
  3.   var data:ByteArray = _file_ref.data as ByteArray;
  4.   _img_loader=new Loader();
  5.   _img_loader.loadBytes(data);
  6.   _img_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoadComplete,false,0,true);
  7. }

4) Then "copy" the BitmapData into a new Bitmap. This might seem a bit cryptic, a good explanation can be found in this thead Finally, the "one liner" or the "punchline" of this blog post: use EditManager.insertInlineGraphic() to plug it into the textFlow.

PLAIN TEXT
Actionscript:
  1. protected function imageLoadComplete(e:Event):void{
  2.   _img_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,imageLoadComplete);
  3.   var bmd:BitmapData=Bitmap(_img_loader.content).bitmapData;
  4.   var bm:Bitmap=new Bitmap(bmd);
  5.   EditManager(_flow.interactionManager).insertInlineGraphic(bm,bm.width,bm.height);
  6.   _flow.flowComposer.updateAllContainers();
  7. }

That is all... Well, for this to be useful, the image will have to be stored somewhere, if the document being created is to be saved or sent somewhere.

download the source (just one zipped mxml file)

For further reading, here's a couple useful links concerning the TLF:

How to use the TLF tutorial
TLF online forum
online TLF documentation

Tags:

This entry was posted on Monday, March 23rd, 2009 at 9:46 am and is filed under AS3, Flash, text layout framework. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 Responses to “Insert image from File System into text using the Text Layout Framework”

  1. Brett Says:
    March 25th, 2009 at 9:28 pm

    HI
    Thanks for the info. I have been working with inserting images into the TLF and came across some interesting issues.
    1) Can you add an event listener to a graphic (MouseEvent)
    2) How can you target a particular graphic (if I wanted to resize for example)

    I also added an ADDED_TO_STAGE event listener on an swf I loaded as a graphic, I traced the added to stage event and found that the graphic seems to be added twice althought only one instance remains… strange

    Any ideas on how to add an event listener to a graphic would be appreciated

    Thanks

  2. sakri Says:
    March 26th, 2009 at 11:54 am

    Hi Brett,

    Funny, I was planning on posting about that very topic, and thanks to your comment, I have :) Hopefully this will help:

    http://www.sakri.net/blog/2009/03/26/mouse-interactions-on-text-layout-framework-inlinegraphicelements-in-editmode/

  3. Brett Says:
    March 27th, 2009 at 1:20 pm

    Thanks for the help

    More comments at:

    http://www.sakri.net/blog/2009/03/26/mouse-interactions-on-text-layout-framework-inlinegraphicelements-in-editmode/

  4. Lingu Says:
    January 18th, 2010 at 2:01 pm

    HI all,
    I am using image with textarea, to display the image and textat same line…
    is not working properly….
    below code….
    any one help me…

    <![CDATA[
    public function addimage(event:Event):void
    {
    txtarea.htmlText= "" ;
    }
    ]]>

  5. deep Says:
    March 2nd, 2010 at 10:14 am

    Hello
    I used this code to insert an inline image but when i am exporting the XML,source attribute of has value ["object bitmap"].
    e.g
    I want the exact path or at least name of the image with extension in my XML as a source so that i can distinguish the different images inserted in my text.

    thanks.

  6. sakri Says:
    March 2nd, 2010 at 10:47 am

    Hi Deep,

    As far as I know, there is no direct way to do that. I made an editor, and the way around this was to immediately save any images on a server, this way I know the path. I stored all these paths in an array, with references to the image items in the TextFlow. This way, at “export time”, I would run through all the ["Object bitmap"] items, and replace the xml with the paths I stored in the array. Quite a nasty work around, but I got it to work. Unfortunately I can’t share the code as this was a project for a client. Hopefully you get the idea though. Best of luck!

  7. gauravgr8 Says:
    May 11th, 2010 at 3:27 pm

    Hi,

    I am in need to get the source path of the inserted image as bitmapdata when I export the textflow XML.

    Please help ASAP.

    Thanks

Leave a Reply