ActionScript 3通过拖动来拉伸和旋转动画片段箭头 [英] actionscript 3 stretching and rotating a movieclip arrow with drag

问题描述

我对ActionScript还是很陌生，现在有点卡住了. 我正在尝试制作固定在一端的箭头，但是尖的一端应该可以通过鼠标拖动来拖动，从而拉长并旋转箭头. 如果我可以在拖动箭头时不改变箭头的三角形大小，那也很好. 我考虑过要分别制作由尖端和线条组成的动画片段，该线进行所有的拉伸"，而尖端只是跟随着.我只是不确定如何.

I am quite new to actionscript, and a bit stuck now. I am trying to make an arrow that is fixed at one end, but the pointy end should be draggable with mouse drag, thus streching and rotating the arrow. It would be also great if I could keep the triangle tip of the arrow from changing size while dragging it. I thought about making a movieclip composed of the tip and of the line separately, the line doing all the "stretching" while the tip simply follows around. I am just not sure how.

我发现的有关鼠标拖动的大多数文档都是关于移动完整元素，而不仅仅是将一部分移动，而与其余部分保持联系. 我确实在此处上找到了一些有关使用鼠标旋转箭头的方法，但这仅对我有部分帮助问题，因为它没有说明同时增大箭头.

Most of the docs I found about mouse drag are about moving complete element not just one part while staying attached to the rest. I did find something about rotating an arrow with mouse drag here, but it's only partially helpful to my problem as it says nothing about making the arrow bigger at the same time.

有人知道如何实现吗?

推荐答案

这是执行此操作的一种方法(我认为这是最简单的方法).

Here is one way to do this (what I would deem the easiest).

1. 在Adobe Animate中，导入或绘制箭头.
2. 将位图或形状转换为MovieClip(修改->转换为符号)
3. 在出现的对话框中，选中"启用9切片缩放参考"" ，然后单击确定".
4. 现在，双击新的MovieClip进行编辑.您会看到其中有几行(指南).垂直缩放时，只有中间三行的区域会拉伸/缩放.
5. 移动辅助线，直到它们与屏幕截图匹配(只有您要拉伸的箭头部分在中间)，并且为方便起见，将其排成一行，以便 + (锚点)位于箭头底部的确切位置.
6. 现在，由于9切片缩放不能很好地旋转旋转，因此我们将将此箭头影片剪辑嵌套到容器MovieClip中.返回主时间轴.给您的箭头影片剪辑一个实例名称为arrowInner.
7. 选择/聚焦arrowInner后，按F8键(或按 Modify-> Convert to Symbol )将对象包装在另一个MovieClip中-在对话框中单击确定"(不要选中任何选项) ).
8. 为该新的MovieClip提供实例名称arrowOuter.双击以对其进行编辑，然后对齐arrowInner，使锚点位于箭头的底部(与之前在arrowInner内部所做的操作相同).

9. 现在是时间代码，在主时间轴上打开代码编辑器，然后粘贴以下内容(有关说明，请参见代码注释).

1. In Adobe Animate, import or draw your arrow.
2. Convert your bitmap or shape into a MovieClip (Modify -> Convert To Symbol)
3. On the dialog box that comes up, check "Enable guides for 9 slice scaling", then hit OK.
4. Now, double click your new MovieClip to edit it. You'll see there are lines (guides). When scaling vertically, only the areas in the middle 3 rows will stretch/scale.
5. Move the guide lines until they match the screenshot (only the part of the arrow you want to stretch is in the middle), also, for convenience, line it up so the + (anchor point) is at the exact position of the arrow's base.
6. Now, since 9-slice scaling doesn't play nice with rotation, we're going to nest this arrow movie clip into a container MovieClip. Go back to the main timeline. Give your arrow movie clip an instance name of arrowInner.
7. With arrowInner selected/focused, hit F8 (or Modify -> Convert To Symbol) to wrap that object inside another MovieClip - hit OK on dialog box (do not check any of the options).
8. Give this new MovieClip an instance name of arrowOuter. Double click it to edit it, and align arrowInner so the anchor point at the base of the arrow (same as you did before inside arrowInner).

9. Now it's time code, open the code editor on the main timeline, and paste the following (see the code comments for explanations).

//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));
}

---

如果9切片缩放不是您的事(不是我的事情)，那么这只是更多的工作:

---

If 9-slice scaling isn't your thing (it's not mine), then it's only a little more work:

1. 将箭头轴和箭头头分别创建.分别为其指定实例名称head和shaft.创建箭头，使其指向右边.

1. Create your arrow shaft and arrow head as separate pieces. Give them the instance names head and shaft respectively. Create the arrow so it's pointing to the right.

同时选择它们，然后将它们嵌套到MovieClip(F8)中.为该新容器影片剪辑指定实例名称arrow，并确保其锚点位于轴中间最左端(箭头指向的另一端).

Select them both, and nest them into a MovieClip (F8). Give that new container movie clip an instance name of arrow, and make sure it's anchor point is the left most part of the shaft in middle (the opposite end from the arrow point).

使用以下代码:

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);
} 

这篇关于ActionScript 3通过拖动来拉伸和旋转动画片段箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！