본문 바로가기
♣ 강좌/플래시

제2강 액션스크립트의 기본인 if문 이해하기

by 칠칠너래 2006. 3. 25.

1. 학습목표

    if문의 원리를 이해한다.

    if문을 이용하여 액션스크립트를 작성할 수 있다. 

 

지난 강좌에서 배운 내용 복습하기

 
  1. Ctrl+F8 을 눌러 자동차라는 무비클립을 만든다.(가운데 십자가가 나오면 그 십자가를
     중심으로 자동차를 그려 넣습니다. 전 자동차 그림을 복사해서 붙여 넣었습니다. ^^)
  2. Ctrl+L 을 눌러 라이브러리 창을 띄우고 2번 영역을 드래그 하여 장면1의 바탕화면에 붙여
     넣는다.
  3. 바탕화면에 있는 무비클립을 클릭한 후 마우스 오른쪽 버튼을 클릭하여 "속성"을 클릭하고
     인스턴스 이름을 car로 한다. (지난 강좌에서는 ball, 이번에는 car,사실 어떤 걸로 해도
     괜찮습니다. 자기 이름의 이니셜로 해도 되구요. ^^)
  4. 1번 프레임을 클릭한 후 마우스 오른쪽 버튼을 클릭하여 "액션"을 클릭하고 4번과 같이
     써 넣는다.(바탕화면에 있는 무비클립의 이름이 car이므로 _root.car._x 와 같은 형식으로
     쓴 것입니다. 지난 강좌에서는 +5를 했는데 천천히 움직게 하기 위해 +2를 했습니다.)

 

 

사전 팁 :  "문서 속성" 이해하기

 
  1. 타임라인에 있는 위 그림의 1번 영역을 더블클릭합니다.
  2. 위 그림의 2번에 보이는 것이 만들게될 플래쉬의 크기를 나타냅니다.
 
     # 윈도우 바탕화면의 아무 곳이나 클릭한 후 "등록정보"(Windows XP에서는 "속성")를
        클릭하면 "디스플레이 등록 정보"가 나옵니다. 배경, 화면 보호기...(Windows XP에서는
        테마, 바탕화면... 등)등의 옵션이 보이는데 그 중에 "설정"을 클릭하면 해상도가
        나옵니다. 그 해상도에 준해서 플래쉬의 해상도를 이해하면 됩니다.
     * 모니터의 해상도가 800 × 600 픽셀일 때 플래쉬 무비가 550 × 400 픽셀이면 어느 정도
       크기로 보일지 생각해 볼 수 있습니다. 보통은 1024 × 768을 많이 쓰므로 이러한 해상도
       에서 얼마만하게 보일지 고려해 보아야 합니다.(참고로 제 노트북 해상도의 최고치가
       800 × 600 이라서 위 그림과 같이 캡춰할 수 있었던 것입니다.)
 
   3. 맨 위 그림에서의 3번 영역에서 플래쉬의 바탕색을 바꿀 수 있습니다.
   4. 프레임 비율이란 1초에 보여주게 될 프레임 수를 나타낸 것입니다. 12 fps는 12 frame/s의
       뜻으로 1초에 12프레임을 보여준다는 뜻입니다. (1초에 12플레임보다 작은 프레임을 보면
       연속동작으로 안 보입니다. 끊겨 보이죠. 참고로 영화는 1초에 24프레임을 보여줍니다.
       전문가의 말에 의하면 플레쉬 게임을 만들때 보통 24프레임을 사용한다고 하더군요.)

 

 

 

2. 조건걸기 (if문의 원리를 이해한다.)

 

@ "액션스크립트의 기본 원리 이해하기"에서 만들었던 플래쉬의 단점 : 오른쪽으로 이동하는 공이

    멈추지 않는다. 특정 위치까지만 움직이도록 하기 위해서는 어떻게 해야할까?

  

 1. 300픽셀정도까지만 움직이고 멈추게 하기 (플래쉬의 크기가 550×400 일 때)

 

     1번 프레임의 액션을 다음과 같이 해 주면 됩니다.

    

       function go(){

           if (_root.car._x < 300){

               _root.car._x = _root.car._x + 2;

           }

       }

       setInterval(go, 25);

 

       _root.car._x = _root.car._x + 2; 를 if(조건){ } 안에 넣은 것입니다. 여기서의 조건은

    "무비클립의 x좌표가 300보다 작다"는 것입니다.

    그러니까 무비클립의 x좌표값이 10 이면 300보다 작기 때문에 if문({}안에 들어 있는 내용 -

    x좌표를 2 증가시키라는 명령)을 실행하게 됩니다. setInterval에 의해 0.025초 후에 다시

    go함수가 실행됩니다. 또 다시 if문을 검증하게 되고 300보다 작으면 if문을 실행합니다. 이렇게

    계속 x좌표값이 커져서 298까지 되었다고 합시다. 역시 300보다 자기 때문에 2를 증가시키게

    됩니다. 이제 드디어 300이 되었습니다. setInterval에 의해 0.025초 후에 다시 if문의 조건을

    따집니다. 300은 300보다 작지 않기 때문에(같은 값이죠. ^^) if문을 실행하지 않습니다. 즉,

    x좌표를 2만큼 증가시키라는 명령을 수행하지 않는 거죠. 따라서 무비클립은 300이라는

    자리에서 움직이지 않고 가만히 있는 것입니다.

 

    매우 기초적이면서도 엄첨 중요한 개념입니다.  if문만 제대로 이해를 해도 웬만한 모션은 다

    표현할 수 있습니다. 제대로만 이해하면.... ^^


활용 팁 : 무비클립의 x좌표값 및 width 값

 

 
위 그림을 바탕으로 y값과 height 값은 어떻게 될까 추측해 보세요. ^^
 
 
 

 2. 300픽셀정도까지만 움직이다가 300픽셀이 넘으면 원래자리(x좌표가 10인 자리)로 이동시키기

           

    1번 프레임의 액션을 다음과 같이 해 주면 됩니다.    

   

       function go(){

           if (_root.car._x < 300){

               _root.car._x = _root.car._x + 2;

           }else{

               _root.car._x = 10;

           }

       }

       setInterval(go, 25);


   무비클립의 x좌표값이 300보다 작으면 x좌표값을 2씩 더해주고 그렇지 않으면(else) 무비클립의

   x좌표 값을 10인 위치에 놓아라. 뭐, 그런 내용입니다. (setInterval이라는 명령어에 의해 0.025초

   마다 go함수를 실행시켜 주기 때문에 0.025초마다 2씩 더해주는 것입니다. setInterval이라는

   명령어를 이용해 주기적으로 go함수를 실행시켜주지 않으면 무비클립은 움직이지 않습니다.)

 
   위 스크립트를 적용해서 실행(Ctrl+Enter)시켜 보면 자동차가 오른쪽으로 가다가 순간적으로
   원래 자리로 다시 가고 다시 오른쪽으로 가다가 순간적으로 원래 자리로 돌아가고를 계속해서
   반복할 것입니다. 왜 그렇게 되는지는 본인 스스로 생각해 보시길 바랍니다. ^^
 
   이러한 문제점을 다음 강좌에서 해결해 볼 생각입니다. 사용자가 마우스를 클릭하면 움직이고
   어느 지점에 도착하면 원래 자리로 가서 정지해 있는 겁니다. 또 마우스를 클릭하면 움직이고...
   이 정도는 되어야 사용자와 조금은 상호작용이 있다라고 할 수 있습니다. ^^
 

 

3. 과제(if문을 이용하여 액션스크립트를 작성할 수 있다.)


 
   1. 무비클립을 조금씩 아래로 움직이게 하다가 어느 지점 이상이 되면 원래 자리로 되돌아 가게
       한다. (힌트 : _y)
   2. 무비클립을 조금씩 작아지게 하다가 10픽셀보다 작아지면 사라지게 한다. (힌트 : _widht,
       _height, _visible)
   3. 무비클립을 조금씩 작아지면서 회전하다가 크기가 10픽셀보다 작아지면 조금씩 흐려지다가
       사라진다. ( 힌트 : _width, _height, _alpha)
 
#제대로 배워 보고 싶으신 분은 반드시 과제를 해 보시기 바랍니다. 잘 안되면 덧글로 질문하세요. 힌트를 더 드리겠습니다. 만든 swf파일을 "과제 제출방"에 올려 주세요. ^^