Textured text in Actionscript - apache-flex

Question

There is any way to make a text "textured" - with a result similar to this: http://www.entheosweb.com/fireworks/patterned_text.asp
In Flex (so using AS3)?
I though it was a simple issue, but I'm stuck: i'm googling it from days and was not able to find aa way or workaround to do it...

Answer 1

The rough idea is this:
Create a TextField with whatever font you need, and write whatever text you want in there.
Create a new BitmapData object and draw() the TextField so that you get a bitmap representation of it.
Get your texture as a BitmapData object (if you load in a jpg, it'll be in the Bitmap that you get after it's loaded)
Create a new BitmapData object and use copyPixels() to draw your texture, while using the first BitmapData object (the blitted TextField) as an alpha mask: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#copyPixels()
Voila, textured text.
Let me know if you need some code, but it should be pretty straightforward
Edit with code:
package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
public class TestTexturedText extends Sprite
{
private var m_text:TextField = null; // the TextField that we use to write our text
private var m_texture:BitmapData = null; // the texture that we're going to texture our TextField with
private var m_textBMD:BitmapData = null; // the BitmapData that we use to draw our TextField
private var m_drawPoint:Point = new Point; // Point used in drawing the final BitmapData
private var m_drawRect:Rectangle = new Rectangle;// the Rectangle we use to determine which part of the texture to take
// the texture we're using
[Embed(source="texture.jpg")]
private var m_textureImage:Class;
public function TestTexturedText()
{
this._createText( "Trebuchet Ms", 50.0 ); // create our textfield
this._getTexture(); // get our texture
// create textured text 1
var bmd:BitmapData = this.getTexturedText( "hello world" );
var b:Bitmap = new Bitmap( bmd );
b.x = 250.0;
b.y = 50.0;
this.addChild( b );
// create textured text 2
bmd = this.getTexturedText( "testing" );
b = new Bitmap( bmd );
b.x = 250.0;
b.y = 100.0;
this.addChild( b );
}
/**
* Get a BitmapData of the text we want, textured
* #param text The text we're looking at
* #param randomPos Should we take a random position from our text, or just start at (0,0)?
* #return A BitmapData object containing our textured text
*/
public function getTexturedText( text:String, randomPos:Boolean = true ):BitmapData
{
// set the text
this.m_text.text = text;
var tw:int = int( this.m_text.width + 0.5 ); // quick conver to int without clipping
var th:int = int( this.m_text.height + 0.5 );
// reuse our previous BitmapData if we can, rather than always creating a new one
if ( this.m_textBMD == null || this.m_textBMD.width < tw || this.m_textBMD.height < th )
this.m_textBMD = new BitmapData( tw, th, true, 0x00000000 );
else
this.m_textBMD.fillRect( this.m_textBMD.rect, 0x00000000 ); // clear the bitmapdata of the old rendering
// draw our text
this.m_textBMD.draw( this.m_text, null, null, null, null, true );
// set our draw rect position
this.m_drawRect.x = ( randomPos ) ? Math.random() * ( this.m_texture.width - tw ) : 0.0;
this.m_drawRect.y = ( randomPos ) ? Math.random() * ( this.m_texture.height - tw ) : 0.0;
this.m_drawRect.width = tw;
this.m_drawRect.height = th;
// get a new bitmap data (that we'll return) and copy our pixels, using the first bmd as an alpha mask
var ret:BitmapData = new BitmapData( tw, th, true, 0x00000000 );
ret.copyPixels( this.m_texture, this.m_drawRect, this.m_drawPoint, this.m_textBMD, this.m_drawPoint );
return ret;
}
// creates the TextField that we'll use to write our text
private function _createText( font:String, size:Number ):void
{
var tf:TextFormat = new TextFormat( font, size );
this.m_text = new TextField;
this.m_text.defaultTextFormat = tf;
this.m_text.autoSize = TextFieldAutoSize.LEFT;
// debug add it to the stage
this.m_text.x = 250.0;
this.addChild( this.m_text );
}
// gets the texture that we'll use to create our text
private function _getTexture():void
{
this.m_texture = ( ( new this.m_textureImage ) as Bitmap ).bitmapData;
// debug add it to the stage
var debug:Bitmap = new Bitmap( this.m_texture );
debug.scaleX = debug.scaleY = 0.2;
this.addChild( debug );
}
}
}
Some points:
It'll take a minor bit of work to turn it into a class - this is a main class (as in I use it to run the application)
Edit the m_textureImage embed to point to the texture you want to use, or alternatively, load one in.
Just call the function getTexturedText() to get a BitmapData with the text that you want
You can remove where I add the different items (texture, textfield, result) to the stage. That's just to show you what's going on
This is pure AS3, but it'll also work in flex

Answer 2

It's been a while since I used ActionScript, but I could give some ideas.
Simplest solution I can think of is that you can load an image in a sprite and then mask it using another sprite which has embedded text.
Other option, more difficult, is to render text as shapes by manually defining each letter as points. Then you could use Papervision3D to texture these shapes. I have not used Papervision3D before but as any other game engine allows texturing this should be possible.

Answer 3

As others have answered, using the text as a mask for an image is how this can be achieved in Flash or Flex.
The answer by divillysausages is a good one, but since you comment there that you are confused by the absence of Flex markup in that example, here is a minimal example in MXML markup:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationComplete="img.mask=txt" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas>
<mx:Text id="txt" cacheAsBitmap="true" fontSize="48" fontWeight="bold" text="LOREM IPSUM" />
<mx:Image id="img" cacheAsBitmap="true" autoLoad="true" source="http://farm3.static.flickr.com/2783/4092743591_3fb90fa599.jpg" />
</mx:Canvas>
</mx:Application>
The principle is the same as in the other answers, the text has to be a bitmap to be used as a mask for the image (here achieved by cacheAsBitmap="true").