2017-11-24 6 views
2

저는 현재 매우 능숙하며 약간 꼼짝 못했습니다. 한쪽 끝에 고정 된 화살표를 만들려고하지만 뾰족한 끝을 마우스 끌기로 드래그 할 수 있어야합니다. 그러면 화살표가 늘어나고 회전합니다. 화살표의 삼각형 끝을 드래그하는 동안 크기를 변경하지 못하게 할 수 있으면 좋습니다. 동영상 클립을 팁과 라인으로 따로 구성하는 것에 대해 생각했습니다. 팁은 간단히 뒤따라 오는 동안 모든 "스트레칭"을 수행합니다. 어떻게 잘 모르겠다.actionscript 3 끌기로 동영상 클립을 늘리고 회전하기

마우스 드래그에서 발견 한 대부분의 문서는 나머지 부분에 붙어있는 동안 한 부분 만이 아닌 완전한 요소를 이동하는 것에 관한 것입니다. 마우스 드래그로 화살표를 회전하는 것에 대해 뭔가 찾았습니다. here,하지만 부분적으로 도움이되는 부분은 화살표를 더 크게 만드는 것에 관해서는 아무것도 말하지 않고 있습니다.

누구나 실현 방법에 대한 아이디어가 있습니까?

+1

당신은 마우스와 화살표의 (0,0) 사이의 거리를 계산해야 https://en.wikipedia.org/wiki/Pythagorean_theorem와 다음 화살표 축을 축척하고 화살표 머리를 배치하십시오. – Organis

답변

2

여기에 (내가 가장 쉽게 생각하는) 한 가지 방법이 있습니다.

  1. 어니 메이트 애니메이션에서 화살표를 가져 오거나 그립니다.
  2. 는 비트 맵 변환 또는 무비 클립으로 형성 (수정 -> 기호로 변환) 대화 상자가 나타나면에
  3. 을을 "크기 조절 9 슬라이스에 대한 사용 가이드"를 확인하고 확인을 누르십시오. 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으로 래핑합니다. 대화 상자에서 확인을 누릅니다 (옵션을 선택하지 마십시오).
  8. 이 새 MovieClip의 인스턴스 이름을 arrowOuter으로 지정하십시오. 그것을 편집하려면 더블 클릭하고, arrowInner을 화살표 밑에 앵커 포인트로 맞 춥니 다 (앞에서와 마찬가지로 arrowInner).
  9. 이제 타임 코드로 기본 타임 라인에서 코드 편집기를 열고 다음을 붙여 넣습니다 (설명은 코드 주석 참조).

    1. 작성하여 화살표 샤프트와 화살표 :


    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. 는 단지 조금 더 많은 작업이다, (그것은 내 아닙니다) 분리 된 조각으로 머리. 인스턴스 이름을 각각 headshaft으로 지정하십시오. 오른쪽을 가리 키도록 화살표를 만듭니다.

  11. 두 가지를 모두 선택하고 MovieClip (F8)에 중첩합니다. 새 컨테이너 무비 클립의 인스턴스 이름을 arrow으로 지정하고 앵커 포인트가 중간의 샤프트의 가장 왼쪽 부분 (화살표 지점의 반대쪽 끝)인지 확인하십시오.

  12. 사용 다음 코드를

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

그것은 교훈의 멋진 조각이다! – Organis

+0

나는 Organis에 동의한다. 나는 그것이 어떻게 작동하는지 더 잘 이해하기 때문에 두 번째 옵션을 시도했으며 완벽하게 작동합니다. – Murmeltier

관련 문제