제11강 선그리기

1. 학습목표    ① 선그리기를 할 수 있다.   지난 강좌에서 배운 내용 복습하기(무비클립 드래그)   1. 무비클립을 만들고 라이브러리 창에서 "링크"를 선택하여 'ActionScript에 내 보내기'로     식별자를 써 넣는다. 2. 첫번째 프레임에 다음과 같은 액션을 입력한다. _root.attachMovie("nipper", "nipper", 1); _root.nipper._x = 300; _root.nipper._y = 150; _root.nipper.onPress = function() {    startDrag(_root.nipper); }; _root.nipper.onRelease = function() {    if(_root.nipper.hitTest(_root.battery)){       _root.nipper._x=_root.battery._x+_root.battery._width/2;       _root.nipper._y=_root.battery._y-15;    }    stopDrag(); };   2. 직선 그리기(선그리기를 할 수 있다.)   플래쉬 MX에서 새로 등장한 기능이 선그리기입니다. 제가 자바, 다이나믹 HTML, VRML을 뒤로 하고 플래쉬를 선택한 이유이기도 합니다. ^^   앞에서 배운 attachMovie의 기능 아시죠? 무비클립을 삽입하는 것입니다. 그와 유사한 기능이 바로 createEmptyMovieClip입니다. 다른 점은 말 그대로 빈 무비클립을 만든다는 것입니다. 여기에 선을 그린다고 생각하면 될꺼예요... ^^   1. 첫번째 프레임에 다음과 같은 액션을 써 넣는다.     _root.createEmptyMovieClip("mc", 0);    //선그리기 무비클립을 만듭니다. _root.mc.lineStyle(3, 0xFF0000,100);      //굵기 3, 붉은색의 불투명합니다. _root.mc.moveTo(100, 50);                  //시작점이 100,50입니다. _root.mc.lineTo(300,150);                    //300,150까지 직선을 그립니다.   _root.createEmptyMovieClip("mc",0); 인스턴스 이름이 mc인 무비클립의 레이어 깊이(depth)가 0인 빈 무비클립을 바탕화면에 만듭니다.   바탕화면에 있는 mc라는 무비클립에 그릴 선의 스타일(_root.mc.lineStyle)을 정합니다. 선의 스타일을 조정할 수 있는 매개 변수는 3개입니다. 앞의 것이 선의 두께, 중간에 있는 것이 선의 색입니다. 그리고 마지막에 있는 것이 투명한 정도를 나타내는 알파(alpha)입니다. 100은 완전 불투명 50은 반투명, 0은 완전투명(아무것도 안보입니다.)입니다. 보통은 앞의 2개의 매개변수만 써도 무방합니다.     위에서는 선의 굵기를 3으로 했네요... 그리고 색깔은 붉은색입니다. "0x"는 왜 붙여주는지 잘 모르겠구요(^^), 뒤에 있는 6개가 색을 구현해줍니다. rgb란말 들어봤나요? 빛의 삼원색 red(빨간색), green(초록색), blue(파란색). 앞에서부터 FF는 red, 가운데 00은 green, 뒤의 00은 blue를 나타내죠. 빛은 섞으면 섞을수록 밝아지고 빛이 없으면(0%) 까맣죠. ^^   @ 16진수로 표현한 색상     6자리의 16진수는 각각 두 자리씩 세 가지 색상을 의미하는데, 첫번째 두 자리는 적색(Red), 가운데 두 자리는 녹색(Green), 마지막 두 자리는 청색(Blue)을 의미합니다. 이 세 가지 색상(RGB)이 혼합되는 정도에 따라 색이 정해지는 것입니다.   16진수는 '0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F' 16가지의 문자(혹은 숫자)로 표현됩니다. 10진수가 0~9의 10가지 숫자로 표현되는 것과 마찬가지입니다. '10'이 넘으면 그에 해당하는 숫자가 없기 때문에 'A'와 같은 알파펫을 사용하는 것입니다. 16진수 두 자리는 '00'부터 'FF'까지 모두 256(16의 제곱)가지의 수를 표시할 수 있습니다. 10진수로 하면 0부터 255까지의 수와 같습니다.   다시 말해서, 6자리의 16진수로 색을 지정한다는 것은 적색(Red), 녹색(Green), 청색(Blue)을 각각 256 등급으로 나누어 혼합한다는 것으로 실제로 표현할 수 있는 색의 수는 16,777,216(16의 6제곱)가지가 됩니다.   10진수 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16진수 0 1 2 3 4 5 6 7 8 9 A B C D E F   10진수 00 51 102 153 204 255 16진수 00 33 66 99 CC FF % 0% 20% 40% 60% 80% 100%     위에서 설명한 바와 같이 6자리의 16진수로 정해지는 색은 적색(Red), 녹색(Green), 청색(Blue)의 정도에 따라 달라집니다. 예를 들어 "0xFFFFFF"가 가리키는 색은 적색이 'FF(100%)', 녹색이 'FF(100%)', 청색이 'FF(100%)' 혼합되어 있다는 것을 의미하는 것으로 백색(White)입니다. (빛의 3원색을 모두 합하면 백색이 됩니다.) 그러면 검은색은 어떻게 표현할까요? ^^     moveTo로 지정해주는 좌표(moveTo(100,50))로 시작점을 옮기라는 뜻입니다. 시작점에서부터 선을 그리라는 명령이 lineTo입니다.   2. 다음과 같이 선을 여러개 이을 수도 있고 색으로 채울 수도 있다.     _root.createEmptyMovieClip ("triangle", 1);  //무비클립을 만듭니다. _root.triangle.beginFill (0x0000FF, 50);        //파란색이고 반투명합니다. _root.triangle.lineStyle (3, 0x000000, 100);   //굵기 3, 검정색, 완전불투명 _root.triangle.moveTo (250, 50);                 //시작점 _root.triangle.lineTo (100, 150);                 //왼쪽 아래로 긋습니다. _root.triangle.lineTo (400, 150);                 //오른족으로 긋습니다. _root.triangle.lineTo (250, 50);                  //다시 시작점으로 갑니다. _root.triangle.endFill();                           //색 채우기를 마칩니다.   3. 커브 그리기(선그리기를 할 수 있다.)   1. 첫번째 프레임에 다음과 같은 액션을 써 넣는다. ("_root."을 생략해도 되는 거 아시죠? ^^)      createEmptyMovieClip("mc", 0);  mc.clear();  mc.lineStyle(3, 0xFF0000);  mc.moveTo(100, 100);  mc.curveTo(250, 20, 400, 100); //100,100에서 400,100까지의 직선을 곡선으로 나타낼 제어포인트를 추가한 //것으로 생각하면 됩니다. 현재 제어 포인트는 250,20입니다. //아래 swf파일에서 제어포인트를 달리하였을 때의 모습을 미리 확인해 보세요.   4. 마우스를 이용한 선 그리기(선그리기를 할 수 있다.)   1. 첫번째 프레임에 다음과 같은 액션을 써 넣는다. ("_root."는 생략...)         startx = 100;                                           //초기값 starty = 50; endx = 400; endy = 150; function draw() {    createEmptyMovieClip("mc", 0);    mc.clear();    mc.lineStyle(3, 0xFF0000);    mc.moveTo(startx, starty);    mc.lineTo(endx, endy); } setInterval(draw, 20);   onMouseDown = function() {   //마우스를 누르면...    ok = 1;                             //마우스를 클릭해야만 ok=1이 됩니다.    startx = _xmouse;               //마우스가 클릭된 지점이 시작점이 됩니다.    starty = _ymouse; }; onMouseMove = function() {   //마우스가 움직이면...    if (ok) { //마우스를 누르지 않은 채 움직일 때 선의 끝점이 달라지지 않도록       endx = _xmouse;       endy = _ymouse;    } }; onMouseUp = function() {      //마우스를 떼면...    ok=0;                              //마우스가 움직여도 선그리가 되지 않습니다. };   고급액션 : 김윤형님이 알려주신 팁 ^^   setInterval()에 의해 계속적으로 함수를 호출하는 것보다 updateAfterEvent()를 사용하는 것이 좋을 것 같다는...      startx = 100; starty = 50; endx = 400; endy = 150; function draw() {    createEmptyMovieClip("mc", 0);    mc.clear();    mc.lineStyle(3, 0xFF0000);    mc.moveTo(startx, starty);    mc.lineTo(endx, endy); } draw(); onMouseDown = function () {    ok = 1;    startx=_xmouse;    starty=_ymouse; }; onMouseMove = function () {    if (ok) {       endx=_xmouse;       endy=_ymouse;       draw();       updateAfterEvent();    } }; onMouseUp = function () {    ok = 0; };     5. 과제 (선그리기를 할 수 있다.)   1. 웹페이지에서 지도 서비스를 하는 맵토피아나 콩나물 같은 웹사이트에 가보면 마우스로 클릭해     직선 거리 알아보는 기능이 있는데요, 그거 할려면 어떻게 해야할까요?    (힌트 : clear() )