본문 바로가기

동강의AS3.0 강좌

[Base] 1강 Flash CS3 Actionscript3.0


 안녕하세요. Actionscript3.0 기초강좌를 하게된 '동강'입니다. 짧은 Actionscript 의 이해를 가지고 있지만, Flash 를 처음 시작하는 분들이나 as2.0 을 쓰다가 새롭게 3.0 을 배우는 분들에게 좀더 빨리 AS3.0 에 적응을 돕고자 기초 강좌를 하게 되었습니다.  

 우선 기초강좌의 내용은 프로그래밍에 기본이되는 문법들 예를 들어 if 문 사용 방법이라든지, function 사용법은 다 안다는 가정하에 진행하겠습니다. ( 다른 C 나 Java 와 확연하게 구분되는 부분만 설명 ) 

 자 이제 부터 시작하겠습니다. 3.0 정복을 향하여~ 우왕 

 자주 쓰이게 되는 trace(); 함수는 C 에서는 printf , Java 에서는 System.out.println, C++ 에서는 cout 이라고 생각하시면 됩니다. trace(이름); 이름에 대한 내용을 output 창에 출력해 주는 역할을 합니다.


0. Actionscript 3.0 
Flash 는 객체 지향을 기반으로 하고 있는 타임라인 프로그램 입니다. Flash 에서 그려지고, 정의 되어 지는 모든 것들은 타임라인 위에 정의가 되고(그려진다) 타입 라인 위에서 조작이 되게 됩니다. 타임라인 프로그램이란 말은 예를 들면 Layer 1 위 1 frame 에 객체를 생성하게 되면 action 레이어 에서 해당 객체를 접근할수 있습니다. 하지만 아래의 경우 "Layer 1" 1frame 에 rect 라는 무비 클립을 정의해 놓고  "action" 레이어의 2frame 에 trace(rect); 를 출력해 보면 접근 할수가 없다고 error 가 발생합니다.


타임라인 프로그램이라는 말이 무슨 뜻인지 아셨는지요? 레이어에 actionscript 를 작성하여 객체를 접근할때는 레이어에 입력되어 있는 actionscript 의 발생 순서를 잘 이해하고 있어야 합니다. 한번 프레임에 Actionscript 를 정의를 하게 되면 그 정의는 frame 이 바뀌어도 계속 유지 되게 됩니다. 예를 들어 위의 Action Layer 에 var num:int = 0;  이라 정의를 하게 되면 프레임이 이동 되어도 그 정의는 유효 하게 됩니다.

객체의 경우에도 마찬가지로 적용되는데, Actionscript 를 적용할때는 항상 action 이 들어 가 있는 같은 frame 에 actionscript 를 이용해서 조작할 해당 객체가 존재 해야 됩니다.

1. Actionscript3.0 의 시작
Actionscript(이하 as 라 하겠습니다) 는 다른 웹 언어와 마찬가지로 ECMAScript 규정을 따르고 있습니다. 이 말은 다른 프로그래밍과 문법이 비슷하다는 말입니다. Java 를 사용해보신 분들은 거의 같다고
생각하시면 될것 같습니다.

자주 쓰는 변수의 선언 형태는 Number , int, MovieClip, TextField, Array 등등 이 있고 선언 형태는
var num:Number = new Number();
var mc:MovieClip = new MovieClip();

 + - * / 연산자도 같은 형식으로 쓰입니다.


2. Event

이론 적인것은 여기 까지 하고 ( 한것도 없지만 ) 이제 실제로 해 보겠습니다. Flash 에서 정의 되는 객체 들은 Event 를 가지고 있고, 그 해당 객체 들과 EventListener 로 연결이 되어 있습니다. 객체를 사람이라고 하면 EventListener 는 그사람의 귀 입니다. 귀를 통해서 무엇을 하라는 것을 듣고 사람은 행동하게(이벤트를 발생) 되는 것입니다.( 자신이 행동할수도 있고, 다른사람을 시킬수도있습니다) 우선 Stage(메인 창) 에 원을 그리고 F8 을 눌러 MovieClip 으로 지정합니다. 그리고 그 이름은 circle_mc 라고 하겠습니다.


Name 을 circle_mc 라고 지정하였는데 Name 을 circle_mc 라고 했다고 해서 circle_mc 로 접근할수 있는 것은 아님니다. 단순히 객체들의 저장공간인 Library 에서 사용자가 알아 보기 쉽게 하기 위한 이름일 뿐 그 이상이 아님이다. 실제로 as 를 이용하여 접근하기 위해서는 무비클립을 클릭한후 아래 나오는 Properties 창에 circle_mc 라고 입력해 줍니다. 이제 action Layer 를 클릭하고  F9 눌러 as 를 입력합니다.

 

trace(circle_mc);

//output

[object MovieClip]

위에서 정의된 객체를 MovieClip 이라 합니다. 벡터 기반의 편리한 속성을 가지고 있는 이미지 객체라고 생각하면 되겠네요 MovieClip 의 속성은 아주 많지만 우선 기본적으로 를 가지고 있고, 더 자세한건 F1 을 눌러서 참고 하세요.

circle_mc.x             // 객체의 x 좌표 위치
circle_mc.y            // 객체의 y 좌표 위치
circle_mc.width       // 너비
circle_mc.height      // 높이
circle_mc.alpha       // 투명도

이 해당 객체에 Event를 걸어 줄수 있는데 이벤트를 거는 문법은 다음과 같습니다.

circle_mc.addEventListener(MouseEvent.MOUSE_OVER, mouseOverhandler);       
// 해당 객체에 마우스 오버
circle_mc.addEventListener(MouseEvent.MOUSE_OUT,mouseOuthandler); 
//  해당 객체에 마우스 오버
circle_mc.addEventListener(MouseEvent.CLICK, mouseClickhandler); 
//  해당 객체에 마우스 클릭
circle_mc.addEventListener(Event.ENTER_FRAME, enterframehandler);   



등등 의 이벤트를 생성해 줄수 있으며, 그 해당 이벤트에 대한 함수를 호출 하는 방식으로 동작을 수행하게 됩니다. 예를 들어 ex) ->
circle_mc.addEventListener(MouseEvent.MOUSE_OVER, mouseOverhandler); 
마우스 오버 에 대한 이벤트를 정의하고

function mouseOverhandler(event:MouseEvent):void{
        // 동작 수행을 위한 코드

마우스가 해당 객체에 오버 되면 mouseOverhandler 함수가 실행 되게 됩니다. 파라미터로 넘어 가는 (event:MouseEvent) 에는 MouseEvent 와 이벤트가 발생하는 해당 객체에 대한 정보를 가지고 있으며event.target , event.currentTarget 등의 형태로 이용되게 됩니다. ( 자세한 구분은 추후에 하도록 하겠습니다 )


  1. circle_mc.addEventListener(MouseEvent.MOUSE_OVER, mouseOverhandler);
    // 마우스 오버 에 대한 이벤트를 정의하고
  2.  
  3. function mouseOverhandler(event:MouseEvent):void 
  4. { 
  5.       event.target.x += 10
  6. } 
  7. // circle_mc 에 마우스를 오버 하면 x 위치를 10씩 증가 시키겠다.
  8.  
  9. Out 이벤트와 같이 써보면 
  10. circle_mc.addEventListener(MouseEvent.MOUSE_OVER, mouseOverhandler);
    // 마우스 오버 에 대한 이벤트를 정의하고 
  11. circle_mc.addEventListener(MouseEvent.MOUSE_OUT,mouseOuthandler);          
      // 아웃 이벤트 정의
  12.  
  13. function mouseOverhandler(event:MouseEvent):void{ 
  14.       event.target.x += 10;                            
    // event 에는 정보가 들어 있습니다. event를 줄여서 e 나 ev 로 쓰기도 합니다.
  15.  
  16. }                                                              
    // 함수 안에서 사용되는 이름만 같게 해주면 상관 없습니다. 
  17. function mouseOuthandler(event:MouseEvent):void 
  18. { 
  19.       event.target.x -= 10
  20. }

이런식으로도 쓰일수 있겠네요, 위와 같이 Flash 에서 정의 되어지는 객체 들은 다양한 Event 를 가질수 있습니다. 위에서 예를 든것은 무비 클립의 한 단면이고요. 약간만 응용하면 버튼을 만들고 버튼 클릭시 움직이는 원을 만들수 있습니다. 

그렇다면 버튼을 생성해야 되겠지요? 버튼 생성후 (cl_btn)


  1. cl_btn.addEventListener(MouseEvent.CLICK, clhandler);
  2.  
  3. function clhandler(event:MouseEvent):void
  4. {
  5.  if(circle_mc.x < 550)                // x 값이 Stage 보다 커지면  -5 위치로 옮긴다.
  6.   circle_mc.x += 10;
  7.  
  8.  else
  9.   circle_mc.x = -5;
  10.  
  11. }

무비 클립에 간단한 마우스 이벤트를 적용해 보았습니다. 이제 슬슬 이벤트가 어떤식으로 왔다 갔다 하는지 감이 오시는지요? 간단한 이벤트 들이지만 제일 많이 쓰이게 되는 두 이벤트입니다. 앞으로 MovieClip 을 계속 해서 사용하게 될텐데요. MovieClip 에 대해 F1 을 참고해 보시는 것도 좋을듯 싶습니다.
(F1 는 Flash 프로그램 안에서 제공되는 도움말 입니다. )
한글 도움말 주소는 : http://livedocs.adobe.com/flash/9.0_kr/ActionScriptLangRefV3/index.html 

다음 강에서는 Flash의 핵심이라 할수도(?) 있는 이벤트 ENTER_FRAME 에 대해 알아 보겠습니다. 화려한 모션을 하게 해주는 원동력이라고 할수 있습니다.