Monday, July 1, 2013

In Adobe Flex Masking of two images

Hello friends,

I am looking for masking functionality like solid view and when we move move on solid image we are able to show skeleton images of selected portion.
We are googling for masking and find some help.
Below is some action script code of masking gradient ellipse portion in second image.
Here i am taking one group in that i add both images skeleton images on front and solid images on back.
I am applying mask on skeleton image.

Action Script Code :
/ /==============================
// Load an image and add it to the display list.
/* var loader:Loader = new Loader();
var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image1.jpg");
loader.load(url);
this.addChild(loader); */

// Create a Sprite.
var oval:SpriteVisualElement = new SpriteVisualElement();
// Draw a gradient oval.
 var colors:Array = [0x000000, 0x000000];
var alphas:Array = [1, 0.8];
var ratios:Array = [0, 255];
var matrix:Matrix = new Matrix();
matrix.createGradientBox(200, 100, 0, -100, -50);
oval.graphics.beginGradientFill(GradientType.RADIAL,
colors,
alphas,
ratios,
matrix);
oval.graphics.drawEllipse(-100, -50, 200, 100);
oval.graphics.endFill(); 

/* oval.graphics.beginFill(0x000000,1);
oval.graphics.drawCircle(-100, -100, 100);
oval.graphics.endFill(); */
grp.addElement(oval);
// Set cacheAsBitmap = true for both display objects.
img2.cacheAsBitmap = true;
oval.cacheAsBitmap = true;
// Set the oval as the mask for the loader (and its child, the loaded image)
img2.mask = oval;
// Make the oval draggable.
oval.startDrag(true);
/ /==============================
 I am applying above code on creationcomplete event.
So now when i  mouse over then only see skeleton image's eclipse portion on top of solid image.
 
 

No comments: