드로잉 API 사용의 기초



드로잉 API 사용 소개

드로잉 API는 ActionScript를 사용하여 벡터 그래픽(선, 곡선, 모양, 채우기, 그래디언트)을 만들고 화면에 이를 표시하는 ActionScript 내장 기능의 이름입니다. flash.display.Graphics 클래스가 이 기능을 제공합니다. 이러한 각 클래스에 정의된 graphics 속성을 사용하여 Shape, Sprite 또는 MovieClip 인스턴스에서 ActionScript로 그림을 그릴 수 있습니다. 이러한 각 클래스의 graphics 속성은 실제로는 Graphics 클래스의 인스턴스입니다.

코드를 사용한 드로잉에 이제 막 입문한 사용자를 위해 Graphics 클래스에는 원, 타원, 사각형, 모서리가 둥근 사각형과 같은 일반 도형을 쉽게 그릴 수 있는 몇 가지 메서드가 포함되어 있습니다. 이러한 도형은 빈 선이나 채워진 모양으로 그릴 수 있습니다. 고급 기능을 필요로 하는 사용자를 위해 Graphics 클래스에는 선과 이차 베지어 곡선을 그릴 수 있는 메서드도 포함되어 있습니다. 이러한 메서드를 Math 클래스의 삼각 함수와 함께 사용하여 필요한 모양을 만들 수 있습니다.

Flash Player 10 및 Adobe AIR 1.5에는 단일 명령으로 전체 모양을 프로그래밍 방식으로 그리는 데 사용할 수 있는 추가 드로잉 API가 포함되었습니다. "드로잉 API 사용의 기초"에서 다루는 Graphics 클래스 및 작업에 익숙해진 사용자는 드로잉 API의 고급 사용에서 이러한 드로잉 API 기능에 대해 자세히 배울 수 있습니다.

일반적인 드로잉 API 작업

다음은 ActionScript에서 드로잉 API를 사용하여 수행할 수 있는 작업들로, 이 장에서 설명하는 내용이기도 합니다.

  • 모양 그리기를 위한 선 스타일 및 채우기 스타일 정의

  • 직선 및 곡선 그리기

  • 원, 타원, 사각형 등의 모양을 그리기 위한 메서드 사용

  • 그래디언트 선 및 채우기를 사용하여 그리기

  • 그래디언트 생성을 위한 행렬 정의

  • 드로잉 API에서 삼각 함수 사용

  • 드로잉 API를 애니메이션으로 통합

중요한 개념 및 용어

다음 참조 목록에는 이 장에 사용된 중요한 용어가 포함되어 있습니다.

  • 앵커 포인트: 이차 베지어 곡선 두 끝점 중 하나입니다.

  • 제어점: 이차 베지어 곡선의 방향 및 굴곡 정도를 정의하는 점입니다. 곡선이 제어점에 닿지는 않지만 제어점을 향하는 곡선이 그려집니다.

  • 좌표 공간: 표시 객체에 포함된 좌표의 그래프이며 해당 객체의 자식 요소가 배치됩니다.

  • 채우기: 색상선으로 그린 모양에서 단색의 내부 또는 외곽선이 없는 모양 전체를 말합니다.

  • 그래디언트: 한 가지 색상에서 하나 이상의 다른 색상으로 점진적으로 변하는 색상입니다(단색의 반대).

  • 점: 좌표 공간에서의 한 위치를 나타냅니다. ActionScript에 사용되는 2차원 좌표계에서는 x축과 y축(점의 좌표) 위의 해당 위치로 점이 정의됩니다.

  • 이차 베지어 곡선: 특정 수학 공식으로 정의된 곡선 유형입니다. 이 유형의 곡선에서 곡선의 모양은 앵커 포인트의 위치(곡선의 두 끝점)와 곡선의 방향 및 굴곡 정도를 정의하는 제어점을 기준으로 계산됩니다.

  • 배율: 객체의 원래 크기에 비례한 크기를 나타냅니다. 동사로 '크기 조정'이라고도 하는데, 이 경우에는 객체를 늘리거나 줄여 크기를 조절한다는 의미를 갖습니다.

  • 획: 색상선으로 그린 모양에서 외곽선 부분 또는 채워지지 않은 모양의 선입니다.

  • 평행 이동: 점의 좌표를 한 좌표 공간에서 다른 좌표 공간으로 변경합니다.

  • X축: ActionScript에서 사용하는 2D 좌표계의 수평 축입니다.

  • Y축: ActionScript에서 사용하는 2D 좌표계의 수직 축입니다.

이 장의 예제를 사용하여 작업

장의 내용을 따라 작업하면서 예제 코드 샘플을 테스트할 수 있습니다. 이 장은 시각적 내용 그리기를 다루므로, 코드 샘플을 테스트하려면 코드를 실행한 후 생성된 SWF의 결과를 확인해야 합니다. 코드 샘플을 테스트하려면:

  1. 빈 Flash 문서를 만듭니다.

  2. [타임라인]에서 키프레임을 선택합니다.

  3. [액션] 패널을 열고 [스크립트] 창에 코드 샘플을 복사합니다.

  4. [컨트롤] > [무비 테스트]를 사용하여 프로그램을 실행합니다.

    생성된 SWF 파일에서 코드 샘플의 결과를 확인합니다.