hey guys whats up?
Does any one have any idea how the masking on the following link was done on the pictures?Are they using setMask() or is it some thing else? It would be great if any one could give me a tip or some tutorial about it.
thanx
http://www.fabrislane.co.uk/launch.html
This is done with setMask(). One mask can only mask one clip. So if you want many clips masking something, you have to do a little trick. You create an empty clip and make that the mask. Then you create a bunch of little clips inside that empty clip. Since the empty clip is a mask, then all the content (all the little clips) inside the mask will be the spots through which the background will show.
Check out this:
http://www.cfhosting.it/jt/extras/fabrisLaneMask.zip
This .fla does something very similar to the fabris lane site. I’ve stripped it down to make it very simple. Here are some of the things I’ve stripped down:
The masked image and standard image at fabris lane are both of very similar hues and tones, so the transition between the two doesn’t look that extreme, instead it looks rather smooth. My example uses a reddish image and a blueish image. That way you can see the contrast between what is masked and what is not more easily. Also, the way the masks follow the mouse is more complicated at fabris lane than mine, I kept mine simple to make it more understandable. There are also a few colored rectangles that fade in and out for the masks at fabris lane, and I’ve only created one of these just so you can see it, but know that the fabris lane has more of these that you can code in if you like.
And, for good measure, here’s the code:
// create mouse listener
// -------------------------------------------------
var moveListener = new Object();
moveListener.onMouseMove = function() {
if ((Math.ceil(_xmouse) % 15) == 0) createMask(_xmouse);
} // end onMouseMove()
Mouse.addListener(moveListener);
// create and set the mask clip, an empty clip
// -------------------------------------------------
_root.createEmptyMovieClip("mask_mc", 0);
_root.image1_mc.setMask(_root.mask_mc);
// this function creates tall, thin rectangles that then
// get smaller and disappear.
// Since these rectangles are clips inside mask_mc,
// they serve as a mask for image1_mc.
// -------------------------------------------------
i = 1;
function createMask(start_x) {
_root.mask_mc.createEmptyMovieClip("mask" + i, i);
with (_root.mask_mc["mask" + i]) {
_x = start_x;
_y = 0;
moveTo(0, 0);
beginFill(0xFF0000, 100);
lineTo(30, 0);
lineTo(30, 200);
lineTo(0, 200);
lineTo(0, 0);
endFill();
} // end with (_root.mask_mc["mask" + i])
_root.mask_mc["mask" + i].onEnterFrame = function() {
if (this._xscale > 0) {
// make the rectangle get thinner
this._xscale -= 10;
// this makes the clip chase the mouse left or right,
// depending on whether the mouse is right or left of the clip
if (this._x > _xmouse) {
this._x -= ((this._x - _xmouse)/15);
} else {
this._x += ((_xmouse - this._x)/15);
} // end if (this._x > start_x)
} else {
removeClip(this);
delete this.onEnterFrame;
} // end if (this._xscale > 0)
} // end onEnterFrame()
i += 1;
// create colored square that fades
// this goes over the mask just to give a nice little tone.
// the fabris lane site has two or three of these going on
_root.createEmptyMovieClip("mask" + i, i);
with (_root["mask" + i]) {
_x = start_x - 5;
_y = 0;
moveTo(0, 0);
beginFill(0xFF7700, 100);
lineTo(40, 0);
lineTo(40, 200);
lineTo(0, 200);
lineTo(0, 0);
endFill();
_alpha = 30;
} // end with (_root["mask" + i])
_root["mask" + i].onEnterFrame = function() {
if (this._xscale > 0) {
// make the rectangle get thinner
this._xscale -= 10;
// this makes the clip chase the mouse left or right,
// depending on whether the mouse is right or left of the clip
if (this._x > _xmouse) {
this._x -= ((this._x - _xmouse)/5);
} else {
this._x += ((_xmouse - this._x)/5);
} // end if (this._x > start_x)
this._alpha -= 3;
} else {
removeClip(this);
delete this.onEnterFrame;
} // end if (this._xscale > 0)
} // end onEnterFrame()
i += 1;
} // end createMask()
// this function deletes a clip
// -------------------------------------------------
function removeClip(clip) {
clip.removeMovieClip();
} // end removeClip()
hi.
thanx alot I totally get it now. thanx again.
cheers