[Base] 2강 Event 의 이해 와 꼭 알아 둬야할 프로그래밍의 기본

AS3.0_2번째강의예제.fla

1강에서 3.0 의 대략 적인 소개와 다시 읽어 보니깐 대충 넘어 간 부분 들이 있어서 정리해 보았습니다.

0. 연산자 

연산자 라고 하면 + , - , / , * , == , => , != , += , -= , &&, || 등등 여러가지가 사용 되고 있습니다. + 는 

var num = 200+ 100;
var num = num + 100;   ===> num += 100; 과 같은 의미로 쓰임니다.

그러면 i += 1; 은 i = i + 1 이겠지요? 또 다르게 표현하면 i++, ++i 로 표현 가능합니다 i++,++i 차이는
전위 연산자와 후위 연산자라고, i 가 단독으로 쓰이면 차이가 없이 쓰임니다. 저런게 있다는것만 알아 두시면 될것 같아요. - 도 +와 똑같은 형식으로 쓰입니다. 프로그래밍을 처음 하실때 헛갈린 부분이 '=' 와 '==' 차이 입니다. 종종 질문에 if문 안에 = 를 쓰시고 if 문이 생각대로 안돌아 간다고 하시는 분들이 많은데 A 와 B 가 있을때,

A = 10; B = 34;
A = B
trace(A); 
// output
34 

이런 식으로 오른쪽 변수를 왼쪽 변수에 할당 한다는 의미로 쓰입니다. 그러니깐 아무리 if 문에서 = 를 써봤자 원하는 연산과정이 수행이 안되는 것입니다. if ( 조건 ) if 문은 안에 들어 있는 조건이 0 이 아니면 무조건 (1 이상이면) true 라고 인식을 합니다. 컴퓨터 프로그램에서 0 은 false 를 1 은 true 를  의미 합니다. 그럼 00000000000000000 은? 0 입니다 false 

0.0 and 와 or 연산자 (&& , || , | , & )

&& 는 and 연산 즉 둘다 성립해야 true 를 반납하는 and 연산자 입니다. 예를 들어

var A = 10
var B = 5
var C = 14
if( A > B && C > A) = > true 
if( A > B && C < A) = > false
if( A < B && C < A) = > false

|| 는 or 연산 즉 둘중 하나만 성립해도 true 를 반납합니다.

if( A > B || C > A) = > true 
if( A > B || C < A) = > true
if( A < B || C < A) = > false

&& 와 & 의 의미상의 차이점은 없지만, 컴퓨터 연산에서 || 의 경우 || 로 이어진 if(W||E) 조건이 있을때 W 가 true일 경우 뒤에 조건은 무시하고 바로 true 를 리턴하여 연산 속도를 향상시켜 줍니다. 보통은 &&, || 를 많이 사용합니다.

1 . 조건문

if 문의 경우 if - else 문과 그냥 순수히 if 문으로 나열된 경우 두가지를 생각할수 있는데,
if - else 문은
if(A){}
else{}
A 조건이 아니면 else 문을 실행한다.

if(A){}
else if(B){}
else{}
A조건이 아니면 B 문 B조건이 아니면 else 를 실행 합니다.
그냥 if 문으로만 연결된 경우에는
if(A){}
if(B){}
if(C){}
if(D){}
일일이 4가지 경우를 모두 확인하게 됩니다. 오해의 소지가 있을 만한 부분을 써 보았습니다. 

 

2. Timeline

위와 같이 레이어에 액션이 써 있을 경우 실행 되는 순서는 어떻게 될까요?
4번 부터 실행 됩니다. 예를 들어 1 번 레이어에 var a = 10; 라고 써놓고 2번 레이어에서 trace(a); 를 실행 시켜 봅시다. undefined 가 출력됩니다. 같은 프레임에 있어도 엄연하게 실행 순서가 존재 합니다. 위에서 아래로 꼭 기억해 두세요.

3. 전역변수와 지역 변수

var a = 0; 
function varible():void
{
       var b = 10;
}
trace(a);
trace(b);
// 어떤 결과가 나올까요?

1120: Access of undefined property b. b 를 접근 할수 없다네요.

 

// 왜 위에서는 undefined 라고 알려 줬는데 여기서는 접근 할수 없다고 하는거냐!! 위의 질문은 다음으로 미루고, (조금 생각해 보세요 ) 위에서 정의한 것과 같이 a 는 전역 변수이고 b 는 지역 변수 입니다.

전역변수 : 어느곳에서나 쓰일수 있다. fla 파일 스크립트 작성시 위에서 언급했던 코드 작성의 전후 관계만 맞춰 사용한다면 어느 곳에서나 접근이 가능한 변수를 말합니다.
지역변수 : b 는 왜 접근할수 없을까요? 간략히 말하면 b 는 varible 함수에서만 존재하는 값 입니다. varible 함수가 실행됨과 동시에 생성되고 varible 함수가 종료하게 되면 소멸하게 되지요.

이 개념은 함수 사용에도 동일하게 적용이 됩니다.

var a = 10;
ba();
function ba():void{
   var k = 20;
   trace(k);
   function ab():void
    {
           trace(a);
           trace(k);
     }

}

// 20
var a = 10;
ab();
function ba():void{
   var k = 20;
   trace(k);
   function ab():void
   {           
         trace(a);
         trace(k);
   }

}

// 1180: Call to a possibly undefined method ab.

ba 안에 있는 ab 함수 역시 ba 안에서만 존재하는 함수로 치부가 됩니다. 전역변수와 지역변수의 개념은 엄청나게 중요한 개념이니 잘 잡고, 넘어 가시는게 좋습니다.

4. Function

함수는 코드의 재 사용성을 위한 보따리 입니다. 자주 사용될 코드를 함수로 만들어 놓으므로서
코드를 심플하게 만들며, 상황에 따라 코드를 적용할수 있게 해주는 편리한 도구 입니다.
as 에서 쓰이는 방식은 아래와 같으며 
function 함수명(넘겨줄변수명:타입, 넘겨줄변수명:타입 ......):리턴타입 예를 들어 보겠습니다

var num1 = 20;
var num2 = 34;
var sum = test(num1,num2);
trace(sum);
function test(a:int, b:int):int
{

   var c = 0;
   c = a + b;
   return c;

}
// 54    return 해 주는 c 를 sum 을 이용해서 받습니다.  

var num1 = 20;
var num2 = 34;
var sum = 0;
test(num1,num2);
function test(a:int, b:int):void{
   sum = a + b;
}
trace(sum);
// 54  전역변수인 sum 에 바로 대입합니다.

여기서 void 는 이 함수는 return 을 시키지 않겠다는 뜻 입니다. 이 함수 개념이 더욱더 확장된게
Class 입니다. class 는 천천히 다루도록 하겠습니다. 아 잠깐만 다루려고 했던 개념들이 쓰다 보니깐 왕창 길어 졌네요;; Event 하려고 했는데;;

5. Event - Enterframe ( 왕중요 )
지금까지의 지루했던 플밍 개념들은 접어 두시고 , 재미 있는(?) 플래시의 세계로 돌아왔습니다. 지난 강에서는 MouseEvent 에서 Over 와 Out 을 써 보았는데요. 이번 강에서는 enterframe 을 잠깐 소개 하고 다음 강에서는 먼가를 만들어 보도록 하겠습니다. 플래시 창의 하단 Properties 창을 보면

Frame rate XX fps 가 있습니다. fps 뭘까요? frame per second  프레임 기반인 flash 툴에서 1초당 몇 프레임을 이용시킬 것이냐(몇 프레임을 랜더링 할 것이냐) 하는 말입니다. 영화 TV 도 이 프레임 개념으로 우리 들의 눈속임을 하고 있는 것이지요 ( 잔상효과 ? ) 12 fps 란 말은 초당 12 frame 을 이동(보여 줄것이다) 시킬 것이다를 의미 합니다. 따라서 fps 를 높일 수록 움직임이 자연스러워지겠지요? ENTER_FRAME 은 이 fps 에 기본을 두고 있습니다. 사용법은 다음과 같습니다. 
스테이지에 원을 그리고 F8 을 눌러 무비 클립으로 만든후 원 이름을 circle_mc 라 합니다.( 1강 참고 )
그리고 fps 를 36 으로 조절 합니다.

1. //code
2.  
3. circle_mc.addEventListener(Event.ENTER_FRAME, framehandler);
4.  
5. function framehandler(event:Event):void
6. {
7.  
8.       if(circle_mc.x < 550)            
   // 배경 width 이 550 이므로 x 값이 550 을 넘어 가면 0 으로 옮겨 준다.
9.              circle_mc.x += 3;
10.  
11.       else
12.  
13.              circle_mc.x = 0;
14. }
    

실행!!  fps 를 바꿔가면서 실행해 보세요. 아래 화면은 63 fps 로 처리한 것입니다. 이처럼 ENTER_FRAME 이벤트는 fps 에 종속되어 fps 속도 의 빠르기로 ENTER_FRAME 과 연결된 함수인 framehandler (함수 이름은 다르게 써도 무방합니다 ) 를 계속 해서 실행 시켜 줍니다. 이벤트를 지워주기 까지는... 
이제 버튼을 추가 해서 이벤트를 제어해 보겠습니다. 원과 같은 방식으로 무비 클립을 두개 생성합니다.
start_mc  ,stop_mc

//code start_mc.buttonMode = true;                  // 마우스를 오버 했을때 손가락이 나타나게 한다. stop_mc.buttonMode =true; circle_mc.addEventListener(Event.ENTER_FRAME, framehandler);   function framehandler(event:Event):void {         if(circle_mc.x < 550){             // 배경 width 이 550 이므로 x 값이 550 을 넘어 가면 0 으로 옮겨 준다.              circle_mc.x += 3;    }       else{              circle_mc.x = 0;    } }   start_mc.addEventListener(MouseEvent.CLICK, startClickhandler);       // 시작 버튼 function startClickhandler(event:MouseEvent):void {    circle_mc.addEventListener(Event.ENTER_FRAME, framehandler);   }   stop_mc.addEventListener(MouseEvent.CLICK, stopClickhandler);      // 정지 버튼 function stopClickhandler(event:MouseEvent):void {    circle_mc.removeEventListener(Event.ENTER_FRAME, framehandler); }

위의 코드와 같이 생성된 이벤트를 제거 해 주는데는 removeEventLister 가 쓰이게 됩니다. addEventListener 로 한 객체에 EventListener를 add(더해) 줬으니 remove 해 주겠다는 뜻이지요.
사용법은 addEventListener 로 등록했을때 의 똑같은 형식으로 add 를 remove 만 바꿔주면 됩니다. 

ENTER_FRAME 이벤트의 기본적인 동작에 대해 알아 보았습니다. 다음 강에서는 ENTER_FRAME 이벤트를 이용하여 작업 하는 것들에 대해 더 알아 보겠습니다. 

 

.