액션스크립트 3.0 : 애니메이션 모션의 원리와 고급 액션까지

시작하세요!

액션스크립트 3.0 애니메이션

iv

•목 차•

서문 ..................................................................................................................xxv

제1부 액션스크립트애니메이션 기초

01장 애니메이션 기본 사상 3애니메이션이란 무엇일까요? ...........................................................................4

프레임과 모션 .....................................................................................................5

기록으로서의 프레임 ..................................................................................7

프로그래밍된 프레임 ..................................................................................7

동적인 애니메이션과 정적인 애니메이션 ......................................................8

요약 ................................................................................................................... 11

02장 액션스크립트 3.0 애니메이션 기본 13기본적인 애니메이션 ...................................................................................... 13

액션스크립트 버전에 따른 정리 .................................................................... 14

클래스와 OOP ................................................................................................. 15

클래스 .........................................................................................................15

패키지 .........................................................................................................17

임포트 .........................................................................................................17

생성자 .........................................................................................................18

상속 ...........................................................................................................18

v

MovieClip/Sprite 하위클래스 ..................................................................20

도큐먼트 클래스 작성 ...............................................................................21

액션스크립트 3.0 애플리케이션의 설정 ....................................................... 22

Flash CS3 IDE 사용...................................................................................23

Flex Builder 2 사용 ....................................................................................24

커멘드 라인 컴파일러 사용.......................................................................26

Trace에 대한 안내 ......................................................................................28

무비의 리사이징(크기조절) .....................................................................29

코드를 사용한 애니메이션 ............................................................................. 30

루프 ...........................................................................................................30

프레임 루프 ................................................................................................34

클립 이벤트 ................................................................................................35

이벤트와 이벤트 핸들러 ...........................................................................37

리스너와 핸들러 ........................................................................................38

애니메이션의 이벤트 ................................................................................42

디스플레이 오브젝트 ...................................................................................... 44

디스플레이 오브젝트의 하위클래스화 ....................................................48

유저 인터랙션 .................................................................................................. 51

마우스 이벤트 ............................................................................................51

마우스 위치 ................................................................................................53

키보드 이벤트 ............................................................................................53

키 코드 ........................................................................................................54

요약 ................................................................................................................... 56

vi

03장 애니메이션을 위한 삼각함수 57삼각함수란 무엇일까요? ................................................................................ 58

각도 ................................................................................................................... 58

라디안과 도 ................................................................................................58

Flash의 좌표계 ...........................................................................................61

3개의 변 ......................................................................................................63

삼각함수 ........................................................................................................... 64

사인 ...........................................................................................................64

코사인 .........................................................................................................66

탄젠트 .........................................................................................................68

아크사인과 아크코사인 ............................................................................68

아크탄젠트 .................................................................................................69

회전 ................................................................................................................... 71

곡선 ................................................................................................................... 75

매끄럽게 움직이는 상하모션 ....................................................................76

직선 상하 모션 ...........................................................................................79

박동하는 모션 ............................................................................................79

2개의 각도를 가진 곡선 ............................................................................80

드로잉 API를 사용한 곡선 .......................................................................82

원과 타원 .......................................................................................................... 83

원운동 .........................................................................................................83

타원 운동 ....................................................................................................85

피타고라스의 정리 .......................................................................................... 87

두 점 사이의 거리 ............................................................................................ 88

중요한 공식 ...................................................................................................... 92

요약 ................................................................................................................... 94

vii

04장 렌더링 기술 95Flash의 컬러 .................................................................................................... 95

16진수 컬러 값의 사용 ..............................................................................96

투명도와 32비트 컬러 ...............................................................................97

새로운 number 타입: int와 uint ..............................................................98

컬러의 결합 ................................................................................................99

컬러 성분의 추출 .....................................................................................101

드로잉 API ..................................................................................................... 102

그래픽 오브젝트 ......................................................................................104

clear를 사용한 드로잉의 삭제 ................................................................104

IineStyle에 의한 라인의 외형 설정 ........................................................104

IineTo와 moveTo에 의한 라인의 드로잉 ..............................................105

curveTo 메서드에 의한 곡선의 드로잉 .................................................108

beginFili와 endFill에 의한 도형 제작 ...................................................116

BeginGradientFill에 의한 그라데이션 채우기의 작성 ........................117

컬러의 변환 .................................................................................................... 122

ColorTransform 클래스에 의한 컬러의 변경 .......................................122

필터 ................................................................................................................. 125

필터 생성 ..................................................................................................125

필터의 애니메이션 ..................................................................................128

비트맵 ............................................................................................................. 129

에셋의 로딩과 임베딩 ................................................................................... 134

에셋 로드 ..................................................................................................134

에셋 임베딩 ..............................................................................................135

이 장의 중요한 공식 ...................................................................................... 136

요약 ................................................................................................................. 137

viii

제2부 기본 모션

05장 속도와 가속도 141속도 ................................................................................................................. 141

벡터와 속도 ..............................................................................................142

1축에서의 속도 ........................................................................................144

2축에서의 속도 .......................................................................................146

각 속도 ......................................................................................................147

속도의 확장 ..............................................................................................152

가속도 ............................................................................................................. 154

1축에서의 가속도 ....................................................................................155

2축에서의 가속도 ....................................................................................158

가속도로서의 중력 ..................................................................................160

모퉁이 가속도 ..........................................................................................162

우주선 .......................................................................................................164

중요한 공식 .................................................................................................... 169

요약 ................................................................................................................. 170

06장 경계와 마찰 171경계가 있는 환경 ........................................................................................... 172

경계의 설정 ..............................................................................................172

오브젝트의 삭제 ......................................................................................174

오브젝트의 재생성 ..................................................................................180

스크린 래핑(화면 감싸기) ......................................................................182

바운드 .......................................................................................................185

마찰 ................................................................................................................. 192

마찰, 올바른 방법 ....................................................................................192

마찰, 간단한 방법 ....................................................................................195

ix

마찰의 적용 ..............................................................................................196

중요한 공식 .................................................................................................... 197

요약 ................................................................................................................. 198

07장 유저 인터랙션: 오브젝트의 이동 199스프라이트를 프레스, 릴리즈하기 .............................................................. 199

스프라이트의 드래그 .................................................................................... 203

mouseMove를 사용한 드래그 ................................................................203

startDrag와 stopDrag를 사용한 드래그................................................205

드래그와 모션 코드의 조합.....................................................................206

던지기(스로잉) .............................................................................................. 210

요약 ................................................................................................................. 215

제3부 고급 모션

08장 이징과 스프링 219비례모션 ......................................................................................................... 219

이징 ................................................................................................................. 220

간단한 이징 ..............................................................................................220

이징을 정지하는 타이밍 .........................................................................226

이동하는 목표 ..........................................................................................230

이징은 모션만을 위한 것은 아니다 ........................................................231

고급 이징 ..................................................................................................233

스프링 ............................................................................................................. 233

1축에서의 스프링 ....................................................................................234

2축에서의 스프링 ....................................................................................236

움직이는 목표의 스프링 .........................................................................238

x

스프링은 도대체 어디에 있지? ...............................................................239

스프링 체인 ..............................................................................................241

복수 목표지점의 스프링 .........................................................................244

목표의 오프셋 ..........................................................................................247

복수의 오브젝트로 스프링 할당 .............................................................250

중요한 공식 .................................................................................................... 254

요약 ................................................................................................................. 256

09장 충돌 판정 257충돌 판정의 방법 ........................................................................................... 257

hitTestObject와 hitTestPoint ....................................................................... 258

2개 스프라이트의 히트 테스트 ..............................................................258

스프라이트와 포인트의 히트 테스트 .....................................................264

shapeFlag를 사용한 히트 테스트 ...........................................................266

hitTest 요약 ..............................................................................................267

거리 기반 충돌 판정 ...................................................................................... 267

간단한 거리 기반 충돌 판정....................................................................268

충돌 기반 스프링 운동 ............................................................................271

여러 오브젝트의 충돌 판정을 하는 방법 .................................................... 275

여러 오브젝트의 기본 충돌 판정 ............................................................275

여러 오브젝트의 스프링 운동 .................................................................278

다른 충돌 판정 방법 ...................................................................................... 282

중요한 공식 .................................................................................................... 283

요약 ................................................................................................................. 284

xi

10장 좌표 회전과 각이 있는 바운드 285단순한 좌표 회전 ........................................................................................... 285

고급 좌표 회전 ............................................................................................... 287

단일 오브젝트의 회전 .............................................................................289

여러 오브젝트의 회전 .............................................................................290

각이 있는 바운드 ........................................................................................... 293

회전의 실행 ..............................................................................................296

코드의 최적화 ..........................................................................................300

다이내믹하게 만들기 ..............................................................................301

‘구석에서 떨어지는’ 문제의 수정 ..........................................................302

‘라인의 아래’ 문제 수정 ...........................................................................305

여러 각도의 바운드 .................................................................................307

중요한 공식 .................................................................................................... 312

요약 ................................................................................................................. 312

11장 당구공 물리 313질량 ................................................................................................................. 314

운동량 ............................................................................................................. 314

운동량 보존 .................................................................................................... 315

1축에서의 운동량 보존 ...........................................................................317

2축에서의 운동량 보존 ...........................................................................323

중요한 공식 .................................................................................................... 343

요약 ................................................................................................................. 344

xii

12장 파티클과 인력 345파티클 ............................................................................................................. 345

인력 ................................................................................................................. 347

만유인력 ...................................................................................................347

충돌 판정과 반응 .....................................................................................351

궤도 선회(Orbiting) ................................................................................353

스프링 ............................................................................................................. 354

인력과 스프링 ..........................................................................................354

탄력 있는 노드 가든 ................................................................................355

노드의 접속 ..............................................................................................358

질량을 가진 노드 .....................................................................................360

중요한 공식 .................................................................................................... 362

요약 ................................................................................................................. 363

13장 순기구학: 걷게 만들기 365순기구학과 역기구학이란? .......................................................................... 366

순기구학 프로그래밍의 시작 ....................................................................... 367

하나의 세그먼트를 움직여 봅시다 .........................................................367

2개의 세그먼트를 움직여 봅시다...........................................................371

처리의 자동화 ................................................................................................ 374

자연스럽게 보이는 보행 사이클의 작성 ................................................375

좀 더 다이내믹하게 .................................................................................379

실제로 걷게 하기 ........................................................................................... 382

공간 할당 ..................................................................................................383

중력의 추가 ..............................................................................................383

충돌 처리 ..................................................................................................384

반응의 처리 ..............................................................................................386

다시 스크린 래핑 .....................................................................................388

요약 ................................................................................................................. 393

xiii

14장 역기구학: 드래그와 도달 395단일 세그먼트의 도달과 드래그 .................................................................. 395

단일 세그먼트를 사용한 도달 .................................................................396

단일 세그먼트를 사용한 드래그 .............................................................398

복수의 세그먼트 드래그 ............................................................................... 398

2개의 세그먼트 드래그 ...........................................................................399

3개 이상의 세그먼트 드래그 ..................................................................401

복수의 세그먼트 도달 ................................................................................... 403

마우스로 도달 ..........................................................................................403

오브젝트의 도달 ......................................................................................410

상호작용의 추가 ......................................................................................413

표준 역기구학 방법의 사용 .......................................................................... 414

코사인 정리 소개 .....................................................................................415

코사인 정리 액션스크립트......................................................................417

중요한 공식 .................................................................................................... 420

요약 ................................................................................................................. 421

제4부 3D 애니메이션

15장 3D 기본 4253차원과 퍼스펙티브 ...................................................................................... 425

z축 .........................................................................................................426

퍼스펙티브(관점) ....................................................................................427

속도와 가속도 ................................................................................................ 433

바운드 ............................................................................................................. 435

단일 오브젝트의 바운드 .........................................................................435

복수 오브젝트의 바운드 .........................................................................438

xiv

Z소팅 ........................................................................................................442

인력 .........................................................................................................444

래핑 ................................................................................................................. 448

이징과 스프링 ................................................................................................ 458

이징 .........................................................................................................458

스프링 .......................................................................................................460

좌표 회전 ........................................................................................................ 462

충돌 판정 ........................................................................................................ 470

중요한 공식 .................................................................................................... 474

요약 ................................................................................................................. 475

16장 3D 라인과 채우기 477점과 라인의 제작 ........................................................................................... 477

3D 도형의 제작 ............................................................................................. 485

3D의 채우기의 생성...................................................................................... 489

삼각형의 사용 ..........................................................................................490

3D 입체 모델링 ............................................................................................. 497

회전하는 큐브 모델링 .............................................................................497

다른 도형 모델링 .....................................................................................500

3D 입체의 이동 ............................................................................................. 506

요약 ................................................................................................................. 508

17장 뒷면컬링과 3D 조명 509뒷면컬링 ......................................................................................................... 510

심도소팅 ......................................................................................................... 514

3D 조명(라이팅) ........................................................................................... 517

요약 ................................................................................................................. 529

xv

제5부 고급 기법

18장 행렬 수학 533행렬기초 ......................................................................................................... 533

행렬 연산 ........................................................................................................ 534

행렬 덧셈 ..................................................................................................535

행렬 곱셈 ..................................................................................................536

행렬 클래스 .................................................................................................... 542

요약 ................................................................................................................. 546

19장 각종 팁과 비법 547브라운 운동 .................................................................................................... 547

랜덤 분포 ........................................................................................................ 552

정사각형 분포 ..........................................................................................552

원형 분포 ..................................................................................................555

편향 분포 ..................................................................................................558

타이머 기반의 애니메이션과 타임 기반의 애니메이션 ............................. 562

타이머 기반의 애니메이션......................................................................563

타임 기반의 애니메이션 .........................................................................567

같은 질량을 갖는 오브젝트의 충돌 ............................................................. 570

사운드 통합 .................................................................................................... 572

유용한 공식 .................................................................................................... 576

xvi

이 책을 쓰는데 나와 함께한 아내 Kazumi와

딸 Kristine에게 이 책을 바칩니다

xvii

저 자 소 개

키스 피터스 | Keith Peters

키스 피터스는 1999년부터 플래시와 액션스크립트를 사용해 왔고, 현재 매사추세츠주의 캠브리지에

있는 Brightcove사에서 수석 소프트웨어 엔지니어를 담당하고 있다. 이 책은 플래시와 액션스크립트

에 대해서 그가 저술한 11번째의 저서(공저 포함)에 해당한다. 그는 또 플래시나 액션스크립트를 주제

로 많은 잡지에 기고하는 것 외에 전 세계의 컨퍼런스에서 강연을 하거나 다수의 플래시 사이트 제작

으로 수상 경력도 있다. 그의 개인 사이트인 www.bit-101.com은 액션스크립트로 제작한 수많은 실험

작품을 플래시 커뮤니티에서 오픈소스로 공개하고 있다. 일을 쉴 때는 컴퓨터에서 떨어져 대부분의

시간을 아내와 딸과 함께 보낸다.

xviii

기 술 감 수 자 소 개

토드 야드 | Todd Yard

토드 야드는 현재 매사추세츠주 캠브리지에 있는 Brightcove사에서 2005년 초반부터 일해 왔고, 현

재는 소프트웨어 아키텍트이다. 1996년 뉴욕에서 프리랜서로 EGO7의 Flash 콘텐츠 관리 시스템이나

커뮤니티 소프트웨어 개발을 했고, GE나 IBM과 같은 클라이언트의 웹 애플리케이션 개발을 다루었

다. 토드는 원래 애리조나주 피닉스 출신이며, friends of ED사에서 책을 여러 권 출판했다. 가장 마음

에 들어하는 것은 『Flash MX Studio』와 『FlashMX Application And Interface Design』이고 이 책의

저자인 키스 피터스와 함께 저술한 『Extending Flash MX 2004: Complete Guide and Reference to

JavaScript Flash』는 아마 매우 실용적인 책 중 하나라고 자부하고 있다. http://www.27bobs.com은

그가 애정을 가지고 자주 업데이트하는 개인 사이트이다.

xix

역 자 소 개

윤도선 | www.twitter.com/drummeryun

2001년부터 웹 프로젝트를 진행하면서 Flash ActionScript, PHP, JAVA 등을 사용해 왔고, 현재는

㈜감성테크놀러지에서 플렉스 솔루션 개발 팀장을 담당하고 있다. 플래시 플랫폼과 서비스, 모바일에

관심이 많고 2000년 전 IT로 방향을 정하기까지 인생을 걸었던 드럼/퍼커션 연주에 아직 많은 아쉬움

을 가지고 있다. 향후 플래시 플랫폼에서 그를 찾지 못한다면 음악생활을 하고 있을지도 모른다. 개인

블로그인 www.drumcap.com를 운영하고 있으며 여기에 각종 팁과 드럼/퍼커션 관련 글을 올리고 있

다. 요즘에는 트위터를 사용하는 것에 푹 빠져있는데 www.twitter.com/drummeryun이 역자의 주소

이며 플래시 관련 트윗을 같이 주고받을 친구를 찾고 있다.

xx

역 자 서 문

제가 액션스크립트의 매력에 푹 빠지게 된 이유는 액션스크립트는 웹에서 동적이고, 화려하며, 사용

자 인터랙션을 할 수 있게 해주기 때문입니다. 이러한 화려한 효과나 애니메이션은 처음에는 배우기

쉬웠지만 좀 더 고급 애니매이션 제작 기술을 알고 싶어졌을 때 무엇부터 어떻게 해야 하는지 너무 막

막했고 전혀 감이 안 왔습니다. 그러던 중 아마존(Amazon.com)에서 사용자 평이 좋은 애니메이션

관련 책을 찾아보았는데 바로 『ActionScript 3.0 Animation Making �ings Move!』(이 책의 원저 제

목) 책이 눈에 들어왔고 반신반의하며 덜컥 구매했습니다.

책이 배송되어 도착한 날 저는 깜짝 놀랐습니다. 여기에 바로 제가 원했던 그런 내용들이 상세히 기

록되어 있었습니다. 마치 무협지나 무협영화에서 주인공이 힘들게 찾는 무림비급을 찾은 기분이었으

며, 저는 단숨에 책을 읽어 2주만에 독파하게 되었습니다. 이 책은 그만큼 쉽게 구성이 되어 있었으며,

저자가 옆에서 일대일 과외를 시켜주는 방식으로 내용을 진행합니다. 내용이 수학을 다루긴 하지만

그다지 어렵진 않으며 기초부터 설명하고 있고, 하나하나 문제를 해결해 가면서 더 나은 해결책을 독

자인 우리에게 물어보기도 하면서 읽어나가다 보면, 어느덧 마지막 장을 읽고 있을 것입니다.

이 책을 읽으면 플래시/플렉스 애플리케이션을 제작하는 분들이라면 누구라도 새로운 아이디어가

샘솟을 것입니다. 그리고 이전에는 단순히 “멋있다”라고만 생각했던 다른 사람이 만들어 놓은 플래시

작품들이 이제는 어떻게 만들어져 있을지에 대한 원리도 이해가 되기 시작할 것이며, 이러한 것을 어

떻게 응용하면 좋을지에 대한 아이디어도 생길 것입니다.

xxi

플래시 플랫폼의 태생은 애니메이션입니다.

다양한 사용자 경험은 매우 효과적인 애니메이션을 얼마나, 어떻게, 적재적소에 써 주느냐에 달려

있기 때문에 모쪼록 이 책으로 다양한 아이디어를 얻는 데 도움이 되길 바랍니다. 더 나아가 이 책을

통하여 우리나라에서도 예술적인 저작물이 많이 탄생하길 기대해 봅니다.

마지막으로 이 책을 번역하기로 결단하게 도와준 나의 아내, 그리고 딸, 감성테크놀러지의 김순중

사장님과 사원들, 바쁘신 와중에 베타리더로 도와주신 ACC(Adobe Community Chanpion) 멤버

분들과 베타리더들을 소개해준 형인이, 하나하나 꼼꼼하게 봐 주신 신정훈님, 출판하게 도와주신 위

키북스에 감사드리며, 끝까지 인내하며 번역을 할 수 있도록 저를 도와주신 하나님께 감사드립니다.

- 윤도선

xxii

강성규 (ACC, 코발트식스티 인터랙티브 팀장 http://www.action-scripter.com/blog/ , 땡굴이)

여러분은 이 책을 통해 액션스크립트로 구현할 수 있는 모든 애니메이션의 비밀을 얻게 될 것입니다.

책 속에 있는 수많은 애니메이션 구현 공식들은 지금까지 소개되었던 그 어느 책에서도 볼 수 없는 액

션스크립트 애니메이션 구현의 핵심 공식들로 여러분의 상상력과 표현력을 한 단계 업그레이드시켜

줄 것이며 액션스크립트 구현에도 자신감을 가지게 될 것입니다. 이 책을 만난 건 행운입니다.

김형인 (MathMedia 대표)

가뭄에 단비 같은 책이 아닐 수 없습니다.

플래시/플렉스를 다루면서 알아야 하는 많은 수학적 지식을, 이 책 한권으로 마스터 할 수 있으리라

봅니다. 비단 플래시가 아니더라도 GUI를 다루는 프로그래머들에겐 필수로 습득해야 될 내용들입

니다.

무엇보다 이해하기 쉽도록 설명이 잘 되어 있는데, 이는 수학공식 자체가 아니라 공식이 의미하는 점

을 쉽고 분명하게 알려 줍니다. 속도, 가속도, 마찰, 인력, 바운드, 모션공식 등 일반적인 내용부터 기구

학과 3D 등 비교적 고급주제까지 다룹니다. 무한한 상상력을 펼칠 토대가 될 것이며, 3D 엔진과 기구

학 엔진, 물리 엔진을 만들 수 있는 토대 또한 될 것입니다.

개인적으론 3D 엔진에 대한 기초지식을 쌓아 제작하는데 6개월 이상이 소요되었습니다. 아마 그 당

시 이 책이 있었더라면 훨씬 더 많은 시간을 단축할 수 있지 않았을까, 하는 생각이 듭니다. 바쁜 시간

을 쪼개어 번역한 역자에게 큰 박수를 보냅니다.

책을 읽은 후 이렇게 외칠지도 모르겠습니다. “물리! 그건 아무것도 아니야!”

추 천 의 글

xxiii

엄진우 (ACC, 고스트코어, http://jinustudio.com/blog/ )

플래시를 처음에 접근할 때 기초적인 부분을 파고들어가야 하는 것이 일반적인 정석입니다. 그렇다면

패턴이나 알고리즘 또는 물리와 기하학 같은 경우는 언제 접근을 해야 하는 것일까요? 초, 중, 고급을

습득하고 접근하는 것이 맞을까요? 무엇이 급수를 나누는 기준이 되는 것일까를 생각해 봐야 할 것입

니다.

나는 이러한 급수를 나누는 기준을 좋아하지 않습니다. 왜냐하면 『시작하세요! 액션스크립트 3.0 애

니메이션』을 보면서 나는 또 다시 초보자가 되어버린 것 같았기 때문입니다. 이러한 기분을 갖게 되었

다는 것은 나에게 부족한 기초는 어떠한 분야에서든 존재하기 마련이기 때문일 것입니다.

그래서 이 도서는 급수를 나눌 가치가 없다고 생각합니다. 플래셔라면 누구나 접근해야 하고 풀이해

나아가야 하는 기초적인 틀을 제공해주기 때문입니다. 원서로 읽기 힘들었던 것을 한글로 읽어보니

정말로 속이 후련하였습니다. 이러한 번역서가 국내에 많이 확산되길 바래봅니다.

초심자에게 한마디한다면 “기초가 되는 도서를 선택해서 읽을 때 이 도서를 꼭 참고하길 바랍니다.”

마지막으로, 플래시라는 것은 어떤 특정한 분야를 다루는 것이 아닙니다. 드로잉할 수 있는 어느 장소

에서든 사용할 수 있는 것입니다. 다양한 분야에서 활동하며 즐기길 바라고, 이 책을 읽고 나와 똑같

은 자극을 받길 바랍니다. 꼭, 새로운 나라를 여행하면서 견문을 넓힌 기분입니다.

xxiv

지용호 (ACC, 위콘 개발1팀장 , http://blog.jidolstar.com 지돌스타)

액션스크립트 3.0의 다른 언어와 차별성은 바로 사용자 경험을 극대화를 위한 가장 적합한 언어라는

점에서 찾을 수 있습니다. 왜냐하면 플래시 기술이 수년간 많은 사랑을 받았던 것은 쉬운 접근성뿐 아

니라 개발이 용이하고 사용자에게 재미있고 유익한 경험을 던져주었기 때문입니다. 이러한 사용자 경

험의 다양화는 일반 웹의 정적인 모습을 탈피하여 동적 표현을 강화했기 때문이라고 생각합니다. 그

래서 플래시 애플리케이션이 풍부한 사용자 경험을 던져주지 못한다면 그것은 플래시로 만들면 안

된다고 생각합니다.

이 책은 액션스크립트 3.0으로 동적표현을 통해 사용자 경험을 다채롭게 하기 위한 기본적인 기술을

아주 쉽고 흥미롭게 다루었습니다. 기존 서적에서는 단순히 API 수준의 접근으로 끝나는데 반해 이

책은 플래시의 강점인 동적표현을 어떻게 하면 다채로운 사용자 경험으로 전달할 수 있을 것인가에서

출발한다는 느낌을 줍니다. 그러므로 다양한 사용자 경험을 주기 위한 플래시의 기초 기술을 학습하

시고자 하는 사람들에게 이 책은 큰 도움이 될 것이라고 생각합니다.

한상훈 (ACC, 고스트코어 실장, http://hangunsworld.com/blog/ )

삼각함수만 나와도 지레 겁을 먹는 플래시 개발자들 얘기를 종종 듣게 됩니다. 이런 분들이 조금 더

쉽게 수학이나 물리 공식들을 자기 것으로 만들 수 있는 멋진 기회가 아닐까 생각합니다. 어렵게만 생

각해왔던 수학, 물리, 3D 등의 개념들을 하나씩 따라 하다 보면, 그저 바라보며 동경만 해왔던 멋진

효과들을 스스로 만들어 가는 자신을 새삼 깨닫게 될 것입니다. 저도 베타리더를 하면서 상당히 고난

도의 기술이 필요할 것이라고 생각했던 것들이 의외로 복잡하고 어렵지만은 않다는 점에 놀랐습니다.

이 책을 컴퓨터 주변에 두고, 필요할 때마다 꺼내어 보면 큰 도움이 될 것입니다.

xxv

서 문

이 책은 아주 멋진 책입니다!

저는 이 책의 이전 버전(ActionScript Animation, friendsof ED, 2006)의 머리말에서 이 책의 훌륭함은

제게 집필 능력이나 재능 등과 관계없이 다루고 있는 많은 주제의 뛰어남에 있다는 것을 우선해서 얘

기했습니다. 이전 버전 책은 제가 여러 해 동안 고민해 왔던 액션스크립트를 사용한 애니메이션의 질

문이나, 저 이외의 사람들이 모두 고민하고 있던 의문, 또는 저에게 보내왔던 많은 메일에 쓰여진 질문

에 답했던 것이었습니다. 그 해답은 제가 혼자 찾아낸 것이 아니라, 검색하고, 읽고, 저보다 더 똑똑한

지식이 높은 사람들에게 물어보고 나서 받은 답변들입니다. 이렇게 답변들을 모아 논리적으로 정리하

고 이해하기 쉽게 제시했던 것이 저의 작은 공헌이라는 것은 인정합니다. 그것은 차치하고라도, 만약

책의 판매량이나 여러분께서 제게 주신 많은 피드백이 이 책의 우수함을 나타내는 것이라고 한다면,

이 책이 어떠한 메리트가 있다는 것이 입증되는 것이겠죠. 따라서 저는 구입하신 여러분이나 의견을

주신 여러분에게 감사할 따름입니다.

이전 버전과 이 책은 소스코드가 액션스크립트 3.0로 변환되어 있다는 점을 빼면 본질적으로 같습

니다. 다루고 있는 기본 공식이나 기법이 같고 그 순서도 대부분 바뀌지 않았습니다. 새로운 기법을 추

가할 때에도, 그 때문에 이미 존재하는 본문을 삭제하지는 않았습니다. 그러나 이전 버전과 같은 기법

을 액션스크립트 3.0으로 옮기려면, 각 예제에 해당 클래스 파일이 통째로 필요하기 때문에 이전 버전

보다 많은 지면이 필요했습니다. 다루는 기본 주제의 변화는 없기 때문에 액션스크립트 3.0용으로 고

쳐 쓰는 방대한 작업을 하게 되었습니다.

이제 저는 이 책을 읽으시는 여러분에게 객체지향 프로그래밍(OOP)을 약간은 배울 것을 추천합니

다. 이전 버전에서는 복잡해지기 때문에 이 주제를 피했지만, 이번에 저는 플래시의 타임 라인을 버리

고 클래스를 만드는 액션스크립트 3.0 방법을 선택하고 있습니다. 클래스나 OOP에 서투른 분에게는

많은 부담이 될지도 모르겠지만 제가 보장합니다. 4장을 끝내기 전까지 클래스를 사용한 프로그래밍

의 기초를 잡고, 이 책의 반을 볼 때쯤에는 그것에 완전히 익숙해질 것입니다. 그리고 이미 액션스크립

트 2.0 클래스에 익숙했던 분이라면, 이 책은 액션스크립트 3.0으로의 좋은 전환점이 될 것입니다.

xxvi

또 저는 이전 버전의 머리말에서 말했던 것을 여기에서도 몇 가지 말하려 합니다. 첫 번째는, 이 책

에서 보여드리는 예제나 기법은 그것을 실행하기 위한 유일한 방법도 아니고, 반드시 필요한 최고의

방법도 아니라는 것입니다. 예제나 기법에서는 그렇게 되는 것을 제안하고 있고 대부분 잘 동작하지

만, 만약 조금 더 개선하고 싶다면 꼭 개선해 보세요.

두 번째는, 이 책은 게임 제작을 위한 튜토리얼 같은 것이 아니고, 각각의 기법을 모은 모음집과 같

은 것이라는 것입니다. 만약 여러분이 이러한 기법을 이해하고 응용할 수 있게 되면, 여러분은 틀림없

이 다양하고 뛰어난 효과를 생각하고 만들 수 있게 될 것이라 확신합니다.

마지막으로, 제가 이 책에서 여러 번 이야기하고 있듯이 이 책에서는 많은 수학 공식이나 물리학을

다루고 있지만, 저는 그런 것으로부터 비교적 자유롭습니다. 소개하는 공식은 생동감 있게 보이도록

플래시 플에이어에서 적절히 동작하도록 설계된 것입니다. 따라서 이 책의 공식이 대학의 물리 교과

서 공식과 많은 차이가 나도 놀라지 마세요.

소개는 여기까지입니다. 이제 이전 버전에서 했던 이야기와 같은 이야기를 여기서도 말하고 끝내겠

습니다. 이 책은 즐기기 위한 책입니다. 그냥 읽고 즐겨 주세요.

xxvii

레이아웃 규칙

이 책을 쉽게 보려면 이 책에서 쓰인 다음과 같은 규칙을 확인하세요

중요한 단어나 개념이 처음 나타났을 때 보통 굵게 볼드체로 표시합니다

새롭거나 바뀐 코드가 있을 때 굵은 고정폭 글꼴(bold fixed-width font)로 표시합니다

개념코드(수도코드, pseudo code)와 변수는 이탤릭체(italic fixed-width font)로 표시합니다.

메뉴 명령은 메뉴 ▷ 서브메뉴 ▷ 서브메뉴와 같이 표시합니다.

주목을 끌고 싶을 때에는 다음과 같이 표시합니다.

어험! 제가 경고했었지요.

가끔 코드가 책의 한 줄에 들어가지 않는 경우는 다음과 같은 화살표로 표시합니다:

Act

ion

Scr

ipt

3.0

An

imati

on

제 1 부

액션스크립트 애니메이션 기초

01 애니메이션 기본 사상

02 액션스크립트 3.0 애니메이션 기본

03 애니메이션을 위한 삼각함수

04 렌더링 기술

3

플래시(Flash)는 본래 애니메이션 저작 툴입니다. 초기 버전에서부터 플래시는 트윈을 이용한 애니메

이션을 지원해왔습니다. 트윈이란, 2개의 다른 키 프레임을 만들고 그 공간을플래시가 자동적으로 채

워 넣음으로써 애니메이션을 제작하는 기능을 말합니다. 이 책은 트윈에 관한 책은 아니고, 플래시에

내장되어 있는 액션스크립트라고 하는 강력한 언어에 관한 책입니다. 이 책에서는 액션스크립트를 사

용해 객체를 움직일 때에 사용하는 프로그래밍이나 수학적, 물리학적인 기법을 다룹니다. 지금부터

배우는 내용을 습득하면, 여러분은 트윈에서는 도저히 상상할 수 없는 강력한 조작이나 제어, 사용자

인터랙션 등을 구현할 수 있습니다.

그렇지만 액션스크립트로 물체를 움직이기 위한 특별한 기법이나 공식을 익히기 전에, 기본적으로

애니메이션이 정확하게 무엇인지, 어떠한 기본 기법이 있는지, 어떻게 하면 플래시 애니메이션을 좀 더

동적이고 멋지게 움직이도록 할 수 있는지 알아볼 필요가 있습니다.

물론 바로 코딩하고 싶어서 견딜 수 없는 분은 이 장을 건너뛸 수도 있습니다(그렇지만 나중에 꼭 다

시 돌아와서 읽어 볼 것을 강력하게 추천합니다). 하지만 만약 건너뛰지 않는다면 애니메이션의 본질

에 대한 재미있는 지식을 얻을 수 있을 것입니다.

01애니메이션 기본 사상

■ 애니메이션이란 무엇인가요? ■ 프레임과 모션 ■ 동적 vs 정적 애니메이션

4 l 시작하세요! 액션스크립트 3.0 애니메이션

애니메이션이란 무엇일까요?

우선 무엇보다도 가장 중요한 것은, 애니메이션이란 무엇인가? 라는 질문입니다. 『American Heritage

Dictionary of the English Language』 (제4판, HoughtonMi�in Company, 2000년)에 의하면, 다음

과 같이 쓰여져 있습니다.

생명을 불어넣는 것, 활력으로 채우는 것 1.

흥미나 강한 관심을 주는 것, 활성화 2.

건강이나 용기, 강한 의지를 넘치게 하는 것, 격려 3.

행동에 영감을 주는 것 4.

모션(움직임)이나 운동을 주는 것 5.

모션처럼 착각하게 보이도록 디자인하는 것, 만드는 것 (예를 들면 만화)6.

첫 번째부터 네 번째까지의 내용은 철학적인 정의이고, 우리가 여기서 논하고자 하는 내용은 다섯

번째와 여섯 번째의 정의입니다. 애니메이션의 뜻은 모션이라 할 수 있습니다. 조금 더 자세히 이야기

해보면 애니메이션은 시간과 함께 변화하는 것, 특히 시각적으로 변하는 것으로 정의할 수 있습니다.

모션은 기본적으로 시간과 함께 어떠한 것의 위치가 바뀌는 것이어서, 잠깐 여기 있었다면 어느 순간

저쪽에 있는 것입니다. 이론적으로 움직였던 그것은 두 개의 점 사이의 공간 안에 존재하지만, 여기서

는 추상적으로 생각하지 맙시다. 그 물건은 실제로 움직여서, 첫 번째 위치했던 순간에서, 다음에 위치

한 순간까지 얼마 동안 시간이 흐른 것입니다.

그렇지만 객체가 애니메이션되기 위해서 위치를 변경하는 것이 반드시 필요치는 않습니다. 객체는

자신의 모습을 바꿀 수도 있습니다. 1990년대의 후반에 유행했던 사진변환 프로그램을 기억하십니

까? 여인의 사진 한 장과 호랑이 사진 한 장을 연결하면 프로그램은 애니메이션을 만들어냈습니다. 예

를 들면 식물이 자라거나 팽이 회전과 같이 객체는 크기조정 또는 회전이 가능했으며, 더 나아가 쉽게

컬러를 바꿀 수도 있었습니다. 오랫동안 컴퓨터를 사용하셨던 분이라면, 초창기 집에서 쓰는 PC로 색

을 순환하며 만든 애니메이션을 기억할지 모르겠습니다. 다양하게 구성된 파란색 도형으로 폭포와 같

은 그림을 만들 수 있으며, 그 도형의 색을 순환하여 변화시킵니다. 이것이 잘되면, 이론적으론 전혀

아무것도 움직이지 않음에도 불구하고, 물이 떨어지는 효과를 얻을 수 있습니다.

애니메이션과 시간과의 관계는 중요합니다. 물론 모션이나 변화가 없이는 어떠한 애니메이션도 없

고 시간의 느낌도 없습니다. 아무것도 일어나지 않는 것처럼 보이는 빈방을 보고 있는 웹캠이나, 도시

의 지평선을 보고 있을 때가 가끔 있을 것입니다. 이것이 사진인지, 영상인지 알아 맞추는 것은 사실상

01 애니메이션의 기본 사상 l 5

불가능합니다. 약간 지나면 깜빡거림이나, 그림자가 움직이는 것과 같이 미묘한 변화를 포착할 것입니

다. 이 같은 약간의 깜빡거림은 시간의 존재를 알리고 있고, 계속 보다 보면 또 다른 것이 변할지 모릅

니다. 만약 일정 시간이 지난 후에도 변화를 볼 수 없으면 사진이라고 확신할 수 있겠습니다. 사진에는

시간이 없고, 아무것도 일어나지 않을 것을 알고 있기 때문입니다.

이것은 또 다른 특징을 가르쳐 줍니다. 애니메이션은 물건에 흥미를 계속 느끼게 해줍니다. 모나리

자는 훌륭한 작품이고, 고금을 통해 유명한 회화의 하나이지만, 보통 사람은 15분 정도 계속 보면 질

려 버려서, 봤다는 것을 자랑할 만한 다른 작품으로 눈을 돌려버릴 것입니다. 그러나 최신 헐리우드 대

작 영화 앞에서는 움직이지 않고 충분히 두 시간 반을 보냅니다. 그리고 화장실에 가야 하거나 팝콘을

사러 가야 할 경우도, 액션이 많이 없는, 스토리에 큰 지장이 없는 장면이 나오길 기다렸다가 다녀옵니

다. 이것이 애니메이션의 파워입니다.

프레임과 모션

여기에서 잠깐, 애니메이션의 마지막 정의로 되돌아 가봅시다.

“모션처럼 착각하게 보이도록 디자인하는 것, 만드는 것 (예를 들면 만화)”

흥미로운 것은, 저자들이 이 정의에 착각이라는 단어를 선택하고 있는데, 그것은 정확한 표현입니

다. 모든 모션이 들어가는 미디어에서는 모션의 착각만이 존재하고 있습니다. 우리는 여기서부터 프레

임의 개념으로 들어가겠습니다.

거의 모든 애니메이션 미디어에서는 프레임을 사용하고 있는데, 프레임이란 정지화면 여러 장을 고

속으로 표시하는 것으로써 모션이나 변화를 표현할 수 있습니다. 컴퓨터나 텔레비전, 영화의 화면으

로 보고 있는 모든 것은 프레임 기반으로 되어 있습니다. 초창기의 만화 애니메이션의 시대에는 그림

을 따로따로 셀로판종이에 그려 넣었으며, 이것이 셀이라 불리게 되었습니다. 또 초기의 영화에서도 여

러 장의 사진을 이용해서 같은 기술이 사용되고 있었습니다.

개념은 매우 단순합니다. 계속해서 조금씩 변화하는 연속된 이미지를 보면, 그 경계선이 부드러워지

고 하나가 되어 이미지가 움직이는 것 같이 보입니다. 그러나 왜 우리는 이것을 모션의 착각이라고 부

르는 것일까요? 영화에서 사람이 방을 지나가는 것은 모션이 아닐까요? 물론 이것은 인물의 단순한 이

미지이며 실물이 아닙니다. 그러나 그것을 실제의 모션이라고 보지 않을 수는 없습니다.

이쪽에 있던 것이 다음에는 저쪽으로 이동하고 있다고 말한 것을 기억해주세요. 그 물건이 공간을

이동했다고 말한 것을 기억하고 계십니까? 그렇습니다, 그것은 실제의 모션입니다. 그것은 공간을 매


끄럽게 이동하며, 공간을 몇 번씩 점프하는 것은 아닙니다. 그러나 모든 프레임 기반의 모션은 이와 같

이 움직이고 있는 것이 아닙니다. 프레임 기반의 모션은 한 지점에서 다른 지점으로 이동하는 것이 아

니라, 사라졌다가 다음 프레임의 다른 장소에 다시 등장합니다. 움직임이 빠르면 빠를수록 점프하는

거리는 길어집니다.

만약 여러분이 방의 왼쪽에 사람이 있는 사진을 보고 2~3초 후에, 똑같은 사람이 방의 오른쪽에 있

는 사진을 봤다면, 여러분은 2장의 사진을 본 것이지 애니메이션은 아니라고 말씀하실 것입니다. 방을

가로질러 가는 사람의 사진을 여러 장 보았다고 해도, 여러분은 아직 연속적인 사진이라고 얘기할 겁

니다(연속적인 정지화면의 예는 그림 1-1을 참고하세요). 그 사진을 더 빠르게 보이게 했다면 그것은

실제로 정지화면의 연속인 것은 틀림 없지만, 여러분에게는 더 이상 정지화면처럼 안 보이게 됩니다.

여러분의 뇌는 그것을 사람이 방을 횡단하고 있는 것으로 생각하게 될 것입니다. 조금 전의 2장의 사

진과 같이 실제의 모션은 아니지만, 어떤 시점부터 여러분은 모션의 착각을 받아 들이게 됩니다. 실제

이 시점에 관해서는 영화 회사에 의해서 자세한 조사와 연구가 이루어지고 있습니다.

그림 1-1 | 에드워드 마이 브릿지에 의한 연속 사진


학자들은 초당 24 프레임의 속도가 사람에게 여러 개의 프레임을 하나의 움직이는 영상으로써 순조

롭게 받아 들이는 속도인 것을 발견하였습니다. 24 프레임보다 많이 느리면 움직임이 어색해지고, 모션

의 착각이 깨지기 시작합니다. 24 프레임보다 너무 빨라도 인간의 눈은 그 차이를 구별할 수 없기 때문

에, 이론적으로는 초당 100 프레임의 속도로 올려도 현실감이 늘어나지는 않습니다(그러나 프로그래

밍에 의한 애니메이션에서는, 프레임레이트(frame rate)가 높은 것이 사용자 인터랙션에 빠르게 반응

할 수 있게 되어, 특히 고속으로 움직이는 오브젝트의 경우에는 매끄럽게 보이게 됩니다).

기록으로서의 프레임

프레임에 관한 전체적인 개념은 저장, 전송, 표시라고 하는 3가지가 있습니다. 방을 횡단하는 인물을

실제로 저장, 전송, 표시할 수는 없으나, 하나 또는 여러 개의 사진을 저장할 수는 있습니다. 또 그 사진

을 전달하고 표시할 수도 있습니다. 따라서 그 애니메이션은 보존한 영상을 가지고 있든지, 전송받아

그것을 표시할 수 있다면 대부분 언제라도 볼 수 있습니다.

그럼 프레임이란 무엇인지 좀 더 일반적인 정의를 살펴봅시다. 여기까지는 프레임을 정지 화면이나

그림으로 정의했습니다. 이것을 특정 시점에서 시스템의 기록이라 생각해 봅시다. 그 ‘시스템’이 여러

분의 귀여운 2살짜리 딸이라고 하면 기록은 바로 그 이미지입니다. 시스템이 만약 가상 오브젝트 모음

집인 경우, 기록은 어떠한 시점에서 그 오브젝트의 크기, 색, 위치 등이 됩니다. 즉 여러분이 만드는 무

비는 정지화면의 연속이 아니라 그 이미지에 대한 설명의 연속입니다. 컴퓨터는 이미지를 표시하는 대

신에 내용을 가져오고 그것으로부터 이미지를 생성하고 화면에 보여줍니다. 프레임을 프로그래밍 처

리하는 것으로 좀 더 먼저 진행할 수도 있습니다.

프로그래밍된 프레임

대부분 성능이 좋은 컴퓨터를 가지고 있어서, 프레임을 길게 작성할 필요가 없습니다. 프레임을 지우

고, 해당 내용을 첫 프레임에 코드로 기술할 수 있으며, 뒤에 계속 나올 프레임의 구축 방법에 관한 규

칙을 기술할 수도 있습니다. 그러면 컴퓨터는 더 이상 프레임의 내용으로부터 이미지를 만들기만 하지

는 않습니다. 컴퓨터는 우선 프레임의 내용을 생성하고, 그 내용 기반으로 이미지를 만들고 난 후 그

이미지를 화면에 표시합니다.

이 방법으로 진행하면 얼마나 용량을 절약할 수 있을까 생각해 보세요. 이미지는 많은 하드디스크

의 용량이나 대역폭을 필요로 합니다. 게다가 매초 24매의 이미지가 빠르게 추가됩니다. 한 프레임의

내용과 규칙에 요약하여 넣을 수 있는 경우에는, 파일 사이즈를 획기적으로 줄일 수 있습니다. 비록

오브젝트의 이동과 반응에 관한 복잡한 규칙이 있다 할지라도, 파일 사이즈가 이미지 하나의 사이즈


보다 작습니다. 실제, 스크립트에 의한 애니메이션을 실시한 사람이 가장 먼저 눈치채는 것 중 하나는,

파일 사이즈가 얼마나 작은가 하는 것입니다.

하지만 자연스럽게 단점도 있게 마련입니다. 시스템이 크고 규칙이 복잡해짐에 따라, 컴퓨터의 다음

프레임 내용에 계산량이 많아지게 되어 실행 시 렌더링이 느려집니다. 일정한 프레임레이트를 유지하

고 싶은 경우는, CPU에 처리가 가능한 일정 한도의 시간(ms, 밀리초)을 줍니다. 프레임의 계산이 느

린 경우에는 프레임레이트가 떨어지게 될 것입니다. 이것과는 달리 이미지 기반의 애니메이션에서는

프레임의 내용이나 복잡함은 그다지 관계 없이, 단지 다음 이미지를 시간대로 표시할 뿐입니다.

저는 예전에 가끔, 렌더링이 끝난 애니메이션을 이용했던 적이 있습니다. 저는 복잡한 ActionScript 애니

메이션으로 구성된 프레젠테이션을 만들었습니다. 그 애니메이션은 로컬에서 재생되게 되어 있었으므로,

파일 사이즈가 문제는 아니었지만 타이밍을 찾는 방법이 중요했고, 테스트를 해보지 않은 다른 컴퓨터에서

어떻게 하면 ActionScript를 사용한 영상을 매끄럽게 보여줄 수 있을지에 대한 좋은 아이디어가 없었습니

다. 그래서 저는 그 Flash 무비를 Director에서 불러오고, 다시 큰 용량의 Quicktime 무비 파일로 출력했

습니다. Quicktime 무비는 렌더링된 영상이기 때문에 얼마나 복잡한지는 걱정할 바가 아니었습니다. 그리

고 QuickTime 무비를 재생 가능한 컴퓨터에서는 제작한 무비가 매끄럽게 재생되는 것은 알고 있었습니다.

그 결과 프레젠테이션을 아무 문제 없이 진행할 수 있었습니다.

동적인 애니메이션과 정적인 애니메이션

코드를 사용한 애니메이션의 장점은 파일 사이즈만 있는 것이 아닙니다. 실제로 코드에 의한 애니메이

션은 동적으로 구성됩니다. 혹시 영화 「타이타닉」을 보셨는지요? 내용을 보면, 배가 점점 가라앉습니

다. 배는 영화관에서도, 비디오에서도, DVD에서도 점점 가라앉습니다. 정지나 일시정지 버튼을 누르

지 않는 한 배는 침몰하게 됩니다. 그것은 영화가 정지된 이미지들이 연속적으로 재생이 되기 때문입

니다. 그 연속하는 화면의 마지막 화면에서는 배는 바다에 완전히 가라앉게 됩니다.

「타이타닉」에서 Flash 웹사이트로 이야기를 옮깁시다. Flash가 최초로 등장한 1990년대 후반을 기

억하십니까? 당시는 누구나 웹사이트에는 Flash 인트로가 필요하다고 생각했습니다. 도형이 슬라이

드되며 커지거나 페이드아웃되었습니다. 간단한 사운드가 반복적으로 재생되었고, 멋진 단어들이 페

이드되거나 슬라이드되었습니다. 광선이나 그림자도 보여지고 있었을지 모릅니다. 당시에는 정말 대단

했었죠!


(옮긴이) 슬라이드(Slide)는 흔히 미끄러지는 효과를 의미하며, 페이드(Fade)는 부드럽게 나타나거나

(Fade In) 부드럽게 사라지는(Fade Out) 효과를 의미합니다.

저는 적어도 2~3개 정도, “진짜 대단하다”라고 생각했던 예술적인 작품을 기억하고 있습니다. 그림

1-2과 1-3의 Gabocorp 사이트와 Ray of Light 사이트의 인트로 무비는 굉장히 유명했습니다(유감스

럽게도 현재는 볼 수 없습니다). 그렇지만 생각해 보면, 그 무비를 끝까지 본 것은 2~3번뿐이었습니다.

그림 1-2 | 전설의 gabocorp.com 인트로 무비


무비는 1~2분 정도였지만, 실제 보았던 횟수는 2~3회였습니다. 인트로 무비가 시시해서 그랬었을까

요? 아닙니다. 2~3번 봐 버리면, 더 이상 볼 것이 없었기 때문입니다. 「타이타닉」과 마찬가지로 이러한

사이트의 인트로 무비는 언제 봐도 똑같았습니다. 저는 이것을 정적 애니메이션(이것은 저만의 표현입

니다)이라 부를 것입니다. 왜냐하면 이러한 애니메이션은 변화하는 것이 없을뿐더러, 아예 처음부터

끝까지의 모든 프레임이 미리 정의되어 있기 때문입니다.

코드에 의한 애니메이션은 반드시 동적일 필요가 없습니다. 코드를 사용하면 오브젝트를 원하는 위

치에 배치하고 화면 위에서 이동시킬 수 있지만, 무비를 재생해도 항상 같은 코드가 동작하므로, 오브

젝트의 움직임에는 변화가 없습니다. 이것만으로는 동적이라고 말할 수 없습니다.

그러나 코드를 사용해서 오브젝트를, 랜덤으로 위치를 지정해서 그곳에 위치시키거나 랜덤으로 방

향과 스피드를 결정해 오브젝트를 이동시킬 수 있습니다. 그러면 그 무비를 재생할 때마다 다른 화면

을 보여주게 됩니다.

또 무비가 시작되면 오늘 날짜와 현재 시각을 표시하고 그 시간 데이터를 사용하여 겨울의 아침, 여

름의 오후, 4월의 저녁 같은 무비를 만들 수 있습니다.

그림 1-3 | rayoflight.com의 인트로 무비


무비 내에 무엇인가가 있을 경우 실행 중 키보드나 마우스를 사용해 그것을 변화시킬 수 있다면 어

떨까요? 그러면 유저(user)는 화면의 오브젝트와 인터랙션을 할 수 있게 됩니다. 그렇다면 이제 정적이

라고 말할 수 없습니다. 「타이타닉」을 구하는 것조차 할 수 있습니다!

이 책의 메인 주제로 다루고 있지만, 동적 애니메이션의 가장 재미있는 측면은 수학적, 물리학적인

법칙을 무비 내의 오브젝트에 실제로 응용하는 것이라 할 수 있습니다. 오브젝트를 랜덤 방향으로 이

동시키는 것뿐만 아니라 거기에 중력을 더해주면, 오브젝트는 이동하면서 아래 방향으로 낙하하게 됩

니다. ‘지면’에 닿으면 오브젝트는 튀어 오르지만, 처음의 위치까지는 튀어 오르지 않습니다. 그리고 결

국에는 서서히 움직이지 못하게 되어 정지합니다. 여기에 유저가 오브젝트를 마우스로 ‘잡고’ 이동하

거나, 키보드를 사용해 이동할 수 있는 유저 인터랙션을 추가할 수 있습니다. 그러면 유저는 오브젝트

를 잡아서 던질 때, 물리적으로 존재하는 것을 보고 실제로 조작하고 있다는 느낌을 가지게 됩니다.

이러한 종류의 애니메이션에서 유저는 프레임이 재생되는 것을 가만히 보고 있지는 않습니다. 유저

가 여러분이 만든 환경에 들어왔습니다. 유저는 과연 얼마나 오랫동안 머물러 있을까요? 유저는 자신

이 흥미를 느끼는 동안 계속 있을 것입니다. 그 환경에 반응할 수 있는 것이 많으면 많을수록, 유저는

더욱 길게 흥미를 가질 것입니다. 환경을 매우 재미있게 구성할 수 있으면, 유저는 인트로 무비의 재생

시간보다 더욱 더 오랫동안 있을 것입니다(유감스럽게도, 아마 모나리자 앞에 서 있는 시간보다 오래

있을 것입니다). 저는 많은 사람들로부터 www.bit-101.com 사이트가 재미있어서, 오전이나 오후에도

와서 재미있게 즐겼다는 메일을 받았습니다. 그런 사람들은 사이트에 오래 있을 뿐만 아니라, 몇 번이

나 다시 방문하게 됩니다.

요약

지금까지 모두 읽으셨습니까? 이 장에서는 몇 가지 애니메이션의 기본 사항을 배웠습니다. 그렇지만

이것을 어떻게 사용할지는 여러분에게 달렸습니다.

다음 장부터는 몇 가지 도구들을 각각 어떻게 사용하는지 빠른 레슨을 실시할 것입니다. 이러한 도

구들로 무엇을 만들지는 여러분의 결정에 달렸지만, 이 책에서 소개하고 있는 내용의 상당수는 게임

제작의 사용에 가장 근접해 있습니다. 게임은 본래 플레이어가 완수해야 할 목적을 가진 인터랙티브

한 애니메이션입니다. 그러나 저는 이 책이 단지 게임 제작의 참고서가 되는 것은 피하고 싶습니다. 저

는 이 책에서 사용한 거의 모든 기술을 3D 메뉴나 괜찮아 보이는 내비게이션 시스템, 그리고 광고나

교육용 애플리케이션까지, 게임 이외의 일에서도 사용하고 있습니다.


여기서 주의사항을 알려드립니다. 웹디자인 책을 읽으면 애니메이션의 남용은 금물이라는 내용이

어느 책에도 다 있습니다. 저는 이 주장에 반대하는 것은 아니지만 애니메이션을 사용해도 문제가 없

다고 한다면, 저는 지금부터 여러분이 필요로 하는 많은 지식을 알려드릴 것입니다.

13

첫 번째 장은 애니메이션에 대해 간단하게 개념적으로 설명했지만, 이번에는 액션스크립트, 특히

ActionScript 3.0(AS 3)을 사용한 애니메이션의 제작에 필요한 기법의 개요를 설명합니다. 이번 장에

서는 애니메이션이나 무비클립, 스프라이트(Sprite), 클래스(Class), 유저 인터랙션(사용자 상호작용)

등에서 사용하는 루프(loops)의 요점을 설명합니다. 여러분은 이 책에서 다루는 액션스크립트의 기법

을 이해하는 데 있어서, 필요한 정보의 대부분을 이번 장에서 얻을 수 있습니다.

기본적인 애니메이션

우선 1장에서 살펴본 내용을 복습해 봅시다.

애니메이션은 프레임으로 되어 있고, 각각의 프레임을 조금씩 다르게 구성하여, 모션의 착각을 ▒

나타낼 수 있습니다.

프레임으로만 구성된 애니메이션이나 트윈 애니메이션은, 각 프레임에서 사용하는 이미지나 ▒

이미지의 설명이 포함되어 있습니다.

다이내믹한 애니메이션에는 이미지와 각 프레임의 스크립트를 변경하기 위한 규칙의 초기화 ▒

내용이 포함되어 있습니다.

02액션스크립트 3.0 애니메이션 기본

■ 기본적인 애니메이션 ■ 스프라이트 ■ 클래스와 객체지향 프로그래밍 ■ 유저 인터랙션


이 책에서는 주로 다이내믹한 애니메이션에 초점을 맞혀 이미지의 액션스크립트를 변경하는 것으

로, 리얼한 움직임을 표시하는 다양한 기법을 보여줍니다. 이번 장에서는 액션스크립트의 작성 방법이

나 각 프레임에서 규칙의 적용방법, 그리고 모든 것을 함께 배치하는 방법을 배웁니다. 그렇게 하면서

여러분은 많은 예제를 작성해 갈 것입니다.

액션스크립트 버전에 따른 정리

이 책의 오리지날 버전(ActionScript Animation, friendsof ED, 2006)은 Flash 8의 릴리즈 후 곧바로 출간

되었습니다. 그 오리지날 버전에서는 기본적인 액션스크립트 2.0의 작성을 염두에 두고, 어려운 OOP

방법을 피해 작성되어 있습니다. 코드는 대부분 타임라인에 직접 만들었으므로 액션스크립트 1.0과

2.0이 뒤죽박죽이 되어 섞여 있었습니다.

이 책은 Flash 9와 AS 3 전용으로 제작되었습니다. 집필 시점에서 Flash 9로 AS 3 무비를 작성할 수

있는 것은 적어도 다음 3가지 방법입니다.

Flash CS3 IDE ▒

FIexBuilder 2 ▒

Flex/AS 3 커맨드 라인 컴파일러(무료)와 Flex 2 So�ware Development Kit ▒ (SDK)

(옮긴이) 이 책이 씌어진 때가 2007년 말이므로 원서에서는 Flash CS3와 Flex2, Flex2 SDK로 다루어졌으

나 현재 Flash CS5, FlashBuilder(Flex 4), Flex 4 SDK에서도 이 장의 기초사항을 다루기 위해 달라진 점

은 크게 없으며, 이 부분은 앞으로도 이변이 없는 한 계속될 것으로 보입니다.

Flash CS3 IDE에서는 타임라인에 AS 3을 작성할 수 있지만, 다른 2가지 방법에서는 최소한 하나의

AS 3 클래스 파일을 사용하지 않으면 안 됩니다. 따라서 이 책에서는 일관성을 유지하기 위해, 타임라

인은 사용하지 않고, 모든 예제는 AS 3 클래스에서 작성하기로 하겠습니다.

이 장에서는 이미 말씀 드린 개발환경(Flash CS3, FlexBuilder 2, 무료 SDK)마다 AS 3 프로젝트의

설정 방법을 보여드립니다. 이 책에서는 적용 가능한 클래스의 코드만을 소개하고 있으므로, 코드는

3가지 개발 환경 중 어디서나 동작합니다.

간단한 개념을 설명할 때, 경우에 따라서는 간단한 코드만으로 아이디어를 보여드리기도 합니다. 명

시하고 있지 않는 경우에서도, 그 짧은 코드는 이 장에서 보여드리는 기본 클래스 안에 삽입하는 것을

02 액션스크립트 3.0 애니메이션 기본 l 15

전제로 하고 있습니다.

이 책에서 다루고 있는 클래스의 예제는 매우 중요하며, 어떤 경우에는 바로 자세하게 설명하고 있

습니다. 그러나 이 책은 OOP를 깊이 있게 다루는 참고서가 아니기 때문에 실제로 이 책의 클래스 구

성요소들은 여러분이 공부가 될 만한 예제를 작성하고 동작시켜 보는 것을 목적으로 한 것이어서 최

소의 코드만으로 작성되어 있습니다.

클래스와 OOP

이 책을 읽고 있는 분 중에는 클래스가 무엇이며 ‘객체지향’은 또 무엇을 의미하는지 모르는 분도 있

을 것입니다. 또 오랫동안 ActionScript(또는 그 외의 다른 언어) 클래스를 사용해 온 분도 있을 것입

니다. 따라서 여기서 기본 사항을 다룰 것이기 때문에 잘 읽어 보시길 바라며, AS 2의 OOP(Object

Oriented Programming)에 정통한 분도 AS 2와 비교해 약간 바뀐 부분도 있으므로, 이 절(section)을

대충은 훑어보시는 것을 추천합니다.

클래스에 익숙하지 않다고 생각하는 분이 있다면 그것은 오산입니다. 여러분이 Flash로 어떤 코드

라도 작성했던 적이 있다면, 그것은 클래스를 사용하고 있었던 것입니다. 클래스는 단지 오브젝트의

형태입니다. MovieClip은 예상하겠지만 MovieClip에 대한 클래스입니다. TextField도 MovieClip도,

버튼도, 문자도, 숫자도 모두 클래스를 가지고 있습니다.

기본적으로 클래스는 속성(데이터, 정보)과 행동(액션, 실행할 수 있는 것)이라는 것을 가지고 있습

니다. 속성은 그 클래스에 관련된 정보를 저장하는 변수를 의미하고, 행동은 함수를 말합니다. 통상

우리는 함수를 메서드라 부릅니다.

클래스

플래시를 사용해 본 분이라면, 심볼은 라이브러리에서 만들고, 스테이지에 그 심볼의 인스턴스를 여

러 개 생성할 수 있다는 것을 기억할 것입니다. 이 심볼과 인스턴스의 관계와 같이, 클래스는 템플릿이

고, 오브젝트(인스턴스라고도 합니다)는 어느 특정 클래스를 구체적으로 나타낸 것입니다. 간단한 클

래스는 다음과 같이 작성할 수 있습니다.

package {

public class MyClass {

public var myProperty:Number = 100;


public function myMethod() {

trace("여기예요");

}

}

}

그럼, 코드를 대충 보고 시작합시다. 우선 AS 2 클래스를 사용하는 베테랑 유저들도 처음 보게 되

는 package가 있습니다. 패키지는 간단히 말하면 관련된 클래스를 정리하고 그룹화하는 방법입니다.

여기서는 패키지를 약간만 설명하겠지만, 이 책 대부분의 예제에서는 패키지는 사용하고 있지 않습니

다. 그렇지만 이 예제에서 보는 바와 같이 package 키워드와 중괄호를 사용할 필요가 있습니다. 이것

을 디폴트(기본) 패키지라고 합니다.

다음은 클래스의 정의입니다. 클래스가 이전과 다른 점은 이제 클래스는 접근 제한자(modi�er)를

붙일 수 있다는 것입니다. 접근 제한자는 다른 코드에서 해당 코드에 접근할 수 있는 권한을 나타냅

니다. 예로 public은 클래스의 외부에 있는 어느 코드로부터도 접근할 수 있는 것을 의미하고 있습니

다. 이 책의 예제에서의 모든 클래스는 public입니다. AS 3에 대해 좀 더 배우고 싶다고 생각한다면,

public이 아닌 클래스나 하나의 클래스 내에서 여러 개의 클래스를 정의하는 방법에 대해서도 알아보

게 될 것입니다. 그렇지만 여기서는 다루지 않을 것입니다.

클래스에 MyClass라 이름을 붙입니다. 그리고 그 클래스를 중괄호로 둘러쌉니다.

이 클래스에는 myProperty라는 이름의 변수와 myMethod라는 이름의 함수가 있습니다. 이것은

이 클래스로 생성하는 인스턴스들의 속성과 메서드가 됩니다. 여기에도 속성과 메서드에 public이 붙

어 있습니다. 이것은 이 오브젝트의 밖에 있는 코드로부터 그 속성에 접근할 수 있거나 그 메서드를

호출할 수 있다는 의미입니다. 클래스 내에서만 사용할 수 있는 속성이나 메서드를 작성하는 경우는,

private을 사용합니다. 그러면 그 클래스의 밖에서 접근할 때의 혼란을 피할 수 있습니다. AS 3에서는

또 internal과 protected라는 수식어도 지정할 수 있습니다. 클래스에 internal 속성을 지정하면, 같은

패키지 내에 있는 다른 클래스도 해당 클래스에 접근할 수 있습니다. protected는 그 클래스를 확장한

클래스로부터 접근할 수 있는 것을 나타내고 있습니다(AS 2의 private과 많이 비슷합니다).

잘 이해가 되나요? 여기서는 복잡한 부분을 대부분 생략하고 있고, 여기서 말한 것도 이 책에서는

그다지 사용하지 않습니다. 이 책 대부분의 예제 클래스는 최소한으로 구성되어 있으므로, 그것을 실

제로 동작시켜 보는 것만으로 쉽게 이해될 것입니다.

클래스는 텍스트 파일로 작성하고, MyClass.as와 같이, 클래스와 같은 이름으로 .as라고 하는 확

장자(extension)를 붙여 저장합니다. 클래스 파일은 Flash CS3 IDE에 있는 ActionScript 에디터나


FlexBuilder 2, 여러분이 좋아하는 코드 에디터 등등 어떠한 텍스트 에디터에서도 만들 수 있습니다.

Flash CS3 IDE를 사용할 경우는 FLA 파일도 작성할 수 있습니다. 디폴트(기본) 패키지를 사용하

는 경우, 작성하는 클래스 파일은 FLA 파일과 같은 디렉터리 안에 두어야 합니다. 패키지 구조를 사용

하는 경우 그 구조의 루트 디렉터리는 FLA 파일과 같은 디렉터리에 두어야 합니다. 또 클래스 파일을

다른 장소에 두고, 그 디렉터리를 클래스 패스에 추가할 수도 있습니다. 클래스 패스는 단순히 디렉터

리의 리스트일 뿐입니다. 코드 내에서 클래스명을 지정하면 Flash는 그 이름의 클래스를 지정된 디렉

터리의 리스트 중에서 검색합니다. 이 책의 예제에서는 일관적으로 디폴트 패키지를 사용하므로 작성

한 클래스는 FLA 파일과 같은 디렉터리에 저장하여야 합니다.

패키지

패키지는 주로 클래스를 정리해 조직화하기 위한 것입니다. 패키지는 위치한 디렉터리에 의해 구조화

되어 디렉터리 계층을 만들 수도 있습니다. 패키지의 이름은 실제 폴더의 이름으로, 이름은 점(.)으로

나뉩니다. 예를 들어, 계층화한 폴더 com/friendsofed/makingthingsmove/ 안에 Utils라는 이름의

클래스를 둡니다(패키지의 일반적인 정의 방법으로 도메인명을 사용합니다. 이것에 의해서 패키지가

유일한 것이 됩니다). 클래스는 com.friendsofed.makingthingsmove.Utils 로 참조할 수 있습니다.

AS 2에서는 다음과 같이 완전한 패키지명을 사용해 클래스를 선언했습니다.

class com.friendsofed.makingthingsmove.Utils {

}

AS 3에서는 다음과 같이 패키지 부분은 패키지 선언부에 적어주고, 클래스 부분은 클래스 선언부

에 들어가도록 적어줍니다.

package com.friendsofed.makingthingsmove {

public class Utils {

}

}

임포트

만약 여러분이 유틸리티 함수를 사용할 때마다 com.friendsofed.makingthingsmove.Utils와 같이

입력하는 것은 매우 귀찮은 작업입니다. 그럴 경우 import를 사용하면 작업이 조금 더 편해집니다. 예

를 들면 클래스의 위쪽, 패키지 바로 아래에 import com.friendsofed.makingthingsmove.Utils를

적습니다.


여러분은 이것을 1번 적을 뿐입니다. 한번 선언하면 그 파일 내에는 Utils라고 적는 것만으로 그

클래스를 참조할 수 있게 됩니다. AS 2의 import는 옵션이었으므로 매우 편리하게 사용할 수 있었

지만, AS 3에서는 반드시 선언해야 합니다. 실제로 AS 3에서는 매번 완전 경로명을 적어야 하는 경

우에서도, 코드를 컴파일하지 않더라도 사용하는 클래스는 다른 패키지로부터 임포트해야 합니다.

FlexBuilder 2에서는 import를 입력하면 클래스의 패키지까지 자동으로 입력을 도와주는 기능을 갖

고 있습니다. 어쨌든 import를 잊지 않고 하는 것은 여러분의 손에 달려 있습니다. import를 선언해

줌으로써 무비를 작성할 때 컴파일러가 그 클래스에 접근할 수 있게 됩니다.

생성자

클래스는 생성자를 설정할 수 있습니다. 생성자는 클래스와 같은 이름의 메서드로서, 새로운 인스턴

스 가 작성될 때 자동으로 호출됩니다. 생성자에는 다음과 같이 인수를 넘겨줄 수 있습니다.

우선 클래스를 작성합니다.

package {

public class MyClass {

public function MyClass(arg:String) {

trace( "작성되었습니다");

trace( "받은 인수는,"+arg+"입니다");

}

}

}

Flash CS3 IDE에서는 타임라인에서 아래와 같이 인스턴스를 생성하는 코드를 적어줍니다.

var myInstance:MyClass = new MyClass("안녕하세요");

그러면 “작성되었습니다”와 “받은 인수는, 안녕하세요입니다”가 Trace 창에 출력됩니다. Flex

Builder 2와 무료 SDK의 경우는, 이후 연습을 할 예정이므로 여기에서는 기억만 해 주세요.

상속

클래스는 다른 클래스를 상속, 확장(extends 키워드)을 할 수 있습니다. 이것은 다른 클래스가 가지고

있는 속성이나 메서드를 가질 수 있다는 것을 의미합니다(private 속성이나 메서드는 제외). 하위클래

스(클래스를 상속하고 있는 클래스)에서는 별도의 속성이나 메서드를 추가하거나 상위클래스(확장

에 사용된 클래스)로부터 상속한 속성이나 메서드를 변경할 수 있습니다. 그러기 위해서는 다음과 같

이 두 개의 다른 클래스를 작성합니다(파일은 두 개의 다른 파일입니다).


package {

public class MyBaseClass {

public function sayHello():void

{

trace("MyBaseClass의 안녕하세요");

}

}

}

package {

public class MySubClass extends MyBaseClass {

public function sayGoodbye():void {

trace("MySubClass의 안녕히 가세요");

}

}

}

각 클래스는 그 클래스명과 같은 이름의 .as 확장자(extension)를 적어줘야 하는 것을 기억할 것입니

다. 따라서 작성하는 파일의 이름은 MyBaseClass.as와 MySubClass.as입니다. Flash CS3 IDE를 사

용하는 경우에는 신규 FLA 파일을 작성해, 2개의 클래스와 같은 디렉터리 내에 보존합니다. 이제 타

임라인에 2개의 인스턴스를 작성한 후, 실행하면 어떻게 되는지 확인해 보세요.

var base:MyBaseClass = new MyBaseClass();

base.sayHello();

var sub:MySubClass = new MySubClass();

sub.sayHello();

sub.sayGoodbye();

첫 번째 인스턴스는 별다른 게 없지만, 두 번째 인스턴스에서는 MySubClass로 sayHello를 정의하

고 있지 않음에도 불구하고, sayHello 메서드가 동작하고 있습니다. 이 클래스는 MyBaseClass로부터

sayHello를 상속하고 있습니다. 또, 기본 클래스에서는 정의하고 있지 않는 새로운 sayGoodbye 메서

드가 동작하고 있는 것도 유념하기 바랍니다.

다음에는 하위클래스에서 기본 클래스를 상속하여 정의되어 있던 메서드를 변경하는 경우를 살펴

보겠습니다. AS 2에서는 단지 그 메서드를 재정의할 뿐이었지만, AS 3에서는 새로운 정의에 override

키워드를 사용해 명시적으로 오버라이드할 필요가 있습니다.

(옮긴이) 다운로드한 소스에는 trace가 Logger.info() 로 되어 있습니다. 소스에서 trace로 바꿔서 테스트하

면 됩니다.


package {

public class MySubClass extends MyBaseClass {

override public function sayHello():void {

trace("MySubClass의 안녕하세요");

}

public function sayGoodbye():void {

trace("MySubClass의 안녕히 가세요")

}

}

}

sayHello는 MySubClass로부터 불릴 때, 원래의 메서드가 오버라이드(override)되고 있기 때문에 완

전히 새로운 메시지를 출력하고 있습니다. 물론 private을 지정한 메서드는 자신의 클래스 밖에서 접

근할 수 없기 때문에 오버라이드할 수 없습니다.

MovieClip/Sprite 하위클래스

여기까지 클래스를 작성하고 그 클래스를 확장하는 다른 클래스를 작성하신 분도 있을 것이고, 그렇

지 않은 분도 있을 것입니다. 그렇지만 타임라인에 코드를 작성하지 않고 AS 3을 다루려 하는 경우에

는, MovieClip 클래스나 Sprite 클래스를 확장하게 됩니다. MovieClip 클래스는 무비클립 객체를 구

성하는 ActionScript 속성과 메서드의 모든 것을 사용하기 위한 템플릿입니다. MovieClip 클래스에

는 클립의 x나 y의 위치, 스케일 등 여러분에게 매우 익숙한 속성들이 포함되어 있으며 대부분이 AS 3

에서는 약간 변경되었습니다. AS 3에서는 또 Sprite 클래스가 추가되었습니다. Sprite 클래스는 대부

분의 경우, 타임라인을 가지지 않는 MovieClip이라 볼 수 있습니다. 코드에서 오브젝트를 조작할 때

는 대체로 타임라인이나 프레임은 다루지 않기 때문에 MovieClip 클래스보다 가벼운 Sprite 클래스

의 사용은 의미가 있습니다.

MovieClip이나 Sprite를 확장하는 클래스를 작성하면 그 오브젝트의 형태에 갖춰진 모든 속성

과 메서드는 자동적으로 확장됩니다. 그리고 작성하는 대상에게만 적용하는 특수한 행동이나 속성

을 추가할 수 있습니다. 예를 들어 게임에 사용되는 우주선을 만들 때 그 우주선에 그래픽을 추가하

거나 화면의 원하는 위치에 배치하고, 이동 또는 회전을 시키거나 애니메이션으로 사용하는 경우,

enterFrame 이벤트를 감시하거나 유저의 조작을 감지하기 위해 키보드나 마우스의 이벤트도 감시하

려 할 것입니다. 이러한 것은 모두 MovieClip이나 Sprite로 작업할 수 있기 때문에 클래스를 상속하는

이유는 여기에 있습니다. 상속하면 speed나 fuel, damage라는 사용자정의 속성이나 takeo�, crash,

shoot, selfDestruct라는 사용자정의 행동을 추가할 수 있습니다. 예를 들어, 이 클래스는 다음과 같

습니다.


package {

import flash.display.Sprite;

public class SpaceShip extends Sprite {

private var speed:Number = 0;

private var damage:Number = 0;

private var fuel:Number = 1000;

public function takeOff():void {

// . . .

}

public function crash():void {

// . . .

}

public function shoot():void {

// . . .

}

public function selfDestruct():void {

// . . .

}

}

}

처음에는 �ash.display 패키지 내에 있는 Sprite 클래스를 임포트해야 하는 것에 주의하기 바랍니

다. Sprite 클래스 대신에 MovieClip 클래스를 확장하는 경우에서도, 같은 패키지의 f lash.display.

MovieClip에서 MovieClip 클래스를 상속받을 필요가 있습니다.

도큐먼트 클래스 작성

여기까지 여러분은 실제로 코드 작성을 시작하기 위한 클래스에 대해 많은 것을 배웠습니다. AS 3

에서 작성한 SWF를 제작할 경우에는 클래스가 중요하다고 했습니다. 이것은 AS 3에 도큐먼트 클

래스라는 새로운 개념이 도입되었기 때문에 그렇습니다. 기본적으로 도큐먼트 클래스는 Sprite나

MovieClip을 확장하는 클래스에서 SWF의 메인 클래스로 사용됩니다. SWF가 로드되면 그 클래스

의 생성자가 불려집니다. 생성자는 어떤 것을 하기 위한 시작 포인트로써 무비클립을 추가하거나 그

래픽을 작성하거나 에셋(asset)을 로드하는 등 무비 내에서 실행하고 싶은 어떤 것이라도 넣을 수 있습

니다.

Flash CS3 IDE를 사용해 코드를 작성하는 경우, 도큐먼트 클래스의 사용은 옵션입니다. 코드는 언

제라도 타임라인에 작성할 수 있습니다. 그러나 FlexBuilder 2나 무료 SDK를 사용하는 경우, 코드를


작성하는 타임라인은 없습니다. 코드를 SWF에 추가하는 유일한 방법은 클래스 안에 코드를 적는 것

입니다. FlexBuilder 2와 무료 SDK에서는 1개의 도큐먼트 클래스를 중심으로 모든 것이 움직이게 됩

니다. 이 클래스 없이는 SWF도 만들어지지 않습니다.

아래는 이전에 다루었던 도큐먼트 클래스의 기본 구조입니다.

package {


public class Example extends Sprite {

public function Example() {

init();

}

private function init():void {

//여기에 코드를 작성합니다

}

}

}

여기까지는 섹션별로 따라 해온 분은 새로운 내용이었겠지만, 이제부터는 점점 알기 쉬워질 것입니

다. 여기에서는 디폴트 패키지를 사용하고, Sprite 클래스의 임포트와 확장을 실시한 후 생성자에서

init 메서드를 호출하고 있습니다. 코드를 생성자 안에 작성하는 것도 확실히 좋은 방법이지만, 일반적

으로 많은 코드를 생성자 내에 작성하지 않는 것이 좋은 방법이라 할 수 있으므로 여기서는 다른 메서

드로 떼어내었습니다. 이 책에서 테스트를 위한 간단한 코드를 보여 줄 경우에는, 이 클래스의 init 메

서드 안에 그 코드를 삽입하기 바랍니다. 무비를 컴파일하고 실행시키면 생성자가 init을 호출하고 삽

입한 코드가 실행될 것입니다.

이제 알아야 하는 것은 이 도큐먼트 클래스를 제작할 SWF 파일에 어떻게 연결시키느냐 하는 것입

니다.

액션스크립트 3.0 애플리케이션의 설정

이미 언급한 것이지만, AS 3의 SWF를 제작하려면 주로 다음 3가지 방법이 있습니다.

Flash CS3 IDE ▒

FlexBuilder 2 ▒

무료 Flex/AS 3 커맨드 라인 컴파일러와 Flex 2 SDK ▒


어느 방법을 사용하더라도 도큐먼트 클래스로 시작해서 SWF를 제작한 후 종료하지만, 그 설정 방

법과 사용법은 툴마다 많이 다릅니다. 여기서는 가장 간단한 방법(Flash CS3 IDE)으로부터 복잡한

방법(무료 컴파일러와 SDK)까지 하나씩 살펴보겠습니다. 도큐먼트 클래스에는 다음의 클래스를 사

용합니다. 이 클래스는 스테이지에 붉은 원을 그리고 표시하는 단순한 클래스입니다.

package {


public class Test extends Sprite {

public function Test() {

init();

}


graphics.beginFill(0xff0000);

graphics.drawEllipse(100, 100, 100, 100);

graphics.endFill();

}

}

}

이것은 예전에 보여드린 클래스의 기본구조와 완전히 같으며 init 메서드 내에 3개의 드로잉 메서드

를 사용하고 있을 뿐입니다.

Flash CS3 IDE 사용

Flash CS3 IDE는 도큐먼트 클래스를 실행할 수 있는 가장 간단한 도구입니다. 이미 언급한 클래스를

Test.as라는 이름으로 원하는 폴더에 저장합니다. 그리고 Flash CS3로 새로운 FLA 파일을 작성하고,

Test.as 파일과 같은 폴더에 저장합니다. FLA 파일의 디폴트 퍼블리시 설정으로 Flash Player 9과 AS

3가 선택되어 있는 것을 확인합니다. 속성창을 열고 도큐먼트 클래스라고 하는 새로운 텍스트 박스

(그림 2-1 참조)에 클래스명을 입력합니다. 여기에서는 Test로 입력합니다.

그림 2-1 | 도큐먼트 클래스 설정


입력하는 것은 클래스명이며 파일명이 아니기 때문에 as 확장자(extension)를 붙일 필요는 없습니

다. 그러나 클래스가 패키지 내에 있는 경우는 클래스의 완전한 경로를 입력합니다. 예를 들어 com.

friendsofed.Chapter2.Test와 같이 입력합니다.

이제는 구버전 플래시에서 작업했던 것과 같이 무비를 테스트하거나 퍼블리싱할 수 있습니다. 그러

면 Flash는 그 클래스를 찾아 SWF 파일로 컴파일합니다. SWF가 실행되면 생성자의 init 메서드가 실

행되어 붉은 원이 표시됩니다.

도큐먼트 클래스를 사용하면 FLA 파일의 메인 타임라인에 코드를 입력하는 것을 피할 수 있습니

다. 타임라인의 코드는 컴파일러가 추가하는 코드와 충돌을 일으키는 원인이 되므로 도큐먼트 클래

스를 사용함으로써 컴파일이나 실행으로부터 무비를 지킬 수 있습니다.

Flex Builder 2 사용

Flash CS3 IDE는 AS 3 애플리케이션을 제작하는 가장 간단한 방법이라고 했지만 많은 Flash 디자이

너나 개발자에게 가장 괜찮아 보이는 이유는 아마 오랫동안 많이 사용해 온 툴이기 때문일 것입니다.

그러나 사실 툴 자체에 익숙하면 FlexBuilder 2를 사용하여 AS 3 애플리케이션을 작성하는 것이 아

마 가장 간단하고 쉬울 것입니다. 여러 파일(.as 파일과 �a 파일)을 작성할 필요도, 파일을 저장하는 장

소를 확인할 필요도 없습니다. 그냥 클래스를 만들고 컴파일하면 Flex Builder가 알아서 해줍니다.

Flex Builder 2의 인스톨과 설정, 실행은 새로운 ActionScript 프로젝트를 만드는 것으로 시작합니

다. [New ActionScript Project] 창에서 프로젝트 이름을 입력하고 [Finish]를 클릭합니다. 많이 하다

보면 창에서 프로젝트를 사용자 설정하는 많은 방법을 찾을 수도 있지만, 지금 필요한 것은 도큐먼트

클래스의 이름이 되는 프로젝트의 이름뿐입니다(‘도큐먼트 클래스’라는 말 자체는 Flex Builder2에는

표시되지 않습니다. 여기에서는 3개의 개발 환경에 공통으로 사용하고 있을 뿐입니다).

Flex Builder 2는 프로젝트의 디렉터리를(몇 개의 디렉터리와 하위디렉터리와 함께) 만들고, 여러분

을 대신해 클래스 기본구조를 만들어 줍니다. 단지 init 메서드를 추가하고, 생성자에서 init 메서드를

호출하면 됩니다. init 메서드에는 원하는 코드를 추가하면 됩니다.

그리고 툴바의 [Run] 버튼을 클릭합니다. 녹색 원 안에 화살표가 있는 버튼입니다. [Run] 버튼을 클

릭하면 작성한 클래스가 SWF로 컴파일되고 SWF를 감싸는 HTML 파일이 작성되며, 기본 브라우저

가 열리게 되고 화면에 결과가 표시됩니다. 굉장히 간단하죠?

SWF에 프레임레이트나 사이즈, 배경색 등 다양한 파라미터를 지정하는 경우는, [Navigator] 뷰

에서 프로젝트 이름을 오른쪽 클릭하고 [Properties]를 선택합니다. [Properties] 창이 표시된 이후


[ActionScript Compiler]를 선택합니다. 이 창에서 [Additional Compiler Arguments]라는 레이블

필드에 다음 인수를 입력하면 퍼블리싱하는 SWF의 속성을 변경할 수 있습니다.

default-size ▒ width height

default-frame-rate ▒ fps

default-background-color ▒ 0xRRGGBB

그림 2-2와 같이 인수는 1행으로 입력하고, 원하는 값을 입력하세요.

그림 2-2 | 컴파일러 아규먼트 추가

[Additional Compiler Arguments]로 추가할 수 있는 커맨드 라인의 인수는 이 밖에도 많이 있습

니다. 그것들은 모두 Flex Builder 2와 AS 3 문서에서 읽을 수 있습니다. 그러나 여기서 알아본 것들은

여러분이 자주 사용할 것이라 생각되는 인수들입니다.

또 이것들의 값은 도큐먼트 클래스 자체의 메타데이터를 사용해 설정할 수도 있습니다. 이 방법에

대해서는 다음 절에서 취급합니다.


커멘드 라인 컴파일러 사용

이전에 말씀 드린 부분을 되돌릴 수는 없겠지만, 사실은 이 방법은 다른 두 가지 방법보다 훨씬 간단

합니다. 이 방법은 확실하게 자신이 AS 3를 컴파일하는 방법입니다. 귀찮기는 하겠지만, 긍정적인 면

을 보면 이 방법은 전혀 비용이 들지 않는 장점이 있습니다. 많은 커맨드 라인 툴과 같이 이 방법도 다

른 애플리케이션으로부터 호출할 수 있기 때문에, 여러분이 좋아하는 에디터에서 단축버튼을 사용하

여 Apache Ant 같은 툴을 통해 빌드 처리의 일부와 같이 실행할 수 있습니다. 이 절에서는 컴파일러

를 사용해 컴파일할 수 있는 최소한의 방법을 말하겠습니다. 그 사용법을 알 수 있으면 다른 개발 툴

과 컴파일러를 함께 사용하는 방법도 알 수 있게 됩니다. 이 책의 집필 시점에 www.�ashdevelop.org

에서 얻을 수 있는 무료 액션스크립트 에디터인 FlashDevelop은 AS 3의 개발이 지원되기 시작했습

니다. 이 책이 서점에 보일 무렵에는 의심할 여지가 없이 다른 툴들도 그렇게 되고 있을 것입니다. 우선

첫 번째로 http://opensource.adobe.com/wiki/display/�exsdk/Flex+SDK 에서 무료 Flex 2 SDK를

다운로드합니다. 파일은 압축되어 있으므로 컴퓨터의 임의의 위치에 압축을 풉니다. 간단하게 접근

할 수 있도록 Windows 사용자라면 C:\�ex_2_sdk에, Macintosh 사용자라면 /Applications/�ex_2_

sdk라는 장소에 저장합니다.

컴파일러에는 3가지 종류가 있습니다. 첫 번째는 Windows로 실행할 수 있는 컴파일러의 mxmlc.

exe이고, 두 번째는 Macintosh 애플리케이션인 mxmlc입니다. 양쪽 모두 인스톨한 디렉터리의

bin 디렉터리에 안에 있습니다. 세 번째는 Java 기반 컴파일러인 mxmlc.jar로서 Macintosh에서도

Windows에서도 잘 동작합니다. 이 Java 컴파일러는 bin 디렉터리와 같은 계층인 lib 디렉터리 안에

있습니다. Java를 실행 중이라면 이 Java 버전을 시험해 볼 수도 있지만, 호출하는 방법과 파일경로의

처리가 약간 차이가 있으므로, 이 책에서는 설명을 간단히 하기 위해 bin 폴더의 애플리케이션을 사

용하기로 하겠습니다. 이 쪽이 조금 더 간단히 다룰 수 있을 것입니다.

칭찬하고 싶은 것은 Adobe가 완전히 똑같이 동작하는 Macintosh 버전과 Windows 버전 제작이라는 매

우 훌륭한 일을 해낸 것입니다. Windows 버전에는 .exe라는 파일 확장자(extension)가 붙어 있는 것 말

고는, 이 두 버전의 차이가 거의 없습니다. 그 덕분에 저의 책 집필 작업은 많이 편해졌습니다!

컴파일러를 인스톨하면 이미 다루었던 방법으로 클래스를 만들어 저장합니다. 이 SDK는 에디터의

종류를 따지지 않기 때문에 사용하기 편한 에디터를 준비하고 클래스 파일은 텍스트로 저장합니다.

컴파일러를 실행하려면 다음과 같이 커맨드 라인에 파라미터로 클래스 패스를 넘겨줍니다.

C:/flex_2_sdk/bin/mxmlc.exe Test.as


Macintosh에서는 다음과 같이 실행합니다.

/Applications/flex_2_sdk/mxmlc Test.as

실행하면 컴파일러의 동작에 관한 정보가 출력되며 종료합니다. 만약 컴파일 중에 에러가 있으면,

에러가 발생한 행과 문자를 표시해 줍니다.

컴파일이 성공하면 같은 디렉터리에 Test.swf 파일이 작성됩니다. 이 SWF를 실행하면 붉은 원이 표

시될 것입니다. 축하합니다! 이제 이것으로 여러분도 AS 3 파워 유저입니다!

물론 mxmlc를 사용하는 방법은 무비를 테스트하기 위해 매번 많은 것을 입력해야 합니다. 이 때문

에 커맨드 라인 툴의 사용을 피하는 사람들도 있습니다. 그러나 중요한 것은 이 과정을 자동화할 수

있는 방법이 많이 있다는 것입니다. 예를 들어, 좋은 코드 에디터를 사용하면 단축키나 툴바 버튼에

툴을 할당하고 파라미터를 줄 수 있습니다. 에디터에는 툴로 컴파일러의 경로를 지정하고, 현재 도큐

먼트의 경로를 파라미터로 설정합니다. 이렇게 하면 컴파일 작업은 한의 클릭으로 해결되게 됩니다.

컴파일 처리를 자동화하는 또 다른 방법은 손으로 입력한 것과 같이 실행해 주는 배치파일이나

AppleScript를 사용하는 방법입니다. 배치파일이나 스크립트를 실행하는 것만으로 자동으로 실행됩

니다. 잘해 보려고 생각하신다면 Apache Ant를 알아보면 좋을 것입니다. Apache Ant는 확실히 이러

한 목적을 위해서 설계된 프로그램입니다. 컴파일러의 패스와, 컴파일러에 건네주는 다양한 인수를

작성한 XML 파일을 작성하면 Ant가 그것을 해석해 프로그램을 실행합니다. 실제로 Ant는 이러한 것

보다 훨씬 많은 기능이 있으므로, AS 3 컴파일러를 사용한 개발을 하고 싶은 분들이 Ant를 배우는 것

은 충분히 가치가 있습니다.

요즘은 다양한 에디터를 사용할 수 있고, 유저들은 각각 자신에게 맞은 개발 환경을 가지고 있으므

로, 이러한 특정 에디터를 대상으로 한 자세한 설정방법은 설명하지 않겠습니다. 그러나 저의 공식 블

로그인 www.bit-101.com/blog를 보시면, FlashDevelop 에디터와 Ant, 그 외 다른 툴을 사용한 AS 3

의 통합에 관한 많은 정보를 찾을 수 있을 것입니다.

이제 여러분은 SWF의 사이즈나 프레임레이트, 배경색이라는 기본적인 도큐먼트 속성을 설정할 방

법이 없다는 것을 눈치 챘을 것입니다. 이러한 설정은 다음과 같은 두 가지 방법으로 설정할 수 있습니

다. 첫 번째 방법은 커맨드 라인에 파라미터를 추가하는 방법으로써, 기본적인 도큐먼트 설정은 아래

와 같이 설정합니다.

-default-background-color=color

-default-frame-rate=fps

-default-size=width,height


이것들은 클래스명의 뒤, 커맨드 라인의 마지막에 다음과 같이 추가합니다.

PC:

(path)mxmlc.exe Test.as -default-background-color=0xff0000

Mac:

(path)mxmlc Test.as -default-size=800,600

파라미터는 커맨드 라인으로 각 파라미터를 빈칸으로 구분하여 여러 가지를 추가할 수 있습니다.

여기야말로 편리하게 자동화 처리를 사용해야 합니다!

기본적인 도큐먼트 속성을 설정하는 또 하나의 방법은 클래스 파일에 메타데이터를 지정하는 방법

입니다. 메타데이터는 컴파일이 되는 ActionScript 구문이 아니고, 컴파일 시에 컴파일러가 사용하는

구문입니다. SWF 메타데이터 태그를 사용하면 앞에서 보여준 4개의 속성을 다음과 같이 설정할 수

있습니다.

[SWF(backgroundColor="0xffffff", width="800", height="600", frameRate="31")]

이 행은 package 내의 클래스 정의 앞에 작성합니다.

Trace에 대한 안내

이 책에서는 많은 예제, 특히 MyBaseClass와 MySubClass의 예제처럼 값이나 메시지를 출력하는 코

드를 많이 작성합니다. Flash CS3 IDE를 사용의 경우는 trace 구문을 작성하는 것만으로 예제는 문

제 없이 동작하며 메시지가 Flash의 출력 패널에 표시됩니다.

Flex Builder 2를 사용하는 경우에도 trace 구문은 그대로 사용할 수 있습니다. 다만 다른 것은 무

비를 run하지 않고 debug를 하는 것입니다. 이것은 툴바에 있는 [Run] 버튼 대신에 [Debug] 버튼을

클릭하는 것의 차이입니다. 그러면 무비는 외부의 브라우저에 의해서 실행되지만, Flex Builder로 전

환하면 출력한 메시지는 콘솔 내에 표시되고 있는 것을 확인할 수 있습니다.

무료 Flex 2 SDK를 사용할 경우에 trace를 하려면 조금 더 작업이 필요합니다. trace를 실시하는 가

장 간단한 방법은 서드파티 trace 패널을 사용하는 것으로, trace 패널은 보통 2가지로 구성되는데 첫

번째는 실행 가능한 프로그램 또는 trace 메시지를 표시를 위한 TextArea를 가진 SWF와, 두 번째는

커스텀 trace 클래스로 구성됩니다. trace 클래스는 클래스 패스 안에 위치시킬 필요가 있습니다. 컴파

일 시에는 -source-path라는 커맨드 라인 파라미터를 사용하고, 클래스 패스를 추가합니다. 예를 들


어 C:/AS 3Classes/에 trace 클래스를 위치시켰을 경우에는 컴파일 시에 다음과 같이 커맨드 라인 파

라미터를 추가합니다.

-source-path="C:/AS 3Classes/"

이 설정에 의해서 컴파일러는 프로젝트의 trace 클래스를 컴파일할 수 있습니다.

출력하고 싶을 때에는 보통 사용하고 있는 출력 패널로 지정되어 있는 메서드를 호출할 필요가 있

습니다. 예를 들어 다음과 같이 작성하는 대신에,

trace("Hello world");

다음과 같이 작성합니다.

Logger.debug("Hello world");

또 출력 클래스가 중첩된 패키지 안에 있는 경우에는 그 trace 클래스를 임포트할 필요가 있을지도

모릅니다. 물론 출력 패널의 사용법에 관한 도움말을 제대로 읽을 필요가 있습니다. 제가 발견한 사용

하기 쉽고 우수한 출력 패널은 www.ajaxmaker.com/xpanel/xpanel.htm에 있는 XPanel입니다.

(옮긴이) 현재 바로 위에서 설명한 XPanel 프로젝트는 찾기가 힘드며, 대안 오픈소스 로깅 프레임워크인

ThunderBolt(http://code.google.com/p/flash-thunderbolt/wiki/ThunderBoltAS 3)나 디버깅 프

레임워크인 Xray(http://rockonflash.wordpress.com/category/xray)를 사용하면 됩니다.

무료 SDK와 출력 패널을 사용하는 경우는 모든 예제에서 사용하고 있는 trace 문법을 사용자 출력

패널의 출력 메서드로 꼭 바꾸기 바랍니다.

무비의 리사이징(크기조절)

실제 코드 작성에 들어가기 전에, 설정에 관하여 마지막 주의사항을 알려드립니다. Flash IDE나 Flash

Player로 무비를 미리보기하는 경우에는 무비가 100%의 크기로 재생됩니다. 그러나 브라우저나

SWF 화면 설정이 되어 있는 프로그램으로 볼 경우에는 사용 가능한 공간만큼 꽉 채워져서 원하는

사이즈가 바뀌어 버릴 가능성이 있습니다. 이러한 경우에는 클래스의 init() 메서드 내에 아래의 두 행

을 추가합니다.

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;


이렇게 함으로써 무비의 리사이즈가 이루어지지 않게 되고, 무비를 재생하는 윈도우의 좌상단에

배치되게 됩니다. 이 두 행을 작성할 경우에는 �ash.display.StageScaleMode 클래스와 �ash.display.

StageAlign 클래스의 임포트를 반드시 해 주어야 합니다. 이 책에 기재된 많은 코드에는 이렇게 되어

있지 않지만, 다운로드한 클래스 파일에는 대부분 작성되어 있습니다.

코드를 사용한 애니메이션

여러분은 AS 3를 사용한 코드의 작성을 시작하는 데 있어 필요한 기본지식을 충분히 이해하였을 것

입니다. 개발 환경을 선택하였다면 다음으로 진행될 준비는 이미 되어 있는 것입니다. 이제부터 본격

적인 액션스크립트를 사용한 애니메이션으로 들어갑니다.

루프

코드을 사용한 대부분의 애니메이션에는 루프(loop)가 포함됩니다. 프레임 애니메이션에 대해서 생각

해 보면, 비트맵이 연속적으로 표시되는 플로우차트를 떠올릴 수 있을 것입니다. 그림 2-3에서 보듯 각

프레임에는 이미지가 있고 그 이미지가 표시됩니다.

프레임 1 표시

프레임 2 표시

프레임 3 표시 계속

그림 2-3 | 프레임 애니메이션

그렇지만 Flash의 도형이나 심볼의 경우는 조금 다릅니다. Flash는 프레임 애니메이션에서 사용하

는 비트맵 이미지를 프레임마다 만들거나 보관하는 것이 아닙니다. Flash는 각 프레임에 스테이지의

오브젝트 위치나 사이즈, 컬러 등을 보관합니다. 따라서 공을 화면을 가로질러 이동시키는 경우에는

각 프레임에 공의 위치를 보관하게 됩니다. 예를 들면 프레임 1에서의 공은 스테이지의 좌측으로부터

10픽셀의 위치에 있고, 프레임 2에서는 15픽셀의 위치에 있는 상태인 것입니다. Flash Player는 이 데

이터를 읽고, 그 내용에 따라서 스테이지를 설정한 후 프레임을 표시합니다. 따라서 플로우차트는 그

림 2-4에서 보듯이 확장할 수 있습니다.


프레임 1 렌더링

프레임 1 표시

프레임 2 렌더링

프레임 2 표시

계속

그림 2-4 | 프레임의 렌더링과 그 후의 표시

그러나 코드에 의한 다이내믹한 애니메이션은 그림 2-5와 같이 생각할 수 있습니다.

초기화 상태 가져오기

프레임 렌더링

프레임 표시상태에 규칙 적용하기

그림 2-5 | 스크립트에 의한 애니메이션

그림 2-5를 보면 알 수 있듯이, 여기서는 프레임 1이나 프레임 2라고 하는 개념은 없습니다. 액션스크

립트를 사용한 애니메이션에서는 하나의 프레임 만으로 모든 것을 실행하는 것이 가능하고 보통 그렇

게 작업합니다. 이것이 루프라는 개념의 시작이라 할 수 있습니다.

우선 초기 상태를 설정합니다. 이것은 트윈 애니메이션을 제작할 때와 같이 MovieClip을 스테이지

에 드래그합니다. 또는 씬(Scene) 전체를 코드만으로 작성할 수도 있습니다. 어느 방법을 사용하더라도

프레임을 표시하고, 렌더링합니다.

다음으로 규칙을 적용합니다. 이 규칙은 “공이 오른쪽으로 5픽셀 이동한다”라는 단순한 것부터, 또

몇십 줄에 달하는 복잡한 삼각함수로 구성되어 있는 규칙도 괜찮습니다. 이 책의 예제로 다루는 것은

대부분 이러한 것입니다.

규칙을 적용하면 그 결과로 새로운 상태(규칙에 의해 렌더링되고 표시된 상태)가 적용됩니다. 그리

고 같은 규칙을 전체적으로 적용합니다.

여러 번 계속 같은 규칙이 적용되는 것에 주의해야 합니다. 어떠한 규칙이 첫 번째 프레임을 위해서

만 존재하지 않아도 되고, 그 다음 규칙이 다음 프레임용으로 적용되는 것은 아닙니다. 따라서 여러분

에게 필요한 것은 작성한 씬 안에서 발생할 수 있는 모든 상태를 처리하는 규칙에 대해서 생각하는 것

입니다. 공이 오른쪽으로 너무 많이 이동해서 스테이지에서 나가버리면 어떻게 될까요? 규칙에서는 이

것을 명확하게 설명할 필요가 있습니다. 유저가 마우스를 사용해 공을 조작하게 하려면, 그것도 규칙

안에 둘 필요가 있습니다.


어려워 보이지만, 실제로 그다지 복잡하지는 않습니다. 기본적으로 규칙을 생성하여 매우 단순한

동작부터 시작하고, 만약 잘 동작하면 또 다른 규칙을 추가하는 방식으로 하면 좋습니다.

이러한 ‘규칙’은 실제로는 액션스크립트 구문입니다. 각 규칙은 단순한 구문인 경우도 있으며, 경우

에 따라서는 여러 구문인 경우도 있습니다. 공이 오른쪽으로 5픽셀 이동하는 경우에는 규칙을 다음과

같이 작성할 수 있습니다.

ball.x = ball.x + 5;

여기서는 공의 x 좌표를 가져오고 5를 더한 후, 새로운 x 좌표로 이동하도록 하고 있습니다. 이것은

다음과 같이 간단하게 작성할 수 있습니다.

ball.x += 5;

+= 연산자는 좌변의 변수에 우변의 값을 더하고 그 결과를 좌변의 변수에 대입합니다.

이것이 이 책에서 앞으로 보게 될 세련된 방법입니다.

var dx:Number = mouseX - ball.x;

var dy:Number = mouseY - ball.y;

var ax:Number = dx * spring;

var ay:Number = dy * spring;

vx += ax;

vy += ay;

vy += gravity;

vx *= friction;

vy *= friction;

ball.x += vx;

ball.y += vy;

graphics.clear();

graphics.lineStyle(1);

graphics.moveTo(ball.x, ball.y);

graphics.lineTo(mouseX, mouseY);

지금은 코드의 모든 내용을 이해할 필요는 없습니다. 단지 Flash가 새로운 프레임을 생성하려면, 이

러한 코드를 반복하여 실행할 필요가 있다는 것을 알아두세요.

그럼, 이러한 루프를 어떻게 실행할 수 있을까요? 여기서 저는 많은 초보 액션스크립트 프로그래머

가 범하기 쉬운 실수를 보여 드리겠습니다. for나 While과 같은 루프 구조는 거의 모든 프로그램 언어

에 존재합니다. 대부분 이러한 방법으로 루프를 작성하며, 루프 내에 작성한 코드를 반복해 실행할 수

있게 됩니다. 예제를 확인해 보겠습니다.


for(i = 0; i < 500; i++){

ball.x = i;

}

예제는 굉장히 단순합니다. 변수 i는 0부터 시작하므로 공 무비클립은 x축의 0(스테이지의 왼쪽을

의미)에 위치합니다. 그리고 i++에 의해서, i 값은 루프가 반복할 때마다 0에서 1, 2, 3, 4와 같이 1씩 증

가하게 되고 그때마다 그 값이 ball.x에 대입되어 공은 스테이지의 왼쪽에서 오른쪽으로 이동해 갈 것

입니다. 값이 500이 되면 i < 500이라는 구문은 false가 되므로 루프는 종료합니다.

위와 같은 실수를 범한 적이 있던 분들은, 공이 스테이지에서 이동하지 않고 그냥 우측에서 보일 것

이라는 것을 알고 있을 것입니다. 왜 공은 모든 지점으로 이동하지 않는 것일까요? 그렇습니다, 실제로

는 이동하고 있지만, 그렇게 보이지 않는 것뿐입니다. 왜냐하면 Flash에 화면의 갱신을 시키지 않았기

때문입니다. 그림 2-6은 실제로 일어난 것을 보여주는 다른 플로우입니다.

초기화 상태 가져오기

프레임 렌더링

규칙 적용 완료입니까? 프레임 표시

그림 2-6 | for 루프에서 왜 애니메이션하지 않을까요?

여러분은 실제로 규칙을 적용하고 공을 해당하는 위치에 이동시켜 새로운 화면을 500회 작성했습

니다. 그렇지만 루프가 종료될 때까지 화면에 보이지 않았습니다. 이것은 Flash가 프레임의 마지막에

서만 화면을 갱신하기 때문에 그렇습니다. 이것은 굉장히 중요한 포인트입니다.

아래는 Flash가 각 프레임에서 취하는 액션의 흐름입니다.

현재 스테이지에 있는 모든 객체의 위치를 잡습니다. 여기서는 모든 레벨, 레이어, 로딩된 무비1.

클립도 포함됩니다.

프레임에 의해 호출되는 모든 레이어, 레벨, 무비클립이나 버튼, 심도에 상관없이 모든 무비클2.

립과 관련된 모든 액션스크립트를 실행합니다.

프레임을 표시하는 타임을 체크합니다. 초당 프레임레이트를 20프레임으로 설정해 놓은 경우, 3.

Flash는 프레임을 표시하고 난 마지막 부분의 시간, 즉 프레임당 50밀리초(ms, 1000분의 1초)에

체크합니다. 만약 해당 시간에 도달하면, Flash는 화면을 렌더링하고, 다음 프레임으로 이동합니

다. 해당 시간에 도달하지 않은 경우는 그 시간이 올 때까지 대기합니다.


이 타이밍에 대하여 주의해야 할 점이 두 가지 있습니다. 첫째로, 프레임은 부정확하기로 유명합니

다(Flash 9의 무비에서도 그렇습니다). 정확한 타이밍을 계산할 때는 프레임레이트를 가지고 하면 안

됩니다. 두 번째는 렌더링과 액션스크립트의 실행에 걸리는 시간은 한 개의 프레임에 할당했던 시간보

다 길어질 가능성이 있습니다. 그렇다고 스크립트를 짧게 작성할 필요는 없습니다. Flash는 비록 프레

임레이트가 떨어졌다고 해도 스크립트의 실행이 완료(스텝 2)되지 않으면 스텝 3으로 이동하지 않습

니다. Flash는 프레임의 스크립트 실행 완료를 15초까지 기다립니다. 유명한 “무비의 스크립트 원인으

로 Flash Player의 실행 속도가 늦어지고 있습니다”라는 메시지를 표시하는 것은 그 15초 이후에 발생

하는 것입니다.

(옮긴이) 지연시간 변경도 가능합니다. Publish Setting ▷ Flash Tab ▷ Script Limit Time에서 원하는

시간으로 설정하면 됩니다.

이전 예제에서는, Flash는 다음 프레임으로 이동하려고 하기 전에 for 루프의 완료를 기다리고 화면

을 갱신하고 난 후 다음 프레임으로 이동했었습니다. 이 때문에 공이 이동하는 것처럼 안 보이고 점프

하는 것처럼 보였던 것입니다.

따라서 이제는 복수의 프레임에 루프를 다루는 것을 알아야 합니다. 그렇게 하면 그림 2-5에 보는

것과 같은 흐름으로 되돌아올 수 있습니다.

프레임 루프

이 책에서는 타임라인은 사용하지 않고, 스크립트를 1개의 별도 프레임에 배치하므로 이 절에서는 프

레임 루프의 예제는 제시하지 않고, 프레임 루프의 개념을 설명하겠습니다. 만약 Flash CS3 IDE를 사

용하는 경우는 여러 가지 배우기 좋은 단계이므로 이 예제들을 만들어서 실행해 보세요.

프레임 루프 개념은 Flash 초기 버전에서 나온 것인데 액션스크립트는 지금과 같이 강력하지는 않

았습니다. 이 개념은 특정 프레임에 코드를 입력하면, 그 다음 프레임에 이전 프레임으로 되돌아 가는

gotoAndPlay를 입력합니다. 이렇게 두 프레임 사이에 무한루프를 설정할 수 있고, 매 시간 재생헤드

가 코드를 둔 프레임에 들어갈 때마다 그 코드를 실행합니다.

여기서 중요한 점은 프레임이 2개 있으므로, 코드가 실행되면서 화면이 갱신되어 표시되고 재생 헤

드가 이동하는 것입니다. 이렇게 하면 코드가 반복 실행될 때마다 리프레시(refresh)되어 애니메이션

이 작성됩니다.


예를 들어 스테이지에 ball이라는 이름의 무비클립이 있다면 프레임 1의 코드는 다음과 같이 작성

할 수 있습니다.

ball.x ++;

프레임 2는 다음과 같이 됩니다.

gotoAndPlay(1);

이 경우 타임라인은 자동으로 프레임 1로 돌아오므로 프레임 2의 작성은 실제로는 필요치 않습니다.

이 예제의 변형으로써 3개의 프레임을 사용할 수도 있습니다. 프레임 1을 한 번만 실행하고 싶은 코

드를 작성하는 초기화 프레임으로 하고, 여기서는 루프시키지 않습니다. 프레임 2에서는 메인 액션을

실시하는 프레임으로 하고, 프레임 3에 다음과 같은 코드를 작성합니다.

gotoAndPlay(2);

프레임 1에서는 공의 최초 위치나 컬러, 사이즈, 그 외의 한 번만 실시하고 싶은 것을 지정할 수 있습

니다. 이후 타임라인은 프레임 2와 3을 무한루프하면서 애니메이션을 동작시키고 화면을 갱신합니다.

이것은 Flash 5와 그 이전에 통상적으로 사용된 설정 방법으로 조금 낡은 사용 방법이지만 지금도

제대로 동작합니다. 여러분은 이후에는 더욱 유연하고 강력한 설정 방법을 알게 되겠지만, 초기화, 액

션, 루프라는, 무비의 다른 단계들을 알아 두는 것은 매우 도움이 됩니다. 이러한 개념은 향후 작성할

애니메이션의 설정으로도 사용할 수 있습니다.

클립 이벤트

클립(clip) 이벤트는 다행스럽게도 AS 3에서는 완전히 삭제되었지만 약간의 설명을 할 필요는 있습니

다. Flash 5 무렵의 클립 이벤트는 프레임을 대신하는 주요한 방법이었습니다.

클립 이벤트는 타임라인이 아니라 무비클립 자체에 기재된 코드를 말합니다. 클립 이벤트는 스테이

지의 무비클립을 선택하고, 액션 패널을 열어서 작성했습니다. 이와 같이 액션 패널에 코드를 작성하

면 그 코드는 해당 무비클립에 직접 할당할 수 있었습니다.

무비클립에 직접 작성된 모든 코드는 다음과 같이 클립 이벤트의 블록 내에 작성할 필요가 있었습

니다.

onClipEvent(eventName){

//여기에 코드를 작성합니다

}


onClipEvent(이벤트명), on(이벤트명)도 있었습니다. “on” 이벤트는 마우스나 키보드를 누른 동작

이나 떼는 동작을 처리할 수 있었습니다.

이벤트 이름은 Flash 무비에서 생긴 많은 이벤트들 중 하나를 가리킵니다. 이벤트는 단순하게 무비

에서 발생한 것을 말합니다. 이벤트는 크게 시스템 이벤트와 사용자 이벤트로 나눌 수 있습니다. 시스

템 이벤트는 데이터 로딩, 콘텐츠 로딩, 새로운 프레임이 시작할 때 등 컴퓨터나 Flash, 제작한 무비에

서 무엇인가가 일어났을 때에 발생합니다. 유저 이벤트는 유저가 행동할 때, 보통 키보드나 마우스를

사용한 조작을 할 때를 말합니다.

클립 이벤트로 자주 사용되던 것은 load와 enterFrame입니다. load 이벤트는 무비클립의 인스턴스

가 스테이지에 최초로 보였을 때, 특정 인스턴스의 로드 시에 한 번만 발생하므로 초기화 코드를 작성

하는 데 적절한 장소였습니다. 초기화 코드는 단지 중괄호 안에 넣기만 하면 됐었습니다.

onClipEvent(load){

//초기화 코드

}

enterFrame 이벤트는 Flash가 1개의 프레임밖에 없는 무비에서도 다음 프레임의 렌더링을 시작할

준비가 되었을 때에 매번 발생했습니다. 예를 들어, 프레임레이트가 초당 20프레임으로 설정되어 있는

경우에 enterFrame는 거의 50밀리초 간격으로 발생했습니다. enterFrame 클립이벤트는 보통 코드를

반복해 실행하고, 매 실행 시마다 다시 디스플레이할 필요가 있는 스크립트 코드를 다음과 같이 작성

했습니다.

onClipEvent(enterFrame){

//액션 코드

}

따라서, 타임라인에 위치한 무비클립에 다음과 같은 코드를 작성했습니다(여기에서는 초기 AS 1의

문법으로 작성하고 있습니다).

onClipEvent(load){

this._x = 100;

this._y = 100;

}

onClipEvent(enterFrame){

this._x += 5;

}


다시 말하지만 이 책에서는 이러한 설정은 사용하고 있지 않습니다(액션스크립트에서 없어졌기 때

문입니다). 그러나 초기화, 액션 반복, 그리고 화면의 갱신은, 어떠한 시스템에서라도 애니메이션의 일

부이며, 이 세 가지 포인트를 아는 것은 굉장히 중요합니다.

이벤트와 이벤트 핸들러

Flash MX에서는 액션스크립트에 중요한 변화가 많이 일어났습니다. 이러한 변경과 개선점은 Flash를

본격적인 리치 인터넷 애플리케이션의 최전방으로 끌어 올리는 큰 역할을 담당하고 있었습니다. 가장

큰 변화 중 하나는 매우 복잡한 액션의 프로그래밍을 이전보다 간단하게 제작할 수 있는 새로운 이벤

트 아키텍처의 도입이었습니다.

이벤트에 대해서는 앞에서 언급한 대로 시스템이나, 사용자가 키보드나 마우스를 사용해 무엇인가

를 했을 때에 발생하는 것입니다. Flash MX 이전 버전까지는 이러한 이벤트를 파악할 수 있는 방법은

무비클립이나 버튼의 onClipEvent(이벤트명), on(이벤트명) 블록을 사용하는 방법밖에 없었습니다.

즉 제작 시 스테이지에 무비클립을 두고, 그 위에서 코드를 작성해야 했습니다. 다양한 회피 방법을 강

구할 수 있었지만 실제로는 최선책이었습니다. MX의 이벤트 아키텍처는 완전하지는 않았지만 이전

버전을 크게 개선해서 애플리케이션 어디에서라도 이벤트에 액세스가 가능하게 되었습니다. 언제라

도 특정 이벤트 처리를 정지하거나 이벤트의 행동을 다이내믹하게 변경하는 것이 가능하게 되었습니

다. 이러한 기능이 제공됨으로써 액션스크립트는 조금 더 강력하고, 유연해졌습니다.

Flash MX 2004에서는 컴포넌트 프레임워크에 포함된 이벤트 아키텍처로써 한층 더 기능이 확장

되었습니다. 그러나 이 확장기능은 AS 2 클래스들을 사용하고 기존의 이벤트 아키텍처 기반에서 구

축되었을 뿐이었습니다. 이 클래스는 많은 이벤트 처리 기능을 제공하였지만 역부족인 부분이 있었

고, 기본 뼈대가 되는 아키텍처는 여전히 약했기 때문에 한계가 있었습니다.

AS 3에서는 이벤트 아키텍처가 전면적으로 수정되어 빠르고 강력해졌고, Flash Player에 통합 되었

습니다.

이벤트를 이해하려면 리스너(청취자)와 핸들러(처리자)라는 2개의 개념을 이해할 필요가 있습니다.

리스너와 핸들러의 실제 기능은 그 이름대로입니다. 리스너는 이벤트를 청취하는(감지하는) 오브젝트

이고, 핸들러는 이벤트가 발생했을 때 그 이벤트를 핸들링(처리)하는 함수를 말합니다. 리스너와 핸들

러는 지금까지의 액션스크립트와는 완전히 다른 방법으로 설정합니다. 그 방법은 AS 2 때와도 다릅니

다. 앞으로는 혼란스럽지 않게, 이제 AS 3만을 다룰 것입니다.


리스너와 핸들러

지금까지 말한 것처럼 리스너는 이벤트를 감시하는 오브젝트입니다. addEventListener라는 이름의

함수를 호출하면 작성하는 클래스를 특정 이벤트를 감시하는 리스너로 지정할 수 있습니다. 감시하

고 싶은 이벤트명과 작성한 클래스의 함수명을 건네줍니다. 이 함수가 핸들러가 됩니다. 아래는 예제

입니다.

addEventListener("enterFrame", onEnterFrame);

이벤트 리스너를 추가할 경우에는 파라미터를 추가로 사용할 수도 있지만, 이 책에서는 사용하지

않습니다. 대부분의 애플리케이션에서는 이벤트에 대한 것은 이것만으로도 충분합니다.

이벤트명 “enterFrame”이 문자인 것을 확인해 두세요. 이것은 이벤트 처리를 헷갈리게 하는 매직

스트링(마법 문자열)입니다. 왜 마법이냐 하면, 예를 들어 “entorFrame”과 같이 존재하지 않는 이벤트

를 잘못 작성한 경우라도, 컴파일러는 어떠한 에러도 내지 않고 그것을 마법과 같이 받아 들이기 때문

입니다. 그러면 우리의 이벤트 핸들러가 호출되지 않는 이유를 알아내기 위해서 쓰는 많은 시간이 마

법과 같이 사라져 버리겠죠.

그러나 AS 3에서는 이것을 잘 처리할 수 있습니다. “enterFrame”과 같은 문자열을 사용하지 않고,

Event 클래스의 속성을 사용할 수 있습니다. 예를 들어 앞의 경우는 다음과 같이 작성할 수 있습니다.

addEventListener(Event.ENTER_FRAME, onEnterFrame);

Event.ENTER_FRAME의 값을 찾아보면, 그 값은 단순한 “enterFrame”이라는 문자열인 것을 알

수 있습니다. 그렇다면 Event.ENTOR_FRAME와 같이 속성값의 입력 실수도 똑같이 범하기 쉽지 않

을까, 라고 생각할지 모릅니다. 그러나 만약 그런 실수를 하고 있다 해도, 이번에는 플래시가 컴파일을

거부하고 Event 클래스에는 그러한 속성이 없다는 정보를 알려줍니다. 에러가 발생한 정확한 행을 알

려줄 뿐만 아니라, 그 행에서 틀린 정확한 문자도 나타내 보여 줍니다. 컴파일러가 여러분의 실수를 바

로잡아 대신 코드를 작성해 줄 정도가 아닌 이상 이보다 더 훌륭할 수는 없습니다.

Event 클래스의 이벤트 타입에 다른 클래스도 똑같은 방식으로 MouseEvent.MOUSE_DOWN이

나 KeyboardEvent.KEY_DOWN, TimerEvent.TIMER 등의 이벤트 타입이 있습니다. 이것은 모두

“mouseDown”이나 “keyDown”, “timer”라는 단순한 문자열을 나타내지만, 만약 사용해야 하는 이벤

트 문자열을 잊어버리거나 속성을 사용하거나 할 경우는 이것이 최선의 방법입니다.

다음에 알아 두어야 할 중요한 것은, 이전 예제와 같이 클래스에서 직접 addEventListener 함수를

호출할 수 있다, 라는 것입니다. 이 예제에서는 클래스 자신의 enterFrame 이벤트를 감시하도록 하고


있습니다. 그러나 다른 객체에서 작성한 이벤트를 감시하고 싶은 경우도 있습니다. 예를 들어, 버튼으

로 동작하는 mySpriteButton이라는 이름의 스프라이트의 경우, 유저가 그 스프라이트를 클릭하면

스프라이트는 mouseDown 이벤트를 발생시킵니다. 그 스프라이트로부터 mouseDown 이벤트를 감

시하려면 그 스프라이트의 addEventListener 메서드를 다음과 같이 호출할 수 있습니다.

mySpriteButton.addEventListener(MouseEvent.MOUSE_DOWN, onSpritePress);

마지막으로 이전 버전의 액션스크립트와 또 다른 주의 사항이 있는데, 이벤트 핸들러 함수에

onEnterFrame이라는 특정 이름을 붙일 필요가 있었지만, AS 3에서 리스너를 추가할 경우에는 여러

분이 좋아하는 핸들러 함수명을 적을 수 있습니다. enterFrame의 예를 들면 핸들러로 onEnterFrame

이라는 이름을 사용했는데, 이것은 onEnterFrame이 저에게 아주 잘 맞고 익숙한 이름이라서 그렇

게 정했습니다. AS 3에서 onEnterFrame은 미리 정해진 것은 아닙니다. 따라서 enterFrame 핸들러

는 move나 run이나 doSomethingCool이나 어떤 이름이라도 붙일 수 있습니다. 그러나 보통 이벤트

핸들러는 on으로 시작하고, 뒤에 이벤트 이름을 붙여서 생성합니다. 예를 들면 onStartButtonClick,

onConfigXMLLoad나 onRocketCrash와 같이 이름을 붙입니다. 또 다른 방법으로 예를 들어

enterFrameHandler와 같이 이벤트명 뒤에 Handler를 추가하는 하여 핸들러를 작성하는 것을 좋아

하는 사람도 있습니다. 가장 중요한 것은 일관되게 사용하는 것입니다. 그러면 한눈에 이벤트 핸들러

라는 것을 알 수 있게 됩니다.

저는 리스너가 이벤트를 감시하는 것이라고 말을 해 왔지만, 더 정확하게 표현하면 리스너는 이벤트

를 전달해 주는 것입니다. 내부적으로 이벤트를 발생시키는 객체는 리스너로 추가한 객체의 모든 리

스트를 보관하고 있습니다. 객체가 mouseDown나 mouseUp, mouseMove이라는 다른 여러 이벤트

타입을 발생시킬 수 있는 경우에 객체가 발생시킬 수 있는 각각의 이벤트 타입의 리스너 리스트를 저

장합니다. 어떤 이벤트가 발생하면 항상, 그 객체는 대응하는 리스너 리스트를 주시하다가, 그 리스트

내의 각 객체에 이벤트가 발생한 것을 알립니다.

이벤트를 다른 말로 설명하면 리스너가 되는 객체는 특정 이벤트를 수신하고 있다라고 말할 수 있

습니다. 그리고 그 이벤트를 발생시키는 객체는 그 수신자 모두에게 이벤트를 전달하고 있습니다.

또한 객체가 이벤트를 더 이상 수신하길 원치 않을 때에는 removeEventListener 메서드를 호출하

여 수신을 멈추게 할 수 있습니다.

removeEventListener(Event.ENTER_FRAME, onEnterFrame);

이것은 객체에게 리스너 리스트에서 특정 이벤트를 감시하는 리스너를 삭제하도록 지시하는 것이

며 향후에는 더 이상 이벤트를 수신하지 않게 됩니다.


그럼, 실제로 실행해 봅시다. 다음 코드에서는 새로운 스프라이트를 만들고 스테이지에 배치한 후

그림을 그리고, 스프라이트에 이벤트 리스너를 추가합니다. 우선 전에 말한 기본 애플리케이션 템플릿

코드로 시작하고, 여기에 코드를 추가합니다.

package {


import flash.events.MouseEvent;

public class EventDemo extends Sprite {

private var eventSprite:Sprite;

public function EventDemo() {

init();

}


eventSprite = new Sprite();

addChild(eventSprite);

eventSprite.graphics.beginFill(0xff0000);

eventSprite.graphics.drawCircle(0, 0, 100);

eventSprite.graphics.endFill();

eventSprite.x = stage.stageWidth / 2;

eventSprite.y = stage.stageHeight / 2;

eventSprite.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

eventSprite.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);

}

private function onMouseDown(event:MouseEvent):void {

trace("mouse down");

}

private function onMouseUp(event:MouseEvent):void {

trace("mouse up");

}

}

}

여기서는 무슨 일이 있었던 걸까요? init 함수에서 스프라이트를 생성하고, 원을 그린 후, 스테이지

의 한가운데에 배치하고 있습니다. 그리고 여기서는 마지막 두 줄이 중요합니다. 클래스가 MOUSE_

DOWN과 MOUSE_UP이라는 두 개의 이벤트를 감시하는 리스너를 클래스에 추가하고 있습니

다. MouseEvent 클래스의 속성을 임포트해야 하는 것을 주의하세요. 핸들러는 이후에 정의한

onMouseDown 함수와 onMouseUp 함수를 넘겨주고 있습니다. 핸들러는 보통 이벤트에 관한 정보

를 포함한 이벤트 객체를 넘겨받습니다. 이벤트 객체는 적어도 그 이벤트를 발생시킨 객체에 관한 정

보가 포함됩니다. 마우스 이벤트의 경우에는 이벤트가 발생했을 때의 마우스의 위치나 어느 버튼을


눌렀는지(있는 경우) 등의 정보가 포함됩니다. 키보드 이벤트에서는 이벤트의 발생 시 어느 키를 눌렀

는지, 다른 키의 상태(Ctrl, Alt, Shi� 등을 함께 눌렀는지)에 관한 정보가 포함됩니다. 이벤트 타입에

어떤 정보가 포함될지는 도움말 파일을 참고하세요.

예제 파일을 EventDemo.as라는 이름으로 저장하고, 여러분이 원하는 방법으로 컴파일합니다.

SWF를 실행하고 새로운 스프라이트 위에서 마우스를 누르거나 놓거나 하면 메시지가 출력됩니다.

Flex Builder 2를 사용하는 경우는 run을 선택하지 마시고 debug를 선택하는 것을 잊어서는 안됩니

다. 무료 SDK를 사용하는 경우는 컴파일에 사용하는 적절한 방법을 선택하고 이 예제가 잘 동작하는

지 확인합니다. 이것은 매우 단순한 예제로서 여러분의 개발 환경을 올바르게 설정하는 데 좋은 테스

트가 됩니다.

ActionScript를 처음 시작하신 분이라도 실제로 동작시켜 보는 것만으로도 충분히 이해가 될 것입

니다. 축하합니다! 이제 여러분도 ‘초보자’에서 ‘중급자’가 되었습니다.

핸들러에 대한 이해가 깊어지면 리스너에 대해서도 조금 더 알 수 있게 됩니다. 저는 예전에 이

벤트를 발생시키는 객체가 그 이벤트를 전달하거나 또는 리스너에게 이벤트를 통지한다고 했습니

다. 정확하게는 실제로 존재하는 바른 핸들러 이름을 가진 객체의 함수 호출입니다. 이전 예제에서

는 EventDemo 클래스의 리스너를 2개의 스프라이트의 이벤트에 추가했습니다. 내부적으로 스프

라이트는 각각 이벤트의 리스트를 보관합니다. 따라서 스프라이트는 mouseDown 이벤트의 리스

트와 mouseUp 이벤트의 리스트를 가지고 있습니다. 이것들은 아마 단순한 배열로, 각 리스트는

EventDemo 클래스의 인스턴스인 메인 무비의 참조를 포함하고 있습니다.

사용자가 스프라이트에서 마우스 버튼을 누르면, 스프라이트는 “앗! 마우스를 눌렀다! 리스너에게

알리자”라는 반응을 보입니다. 그런 다음 mouseDown의 리스너 리스트를 조사하고 onMouseDown

이라는 이름의 함수의 참조를 찾아냅니다. 그러고 나서 그 리스너에서 그 함수가 불려집니다. 다른 객

체가 리스너로 mouseDown 이벤트에 등록되어 있는 경우에는, 그 객체도 리스트에 있으므로 이러한

정의가 된 핸들러도 똑같이 불려집니다.

마우스를 놓았을 때에도 mouseUp의 리스트를 조사하는 것 빼고 같은 현상이 일어납니다.

AS 3의 핸들러에서는 스코프(영역)에 대한 문제가 해결되었다는 중요한 기술적 주의 사항이 있습

니다. 이 문제는 조금 복잡한데 핸들러 함수를 호출하는 장소와 관계가 있다는 것을 이해하는 것이

지름길입니다. AS 2의 이벤트 아키텍처는 AS 3의 아키텍처와 표면적으로는 비슷한 것처럼 보이지만

AS 2에서는 이벤트 핸들러로서 불려지는 클래스 메서드는 그것이 정의되고 있는 클래스가 아니고 호

출하고 있는 객체의 메서드인 것 같이 실행됩니다. 어렵게 들리겠지만 생각보다 어렵지 않습니다. 이


문제를 처리하기 위해서 작성된 Delegate 클래스라는 다른 클래스가 있는 정도입니다. 이 문장의 의미

를 전혀 모르는 분은, 마음을 편하게 먹고 AS 3에서는 보통 이 문제를 신경 쓸 필요는 없는 것에 감사

합시다.

지금까지의 이벤트와 핸들러의 기본을 알아봤습니다. 지금부터 많은 이벤트를 소개해 갈 것입니다.

이제 애니메이션으로 돌아옵시다.

애니메이션의 이벤트

그런데 우리는 지금까지 이벤트에 대해 어디까지 이야기하고 있었던 것일까요? 우리는 오브젝트를

애니메이션시켜 반복할 때마다 화면을 갱신시키는 코드를 적용하는 방법을 찾고 있었습니다. 이미

enterFrame 클립 이벤트를 사용해 애니메이션시키는 예제는 확인해 보았습니다. 그럼, 이야기를 이

기법을 알아보는 데로 되돌리겠습니다.

AS 3에서는 다음과 같이 리스너를 enterFrame 이벤트에 추가할 수 있습니다.

addEventListener(Event.ENTER_FRAME, onEnterFrame);

Event 클래스를 임포트하고, onEnterFrame이라는 메서드를 작성할 필요가 있다라는 것을 꼭 기억

하세요.

가끔 헷갈리는 경우 중 하나는 enterFrame 이벤트는 무비에 프레임이 1개밖에 없어도 발생한다

는 것입니다(Flex Builder 2나 SDK를 사용하는 경우는 프레임을 볼 수는 없지만, 프레임은 거기에

반드시 1개가 있습니다!). 재생 헤드는 실제로 새로운 프레임에 들어가지 않고, 1 프레임에서 기다리

고 있습니다. enterFrarne 이벤트의 발생은 재생 헤드가 새로운 프레임으로 이동하는 동작이 아니

고, 반대로 이벤트가 Flash에 재생 헤드를 이동시키는 타이밍을 알리는 것이라는 것을 이해해두세요.

enterFrarne은 매우 부정확하지만 타이머와 비슷한 것입니다. Flash는 무비의 프레임레이트 속성을

가져와서 새로운 프레임의 초당 프레임레이트를 결정하고, 그 간격을 반복하여 이벤트를 발생시킵니

다. 이동해야 할 프레임이 있으면 그 곳으로 이동하겠지만, 다음 프레임의 유무와는 관계없이 이벤트

를 이용할 수 있습니다.

이러한 Flash의 내부적인 기능에 흥미가 있는 분은 www.kaourantin.net의 TinicUro의 블로그를 확인해

보세요. Tinic는 Adobe에서 Flash Player를 다루는 엔지니어로 무비의 동작에 대한 구조에 대해 매우 깊

이 있는 이야기를 자주 게시하고 있습니다.


이전 예제에서는 초기화 프레임이나 onClipEvent(load) 블록 안에 초기화 코드가 있었습니다. 예

상하겠지만 이번은 init 메서드 내에서 모두 실행합니다. 이 메서드는 생성자에 의해서 한 번만 호출됩

니다. Init은 무비 내에서 결코 두 번 이상 호출하지 않도록 습관을 가집시다. 변수를 다시 초기화하거

나 함수를 호출할 필요가 있는 경우는, 그것들을 다른 특정 함수로 옮기고, 필요한 경우에 그 함수를

호출하도록 합니다.

다음은 AS 3을 사용한 우리의 첫 애니메이션 예제입니다!

package {


import flash.events.Event;

public class FirstAnimation extends Sprite {

private var ball:Sprite;

public function FirstAnimation() {

init();

}


ball = new Sprite();

addChild(ball);

ball.graphics.beginFill(0xff0000);

ball.graphics.drawCircle(0, 0, 40);

ball.graphics.endFill();

ball.x = 20;

ball.y = stage.stageHeight / 2;

ball.addEventListener(Event.ENTER_FRAME, onEnterFrame);

}

private function onEnterFrame(event:Event):void {

ball.x++;

}

}

}

init 함수에서는 ball이라는 이름의 스프라이트를 생성하고, 이벤트 리스너를 설정했습니다.

onEnterFrame 함수에서는 애니메이션 처리를 하고 있습니다. 공의 이동 후 화면이 리프레시됩니다.

대단한 것은 아니지만, 이것이 이 책에서 배우는 기초가 되므로 꼭 기억하시기 바랍니다.

여기까지 액션스크립트를 사용해 애니메이션을 구축하는 기본적인 방법 대부분을 알아보았습니

다. 규칙을 반복해 실행하는 방법과 그 규칙의 적용 후 화면을 갱신하는 방법, 그것이 모션의 착각의


원인이 되는 것을 설명해 왔습니다. 하지만 여러분은 무엇을 움직이고 있습니까? 지금까지는 스프라

이트를 움직여 왔지만 그 코드는 모두 무비클립을 사용했을 때와 같이 간단한 것이었습니다. 다음은

스프라이트와 무비클립의 생성 방법과 디스플레이 리스트를 사용하여 화면에 보이게 하는 것을 알아

보겠습니다.

디스플레이 오브젝트

AS 3 전까지는 Flash 무비 내에서 무비클립이나 그래픽, 버튼, 텍스트 필드, 비트맵이나 컴포넌트, 기

본적인 도형 등 서로 다른 타입의 비주얼 오브젝트를 얼마든지 작성할 수 있었습니다. 이러한 객체는

실제로는 계층 구조 안에서 조직화되지 않고, 생성이나 소멸, 조작을 실시하는 방법은 모두 차이가 있

었습니다. 예를 들어 무비클립은 IDE 내의 스테이지에 할당하거나 복제하거나 배치하거나 또 생성할

수 있었습니다. 텍스트 필드도 생성하거나 IDE 내에서 작성할 수 있었습니다. 비트맵이나 비디오, 컴

포넌트나 그 외 다른 것들은 타입별로 객체가 만들어지고 Flash에 넣어져 다른 것과의 연동이 강요되

는 것과 같았습니다.

이러한 객체끼리의 차이는 AS 3에서는 완전히 해결되었습니다. 스테이지상에서 볼 수 있는 오브젝

트의 타입은 모두 DisplayObject 클래스를 확장한 클래스로부터 작성됩니다. 바꾸어 말하면, 모든 오

브젝트는 같은 대가족의 일원으로서 생성이나, 스테이지상에의 배치, 파기, 조작 방법에 대해 기본적

으로 똑같이 동작합니다.

스프라이트나 무비클립, 텍스트 필드를 작성하는 코드는 거의 같습니다. 실제로 모든 디스플레이

오브젝트는 어떠한 타입의 객체에서도 new 연산자를 사용하는 동일한 방법으로 생성할 수 있습니다.

아래는 이것을 증명하기 위한 3개의 자식을 생성하는 방법입니다.

var myTextfield:TextField = new TextField();

var myMovieClip:MovieClip = new MovieClip();

var mySprite:Sprite = new Sprite();

이보다 간단할 순 없겠죠? 이전 예제에서 본 것처럼 무비클립이나 스프라이트를 생성하면, 아래와

같이 그 오브젝트에 콘텐츠를 드로잉할 수 있습니다.

mySprite.graphics.beginFill(0xff0000);

mySprite.graphics.drawCircle(0, 0, 40);

mySprite.graphics.endFill();


그런데 이것을 실행하면 아무것도 나타나지 않습니다. 디스플레이 리스트에 대한 설명은 여기서부

터 입니다.

‘디스플레이 리스트’는 새로운 용어이지만, 지금까지 어느 정도 Flash를 사용하고 있던 분에게는 전

혀 새로운 개념은 아닙니다. 디스플레이 리스트는 무비 내의 모든 비주얼 오브젝트의 트리라 볼 수 있

습니다. 트리의 기본은 스테이지에서부터 디폴트로 표시됩니다. 스테이지에는 복수의 무비클립이나

서로 다른 타입의 비주얼 오브젝트(텍스트 필드나 도형 등)을 둘 수가 있습니다. 스테이지에 그것들을

추가하면 화면에 보입니다. 무비클립 안에는 다른 무비클립이나 다른 비주얼 오브젝트, 또는 다른 요

소가 포함되어 있을지도 모릅니다. 이것이 기본적으로 디스플레이 리스트인 것입니다.

AS 2와 AS 3의 디스플레이 리스트 동작 방법에 관한 가장 큰 차이로는, AS 2에서는 무비클립을 할

당하거나 createEmptyMovieClip를 사용해 무비클립을 생성할 때, 트리의 장소를 지정할 필요가 있

었습니다. 그 시점에 무비클립은 생성되어 리스트의 지정된 장소에 놓여져, 그것이 그 후도 계속 존재

하는 장소가 되었습니다. 리스트의 장소를 변경하려면 클립의 삭제 외에는 방법이 없고, 완전하게 파

기하는 방법 이외에는 리스트에서 무비클립을 없애는 방법은 없었습니다.

AS 3에서는 새로운 무비클립이나 스프라이트, 다른 디스플레이 오브젝트를 생성할 때 디스플레이

리스트에 자동으로 추가되지 않습니다. 앞의 스프라이트의 예제에서는 스프라이트의 생성 시, 부모나

심도에 대해 아무것도 언급하지 않은 것에 주의하세요. 디스플레이 리스트에 없어도 존재할 수 있고

조작도 가능합니다.

‘stage(무대)’라는 문자 그대로의 의미대로 생각해보면, 오브젝트는 무대의 뒤에서 이제 막 공연을

앞두는 배우로 생각해 볼 수 있습니다. 배우는 커텐 뒤의 스테이지 위에 멈춰 서 있든가, 스테이지 아

래에서 기어 다닙니다. 여러분은 이들을 볼 수는 없지만 모두 그곳에 있으며, 입장을 했을 때 스테이지

에 뛰어 올라가서 관객들의 시선을 빼앗을 것입니다.

여기까지 트리와 극장의 메타포를 사용해 설명해 왔습니다만 다른 관점에서도 살펴봅시다. 우리는

디스플레이 리스트를 부모와 자식, 형제, 자매라는 관계가 지속되는 가족의 관점으로 생각해 볼 수도

있습니다. 디스플레이 리스트에 오브젝트를 추가하면 추가된 대상 오브젝트는 그 부모가 되고 추가한

새로운 오브젝트는 그 부모의 자식이 됩니다. 리스트에 오브젝트를 추가할 때 addChild라는 메서드

를 사용하는 것은 이 때문입니다.

도큐먼트 클래스는 트리의 베이스(즉 다른 모든 디스플레이 오브젝트의 증조부)를 나타냅니다. 이

것은 자동으로 보여지게 되고 작업은 여기에 자식을 추가하는 것으로 시작됩니다. 따라서 이전 예제


에서 본 것처럼 스프라이트나 다른 디스플레이 오브젝트를 가시화하려면 addChild 메서드를 호출하

고 거기에 새롭게 생성한 스프라이트를 넘겨줍니다.

var mySprite:Sprite = new Sprite();

mySprite.graphics.beginFill(0xff0000);

mySprite.graphics.drawCircle(0, 0, 40);

mySprite.graphics.endFill();

addChild(mySprite);

이것을 시험할 때는 코드를 앞에서 본 뼈대 클래스의 init 함수 안에 적습니다. 그러면 초기값으로

0,0의 위치에 배치되지만 x, y 속성을 조절하면 그 위치를 바꿀 수 있습니다.

또 여기에서는 심도(깊이)를 전혀 언급하지 않은 것도 꼭 알아두세요. AS 2에서는 새로운 무비클립

을 작성하거나 할당할 때는 깊이를 다루었습니다. AS 3에서는 특정 심도(depth)에 자식을 추가하거나

그 심도를 변경하는 메서드는 있지만, 심도의 관리는 대개 자동적으로 행해집니다. 이것에 대해서는

필요하게 되었을 때 소개할 것입니다.

디스플레이 리스트에서 대상을 삭제하려면 removeChild 메서드를 호출하고 거기에 실제 자식 오

브젝트의 참조를 건네줍니다. 우선 이해해야 할 중요한 것은 자식의 삭제가 자식의 파기는 아니라는

것입니다! 자식은 삭제되기 전 완전히 같은 상태를 유지한 채 계속 존재하고 또 디스플레이 리스트에

다시 추가되면 같은 상태를 가진 채로 다시 나타납니다. 다시 말하면 자식에 도형을 드로잉하거나 외

부에 있는 콘텐츠를 로드하면 자식을 리스트에 되돌릴 때 그 도형이나 콘텐츠를 다시 드로잉하거나

로드할 필요가 없다는 것입니다. AS 2에서는 이것에 대하여 처리할 필요가 있었습니다.

다음으로 이해해야 할 것은 자식을 리스트로 되돌릴 때에는 리스트의 어디에라도 좋아하는 곳으로

되돌릴 수 있다는 것입니다. 이것은 부모와 자식 관계를 재구성할 수 있다는 것으로 매우 재미있는 기

능입니다. 어떠한 무비클립으로부터 대상을 삭제했을 때와 완전히 같은 상태를 유지한 채로 다른 무

비클립에 할당할 수가 있습니다. 이전에는 이러한 일을 할 수 없었습니다. 실제로 삭제할 필요조차 없

습니다. 왜냐하면 자식은 부모를 1개밖에 가질 수 없기 때문에, 다른 부모에게 자식을 추가하면 자식

은 자동적으로 최초의 부모로부터 삭제됩니다.

아래는 부모와 자식 관계를 재구성하는 예제입니다.

package {



public class Reparenting extends Sprite {

private var parent1:Sprite;


private var parent2:Sprite;


public function Reparenting() {

init();

}


parent1 = new Sprite();

addChild(parent1);

parent1.graphics.lineStyle(1, 0);

parent1.graphics.drawRect(-50, -50, 100, 100);

parent1.x = 60;

parent1.y = 60;

parent2 = new Sprite();

addChild(parent2);



parent2.x = 170;

parent2.y = 60;


parent1.addChild(ball);




ball.addEventListener(MouseEvent.CLICK, onBallClick);

}

public function onBallClick(event:MouseEvent):void

{


}

}

}

이 클래스에서는 parent1, parent2, ball이라는 3개의 스프라이트를 생성합니다. 2개의 parent 스

프라이트는 직접 디스플레이 리스트에 추가하고 스프라이트 안에서 사각형을 드로잉하고 있습니다.

ball 스프라이트는 parent1에 추가하였으므로 디스플레이 리스트에서 화면에 보이게 됩니다.

ball을 클릭하면 ball은 parent2에 추가됩니다. ball의 x와 y 위치를 변경하는 코드는 아무것도 사용

하지 않은 것을 주의해 주세요. ball이 이동한 것은 ball이 지금은 이전 스프라이트와는 다른 위치에


있는 스프라이트 안에 있기 때문입니다. 또 ball 스프라이트를 삭제하거나 추가해도 다이내믹하게 드

로잉한 원은 그대로 변함없다는 것을 기억하세요.

디스플레이 오브젝트의 하위클래스화

예전에 도큐먼트 클래스를 작성하기 위한 Sprite나 MovieClip 클래스의 하위클래스화를 배웠는데

Sprite나 MovieClip 클래스의 하위클래스화는 그 밖에도 다양한 사용법이 있습니다.

이제 여러분은 AS 3에서는 attachMovieClip이 더 이상 존재하지 않기 때문에 Flash CS3 IDE의 라

이브러리에서 무비로 어떻게 무비클립 심볼을 가져올 수 있을지 모르겠다, 라고 느낄지 모릅니다. 그

답은 Sprite나 MovieClip 클래스를 확장한 클래스를 사용하면 되는데, SWF 제작에 사용하는 특정

한 툴에 관한 설명은 되도록 피하고 있지만 여기서는 이해를 위해 Flash CS3 IDE에 대해 간단하게 알

아보겠습니다.

이러한 콘셉트를 이해하려면 예제를 작성해 보는 것이 제일 좋습니다.

새로운 FLA 파일을 작성하고, 스테이지에 콘텐츠를 드로잉합니다. 1.

그 콘텐츠를 선택해, F8 키를 눌러 심볼로 변환합니다2.

[Convert to Symbol] 창에서, 심볼명을 설정한 후, [Type] ▷ [Movie Clip]을 선택합니다.3.

[Export for ActionScript]를 선택합니다.4.

이전 버전의 Fla에서는 자동으로 링키지(linkage) 식별자가 작성되어 옵션으로 클래스를 입력할 수

있었습니다.

Flash CS3에서는 [Identi�er] 필드가 무효가 되어 [Class] 필드에 반드시 디폴트 값이 입력되고 있

습니다. 또 [Base Class]라는 새로운 필드가 있고 이 필드에 자동으로 �ash.display.MovieClip이 들어

가 있습니다. 이 필드는 필요한 경우 MovieClip이나 Sprite를 확장한 커스텀 클래스로 변경할 수 있습

니다.

클래스명에 원하는 이름을 입력합니다. 클래스를 아직 생성하지 않았어도 걱정하지 마세요. 입력

하고 OK를 클릭합니다. 여기는 재미있는 곳입니다. Flash는 지정된 이름의 클래스를 찾을 수 없기

때문에 컴파일 타임에 자동으로 그 클래스를 생성합니다. 이것은 Flash가 자동으로 여러분이 만든

ActionScript 클래스를 실제로 생성하는 것이 아니고 SWF 안의 Sprite나 MovieClip에 의한 새로운

클래스를 나타내는 바이트 코드를 작성하는 것입니다. 이 클래스는 기본 클래스를 확장하는 것 이외

에는 아무것도 하지 않지만, 이것에 의해서 라이브러리에 있는 심볼에 링크됩니다.


그럼, 예를 들어 클래스명에 Ball을 입력했다고 합시다. 그러면 도큐먼트 클래스나 타임라인에 다음

코드를 작성할 수 있습니다.

var ball:Ball = new Ball();

addChild(ball);

이것에 의해 AS 2의 attachMovie 메서드와 같이 라이브러리의 심볼이 스테이지에 생성됩니다.

만약 라이브러리로부터 어떠한 콘텐츠를 가진 무비클립을 ‘할당하는’ 것을 원한다면 이것으로 충분

합니다만, 단지 자동으로 작성된 클래스를 적용하는 것이 아니라 작성한 실제 클래스의 이름과 패스

를 지정하고, 그 심볼에 기능을 추가할 수 있습니다. Flash IDE로 돌아와 클래스의 세계에서 다음 예

제를 테스트해 보세요.

실은, 이 부모와 자식 관계를 재구성하는 예제에는 다른 클래스를 사용해 좀 더 간결하게 할 수 있

는 방법이 있으므로 다시 살펴봅시다. 이 예제에서는 parent1이라고 하는 스프라이트를 생성하고 다

음과 같은 코드로 박스를 드로잉했습니다.



그 다음 parent2라는 스프라이트를 만들어, 같은 코드를 사용해 같은 박스를 드로잉해 두었습니다.

이것은 사소한 예제이지만 Sprite 클래스의 하위클래스는 유용한 가능성을 가지고 있다는 것을 명확

하게 나타내 보이고 있습니다. 다음 예제에서는 우선 Sprite를 확장한 ParentBox라는 이름의 클래스

를 생성합니다. 이 클래스에서는 박스를 드로잉하는 코드를 작성합니다.

package {


public class ParentBox extends Sprite {

public function ParentBox()

{

init();

}

private function init():void

{

graphics.lineStyle(1, 0);

graphics.drawRect(-50, -50, 100, 100);

}

}

}


다음에 2개의 Sprite가 아니고 2개의 ParentBox를 생성하도록 클래스를 변경합니다.

package {



public class Reparenting2 extends Sprite {

private var parent1:ParentBox;

private var parent2:ParentBox;


public function Reparenting2() {

init();

}


parent1 = new ParentBox();

addChild(parent1);

parent1.x = 60;

parent1.y = 60;

parent2 = new ParentBox();

addChild(parent2);

parent2.x = 170;

parent2.y = 60;






ball.addEventListener(MouseEvent.CLICK, onBallClick);

}

public function onBallClick(event:MouseEvent):void

{


}

}

}

ParentBox의 인스턴스는 Sprite 클래스를 확장한 클래스의 인스턴스이므로 자식을 추가할 수 있습

니다. 또 그래픽을 자동으로 드로잉하는 새로운 init 메서드도 갖추고 있습니다. 이것은 매우 간단한

예제이지만 이 책을 읽으면서 좀 더 복잡한 예제를 보았을 때 이 예제를 생각해 보세요.


이 예제에 공을 드로잉하는 Ball 클래스를 추가하려고 생각할지도 모르겠지만 추가한다 해도 코드

를 줄이지는 못하고 복잡하게 될 뿐입니다. 1개의 클래스에 뭐든지 겹쳐 쌓는 것이 아니라 다른 클래

스에 기능을 분산시키는 것이 좋은 생각입니다. 이것은 또 재사용을 하도록 도와줍니다. 실제 이제 곧

Ball 클래스를 만들고 그것을 이 책의 여기저기에서 사용할 것입니다.

유저 인터랙션

마지막으로는 여러분이 이 책을 손에 집어 든 큰 이유 중 하나일 것이라 생각되는 유저 인터랙션에 대

한 것입니다. 결국 무비의 인터랙션이나 다이내믹한 입력으로 인한 조작이 없다면 그것은 트윈을 사용

하고 있는 것과 아무 다를 것이 없게 됩니다.

실제로 지금까지의 이번 장에서 다루지 않았던 것을 전부 여기서 다루기에는 지면이 충분하지 않습

니다. 유저 인터랙션은 유저 이벤트에 기초하며 보통 마우스 이벤트나 키보드 이벤트입니다. 몇 개의

유저 이벤트와 핸들러를 대충 확인해 봅시다.

마우스 이벤트

마우스 이벤트는 AS 3에서 크게 바뀌었습니다. AS 2에서 무비클립은 자동으로 모든 마우스 이벤

트의 리스너가 되어 있었지만 AS 3에서는 어느 오브젝트에도 그 자체를 리스너로서 지정해 줄 필요

가 있습니다. 또 AS 3에서 마우스 이벤트를 발생시키려면 마우스 커서가 디스플레이 오브젝트의 비

주얼 콘텐츠와 겹치고 있어야 합니다. 이것은 AS 2부터 바뀐 부분으로 AS 2에서는 mouseUp이나

mouseDown, mouseMove는 마우스 커서의 위치에 관계없이, 아무 무비클립에서도 발생하고 있었습

니다. AS 3의 mouseUp와 mouseDown 이벤트는 AS 2의 onPress와 onRelease에 해당합니다.

마우스 이벤트의 이름은 스트링으로 정의되고 있지만, 이미 말한 것처럼, MouseEvent 클래스의 속

성을 사용하고 실수를 사전에 방지합니다. 아래는 MouseEvent 클래스에서 사용할 수 있는 마우스

이벤트의 속성입니다.

CLICK ▒

DOUBLE_CLICK ▒

MOUSE_DOWN ▒

MOUSE_MOVE ▒

MOUSE_OUT ▒


MOUSE_OVER ▒

MOUSE_UP ▒

MOUSE_WHEEL ▒

ROLL_OUT ▒

ROLL_OVER ▒

이러한 속성에 대해서는 설명할 필요도 없이 단어만 봐도 이해가 될 것입니다. 그 감각을 잡아보기

위해서 다음 클래스를 작성하고 컴파일해 봅시다. 이 클래스에서는 생성한 스프라이트에서 마우스 이

벤트가 발생했을 때 그 마우스 이벤트를 출력합니다.

package {



public class MouseEvents extends Sprite {

public function MouseEvents() {

init();

}

private function init():void

{

var sprite:Sprite = new Sprite();

addChild(sprite);

sprite.graphics.beginFill(0xff0000);

sprite.graphics.drawCircle(0, 0, 50);

sprite.graphics.endFill();

sprite.x = stage.stageWidth / 2;

sprite.y = stage.stageHeight / 2;

sprite.addEventListener(MouseEvent.CLICK, onMouseEvent);

sprite.addEventListener(MouseEvent.DOUBLE_CLICK, onMouseEvent);

sprite.addEventListener(MouseEvent.MOUSE_DOWN, onMouseEvent);

sprite.addEventListener(MouseEvent.MOUSE_MOVE, onMouseEvent);

sprite.addEventListener(MouseEvent.MOUSE_OUT, onMouseEvent);

sprite.addEventListener(MouseEvent.MOUSE_OVER, onMouseEvent);

sprite.addEventListener(MouseEvent.MOUSE_UP, onMouseEvent);

sprite.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseEvent);

sprite.addEventListener(MouseEvent.ROLL_OUT, onMouseEvent);

sprite.addEventListener(MouseEvent.ROLL_OVER, onMouseEvent);

}

public function onMouseEvent(event:MouseEvent):void

{


trace(event.type);

}

}

}

이 클래스에서는 모든 이벤트의 타입에 대해서 같은 핸들러를 사용하고 있으므로 단지 송출된 이

벤트의 타입을 출력할 뿐입니다.

마우스 위치

마우스 이벤트 외에도 도큐먼트 클래스나 디스플레이 오브젝트로부터 사용할 수 있는 매우 중요한 2

개의 속성이 있습니다. 그것은 mouseX와 mouseY라는 마우스 포인터의 현재 위치를 알아내는 속성

입니다. 이 속성은 디스플레이 오브젝트의 속성이므로 되돌려 주는 값은 그 스프라이트의 기준점을

기준으로 한 마우스 위치의 값이 되는 것을 잊지 마세요. 예를 들어, 스테이지에 sprite라는 이름의 스

프라이트가(100, 100)의 위치에 있고, 마우스 포인터가(150, 250)의 위치에 있는 경우 결과는 다음과

같습니다.

mouseX는 150. ▒

mouseY는 250. ▒

sprite.mouseX는 50. ▒

sprite.mouseY는 150. ▒

스프라이트가 그 자체의 위치를 기준으로 어떻게 마우스 위치를 얻어 오는지 주목하세요.

키보드 이벤트

키보드 이벤트도 AS 3에서 대단히 많이 정리되었습니다. 예를 들어 AS 2에서 무비클립은 자동으로

키보드 이벤트의 리스너가 되었지만 정해진 상황에만 그 이벤트를 얻어올 수 있었습니다. 따라서 무비

클립을 리스너로 명확하게 추가하는 것이 최선의 방법이었지만 그 결과 1개의 키보드 이벤트를 얻기

위해 무비클립은 복수의 이벤트를 받게 되어 있었습니다. 아직 더 있습니다. AS 2 컴포넌트 체제에서

는 텍스트필드 내의 Enter 키와 Tab 키의 처리에 관한 탭 관리나 포커스 관리 등 Flash Player 아키텍

처에 있는 키보드를 사용한 상호작용에 관련하는 문제를 처리하기 위해서 대부분의 시간을 소비하였

습니다.

이것들은 지금은 많이 개선되었습니다.


키보드 이벤트의 이름은 마우스 이벤트와 같이 스트링으로 정의되고 있지만, KeyboardEvent 클래

스의 속성이기도 합니다. 그것은 다음 2개입니다.

KEY_DOWN ▒

KEY_UP ▒

키보드 이벤트는 이전 예제에서 마우스 이벤트를 감시한 것과 같이 특정 객체에서 감시할 수 있습

니다. 그러나 그러려면 객체가 그 이벤트를 파악하기 위해서, 그 오브젝트에 포커스를 줄 필요가 있습

니다. 이것은 다음과 같은 코드로 처리할 수 있습니다.

stage.focus = sprite;

대부분의 경우 포커스가 있을지 없을지 신경 쓰지 않고 키보드 이벤트를 감시할 수 있는 것이 편리

합니다. 따라서 직접 스테이지에서 키보드 이벤트를 감시합니다. 아래는 그 예제입니다.

package {


import flash.events.KeyboardEvent;

public class KeyboardEvents extends Sprite {

public function KeyboardEvents() {

init();

}


stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyboardEvent);

stage.addEventListener(KeyboardEvent.KEY_UP, onKeyboardEvent);

}

public function onKeyboardEvent(event:KeyboardEvent):void {

trace(event.type);

}

}

}

키 코드

키보드 전체를 누르거나 떼는 것만 아는 것이 아니라 어떠한 특정 키가 그러는지 알고 싶은 경우도 많

이 있습니다. 이 정보를 키보드의 이벤트 핸들러로 읽어 내려면 2가지 방법이 있습니다.

이전에 이벤트에 대해 말했을 때, 이벤트 핸들러에서는 발생된 이벤트에 관한 정보를 가진 이벤

트 오브젝트를 넘겨 받는다고 했습니다. 키보드 이벤트에서는 이벤트 객체에 포함되는 charCode와


keyCode라는 2개의 속성이 키를 누르거나 뗄 때의 관련 정보를 가지고 있습니다.

charCode 속성에서는 누른 키를 나타내는 실제의 문자를 얻을 수 있습니다. 예를 들어 유저가 키

보드로 “a” 키를 누르면 charCode는 스트링 “a”을 포함합니다. 유저가 그 때 동시에 Shi� 키를 누르고

있으면 charCode는“A”를 포함합니다.

keyCode 속성은 누른 키의 값을 나타내는 키의 번호를 포함합니다. 유저가 “a” 키를 누르면 다른 키

가 눌러져 있든 없든 관계없이 keyCode는 숫자 65를 포함합니다. 유저가 최초로 Shi� 키를 누르고

“a”키를 누르면, 2개의 키보드 이벤트를 얻게 됩니다. 최초로 Shi� 키(keyCode16)의 이벤트, 그 다음에

“a” (keyCode65)의 이벤트를 얻습니다.

�ash.ui.Keyboard 클래스에는 영숫자 이외의 키를 나타내는 속성이 있으므로 이것을 사용하면 키

의 번호를 기억할 필요가 없어집니다. 예를 들어 Keyboard.SHIFT는 수치의 16과 같습니다. 따라서,

keyCode가 Keyboard.SHIFT와 동일한지에 대해 조사하면 SHIFT 키가 눌러졌는지를 판단할 수 있

습니다. 다음 예제에서는 이러한 내용을 보여주고 있습니다.

package {


import flash.events.KeyboardEvent;

import flash.ui.Keyboard;

public class KeyCodes extends Sprite {


public function KeyCodes() {

init();

}



addChild(ball);




ball.x = stage.stageWidth / 2;

ball.y = stage.stageHeight / 2;

stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyboardEvent);

}

public function onKeyboardEvent(event:KeyboardEvent):void {

switch(event.keyCode) {


case Keyboard.UP :

ball.y -= 10;

break;

case Keyboard.DOWN :

ball.y += 10;

break;

case Keyboard.LEFT :

ball.x -= 10;

break;

case Keyboard.RIGHT :

ball.x += 10;

break;

default:

break;

}

}

}

}

키의 처리에 관해서 알아두어야 할 것은 Flash 제작 환경에서 무비를 프리뷰할 때, IDE는 IDE 자체

를 제어하기 위해서 사용할 수 없게 되는 키가 있다는 것입니다. Tab 키나 모든 기능키, 메뉴 항목의

단축키로서 할당할 수 있었던 키는, 프리뷰 중 사용할 수 없습니다. 이것을 무효로 하려면 프리뷰 메뉴

로부터 Control ▷ Disable Keyboard Shortcuts 를 선택합니다. 이 조작에 의해 실제의 브라우저 내

의 동작과 같이 무비를 프리뷰할 수 있습니다.

요약

2장에서는 애니메이션에 필요한 기본적인 액션스크립트를 다뤘습니다. 프레임 루프나 이벤트, 리스

너, 핸들러, 디스플레이 리스트 등에 대해서 충분히 이해했으리가 생각합니다. 또 클래스나 오브젝트

의 기본적인 유저 인터랙션도 다루었습니다. 정말 많은 요소가 있었습니다! 그렇지만, 아직 깔끔하게

설명하지 못한 부분이 있어도 문제는 없습니다. 지금부터 하나하나 기법을 설명하면서 자세히 다루

어 볼 것입니다. 그때 여러분은 언제라도 이 장으로 돌아와서 여러 가지 개념을 복습할 수 있습니다.

여러분이 이 장에서 조금이나마 용어나 개념을 이해할 수 있었으므로 다음으로 넘어갈 준비가 되었

습니다.

액션스크립트 3.0 : 애니메이션 모션의 원리와 고급 액션까지

Documents