以前的函数被称为/事件监听器'延迟'为1

时间:2013-04-22 12:41:45

标签: actionscript-3

我更改了我下载的图像轮播,当我点击我添加的两个按钮之一时,旋转到下一张图片(左或右)。原始旋转木马可根据鼠标移动/位置旋转。

出于某种原因,每当我点击“右”或“左”按钮时,每个按钮都按照相应的方向旋转轮播,事件监听器/处理程序就是“后面”。它完成了我之前单击按钮所应该完成的任何事情。为了更清楚地说明,第一个按钮点击它什么都不做。第二个按钮单击它会响应我上次点击的内容。

示例:

  • 我点击左键,没有任何反应。
  • 然后我点击右键,旋转木马向左旋转(因为我在点击前单击了左键)
  • 然后我点击左键,旋转木马旋转到右侧(同上)。

请参阅下面的代码。看起来相当简单;没有复杂的结构或其他什么。

我猜你可以忽略大多数变量和定位(例如focalLengthvanishingPointXradius等)。我猜这个bug与导入/处理XML,for()循环或.as文件的结构有关。

package  {
        //here are all the imports 

        public class Imagereel extends Sprite {
            var imgurl:URLRequest = new URLRequest()
            var loadedimgs:uint = 0;
            var images_num = 0;
            var imageHolders:Array = new Array();
            var imageHolder:MovieClip;
            var btnLeft:BtnLeft = new BtnLeft;
            var btnRight:BtnRight = new BtnRight;

        //Set the focal length
        var focalLength:Number = 2000;

        //Set the vanishing point
        var vanishingPointX:Number = stage.stageWidth / 2;
        var vanishingPointY:Number = stage.stageHeight / 2;

        //The 3D floor for the images
        var floor:Number = 40;

        //Radius of the circle
        var radius:Number = 350;

        //We use 70x70 sized images (change this if different for your images)
        const IMAGE_WIDTH:uint = 393;
        const IMAGE_HEIGHT:uint = 249;

        var xmlLoader:URLLoader = new URLLoader();
        var xmlData:XML = new XML();        

        public function Imagereel() {
            //here's the positioning of the buttons
            //here are the button addChilds

            xmlLoader.load(new URLRequest("carousel.xml"));
            xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
            btnLeft.addEventListener(MouseEvent.CLICK, prevImg);
            btnRight.addEventListener(MouseEvent.CLICK, nextImg);

        }
        function LoadXML(e:Event):void {
            xmlData = new XML(e.target.data);
            Parseimage(xmlData);
        }
        function Parseimage(imageinput:XML):void {
            var imageurl:XMLList = imageinput.image.iurl;

            images_num = imageurl.length();
            for (var i:int = 0; i < images_num; i++) {
                var urlElement:XML = imageurl[i];

                imageHolder = new MovieClip();
                var imageLoader = new Loader();
                imageHolder.addChild(imageLoader);
                imageHolder.mouseChildren = false;
                imageLoader.x = - (IMAGE_WIDTH);
                imageLoader.y = - (IMAGE_HEIGHT);
                imageHolders.push(imageHolder);
                imgurl.url = imageurl[i];
                imageLoader.load(imgurl);
                imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
            }
        }
        function imageLoaded(e:Event) {
            //Update the number of loaded images
            loadedimgs++;

            //Check to see if this is the last image loaded
            if (loadedimgs == images_num) {
                //Set up the carousel
                initializeCarousel();
            }
        }
        function initializeCarousel() {
            //Calculate the angle difference between the images (in radians)
            var angleDifference:Number = Math.PI * (360 / images_num) / 180;

            //Loop through the images
            for (var i:uint = 0; i < imageHolders.length; i++) {
                //Assign the imageHolder to a local variable
                var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);

                //Get the angle for the image (we space the images evenly)
                var startingAngle:Number = angleDifference * i -0.30;

                //Position the imageHolder
                imageHolder.xpos3D = radius * Math.cos(startingAngle);
                imageHolder.zpos3D = radius * Math.sin(startingAngle);
                imageHolder.ypos3D = floor;

                //Set a "currentAngle" attribute for the imageHolder
                imageHolder.currentAngle = startingAngle;
                var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);

                //Position the imageHolder to the stage (from 3D to 2D coordinates)
                imageHolder.x = vanishingPointX + imageHolder.xpos3D * scaleRatio;
                imageHolder.y = vanishingPointY + imageHolder.ypos3D * scaleRatio;

                //Add the imageHolder to the stage
                addChild(imageHolder);
            }
            sortZ();
        }

        function prevImg(e:MouseEvent) {
            //Loop through the images
            for (var i:uint = 0; i < imageHolders.length; i++) {
                var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
                //Set a new 3D position for the imageHolder
                imageHolder.xpos3D = radius * Math.cos(imageHolder.currentAngle);
                imageHolder.zpos3D = radius * Math.sin(imageHolder.currentAngle);
                var scaleRatio;

                //Calculate a scale ratio
                scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);

                //Update the imageHolder's coordinates
                imageHolder.x = vanishingPointX+imageHolder.xpos3D * scaleRatio;
                imageHolder.y = vanishingPointY+imageHolder.ypos3D * scaleRatio;

                //spinning the carousel
                imageHolder.currentAngle += 0.6285;
            }   
            //Call the function that sorts the images so they overlap each others correctly
            sortZ();
        }
        function nextImg(e:MouseEvent) {
            //Loop through the images
            for (var i:uint = 0; i < imageHolders.length; i++) {
                var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
                //Set a new 3D position for the imageHolder
                imageHolder.xpos3D = radius * Math.cos(imageHolder.currentAngle);
                imageHolder.zpos3D = radius * Math.sin(imageHolder.currentAngle);
                var scaleRatio;

                //Update the imageHolder's coordinates
                imageHolder.x = vanishingPointX+imageHolder.xpos3D * scaleRatio;
                imageHolder.y = vanishingPointY+imageHolder.ypos3D * scaleRatio;

                //spinning the carousel
                imageHolder.currentAngle -= 0.6285;
            }
            sortZ();
        }
        //This function sorts the images so they overlap each others correctly
        function sortZ():void {
            imageHolders.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);

            //Set new child indexes for the images
            for (var i:uint = 0; i < imageHolders.length; i++) {
                setChildIndex(imageHolders[i], i);
            }
        }
    }
}

这段代码的作用是什么:

  1. carousel.xml已导入
  2. 处理xml,以便将那里的图像路径转换为显示的图像
  3. 旋转木马由图像
  4. 制成
  5. sortZ()函数可确保图像在3D透视图中正确对齐;就像CSS中的z-index一样。
  6. 点击btnLeftbtnRight时,轮播将向左或向右旋转(通过更新imageHolder.currentAngle的值来完成此操作。)
  7. 当我将trace放入prevImg()和nextImg()函数时,我确实看到了 属于正确的功能,而不是之前点击过的功能。所以似乎Flash 调用了正确的事件。

    那我怎么摆脱这个bug呢? 非常感谢帮助和提示!

1 个答案:

答案 0 :(得分:0)

在改变imageHolder的3D位置的代码之前移动imageHolder.currentAngle赋值(更改它的行)。

for (var i:uint = 0; i < imageHolders.length; i++) {
            var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
            //Set a new 3D position for the imageHolder
            imageHolder.currentAngle += 0.6285; // <== HERE
            imageHolder.xpos3D = radius * Math.cos(imageHolder.currentAngle);
            imageHolder.zpos3D = radius * Math.sin(imageHolder.currentAngle);
            var scaleRatio;

            //Calculate a scale ratio
            scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);

            //Update the imageHolder's coordinates
            imageHolder.x = vanishingPointX+imageHolder.xpos3D * scaleRatio;
            imageHolder.y = vanishingPointY+imageHolder.ypos3D * scaleRatio;

            //spinning the carousel
        }

其他功能相同。