Circle Preloader Mask Not Working

  • AmieCutie
  • Newbie
  • Newbie
  • User avatar
  • Posts: 12

Post 3+ Months Ago

So I've made a circular preloader made with some shapes and masks. Everything like this works. What I want to do now is add a movieclip of animations to the stage and make it look like this movie clip is in the progress circle of the preloader. So what I did is create a movieclip container to hold all of the shapes that animate on loading. I then used that movieclip container to mask the movieclip of animations.

Below is my actionscript. Down in the area where it says // Particles is where the mask is applied. It's line 143.

What happens when published is the movieclip of animations (the particles) loads over the shapes, but all of their masks are gone. So it's as if when I applied the mask to the container, all of it's children and their masks stopped working. Is there a way to correctly do this?

Code: [ Select ]
package body {

    import flash.display.*;
    import flash.events.*;
    import flash. net.*;
    import flash.utils.Timer;

    import com.greensock.*;
    import com.greensock.easing.*;
    
    import com.motionreactor.pulseparticles.*
    
    public class PreLoader extends MovieClip {

        //CUSTOM VARIABLES
        private var stage_color = 0xe5e5e5;            //the color of the stage or the color of the background the preloader will sit on.
        private var background_color = 0xc6c6c6;        //color of the ghost or faint silhouette.
        private var circle_color = 0x4d4d4d;          //color of the circle
        private var inner_radius:Number = 40;            //the inner radius of the circle.
        private var outer_radius:Number = 100;            //the outer radius of the circle.
        private var rotate_direction:String = "cw";     //"ccw" is counter clockwise & "cw" is clockwise.
        private var transition_out:String = "fade";     //"flash" or "fade"
        
        public var preloader:Sprite = new Sprite();
        public var left_masked:Sprite = new Sprite();
        public var right_masked:Sprite = new Sprite();
        
        public function PreLoader():void {
        
            // the dot_mc is the symbol that's on the timeline. Because it's only used for placement it's hidden.
            dot_mc.visible = false;
        
            // create the "preloader" sprite to hold everything
            addChild(preloader);
            preloader.x = stage.stageWidth *.5;
            preloader.y = stage.stageHeight *.5;
            preloader.blendMode = "layer";
        
            // create the background circle
            var background_circle:Sprite = new Sprite();
            preloader.addChild(background_circle);
            
            var background_outer:Shape = new Shape();
            background_outer.graphics.beginFill(background_color);
            background_outer.graphics.drawCircle(0,0,outer_radius);
            background_outer.graphics.endFill();
            background_circle.addChild(background_outer);
            
            var background_inner:Shape = new Shape();
            background_inner.graphics.beginFill(stage_color);
            background_inner.graphics.drawCircle(0,0,inner_radius);
            background_inner.graphics.endFill();
            background_circle.addChild(background_inner);
        
        
            // Create the Progress Container Mask
            /////////////////////////////////////////////////////////////////////////////
            var circleContainer:MovieClip = new MovieClip();
            preloader.addChild(circleContainer);
            
            // Create the left half
            /////////////////////////////////////////////////////////////////////////////
            circleContainer.addChild(left_masked);
            
            var left_circle:Sprite = new Sprite();
            left_masked.addChild(left_circle);
            
            var left_outer:Shape = new Shape();
            left_outer.graphics.beginFill(circle_color);
            left_outer.graphics.drawCircle(0,0,outer_radius);
            left_outer.graphics.endFill();
            left_circle.addChild(left_outer);
            
            var left_inner:Shape = new Shape();
            left_inner.graphics.beginFill(stage_color);
            left_inner.graphics.drawCircle(0,0,inner_radius);
            left_inner.graphics.endFill();
            left_circle.addChild(left_inner);
            
            var left_rec:Shape = new Shape();
            left_rec.graphics.beginFill(0x000000);
            left_rec.graphics.drawRect(0, -outer_radius, outer_radius* 2, outer_radius* 2);
            left_rec.graphics.endFill();
            left_masked.addChild(left_rec);
            
            left_circle.mask = left_rec;
            
            var left_rec2:Shape = new Shape();
            left_rec2.graphics.beginFill(0x000000);
            left_rec2.graphics.drawRect(-outer_radius* 2, -outer_radius, outer_radius* 2, outer_radius* 2);
            left_rec2.graphics.endFill();
            circleContainer.addChild(left_rec2);
            
            left_masked.mask = left_rec2;
        
            // create the right half
            /////////////////////////////////////////////////////////////////////////////
            circleContainer.addChild(right_masked);
            
            var right_circle:Sprite = new Sprite();
            right_masked.addChild(right_circle);
            
            var right_outer:Shape = new Shape();
            right_outer.graphics.beginFill(circle_color);
            right_outer.graphics.drawCircle(0,0,outer_radius);
            right_outer.graphics.endFill();
            right_circle.addChild(right_outer);
            
            var right_inner:Shape = new Shape();
            right_inner.graphics.beginFill(stage_color);
            right_inner.graphics.drawCircle(0,0,inner_radius);
            right_inner.graphics.endFill();
            right_circle.addChild(right_inner);
            
            var right_rec:Shape = new Shape();
            right_rec.graphics.beginFill(0x000000);
            right_rec.graphics.drawRect(-outer_radius* 2, -outer_radius, outer_radius* 2, outer_radius* 2);
            right_rec.graphics.endFill();
            right_masked.addChild(right_rec);
            
            right_circle.mask = right_rec;
            
            var right_rec2:Shape = new Shape();
            right_rec2.graphics.beginFill(0x000000);
            right_rec2.graphics.drawRect(0, -outer_radius, outer_radius* 2, outer_radius* 2);
            right_rec2.graphics.endFill();
            circleContainer.addChild(right_rec2);
            
            right_masked.mask = right_rec2;

            // Particles
            /////////////////////////////////////////////////////////////////////////////
            var myPulseParticles = new PulseParticles(206, 206, 80, 1, SpawnType.RANDOM);
            // Adding Particle Types
            myPulseParticles.addParticle(25, 0xFFFFFF, 1, 30, 150, 1, 0.02);
            myPulseParticles.addParticle(15, 0x0066FF, 1, 60, 150, 1, 0.02, BlendMode.OVERLAY);
            myPulseParticles.addParticle(25, 0x0033FF, 1, 30, 150, 1, 0.01, BlendMode.SCREEN);
            // Add to the Display List
            circleContainer.addChild(myPulseParticles);
            myPulseParticles.x = -103;
            myPulseParticles.y = -103;
            // Mask it
            myPulseParticles.mask = circleContainer;
            // Starting Particle Spawning
            myPulseParticles.startSpawn();

            // Add event listeners for the preload
            this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, loadingbits);
            this.loaderInfo.addEventListener(Event.COMPLETE, loadingcomplete);
        }
        
            // while loading…
            /////////////////////////////////////////////////////////////////////////////
            public function loadingbits(myevent:Event):void {
                MovieClip(root).stop();//stop the main timeline
                var myprogress:Number = myevent.target.bytesLoaded/myevent.target.bytesTotal;
                
                // counter clockwise movment
                if (rotate_direction == "ccw") {
                    if (myprogress <= .5) {
                        trace("left"+myprogress);
                        left_masked.rotation = -3.6 * (myprogress*100);
                    } else {
                        trace("right"+myprogress);
                        left_masked.rotation = -180;
                        right_masked.rotation = -3.6 * ((myprogress*100) - 50);
                    }
                    
                // clockwise movement
                } else {
                    if (myprogress <= .5) {
                        right_masked.rotation = 3.6 * ((myprogress*100));
                    } else {
                        right_masked.rotation = 180;
                        left_masked.rotation = (3.6 * (myprogress*100))-180;
                    }
                }
            }
            
        /////////////////////////////////////////////////////////////////////////////
        //100%… loaded
        private function loadingcomplete(event:Event):void {
        
            this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, loadingbits);
            this.loaderInfo.removeEventListener(Event.COMPLETE, loadingcomplete);
        
            if (transition_out == "flash") {
                flashOut();
            } else {
                fadeOut();
            }
        }
        
        //transitions out////////////////////////////////////////////////////////////
        public function flashOut():void {
            var myCount:Number = 0;
            var myTimer:Timer =new Timer(25,100);
            myTimer.start();
            myTimer.addEventListener(TimerEvent.TIMER, afterCount);
            
            function afterCount(myevent:TimerEvent):void {
                 myCount += .1;
                 if (myCount > .5 && myCount <= .7) {
                    preloader.alpha = 0;
                 } else if (myCount > .8 && myCount <= 1) {
                    preloader.alpha = 1;
                 } else if (myCount > 1.1 && myCount <= 1.3) {
                    preloader.alpha = 0;
                 } else if (myCount > 1.4 && myCount <= 1.6) {
                    preloader.alpha = 1;
                 } else if (myCount > 1.7 && myCount <= 1.9) {
                    preloader.alpha = 0;
                 } else if (myCount > 2 && myCount <= 2.<!-- s8) --><img src=\"{SMILIES_PATH}/icon_cool.gif\" alt=\"8)\" title=\"Cool\"><!-- s8) --> {
                    preloader.alpha = 1;
                 } else if (myCount > 2.8 && myCount <= 3) {
                    fadeDown();    
                 }
            }
            
            function fadeDown():void {
                myTimer.stop();
                myTimer.removeEventListener(TimerEvent.TIMER, afterCount);
                var myCount1:Number = 1;
                var myTimer1:Timer =new Timer(1,1000);
                myTimer1.start();
                myTimer1.addEventListener(TimerEvent.TIMER, afterCount1);
                
                function afterCount1(myevent:TimerEvent):void {
                    myCount1 -= .02;
                    preloader.alpha = myCount1;
                    if (myCount1 <= -1) {
                        moveMain();
                    }
                }
                
                function moveMain():void {
                    myTimer1.stop();
                    myTimer1.removeEventListener(TimerEvent.TIMER, afterCount1);
                    playMain();
                }
            }
        }
        
        public function fadeOut() {
            var myCount1:Number = 1;
            var myTimer1:Timer =new Timer(1,1000);
            myTimer1.start();
            myTimer1.addEventListener(TimerEvent.TIMER, afterCount1);
            
            function afterCount1(myevent:TimerEvent):void {
                myCount1 -= .02;
                preloader.alpha = myCount1;
                if(myCount1 <= -1){
                    moveMain();
                }
            }
            
            function moveMain():void {
                myTimer1.stop();
                myTimer1.removeEventListener(TimerEvent.TIMER, afterCount1);
                playMain();
            }
        }
        
        private function playMain():void {
            MovieClip(root).play();
        }
    }    
}
  1. package body {
  2.     import flash.display.*;
  3.     import flash.events.*;
  4.     import flash. net.*;
  5.     import flash.utils.Timer;
  6.     import com.greensock.*;
  7.     import com.greensock.easing.*;
  8.     
  9.     import com.motionreactor.pulseparticles.*
  10.     
  11.     public class PreLoader extends MovieClip {
  12.         //CUSTOM VARIABLES
  13.         private var stage_color = 0xe5e5e5;            //the color of the stage or the color of the background the preloader will sit on.
  14.         private var background_color = 0xc6c6c6;        //color of the ghost or faint silhouette.
  15.         private var circle_color = 0x4d4d4d;          //color of the circle
  16.         private var inner_radius:Number = 40;            //the inner radius of the circle.
  17.         private var outer_radius:Number = 100;            //the outer radius of the circle.
  18.         private var rotate_direction:String = "cw";     //"ccw" is counter clockwise & "cw" is clockwise.
  19.         private var transition_out:String = "fade";     //"flash" or "fade"
  20.         
  21.         public var preloader:Sprite = new Sprite();
  22.         public var left_masked:Sprite = new Sprite();
  23.         public var right_masked:Sprite = new Sprite();
  24.         
  25.         public function PreLoader():void {
  26.         
  27.             // the dot_mc is the symbol that's on the timeline. Because it's only used for placement it's hidden.
  28.             dot_mc.visible = false;
  29.         
  30.             // create the "preloader" sprite to hold everything
  31.             addChild(preloader);
  32.             preloader.x = stage.stageWidth *.5;
  33.             preloader.y = stage.stageHeight *.5;
  34.             preloader.blendMode = "layer";
  35.         
  36.             // create the background circle
  37.             var background_circle:Sprite = new Sprite();
  38.             preloader.addChild(background_circle);
  39.             
  40.             var background_outer:Shape = new Shape();
  41.             background_outer.graphics.beginFill(background_color);
  42.             background_outer.graphics.drawCircle(0,0,outer_radius);
  43.             background_outer.graphics.endFill();
  44.             background_circle.addChild(background_outer);
  45.             
  46.             var background_inner:Shape = new Shape();
  47.             background_inner.graphics.beginFill(stage_color);
  48.             background_inner.graphics.drawCircle(0,0,inner_radius);
  49.             background_inner.graphics.endFill();
  50.             background_circle.addChild(background_inner);
  51.         
  52.         
  53.             // Create the Progress Container Mask
  54.             /////////////////////////////////////////////////////////////////////////////
  55.             var circleContainer:MovieClip = new MovieClip();
  56.             preloader.addChild(circleContainer);
  57.             
  58.             // Create the left half
  59.             /////////////////////////////////////////////////////////////////////////////
  60.             circleContainer.addChild(left_masked);
  61.             
  62.             var left_circle:Sprite = new Sprite();
  63.             left_masked.addChild(left_circle);
  64.             
  65.             var left_outer:Shape = new Shape();
  66.             left_outer.graphics.beginFill(circle_color);
  67.             left_outer.graphics.drawCircle(0,0,outer_radius);
  68.             left_outer.graphics.endFill();
  69.             left_circle.addChild(left_outer);
  70.             
  71.             var left_inner:Shape = new Shape();
  72.             left_inner.graphics.beginFill(stage_color);
  73.             left_inner.graphics.drawCircle(0,0,inner_radius);
  74.             left_inner.graphics.endFill();
  75.             left_circle.addChild(left_inner);
  76.             
  77.             var left_rec:Shape = new Shape();
  78.             left_rec.graphics.beginFill(0x000000);
  79.             left_rec.graphics.drawRect(0, -outer_radius, outer_radius* 2, outer_radius* 2);
  80.             left_rec.graphics.endFill();
  81.             left_masked.addChild(left_rec);
  82.             
  83.             left_circle.mask = left_rec;
  84.             
  85.             var left_rec2:Shape = new Shape();
  86.             left_rec2.graphics.beginFill(0x000000);
  87.             left_rec2.graphics.drawRect(-outer_radius* 2, -outer_radius, outer_radius* 2, outer_radius* 2);
  88.             left_rec2.graphics.endFill();
  89.             circleContainer.addChild(left_rec2);
  90.             
  91.             left_masked.mask = left_rec2;
  92.         
  93.             // create the right half
  94.             /////////////////////////////////////////////////////////////////////////////
  95.             circleContainer.addChild(right_masked);
  96.             
  97.             var right_circle:Sprite = new Sprite();
  98.             right_masked.addChild(right_circle);
  99.             
  100.             var right_outer:Shape = new Shape();
  101.             right_outer.graphics.beginFill(circle_color);
  102.             right_outer.graphics.drawCircle(0,0,outer_radius);
  103.             right_outer.graphics.endFill();
  104.             right_circle.addChild(right_outer);
  105.             
  106.             var right_inner:Shape = new Shape();
  107.             right_inner.graphics.beginFill(stage_color);
  108.             right_inner.graphics.drawCircle(0,0,inner_radius);
  109.             right_inner.graphics.endFill();
  110.             right_circle.addChild(right_inner);
  111.             
  112.             var right_rec:Shape = new Shape();
  113.             right_rec.graphics.beginFill(0x000000);
  114.             right_rec.graphics.drawRect(-outer_radius* 2, -outer_radius, outer_radius* 2, outer_radius* 2);
  115.             right_rec.graphics.endFill();
  116.             right_masked.addChild(right_rec);
  117.             
  118.             right_circle.mask = right_rec;
  119.             
  120.             var right_rec2:Shape = new Shape();
  121.             right_rec2.graphics.beginFill(0x000000);
  122.             right_rec2.graphics.drawRect(0, -outer_radius, outer_radius* 2, outer_radius* 2);
  123.             right_rec2.graphics.endFill();
  124.             circleContainer.addChild(right_rec2);
  125.             
  126.             right_masked.mask = right_rec2;
  127.             // Particles
  128.             /////////////////////////////////////////////////////////////////////////////
  129.             var myPulseParticles = new PulseParticles(206, 206, 80, 1, SpawnType.RANDOM);
  130.             // Adding Particle Types
  131.             myPulseParticles.addParticle(25, 0xFFFFFF, 1, 30, 150, 1, 0.02);
  132.             myPulseParticles.addParticle(15, 0x0066FF, 1, 60, 150, 1, 0.02, BlendMode.OVERLAY);
  133.             myPulseParticles.addParticle(25, 0x0033FF, 1, 30, 150, 1, 0.01, BlendMode.SCREEN);
  134.             // Add to the Display List
  135.             circleContainer.addChild(myPulseParticles);
  136.             myPulseParticles.x = -103;
  137.             myPulseParticles.y = -103;
  138.             // Mask it
  139.             myPulseParticles.mask = circleContainer;
  140.             // Starting Particle Spawning
  141.             myPulseParticles.startSpawn();
  142.             // Add event listeners for the preload
  143.             this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, loadingbits);
  144.             this.loaderInfo.addEventListener(Event.COMPLETE, loadingcomplete);
  145.         }
  146.         
  147.             // while loading…
  148.             /////////////////////////////////////////////////////////////////////////////
  149.             public function loadingbits(myevent:Event):void {
  150.                 MovieClip(root).stop();//stop the main timeline
  151.                 var myprogress:Number = myevent.target.bytesLoaded/myevent.target.bytesTotal;
  152.                 
  153.                 // counter clockwise movment
  154.                 if (rotate_direction == "ccw") {
  155.                     if (myprogress <= .5) {
  156.                         trace("left"+myprogress);
  157.                         left_masked.rotation = -3.6 * (myprogress*100);
  158.                     } else {
  159.                         trace("right"+myprogress);
  160.                         left_masked.rotation = -180;
  161.                         right_masked.rotation = -3.6 * ((myprogress*100) - 50);
  162.                     }
  163.                     
  164.                 // clockwise movement
  165.                 } else {
  166.                     if (myprogress <= .5) {
  167.                         right_masked.rotation = 3.6 * ((myprogress*100));
  168.                     } else {
  169.                         right_masked.rotation = 180;
  170.                         left_masked.rotation = (3.6 * (myprogress*100))-180;
  171.                     }
  172.                 }
  173.             }
  174.             
  175.         /////////////////////////////////////////////////////////////////////////////
  176.         //100%… loaded
  177.         private function loadingcomplete(event:Event):void {
  178.         
  179.             this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, loadingbits);
  180.             this.loaderInfo.removeEventListener(Event.COMPLETE, loadingcomplete);
  181.         
  182.             if (transition_out == "flash") {
  183.                 flashOut();
  184.             } else {
  185.                 fadeOut();
  186.             }
  187.         }
  188.         
  189.         //transitions out////////////////////////////////////////////////////////////
  190.         public function flashOut():void {
  191.             var myCount:Number = 0;
  192.             var myTimer:Timer =new Timer(25,100);
  193.             myTimer.start();
  194.             myTimer.addEventListener(TimerEvent.TIMER, afterCount);
  195.             
  196.             function afterCount(myevent:TimerEvent):void {
  197.                  myCount += .1;
  198.                  if (myCount > .5 && myCount <= .7) {
  199.                     preloader.alpha = 0;
  200.                  } else if (myCount > .8 && myCount <= 1) {
  201.                     preloader.alpha = 1;
  202.                  } else if (myCount > 1.1 && myCount <= 1.3) {
  203.                     preloader.alpha = 0;
  204.                  } else if (myCount > 1.4 && myCount <= 1.6) {
  205.                     preloader.alpha = 1;
  206.                  } else if (myCount > 1.7 && myCount <= 1.9) {
  207.                     preloader.alpha = 0;
  208.                  } else if (myCount > 2 && myCount <= 2.<!-- s8) --><img src=\"{SMILIES_PATH}/icon_cool.gif\" alt=\"8)\" title=\"Cool\"><!-- s8) --> {
  209.                     preloader.alpha = 1;
  210.                  } else if (myCount > 2.8 && myCount <= 3) {
  211.                     fadeDown();    
  212.                  }
  213.             }
  214.             
  215.             function fadeDown():void {
  216.                 myTimer.stop();
  217.                 myTimer.removeEventListener(TimerEvent.TIMER, afterCount);
  218.                 var myCount1:Number = 1;
  219.                 var myTimer1:Timer =new Timer(1,1000);
  220.                 myTimer1.start();
  221.                 myTimer1.addEventListener(TimerEvent.TIMER, afterCount1);
  222.                 
  223.                 function afterCount1(myevent:TimerEvent):void {
  224.                     myCount1 -= .02;
  225.                     preloader.alpha = myCount1;
  226.                     if (myCount1 <= -1) {
  227.                         moveMain();
  228.                     }
  229.                 }
  230.                 
  231.                 function moveMain():void {
  232.                     myTimer1.stop();
  233.                     myTimer1.removeEventListener(TimerEvent.TIMER, afterCount1);
  234.                     playMain();
  235.                 }
  236.             }
  237.         }
  238.         
  239.         public function fadeOut() {
  240.             var myCount1:Number = 1;
  241.             var myTimer1:Timer =new Timer(1,1000);
  242.             myTimer1.start();
  243.             myTimer1.addEventListener(TimerEvent.TIMER, afterCount1);
  244.             
  245.             function afterCount1(myevent:TimerEvent):void {
  246.                 myCount1 -= .02;
  247.                 preloader.alpha = myCount1;
  248.                 if(myCount1 <= -1){
  249.                     moveMain();
  250.                 }
  251.             }
  252.             
  253.             function moveMain():void {
  254.                 myTimer1.stop();
  255.                 myTimer1.removeEventListener(TimerEvent.TIMER, afterCount1);
  256.                 playMain();
  257.             }
  258.         }
  259.         
  260.         private function playMain():void {
  261.             MovieClip(root).play();
  262.         }
  263.     }    
  264. }

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 5 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.