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

    Problem with setMask

    Sreelash Level 1

      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 mcl:MovieClipLoader = new MovieClipLoader();
      mcl.loadClip("1.jpg",cont);
      var listener:Object = new Object();
      mcl.addListener(listener);
      listener.onLoadInit = function(target_mc:MovieClip){
          //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);

       

      cont.setMask(circle_mc)

       

      function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
          var x:Number = radius;
          var y:Number = radius;
          with (target_mc) {
              beginFill(fillColor, fillAlpha);
              moveTo(x + 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, x, 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, -radius + x, 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, x, -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, radius + x, y);
              endFill();
          }
      }

       

      Thanks and regards,

                       Sreelash

        • 1. Re: Problem with setMask
          NSurveyor Level 2

          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);
          var mcl:MovieClipLoader = new MovieClipLoader();
          mcl.loadClip("1.jpg",img_mc);
          

           

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

          listener.onLoadInit = function(target_mc:MovieClip){
              cont.setMask(circle_mc);
          }
          

           

          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
            Sreelash Level 1

            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
              NSurveyor Level 2

              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
                Sreelash Level 1

                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
                  NSurveyor Level 2

                  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.*;
                  
                  //Load image into 'cont.img_mc'
                  var cont:MovieClip = _root.createEmptyMovieClip("cont",0);
                  var img_mc:MovieClip = cont.createEmptyMovieClip("img_mc",0);
                  var mcl:MovieClipLoader = new MovieClipLoader();
                  var listener:Object = new Object();
                  
                  //When image begins to load, create a new mask.
                  listener.onLoadStart = function(target_mc:MovieClip){
                   var circles_mc:MovieClip = _root.createEmptyMovieClip("circles_mc",10);
                   cont.setMask(circles_mc);
                  }
                  
                  //Once loaded draw circles in a grid and animate.
                  listener.onLoadInit = function(target_mc:MovieClip){
                   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);
                    }
                   }
                  }
                  mcl.addListener(listener);
                  
                  //Grows circle radius
                  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);
                          moveTo(x + 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, x, 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, -radius + x, 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, x, -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, radius + x, 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
                    Sreelash Level 1

                    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
                      NSurveyor Level 2

                      No problem.