UIComponent Instead of Sprite & Blending is Fun

I've been continuing to experiment with Flex in the hopes of coming to fruition with a few side projects. And while pursuing that, I keep running into sample code that is pretty muched geared completely for the Flash environment. That makes sense and is ok by me, but it does necessitate some modifications in order to get it to play nicely with Flex.

First and foremost is that one cannot add a Sprite directly to a Canvas ... ok, one may be able to do this, but I have not been able. So, to work around this, I looked at the handy Adobe docs to discover that a UIComponent is what all the cool kids ought to be using. The inheritance chain goes like this:

UIComponent -> FlexSprite -> Sprite -> DisplayObjectContainer -> InteractiveObject -> DisplayObject -> EventDispatcher -> Object

UIComponent hits the spot as it is the first object to offer such wonderful amenities like: id, width, x and y. That's some good stuff.

And now something completely different. (but still related)

I had a chance to play with BlendMode and it is rather neat, though I don't have an immediate idea to recommend its use. The gist is that you have multiple overlaying BitMaps and you tell Flash how it ought to render them based on some established rules. For this example, I'll look at BlendMode.DARKEN. As I understand it, the application of this constant will cause Flash to drop out any pixels colored at less than 50% gray.

It let's us take an image containing text like this:

note: I originally had a white background, but then changed to gray to make it a little more obvious what was going on.

and superimpose it on an image like this:

for the final effect being something like:

-= working on embedding the flash, but for now click to see an example of UIComponent and Blend =-

There is more than one way to skin a cat here, but I have function, doInit, called at creationComplete. It creates a new UIComponent and I add to it the text image as an instance of a BitmapAsset. On that BitMapAsset, the blendMode is set to BlendMode.DARKEN. The UIComponent is placed on top of the graphic and Flash does the heavy lifting:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" 
                backgroundGradientColors="[#FFFFFF, #FFFFFF]"
                creationComplete="doInit()" viewSourceURL="srcview/index.html">

<mx:Script>
     <![CDATA[
          import mx.controls.TextInput;
          import mx.core.UIComponent;
          import mx.core.BitmapAsset;
        
          [Embed ("/assets/scene.jpg")]
          [Bindable] private var SceneImage:Class;
        
          [Embed ("/assets/text.jpg")]
          [Bindable] private var TextImage:Class;
        
          private var _text:BitmapAsset;
        
          private function doInit():void {
                        
               _text = new TextImage() as BitmapAsset;
               _text.blendMode = BlendMode.DARKEN;            

               var tempLayer:UIComponent = new UIComponent();
               tempLayer.width = _text.width;
               tempLayer.height = _text.height;
               tempLayer.addChild(_text);
               addChild(tempLayer);
            
          }
        
                
    ]]>
</mx:Script>


<mx:Image source="{SceneImage}" id="imgTarget" />

</mx:Application>