제3강 액션스크립트의 기본인 변수의 사용과 if문

1. 학습목표    ① 변수를 이해하여 활용할 수 있다.    ② 변수를 이용하여 if문을 작성할 수 있다.    지난 강좌에서 배운 내용 복습하기     1. Ctrl+F8 을 눌러 자동차라는 무비클립을 만든다.(가운데 십자가가 나오면 그 십자가를      중심으로 자동차를 그려 넣습니다.)   2. Ctrl+L 을 눌러 라이브러리 창을 띄우고 2번 영역을 드래그 하여 장면1의 바탕화면에 붙여      넣는다.   3. 바탕화면에 있는 무비클립을 클릭한 후 마우스 오른쪽 버튼을 클릭하여 "속성"을 클릭하고      인스턴스 이름을 car로 한다.   4. 1번 프레임을 클릭한 후 마우스 오른쪽 버튼을 클릭하여 "액션"을 클릭하고 4번과 같이      써 넣는다.(무비클립의 x좌표 값이 300보다 작을 경우에만 오른쪽으로 2만큼씩 이동시키고      그렇지 않으면 무비클립의 x좌표를 10으로 만들라는 내용입니다.)   사전 팁 :  수학과 액션스크립트의 차이   # 수학에서의 등호(=)  : 같다는 의미로 쓰입니다. x=3 하면 x와 3이 같다는 의미입니다.   # 액션스크립트에서의 대입 연산자(=) : 수학의 등호와 똑같이 쓰지만 의미가 조금 다릅니다.          액션스크립트에서 x=3이라고 쓴다면 3이라는 숫자를 x에 대입한다는 뜻입니다.          위 복습 내용에서 _root.car._x=_root.car._x+2의 의미를 앞 강좌에서 설명했듯이          car라는 무비클립의 x좌표값에 2를 더해서 그 무비클립의 x좌표에 대입하라는 뜻입니다.          # 액션스크립트에서의 등호(==) : x와 3이 같다는 것을 액션스크립트에서는 x==3 이렇게 표현          합니다.     2. 변수 지정하고 활용하기 (변수를 이해하여 활용할 수 있다.)     아주 간단하죠. 변수 이름을 쓰고 대입 연산자를 쓴 다음에 초기값을 적어주면 됩니다.        ok=1;     ok라는 이름을 가진 변수를 정했구요. 이 변수의 초기 값에 1을 대입한 것입니다.   if문 속에 다시 if문을 넣어 다음과 같이 썼다고 합시다.        ok=1; function go() {    if (_root.car._x<300) {       if(ok==1){          _root.car._x = _root.car._x + 2;       }    } else {       _root.car._x = 10;    } } setInterval(go, 25);     ok라는 변수 값이 1과 같다면(==이라는 점을 꼭 유념) 무비클립을 오른쪽으로 2만큼 이동시키라는   뜻입니다. 여기까지만  쓴다면 지난 시간에 배운 것과 아무런 차이가 안 나죠. 왜냐하면 처음에   ok라는 변수에 1을 대입시켜 놨기 때문에 if(ok==1)이라는 if문의 조건을 언제나 만족시키기 때문   입니다. 하지만 다음과 같이 쓰면 좀 달라지죠.        ok=1; function go() {    if (_root.car._x<300) {       if(ok==1){          _root.car._x = _root.car._x + 2;       }    } else {       _root.car._x = 10;       ok=0;    } } setInterval(go, 25);     car라는 무비클립의 x좌표가 300보다 작을 때 ok값이 1과 같을 조건에서 car라는 무비클립의   x좌표값은 2씩 증가합니다. 그러나 더이상 300보다 작지 않을 때에는 car라는 무비클립의 x좌표   값은 10이 되도록 했습니다. 그리고! 그리고 ok의 값에 0을 대입합니다. setInterva에 의해 다시   go함수가 실행되었을 때 무비클립의 x좌표 값이 300보다 작다는 조건은 만족되었지만 ok값이   1과 같지 않기 때문에 _root.car._x=_root.car._x+2;라는 명령문은 실행되지 않는 거죠.     결론적으로 자동차는 오른쪽으로 조금씩 움직이다가 300보다 커지면 10의 위치에 놓이게 되고   더이상 움직이지 않게 되는 것입니다.     이렇게만 만들면 딱 한번 움지이고 맙니다. 결코 상호작용적이라고 말할 수 없게 됩니다.   상호작용이 될려면 적어도 사용자의 어떤 조작에 따라 움직임이 달라져야 하거든요. 다음의   고급 액션을 잠깐 배우고 이를 활용해서 상호작용적인 액션을 만들어 봅시다.   고급액션 : 마우스 동작 읽기   _root.car.onRelease = function() {     ok = 1; };   바탕화면에 있는 car라는 무비클립을 마우스로 눌렀다가 뗐을 때 중괄호 안의 내용(ok=1)을 실행하라는 뜻입니다. onPress는 마우스를 눌렀을 때, onRollOver는 무비클립 위로 마우스를 가져다 놓을 때, onRollOut은 마우스를 무비클립 바깥으로 옮겼을 때를 의미합니다.   자동차를 클릭했을 때 ok에 1을 대입시키는 코드는 다음과 같습니다.      ok=1; function go() {    if (_root.car._x<300) {       if(ok==1){          _root.car._x = _root.car._x + 2;       }    } else {       _root.car._x = 10;       ok=0;    } } setInterval(go, 25); _root.car.onRelease = function() {    ok = 1; };     이제 자동차가 오른쪽으로 움직이다가 원래 자리로 돌아간 후 멈추어 버립니다. 이제 마우스로   자동차를 클릭하면 다시 오른쪽으로 움직이는 것을 확인할 수 있을 것입니다.   사후 팁 :  코드 줄이기   # 처음에 ok=1;로 변수를 지정하지 않아도 크게 문제되지 않습니다. 어차피  ok가 1이 아니므로          if(ok==1)를 만족 시키지 못하거든요. 그러니까 처음부터 움직이지 않을 뿐 기능상의         문제는 없다는 것입니다. 오히려 더 좋을지도... ^^   # _root.car._x=_root.car._x+2 를 _root.car._x+=2 로 바꾸어도 동일한 의미로 작동합니다.          += 는 선행 증가 대입 연산자라고 하며 대입(=)을 하기전에 증가(+)시키고 대입하라는          뜻입니다. -=, *=, /= 가 어떤 뜻인지를 한번 추론 해보세요... ^^   # if(ok==1) 를 if(ok) 로 바꾸어도 동일한 의미로 작동합니다. if문 안의 조건은 만족하거나          만족하지 않거나 하는 2가지의 경우의 수밖에 없습니다. 이는 디지털을 표현할 때          사용하는 0과 1만으로 표현할 수 있다는 뜻입니다. 그래서 if(ok)라고 쓰면 ok값이          1과 같으면 조건을 만족한 것으로 인식하는 것입니다.          # if문 안에 또 if문이 들어갈 경우 하나로 줄일 수 있습니다.  위의 코드의 경우          if(_root.car._x<300 && ok){ _root.car._x+=2; }와 같이 매우 간단히 표현할 수 있죠.          여기서 &&는 "그리고"의 의미입니다. 그러니까 무비클립의 x좌표가 300보다 작고 ok          값이 1과 같을 때에 무비클립을 오른쪽으로 2만큼 이동시키라는 뜻이 되는 거죠.          수학에서 배우는 AND, OR, NOT의 논리 연산자가 바로 &&, ||, ! 입니다.          &는 Shift와 숫자 7을 같이 누르면 되구요, |는 Shift와 \(백스페이스 왼쪽에 있는 키)를          같이 누르면 됩니다. !는 Shift와 숫자 1을 같이 누르면 되구요. ^^   3. 과제(변수를 활용하여 if문을 작성할 수 있다.)     1. 마우스로 클릭하면 그림이 조금씩 회전하면서 작아지게 할려면 어떻게 해야할까? (힌트 없음)   2. 마우스를 클릭하면 그림이 조금씩 사라지게 만들려면 어떻게 해야할까? (힌트 없음)