드로잉 API 예제: Algorithmic Visual Generator

Flash Player 9 이상, Adobe AIR 1.0 이상

Algorithmic Visual Generator 예제에서는 원 궤도를 따라 움직이는 여러 가지 "위성" 또는 원형을 스테이지에 동적으로 그립니다. 살펴본 기능은 다음과 같습니다.

  • 드로잉 API를 사용하여 동적 모양을 가진 기본 모양 그리기

  • 드로잉에 사용된 속성과 사용자 상호 작용 연결

  • 각 프레임에서 스테이지를 지우고 다시 그려서 애니메이션 전달

이전 하위 단원의 예제에서는 Event.ENTER_FRAME 이벤트를 사용하여 단일 "위성"에 애니메이션을 적용했습니다. 이 예제에서는 이를 바탕으로 여러 위성의 시각적 표시를 즉시 업데이트하는 각종 슬라이더의 제어판을 만듭니다. 이 예제는 코드를 외부 클래스로 정형화하고 위성 생성 코드를 루프 내에 포함시켜 각 위성에 대한 참조를 satellites 배열에 저장합니다.

이 샘플에 대한 응용 프로그램 파일을 가져오려면 www.adobe.com/go/learn_programmingAS3samples_flash_kr를 참조하십시오. 응용 프로그램 파일은 Samples/AlgorithmicVisualGenerator 폴더에 있습니다. 이 폴더에는 다음과 같은 파일이 있습니다.

File

설명

AlgorithmicVisualGenerator.fla

Flash Professional(FLA) 형식의 기본 응용 프로그램 파일입니다.

com/example/programmingas3/algorithmic/AlgorithmicVisualGenerator.as

스테이지에 대한 위성을 드로잉하고 제어판의 이벤트에 응답하여 위성 드로잉에 영향을 미치는 변수를 업데이트하는 등의 기본 응용 프로그램 기능을 제공하는 클래스입니다.

com/example/programmingas3/algorithmic/ControlPanel.as

몇 개의 슬라이더로 사용자 상호 작용을 관리하고 상호 작업 발생 시 이벤트를 전달하는 클래스입니다.

com/example/programmingas3/algorithmic/Satellite.as

중앙 포인트 주위를 궤도로 회전하는 표시 객체를 나타내고 현재 드로잉 상태와 관련된 속성을 포함하는 클래스입니다.

리스너 설정

응용 프로그램은 먼저 세 개의 리스너를 만듭니다. 첫 번째 리스너는 제어판에서 전달 이벤트를 수신하며 위성 재구성이 필요합니다. 두 번째 리스너는 SWF 파일의 스테이지 크기 변경 사항을 수신합니다. 세 번째 리스너는 SWF 파일의 각 전달 프레임을 수신하고 doEveryFrame() 함수를 사용하여 그리기를 다시 수행합니다.

위성 만들기

이러한 리스너가 설정되면 build() 함수가 호출됩니다. 이 함수는 먼저 clear() 함수를 호출하여 satellites 배열을 비우고 스테이지에 대한 이전 드로잉을 모두 지웁니다. 제어판이 이와 같은 이벤트를 보낼 때마다(예를 들어 색상 설정이 변경될 때마다) build() 함수를 다시 호출할 수 있으므로 이 과정이 필요합니다. 이 경우 위성을 제거하고 다시 만들어야 합니다.

그런 다음 함수는 생성에 필요한 초기 속성(예: 궤도의 임의 위치에서 시작하는 position 변수, 이 예제에서 위성이 생성되면 변경되지 않는 color 변수)을 설정하여 위성을 생성합니다.

각 위성이 생성되었으면 해당 참조가 satellites 배열에 추가됩니다. doEveryFrame() 함수가 호출되면 해당 함수가 이 배열의 모든 위성에 대해 업데이트됩니다.

위성 위치 업데이트

doEveryFrame() 함수는 응용 프로그램의 애니메이션 프로세스의 핵심 요소로서, SWF 파일의 프레임 속도와 동일한 속도로 각 프레임마다 호출됩니다. 그리기 변수는 약간씩 달라지므로 이 함수는 애니메이션 모양을 전달합니다.

함수는 먼저 이전 드로잉을 모두 지우고 배경을 다시 그립니다. 그런 다음 각 위성 컨테이너를 반복하여 각 위성의 position 속성을 증가시키고 제어판의 사용자 상호 작용으로 인해 변경되었을 수 있는 radius 및 orbitRadius 속성을 업데이트합니다. 마지막으로 위성은 Satellite 클래스의 draw() 메서드를 호출하여 새로운 위치로 업데이트됩니다.

카운터 i는 visibleSatellites 변수까지만 증가됩니다. 제어판을 통해 표시되는 위성의 수를 사용자가 제한한 경우 루프의 나머지 위성은 다시 그려지지 않고 숨겨져야 하기 때문입니다. 이러한 경우는 그리기를 담당하는 루프 바로 다음의 루프에서 발생합니다.

doEveryFrame() 함수가 완료되면 visibleSatellites 수가 화면 위치에서 업데이트됩니다.

사용자 상호 작용에 대한 응답

사용자 상호 작용은 제어판을 통해 발생하며 ControlPanel 클래스에서 관리합니다. 이 클래스는 각 슬라이더의 개별적인 최소값, 최대값 및 기본값과 함께 리스너를 설정합니다. 사용자가 이러한 슬라이더를 이동하면 changeSetting() 함수가 호출되며 이 함수는 제어판의 속성을 업데이트합니다. 변경 사항으로 인해 표시를 재구성해야 하는 경우 이벤트가 전달되어 기본 응용 프로그램 파일에서 처리됩니다. 제어판 설정이 변경되면 doEveryFrame() 함수는 업데이트된 변수를 사용하여 각 위성을 그립니다.

구체적인 사용자 정의

이 예제는 드로잉 API를 사용하여 시각적 표시 생성 방법을 보여 주는 간단한 예제로서, 비교적 간단한 코드 행을 사용하여 꽤 복잡해 보이는 대화형 환경을 만듭니다. 하지만 이 예제를 약간 수정하여 기능을 추가할 수 있습니다. 몇 가지 아이디어는 다음과 같습니다.

  • doEveryFrame() 함수는 위성의 색상 값을 증가시킬 수 있습니다.

  • doEveryFrame() 함수는 시간 경과에 따라 위성 반경을 축소하거나 확장할 수 있습니다.

  • 위성 반경은 원형일 필요가 없습니다. 예를 들어 Math 클래스를 사용하여 사인파에 따라 이동할 수 있습니다.

  • 위성은 다른 위성과의 히트 감지를 사용할 수 있습니다.

드로잉 API를 사용하여 Flash 제작 환경에서 시각 효과를 생성함으로써 런타임에 기본 모양을 그릴 수도 있습니다. 하지만 손으로 제작할 수 없는 다양하고 넓은 범위의 시각 효과를 생성하는 데도 사용될 수 있습니다. ActionScript 제작자는 드로잉 API와 약간의 수학 기능을 사용하여 여러 가지 다양한 작품에 생동감을 불어 넣을 수 있습니다.