Home Tutorials Forums Articles Blogs Movies Library Employment Press
Old 08-06-2006, 09:50 PM   #1
pet-theory
Registered User
 
Join Date: May 2006
Posts: 25
Default dynamic-gradient mask acts like rectangle

Hi:

I'm trying to:

1) draw a gradient with code
2) use it as a mask on a bitmap

the masked bitmap is embedded and instantiated: new EmbeddedClass()
the mask is created via a new Shape()
that Shape uses the graphics object methods to draw it: beginGradientFill, draw Rect, etc.
the gradient has an alphas array like this: [0, 255], so it goes from visible to invisible (I've checked this)
the actual masking: maskedBitmap.mask=maskShape;

the result is a solid mask, not a gradient mask...how can I apply a dynamic gradient mask?

the code is not pretty but here it goes:

Code:
package {
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BitmapDataChannel;
	import flash.display.DisplayObject;
	import flash.display.InterpolationMethod;
	import flash.display.Shape;
	import flash.display.SpreadMethod;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.DisplacementMapFilter;
	import flash.geom.Matrix;
	import flash.geom.Point;

	public class TestIt extends Sprite
	{
		[Embed(source="images/desert.jpg")] internal var Desert:Class;
		internal var picture:Bitmap;
		internal var rippleMap:BitmapData
		internal var rippleFilter:DisplacementMapFilter;
		internal var offset:Point;
		internal var bandMask:Shape;
		internal var bgPicture:Bitmap;
		public function TestIt()
		{
		//put embedded picture in a bitmap
		picture= new Desert();
		//clone a background for when the foreground picture is partly masked
		bgPicture=new Bitmap(picture.bitmapData.clone());
		addChild(bgPicture);
		addChild(picture);
		//create a displacement map based on blue, with a lot of noise along y
		rippleMap=new BitmapData(picture.width, picture.height/2);
		rippleFilter=new DisplacementMapFilter(rippleMap, new Point(0,50), 100, BitmapDataChannel.BLUE, 0, 55, "clamp", 0, 0);
		//listen to enterframe and animate the filter by continously offsetting the filter's displacement map's perlin noise
		addEventListener(Event.ENTER_FRAME, makeRipple) 
		offset=new Point(0,0);
		//create a gradient to use as a mask
		bandMask=new Shape();
		var colors:Array=[0xffffff, 0x0000FF];
        var alphas:Array=[100,0];
        var ratios:Array=[0, 255];
        var spread:String=SpreadMethod.PAD;
        var inter:String=InterpolationMethod.LINEAR_RGB;
        var focal:int=0
        var mat:Matrix=new Matrix();
        mat.createGradientBox(640, 200, -Math.PI/2);
  	    bandMask.graphics.beginGradientFill("linear",colors,alphas,ratios,mat, spread, inter, focal);
		bandMask.graphics.drawRect(0, 50, 640,200)
		bandMask.graphics.endFill();
		bandMask.blendMode="layer"
		//put the mask on the display list and mask the picture
		addChild (bandMask);
		picture.mask=bandMask;
		}
		
		internal function makeRipple(evt:Event):void {
			//move the first octave of the perlin noise
			offset.x+=.2;
			offset.y+=.6;
			rippleMap.perlinNoise(150,20, 5, 89, true, true, BitmapDataChannel.BLUE, false, [offset]);
			picture.filters=[rippleFilter];
		}
		}
	
	}
basically, I'm using the DisplacementMapFilter to make heat rise from the horizon in the desert, but I'd like the ripples to fade out gradually into the sky by using a gradient mask

I'm considering alternatives, like merging the gradient right onto the displacement map (to fade the perlin noise gradually wherever I want)

that would probably be easier on the processer, less alphaing, but still, I'd like to know how to get a dynamic gradient mask working
pet-theory is offline   Reply With Quote
Old 08-06-2006, 11:02 PM   #2
csdstudio
Registered User
 
Join Date: Jun 2005
Posts: 145
Default

Unless they've changed the mask behavior, masks have always been just on or off. Nothing in between, just based on the shape of the mask, not its color or alpha values.
csdstudio is offline   Reply With Quote
Old 08-06-2006, 11:49 PM   #3
pet-theory
Registered User
 
Join Date: May 2006
Posts: 25
Default Flash 8 supports gradient masks

...so I doubt that AS3 will turn back the clock

but I never actually drew a gradient dynamically in Flash 8, so I don't know if that is possible in 8 or AS3

perhaps in both it is only possible with a gradient created in the IDE, so we have to wait for Blaze? I hope not.
pet-theory is offline   Reply With Quote
Old 08-07-2006, 07:43 AM   #4
Incrue
the ever-living
 
Incrue's Avatar
 
Join Date: Jan 2006
Location: inside this plane
Posts: 113
Send a message via MSN to Incrue
Default

Quote:
Originally Posted by csdstudio
Unless they've changed the mask behavior, masks have always
been just on or off. Nothing in between, just based on the shape of the mask, not its color or alpha values.
And this is what?
http://www.gotoandlearn.com/ (click in Creating alpha masks)
Incrue is offline   Reply With Quote
Old 08-07-2006, 11:25 AM   #5
Tink
Addict
 
Tink's Avatar
 
Join Date: Nov 2001
Location: London
Posts: 2,128
Default

you can create gradient masks by using a BitmapData as the mask (might be Bitmap in AS 3.0).
Tink is offline   Reply With Quote
Old 08-07-2006, 02:14 PM   #6
senocular
six eyes
 
senocular's Avatar
 
Join Date: Jan 2003
Location: San Francisco, CA (USA)
Posts: 7,875
Send a message via ICQ to senocular Send a message via AIM to senocular Send a message via MSN to senocular Send a message via Yahoo to senocular
Default

For AS2 you'd have to use cacheAsBitmap - Id suspect the same might be true for AS3, but I have yet to try it so I am not sure.
__________________
(6)
senocular is offline   Reply With Quote
Old 08-07-2006, 06:19 PM   #7
pet-theory
Registered User
 
Join Date: May 2006
Posts: 25
Default mask with alpha zero still works

I turned the shape mask into a bitmap, as per Tink, but it still does not work.

Then after a little experimentation, I found that even a normal fill with alpha set to zero acts as a mask. Hm.

So maybe this has nothing to do with gradients:

Code:
shapeMask=new Shape();
 shapeMask.graphics.beginFill(0xFFFFFF, 0);
shapeMask.graphics.drawRect(0, 0, 640,200)
shapeMask.graphics.endFill();
bitmapDataMask=new BitmapData(640, 200,true, 0xFFFFFFF)
bitmapDataMask.draw(shapeMask);
bitmapMask=new Bitmap(bitmapDataMask);
//put the mask on the display list and mask the picture
addChild (bitmapMask);
picture.mask=bitmapMask;
A rectangular mask is applied, even though the alpha is zero.

Last edited by pet-theory; 08-07-2006 at 06:28 PM.
pet-theory is offline   Reply With Quote
Old 08-08-2006, 02:32 AM   #8
csdstudio
Registered User
 
Join Date: Jun 2005
Posts: 145
Default

Quote:
Originally Posted by Incrue
And this is what?
http://www.gotoandlearn.com/ (click in Creating alpha masks)
Like I said, unless they've changed it! That is really cool. I stand corrected.
csdstudio is offline   Reply With Quote
Old 08-08-2006, 04:36 AM   #9
gburks
Registered User
 
Join Date: Aug 2006
Posts: 11
Default

This was the tutorial that taught me how to do it (its been available since Flash 8's cacheAsBitmap):

http://www.devx.com/webdev/Article/29296/1954?pf=true

Basically, it says that you need to use ActionScript rather than the designer interface to tell your gradient that it is the mask. Instead of right clicking your mask layer and making it a mask there, use code like this:

Code:
maskee.cacheAsBitmap = true;
maskMC.cacheAsBitmap = true;
maskee.setMask("maskMC");
.. it will cache both the mask and the maskee as a bitmap and make the gradient layer gradually unmask the maskee layer, rather than showing its entire rectangle.
gburks is offline   Reply With Quote
Old 08-08-2006, 10:17 AM   #10
Incrue
the ever-living
 
Incrue's Avatar
 
Join Date: Jan 2006
Location: inside this plane
Posts: 113
Send a message via MSN to Incrue
Default

Quote:
Originally Posted by csdstudio
Like I said, unless they've changed it! That is really cool. I stand corrected.
You sayd
Quote:
masks have -- always -- been just on or off.
Its not -always- cos f8 has changed it from a long time, Bitmapdata masks are not an AS3 new object.
Pet theory was asking how to do in AS3 some old f8 stuff

Last edited by Incrue; 08-08-2006 at 04:47 PM.
Incrue is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Is mask work for dynamic text field ? tiru ActionScript 1.0 (and below) 16 02-05-2007 03:08 PM
dynamic changes in the mask (movie clip does not duplicate itself in the mask layer) enfant2soleil ActionScript 2.0 5 08-12-2005 04:50 PM
Dynamic text under dynamic mask w/ MS+ scroller....... G-Rard B Other Flash General Questions 0 12-22-2004 11:13 PM
Gradient Mask Away Dynamic Text with Scroll c2kman ActionScript 1.0 (and below) 4 03-29-2004 08:39 AM
gradient mask?? Trinidad Animation and Effects 1 07-28-2002 10:46 PM


All times are GMT. The time now is 03:38 AM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.