본문 바로가기

동강의AS3.0 강좌

[Base] 6강 - Document Class 로의 진화


안녕하세요 "동강" 입니다. 저번 시간에 이어서 Class 의 대한 이야기를 계속 해나갈까 합니다. 앞으로의 강좌에서는 frame 액션의 사용을 최대한 버리고, 오직 Class 상에서의 액션으로 진행하겠습니다. 우선 Class 에 대해 다시 한번 알아 보도록 합니다. 클래스를 알기 위해서는 우선 객체 지향 프로그래밍 부터 알아야 합니다.  

0. Class 와 객체 지향 프로그래밍  

그럼 객체 지향 프로그래밍은 무엇일까요? 흔히 OOP 라고 알고 있는 객체 지향 프로 그래밍은 말 그대로 객체 하나하나를 존중해서 프로그래밍 한다는 의미 입니다.  

예) 자전거를 예로 들면, 움직이는 자전거를 프로그래밍 한다고 생각해 봅시다. 우선 자전거를 기능 별로 나눠 보면 앞바퀴 부분, 뒷바퀴 부분, 페달 부분, 그리고 몸체 부분으로 나눌수 있습니다. 이것들 하나하나가 다 클래스가 되는 것이지요. 각각의 클래스들의 서로의 연관 관계는 나중에 생각하기로 하고, 앞바퀴 클래스의 안을 들여다 보면 그 안에는 기어가 있고, 바퀴 타이어가 있고, 바람 넣는 구멍도 있고, 여러 가지 클래스 안의 구성물들이 존재 합니다. 이 구성물들은 자신의 부모 클래스의 지시에 따라 움직이게 됩니다. 

이때, 페달을 밟고 있는 사용자는 바퀴의 기어 부분에서 무슨일이 일어 나고 있다는것을 모두 신경쓰고 있어야 될까요??    아님니다. 사용자는 오직 페달 부분에만 신경 쓸뿐 바퀴가 돌아 가는건 신경을 쓰지 않아도 됩니다. 바퀴는 페달이 관장을 하겠지요. 객체 지향이 뭔지 감이 좀 오시나요? 이 객체 지향 프로그래밍 방법론(OOP)으로 구성되어 있는것이 Actionscript 자체 입니다.

( "대충 설명 하고서 먼 감이 오냐" 라는 분들을 위해 자료를 첨부하겠습니다 ;;; )

여기에서 우리가 곡 알고 넘어가야 할 부분은  객체지향 프로그래밍( 앞으로는 OOP 라 하겠습니다 )의 특징중 상속이란 개념입니다. 상속은 무엇일까요? 앞에 강에서 언급했던 것이 이어서 말하겠습니다 ( 2~4강을 참고 하세요 ) Actionscript는 객체 지향 자체의 언어 입니다. 우리가 지금 까지 썼던 MovieClip 도 Flash 안에서 정의 되어 있는 내장 클래스 입니다   

MovieClip 

MovieClip  Sprite  DisplayObjectContainer  InteractiveObject  DisplayObject  EventDispatcher  Object 

Object 에서 시작하여 살을 붙이고 붙여 MovieClip 이 탄생하게 되는 것이지요. 그럼 Object 는 뭐냐? Object 는 아무 것도 없는 하나의 공간 입니다. 여기에는 무엇이든 넣을수 있고, 어떤 한 물건을 넣어서 한종류의 어느 무엇으로도 사용될수 있습니다. (배열같이 사용될수도 있고, 그냥 무비 클립으로도 사용될수도 있다는 뜻입니다) 대략 적으로 위의 상속 구조를 언급한다면, Object 의 빈 공간에서 시작하여

1. EventDispatcher 에서 Event 를 가질수 있는 구조를 상속 받는다.
( MovieClip 의 addEventListener 는 괜히 가지고 있는게 아니겠지요? 여기에서 상속 받은 것입니다.)
2. DisplayObject 에서 화면에 보일수 있는 객체로 정의 되어 진다.
3. InteractionObject 에서 마우스와 키보드와 상호 작용할수 있는 속성을 상속 받는다.
4. DisplayObjectContainer 에서 무엇인가 담을수 있는 그릇으로 진화 한다.
5. 기본 표시 목록을 구성하는 단위로 그패릭을 표시할수 있고, 자식도 포함할수 있는 Sprite 가 만들어 지게 된다.
6. 타임라인이 추가 되어 MovieClip 이 완성 된다.  

Object 는 무한한 공간이지만 속성이 없습니다.
MovieClip 은 무한한 공간은 아니지만 속성이 많습니다. ( 상속을 통한 속성 추가 )
이제 이러한 것들이 어떻게 사용되는 가를 보겠습니다.  

- Document Class 로의 진화 

CS 3 들어 와서 가장 큰 변화의 하나는 Document Class 로 정의 되는 fla 파일의 main 클래스 부분 입니다. Document class 는 그 자체로 fla 의 타임라인이라고 생각하시면 됩니다. fla 파일의 라이브러리 및 stage 에 있는 모든 객체들의 접근이 가능하고, 타임라인에서 조정했던것과 마찬가지로 객체들을 바로 바로 움직일수 있습니다.  


main 이라 써 있는 저 부분에 지정을 하여 사용합니다. (위의 M 자를 m 으로 바꾸세요;; ) 그리고 stage 위에 무비 클립을 만들고 이름을 지정해 보세요. 여기서는 circle_mc 로 하겠습니다. 이제 main class 파일을 만듬니다. File - > New -> ActionScript File  기본 문법이기 따라서 타이핑 하세요. 

// main.as

 
  1. package {
  2.        
  3.         import flash.display.MovieClip;
  4.        
  5.         public class main extends MovieClip
  6.         {
  7.  
  8.                 private var text:Number;
  9.              
  10.                 public function main():void
  11.                 {
  12.                         trace(circle_mc);
  13.                        
  14.                 }
  15.                
  16.         }
  17.        
  18. }
  19.  

 그리고 main.as 와 fla 파일을 같은 폴더에 저장합니다. 실행해 보세요.
// output
[object MovieClip]  

접근이 되나요?
main.as 에 대해 설명 하면 class 는 생성자와 class 인스턴스 그리고 인스턴스 함수로 이루어 짐니다.

위에서

  1.   public function main():void
  2.                 {
  3.                         trace(circle_mc);
  4.                        
  5.                 }

이 부분이 생성자 Class 가 생성되어 질때 실행 되는 부분입니다. 여기에서는 fla 파일이 실행 되자 바자 이 함수가 호출되어 실행 되어 집니다.  

 private var text:Number;  

이 부분이 Class 인스턴스를 선언하는 부분입니다. 걍 쓰일 변수를 여기에 선언한다고 생각하면 됩니다. 이제 circle_mc 에 간단한 마우스 이벤트를 추가해 보겠습니다. 

 
  1. package {
  2.        
  3.         import flash.display.MovieClip;
  4.         import flash.events.MouseEvent;
  5.        
  6.         public class main extends MovieClip
  7.         {
  8.                
  9.                 public function main():void
  10.                 {
  11.                         trace(circle_mc);
  12.                        
  13.                         circle_mc.addEventListener(MouseEvent.MOUSE_OVER, fcircleOver);
  14.                        
  15.                 }
  16.                 private function fcircleOver(e:MouseEvent):void
  17.                 {
  18.                         trace("마우스 오버");
  19.                        
  20.                 }
  21.                
  22.         }
  23.        
  24. }
  25.  

바뀐점은 import flash.events.MouseEvent; 입니다. fla 와 다르게 class 파일에서는 내장함수를 직접 불러 올수 없습니다 .( 참고로 fla 에서도 자주 쓰는 class 만 fla 파일 만들때 불러와 지는 것으로 보입니다 ) 그래서 import 문으로 그 class 를 불러 오는 것이지요. 멀 불러 오는지 어떻게 아느냐? 저 같은 경우는 F1 의 예제를 참고해서 import 합니다. 

잘 되나요??  

구지 어려운 개념인 Document class 로 작업을 하자고 한건, frame 액션으로 막코딩을 하다 보면 잘못된 습관이 들수도 있다는 생각이 들어서 입니다. 저도 frame 액션으로 시작해서 막코딩에서 Document 로 넘어 올때 편한 frame 액션만 찾다 보니 점점 코드가 엉망이 되더군요. 위에 있는 기본 뼈대만 잘 알아 놓으신다면 frame 액션 보다 휠씬더 효율 적이라는 것을 금방 느끼실수 있을것 입니다. frame 액션보다 class 액션이 좋은 몇가지만 말씀 드리자면, 

1. 유지 보수가 쉽다.

2. 코드가 알아 보기 쉽다.

3. 객체 지향 프로그래밍으로 발전 하기 위해서는 꼭 필요한 요소 이다.  

입니다. 갑자기 어려워 져서 당황하는 분들이 많이 있으실것 같습니다. 어렵다고 포기 하지 마시고, 천천히 따라해 보세요. 잘 안되는 부분은 바로 질문 올려 주시고요.
그럼 4강에서 했던 예제 파일을 Document class 형식으로 바꿔보는 것으로 이번 강을 마치겠습니다.

 

 
  1. package {
  2.  
  3.         import flash.display.MovieClip;
  4.         import flash.events.MouseEvent;
  5.         import fl.transitions.easing.*;
  6.         import fl.transitions.Tween;
  7.  
  8.  
  9.         public class main extends MovieClip {
  10.  
  11.                 public function main():void {
  12.  
  13.                         for (var i:int = 0; i < 50; i++) {
  14.                                 var cir:Circle = new Circle();
  15.                                 cir.x = Math.random() * 550;
  16.                                 cir.y = Math.random() * 400;
  17.                                 addChild(cir);
  18.                         }
  19.                         addEventListener(MouseEvent.MOUSE_OVER, mouseOverhandler);
  20.  
  21.  
  22.                 }
  23.                 function mouseOverhandler(event:MouseEvent):void {
  24.                         var targetX = Math.random() * 550;
  25.                         var targetY = Math.random() * 400;
  26.                         new Tween(event.target,"x",Strong.easeOut,event.target.x,targetX, 30,false);
  27.                         new Tween(event.target,"y",Strong.easeOut,event.target.y,targetY, 30,false);
  28.  
  29.  
  30.                 }
  31.         }
  32. }

 한번 해 읽어 보기 : 객체 지향 프로그래밍 , 상속 개념
과제는 자신이 지금까지 frame 액션으로 작성하시던 예제 하나를 Document class 형식으로 바꿔서 제출 하셨으면 합니다.   

수고 하셨습니다. 다음강에는 개념보다는 실습으로 이뤄지도록 하겠습니다. ( 개념이 어렵네요;;; )