« Insert image from File System into text using the Text Layout Framework
The FlashBar miniconference summary »

Mouse interactions on Text Layout Framework InlineGraphicElements in EditMode

One slightly frustrating (but totally logical) feature of using editmode in TLF is that inserted InlineGraphicElements lose their "interactivity". Instead, they are treated the same as text characters, that is, the user can select them as if they were selecting text:

There was a comment In my previous entry about the possibility of mouse interaction with inserted graphics.

I have a way to do this, a bit hackish, but it does the job. Every added graphic needs to be stored in an array. When a user clicks, the code loops through all the graphics and checks if one of them happens to be under the mouse. This is achieved using the trusty old localToGlobal() method:

PLAIN TEXT
Actionscript:
  1. protected function handleMouseDown(e:MouseEvent):void{
  2.     var hitrect:Rectangle;
  3.     var bm:Bitmap;
  4.     for(var i:uint=0;i<_images.length;i++){
  5.         bm=Bitmap(_images[i]);
  6.         var ltg:Point=bm.localToGlobal(new Point(0,0));
  7.         hitrect=new Rectangle(ltg.x,ltg.y,bm.width,bm.height);
  8.         if(hitrect.contains(mouseX,mouseY)){
  9.             mx.controls.Alert.show("so, I see you have clicked on an image eh?");
  10.             break;
  11.         }
  12.     }
  13. }

This is very useful if you want to edit the graphic somehow, for instance, in the RTE that I'm currently working on I use this for "table support". In the TextFlow, my tables are represented as bitmaps, when clicked, the actual DataGrid is opened and ready to edit. When finished, a new BitmapData is grabbed and the InlineGraphic in the TextFlow is updated.

I have found one "bug" (or a feature?!), if an image is taller than (somewhere around 1000 pixels), the image is no longer properly "wrapped", and actually starts to cover some text.

It's also possible to listen to MouseMove, and set some rollover/out states to the graphics. You can see a demo here and download the source mxml file here.

Tags: , , , , ,

This entry was posted on Thursday, March 26th, 2009 at 11:52 am and is filed under AS3, Flash, flex, 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.

8 Responses to “Mouse interactions on Text Layout Framework InlineGraphicElements in EditMode”

  1. Benz Says:
    March 26th, 2009 at 12:38 pm

    Really cool stuff! It`s a shame i`ve not checked out the TLF yet :-(
    One question. If you`re building a RTE how are you going to store the data and restore it later?
    As I said i`ve not played with it yet so the question might be stupid but is it possible to store and restore the underlying format somehow?

    Thanks
    Benz

  2. sakri Says:
    March 26th, 2009 at 12:46 pm

    Hi there Benjamin!

    You can export the contents of your textFlow with the TextFilter like this:

    TextFilter.export(_flow,TextFilter.TEXT_LAYOUT_FORMAT,ConversionType.XML_TYPE) as XML;

    This is great for just text and links etc. But for inline graphics things get a little trickier… My RTE runs through the inline images, then it creates ids for each, then appends those ids to the exported XML. I then pass this xml in a custom object that also contains the images as bytearrays and pass them to Java. The Java backend then stores the images and the xml, and appends the correct image path into the XML.

    The TLF is nice if you’re only using the inbuilt functionalities, you do have to do some acrobatics implement custom features like bullet lists etc. But the api is clean and provides a lot of possibilities.

    Glad you liked the post :)

  3. Benz Says:
    March 26th, 2009 at 12:48 pm

    Wow thanks for the fast response!
    I think i need to switch to Gumbo right now :-)

  4. sakri Says:
    March 26th, 2009 at 1:10 pm

    I’m not using gumbo yet, this stuff works with SDK 3.2 and up!

  5. Brett Says:
    March 27th, 2009 at 1:06 pm

    Hi Sakri

    Thanks for the reply to my question on adding an event listener to an inline graphic. There is little concering this topic and your info will help. I am actually doing pretty much the same thing. I need to be able to edit an inline graphic (tables, graphs etc).and then have them reload into the textFlow.

    I was originally thinking of using a display object like a movieClip as the inline graphic and then having buttons inside that clip to controll its contents.

    I ran into many issues:

    1) The inline graphic needs to be a url to be exported properly. If you export the the markup and re-import it the display object doesnt load into the textFlow. I resorted to using an external swf.

    2)Although the buttons inside the clip respond to the mouse,The buttons have to be on the right half of the inline graphic (MovieClip) else the inline graphic is selected. the other thing is that the cursor doesnt change when over the button, it stays the I bar… not a major issue. I also cant get the buttons inside that clip to communicate with any other class except itself. ie if I wanted the button to open an editor for that particular inline graphic, I cant call a function in say the document class.

    I now have to dow something pretty similar to what you’re doing

    in short… Thanks for the info

  6. Michael Says:
    May 12th, 2009 at 12:32 pm

    Hi Sakri,

    I added a TextInput element into the inlinegraphic. Do you have any idea how it can be made editable by the user. I can just add programmatic text to the textinput, but it is not possible to get the curser into the inlinegraphic textinput and write text. The textflow seems not to loose focus when I click on the inlinegraphic textinput.

  7. sakri Says:
    May 12th, 2009 at 1:07 pm

    Hi Michael,

    I’m afraid it’s not possible to interact with inline components in edit mode. The best I could come up with, was to capture the click (as explained in the post), then open an editable component “on top” of the text flow. I did this with datagrids, in the textflow, I would have a bitmapdata snapshot of the datagrid. I map this bitmap with a stored datagrid, which would open for editing. This “editable” datagrid component has a “close” button, which closes the datagrid, takes a snapshot of it and updates the image used in the textflow inline graphic.

    There was a thread on the tlf forums with another approach, but I didn’t really look into it: http://forums.adobe.com/message/1065950#1065950

    Best of luck!

  8. Pravin Mahida Says:
    July 16th, 2009 at 6:17 am

    Hi sakri
    First of all thanks for providing such a nice example for inline graphic element.

    i use same thing in my application and restricted image size with 25X25 by using

    EditManager(_textFlow.interactionManager).insertInlineGraphic(ImageSourcePath,25,25);

    now on selection i want to resize image to change its height and width.
    Please provide me any help if you have.

    Thanks in advance for any help from anybody.

Leave a Reply