sakri rosenstrom blog

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:




public function addImage(e:MouseEvent):void {


  _file_ref = new FileReference();


  _file_ref.addEventListener( Event.SELECT, handleFileSelect,false,0,true );


   var filter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");


  _file_ref.browse([filter]);


}

2) Load the selected file:


PLAIN TEXT
Actionscript:




protected function handleFileSelect(e:Event):void {


  _file_ref.removeEventListener( Event.SELECT, handleFileSelect );


  _file_ref.addEventListener(Event.COMPLETE, handleFileOpen,false,0,true );


  _file_ref.load();


}

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:




protected function handleFileOpen(e:Event):void {


  _file_ref.removeEventListener(Event.COMPLETE, handleFileOpen );


  var data:ByteArray = _file_ref.data as ByteArray;


  _img_loader=new Loader();


  _img_loader.loadBytes(data);


  _img_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,imageLoadComplete,false,0,true);


}

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:




protected function imageLoadComplete(e:Event):void{


  _img_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,imageLoadComplete);


  var bmd:BitmapData=Bitmap(_img_loader.content).bitmapData;


  var bm:Bitmap=new Bitmap(bmd);


  EditManager(_flow.interactionManager).insertInlineGraphic(bm,bm.width,bm.height);


  _flow.flowComposer.updateAllContainers();


}

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 | 7 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:




protected function testExtrude():void{


    var points:Vector.<Point>=createCircularPath(new Point(300,300),200,250,50);


    var negative_shape_points:Vector.<Point>=createCircularPath(new Point(300,300),90,190,40);


    var points2:Vector.<Point>=createCircularPath(new Point(550,550),80,20,20);


    var points3:Vector.<Point>=createCircularPath(new Point(300,650),80,20,20);


    var points4:Vector.<Point>=createCircularPath(new Point(650,300),80,20,20);


    _extruded=SimpleShapeExtruderDrawAPI.createExtrudedShapeFromPoints(100,


                                                                Vector.<Vector.<Point>>([points,points2,points3,points4]),


                                                                Vector.<Vector.<Point>>([negative_shape_points]),


                                                                Math.random()*0xFFFFFF,0xFF000000+Math.random()*0xFFFFFF


                                                                );


    _extruded.adjustCenter(300,300);


    _extruded.x=300;


    _extruded.y=300;


    addChild(_extruded);


    addEventListener(Event.ENTER_FRAME,rotateExtruded);


}

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, Flash, experiment | 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:




public static function toMonoChrome(source:BitmapData,mono_color:uint=0xFF000000):BitmapData{


    var bmd:BitmapData=source.clone();


    bmd.threshold(bmd,bmd.rect,new Point(),">",0x00000000,mono_color);


    return bmd;


}

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


PLAIN TEXT
Actionscript:




//create the monochrome for extracting "positive shapes"


var positive_two_color:BitmapData=new BitmapData(source_bmd.width,source_bmd.height,true,0x00);


positive_two_color.draw(source_bmd);


positive_two_color=BitmapDataUtil.toMonoChrome(positive_two_color,0xFFFF0000);


 


//create the monochrome for extracting "negative shapes"


var temp:BitmapData=new BitmapData(source_bmd.width,source_bmd.height,true,0xFF0000FF);


temp.draw(positive_two_color);


var negative_two_color:BitmapData=new BitmapData(source_bmd.width,source_bmd.height,true,0xFFFF0000);


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:

finds the first non transparent pixel more info
Does a FloodFill with Blue on that pixel
Create a new BitmapData, and copy the BLUE Channel into it, add this to the "found" items
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:




protected static function extractShapesFromMonochrome(bmd:BitmapData):Vector.<BitmapData>{


    var scan_y:uint=0;


    var non_trans:Point;


    var found:Vector.<BitmapData>=new Vector.<BitmapData>();


    var copy_bmd:BitmapData;


    while(scan_y<bmd.height){


        non_trans=BitmapDataUtil.getFirstNonTransparentPixel(bmd,scan_y);


        if(non_trans==null)return found;


        bmd.floodFill(non_trans.x,non_trans.y,0xFF0000FF);//fill with blue


        copy_bmd=new BitmapData(bmd.width,bmd.height,true,0xFFFF0000);


        copy_bmd.copyChannel(bmd,bmd.rect,new Point(),BitmapDataChannel.BLUE , BitmapDataChannel.ALPHA);


        bmd.floodFill(non_trans.x,non_trans.y,0x00000000);//fill with blue


        found.push(copy_bmd);


        scan_y=non_trans.y;


    }


    return found;


}

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, Flash, experiment | 4 Comments »

SoTexty AS3 Text Effects Framework

February 27th, 2009

The core of my FITC presentation revolved around a new as3 text effects framework that I've been working on, which I'm currently calling "SoTexty".

The basic premise of the framework is that it sets up the various "stages" or "states" of a text effect:

Intro : how the effect appears
Loop : the "main" effect, this can loop between 1 and infinity times
Exit : how the effect goes away
MouseOver : from the loop effect, an optional behaviour reacting to user interactions
MouseOut : either a "reverse" of the mouseOver, or a different effect
MouseClick : either a link to the "exit", or an alternate effect

Some of these "states" or "stages" are optional. The framework expects a textfield, along with a list of parametrized effects which are assigned to the various "stages", and then produces the complete effect.

The Framework also comes with a "catalogue" of effect types, which for the moment are:

BlockEffect : an effect which animates the entire text as one
SplitEffect : animates the characters in the text individually
ParticleEffect : animates "particles" which are assigned to populate the "shape" of individual characters
VectorEffect : animates the vector shapes (points) which construct the individual characters

A basic example of a SoTexty effect can be produced with code that looks something like:


PLAIN TEXT
Actionscript:




override protected function init(tf:TextField):void{


    


    this._intro_effect=new TextEffect(tf);


    var f:Fade=new Fade(2,0,1);


    this._intro_effect.addEffect(f);


    


    this._loop_effect=new TextEffect(tf);


    var rf:RandomFade=new RandomFade(0,1,1,3);


    this._loop_effect.addEffect(rf);


 


    this._exit_effect=new TextEffect(tf);


    f=new Fade(3,1,0);


    f.easing=Elastic.easeOut;


    this._exit_effect.addEffect(f);


 


}

All SoTexty Effects extend one of the "catalogue effect" types, and populates instances of "effect states" with effects like Fade, Move, Scale etc.

The framework uses Grant Skinners GTween for animations. I intend to put it up on google code once I've sorted out some kinks. Hopefully in the coming few months.

The main idea is to take out the "donkey work" of generating common effects for loaders, between game levels, intros etc. Leaving the programmer to focus on the interesting bits of the application (game play etc.)

Click the images below for a few quick samples:

Block Effect