Adobe Flex – Using Embedded Images for Drawing Fills

This drove me Mental I must say (thanks Ed Grimley), that is trying to get the right Flex classes to work together to just draw a rectangle filled with my embedded image.  I did notice some good examples of reading (loading) in an image, then using that image to draw fills with. I needed to do that another way, with images I have already bonded to my app using the [Embed] convention, ex:

[Embed(source="images/metaldots48.png")]
 public var bitmapClass:Class;

What I struggled with was trying to attach (or post) my “Class” image into an instance of the required BitmapData class. The key I found was using the “BitmapAsset” class which is compatible with posting our embedded image into BitmapData objects. That put things together. Since I did not find any example of how to do this, I am making one.

The results will look like this:

results

The Flex Project that has this one piece of code and this image is available here:
http://digitalshowcase.biz/flex/FillsWithEmbeddedImages.zip

The MXML Code: http://digitalshowcase.biz/flex/FillsWithEmbeddedImages.mxml

While I am using the latest/great Flex 4.6 at time of writing, I made this Flex Project compatible with Flex 3.6, all MX, no Spark needed. Certainly the way this works is applicable to any Flex project.  The graphics object drawing can draw into any object that has a graphics component. You’ll know that by seeing “graphics” in the code completion.

I did notice that using a backgroundColor for the Box seems to hide the graphics drawing, so watch out for that. You can draw your own backgrounds using the g.beginFill(0xCCCCCC); method of the graphics object.

- Alan Gruskoff, Digital Showcase LLC