'플렉스·플래시·액션스크립트3'에 해당되는 글 32건

  1. 2010.11.29 [FLEX] 드래그 기초
  2. 2010.11.19 localToGlobal에 대해 알아보자. 4

package {

  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.MouseEvent;
  import flash.text.TextField; 

  public class AnagramDragDrop extends Sprite {
    private var dragTarget:Sprite;

    public function AnagramDragDrop() {
      var board:Sprite = new Sprite();
      var letters:Array = new Array("d","i","r","t","y","r","o","o","m")
      var l:String;
      var xPos:uint = 50
      var yPos:uint = 100
      for each (l in letters) {
        var tile:Sprite = new Sprite();
        tile = createLetterTile(l as String) // size, color yellow
        tile.x = xPos;
        tile.y = yPos;
        xPos += 50;
        board.addChild(tile);
        tile.addEventListener(MouseEvent.MOUSE_DOWN, dragStarter, false);
        tile.addEventListener(MouseEvent.MOUSE_UP, dragStopper);
      }
      addChild(board)

      var instructions:TextField = new TextField();
      instructions.text = "Re-order the letters to form another word."
      instructions.x = 20
      instructions.y = 20
      instructions.width = 300;
      addChild(instructions)

    }

    private function dragStarter(event:MouseEvent):void {
      if (event.target is Sprite) {
        dragTarget = event.target as Sprite;
        dragTarget.startDrag();
      }
    }

    private function dragStopper(event:MouseEvent):void {
      dragTarget.stopDrag();
    }
       
    private function createLetterTile(txt:String):Sprite {
      var s:Sprite = new Sprite();
      var letter:TextField = new TextField();
      var tileBackColor:uint = 0xDBD9A6;
      var tileShadowColor:uint = 0x676420;
      var tileBorderColor:uint = 0x000000;
     
      s.graphics.beginFill(tileShadowColor);
      s.graphics.drawRect(-2, 2, 40, 40);
      s.graphics.endFill();
      s.graphics.beginFill(tileBackColor);
      s.graphics.drawRect(0, 0, 40, 40);
      s.graphics.endFill();
      s.graphics.lineStyle(1, tileBorderColor, 100);
      s.graphics.drawRect(0, 0, 40, 40);
   
      letter.text = txt
      letter.selectable = false;
      letter.mouseEnabled = false;
      letter.x = 14
      letter.y = 14
      letter.width = 14
      letter.height = 16
      s.addChild(letter)
 
      return s;
    }
  }
}

Posted by 미랭군



localToGlobal()은 아주 유용한 메소드임에도 불구하고 이해하기 어려운 점이 있다.
이 메소드에 대해서 제대로 설명해놓은 책이 별로 없기 때문이다.

먼저 이 메소드에 대해서 사람들은 이렇게 생각한다.

지역좌표를 전역좌표로 바꿀 수 있다고..

그렇다. 지역좌표를 전역좌표로 바꿀 수 있다.
하지만 그렇게 이해하고 들어가기 시작하면 이 메소드에 결과에 대해 헷갈리기 시작한다.

우선 아래 그림을 보자.



우선 아래 사실을 정확하게 인식해야 한다.

네모난 박스안에 볼 무비클립이 있다.

네모난 박스의 좌표는 100, 100 이고

그 안에 있는 볼 무비클립의 좌표는 0, 0 이다.

즉 우리가 보는 화면에서의 좌표는 두개의 무비클립이 다 100, 100 이지만

플래시의 좌표 체계는 각자 고유의 좌표 체계를 가지고 있다.

_root 에 있으면 전역좌표의 값을 가지지만

심볼(네모난 박스) 안에서의 심볼(볼)은 지역좌표를 가져 네모난 박스가 하나의 스테이지가 되는 것이다.

따라서 볼의 좌표는 0, 0 으로 나오는 것이다.

그럼 localToGlobal() 메쏘드를 써보자

p={x:0, y:0}
_root.box.ball.localToGlobal(p);

결과는 어떻게 될까?

trace(_root.box.ball._x) 를 해보면 여전히 0 의 값이 나온다.

trace(p.x) 를 해보자

우리가 원했던 100의 값이 나온다.

자 그럼 확실히 이해 해보자...

mc.localToGlobal(p)


p 에 대한 설명
"mc의 좌표공간에서 한 점"을 나타내기 위한
x 와 y 의 값을 속성으로 가지고 있는 객체에 대한 레퍼런스


localToGlobal() 메쏘드는 p의 x, y 속성을


mc의 좌표공간에서 주어진 좌표로로부터
메인 스테이지의 좌표게로 변환


새로운 객체를 리턴하는 것이 아니라
인자로 전달한 p 의 속성을 직접 변환


이 설명을 정확하게 이해 해야 한다.

처음에 우리는 p라는 객체에 0,0 을 대입하였다.

p에 0,0 을 대입하는 것은 즉 볼의 좌표공간에서의 0,0 이라는 점을 대입하는 것이다.

그리고 나서 _root.box.ball 에 localToGlobal 메쏘는 명령을 내려 줬다.

즉 볼의 좌표 공간 (0,0) 이란는 좌표가 메인 스테이지의 측면에서 보면

100, 100 이라는 좌표가 되는 것이고

이 값이 p의 속성을 변환 시켜 p.x 와 p.y 가 100, 100 의 값을 가지는 것이다.

즉 볼의 _x와 _y 의 값은 전혀 변하지 않고

다만 p라는 객체를 통해

우린 우리가 원하는 볼 자체의 _x와 _y 가 아닌

전역좌표의 입장(스테이지에서 본)에서의

볼의 _x와 _y 의 위치값을 얻을 수 있는 것이다.

그럼 위의 예제에서

p={x:50, y:0}
_root.box.ball.localToGlobal(p);

이라고 쓰고

trace(p.x) 를 해 보자..

그럼 어떤 값이 나올까?

150 의 값이 나온다..

볼의 50, 0 의 점의 좌표를 스테이지의 측면에서 보면 150, 0 인 것이다.

Posted by 미랭군