actionscript 3使用拖动

时间:2017-11-24 05:22:28

标签: actionscript-3 flash drag adobe-animate

我对动作脚本很新,现在有点卡住了。 我试图制作一个固定在一端的箭头,但尖端应该可以拖动鼠标拖动,从而拉伸和旋转箭头。 如果我可以在拖动时保持箭头的三角形尖端不改变大小,那也是很好的。 我想过制作一个由尖端和线条分别组成的动画片段,这条线做了所有的"拉伸"而小费只是随之而来。我只是不确定如何。

我发现的关于鼠标拖动的大多数文档都是关于移动完整元素而不是仅仅移动一个部分,同时保持与其余部分的连接。 我确实找到了一些关于用鼠标拖动来旋转箭头的事情here,但它对我的问题只有部分帮助,因为它没有说明同时使箭头变大。

有没有人知道如何实现这个目标?

1 个答案:

答案 0 :(得分:2)

这是一种方法(我认为最简单的方法)。

  1. 在Adobe Animate中,导入或绘制箭头。
  2. 将您的位图或形状转换为MovieClip(修改 - >转换为符号
  3. 在出现的对话框中,选中"启用9切片缩放指南" ,然后点击OK。 Enable guides for 9-slice scaling
  4. 现在,双击新的MovieClip进行编辑。你会看到有线(指南)。垂直缩放时,只有中间3行的区域会拉伸/缩放。
  5. 移动引导线直到它们与屏幕截图匹配(只有您要拉伸的箭头部分位于中间),为方便起见,将其排成一行,以便 + (锚点)位于箭头基座的确切位置。 line up the guides and anchor point
  6. 现在,由于9切片缩放对旋转不起作用,我们将把这个箭头影片剪辑嵌入到容器MovieClip中。回到主时间轴。为您的箭头影片剪辑添加arrowInner实例名称
  7. 选择/聚焦arrowInner,点击F8(或修改 - >转换为符号)将该对象包装在另一个MovieClip中 - 点击OK对话框(不要检查任何选项)。
  8. 为此新MovieClip提供实例名称arrowOuter。双击它进行编辑,然后对齐arrowInner,使锚点位于箭头底部(与arrowInner内部之前的锚点相同)。
  9. 现在是时间码,在主时间轴上打开代码编辑器,然后粘贴以下内容(请参阅代码注释以获得解释)。

    //we want a function to fun every frame tick of the applicaiton
    this.addEventListener(Event.ENTER_FRAME, enterFrame);
    
    //create some helper vars that are used in the enterFrame handler
    //arrowPoint is just the point of the base of the outer arrow
    var arrowPoint:Point = new Point(arrowOuter.x,arrowOuter.y);
    
    //this will store the current mouse point
    var mousePoint:Point = new Point();
    
    //this will store the radian rotation of the arrow needed to point it at the mouse
    var radians:Number;
    
    function enterFrame(e:Event):void {
        //set the global mouse point
        mousePoint.x = stage.mouseX;
        mousePoint.y = stage.mouseY;
    
        //calculate the distance between the two points (mouse and arrow base).
        //set the height of the inner arrow to that distance
        arrowOuter.arrowInner.height = Point.distance(arrowPoint, mousePoint);
    
        //get the angle needed for the arrow to point at the mouse.
        radians = Math.atan2(stage.mouseY - arrowOuter.y, stage.mouseX - arrowOuter.x);
    
        //convert the radians to degrees,  add 90 to compensate for the starting position of the arrow
        arrowOuter.rotation = 90 + (radians * (180/ Math.PI));
    }
    
  10. 如果9片缩放不是你的东西(它不是我的),那么它只需要多做一点工作:

    1. 将箭头轴和箭头设置为单独的部件。分别为它们提供实例名称headshaft。创建箭头使其指向右侧。

    2. 选择它们,并将它们嵌套到MovieClip(F8)中。为新的容器影片剪辑添加实例名称arrow,并确保它的锚点是中间轴的最左侧部分(箭头点的另一端)。

    3. 使用以下代码:

      this.addEventListener(Event.ENTER_FRAME, enterFrame);
      
      var arrowPoint:Point = new Point(arrow.x, arrow.y);
      var mousePoint:Point = new Point();
      var radians:Number;
      var distance:Number;
      
      function enterFrame(e:Event):void {
          mousePoint.x = stage.mouseX;
          mousePoint.y = stage.mouseY;
      
          distance = Point.distance(arrowPoint, mousePoint);
      
          //stretch the shaft to the full distance less the size of the arrow head
          arrow.shaft.width = distance - arrow.head.width;
          //move the arrow head to the end of the shaft
          arrow.head.x = arrow.shaft.width;
      
          radians = Math.atan2(stage.mouseY - arrow.y, stage.mouseX - arrow.x);
          arrow.rotation = radians * (180/ Math.PI);
      }