제12강 for 루프(눈내리는 액션)

1. 학습목표    ① for 루프를 활용할 수 있다.   지난 강좌에서 배운 내용 복습하기(선그리기)   1. 첫번째 프레임에 다음과 같은 액션을 입력한다. startx = 100;     starty = 50;     endx = 400;     endy = 150; function draw() {    createEmptyMovieClip("mc", 0);    mc.clear();    mc.lineStyle(3, 0xFF0000);    mc.moveTo(startx, starty);    mc.lineTo(endx, endy); } draw(); onMouseDown = function () {    ok = 1;    startx=_xmouse;    starty=_ymouse; }; onMouseMove = function () {    if (ok) {       endx=_xmouse;       endy=_ymouse;       draw();       updateAfterEvent();    } }; onMouseUp = function () {    ok = 0; };   2. for 루프 (for 루프를 이해할 수 있다.)   보헤님이 for루프를 워낙 쉽게 잘 설명해 놓아서요... 우선 그것부터 참고하시기 바랍니다. ^^ http://cafe.naver.com/BoardRead.do?cluburl=flashdev&clubid=10019103&menuid=107&listtype=M&boardtype=L&page=&articleid=514   제가 추가 설명하고 싶은 내용은 다음과 같습니다. 어딜 가도 듣을 수 있는 내용이라... ^^   1. 다음은 1부터 100까지의 숫자를 더하는 여러 가지 방법 중에 for루프를 이용한 예이다.     sum = 0; for (i=1; i<=100; i++) {    //for(초기값; 조건; 증가)의 뜻입니다.      sum += i;                //아시죠? sum=sum+i 라는 거... ^^ } trace(sum);                  //for 루프를 돌린 것을 확인하는 것입니다.   i라는 변수가 1부터 시작해 100보다 작으면 for루프 안의 내용을 실항 하고 i의 값을 1씩 증가(i++)시킵니다. i값이 100가 되어도 조건을 만족하기 때문에 루프 안의 내용이 실행되고 i는 101이 됩니다. 이제는 조건을 만족하지 않기 때문에 더 이상 for루프는 실행되지 않는 거죠. 결국 1에서 100까지의 숫자를 더한 셈이 되는 것입니다.  실행되는 순서는 sum=0; -> i=1일 때 sum+=i -> i=2일 때 sum+=i -> .... ->i=100일 때 sum+=i -> trace(sum) 순입니다. for루프는 조건을 만족하는 한 다음 단계로 넘어가지 않고 계속해서 그 루프 안의 내용을 실행한다는 거. 매우 중요한 내용입니다.   3. for 루프 활용하기 (for 루프를 활용할 수 있다.)     보헤님은 메뉴 만들기에서 많이 사용하는 버튼을 for루프로 간략화 시켰는데요, 제가 주로 사용하는 for루프는 무비클립을 삽입하는 경우입니다. 간단히 예를 들어 보죠.   1. 무비클립을 만들고 라이브러리 창에서 "링크"를 선택하여 'ActionScript에 내 보내기'로     식별자를 써 넣는다. (여기선 ball이라고 합시다.) 2. 첫번째 프레임에 다음과 같은 액션을 입력한다.     for (i=0; i<10; i++) {    _root.attachMovie("ball","ball"+i,i); //ball0, ball1, 식으로 이름붙습니다.    _root["ball"+i]._x = 10*i;              //보헤님이 잘 설명해 주셔서... ^^    _root["ball"+i]._y = 100; }   몇개의 무비클립이 들어갈까요? ^^ 정답은... 10개입니다. 0번부터 9번까지. 총 10개!   ball의 폭이 10픽셀이라고 할 때 공이 다닥다닥 붙어서 10개를 붙이게 되는 것입니다. 3. 어떻게 보일지 확인해 보고 수정해야겠다는 생각이 들면 몇 가지를 변수화 시키면 된다.     num=10;                                  //무비클립을 10개 붙이겠다는 뜻입니다. spacing=10;                             //무비클립간의 간격을 10으로 합니다. starty=100;                               //초기 y값입니다. for (i=0; i<num; i++) {    _root.attachMovie("ball", "ball"+i, i);    _root["ball"+i]._x = spacing*i;             _root["ball"+i]._y = starty; }   고급액션 : 랜덤한 값   어떤 규칙성이 없는 값을 나타낼 필요가 있는 경우가 있습니다. 눈이나 비가 내리는 것을 나타낼 때... 이때 사용하는 것이 바로 random입니다.      trace(Math.random());    실행(Ctrl+Enter)시킬 때마다 0보다는 크고 1보다는 작은 값을 무작위적으로 나타냅니다.   다음은 랜덤을 이용한 눈오는 장면입니다.     num = 20;                     // 눈송이가 20개 for (i=0; i<num; i++) {    _root.attachMovie("snow", "snow"+i, i);    //무비클립 추가    _root["snow"+i]._x = Math.random()*500;  //x좌표를 무작위적으로    _root["snow"+i]._y = Math.random()*200;  //y좌표를 무작위적으로    _root["snow"+i].v = 5*Math.random()+2;   //v라는 변수를 생성    //무작위적인데 그 값은 2<v<7입니다. 아시죠? ^^ } function go() {    for (i=0; i<num; i++) {        _root["snow"+i]._y += _root["snow"+i].v;  //아래로 떨어지게...        if (_root["snow"+i]._y>200) {                  //맨아래로 내려가면            _root["snow"+i]._y = -10;                   //맨위로...            _root["snow"+i]._x = Math.random()*500; //다시 랜덤위치로        }    } } setInterval(go, 50);     4. 과제 (for 루프를 활용할 수 있다.)   1. 비 내리는 거 한번 표현해 보실래요? 특히 사선으로 내리게... 2. 천천히 떨어지는 눈은 크기가 작고 빨리 떨어질수록 크기가 커지게 해보세요. 원근감이... ^^ 3. 내리는 눈이 좌우로 흔들리면서 떨어지게 만들어 보세요. (힌트 : sin, 고급으로 표현하고 싶다면 이 역시 랜덤으로...)