动作脚本 3：添加 gotoAndStop 动画

Question

所以前几天我找到了一个关于如何在动作脚本中创建模式锁屏的教程。为此，我必须创建一个类，我很好地掌握了该类的工作方式。但我想添加一个动画，这样当用户越过图案中的点时，动画就会播放。但我不知道如何通过课堂做这样的事情。这是我在课堂上使用的代码。

package
{
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import fl.transitions.Tween;
    import fl.transitions.easing.Strong;

    public class Main extends Sprite
    {
        private var dots:Array = []; // Stores the in stage movieclips
        private var pattern:Array = []; //The pattern entered by the user
        private var pass:Array = [1,4,7,8,5,2,5]; //The correct pattern to proceed

        public function Main():void
        {
            dots = [one,two,three,four,five,six,seven,eight,nine]; //add the clips in stage
            addListeners();
        }

        private function addListeners():void //adds the listeners to each dot
        {
            var dotsLength:int = dots.length;

            for (var i:int = 0; i < dotsLength; i++)
            {
                dots[i].addEventListener(MouseEvent.MOUSE_DOWN, initiatePattern);
                dots[i].addEventListener(MouseEvent.MOUSE_UP, stopPattern);
            }
        }

        /* Adds a mouse over listener and uses it to add the number of the dot to the pattern */

        private function initiatePattern(e:MouseEvent):void
        {
            var dotsLength:int = dots.length;

            for (var i:int = 0; i < dotsLength; i++)
            {
                dots[i].addEventListener(MouseEvent.MOUSE_OVER, addPattern);
            }

            pattern.push(dots.indexOf(e.target) + 1); //adds the array index number of the clip plus one, because arrays are 0 based
        }

        private function addPattern(e:MouseEvent):void
        {
            pattern.push(dots.indexOf(e.target) + 1); //adds the pattern on mouse over
        }

        private function stopPattern(e:MouseEvent):void //stops storing the pattern on mouse up
        {
            var dotsLength:int = dots.length;

            for (var i:int = 0; i < dotsLength; i++)
            {
                dots[i].removeEventListener(MouseEvent.MOUSE_OVER, addPattern);
            }

            checkPattern();
        }

        private function checkPattern():void //compares the patterns
        {
            var pLength:int = pass.length;
            var correct:int = 0;

            for (var i:int = 0; i < pLength; i++) //compares each number entered in the user array to the pass array
            {
                if (pass[i] == pattern[i])
                {
                    correct++;
                }
            }

            if (correct == pLength) //if the arrays match
            {
              //Hides Sign In
              MovieClip(root).LockScreen.visible = false;
              MovieClip(root).RTID.visible = false;
              MovieClip(root).SignIn.visible = false;
              //Turns On Main Menu
              MovieClip(root).gamemenu_mc.visible = true;
              MovieClip(root).biggamesmenu_mc.visible = true;
              MovieClip(root).totaltextmenu_mc.visible = true;
              MovieClip(root).tmenu_mc.visible = true;
              MovieClip(root).smenu_mc.visible = true;
              MovieClip(root).optionsmenu_mc.visible = true;
            }

            pattern = []; //clears the user array
        }
    }
}

Answer 1

我能想到的最简单的方法是：

1. 在您的 dot 影片剪辑中，在第一帧放置 stop() 动作

2. 在点时间轴上创建动画，并在动画的最后一帧放置另一个 stop()。

3. 在鼠标悬停功能中，告诉点播放。

   private function addPattern(e:MouseEvent):void
   {
       var dot:MovieClip = MovieClip(e.currentTarget);
       if(dot.currentFrame < 2) dot.play(); //play only if on the first frame
   
       pattern.push(dots.indexOf(dot) + 1); //adds the pattern on mouse over
   }
   

4. 重置点动画

    private function stopPattern(e:MouseEvent):void //stops storing the pattern on mouse up
    {
       for (var i:int = 0; i < dots.length; i++)
       {
           dots[i].removeEventListener(MouseEvent.MOUSE_OVER, addPattern);
           dots[i].gotoAndStop(1); //go back to the first frame
       }
   
       checkPattern();
    }
   

或者，如果您只是想要一些简单的东西，例如点淡入/淡出的图层或点的大小增加，您可以使用补间库并在鼠标悬停时补间适当的属性。

---

如果你想画线来连接点，你可以这样做：

package
{
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import fl.transitions.Tween;
    import fl.transitions.easing.Strong;
    import flash.display.Shape;

    public class Main extends Sprite
    {

        private var lineContainer:Shape = new Shape();

        private var dots:Array = []; // Stores the in stage movieclips
        private var pattern:Array = []; //The pattern entered by the user //don't make life hard, just store the object itself instead of the index
        private var pass:Array;

        public function Main():void
        {
            dots = [one,two,three,four,five,six,seven,eight,nine]; //add the clips in stage
            pass = [one,four,seven,eight,five,two,five]; //The correct pattern to proceed
            addChildAt(lineContainer, this.getChildIndex(one)); //the line container right behind the first dot.
            addListeners();
        }

        private function addListeners():void //adds the listeners to each dot
        {
            var dotsLength:int = dots.length;

            for (var i:int = 0; i < dotsLength; i++)
            {
                dots[i].addEventListener(MouseEvent.MOUSE_DOWN, initiatePattern);
                dots[i].addEventListener(MouseEvent.MOUSE_UP, stopPattern); //you could attach this to `this` instead of each dot, same result
            }
        }

        /* Adds a mouse over listener and uses it to add the number of the dot to the pattern */

        private function initiatePattern(e:MouseEvent):void
        {
            pattern = []; //reset array
            lineContainer.graphics.clear(); //clear lines

            for (var i:int = 0; i < dots.length; i++)
            {
                dots[i].addEventListener(MouseEvent.MOUSE_OVER, addPattern);
            }

                    addPattern(e); //trigger the mouse over for this element
        }

        private function addPattern(e:MouseEvent):void
        {
            //if (pattern.indexOf(e.currentTarget) == -1) { //wrap in this if statemnt if only wanted a dot to be selected once (like Android)
                pattern.push(e.currentTarget); //adds the pattern on mouse over
                drawLines();

                var dot:MovieClip = MovieClip(e.currentTarget);
                if(dot.currentFrame < 2) dot.play(); //play only if on the first frame
            //}
        }

        private function drawLines():void {
            lineContainer.graphics.clear(); //clear the current lines
            lineContainer.graphics.lineStyle(5, 0xFF0000); //thickness (5px) and color (red) of the lines

             if (pattern.length > 1) { //don't draw if there aren't at least two dots in the pattern
             lineContainer.graphics.moveTo(pattern[0].x + pattern[0].width * .5, pattern[0].y + pattern[0].height * .5); //move to first
         for (var i:int = 1; i < pattern.length; i++) {
        lineContainer.graphics.lineTo(pattern[i].x + pattern[i].width * .5, pattern[i].y + pattern[i].height * .5); //draw a line to the current dot
    }
          }

              lineContainer.graphics.endFill();

        }

        private function stopPattern(e:MouseEvent):void //stops storing the pattern on mouse up
        {
            for (var i:int = 0; i < dots.length; i++)
            {
                dots[i].removeEventListener(MouseEvent.MOUSE_OVER, addPattern);
                dots[i].gotoAndStop(1); //go back to the first frame
            }

            checkPattern();
        }

        private function checkPattern():void //compares the patterns
        {
            var pLength:int = pass.length;
            var correct:int = 0;

            for (var i:int = 0; i < pLength; i++) //compares each number entered in the user array to the pass array
            {
                if (pass[i] == pattern[i])
                {
                    correct++;
                }
            }

            if (correct == pLength) //if the arrays match
            {
              //Hides Sign In
              MovieClip(root).LockScreen.visible = false;
              MovieClip(root).RTID.visible = false;
              MovieClip(root).SignIn.visible = false;
              //Turns On Main Menu
              MovieClip(root).gamemenu_mc.visible = true;
              MovieClip(root).biggamesmenu_mc.visible = true;
              MovieClip(root).totaltextmenu_mc.visible = true;
              MovieClip(root).tmenu_mc.visible = true;
              MovieClip(root).smenu_mc.visible = true;
              MovieClip(root).optionsmenu_mc.visible = true;
            }

            pattern = []; //clears the user array
            lineContainer.graphics.clear(); //clear the lines

        }
    }
}