7 Replies Latest reply on Aug 19, 2009 9:38 AM by NSurveyor

Hi,

I loaded an image in to a movieclip named cont. Then created another movieclip with a circle shape. Then i tried to mask it. But masking is not working. Can anyone help me to sort out this isssue. The script is given below.

stop();

import mx.transitions.Tween;

var cont:MovieClip = _root.createEmptyMovieClip("cont",0);

var listener:Object = new Object();
//trace(target_mc._width)
}

var circle_mc:MovieClip = this.createEmptyMovieClip("circle_mc", 10);
circle_mc._x = 0;
circle_mc._y = 0;
drawCircle(circle_mc,20, 0xff232f, 100);

function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
with (target_mc) {
beginFill(fillColor, fillAlpha);
curveTo(radius + x, Math.tan(Math.PI / 8) * radius + y, Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
curveTo(-Math.tan(Math.PI / 8) * radius + x, radius+ y, -Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
curveTo(-radius + x, -Math.tan(Math.PI / 8) * radius + y, -Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
curveTo(Math.tan(Math.PI / 8) * radius + x, -radius + y, Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
endFill();
}
}

Thanks and regards,

Sreelash

• ###### 1. Re: Problem with setMask

It appears that you cannot properly apply setMask when the clip is still loading. There are two ways to salvage this.

The first way would be to create another container inside your container. That is, if you created a cont.img_mc, you could then load the image into cont.img_mc instead, while still applying the mask to cont. This works because you are not applying the mask directly to a MovieClip that is undergoing loading. In code, that would be:

```var cont:MovieClip = _root.createEmptyMovieClip("cont",0);
var img_mc:MovieClip = cont.createEmptyMovieClip("img_mc",0);
```

Perhaps a more logical solution would be to simply apply the mask once the content has loaded:

```listener.onLoadInit = function(target_mc:MovieClip){
}
```

The only downside to this is that the circle_mc will be visible as a grey circle until the content has actually loaded. To salvage that, either draw the circle with 0 alpha, or make it invisible afterwards. Either of the following two should work:

```drawCircle(circle_mc, 20, 0xff232f, 0);
```
```drawCircle(circle_mc, 20, 0xff232f, 100);
circle_mc._visible = false;
```

And just curious, if circle_mc is just a mask, why such a particular fill colour?

• ###### 2. Re: Problem with setMask

Hi,

I am trying to make a transition for image gallery using many circles. My doubt is that, can i create more than one movieclip of shape circle and setMask on the image using all those circles.

I have a movieclip named cont. Inside container, another movieclip named img_mc is created in to which the image is loading. Then i had given a setMask with a movieclip of circle shape, (cont.setMask(circle_mc)). Thus everything works fine. Then i tried to create another movieclip of shape circle with name circle_mc1 and given setMask with circle_mc1 to cont, (cont.setMask(circle_mc1)). Now only the second setMask is working, ie. (cont.setMask(circle_mc1)). First setMask is not working. Isn't allowable to write script like that? Please help me.

Thanks and Regards,

Sreelash

• ###### 3. Re: Problem with setMask

As far as I know, a MovieClip can only be masked by a single mask. However, we can remedy the problem by having all of the circles in a single container as well. Say, all of our circles are contained in circles_mc. We can then use:

`cont.setMask(circles_mc);`

with no problem.

To set up our circles_mc, we could do something like:

```var circles_mc:MovieClip = this.createEmptyMovieClip("circles_mc",10);
// Circle 1
var c1_mc:MovieClip = circles_mc.createEmptyMovieClip("c1_mc",0);
c1_mc._x = 0;
c1_mc._y = 0;
drawCircle(c1_mc,20,0xff232f, 100);
// Circle 2
var c2_mc:MovieClip = circles_mc.createEmptyMovieClip("c2_mc",1);
c2_mc._x = 40;
c2_mc._y = 0;
drawCircle(c2_mc,20,0xff232f, 100);
```

Of course if you need to create several circles, it would be best to use a for loop instead of writing repetitive code.

• ###### 4. Re: Problem with setMask

Hi friend, thank you very much. Now its working. Once again thank you nsurveyor. I hope this idea ll be useful in future also.

Regards,

Sreelash

• ###### 5. Re: Problem with setMask

You're welcome.

The following is what I presume you are trying to accomplish (though, I have organized the code slightly differently):

```//Import Tween class
import mx.transitions.Tween;
import mx.transitions.easing.*;

var cont:MovieClip = _root.createEmptyMovieClip("cont",0);
var img_mc:MovieClip = cont.createEmptyMovieClip("img_mc",0);
var listener:Object = new Object();

var circles_mc:MovieClip = _root.createEmptyMovieClip("circles_mc",10);
}

//Once loaded draw circles in a grid and animate.
var r = 20;
var x = Math.ceil(target_mc._width/r/2); // # of circles horizontally
var y = Math.ceil(target_mc._height/r/2);// # of circles vertically
for(var i=0;i<x;i++){
for(var j=0;j<y;j++){
var c_mc = circles_mc.createEmptyMovieClip("circle"+i+"_"+j,i*y+j);
c_mc._x = i*r*2;
c_mc._y = j*r*2;
drawCircle(c_mc,r,0xff0000,100);
animate(c_mc,Strong.easeIn,0,30,2);
}
}
}

function animate(target_mc:MovieClip, ease:Function, startR:Number, endR:Number, duration:Number){
var widthT:Tween = new Tween(target_mc, "_width", ease, startR*2, endR*2, duration, true);
var heightT:Tween = new Tween(target_mc, "_height", ease, startR*2, endR*2, duration, true);
}
//Draws circle
function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
var x:Number = 0;
var y:Number = 0;
with (target_mc) {
beginFill(fillColor, fillAlpha);
curveTo(radius + x, Math.tan(Math.PI / 8) * radius + y, Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
curveTo(-Math.tan(Math.PI / 8) * radius + x, radius+ y, -Math.sin(Math.PI / 4) * radius + x, Math.sin(Math.PI / 4) * radius + y);
curveTo(-radius + x, -Math.tan(Math.PI / 8) * radius + y, -Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
curveTo(Math.tan(Math.PI / 8) * radius + x, -radius + y, Math.sin(Math.PI / 4) * radius + x, -Math.sin(Math.PI / 4) * radius + y);
endFill();
}
}
```

With this code, whenever an image is loaded using:

```mcl.loadClip("whatever.jpg",img_mc);
```

the circle transition effect will play.

• ###### 6. Re: Problem with setMask

Hi Nsurveyor. I don know how to say thanks to u. You made everything very clear to me. Thank you very much.

Regards,

Sreelash

• ###### 7. Re: Problem with setMask

No problem.