Mouse interactions on Text Layout Framework InlineGraphicElements in EditMode

March 26th, 2009

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.

Posted in AS3, Flash, flex, text layout framework | 13 Comments »

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

March 23rd, 2009

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

Posted in AS3, Flash, text layout framework | 8 Comments »

Simple Shape Extruder using FP10 Drawing API

March 10th, 2009

My SoTexty 3d Text Effect demo uses a Class I wrote a which takes a polygon in the form of a Vector of Points, and extrudes it into a 3dMesh of sorts.

Click the image for a demo:

The colors are random, as is the outline of the shapes... Refresh if the result doesn't please your aesthetics ;)

Here's the snippet that uses the class:

PLAIN TEXT
Actionscript:
  1. protected function testExtrude():void{
  2.     var points:Vector.<Point>=createCircularPath(new Point(300,300),200,250,50);
  3.     var negative_shape_points:Vector.<Point>=createCircularPath(new Point(300,300),90,190,40);
  4.     var points2:Vector.<Point>=createCircularPath(new Point(550,550),80,20,20);
  5.     var points3:Vector.<Point>=createCircularPath(new Point(300,650),80,20,20);
  6.     var points4:Vector.<Point>=createCircularPath(new Point(650,300),80,20,20);
  7.     _extruded=SimpleShapeExtruderDrawAPI.createExtrudedShapeFromPoints(100,
  8.                                                                 Vector.<Vector.<Point>>([points,points2,points3,points4]),
  9.                                                                 Vector.<Vector.<Point>>([negative_shape_points]),
  10.                                                                 Math.random()*0xFFFFFF,0xFF000000+Math.random()*0xFFFFFF
  11.                                                                 );
  12.     _extruded.adjustCenter(300,300);
  13.     _extruded.x=300;
  14.     _extruded.y=300;
  15.     addChild(_extruded);
  16.     addEventListener(Event.ENTER_FRAME,rotateExtruded);
  17. }

Instead of Triangulating the shape, I used a "shortcut" which I learned a while back from Den Ivanov. The Mesh contains a "front" and a "back" which are a triangle pair, who use the "original" shape as their material:

The large red square with the diagonal represents the "front", the "back" is identical. A curiosity about this screenshot is that the "filled triangles" are z-sorted correctly, however, there are some issues with the outlines. Meh.

The code accepts a Vector of Positive and Negative "shapes", which are rendered into a BitmapData and used as a "Material" by the 3DMesh. Here is a screenshot of what the "rendered" material looks like:

The filled box on the right is the "material" used by the extruded sides.

Notice the white space surrounding the shape. An annoying issue I ran into was that the "front" and the "back" had unwanted artifacts when using a "1 to 1" ratio "material". The UV mapping would go from 0 to 50% horizontally, and 0 to 100% vertically. For some reason, the edges (when rotated) would render an arbitrary "line" on any of the four sides.

The solution was to add white space, and grab the material using "less precise" percentages, which unfortunately results in some "spaces" on the edges of the "shape" material and the extruded side triangles. Another Meh.

It's not perfect, but I figured the code might be fun to play with...

Download the flex project here

(requires Flex SDK 3.2 or higher)

Posted in AS3, experiment, Flash | 1 Comment »

Suffering from Disappearing import statements and lack of auto fill in flex SDK 3.2?

March 4th, 2009

I'm posting this because apparently I'm not the only moron experiencing such misery.

Since the release of FlexBuilder SDK 3.2 (supports flash player 10), I've been tearing the few remaining hairs off my scalp due to (mostly) the Incredible Disappearing BitmapData import. Today I updated to SDK build 3.3 and I was horrified to discover the import/auto fill features seemed to get even worse! So I twittered about it, and sure enough, the solution was in my tweetdeck within minutes:

Just update your flexbuilder to 3.0.2

Which you can do by clicking on Help/Search For Flexbuilder Updates...

A few hundred megabytes later everything works like a dream again. Thanks Alain.

That is all.

Posted in Flash, flex | 6 Comments »

Extracting positive and negative shapes from a BitmapData

March 3rd, 2009

The first step in generating the "vector text effects" which I blogged about in my previous post is to grab a BitmapData of a character, then seperate the "characters components" into individual BitmapData instances.

So let's take a capital B :

The B only contains one "positive shape", that is, the "filled in" part. The B contains 3 "negative shapes" or the transparent bits. In this case we've got the surrounding area and the two "holes".

If we take a percent symbol "%"

We've got 3 positive shapes and 3 negative ones.

So how does one go about extracting these? I'm sure there are several approaches, I tried a few, this was the speediest of the ones I came up with.

Step 1 : Convert the captured BitmapData into one containing just two colors, a solid and a transparent. *Note:* this has the side effect that the extracted shapes have "pixelated" , "jagged" or "aliased" edges. For my purposes this is sufficient, a different approach would be needed to keep anti-aliasing.

PLAIN TEXT
Actionscript:
  1. public static function toMonoChrome(source:BitmapData,mono_color:uint=0xFF000000):BitmapData{
  2.     var bmd:BitmapData=source.clone();
  3.     bmd.threshold(bmd,bmd.rect,new Point(),">",0x00000000,mono_color);
  4.     return bmd;
  5. }

Step 2 : Create an "inverse" of the "monochrome" image:

PLAIN TEXT
Actionscript:
  1. //create the monochrome for extracting "positive shapes"
  2. var positive_two_color:BitmapData=new BitmapData(source_bmd.width,source_bmd.height,true,0x00);
  3. positive_two_color.draw(source_bmd);
  4. positive_two_color=BitmapDataUtil.toMonoChrome(positive_two_color,0xFFFF0000);
  5.  
  6. //create the monochrome for extracting "negative shapes"
  7. var temp:BitmapData=new BitmapData(source_bmd.width,source_bmd.height,true,0xFF0000FF);
  8. temp.draw(positive_two_color);
  9. var negative_two_color:BitmapData=new BitmapData(source_bmd.width,source_bmd.height,true,0xFFFF0000);
  10. negative_two_color.copyChannel(temp,positive_two_color.rect,new Point(), BitmapDataChannel.BLUE, BitmapDataChannel.ALPHA);

Again, I'm sure there are other ways to skin this cat. I created a BLUE "temp" BitmapData, then drew the "positive shape" on it. I then copy the BLUE Channel into the ALPHA channel of a RED BitmapData, which creates an image with inverted RED and ALPHA from the "positive shape".

Step 3 : Extract the "component" BitmapDatas from the positive and negative BitmapDatas. This requires a few steps:

Create a loop which:

  1. finds the first non transparent pixel more info
  2. Does a FloodFill with Blue on that pixel
  3. Create a new BitmapData, and copy the BLUE Channel into it, add this to the "found" items
  4. Remove the Blue from the original by using a transparent FloodFill

Do this for both the "positive" and inverse "negative" BitmapDatas and store the discovered "component shapes" in a vector or an array.

Here's my code for doing so:

PLAIN TEXT
Actionscript:
  1. protected static function extractShapesFromMonochrome(bmd:BitmapData):Vector.<BitmapData>{
  2.     var scan_y:uint=0;
  3.     var non_trans:Point;
  4.     var found:Vector.<BitmapData>=new Vector.<BitmapData>();
  5.     var copy_bmd:BitmapData;
  6.     while(scan_y<bmd.height){
  7.         non_trans=BitmapDataUtil.getFirstNonTransparentPixel(bmd,scan_y);
  8.         if(non_trans==null)return found;
  9.         bmd.floodFill(non_trans.x,non_trans.y,0xFF0000FF);//fill with blue
  10.         copy_bmd=new BitmapData(bmd.width,bmd.height,true,0xFFFF0000);
  11.         copy_bmd.copyChannel(bmd,bmd.rect,new Point(),BitmapDataChannel.BLUE , BitmapDataChannel.ALPHA);
  12.         bmd.floodFill(non_trans.x,non_trans.y,0x00000000);//fill with blue
  13.         found.push(copy_bmd);
  14.         scan_y=non_trans.y;
  15.     }
  16.     return found;
  17. }

That pretty much does it. The next step is to analyze the discovered shapes and generate vector points to work with... but that's another blog post.

Posted in AS3, experiment, Flash | 4 Comments »

« Previous Entries
Next Entries »