교컴로고초기화면으로 header_kyocom
교컴메뉴
교컴소개 이용안내 소셜교컴 나눔마당 배움마당 자료마당 교과마당 초등마당 특수마당 글로벌교컴 온라인프로젝트학습 교컴 UCC
회원 로그인
정보기억 정보기억에 체크할 경우 다음접속시 아이디와 패스워드를 입력하지 않으셔도 됩니다.
그러나, 개인PC가 아닐 경우 타인이 로그인할 수 있습니다.
PC를 여러사람이 사용하는 공공장소에서는 체크하지 마세요.
소셜네트워크 서비스를 통해서 로그인하시면 별도의 로그인 절차없이 회원서비스를 이용하실 수 있습니다.
교컴 키우기 자발적 후원


:::: 교컴가족 로그인(0)

  • 주간 검색어
  • 현재 검색어
  1. 십대를 위한 드라마 속 과학인문학 여행
  2. 생활기록부 예시문 3
  3. 과세특 4
  4. 무게
  5. 수학 42
  6. 명찰
  7. 배치 9
  8. 지도
  9. 4학년 수학
  10. 오월길 삼행시
기간 : ~

교컴 포토갤러리

플래시수업

교플강5(화면을 못 벗어나게, 그리고 마우스를 따라다니는 움직임) - 벽돌깨기를 위하여

김정식 | 2005.06.12 20:03 | 조회 4170 | 공감 0 | 비공감 0
 

2. 변수를 이용하여 운동의 방향을 바꿀 수 있다.

가. 공 무비클립이 화면을 벗어나지 못하도록 조건문을 이용하여 잡아둘 수 있다.

이번에는 공이 화면을 벗어나지 않고 계속해서 움직이게 만들어보자. 화면오른쪽 끝까지 가면 방향을 왼쪽으로 바꾸고, 화면 왼쪽 끝까지 오면 다시 방향을 오른쪽으로 바꾸게 해보자. 마찬가지로, 공을 계속해서 x축방향으로 움직이게 해야 할 것이다. 그리고 공이 오른쪽 끝을 벗어나는 순간 -x축방향으로 움직이게 해야 할 것이다.

그러기 위해서 우리는 speed 라는 변수를 만들어 공의 움직임을 제어해 보고자 한다.



공의 움직임을 화면안에서만 돌아다니게 하기 위해서는 아래와 같은 스크립트를 만들어 주면 된다.

speedx = 5;

onEnterFrame = function () {

        ball._x = ball._x+speedx;

        if (ball._x>500) {

                speedx = speedx*-1;

        }

        if (ball._x<0) {

                speedx = speedx*-1;

        }

};

즉 화면밖으로 벗어나려는 경우에 speedx 의 값을 음수로 바꾸어 줌으로써 ball 의 움직임을 반대방향으로 바꿀 수 있는 것이다. 그런데 한가지 문제점이 있다 모든 무비클립의 위치는 중심점을 기준으로 이루어 지기 때문에 위처럼 하면 공의 끝이 벽에 부딪히면 방향이 바꾸는 것이 아니라 공의 중심이 벽에 부딪혀야 방향이 바뀌게 된다. 따라서 공의 끝이 부딪히면 방향이 바뀌도록 액션스크립트를 수정해 주어야 할 것이다.


\"\" 


if (ball._x + ball._width/2 >500) // 공의 중심+공의 반경이 500보다 크면


나 .변수를 이용하여 공의 속력을 바꿀 수 있다.


공의 속력을 바꾸기 위해서는 speedx의 값을 바꾸어 주면 될 것이다. 이제 우리는 공이 움직이는 속력도 변수하나로 바꿀 수 있게 되었다.


<토의> 자 그럼 같은 방법으로 공이 x축 뿐만 아니라 y축에서도 화면을 벗어나지 않고   움직이게 만들어 보아라 (단 화면의 크기는 500*400이라고 가정)

1)고려해야 할 사항에 대해 토의해 보고 변수명을 정해보자.

공1의 인스턴스명 (ball)

화면의 넓이 (500)

화면의 높이 (400)

공의 x축속도 (speedx)

공의 y축속도 (speedy)

2) 소스를 보지말고 직접 만들어 본 후 비교해보자

//초기 스피드

speedx = 10;

speedy = 10;

//반복실행

onEnterFrame = function () {

        ball._x = ball._x+speedx;

        ball._y = ball._y+speedy;

        //벽을 벗어나려고 할때의 조건문들

        if (ball._x+ball._width/2>500) {

                speedx = speedx*-1;

        }

        if (ball._x-ball._width/2<0) {

                speedx = speedx*-1;

        }

        if (ball._y+ball._height/2>400) {

                speedy = speedy*-1;

        }

        if (ball._y-ball._height/2<0) {

                speedy = speedy*-1;

        }

};

<토의>

speedx 나 speedy 의 값을 바꾸면 어떻게 될까

ball._height 대신 ball._width 로 바꾸면 어떻게 될까

화면크기를 더 줄이려면 어떻게 해야 할까



3. 마우스를 따라다니는 운동을 이해할 수 있다.

이번에는 조절바를 만들어 마우스를 따라 다니게 해보자.

가. startDrag 의 사용법을 익힌다.

조절바 무비클립을 만들어 ‘bar\'라는 인스턴스 네임을 주어 화면에 위치 시킨후 마우스를 따라 움직이게 해보자. 마우스를 따라 조절바가 움직이기 위해서는 2가지 방법이 있다. 우선 가장 쉬운 방법인 startDrag를 사용하는 방법을 알아 보자.

무비클립 인스턴스명.startDrag(true,[left,top,right,bottom])

마우스를 따라다니게 하고싶은 무비클립명을 써주고, 뒤에 startDrag(true)라고 적어 주면 된다. 그럼 무비클립은 마우스를 따라 다니게 된다. 가끔은 따라다니는 범위를 제한을 두고 싶을때가 있다. 그럴때는 [left,top,right,bottom]에 범위를 적어 주면 된다.

나. 조절바를 마우스를 따라다니게 만든다.

예를 들어 bar.startDrag(true); 라고 적어주면 조절바(bar)가 마우스를 따라 움직이게 된다. 마우스를 움직여 보면 조절바(bar)가 마우스를 따라 다니는 것을 보게 될 것이다. 하지만 우리가 궁극적으로 만들고자 하는 것은 벽돌깨기 이므로 조절바가 화면 상단으로 움직이지 못하도록 해야 할 것이다.

다. 조절바가 일정한 범위내에서만 움직이도록 만든다.

bar.startDrag(true, 0, 350, 500, 350);

라고 적어주면 조절바(bar)는 y좌표는 350 인 지점에서 x좌표는 0부터 500 사이에서만 움직이게 된다. 이런 방법으로 조절바의 움직임을 제한 할 수 있다.

우리가 만들고 있는 벽돌깨기의 시작 부분에 위 스크립트를 추가해 넣음으로써 조절바를 마우스로 조절할 수 있게 된다.

라. 조절바가 마우스를 따라다니게 하는 다른 방법을 익힌다.

startDrag 는 큰 단점이 하나 있다. 그것은 동시에 두개의 무비클립이 따라 다니게 할 수 없다는 것이다. 따라서 때로는 startDrag를 사용하지 않고도 무비클립이 마우스를 따라 다니게 할 필요가 있다. 이럴때는 다음과 같은 방법으로 무비클립이 따라다니게 만들면 된다.

onEnterFrame = function () {

bar._x = _root._xmouse;

bar._y = _root._ymouse  }

즉 bar라는 이름을 가진 무비클립의 x와 y의 좌표값을 현재 마우스가 화면에 위치하고 있는 좌표값을 구해서 계속해서 바꾸라는 것이다.

좋아요! 싫어요!
twitter facebook me2day
448개(4/23페이지) rss
플래시수업
번호 제목 글쓴이 조회 날짜
공지 [활용] 수업 활용 감동 플래시 150편 [37+1] 함영기 163271 2003.08.21 18:57
>> [플래시강좌] 교플강5(화면을 못 벗어나게, 그리고 마우스를 따라다니는 움직임) - 벽 첨부파일 김정식 4171 2005.06.12 20:03
386 [플래시수업] 초등학교 저학년용 사진 그림카드 맞추기 첨부파일 [4] 유춘모 4150 2004.10.09 23:05
385 [플래시게임] 나대로 박사와 함께하는 유쾌한 심리분석 첨부파일 함영기 4115 2004.06.16 10:04
384 답글 [플래시수업] RE:플래시파일을 파워포인트에서 사용하려면? 함영기 4089 2005.06.15 18:40
383 [플래시강좌] 플래시에서 동영상을 이용하여 학습자료 제작하는 방법 첨부파일 [3] 김정식 4066 2006.02.05 02:07
382 [기타플래시] 플래시8 소스 및 예제 모음 김정식 4030 2005.09.29 23:10
381 [플래시게임] 영문용 십자낱말퍼즐 소스-mx2004 첨부파일 유춘모 4026 2004.11.28 21:42
380 [플래시게임] 퐁당퐁당 돌을 던지자 첨부파일 8175 3945 2004.05.10 22:25
379 [플래시강좌] 교플강4(무비클립과 화면상에서 움직임 이해) - 벽돌깨기를 위하여 사진 첨부파일 김정식 3915 2005.06.12 19:40
378 [플래시유틸] [동영상강의] 플래시슬라이더를 이용하여 심플한 전자 앨범 제작 [5] 박이현 3888 2004.12.08 23:44
377 [플래시수업] 여러가지 기능이 있는 그림판 첨부파일 [2] 8175 3829 2004.08.21 22:53
376 [플래시수업] [소스] 초등 테두리그림 색칠하기-3 첨부파일 유춘모 3820 2006.08.20 19:42
375 [플래시게임] 공포 심리 측정 플래시 첨부파일 [1] 함영기 3813 2004.06.16 09:33
374 [플래시유틸] [유틸] 플래시를 내 PC에 저장하기 첨부파일 함영기 3749 2003.07.21 09:40
373 [플래시강좌] 플래시 2005 유춘모 3693 2005.02.23 09:11
372 [플래시유틸] 크랙자료 - 스위시2.01/스위시맥스1.0/스위시비디오1.0/스위시스튜디 [1] 전병주 3687 2005.01.22 13:13
371 [플래시수업] 추천 영상 시 함영기 3669 2004.01.16 23:01
370 [플래시강좌] [강좌] 플래시 - 기초에서 응용까지 함영기 3654 2003.07.22 20:06
369 [플래시게임] 루빅 큐브(Rubik's cube) 맞추기 첨부파일 [1] 유춘모 3639 2004.12.08 23:53
368 [플래시수업] 움직이는 사람 모형 첨부파일 8175 3623 2004.02.21 20:38