改变位置Flash Player 9 和更高版本,Adobe AIR 1.0 和更高版本 对任何显示对象进行的最基本操作是确定显示对象在屏幕上的位置。若要设置显示对象的位置,请更改对象的 x 和 y 属性。 myShape.x = 17; myShape.y = 212; 显示对象定位系统将舞台视为一个笛卡尔坐标系(带有水平 x 轴和垂直 y 轴的常见网格系统)。坐标系的原点(x 和 y 轴相交的 0,0 坐标)位于舞台的左上角。从原点开始,x 轴的值向右为正,向左为负,而 y 轴的值向下为正,向上为负(与典型的图形系统相反)。例如,通过前面的代码行可以将对象 myShape 移到 x 轴坐标 17(原点向右 17 个像素)和 y 轴坐标 212(原点向下 212 个像素)。 默认情况下,当使用 ActionScript 创建显示对象时,x 和 y 属性均设置为 0,从而可将对象放在其父内容的左上角。 改变相对于舞台的位置x 和 y 属性始终是指显示对象相对于其父显示对象坐标轴的 0,0 坐标的位置,记住这一点很重要。因此,对于包含在 Sprite 实例内的 Shape 实例(如圆),如果将 Shape 对象的 x 和 y 属性设置为 0,则会将圆放在 Sprite 的左上角,该位置不一定是舞台的左上角。若要确定对象相对于全局舞台坐标的位置,可以使用任何显示对象的 globalToLocal() 方法将坐标从全局(舞台)坐标转换为本地(显示对象容器)坐标,如下所示: // Position the shape at the top-left corner of the Stage, // regardless of where its parent is located. // Create a Sprite, positioned at x:200 and y:200. var mySprite:Sprite = new Sprite(); mySprite.x = 200; mySprite.y = 200; this.addChild(mySprite); // Draw a dot at the Sprite's 0,0 coordinate, for reference. mySprite.graphics.lineStyle(1, 0x000000); mySprite.graphics.beginFill(0x000000); mySprite.graphics.moveTo(0, 0); mySprite.graphics.lineTo(1, 0); mySprite.graphics.lineTo(1, 1); mySprite.graphics.lineTo(0, 1); mySprite.graphics.endFill(); // Create the circle Shape instance. var circle:Shape = new Shape(); mySprite.addChild(circle); // Draw a circle with radius 50 and center point at x:50, y:50 in the Shape. circle.graphics.lineStyle(1, 0x000000); circle.graphics.beginFill(0xff0000); circle.graphics.drawCircle(50, 50, 50); circle.graphics.endFill(); // Move the Shape so its top-left corner is at the Stage's 0, 0 coordinate. var stagePoint:Point = new Point(0, 0); var targetPoint:Point = mySprite.globalToLocal(stagePoint); circle.x = targetPoint.x; circle.y = targetPoint.y; 同样,也可以使用 DisplayObject 类的 localToGlobal() 方法将本地坐标转换为舞台坐标。 使用鼠标移动显示对象您可以在 ActionScript 中使用两种技术使用户可以使用鼠标来移动显示对象。在这两种情况下,会使用两个鼠标事件:按下鼠标按键时,通知对象跟随鼠标光标;松开鼠标按键时,通知对象停止跟随鼠标光标。 第一种技术使用 startDrag() 方法,比较简单,但限制较多。按下鼠标按键时,将调用要拖动的显示对象的 startDrag() 方法。松开鼠标按键时,将调用 stopDrag() 方法。Sprite 类定义这两个功能,因此移动的对象必须是 Sprite 或它的子类。 // This code creates a mouse drag interaction using the startDrag() // technique. // square is a MovieClip or Sprite instance). import flash.events.MouseEvent; // This function is called when the mouse button is pressed. function startDragging(event:MouseEvent):void { square.startDrag(); } // This function is called when the mouse button is released. function stopDragging(event:MouseEvent):void { square.stopDrag(); } square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging); square.addEventListener(MouseEvent.MOUSE_UP, stopDragging); 这种方法有一个非常大的限制:使用 startDrag() 时,每次只能拖动一个项目。如果正在拖动一个显示对象,然后对另一个显示对象调用了 startDrag() 方法,则第一个显示对象会立即停止跟随鼠标。例如,如果 startDragging() 函数如下发生了更改,则只拖动 circle 对象,而不管 square.startDrag() 方法调用: function startDragging(event:MouseEvent):void { square.startDrag(); circle.startDrag(); } 由于每次只能使用 startDrag() 拖动一个对象,因此,可以对任何显示对象调用 stopDrag() 方法,这会停止当前正在拖动的任何对象。 如果需要拖动多个显示对象,或者为了避免因多个对象可能使用 startDrag() 而发生冲突,最好使用鼠标跟随方法来创建拖动效果。通过这种技术,当按下鼠标按键时,会将函数作为舞台的 mouseMove 事件的侦听器来订阅。然后,每次鼠标移动时都会调用此函数,它将使所拖动的对象跳到鼠标所在的 x,y 坐标。松开鼠标按键后,取消此函数作为侦听器的订阅,这意味着鼠标移动时不再调用该函数且对象停止跟随鼠标光标。下面是演示说明此技术的一些代码: // This code moves display objects using the mouse-following // technique. // circle is a DisplayObject (e.g. a MovieClip or Sprite instance). import flash.events.MouseEvent; var offsetX:Number; var offsetY:Number; // This function is called when the mouse button is pressed. function startDragging(event:MouseEvent):void { // Record the difference (offset) between where // the cursor was when the mouse button was pressed and the x, y // coordinate of the circle when the mouse button was pressed. offsetX = event.stageX - circle.x; offsetY = event.stageY - circle.y; // tell Flash Player to start listening for the mouseMove event stage.addEventListener(MouseEvent.MOUSE_MOVE, dragCircle); } // This function is called when the mouse button is released. function stopDragging(event:MouseEvent):void { // Tell Flash Player to stop listening for the mouseMove event. stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragCircle); } // This function is called every time the mouse moves, // as long as the mouse button is pressed down. function dragCircle(event:MouseEvent):void { // Move the circle to the location of the cursor, maintaining // the offset between the cursor's location and the // location of the dragged object. circle.x = event.stageX - offsetX; circle.y = event.stageY - offsetY; // Instruct Flash Player to refresh the screen after this event. event.updateAfterEvent(); } circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging); circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging); 除使显示对象跟随鼠标光标之外,经常需要将拖动的对象移动到显示的前方,以使其像是浮动在所有其他对象上。例如,假设您有两个对象(一个圆和一个正方形),都可以跟随鼠标移动。如果圆在显示列表中出现在正方形之下,您单击并拖动圆时光标会出现在正方形之上,圆好像在正方形之后滑动,这样中断了拖放视觉效果。您可以使用拖放交互组件避免这一点,以便在单击圆时圆移到显示列表的顶部,使圆会始终出现在其他任何内容的顶部。 以下代码(根据上一示例改写)使两个显示对象(一个圆和一个正方形)可跟随鼠标移动。只要在任一个显示对象上按下鼠标按键,该显示对象就会移到舞台显示列表的顶部,所以拖动的项目始终出现在顶部。(新代码或根据以前代码更改的代码显示为粗体。) // This code creates a drag-and-drop interaction using the mouse-following // technique. // circle and square are DisplayObjects (e.g. MovieClip or Sprite // instances). import flash.display.DisplayObject; import flash.events.MouseEvent; var offsetX:Number; var offsetY:Number; var draggedObject:DisplayObject; // This function is called when the mouse button is pressed. function startDragging(event:MouseEvent):void { // remember which object is being dragged draggedObject = DisplayObject(event.target); // Record the difference (offset) between where the cursor was when // the mouse button was pressed and the x, y coordinate of the // dragged object when the mouse button was pressed. offsetX = event.stageX - draggedObject.x; offsetY = event.stageY - draggedObject.y; // move the selected object to the top of the display list stage.addChild(draggedObject); // Tell Flash Player to start listening for the mouseMove event. stage.addEventListener(MouseEvent.MOUSE_MOVE, dragObject); } // This function is called when the mouse button is released. function stopDragging(event:MouseEvent):void { // Tell Flash Player to stop listening for the mouseMove event. stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragObject); } // This function is called every time the mouse moves, // as long as the mouse button is pressed down. function dragObject(event:MouseEvent):void { // Move the dragged object to the location of the cursor, maintaining // the offset between the cursor's location and the location // of the dragged object. draggedObject.x = event.stageX - offsetX; draggedObject.y = event.stageY - offsetY; // Instruct Flash Player to refresh the screen after this event. event.updateAfterEvent(); } circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging); circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging); square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging); square.addEventListener(MouseEvent.MOUSE_UP, stopDragging); 若要进一步扩展这种效果,如在几副纸牌(或几组标记)之间移动纸牌(或标记)的游戏中,您可以在“拿出”拖动对象时将拖动对象添加到舞台的显示列表中,然后在“放入”拖动对象时(通过松开鼠标按键)将拖动对象添加到另一个显示列表中(如“那副纸牌”或“那组标记”)。 最后,要增强效果,您可以在单击显示对象时(开始拖动显示对象时)对显示对象应用投影滤镜,然后在松开对象时删除投影。有关在 ActionScript 中使用投影滤镜和其他显示对象滤镜的详细信息,请参阅过滤显示对象。 |
|