제 12 장 디스플레이프로그래밍 12 ActionScript 3.0 의디스플레이프로그래밍을사용하면 Adobe Flash Player 9 의 Stage 에표시되는요소로작업할수있습니다. 이장에서는화면요소작업과관련된기본개념을설명합니다. 또한시각적요소를프로그래밍방식으로구성하는자세한방법과표시객체에대한사용자정의클래스를만드는방법에대해살펴봅니다. 목차 디스플레이프로그래밍의기초............................ 350 기본표시클래스....................................... 354 표시목록방식의장점................................... 356 표시객체작업......................................... 359 표시객체조작......................................... 372 표시객체마스크적용................................... 389 객체애니메이션....................................... 392 예제 : SpriteArranger.................................. 397 349
디스플레이프로그래밍의기초 디스플레이프로그래밍소개 ActionScript 3.0으로작성된각응용프로그램에는표시목록이라는표시된객체의계층이있습니다. 이표시목록에는응용프로그램에보이는요소가모두포함되어있습니다. 표시요소는다음그룹중하나이상에속합니다. Stage Stage는표시객체의기본컨테이너입니다. 각응용프로그램에는모든화면표시객체를포함하는 Stage 객체가하나있습니다. Stage는최상위컨테이너이며표시목록계층의맨위에있습니다. Stage SWF 350 디스플레이프로그래밍
각 SWF 파일에는 SWF 파일의기본클래스라는관련된 ActionScript 클래스가있습니다. Flash Player는 HTML 페이지에서 SWF 파일을열때해당클래스의생성자함수를호출합니다. 그러면생성되는인스턴스 ( 항상표시객체의유형 ) 가 Stage 객체의자식으로추가됩니다. SWF 파일의기본클래스는항상 Sprite 클래스를확장합니다. 자세한내용은 356 페이지의 표시목록방식의장점 을참조하십시오. DisplayObject 인스턴스의 stage 속성을통해 Stage에액세스할수있습니다. 자세한내용은 366페이지의 Stage 속성설정 을참조하십시오. 표시객체 ActionScript 3.0에서응용프로그램의화면에표시되는모든요소는표시객체유형입니다. flash.display 패키지에는많은다른클래스에의해확장되는기본클래스인 DisplayObject 클래스가포함되어있습니다. 이러한각클래스는벡터모양, 무비클립, 텍스트필드등과같은서로다른유형의표시객체를나타냅니다. 이러한클래스에대한개요는 356페이지의 표시목록방식의장점 을참조하십시오. 표시객체컨테이너표시객체컨테이너는고유한시각적표현이있고자식객체를포함할수있는특수유형의표시객체입니다. 이때자식객체도표시객체입니다. DisplayObjectContainer 클래스는 DisplayObject 클래스의하위클래스입니다. DisplayObjectContainer 객체는자식목록에여러표시객체를포함할수있습니다. 예를들어, 다음그림에서는다양한표시객체를포함하는 Sprite라는 DisplayObjectContainer 객체유형을보여줍니다. SimpleButton 객체. 이유형의표시객체는 업, 다운 및 오버 상태를가집니다. Bitmap 객체. 이경우 Bitmap 객체는 Loader 객체를통해외부 JPEG 에서로드됩니다. Shape 객체. 그림프레임 에는 ActionScript 에서그린둥근사각형이포함되어있습니다. 이 Shape 객체에는그림자필터가적용되어있습니다. TextField 객체 표시객체에대해언급할때는 DisplayObjectContainer 객체도표시객체컨테이너또는간단히컨테이너라고합니다. 디스플레이프로그래밍의기초 351
모든보이는표시객체는 DisplayObject 클래스에서상속되지만각유형은 DisplayObject 클래스의특정하위클래스입니다. 예를들어, Shape 클래스또는 Video 클래스에대한생성자함수가있지만, DisplayObject 클래스에대한생성자함수는없습니다. 앞에서설명한것처럼 Stage는표시객체컨테이너입니다. 일반디스플레이프로그래밍작업 대부분의 ActionScript 프로그래밍에는시각적요소만들기및조작이포함되므로디스플레이프로그래밍과관련된다양한작업이이루어집니다. 이장에서는다음과같이모든표시객체에적용되는일반작업에대해설명합니다. 표시목록및표시객체컨테이너작업 표시목록에표시객체추가 표시목록에서객체제거 표시컨테이너간에객체이동 다른객체의앞또는뒤로객체이동 Stage 작업 프레임속도설정 Stage 배율제어 전체화면모드작업 표시객체이벤트처리 표시객체위치지정 ( 드래그앤드롭상호작용포함 ) 표시객체크기조절, 배율및회전 표시객체에블렌드모드, 색상변환및투명도적용 표시객체마스크적용 표시객체애니메이션 외부표시내용로드 ( 예 : SWF 파일또는이미지 ) 이설명서의이후장에서는표시객체사용을위한추가작업에대해설명합니다. 이러한작업에는모든표시객체에적용되는작업과특정표시객체유형에관련된작업이모두포함됩니다. 표시객체에서 ActionScript를사용하여벡터그래픽그리기 (421페이지의제14장, 드로잉 API 사용 참조 ) 표시객체에기하학적변형적용 (405 페이지의제 13 장, 기하도형을사용한작업 참조 ) 표시객체에그래픽필터효과 ( 예 : 흐림, 광선, 그림자등 ) 적용 (437페이지의제15장, 표시객체필터링 참조 ) MovieClip 고유특성작업 (461 페이지의제 16 장, 무비클립을사용한작업 참조 ) 352 디스플레이프로그래밍
TextField 객체작업 (477 페이지의제 17 장, 텍스트를사용한작업 참조 ) 비트맵그래픽작업 (505 페이지의제 18 장, 비트맵을사용한작업 참조 ) 비디오요소작업 (519 페이지의제 19 장, 비디오를사용한작업 참조 ) 중요한개념및용어 다음참조목록에는이장에사용된중요한용어가포함되어있습니다. 알파 : 색상의투명도 ( 보다정확하게는불투명도 ) 를나타내는색상값입니다. 예를들어, 알파채널값이 60% 인색상은전체강도의 60% 만표시되고 40% 는투명하게나타납니다. 비트맵그래픽 : 컴퓨터에서색상픽셀의격자 ( 행, 열 ) 로정의되는그래픽입니다. 일반적으로비트맵그래픽에는디지털사진및이와유사한이미지가포함됩니다. 블렌딩모드 : 겹치는두개의이미지내용이서로영향을미치는방식을지정하는것입니다. 일반적으로불투명한이미지가다른이미지위에놓이게되면아래쪽의이미지를가려서아래쪽이미지가전혀보이지않지만, 블렌딩모드를다르게하면이미지색상의블렌드방식이변경되어두개이미지가혼합되어나타납니다. 표시목록 : Flash Player에의해가시화면내용으로렌더링되는표시객체계층구조입니다. Stage는표시목록의루트이며, Stage 또는해당자식중하나에연결된모든표시객체가표시목록을구성합니다 ( 객체가 Stage 경계외부에있는등실제로렌더링되지않은경우도포함 ). 표시객체 : Flash Player의시각적내용중일부유형을나타내는객체입니다. 표시객체만표시목록에포함될수있으며모든표시객체클래스는 DisplayObject 클래스의하위클래스입니다. 표시객체컨테이너 : 일반적으로시각적표현을가지며자식표시객체를포함할수있는특수한유형의표시객체입니다. SWF 파일의기본클래스 : SWF 파일에서가장바깥쪽표시객체의비헤이비어를정의하는클래스로, 개념적으로 SWF 파일자체의클래스를나타냅니다. 예를들어, Flash 제작에서만들어진 SWF에는다른모든타임라인이포함된 기본타임라인 이있으며, SWF 파일의기본클래스는기본타임라인이인스턴스인클래스가됩니다. 마스크적용 : 이미지의특정부분이보이지않도록숨기는, 즉이미지의특정부분만표시되도록하는기술입니다. 이미지의숨겨진부분은투명하게되므로아래쪽내용도볼수있습니다. 이용어는특정영역을칠하지않을때사용하는마스킹테이프와관계있습니다. Stage: SWF의모든시각적내용의기반이나배경이되는시각적컨테이너입니다. 변형 : 객체회전, 크기변경, 모양기울이기또는왜곡, 색상변경등그래픽의시각적특징을조절합니다. 벡터그래픽 : 컴퓨터에서특정특성 ( 두께, 길이, 크기, 각도, 위치 ) 으로그려진선및모양으로정의되는그래픽입니다. 디스플레이프로그래밍의기초 353
이장의예제를사용하여작업 장의내용을따라작업하면서예제코드샘플을직접테스트할수있습니다. 이장에서는시각적인내용의작성및조작에대해다루기때문에기본적으로이장의모든코드샘플은시각적객체를만들어화면에표시하며, 샘플을테스트할경우이전장의변수값대신 Flash Player에서결과를확인해야합니다. 이장의코드샘플을테스트하려면 : 1. 빈 Flash 문서를만듭니다. 2. 타임라인에서키프레임을선택합니다. 3. [ 액션 ] 패널을열고 [ 스크립트 ] 창에코드샘플을복사합니다. 4. [ 컨트롤 ] > [ 무비테스트 ] 를사용하여프로그램을실행합니다. 화면에표시된코드결과를확인합니다. 모든 trace() 함수호출이 [ 출력 ] 패널에표시됩니다. 예제코드샘플테스트와관련된기술에대해서는 60페이지의 이장에제시된예제코드샘플테스트 에서자세하게설명합니다. 기본표시클래스 ActionScript 3.0 flash.display 패키지에는 Flash Player 에서표시될수있는시각적객체에대한클래스가포함되어있습니다. 다음그림에서는이러한기본표시객체클래스의하위클래스관계를보여줍니다. AVM1Movie Bitmap InteractiveObject MorphShape Shape StaticText DisplayObjectContainer SimpleButton TextField Loader Sprite Stage MovieClip 이그림에서는표시객체클래스의클래스상속을보여줍니다. StaticText, TextField 및 Video 와같은일부클래스는 flash.display 패키지에없지만, DisplayObject 클래스에서여전히상속됩니다. 354 디스플레이프로그래밍
DisplayObject 클래스를확장하는모든클래스는해당메서드와속성을상속합니다. 자세한내용은 359페이지의 DisplayObject 클래스의속성및메서드 를참조하십시오. flash.display 패키지에포함된다음클래스의객체를인스턴스화할수있습니다. Bitmap - Bitmap 클래스를사용하여외부파일에서로드되거나 ActionScript를통해렌더링되는비트맵객체를정의할수있습니다. Loader 클래스를통해외부파일에서비트맵을로드할수있습니다. GIF, JPG 또는 PNG 파일을로드할수있습니다. 또한사용자정의데이터를사용하여 BitmapData 객체를만든다음해당데이터를사용하는 Bitmap 객체를만들수있습니다. BitmapData 클래스의메서드를사용하면 ActionScript에서로드하거나만든비트맵을변경할수있습니다. 자세한내용은 394페이지의 표시객체로드 및 505페이지의제18장, 비트맵을사용한작업 을참조하십시오. Loader - Loader 클래스를사용하여외부에셋 (SWF 파일또는그래픽 ) 을로드할수있습니다. 자세한내용은 394 페이지의 표시내용을동적으로로드 를참조하십시오. Shape - Shape 클래스를사용하여사각형, 선, 원등과같은벡터그래픽을만들수있습니다. 자세한내용은 421 페이지의제 14 장, 드로잉 API 사용 을참조하십시오. SimpleButton - SimpleButton 객체는 Flash 버튼심볼을 ActionScript로표현한것입니다. SimpleButton 인스턴스에는업, 다운, 오버의세가지버튼상태가있습니다. Sprite - Sprite 객체는자체그래픽과자식표시객체를포함할수있습니다. Sprite 클래스는 DisplayObjectContainer 클래스를확장합니다. 자세한내용은 360페이지의 표시객체컨테이너작업 및 421페이지의제14장, 드로잉 API 사용 을참조하십시오. MovieClip - MovieClip 객체는 Flash 제작도구로만든무비클립심볼의 ActionScript 형식입니다. 실제로 MovieClip은타임라인이있다는점을제외하고 Sprite 객체와비슷합니다. 자세한내용은 461페이지의제16장, 무비클립을사용한작업 을참조하십시오. flash.display 패키지에없는다음클래스는 DisplayObject 클래스의하위클래스입니다. flash.text 패키지에포함된 TextField 클래스는텍스트표시및입력을위한표시객체입니다. 자세한내용은 477페이지의제17장, 텍스트를사용한작업 을참조하십시오. flash.media 패키지에포함된 Video 클래스는비디오파일을표시하는데사용되는표시객체입니다. 자세한내용은 519페이지의제19장, 비디오를사용한작업 을참조하십시오. flash.display 패키지에있는다음클래스는 DisplayObject 클래스를확장하지만해당클래스의인스턴스를만들수없습니다. 이러한클래스는공통기능을하나의클래스로결합하여다른표시객체에대한부모클래스역할을합니다. AVM1Movie - AVM1Movie 클래스는 ActionScript 1.0 및 2.0에서만든로드된 SWF 파일을나타내는데사용됩니다. DisplayObjectContainer - Loader, Stage, Sprite 및 MovieClip 클래스는각각 DisplayObjectContainer 클래스를확장합니다. 자세한내용은 360 페이지의 표시객체컨테이너작업 을참조하십시오. 기본표시클래스 355
InteractiveObject - InteractiveObject 클래스는마우스및키보드와상호작용하는데사용되는모든객체에대한기본클래스입니다. SimpleButton, TextField, Video, Loader, Sprite, Stage 및 MovieClip 객체는모두 InteractiveObject 클래스의하위클래스입니다. 마우스및키보드상호작용만들기에대한자세한내용은 589페이지의제21장, 사용자입력캡처 를참조하십시오. MorphShape - 이러한객체는 Flash 제작도구에서모양트윈을만들때만들어집니다. 이러한객체는 ActionScript를사용하여인스턴스화할수없지만표시목록에서액세스할수있습니다. Stage - Stage 클래스는 DisplayObjectContainer 클래스를확장합니다. 하나의응용프로그램에는표시목록계층의맨위에하나의 Stage 인스턴스가있습니다. Stage에액세스하려면 DisplayObject 인스턴스의 stage 속성을사용합니다. 자세한내용은 366페이지의 Stage 속성설정 을참조하십시오. 또한 flash.text 패키지의 StaticText 클래스는 DisplayObject 클래스를확장하지만, 코드에그인스턴스를만들수없습니다. 정적텍스트필드는 Adobe Flash CS3 Professional 에서만만들수있습니다. 표시목록방식의장점 ActionScript 3.0에는표시객체유형마다별도의클래스가있습니다. ActionScript 1.0 및 2.0 에는많은동일한유형의객체가 MovieClip 클래스하나에모두포함되어있습니다. 이클래스개별화및표시목록계층구조에는다음과같은장점이있습니다. 보다효율적인렌더링및메모리사용감소 심도관리향상 표시목록전체탐색 목록외표시객체 보다쉬운표시객체하위클래스화이러한장점에대해서는다음단원에서설명합니다. 356 디스플레이프로그래밍
보다효율적인렌더링및파일크기축소 ActionScript 1.0 및 2.0에서는 MovieClip 객체에서만모양을그릴수있습니다. ActionScript 3.0에는모양을그릴수있는간단한표시객체클래스가있습니다. 이러한 ActionScript 3.0 표시객체클래스는 MovieClip 객체에포함되는전체메서드와속성을포함하지않기때문에, 메모리및프로세서리소스사용을줄일수있습니다. 예를들어, 각 MovieClip 객체는무비클립의타임라인속성을포함하지만 Shape 객체는이속성을포함하지않습니다. 타임라인관리를위한속성은많은메모리와프로세서리소스를사용할수있습니다. ActionScript 3.0에서는 Shape 객체를사용하여성능을높일수있습니다. Shape 객체는복잡한 MovieClip 객체보다오버헤드가적습니다. Flash Player에서사용되지않는 MovieClip 속성을관리할필요가없으므로, 속도가향상되고객체에서사용하는메모리용량도감소됩니다. 심도관리개선 ActionScript 1.0 및 2.0에서는심도가 getnexthighestdepth() 와같은선형심도관리스키마와메서드를통해관리됩니다. ActionScript 3.0에는표시객체의심도를관리하는보다편리한메서드와속성을가진 DisplayObjectContainer 클래스가포함되어있습니다. ActionScript 3.0에서는표시객체를 DisplayObjectContainer 인스턴스의자식목록에서새위치로이동하면표시객체컨테이너에있는다른자식객체들의위치가자동으로다시배치되고표시객체컨테이너의적절한자식인덱스위치에할당됩니다. 또한 ActionScript 3.0에서는표시객체컨테이너의모든자식객체를항상검색할수있습니다. 모든 DisplayObjectContainer 인스턴스에는표시객체컨테이너에있는자식수를나열하는 numchildren 속성이있습니다. 표시객체컨테이너의자식목록에는항상인덱스가지정되어있으므로, 인덱스위치 0부터마지막인덱스위치 (numchildren - 1) 까지목록의모든객체를검사할수있습니다. 이작업은 ActionScript 1.0 및 2.0에있는 MovieClip 객체의메서드와속성으로는가능하지않습니다. ActionScript 3.0에서는표시객체컨테이너자식목록의인덱스번호에빠진번호가없기때문에표시목록을차례대로쉽게탐색할수있습니다. ActionScript 1.0 및 2.0에서보다표시목록을탐색하고객체심도를관리하기가훨씬쉬워졌습니다. ActionScript 1.0 및 2.0에서는무비클립이심도순서에간격을두고객체를포함할수있기때문에객체목록을탐색하기가어려울수있습니다. ActionScript 3.0에서는표시객체컨테이너의각자식목록이내부적으로단일배열로캐시되므로인덱스를기준으로매우빠르게조회할수있습니다. 표시객체컨테이너의모든자식을매우빠르게반복할수도있습니다. ActionScript 3.0에서는 DisplayObjectContainer 클래스의 getchildbyname() 메서드를사용하여표시객체컨테이너의자식에액세스할수도있습니다. 표시목록방식의장점 357
표시목록전체탐색 ActionScript 1.0 및 2.0 에서는 Flash 제작도구에서그린벡터모양과같은일부객체에액세스할수없습니다. ActionScript 3.0 에서는 ActionScript 에서만든객체와 Flash 제작도구에서만든모든표시객체를포함하여표시목록에있는모든객체에액세스할수있습니다. 자세한내용은 364 페이지의 표시목록탐색 을참조하십시오. 목록외표시객체 ActionScript 3.0에서는보이는표시목록에없는표시객체를만들수있습니다. 이러한표시객체를목록외표시객체라고합니다. 표시객체는표시목록에이미추가된 DisplayObjectContainer 인스턴스의 addchild() 또는 addchildat() 메서드를호출할경우에만보이는표시목록에추가됩니다. 목록외표시객체를사용하면, 여러표시객체가포함된표시객체컨테이너가여러개있는객체처럼복잡한표시객체를모을수있습니다. 표시객체를목록외상태로유지하면, 이러한표시객체를렌더링하는데처리시간을사용하지않고도복잡한객체를모을수있습니다. 그런다음필요에따라표시목록에목록외표시객체를추가할수있습니다. 또한표시객체컨테이너의자식을표시목록내외및표시목록내의원하는위치로이동할수있습니다. 보다쉬운표시객체하위클래스화 ActionScript 1.0 및 2.0에서는기본모양을만들거나비트맵을표시하려면 SWF 파일에새 MovieClip 객체를추가해야합니다. ActionScript 3.0에는 DisplayObject 클래스에 Shape, Bitmap 등과같은많은내장하위클래스가포함되어있습니다. ActionScript 3.0의클래스는특정객체유형에대해더구체화되어, 내장클래스의기본하위클래스를쉽게만들수있습니다. 예를들어, ActionScript 2.0에서원을그리려면사용자정의클래스객체가인스턴스화될때 MovieClip 클래스를확장하는 CustomCircle 클래스를만들수있습니다. 그러나, 이클래스는해당클래스에적용되지않는 MovieClip 클래스의많은속성과메서드 ( 예 : totalframes) 를포함하고있습니다. ActionScript 3.0에서는 Shape 객체를확장하는 CustomCircle 클래스를만들수있으므로, MovieClip 클래스에포함되어있지만관련없는속성과메서드는이클래스에포함되지않습니다. 다음코드는 CustomCircle 클래스의예를보여줍니다. import flash.display.*; private class CustomCircle extends Shape 358 디스플레이프로그래밍
var xpos:number; var ypos:number; var radius:number; var color:uint; public function CustomCircle(xInput:Number, yinput:number, rinput:number, colorinput:uint) xpos = xinput; ypos = yinput; radius = rinput; color = colorinput; this.graphics.beginfill(color); this.graphics.drawcircle(xpos, ypos, radius); 표시객체작업 지금까지 Stage, 표시객체, 표시객체컨테이너및표시목록의기본개념에대해살펴보았으며, 이단원에서는 ActionScript 3.0 을사용한표시객체작업에대해보다자세한정보를제공합니다. DisplayObject 클래스의속성및메서드 모든표시객체는 DisplayObject 클래스의하위클래스이므로 DisplayObject 클래스의속성과메서드를상속합니다. 상속되는속성은모든표시객체에적용되는기본속성입니다. 예를들어, 각표시객체에는표시객체컨테이너에서객체의위치를지정하는 x 속성과 y 속성이있습니다. DisplayObject 클래스생성자를사용하여 DisplayObject 인스턴스를만들수없습니다. new 연산자를사용하여객체를인스턴스화하려면 Sprite와같은다른유형의객체 (DisplayObject 클래스의하위클래스인객체 ) 를만들어야합니다. 또한사용자정의표시객체클래스를만들려면 Shape 클래스또는 Sprite 클래스처럼사용가능한생성자함수가있는표시객체하위클래스중하나의하위클래스를만들어야합니다. 자세한내용은 ActionScript 3.0 언어및구성요소참조설명서의 DisplayObject 클래스설명을참조하십시오. 표시객체작업 359
표시목록에표시객체추가 표시객체를인스턴스화할경우표시목록에있는표시객체컨테이너에표시객체인스턴스를추가할때까지는해당표시객체가 Stage의화면에표시되지않습니다. 예를들어, 다음코드에서 mytext TextField 객체는코드의마지막행을생략하면표시되지않습니다. 코드의마지막행에서 this 키워드는표시목록에이미추가된표시객체컨테이너를나타내야합니다. import flash.display.*; import flash.text.textfield; var mytext:textfield = new TextField(); mytext.text = "Buenos dias."; this.addchild(mytext); 스테이지에시각적요소를추가하면해당요소가 Stage 객체의자식이됩니다. 응용프로그램에로드되는첫번째 SWF 파일 ( 예 : HTML 페이지에포함된파일 ) 은 Stage 객체의자식으로자동추가됩니다. Sprite 클래스를확장하는모든유형의객체가자식이될수있습니다. ActionScript를사용하지않고 ( 예 : Adobe Flex Builder 2에서 MXML 태그를추가하거나 Flash 의 Stage에항목을배치하는방법 ) 만든모든표시객체가표시목록에추가됩니다. 이러한표시객체를 ActionScript를통해추가하지않지만 ActionScript를통해액세스할수있습니다. 예를들어, 다음코드는 ActionScript가아니라제작도구에서추가한 button1이라는객체의폭을조절합니다. button1.width = 200; 표시객체컨테이너작업 DisplayObjectContainer 객체가표시목록에서삭제되거나다른방식으로이동또는변형될경우 DisplayObjectContainer 의각표시객체도함께삭제, 이동또는변형됩니다. 360 디스플레이프로그래밍
표시객체컨테이너는그자체가표시객체의한유형이므로다른표시객체컨테이너에추가될수있습니다. 예를들어, 다음이미지는하나의외곽선모양과다른네개의표시객체컨테이너 (PictureFrame 유형 ) 를포함하는표시객체컨테이너 picturescreen 을보여줍니다. picturescreen 표시객체컨테이너의테두리를정의하는모양 picturescreen 객체의자식인네개의표시객체컨테이너 표시객체가표시목록에나타나게하려면표시객체를표시목록에있는표시객체컨테이너에추가해야합니다. 이때컨테이너객체의 addchild() 메서드또는 addchildat() 메서드를사용합니다. 예를들어, 다음코드의마지막행이없으면 mytextfield 객체가표시되지않습니다. var mytextfield:textfield = new TextField(); mytextfield.text = "hello"; this.root.addchild(mytextfield); 이코드목록에서 this.root는코드를포함하는 MovieClip 표시객체컨테이너를가리킵니다. 실제코드에서는다른컨테이너를지정할수있습니다. addchildat() 메서드를사용하여표시객체컨테이너자식목록의특정위치에자식을추가합니다. 자식목록에서 0부터시작하는인덱스위치는표시객체의레이어위치 ( 전후순서 ) 와관련이있습니다. 예를들어, 다음세표시객체를생각해볼수있습니다. 각객체는 Ball 이라는사용자정의객체로부터만들어졌습니다. 표시객체작업 361
addchildat() 메서드를사용하여컨테이너에서이러한표시객체의레이어위치를조정할수있습니다. 예를들어, 다음과같은코드를살펴봅니다. ball_a = new Ball(0xFFCC00, "a"); ball_a.name = "ball_a"; ball_a.x = 20; ball_a.y = 20; container.addchild(ball_a); ball_b = new Ball(0xFFCC00, "b"); ball_b.name = "ball_b"; ball_b.x = 70; ball_b.y = 20; container.addchild(ball_b); ball_c = new Ball(0xFFCC00, "c"); ball_c.name = "ball_c"; ball_c.x = 40; ball_c.y = 60; container.addchildat(ball_c, 1); 이코드를실행하면 container DisplayObjectContainer 객체에서표시객체가다음과같이배치됩니다. 객체의레이어위치에주목하십시오. 객체의위치를표시목록의맨위로이동하려면목록에해당객체를다시추가하면됩니다. 예를들어, 이전코드를실행한후에 ball_a를스택의맨위로이동하려면다음코드행을사용합니다. container.addchild(ball_a); 이코드는 container 표시목록의해당위치에서 ball_a를효과적으로제거한후목록의맨위에다시추가합니다. 그러면해당객체가스택의맨위로이동합니다. getchildat() 메서드를사용하여표시객체의레이어순서를확인할수있습니다. getchildat() 메서드는전달된인덱스번호를기반으로컨테이너의자식객체를반환합니다. 예를들어, 다음코드는 container DisplayObjectContainer 객체의자식목록에서서로다른위치에있는표시객체의이름을표시합니다. trace(container.getchildat(0).name); // ball_a trace(container.getchildat(1).name); // ball_c trace(container.getchildat(2).name); // ball_b 362 디스플레이프로그래밍
부모컨테이너의자식목록에서표시객체를제거하면목록에서더높은위치에있는요소가자식인덱스에서한위치씩아래로이동합니다. 예를들어, 이전코드에서다음코드는자식목록에서하위에있는표시객체를제거함에따라 container DisplayObjectContainer의위치 2에있는표시객체가위치 1로어떻게이동하는지보여줍니다. container.removechild(ball_c); trace(container.getchildat(0).name); // ball_a trace(container.getchildat(1).name); // ball_b removechild() 및 removechildat() 메서드는표시객체인스턴스를완전히삭제하지않고, 컨테이너의자식목록에서만제거합니다. 따라서다른변수가인스턴스를계속참조할수있습니다. 객체를완전히제거하려면 delete 연산자를사용합니다. 표시객체는부모컨테이너가하나뿐이므로, 표시객체인스턴스를하나의표시객체컨테이너에만추가할수있습니다. 예를들어, 다음코드는표시객체 tf1이하나의컨테이너 ( 이경우 DisplayObjectContainer 클래스를확장하는 Sprite) 에만존재할수있음을보여줍니다. tf1:textfield = new TextField(); tf2:textfield = new TextField(); tf1.name = "text 1"; tf2.name = "text 2"; container1:sprite = new Sprite(); container2:sprite = new Sprite(); container1.addchild(tf1); container1.addchild(tf2); container2.addchild(tf1); trace(container1.numchildren); // 1 trace(container1.getchildat(0).name); // 텍스트 2 trace(container2.numchildren); // 1 trace(container2.getchildat(0).name); // 텍스트 1 한표시객체컨테이너에포함된표시객체를다른표시객체컨테이너에추가하면해당표시객체가첫번째표시객체컨테이너의자식목록에서제거됩니다. 위에서설명한메서드외에도 DisplayObjectContainer 클래스는자식표시객체작업을위한다음과같은다양한메서드를정의합니다. contains(): 표시객체가 DisplayObjectContainer의자식인지여부를결정합니다. getchildbyname(): 이름을기준으로표시객체를검색합니다. getchildindex(): 표시객체의인덱스위치를반환합니다. setchildindex(): 자식표시객체의위치를변경합니다. swapchildren(): 두표시객체의순서 ( 전후순서 ) 를교체합니다. swapchildrenat(): 인덱스값으로지정된두표시객체의순서 ( 전후순서 ) 를교체합니다. 자세한내용은 ActionScript 3.0 언어및구성요소참조설명서의관련항목을참조하십시오. 표시객체작업 363
표시목록에없는표시객체 (Stage 객체의자식인표시객체컨테이너에포함되지않은표시객체 ) 를목록외표시객체라고합니다. 표시목록탐색 이미알고있듯이표시목록은트리구조입니다. 트리의맨위에는 Stage 가있고여기에는여러표시객체를포함할수있습니다. 자체가표시객체컨테이너인이러한표시객체는다른표시객체나표시객체컨테이너를포함할수있습니다. Stage SWF DisplayObjectContainer 클래스에는표시객체컨테이너의자식목록을사용하여표시목록을탐색하기위한속성과메서드가포함되어있습니다. 예를들어, 두표시객체 title 과 pict 를 container 객체 (Sprite 객체, Sprite 클래스는 DisplayObjectContainer 클래스를확장 ) 에추가하는다음코드를살펴봅니다. 364 디스플레이프로그래밍
var container:sprite = new Sprite(); var title:textfield = new TextField(); title.text = "Hello"; var pict:loader = new Loader(); var url:urlrequest = new URLRequest("banana.jpg"); pict.load(url); pict.name = "banana loader"; container.addchild(title); container.addchild(pict); getchildat() 메서드는특정인덱스위치에있는표시목록의자식을반환합니다. trace(container.getchildat(0) is TextField); // true 이름을기준으로자식객체에액세스할수도있습니다. 각표시객체에는 name 속성이있습니다. 이속성을할당하지않을경우 Flash Player는 "instance1" 과같은기본값을할당합니다. 예를들어, 다음코드는 getchildbyname() 메서드를사용하여이름이 "banana loader" 인자식표시객체에액세스하는방법을보여줍니다. trace(container.getchildbyname("banana loader") is Loader); // true getchildbyname() 메서드를사용하면 getchildat() 메서드를사용할때보다속도가느려질수있습니다. 표시객체컨테이너는다른표시객체컨테이너를표시목록에자식객체로포함할수있기때문에응용프로그램의전체표시목록을트리로탐색할수있습니다. 예를들어, 앞에서인용한코드에서 pict Loader 객체의로드작업이완료되면 pict 객체에비트맵인자식표시객체하나가로드됩니다. 이비트맵표시객체에액세스하려면 pict.getchildat(0) 을입력합니다. 또한 container.getchildat(0).getchildat(0)(container.getchildat(0) == pict이기때문 ) 를입력할수도있습니다. 다음함수는표시객체컨테이너에서표시목록의 trace() 출력을들여쓰기형식으로표시합니다. function tracedisplaylist(container:displayobjectcontainer, indentstring:string = ""):void var child:displayobject; for (var i:uint=0; i < container.numchildren; i++) child = container.getchildat(i); trace(indentstring, child, child.name); if (container.getchildat(i) is DisplayObjectContainer) tracedisplaylist(displayobjectcontainer(child), indentstring + "") 표시객체작업 365
Stage 속성설정 Stage 클래스는 DisplayObject 클래스의대부분의속성과메서드를무시합니다. 이무시되는속성또는메서드중하나를호출하면 Flash Player 에서예외가발생합니다. 예를들어, Stage 객체는응용프로그램에대한기본컨테이너로위치가고정되기때문에 x 또는 y 속성이없습니다. x 및 y 속성은컨테이너를기준으로표시객체의위치를나타냅니다. Stage 는다른표시객체컨테이너에포함되지않기때문에이러한속성이적용되지않습니다. 중요 Stage 클래스의일부속성과메서드는로드된첫번째 SWF 파일과동일한보안샌드박스에없는표시객체에는사용할수없습니다. 자세한내용은 730 페이지의 스테이지보안 을참조하십시오. 재생프레임속도제어 Stage 클래스의 framerate 속성은응용프로그램에로드된모든 SWF 파일의프레임속도를설정하는데사용됩니다. 자세한내용은 ActionScript 3.0 언어및구성요소참조설명서를참조하십시오. 스테이지크기조절제어 Flash Player 화면크기를조절하면스테이지내용이이에맞게자동으로조절됩니다. Stage 클래스의 scalemode 속성은스테이지내용조절방식을결정합니다. 이속성은 flash.display.stagescalemode 클래스의상수로정의되는서로다른네가지값으로설정할수있습니다. 세가지 scalemode 값 (StageScaleMode.EXACT_FIT, StageScaleMode.SHOW_ALL 및 StageScaleMode.NO_BORDER) 의경우 Flash Player는해당경계에맞춰스테이지내용의크기를조절합니다. 이세가지옵션에따라다음과같이크기조절수행방식이달라집니다. StageScaleMode.EXACT_FIT - SWF 크기를비례적으로조절합니다. StageScaleMode.SHOW_ALL - 표준 TV에서와이드스크린영화를볼때나타나는검정색바같은테두리의표시여부를결정합니다. StageScaleMode.NO_BORDER - 내용을부분적으로자를수있는지여부를결정합니다. 또는 scalemode가 StageScaleMode.NO_SCALE로설정된경우, 뷰어에서 Flash Player 윈도우크기를조절할때스테이지내용은각각정의된크기로유지됩니다. 이크기조절모드에서만 Stage 클래스의 width 및 height 속성을사용하여크기조절된 Flash Player 윈도우의실제픽셀크기를결정할수있습니다. 다른크기조절모드에서는 stagewidth 및 stageheight 속성이항상 SWF의원래폭및높이를반영합니다. 또한 scalemode가 StageScaleMode.NO_SCALE로설정되고 SWF 파일의크기가조절된경우 Stage 클래스의 resize 이벤트가전달되어이에따라조절할수있습니다. 366 디스플레이프로그래밍
따라서 scalemode 를 StageScaleMode.NO_SCALE 로설정하면원하는경우윈도우크기조절에맞춰화면내용을조절하는방법을보다세밀하게제어할수있습니다. 예를들어, 비디오와컨트롤막대가포함된 SWF 에서스테이지의크기를조절할때컨트롤막대를동일한크기로유지하고스테이지크기변경에맞춰비디오윈도우의크기만변경할수있습니다. 다음예제에서이를확인할수있습니다. // videoscreen 은비디오를포함하는표시객체 ( 예 : Video 인스턴스 ) 로서 // 스테이지의왼쪽위모서리에배치되어야하며 SWF 크기조절시 videoscreen 의 // 크기도조절되어야합니다. // controlbar 는여러버튼을포함하는표시객체 ( 예 : Sprite) 로서 // 스테이지의왼쪽아래모서리 (videoscreen 아래 ) 에배치되어야하며 // SWF 크기조절시 controlbar 의크기도조절되면안됩니다. import flash.display.stage; import flash.display.stagealign; import flash.display.stagescalemode; import flash.events.event; var swfstage:stage = videoscreen.stage; swfstage.scalemode = StageScaleMode.NO_SCALE; swfstage.align = StageAlign.TOP_LEFT; function resizedisplay(event:event):void var swfwidth:int = swfstage.stagewidth; var swfheight:int = swfstage.stageheight; // 비디오의윈도우크기를조절합니다. var newvideoheight:number = swfheight - controlbar.height; videoscreen.height = newvideoheight; videoscreen.scalex = videoscreen.scaley; // 컨트롤막대의위치를변경합니다. controlbar.y = newvideoheight; swfstage.addeventlistener(event.resize, resizedisplay); 전체화면모드작업 전체화면모드를사용하면테두리, 메뉴모음등을사용하지않고 SWF 로뷰어의전체모니터를채울수있습니다. Stage 클래스의 displaystate 속성은 SWF 에대한전체화면모드를설정및해제하는데사용됩니다. displaystate 속성은 flash.display.stagedisplaystate 클래스에상수로정의된값중하나로설정할수있습니다. 전체화면모드를설정하려면 displaystate 를 StageDisplayState.FULL_SCREEN 으로설정합니다. 표시객체작업 367
// mysprite 는표시목록에이미추가된 Sprite 인스턴스입니다. mysprite.stage.displaystate = StageDisplayState.FULL_SCREEN; 전체화면모드를종료하려면 displaystate 속성을 StageDisplayState.NORMAL로설정합니다. mysprite.stage.displaystate = StageDisplayState.NORMAL; 또한사용자는포커스를다른윈도우로전환하거나 Esc 키 ( 모든플랫폼 ), Ctrl+W(Windows), Command+W(Mac), Alt+F4(Windows) 등과같은여러키조합중하나를사용하여전체화면모드를해제할수있습니다. 전체화면모드에대한 Stage 크기조절비헤이비어는일반모드와동일합니다. 즉, Stage 클래스의 scalemode 속성에의해크기조절이제어됩니다. scalemode 속성을 StageScaleMode.NO_SCALE로설정하면 SWF에서차지하는화면의크기 ( 이경우전체화면 ) 에따라 Stage의 stagewidth 및 stageheight 속성이변경됩니다. Stage 클래스의 fullscreen 이벤트를사용하여전체화면모드가설정또는해제될때를감지하여응답할수있습니다. 예를들어, 다음예제처럼전체화면모드를시작하거나해제할때화면에서항목을재배치하거나, 추가또는제거할수있습니다. import flash.events.fullscreenevent; function fullscreenredraw(event:fullscreenevent):void if (event.fullscreen) // 입력텍스트필드를제거합니다. // 전체화면모드를닫는버튼을추가합니다. else // 입력텍스트필드를다시추가합니다. // 전체화면모드를닫는버튼을제거합니다. mysprite.stage.addeventlistener(fullscreenevent.full_screen, fullscreenredraw); 이코드에표시된것처럼 fullscreen 이벤트에대한 event 객체는 flash.events.fullscreenevent 클래스의인스턴스이며, 전체화면모드가활성화되는지 (true) 또는비활성화되는지 (false) 를나타내는 fullscreen 속성을포함합니다. ActionScript에서전체화면모드로작업할경우다음사항을고려합니다. 전체화면모드는 ActionScript에서마우스클릭 ( 오른쪽버튼클릭포함 ) 또는키입력을통해서만시작할수있습니다. 368 디스플레이프로그래밍
여러모니터를사용하는사용자의경우 SWF 내용을확장하면모니터하나만채워집니다. Flash Player에서는메트릭을사용하여 SWF의가장많은부분이포함된모니터를확인하고, 해당모니터에전체화면모드를적용합니다. HTML 페이지에포함된 SWF 파일의경우, 다음과같이 Flash Player를포함할 HTML 코드는이름이 allowfullscreen이고값이 true인 param 태그와 embed 특성을포함해야합니다. <object>... <param name="allowfullscreen" value="true" /> <embed... allowfullscreen="true" /> </object> 웹페이지에서 JavaScript를사용하여 SWF 포함태그를생성할경우 allowfullscreen param 태그및특성을추가하도록 JavaScript를변경해야합니다. 예를들어, HTML 페이지에서 AC_FL_RunContent() 함수 (Flex Builder와 Flash 생성 HTML 페이지모두에사용됨 ) 를사용하는경우, 다음과같이 allowfullscreen 매개변수를해당함수호출에추가해야합니다. AC_FL_RunContent(... 'allowfullscreen','true',... ); //AC code 끝 독립실행형 Flash Player에서실행중인 SWF 파일에는적용되지않습니다. 키보드이벤트및 TextFields 인스턴스의텍스트입력등과같은모든키보드관련 ActionScript는전체화면모드에서비활성화됩니다. 전체화면모드를닫는키보드단축키는예외입니다. 또한이해해야할몇가지추가보안관련제한사항이있습니다. 이러한제한사항에대해서는 719페이지의 보안샌드박스 에설명되어있습니다. 표시객체에대한이벤트처리 DisplayObject 클래스는 EventDispatcher 클래스에서상속됩니다. 즉, 모든표시객체는이벤트모델에모두사용할수있습니다 (295 페이지의제 10 장, 이벤트처리 참조 ). 모든표시객체는 EventDispatcher 클래스에서상속되는 addeventlistener() 메서드를사용하여특정이벤트를수신할수있습니다. 이때수신객체가해당이벤트에대한이벤트흐름의일부여야합니다. 표시객체작업 369
Flash Player에서이벤트객체를전달할경우해당이벤트객체는 Stage부터이벤트가발생한표시객체까지를왕복합니다. 예를들어, child1이라는표시객체를클릭하면 Flash Player는 Stage에서표시목록계층아래의 child1 표시객체까지이벤트객체를전달합니다. 다음다이어그램에표시된것처럼이벤트흐름은개념적으로 3단계로구분됩니다. Parent Node Child1 Node Child2 Node 자세한내용은 295 페이지의제 10 장, 이벤트처리 를참조하십시오. 표시객체이벤트작업을할경우주의해야할중요사항은, 표시객체를표시목록에서제거할때표시객체가메모리에서자동으로제거 ( 가비지컬렉션 ) 되는지여부에대해이벤트리스너가미치는영향입니다. 표시객체에이벤트에대한리스너로구독되는객체가있는경우해당표시객체는표시목록에서제거되더라도해당리스너객체에대한참조가여전히존재하기때문에메모리에서제거되지않습니다. 자세한내용은 312 페이지의 이벤트리스너관리 를참조하십시오. DisplayObject 하위클래스선택 선택할다양한옵션이있는표시객체로작업할경우사용할표시객체와용도를결정해야합니다. 다음과같이결정에도움이되는몇가지지침이있습니다. 클래스의인스턴스가필요한경우나만들클래스에대한기본클래스를선택하는경우에도동일한제안사항이적용됩니다. 다른표시객체의컨테이너로사용할객체가필요하지않는경우 ( 즉, 독립실행형화면요소역할을하는객체만필요한경우 ) 용도에따라 DisplayObject 또는 InteractiveObject 하위클래스중하나를선택합니다. 비트맵이미지표시를위한 Bitmap 텍스트추가를위한 TextField 비디오표시를위한 Video 화면상에내용을그리기위한 캔바스 Shape. 특히, 화면에서모양을그리기위한인스턴스를만들경우해당인스턴스가다른표시객체의컨테이너가아니라면, Sprite 또는 MovieClip 대신 Shape를사용하면성능이크게향상됩니다. 370 디스플레이프로그래밍
Flash 제작용 MorphShape, StaticText 또는 SimpleButton 항목. 이러한클래스의인스턴스를프로그램방식으로만들수는없지만, Flash 제작프로그램을사용하여만든항목을나타내도록이러한데이터유형으로변수를만들수있습니다. 변수가기본 Stage를나타내야하는경우 Stage 클래스를데이터유형으로사용합니다. 외부 SWF 파일또는이미지파일을로드하기위한컨테이너가필요한경우 Loader 인스턴스를사용합니다. 로드된내용은표시목록에 Loader 인스턴스의자식으로추가됩니다. 데이터유형은로드된내용의특성에따라다음과같이달라집니다. 로드된이미지는 Bitmap 인스턴스입니다. ActionScript 3.0에서작성된로드된 SWF 파일은 Sprite 또는 MovieClip 인스턴스이거나내용작성자에의해지정된해당클래스의하위클래스인스턴스가됩니다. ActionScript 1.0 또는 ActionScript 2.0에서작성된로드된 SWF 파일은 AVM1Movie 인스턴스가됩니다. ActionScript를사용하여표시객체에그릴지여부에관계없이다른표시객체에대한컨테이너역할을할객체가필요한경우 DisplayObjectContainer 하위클래스중하나를선택합니다. ActionScript만사용하여객체를만들거나 ActionScript만사용하여만들고조작할사용자정의표시객체에대한기본클래스로객체를만드는경우 Sprite를선택합니다. Flash 제작도구에서만든무비클립심볼을가리키는변수를만들경우 MovieClip을선택합니다. Flash 라이브러리에서무비클립심볼과연결될클래스를만들경우 DisplayObjectContainer 하위클래스중하나를클래스의기본클래스로선택합니다. 관련된무비클립심볼의여러프레임에내용이있는경우 MovieClip을선택합니다. 관련된무비클립심볼의첫번째프레임에만내용이있는경우 Sprite를선택합니다. 표시객체작업 371
표시객체조작 사용하려고선택한표시객체에관계없이모든표시객체에는화면에표시되는요소로서의공통적인다양한조작방법이있습니다. 예를들어, 모든표시객체를화면에배치한다음표시객체가쌓이는순서를앞또는뒤로이동하거나, 표시객체의크기를조절하거나회전할수있습니다. 모든표시객체는공통기본클래스 (DisplayObject) 로부터이기능을상속하기때문에 TextField 인스턴스, Video 인스턴스, Shape 인스턴스또는다른표시객체를조작하든관계없이이기능은동일하게동작합니다. 다음단원에서는이러한공통표시객체조작방법중몇가지를자세히설명합니다. 위치변경 화면에표시객체를배치하는것은표시객체에대한가장기본적인조작입니다. 표시객체의위치를설정하려면객체의 x 및 y 속성을변경합니다. myshape.x = 17; myshape.y = 212; 표시객체위치지정시스템에서는스테이지를직교좌표계 ( 가로 x축과세로 y축이있는일반격자시스템 ) 로취급합니다. 좌표계의원점 (x축과 y축이만나는 0,0 좌표 ) 은 Stage의왼쪽위모서리에있습니다. x 값은원점으로부터오른쪽이양수이고왼쪽이음수이지만, y 값은아래쪽이양수이고위쪽이음수로일반그래프시스템과반대입니다. 예를들어, 이전코드행은 myshape 객체를 x 좌표 17( 원점의오른쪽으로 17픽셀 ) 및 y 좌표 212( 원점의아래로 212픽셀 ) 로이동합니다. 기본적으로 ActionScript를사용하여표시객체를만들경우 x 속성과 y 속성이모두 0으로설정되어객체가부모내용의왼쪽위모서리에배치됩니다. 스테이지를기준으로위치변경 x 및 y 속성은항상부모표시객체축의 0,0 좌표를기준으로표시객체의위치를나타냅니다. Sprite 인스턴스에포함된 Shape 인스턴스 ( 예 : circle) 에대해 Shape 객체의 x 및 y 속성을 0 으로설정하면원이 Sprite 의왼쪽위모서리에배치됩니다. 이위치가반드시 Stage 의왼쪽위모서리가되는것는아닙니다. 전역스테이지좌표를기준으로객체를배치하려면표시객체의 globaltolocal() 메서드를사용하여좌표를전역 ( 스테이지 ) 좌표에서로컬 ( 표시객체컨테이너 ) 좌표로다음과같이변환할수있습니다. // 부모의위치에관계없이스테이지의왼쪽위모서리에 // 모양을배치합니다. // 위치가 x:200 및 y:200 인 Sprite 를만듭니다. var mysprite:sprite = new Sprite(); mysprite.x = 200; mysprite.y = 200; 372 디스플레이프로그래밍
this.addchild(mysprite); // Sprite 의 0,0 좌표에점을참조용으로그립니다. mysprite.graphics.linestyle(1, 0x000000); mysprite.graphics.beginfill(0x000000); mysprite.graphics.moveto(0, 0); mysprite.graphics.lineto(1, 0); mysprite.graphics.lineto(1, 1); mysprite.graphics.lineto(0, 1); mysprite.graphics.endfill(); // 원 Shape 인스턴스를만듭니다. var circle:shape = new Shape(); mysprite.addchild(circle); // Shape 에반경이 50 이며중심점이 x:50, y:50 에있는원을그립니다. circle.graphics.linestyle(1, 0x000000); circle.graphics.beginfill(0xff0000); circle.graphics.drawcircle(50, 50, 50); circle.graphics.endfill(); // Shape 의왼쪽위모서리가스테이지의 0, 0 좌표에위치하도록 Shape 를이동합니다. var stagepoint:point = new Point(0, 0); var targetpoint:point = mysprite.globaltolocal(stagepoint); circle.x = targetpoint.x; circle.y = targetpoint.y; 마찬가지로 DisplayObject 클래스의 localtoglobal() 메서드를사용하여로컬좌표를스테이지좌표로변환할수있습니다. 드래그앤드롭상호작용만들기 일반적으로표시객체를이동하는한가지이유는사용자가객체를클릭한상태로마우스를이동하면마우스버튼을놓을때까지는객체가따라서이동하도록드래그앤드롭상호작용을만들기위한것입니다. 드래그앤드롭상호작용은 ActionScript에서두가지방법으로만들수있습니다. 두방법모두두마우스이벤트가사용됩니다. 즉, 마우스버튼을누르면마우스커서를따라이동하도록객체에게지시하고, 마우스버튼을놓으면마우스커서를따라이동하는것을중지하도록객체에게지시합니다. startdrag() 메서드를사용하는첫번째방법은더간단하지만보다제한적입니다. 마우스버튼을누르면드래그할표시객체의 startdrag() 메서드가호출됩니다. 마우스버튼을놓으면 stopdrag() 메서드가호출됩니다. // 이코드는 startdrag() 기술을사용하여드래그앤드롭상호작용을만듭니다. // 사각형은 DisplayObject( 예 : MovieClip 또는 Sprite 인스턴스 ) 입니다. import flash.events.mouseevent; // 마우스버튼을누르면이함수가호출됩니다. 표시객체조작 373
function startdragging(event:mouseevent):void square.startdrag(); // 마우스버튼을놓으면이함수가호출됩니다. function stopdragging(event:mouseevent):void square.stopdrag(); square.addeventlistener(mouseevent.mouse_down, startdragging); square.addeventlistener(mouseevent.mouse_up, stopdragging); 이기술은 startdrag() 를사용하여한번에하나의항목만드래그할수있다는한가지중요한제한이있습니다. 표시객체를드래그하는중에 startdrag() 메서드가다른표시객체에서호출되면, 마우스를따라이동하던첫번째표시객체의이동이즉시중지됩니다. 예를들어, startdragging() 함수가아래에표시된것처럼변경되면 square.startdrag() 메서드를호출하더라도 circle 객체만드래그됩니다. function startdragging(event:mouseevent):void square.startdrag(); circle.startdrag(); startdrag() 를사용하여객체를한번에하나씩만드래그할수있기때문에, 임의의표시객체에대해 stopdrag() 메서드를호출하여현재드래그중인객체의이동을중지시킬수있습니다. 여러표시객체를드래그해야하거나여러객체가 startdrag() 를사용하여발생할수있는충돌을방지하려면 mouse-following 기술을사용하여드래그효과를만드는것이좋습니다. 이기술을사용할경우마우스버튼을누르면함수가 Stage의 mousemove 이벤트에대한리스너로구독됩니다. 그러면마우스를이동할때마다이함수가호출되어드래그되는객체가마우스의 x, y 좌표로바로이동됩니다. 마우스버튼을놓으면함수가구독해제되어, 마우스를이동해도함수가더이상호출되지않으므로객체가마우스커서를따라이동하지않습니다. 다음은이기술을설명하는일부코드입니다. // 이코드는 mouse-following 기술을사용하여드래그앤드롭상호작용을만듭니다. // 원은 DisplayObject( 예 : MovieClip 또는 Sprite 인스턴스 ) 입니다. import flash.events.mouseevent; var offsetx:number; var offsety:number; // 마우스버튼을누르면이함수가호출됩니다. function startdragging(event:mouseevent):void 374 디스플레이프로그래밍
// 마우스버튼을눌렀을때커서위치와마우스 // 버튼을놓았을때원의 x, y 좌표간의차이 ( 오프셋 ) 를 // 기록합니다. offsetx = event.stagex - circle.x; offsety = event.stagey - circle.y; // mousemove 이벤트수신을시작하도록 Flash Player 에지시합니다. stage.addeventlistener(mouseevent.mouse_move, dragcircle); // 마우스버튼을놓으면이함수가호출됩니다. function stopdragging(event:mouseevent):void // mousemove 이벤트수신을중지하도록 Flash Player 에지시합니다. stage.removeeventlistener(mouseevent.mouse_move, dragcircle); // 마우스버튼을누른상태에서마우스를움직일때마다이함수가호출됩니다. function dragcircle(event:mouseevent):void // 커서위치와드래그된객체위치간의오프셋을유지하면서커서위치로 // 원을이동합니다. circle.x = event.stagex - offsetx; circle.y = event.stagey - offsety; // 이이벤트후화면을새로고치도록 Flash Player 에지시합니다. event.updateafterevent(); circle.addeventlistener(mouseevent.mouse_down, startdragging); circle.addeventlistener(mouseevent.mouse_up, stopdragging); 표시객체를마우스커서를따라이동하게하는것외에도, 드래그앤드롭상호작용은드래그된객체를표시의전면으로이동시켜모든다른객체위에떠있는것처럼보이게할수있습니다. 예를들어, 드래그앤드롭상호작용을하는원과사각형의두객체가있다고가정합니다. 원이표시목록에서사각형의아래에있을때원을클릭한상태에서드래그하여커서를사각형위에놓으면, 원이사각형뒤로서서히이동하는것처럼표시되어드래그앤드롭효과가제거됩니다. 대신원을클릭하면원이표시목록의맨위로이동하여항상다른내용의위에표시되게할수있습니다. 이전예제에서사용된다음코드는두표시객체인원과사각형에대한드래그앤드롭상호작용을만듭니다. 어느한객체를마우스버튼으로누르면해당항목이 Stage 표시목록의위로이동하여드래그된항목이항상위에표시됩니다. 새코드나이전샘플에서변경된코드는굵은글꼴로표시됩니다. // 이코드는 mouse-following 기술을사용하여드래그앤드롭상호작용을만듭니다. // 원과사각형은 DisplayObjects( 예 : MovieClip 또는 Sprite 인스턴스 ) 입니다. import flash.display.displayobject; 표시객체조작 375
import flash.events.mouseevent; var offsetx:number; var offsety:number; var draggedobject:displayobject; // 마우스버튼을누르면이함수가호출됩니다. function startdragging(event:mouseevent):void // 드래그하고있는객체를기억합니다. draggedobject = DisplayObject(event.target); // 마우스버튼을눌렀을때커서위치와마우스버튼을놓았을때드래그된객체의 // x, y 좌표간의차이 ( 오프셋 ) 를기록합니다. offsetx = event.stagex - draggedobject.x; offsety = event.stagey - draggedobject.y; // 선택한객체를표시목록의맨위로이동합니다. stage.addchild(draggedobject); // TmouseMove 이벤트수신을시작하도록 Flash Player 에지시합니다. stage.addeventlistener(mouseevent.mouse_move, dragobject); // 마우스버튼을놓으면이함수가호출됩니다. function stopdragging(event:mouseevent):void // mousemove 이벤트수신을중지하도록 Flash Player 에지시합니다. stage.removeeventlistener(mouseevent.mouse_move, dragobject); // 마우스버튼을누른상태에서마우스를움직일때마다이함수가호출됩니다. function dragobject(event:mouseevent):void // 커서위치와드래그된객체위치간의오프셋을유지하면서커서위치로 // 드래그된객체를이동합니다. draggedobject.x = event.stagex - offsetx; draggedobject.y = event.stagey - offsety; // 이이벤트후화면을새로고치도록 Flash Player 에지시합니다. event.updateafterevent(); circle.addeventlistener(mouseevent.mouse_down, startdragging); circle.addeventlistener(mouseevent.mouse_up, stopdragging); square.addeventlistener(mouseevent.mouse_down, startdragging); square.addeventlistener(mouseevent.mouse_up, stopdragging); 376 디스플레이프로그래밍
토큰이나카드가더미간에이동하는게임에서처럼이효과를더확장하려면, 객체를 선택 하여드래그된객체를스테이지의표시목록에추가한다음, 마우스버튼을놓아해당객체를다른표시목록 ( 예 : 드롭되는 더미 ) 에추가할수있습니다. 마지막으로효과를향상시키기위해클릭할때 ( 드래그를시작할때 ) 표시객체에그림자필터를적용하고객체를놓을때그림자를제거할수있습니다. ActionScript 에서그림자필터및기타표시객체필터를사용하는방법에대한자세한내용은 437 페이지의제 15 장, 표시객체필터링 을참조하십시오. 표시객체패닝및스크롤 표시객체가표시하려는영역에비해너무큰경우 scrollrect 속성을사용하여표시객체의표시가능한영역을정의할수있습니다. 또한사용자입력에따라 scrollrect 속성을변경하여내용을왼쪽 / 오른쪽으로패닝하거나위 / 아래로스크롤할수있습니다. scrollrect 속성은사각형영역을단일객체로정의하는데필요한값을결합하는클래스인 Rectangle 클래스의인스턴스입니다. 표시객체의표시가능한영역을처음으로정의하려면새 Rectangle 인스턴스를만들어표시객체의 scrollrect 속성에할당합니다. 나중에스크롤또는패닝하려면 scrollrect 속성을개별 Rectangle 변수로읽고원하는속성을변경합니다. 예를들어, Rectangle 인스턴스의 x 속성을변경하여패닝하거나 y 속성을변경하여스크롤합니다. 그런다음 Rectangle 인스턴스를 scrollrect 속성에다시할당하여표시객체에변경된값을알립니다. 예를들어, 다음코드에서는너무커서 SWF 파일의경계안에들어가지않는 bigtext라는 TextField 객체에대한표시가능한영역을정의합니다. 두버튼 up 및 down을클릭하면 scrollrect Rectangle 인스턴스의 y 속성을수정하여 TextField 객체의내용을위또는아래로스크롤하는함수가호출됩니다. import flash.events.mouseevent; import flash.geom.rectangle; // TextField 인스턴스의표시가능한영역을처음으로정의합니다. // 왼쪽 : 0, 위쪽 : 0, 폭 : TextField, 높이 : 350 픽셀 bigtext.scrollrect = new Rectangle(0, 0, bigtext.width, 350); // TextField 를비트맵으로캐시하여성능을향상시킵니다. bigtext.cacheasbitmap = true; // 버튼을클릭할때호출됩니다. function scrollup(event:mouseevent):void // 현재스크롤사각형에액세스합니다. var rect:rectangle = bigtext.scrollrect; // 사각형을 20 픽셀아래로이동하면서사각형의 y 값을 20 만큼줄입니다. rect.y -= 20; // TextField 에사각형을다시지정하여변경내용을적용합니다. 표시객체조작 377
bigtext.scrollrect = rect; // "down" 버튼을클릭할때호출됩니다. function scrolldown(event:mouseevent):void // 현재스크롤사각형에액세스합니다. var rect:rectangle = bigtext.scrollrect; // 사각형을 20 픽셀위로이동하면서사각형의 y 값을 20 만큼늘립니다. rect.y += 20; // TextField 에사각형을다시지정하여변경내용을적용 ìî 합니다. bigtext.scrollrect = rect; up.addeventlistener(mouseevent.click, scrollup); down.addeventlistener(mouseevent.click, scrolldown); 이예제에서보듯이표시객체의 scrollrect 속성으로작업할경우 cacheasbitmap 속성을사용하여 Flash Player 가표시객체의내용을비트맵으로캐시하도록지정하는것이좋습니다. 그렇게하면표시객체의내용을스크롤할때마다 Flash Player 에서표시객체의전체내용을다시그릴필요가없을뿐만아니라, 캐시된비트맵을사용하여필요한부분을화면에직접렌더링할수있습니다. 자세한내용은 381 페이지의 표시객체캐싱 을참조하십시오. 객체크기조작및크기조절 크기속성 (width 및 height) 또는크기조절속성 (scalex 및 scaley) 을사용하여표시객체의크기를두가지방식으로측정하고조작할수있습니다. 모든표시객체에는 width 속성과 height 속성이있습니다. 이러한속성은처음에는객체의크기 ( 픽셀 ) 로설정됩니다. 이러한속성의값을읽어서표시객체의크기를측정할수있습니다. 다음과같이새값을지정하여객체의크기를변경할수도있습니다. // 표시객체의크기를조절합니다. square.width = 420; square.height = 420; // 원표시객체의반경을결정합니다. var radius:number = circle.width / 2; 표시객체의 height 또는 width 를변경하면객체의크기가조절됩니다. 즉, 객체의내용이새영역에맞게확대되거나축소됩니다. 표시객체에벡터모양만포함되어있는경우품질손상없이해당모양이새크기로다시그려집니다. 표시객체에있는비트맵그래픽요소는다시그려지지않고크기가조절됩니다. 예를들어, 폭과높이가이미지의실제픽셀정보크기보다크게확대되는디지털사진은픽셀화되어들쭉날쭉하게보입니다. 378 디스플레이프로그래밍
표시객체의 width 또는 height 속성을변경하면 Flash Player 에서객체의 scalex 및 scaley 속성도함께업데이트합니다. 이러한속성은원본크기와비교한표시객체의상대적인크기를나타냅니다. scalex 및 scaley 속성은분수 ( 소수 ) 값을사용하여백분율을나타냅니다. 예를들어, 표시객체의 width 속성이원본폭의 1/2 크기로변경된경우객체의 scalex 속성값은.5(50%) 가됩니다. 높이가두배로커지면 scaley 속성값이 2(200%) 가됩니다. // 원은폭과높이가각각 150 픽셀인표시객체입니다. // 원래크기에서 scalex 와 scaley 는 1(100%) 입니다. trace(circle.scalex);// 출력 : 1 trace(circle.scaley); // 출력 : 1 // width 및 height 속성을변경하면그에따라 scalex 및 scaley 속성도변경됩니다. circle.width = 100; circle.height = 75; trace(circle.scalex); // 출력 : 0.6622516556291391 trace(circle.scaley); // 출력 : 0.4966887417218543 크기는비례적으로변경되지않습니다. 즉, 정사각형의 height 속성만변경하고 width 속성은변경하지않을경우가로와세로의비율이달라져서정사각형이아니라직사각형이됩니다. 표시객체의크기를상대적으로변경하려면 width 또는 height 속성대신 scalex 및 scaley 속성값을설정하여객체의크기를조절할수있습니다. 예를들어, 다음코드는 square 라는표시객체의 width 속성을변경한다음세로비율 (scaley) 을가로비율과일치하도록변경하여정사각형의가로세로비율을유지합니다. // 폭을직접변경합니다. square.width = 150; // 가로비율에맞게세로비율을변경하여가로세로비율을유지합니다. square.scaley = square.scalex; 크기조절시왜곡제어 일반적으로표시객체의크기를조절하면 ( 예 : 가로로확대 ) 각부분이동일한양만큼확장되어객체전체에서균일하게왜곡이발생합니다. 그래픽및디자인요소의경우이런결과를원할수도있습니다. 그러나, 표시객체의확장되는부분과변경되지않는부분을제어해야할경우도있습니다. 그러한일반적인예로모서리가둥근사각형버튼이있습니다. 일반크기조절에서는버튼의모서리가확장되어버튼크기를변경하면모서리반경도변경됩니다. 표시객체조작 379
그러나, 이경우에는왜곡현상없이크기가조절되도록크기조절을제어해야합니다. 즉, 크기를조절할영역 ( 직선변및중간 ) 과크기를조절하지않을영역 ( 모서리 ) 을지정합니다. 9 슬라이스크기조절 (Scale-9) 을사용하여객체크기조절방법을제어할표시객체를만들수있습니다. 9 슬라이스크기조절을사용하면표시객체가 9 개의개별사각형 (3 x 3 격자, tic-tac-toe 보드의격자와비슷 ) 으로나뉘어집니다. 각사각형의크기가반드시동일할필요는없습니다. 사용자가격자선의위치를지정합니다. 버튼의둥근모서리처럼네모서리의사각형에놓이는내용은표시객체의크기를조절해도확장되거나축소되지않습니다. 위쪽가운데사각형과아래쪽가운데사각형은가로로크기가조절되고세로는변경되지않는반면에, 왼쪽중앙및오른쪽중앙사각형은세로로크기가조절되고가로는변경되지않습니다. 가운데사각형은가로와세로방향모두크기가조절됩니다. 표시객체를만들때특정내용의크기가조절되지않게하려면해당내용이모서리사각형중하나에서끝나도록 9 슬라이스크기조절격자의구분선을배치해야합니다. ActionScript에서표시객체의 scale9grid 속성값을설정하여객체에대한 9 슬라이스크기조절을지정하고객체의 Scale-9 격자로사각형크기를정의합니다. 다음과같이 Rectangle 클래스의인스턴스를 scale9grid 속성값으로사용할수있습니다. mybutton.scale9grid = new Rectangle(32, 27, 71, 64); Rectangle 생성자의네매개변수는 x 좌표, y 좌표, 폭및높이입니다. 이예제에서사각형의왼쪽위모서리는 mybutton 표시객체에서 x: 32, y: 27 지점에위치합니다. 사각형은폭이 71 픽셀이고높이가 65 픽셀입니다. 따라서사각형의오른쪽가장자리는표시객체의 x 좌표 103 위치에있고아래쪽가장자리는표시객체의 y 좌표 92 위치에있습니다. 380 디스플레이프로그래밍
Rectangle 인스턴스에의해정의된영역에포함된실제영역은 Scale-9 격자의가운데사각형을나타냅니다. 다음그림에표시된것처럼 Flash Player 에서 Rectangle 인스턴스의변을확장하여다른사각형을계산합니다. 이경우버튼크기를확대하거나축소하면둥근모서리는확장되거나축소되지않지만, 다른영역은해당크기조절에따라조절됩니다. mybutton.width = 131; mybutton.height = 106; mybutton.width = 73; mybutton.height = 69; mybutton.width = 54; mybutton.height = 141; 표시객체캐싱 응용프로그램을작성하든스크립팅된복잡한애니메이션을작성하든 Flash에서작업하는디자인은규모가커질수있으므로, 성능및최적화를고려해야합니다. 사각형 Shape 인스턴스와같이정적으로유지되는내용은자동으로최적화되지않습니다. 따라서, 사각형의위치를변경할경우 Flash는전체 Shape 인스턴스를다시그립니다. 지정된표시객체를캐시하여 SWF 파일의성능을향상시킬수있습니다. 표시객체는기본적으로인스턴스벡터데이터의비트맵버전인표면이며, 이것은 SWF 파일을만드는과정에서자주변경하지않는데이터입니다. 그러므로캐싱이활성화된인스턴스는 SWF 파일이재생될때계속적으로다시그려지지않습니다. 따라서 SWF 파일은빠르게렌더링됩니다. 중요 벡터데이터는표면이다시만들어질때업데이트할수있습니다. 그러므로표면에캐싱된벡터데이터는전체 SWF 파일에서동일하게유지될필요가없습니다. 표시객체조작 381
표시객체의 cacheasbitmap 속성을 true로설정하면표시객체가자체비트맵표현을캐시합니다. Flash는인스턴스에대해표면객체를만들며이객체는벡터데이터대신에비트맵으로캐시된것입니다. 표시객체의경계를변경하면표면은크기가조절되지않고다시만들어집니다. 표면은서로다른표면안에중첩이가능합니다. 이경우, 자식표면은부모표면으로비트맵을복제하게됩니다. 자세한내용은 384페이지의 비트맵캐싱활성화 를참조하십시오. DisplayObject 클래스의 opaquebackground 및 scrollrect 속성은 cacheasbitmap 속성을사용하여비트맵캐싱과연관됩니다. 위세가지속성은서로독립적이지만, opaquebackground 및 scrollrect 속성은객체가비트맵으로캐시되는경우가장잘작동합니다. 즉, opaquebackground 및 scrollrect 속성은 cacheasbitmap이 true로설정된경우에만성능상의이점을제공합니다. 표시객체내용스크롤에대한자세한내용은 377페이지의 표시객체패닝및스크롤 을참조하십시오. 불투명배경설정에대한자세한내용은 384페이지의 불투명한배경색설정 을참조하십시오. 알파채널마스킹을사용하려면 cacheasbitmap 속성을 true로설정해야하며, 자세한내용은 390페이지의 알파채널마스킹 을참조하십시오. 캐싱기능이필요한경우 표시객체에캐싱을활성화하면표면이만들어지며, 복잡한벡터애니메이션을빠르게렌더링할수있는등여러이점이있습니다. 캐싱을활성화해야할여러경우가있습니다. SWF 파일의성능을향상하려면항상캐싱을활성화하는것이좋을것처럼보이지만, 캐싱을활성화해도성능이향상되지않거나오히려저하되는경우도있습니다. 이단원에서는캐싱을사용해야할경우와일반표시객체를사용해야할경우에대해설명합니다. 캐시된데이터의전체적인성능은인스턴스벡터데이터의복잡도, 변경하려는데이터의양, opaquebackground 속성의설정여부등에달려있습니다. 작은영역을변경할경우표면과벡터데이터중어느것을사용해도결과는비슷합니다. 응용프로그램을배포하기전에두가지경우를모두테스트하는것도좋습니다. 비트맵캐싱기능이필요한경우다음과같은경우에는일반적으로비트맵캐싱을사용할경우큰이점을얻을수있습니다. 복잡한배경이미지 : 섬세하고복잡한벡터데이터배경이미지가포함된응용프로그램을사용할경우로, 비트맵추적명령을적용한이미지또는 Adobe Illustrator 에서작성한아트웍작업등입니다. 배경위에문자애니메이션효과를적용하는경우, 배경에서벡터데이터를지속적으로다시생성해야하므로애니메이션의속도가느려집니다. 이때성능을향상시키려면배경표시객체의 opaquebackground 속성을 true로설정합니다. 배경이비트맵으로렌더링되고빠르게다시그려지므로애니메이션은훨씬더빠르게재생됩니다. 382 디스플레이프로그래밍
스크롤텍스트필드 : 스크롤텍스트필드에대량의텍스트를표시하는응용프로그램을사용할경우입니다. 스크롤경계선으로스크롤이가능하도록설정 ( 즉, scrollrect 속성을설정함 ) 한표시객체안에텍스트필드를배치할수있습니다. 이렇게하면지정된인스턴스에대해빠른픽셀스크롤을수행할수있습니다. 사용자가표시객체인스턴스를스크롤하면스크롤된픽셀은위쪽으로이동하며전체텍스트필드가다시생성되는대신새롭게표시되는영역만생성됩니다. 윈도우시스템 : 윈도우가겹쳐지는복잡한구조가포함된응용프로그램을사용할경우입니다. 각윈도우는, 예를들면웹브라우저윈도우처럼열려져있거나닫혀져있을수도있습니다. cacheasbitmap 속성을 true로설정하여각윈도우를표면으로표시하면각윈도우는서로분리되고캐시됩니다. 사용자는윈도우를드래그하여서로겹쳐지게할수있으며, 각윈도우에서는벡터내용을다시생성할필요가없습니다. 알파채널마스킹 : 알파채널마스킹을사용할경우 chacheasbitmap 속성을 true로설정해야합니다. 자세한내용은 390페이지의 알파채널마스킹 을참조하십시오. 이와같은모든경우에비트맵캐싱을활성화하면벡터그래픽이최적화되므로응용프로그램의응답성및상호작용성이향상됩니다. 또한표시객체에필터를적용할때마다 Flash Player 에서 cacheasbitmap 이자동으로 true 로설정됩니다. 이속성을 false 로명시적으로설정한경우에도마찬가지입니다. 표시객체에서모든필터를지우면 cacheasbitmap 속성이마지막설정된값으로돌아갑니다. 비트맵캐싱의사용을피해야할경우이기능을잘못사용하면 SWF 파일에부정적인영향을미칩니다. 비트맵캐싱을사용할경우다음지침을따라야합니다. 표면 ( 캐싱이활성화된표시객체 ) 을과도하게사용하지않습니다. 각표면은일반표시객체보다메모리를더사용하므로렌더링성능을향상시킬경우에만표면을활성화해야합니다. 캐시된비트맵은일반표시객체보다훨씬더많은메모리를사용할수도있습니다. 예를들어, Stage 위의크기가 250 x 250픽셀인 Sprite 인스턴스가캐시될경우 250KB가사용되는반면에, 캐시되지않은일반 Sprite 인스턴스는 1KB를사용합니다. 캐시된표면에확대 / 축소를적용하지않습니다. 비트맵캐싱을남용하면특히내용을확대할경우상당한양의메모리가소비됩니다 ( 앞의항목참조 ). 표면은대부분정적인, 즉움직임이거의없는표시객체인스턴스에대해사용합니다. 이경우에인스턴스를드래그하거나이동할수있지만인스턴스의내용은움직이거나크게변경되어서는안됩니다. 애니메이션또는변경되는내용은애니메이션또는 Video 인스턴스가포함된 MovieClip 인스턴스와비슷합니다. 예를들어, 인스턴스를회전하거나변형하면해당인스턴스는표면및벡터데이터간에서변경되는데, 이는처리하기어려운작업이며 SWF 파일에부정적인영향을미치기도합니다. 표시객체조작 383
표면을벡터데이터와혼합하면 Flash Player 또는컴퓨터에서수행해야하는처리작업이증가됩니다. 가능하면윈도우응용프로그램을작성할경우처럼표면을서로그룹화하는것이좋습니다. 비트맵캐싱활성화 표시객체에대한비트맵캐싱을활성화하려면 cacheasbitmap 속성을 true로설정합니다. mysprite.cacheasbitmap = true; cacheasbitmap 속성을 true로설정하면표시객체가전체좌표를기준으로자동으로픽셀에물리는것을볼수있습니다. SWF 파일을테스트하면복잡한벡터이미지에서수행되는애니메이션이더욱빠르게렌더링되는것이보입니다. 다음중한가지이상의경우에해당되면 cacheasbitmap이 true로설정되었더라도표면 ( 캐시된비트맵 ) 이만들어지지않습니다. 비트맵의높이나폭이 2880픽셀을초과하는경우 메모리부족으로비트맵할당에실패한경우 불투명한배경색설정 표시객체에불투명한배경을설정할수있습니다. 예를들어, SWF에복잡한벡터아트가포함된배경이있을경우 opaquebackground 속성을지정된색상 ( 대개 Stage와같은색상 ) 으로설정하면됩니다. 색상은숫자 ( 일반적으로 16진수색상값 ) 로지정됩니다. 그러면배경은비트맵으로처리되어성능을최적화하는데도움이됩니다. cacheasbitmap을 true로설정하고또한 opaquebackground 속성을지정된색상으로설정하면, opaquebackground 속성으로인해내부비트맵이불투명해지고더빠르게렌더링됩니다. cacheasbitmap을 true로설정하지않으면 opaquebackground 속성은표시객체의배경에불투명한벡터사각형모양을추가하게됩니다. 그러면비트맵이자동으로만들어지지않습니다. 다음예제에서는성능을최적화하기위해표시객체의배경을설정하는방법을보여줍니다. myshape.cacheasbitmap = true; myshape.opaquebackground = 0xFF0000; 384 디스플레이프로그래밍
이경우 myshape 라는 Shape 의배경색은빨강 (0xFF0000) 으로설정됩니다. Shape 인스턴스에녹색삼각형드로잉이포함되어있다고가정할때, 배경이흰색인 Stage 에서는 Shape 인스턴스의경계상자 ( 모양을완전히감싸고있는사각형 ) 내의공백이빨간색인녹색삼각형으로표시됩니다. 이코드는단색빨강배경을가진 Stage 에서사용될경우에더적합합니다. 다른색상의배경에서는해당색상이대신지정됩니다. 예를들어, 배경이흰색인 SWF 의경우 opaquebackground 속성은일반적으로 0xFFFFFF( 순백색 ) 로설정됩니다. 블렌딩모드적용 블렌딩모드에서는하나의이미지 ( 기본이미지 ) 의색상을또다른이미지 ( 블렌드이미지 ) 의색상과결합하여제3의이미지, 즉화면에실제로표시되는결과이미지를만들어냅니다. 기본이미지의개별픽셀값을이에대응되는블렌드이미지의픽셀값과함께처리하여같은위치에새로운픽셀값을산출합니다. 모든표시객체에는다음블렌딩모드중하나로설정될수있는 blendmode 속성이있습니다. 이러한값은 BlendMode 클래스에정의된상수입니다. 또한상수의실제값인문자열값을괄호로묶어사용할수도있습니다. BlendMode.ADD("add"): 두이미지사이에서색상을밝게하는디졸브애니메이션효과를만드는데주로사용됩니다. BlendMode.ALPHA("alpha"): 배경위에전경의투명도를적용하는데주로사용됩니다. BlendMode.DARKEN("darken"): superimpose 유형에주로사용됩니다. BlendMode.DIFFERENCE ("difference"): 보다강렬한색상을만드는데주로사용됩니다. BlendMode.ERASE("erase"): 전경의알파를사용하여배경의일부를잘라내는 ( 지우는 ) 데주로사용됩니다. BlendMode.HARDLIGHT("hardlight"): 음영효과를만드는데주로사용됩니다. BlendMode.INVERT("invert"): 배경을반전시키는데사용됩니다. BlendMode.LAYER("layer"): 특정표시객체의사전합성 (precomposition) 을위한임시버퍼를만드는데사용됩니다. BlendMode.LIGHTEN("lighten"): superimpose 유형에주로사용됩니다. BlendMode.MULTIPLY("multiply"): 그림자및심도효과를만드는데주로사용됩니다. BlendMode.NORMAL("normal"): 혼합이미지의픽셀값이기본이미지의픽셀값을무시하도록지정하는데사용됩니다. 표시객체조작 385
BlendMode.OVERLAY("overlay"): 음영효과를만드는데주로사용됩니다. BlendMode.SCREEN("screen"): 강조및렌즈플레어를만드는데주로사용됩니다. BlendMode.SUBTRACT("subtract"): 두이미지사이에서색상을어둡게하는디졸브애니메이션효과를만드는데주로사용됩니다. DisplayObject 색상조절 ColorTransform 클래스의메서드 (flash.geom.colortransform) 를사용하여표시객체의색상을조절할수있습니다. 각표시객체에는 Transform 클래스의인스턴스이고표시객체에적용되는다양한변환 ( 예 : 회전, 크기또는위치변경등 ) 에대한정보가들어있는 transform 속성이있습니다. 기하학적변형외에도 Transform 클래스에는 ColorTransform 클래스의인스턴스이고표시객체에대한색상조절을위한액세스를제공하는 colortransform 속성이포함되어있습니다. 표시객체의색상변형정보에액세스하려면다음과같은코드를사용할수있습니다. var colorinfo:colortransform = mydisplayobject.transform.colortransform; ColorTransform 인스턴스를만든경우속성값을보고이미적용된색상변형을확인하거나, 해당값을설정하여표시객체의색상을변경할수있습니다. 변경후에표시객체를업데이트하려면 ColorTransform 인스턴스를 transform.colortransform 속성에다시할당해야합니다. var colorinfo:colortransform = my DisplayObject.transform.colorTransform; // 여기에서몇가지색상변형을만듭니다. // 변경내용을적용합니다. mydisplayobject.transform.colortransform = colorinfo; 코드를사용하여색상값설정 ColorTransform 클래스의 color 속성을사용하여표시객체에특정 RGB(Red, Green, Blue) 색상값을할당할수있습니다. 다음예제에서는 color 속성을사용하여사용자가 bluebtn 버튼을클릭할때 square 표시객체의색상을파랑으로변경합니다. // 사각형은스테이지에있는표시객체입니다. // bluebtn, redbtn, greenbtn 및 blackbtn 은스테이지에있는버튼입니다. import flash.events.mouseevent; import flash.geom.colortransform; // 사각형과연결된 ColorTransform 인스턴스에액세스합니다. var colorinfo:colortransform = square.transform.colortransform; 386 디스플레이프로그래밍
// bluebtn 을클릭하면이함수가호출됩니다. function makeblue(event:mouseevent):void // ColorTransform 객체의색상을설정합니다. colorinfo.color = 0x003399; // 표시객체에변경내용을적용합니다. square.transform.colortransform = colorinfo; bluebtn.addeventlistener(mouseevent.click, makeblue); color 속성을사용하여표시객체의색상을변경하면객체에사용된색상수에관계없이전체객체의색상이완전히변경됩니다. 예를들어, 위에검정텍스트가있는녹색원이들어있는표시객체가있는경우해당객체와연관된 ColorTransform 인스턴스의 color 속성을빨강음영으로설정하면전체객체와원및텍스트가빨강으로변경됩니다. 따라서텍스트가객체의나머지부분과더이상구분되지않습니다. 코드를사용하여색상및밝기효과변경 디지털사진처럼여러색상으로된표시객체가있을때객체의색상을완전히변경하지않고기존색상을기반으로표시객체의색상을조절한다고가정합니다. 이경우 ColorTransform 클래스는이러한유형의조정에사용할수있는일련의승수및오프셋속성을포함합니다. redmultiplier, greenmultiplier, bluemultiplier 및 alphamultiplier 승수속성은컬러사진필터또는컬러썬글라스처럼작동하여표시객체에서특정색상을증가또는감소시킵니다. 오프셋속성 (redoffset, greenoffset, blueoffset, alphaoffset) 을사용하여객체에특정색상을추가하거나, 특정색상이가질수있는최소값을지정할수있습니다. 이러한승수및오프셋속성은속성관리자의 [ 색상 ] 팝업메뉴에서 [ 고급 ] 을선택할때 Flash 제작도구에서무비클립심볼에사용할수있는고급색상설정과동일합니다. 다음코드에서는 JPEG 이미지를로드하고색상변환을적용합니다. 이변환에서는마우스포인터가 x축및 y축을따라이동하면서빨강및녹색채널을조정합니다. 이경우오프셋값이지정되어있지않기때문에화면에표시된각색상채널의색상값은이미지의원본색상값의백분율입니다. 즉, 특정픽셀에표시되는가장진한빨강또는녹색이해당픽셀의원본빨강또는녹색의양입니다. import flash.display.loader; import flash.events.mouseevent; import flash.geom.transform; import flash.geom.colortransform; import flash.net.urlrequest; // 이미지를스테이지로로드합니다. var loader:loader = new Loader(); var url:urlrequest = new URLRequest("http://www.helpexamples.com/flash/ images/image1.jpg"); loader.load(url); 표시객체조작 387
this.addchild(loader); // 로드된이미지위로마우스를이동하면이함수가호출됩니다. function adjustcolor(event:mouseevent):void // 이미지를포함하는 Loader 에대한 ColorTransform 객체에액세스합니다. var colortransformer:colortransform = loader.transform.colortransform; // 마우스위치에따라빨강및녹색승수를설정합니다. // 빨강값범위는 0% 에서 100% 입니다. 커서가왼쪽에있을때 0% 로빨강이없으며, // 커서가오른쪽에있을때 100% 빨강으로일반적인이미지모양입니다. // 녹색채널의경우도마찬가지입니다. 단, 녹색채널은 y 축의마우스위치로 // 제어된다는점이다릅니다. colortransformer.redmultiplier = (loader.mousex / loader.width) * 1; colortransformer.greenmultiplier = (loader.mousey / loader.height) * 1; // 표시객체에변경내용을적용합니다. loader.transform.colortransform = colortransformer; loader.addeventlistener(mouseevent.mouse_move, adjustcolor); 객체회전 rotation 속성을사용하여표시객체를회전할수있습니다. 이값을보고객체가회전되었는지여부를확인할수있습니다. 객체를회전하려면이속성을숫자로설정합니다. 이숫자는객체에적용할회전각도를나타냅니다. 예를들어, 다음코드행은 square 객체를 45도 ( 전체회전의 1/8) 회전합니다. square.rotation = 45; 405 페이지의제 13 장, 기하도형을사용한작업 에설명된변형행렬을사용하여표시객체를회전할수도있습니다. 객체에페이드인 / 아웃효과적용 표시객체의투명도를제어하여객체를부분적으로또는완전히투명하게만들수있습니다. 또는투명도를변경하여객체에페이드인 / 아웃효과를나타낼수있습니다. DisplayObject 클래스의 alpha 속성은표시객체의투명도 ( 정확히불투명도 ) 를정의합니다. alpha 속성은 0과 1 사이의값으로설정할수있습니다. 여기서 0은완전투명을, 1은완전불투명을나타냅니다. 예를들어, 다음코드행은마우스를클릭하면 myball 객체를부분적 (50%) 으로투명하게만듭니다. function fadeball(event:mouseevent):void myball.alpha =.5; 388 디스플레이프로그래밍
myball.addeventlistener(mouseevent.click, fadeball); ColorTransform 클래스를통해사용할수있는색상조절기능을사용하여표시객체의투명도를변경할수도있습니다. 자세한내용은 386 페이지의 DisplayObject 색상조절 을참조하십시오. 표시객체마스크적용 표시객체를마스크로사용하여다른표시객체의내용을볼수있는구멍을만들수있습니다. 마스크정의 표시객체를다른표시객체의마스크로지정하려면마스크객체를마스크를적용할표시객체의 mask 속성으로설정합니다. // 객체 masksprite 를객체 mysprite 의마스크로만듭니다. mysprite.mask = masksprite; 마스크가적용된표시객체는마스크로작용하는표시객체의모든불투명영역아래에나타납니다. 예를들어, 다음코드는 100 x 100 픽셀의빨강사각형을포함하는 Shape 인스턴스와반경이 25 픽셀인파랑원을포함하는 Sprite 인스턴스를만듭니다. 원을클릭하면해당원이사각형에대한마스크로설정되므로, 사각형에서원으로가려진부분만이표시됩니다. 즉, 빨강원만보이게됩니다. // 이코드는 MovieClip 또는 Sprite 인스턴스등의표시객체컨테이너내에서 // 실행되는것으로간주합니다. import flash.display.shape; // 사각형을그려서표시목록에추가합니다. var square:shape = new Shape(); square.graphics.linestyle(1, 0x000000); square.graphics.beginfill(0xff0000); square.graphics.drawrect(0, 0, 100, 100); square.graphics.endfill(); this.addchild(square); // 원을그려서표시목록에추가합니다. var circle:sprite = new Sprite(); circle.graphics.linestyle(1, 0x000000); circle.graphics.beginfill(0x0000ff); circle.graphics.drawcircle(25, 25, 25); circle.graphics.endfill(); this.addchild(circle); function masksquare(event:mouseevent):void 표시객체조작 389
square.mask = circle; circle.removeeventlistener(mouseevent.click, masksquare); circle.addeventlistener(mouseevent.click, masksquare); 마스크역할을하는표시객체는드래그할수있고, 애니메이션처리하거나동적으로크기를조절할수있으며, 단일마스크내에서개별모양을사용할수있습니다. 마스크표시객체를표시목록에추가할필요는없습니다. 그러나, Stage 크기를조절할때마스크객체의크기를조절하거나, 마스크와의사용자상호작용 ( 예 : 사용자제어드래그및크기조절 ) 을가능하도록하려면마스크객체를표시목록에추가해야합니다. 마스크객체를표시목록에추가할경우표시객체의실제 z 인덱스 ( 전후순서 ) 는중요하지않습니다. 마스크객체는화면에는표시되지않고마스크로만표시됩니다. 마스크객체가프레임이여러개있는 MovieClip 인스턴스인경우마스크객체는마스크역할을하지않을때와마찬가지로해당타임라인에모든프레임을재생합니다. mask 속성을 null로설정하여마스크를제거할수있습니다. // mysprite 에서마스크를제거합니다. mysprite.mask = null; 마스크를사용하여다른마스크에마스크를적용할수는없습니다. 마스크무비클립의 alpha 속성은설정할수없습니다. 마스크로사용되는표시객체에는채우기만사용되고획은무시됩니다. 장치글꼴마스크적용 표시객체를사용하면장치글꼴로설정된텍스트에마스크를적용할수있습니다. 표시객체를사용하여장치글꼴에설정된텍스트에마스크를적용할때는마스크의사각형경계상자가마스크모양으로사용됩니다. 즉, 장치글꼴텍스트에대해사각형이아닌표시객체마스크를만들면 SWF 파일에나타나는마스크의모양은마스크자체의모양이아니라마스크의사각형경계상자의모양이됩니다. 알파채널마스킹 다음과같이알파채널마스킹은마스크표시객체와마스크가적용된표시객체모두비트맵캐싱을사용할경우에지원됩니다. // maskshape 는그래디언트채우기가적용된 Shape 인스턴스입니다. mysprite.cacheasbitmap = true; maskshape.cacheasbitmap = true; mysprite.mask = maskshape; 예를들어, 마스크가적용된표시객체에적용되어있는필터와독립적으로마스크객체에필터를사용할경우알파채널마스킹을적용합니다. 390 디스플레이프로그래밍
다음예제에서는외부이미지파일을 Stage 에로드합니다. 이이미지 ( 정확히말해서이미지가로드되는 Loader 인스턴스 ) 는마스크가적용되는표시객체입니다. 이미지위에그래디언트타원 ( 중앙이검정이고가장자리로갈수록점점투명해짐 ) 이그려집니다. 이것이알파마스크가됩니다. 두표시객체는모두비트맵캐싱기능이설정되어있습니다. 타원이이미지에대한마스크로설정되고드래그할수있게됩니다. // 이코드는 MovieClip 또는 Sprite 인스턴스등의표시객체컨테이너내에서 // 실행되는것으로간주합니다. import flash.display.gradienttype; import flash.display.loader; import flash.display.sprite; import flash.geom.matrix; import flash.net.urlrequest; // 이미지를로드하여표시목록에추가합니다. var loader:loader = new Loader(); var url:urlrequest = new URLRequest("http://www.helpexamples.com/flash/ images/image1.jpg"); loader.load(url); this.addchild(loader); // Sprite 를만듭니다. var oval:sprite = new Sprite(); // 그래디언트타원을그립니다. var colors:array = [0x000000, 0x000000]; var alphas:array = [1, 0]; var ratios:array = [0, 255]; var matrix:matrix = new Matrix(); matrix.creategradientbox(200, 100, 0, -100, -50); oval.graphics.begingradientfill(gradienttype.radial, colors, alphas, ratios, matrix); oval.graphics.drawellipse(-100, -50, 200, 100); oval.graphics.endfill(); // 표시목록에 Sprite 를추가합니다. this.addchild(oval); // 두표시객체에대해모두 cacheasbitmap = true 를설정합니다. loader.cacheasbitmap = true; oval.cacheasbitmap = true; // 타원을로더와해당자식인로드된이미지의마스크로설정합니다.) loader.mask = oval; // 타원을드래그할수있게만듭니다. oval.startdrag(true); 표시객체조작 391
객체애니메이션 애니메이션은어떤것을움직이게하거나또는시간에따라변화되도록하는프로세스입니다. 스크립트애니메이션은비디오게임의기본이되는요소이며, 기타응용프로그램에세련되고유용한상호작용을추가하기위해서도자주사용됩니다. 스크립트애니메이션의기본아이디어는변경이발생해야하며이변경이시간의경과에따라여러단계로나뉘어진행되어야한다는것입니다. ActionScript에서는일반루프문을사용하여어떤작업을쉽게반복할수있습니다. 그러나루프는표시를업데이트하기이전에모든반복을완료합니다. 스크립트애니메이션을만들려면시간에따라일부작업을반복적으로수행하고반복이실행될때마다화면을업데이트하는 ActionScript를작성해야합니다. 예를들어, 화면을따라공이이동하는간단한애니메이션을만든다고가정합니다. ActionScript에는시간경로를추적하여화면을적절하게업데이트할수있는간단한메커니즘이포함되어있습니다. 즉, 공이목표지점에도달할때까지조금씩이동하는코드를작성할수있습니다. 이동할때마다화면이업데이트되어 Stage를가로지르는모션이뷰어에표시됩니다. 실질적인관점에서스크립트애니메이션을 SWF 파일의프레임속도 ( 이속도가 Flash Player 에서화면을업데이트하는속도이기때문 ) 와동기화하여, 새프레임이표시될때마다애니메이션변경을하나씩만들수있습니다. 각표시객체에는 SWF 파일의프레임속도에따라전달되는 enterframe 이벤트 ( 프레임별로하나의이벤트 ) 가있습니다. 스크립트애니메이션을만드는대부분의개발자는 enterframe 이벤트를사용하여일정시간반복되는작업을만듭니다. enterframe 이벤트를수신하여애니메이션처리된공을프레임별로특정양만큼이동하고각프레임에대해화면이업데이트되면공을새위치에다시그려모션을생성하는코드를작성할수있습니다. 중요 일정시간작업을반복적으로수행하는다른방법은 Timer 클래스를사용하는것입니다. Timer 인스턴스는지정된시간이경과할때마다이벤트알림을트리거합니다. Timer 클래스의 timer 이벤트를처리하고시간간격을작게 ( 몇분의일초 ) 설정하여애니메이션을수행하는코드를작성할수있습니다. Timer 클래스사용에대한자세한내용은 186 페이지의 시간간격제어 를참조하십시오. 다음예제에서는 circle이라는원 Sprite 인스턴스를 Stage에만듭니다. 사용자가원을클릭하면스크립트애니메이션시퀀스가시작되어 circle이완전히투명해질때까지페이드됩니다 (alpha 속성이감소됨 ). import flash.display.sprite; import flash.events.event; import flash.events.mouseevent; // 원을그려서표시목록에추가합니다. var circle:sprite = new Sprite(); circle.graphics.beginfill(0x990000); circle.graphics.drawcircle(50, 50, 50); 392 디스플레이프로그래밍
circle.graphics.endfill(); addchild(circle); // 이애니메이션이시작되면프레임마다이함수가호출됩니다. // 이함수에의한변경내용이프레임마다화면에업데이트되어 // 애니메이션이실행됩니다. function fadecircle(event:event):void circle.alpha -=.05; if (circle.alpha <= 0) circle.removeeventlistener(event.enter_frame, fadecircle); function startanimation(event:mouseevent):void circle.addeventlistener(event.enter_frame, fadecircle); circle.addeventlistener(mouseevent.click, startanimation); 사용자가원을클릭하면 fadecircle() 함수가 enterframe 이벤트의리스너로구독되어프레임마다한번씩호출됩니다. 이함수는 alpha 속성을변경하여 circle에페이드효과를적용하기때문에프레임마다한번씩원의 alpha가.05(5%) 씩감소하고화면이업데이트됩니다. alpha 값이 0(circle이완전투명한상태 ) 이되면 fadecircle() 함수가이벤트리스너구독에서제거되어애니메이션이종료됩니다. 예를들어, 동일한코드를사용하여페이드효과대신애니메이션모션을만들수있습니다. 함수에서 alpha를 enterframe 이벤트리스너인다른속성으로대체하면해당속성이대신애니메이션화됩니다. 예를들어, 다음행을 circle.alpha -=.05; 다음코드로변경하면 circle.x += 5; x 속성이애니메이션화되어원이스테이지의오른쪽으로이동합니다. 애니메이션이종료되는조건을변경하여원하는 x 좌표에도달하면애니메이션이종료 ( 즉, enterframe 리스너구독해제 ) 되도록할수있습니다. 객체애니메이션 393
표시내용을동적으로로드 다음과같은외부표시에셋을 ActionScript 3.0 응용프로그램으로로드할수있습니다. ActionScript 3.0 에서제작된 SWF 파일 - 이파일은 Sprite 또는 MovieClip 클래스이거나 Sprite 를확장하는모든클래스가될수있습니다. 이미지파일 - JPG, PNG 및 GIF 파일을포함합니다. AVM1 SWF 파일 - ActionScript 1.0 또는 2.0에서작성된 SWF 파일입니다. Loader 클래스를사용하여이러한에셋을로드합니다. 표시객체로드 Loader 객체는 SWF 파일과그래픽파일을응용프로그램으로로드하는데사용됩니다. Loader 클래스는 DisplayObjectContainer 클래스의하위클래스입니다. Loader 객체는하나의자식표시객체 ( 로드하는 SWF 또는그래픽파일을나타내는표시객체 ) 만표시목록에포함할수있습니다. 다음코드에서처럼 Loader 객체를표시목록에추가할때로드된자식표시객체를표시목록에함께추가합니다. var pictldr:loader = new Loader(); var picturl:string = "banana.jpg" var picturlreq:urlrequest = new URLRequest(pictURL); pictldr.load(picturlreq); this.addchild(pictldr); SWF 파일또는이미지가로드되면로드된표시객체를다른표시객체컨테이너 ( 예 : 다음예제의 container DisplayObjectContainer 객체 ) 로이동할수있습니다. import flash.display.*; import flash.net.urlrequest; import flash.events.event; var container:sprite = new Sprite(); addchild(container); var pictldr:loader = new Loader(); var picturl:string = "banana.jpg" var picturlreq:urlrequest = new URLRequest(pictURL); pictldr.load(picturlreq); pictldr.contentloaderinfo.addeventlistener(event.complete, imgloaded); function imgloaded(event:event):void container.addchild(pictldr.content); 394 디스플레이프로그래밍