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

집단지성의 힘, 공부하는 교컴

:::: 교컴가족 로그인(1)
재우앤재이 (08:49)

  • 주간 검색어
  • 현재 검색어
  1. 생활기록부 예시문 2
  2. 기 드보르 1
  3. 예시문 1
  4. 동아리 세특 4
  5. 행동 4
  6. 1 7
  7. 동아리 2
  8. 사회 1
  9. 독서
  10. 화훼
기간 : ~

교컴 포토갤러리

플래시수업

교플강9 - 관성효과에 의한 운동-키보드 입력

민서아빠 | 2009.02.15 22:42 | 조회 6477 | 공감 0 | 비공감 0

3. 관성효과를 이용한 공의 운동을 표현할 수 있다.

가. 키보드를 이용한 운동효과 구현

이번에는 키보드를 사용하여 우주선을 조절해 보도록 하자. 키보드로 우주선을 조절하기 위해서는 우선 플래시에서 키보드가 눌렸는지를 감지해야 할 것이다. 그리고 눌려진 키가 무엇인지도 알아내야 할 것이다.

onClipEvent 문을 사용하여 무비클립 자체에다 명령을 줄 수도 있으나, 우리는 지금까지 메인프레임에 액션스크립트를 부여해 왔기 때문에 조금 어렵더라도 액션스크립트에 명령을 부여 하는 방법을 택하도록 하겠다.

우선 키보드가 눌렸는지 체크하기 위해서는 아래와 같은 명령을 메인프레임에 적어 주면 된다.

//프레임이 반복될때 마다

onEnterFrame = function () {

//만약 커서키 중에 왼쪽커서키가 눌렸다면

if (Key.isDown(Key.LEFT)) {

trace("왼쪽버튼이 눌렸습니다.“);

}

}

즉 프레임이 반복될 때 마다 if 문을 사용하여 키가 눌렸는지를 체크하고, ()안에 우리가 원하는 키를 적어 넣으면 그 키가 눌렸는지 체크를 할 수 있다. 만약 우리가 원하는 키가 눌렸다면, 그에 해당하는 행동을 하게 하면 될 것이다.

if (Key.isDown(Key.LEFT))를 if (Key.isDown(Key.RIGHT)) 로 바꾼다면 오른쪽 키가 눌렸는지를 검사하게 될 것이다.

그럼 키보드를 이용해서 우주선을 좌우로 조절해보자.

우선 자신의 마음에 드는 ufo 라는 무비클립을 하나 만들어보자. 이제 우리는

커서키를 이용하여 이 ufo를 조절하게 될 것이다. 아래와 같은 액션스크립트를 메인 프레임에 작성해 보자.

onEnterFrame = function () {

if (Key.isDown(Key.LEFT)) {

ufo._x = ufo._x-0.5;

}

if (Key.isDown(Key.RIGHT)) {

ufo._x = ufo._x+0.5;

}

};

좌,우 커서키를 누를때 마다 우주선이 왼쪽, 또는 오른쪽으로 움직이는 것을 알 수 있다. 똑같은 방법으로 위, 아래로도 움직이게 할 수도 있다. 그런데 한가지 문제점이 있다. 물리적 현상에 의하면 우주공간에서는 마찰력이 없기 때문에 왼쪽으로 힘을 받으면 다시 힘을 받기 전까지는 계속해서 등속운동을 해야 한다. 그런데 지금 위에서 작성한 액션 스크립트를 적용해 보면, 커서키를 누를때 마다 한번 움직이고, 다시 정지하는 것을 볼 수 있다.

<키보드 방향키를 눌러 좌우로 이동시켜 보자>

displayMultimedia("files/attach/images/1569/008/009/ufo1.swf", "400","320", { autostart : false });

<생각> 관성의 법칙을 따르면서 우주공간처럼 마찰력이 없어서 한쪽 방향으로 한번 힘을 주면 계속해서 움직이게 하려면 어떻게 해야 할까?

벽돌깨기를 만들때 움직이던 공은 관성의 법칙을 따르고 있었다. 우주선도 같은 방법으로 접근하면 될 것이다. 우선 키보드로 우주선에게 한쪽 방향으로 힘을 주면 우주선은 다른 명령이 들어오지 않는 한 그 방향으로 계속해서 운동하면 될 것이다.

위 스크립트를 다음과 같이 수정해 보자.

//초기속도

vx = 0;

onEnterFrame = function () {

//관성에 따른 우주선의 움직임 구현

ufo._x = ufo._x+vx;

if (Key.isDown(Key.LEFT)) {

vx = vx-0.5;

}

if (Key.isDown(Key.RIGHT)) {

vx = vx+0.5;

}

};

즉 ufo라는 무비클립은 ufo._x = ufo._x+vx; 명령에 의해 자신의 x 좌표를 vx 값만큼 계속해서 바꾸면서 이동을 하게 된다. 우리가 해주는 것은 커서키를 이용하여 vx 의 값을 바꾸어 주는 일만 하면 되는 것이다.

<키보드를 이용하여 좌우로 이동시켜 보자>

displayMultimedia("files/attach/images/1569/008/009/ufo2.swf", "400","320", { autostart : false });

좌,우 뿐만 아니라, 위,아래로 움직일 수 있도록 수정해 보자.

나. 마찰력에 따른 운동 감쇠 효과 구현

실제 지구상에서는 한번 움직이기 시작한 물체는 계속해서 움직이지 못하고 마찰력 때문에 시간이 지나면 서서히 멈추게 된다. 위 스크립트를 마찰력에 따른 감쇠 효과가 나타나도록 해보자.

ufo._x = ufo._x+vx;

vx 값이 일정하다면 우주선은 계속해서 일정한 속도로 이동하게 된다. 따라서 서서히 멈추게 하려면 vx 의 값이 시간이 지날수록 작아지게 해야 할 것이다.

<토의> 위 스크립트를 어떻게 고쳐야 마찰력 효과가 나타나겠는가?

vx 값을 단순히 더하거나 빼는 것 만으로는 해결 할 수 없다.

vx=vx * 0.95;

ufo._x = ufo._x+vx;

vx 값에다 1보다 작은 수를 곱해주면 감쇠효과를 나타낼 수 있다. 프레임이 반복될 때마다. vx 값은 점점 작아지게 될 것이고, 그러면 이동하는 우주선의 속력도 점점 감소하게 되므로 결국은 멈추게 될 것이다. 즉 0.95 값이 감쇠효과를 나타내게 되는 것이다. vx 에 곱해진 값들을 바꾸어 가면서 어떤 결과가 나타나는지 실행 시켜 보자.

<키보드를 이용하여 상하좌우로 이동시켜 보자>

displayMultimedia("files/attach/images/1569/008/009/ufo2.swf", "400","320", { autostart : false });

다. 중력장 안에서 움직이는 우주선의 효과 구현

중력장 안에서는 조절을 하지 않으면 우주선은 아래로 자유낙하를 하게 된다. 따라서 중력장 안에서 움직이는 우주선을 만들기 위해서는 키보드로 방향조절을 하지 않아도 아래로 자유낙하 운동을 하는 우주선을 만들어야 할 것이다.

우선 ufo 라는 무비클립을 하나 만들고 x 축의 속도는 vx, y축의 속도는 vy 로 표시해 보자. 자유낙하 한다는 것은 계속해서 vy 의 속도가 증가하고 있다는 것을 의미한다. 따라서 조절을 하지 않아도 매 프레임마다 vy 값은 아래와 같이 증가해야 할 것이다.

vy = vy + 0.1;

그럼 중력장 안에서 키보드를 통해 우주선을 움직이도록 해보자. 이왕이면 멋진 배경을 만들고 멋진 우주선을 만들어서 움직이게 한다면 더 멋질 것이다.

ufo 라는 무비클립을 만들고 메인프레임에 아래와 같은 액션스크립트를 적어 주면 우주선을 움직일 수 있다. 중력효과 때문에 조절하지 않으면 자꾸 아래로 내려가려고 하는 것을 볼 수 있을 것이다.

//우주선 속도 초기화

vx = 0;

vy = 0;

//매프레임 마다 반복

onEnterFrame = function () {

//중력효과 반영

vy = vy+0.01;

//우주선 움직임

ufo._x = ufo._x+vx;

ufo._y = ufo._y+vy;

//우주선 키보드로 조절

if (Key.isDown(Key.LEFT)) {

vx = vx-0.5;

}

if (Key.isDown(Key.RIGHT)) {

vx = vx+0.5;

}

if (Key.isDown(Key.UP)) {

vy = vy-0.5;

}

if (Key.isDown(Key.DOWN)) {

vy = vy+0.5;

}

};

<생각>

1. 중력효과를 더 크게 하거나, 더 작게 해보자

2. 감쇠효과를 적용시켜 시간이 지날수록 느려지다 멈추도록 만들어 보자.

3. 키보드를 조절하는 것에 따라서 우주선이 분사하는 모습을 만들려면 어떻게 해야 할까?

4. 응용

<키보드를 이용하여 상하좌우로 이동시켜 보자>

displayMultimedia("files/attach/images/1569/008/009/ufocontrol.swf", "400","320", { autostart : false });

가. 중력장하에서 마우스로 공 집어 던지기

키보드가 아니라 마우스로 공을 잡아서 집어 던지면 그 속력을 유지하면서 날아가도록 해보자. 마우스로 공을 누르면 공이 마우스를 따라다니게 만들고, 마우스를 때는 순간 공이 이동해야할 속도를 결정해야 할 것이다.

즉 마우스를 누르고 움직이는 동안 매 프레임 마다 공이 얼마만큼을 이동하고 있는지를 체크하고 있다가 마우스를 때는 순간 공이 이동해가는 거리를 속도로 바꾸어서 공을 움직이게 해주면 되는 것이다.

ball 이라는 무비클립을 만들고 메인 프레임에 아래와 같이 명령을 주어보자, 그러면 공을 잡아서 움직이게 할 수 있을 것이다.

//초기 속력과 초기값

speedx = 0;

speedy = 0;

prevx = ball._x;

prevy = ball._y;

check1 = 0;

onEnterFrame = function () { //반복실행

if (check1 == 0) { //볼이동

ball._x = ball._x+speedx;

ball._y = ball._y+speedy;

} else { //속도 결정

tempx = ball._x-prevx;

tempy = ball._y-prevy;

prevx = ball._x;

prevy = ball._y;

}

};

ball.onPress = function() { //공 마우스로 눌렀을 때 볼 이동

_root.check1 = 1;

this.startDrag(true);

};

//공에서 마우스를 때는 순간 이동 속도 결정

ball.onRelease = function() {

stopDrag();

_root.check1 = 0;

_root.speedx = _root.tempx;

_root.speedy = _root.tempy;

};

벽돌깨기처럼 화면을 벗어나지 않고 벽에 부딪히면 다시 튕겨 나오도록 만들어 보자. 벽돌깨기 소스를 참고해서 벽을 벗어나지 않도록 처리해 주면 될 것이다.

<마우스로 볼을 잡다 원하는 방향으로 던져보자>

displayMultimedia("files/attach/images/1569/008/009/throwball.swf", "400","320", { autostart : false });
좋아요! 싫어요!
twitter facebook me2day
448개(1/23페이지) rss
플래시수업
번호 제목 글쓴이 조회 날짜
공지 [활용] 수업 활용 감동 플래시 150편 [37+1] 함영기 153016 2003.08.21 18:57
447 [기타플래시] 세상에서 가장 감동적인 이야기 [7] 교컴지기 19499 2010.08.27 20:26
446 [플래시강좌] 교플강12(마지막회)-대포게임 만들기 사진 첨부파일 [1] 민서아빠 10244 2009.02.15 22:46
445 [플래시강좌] 교플강11 -포물선 운동 구현하기 사진 첨부파일 민서아빠 10491 2009.02.15 22:45
444 [플래시강좌] 교플강10-중력장에서 우주선 착륙게임 만들기 사진 첨부파일 민서아빠 6431 2009.02.15 22:43
>> [플래시강좌] 교플강9 - 관성효과에 의한 운동-키보드 입력 첨부파일 민서아빠 6478 2009.02.15 22:42
442 [플래시강좌] 교플강8 - 자유낙하운동 첨부파일 민서아빠 7927 2009.02.15 22:39
441 [플래시강좌] 교플강7-물체의 가속도 운동 구현하기 첨부파일 민서아빠 6394 2009.02.15 22:36
440 [기타플래시] 투명인간 만들기1.0(웹캠이용) 사진 첨부파일 [1] 민서아빠 6114 2009.02.08 21:27
439 [플래시수업] 재미있는 플래시 만화 '재동이네' 48편 [3] 교컴지기 11803 2008.11.24 12:57
438 [플래시게임] 율동 플래시 - 얼굴 찌푸리지 말아요 첨부파일 [3] 교컴지기 12699 2008.11.11 15:20
437 [플래시유틸] 모둠 뽑기 플래시 첨부파일 [3] 교컴지기 21481 2008.11.11 15:19
436 [플래시유틸] 알람시계 플래시 첨부파일 [4] 교컴지기 10777 2008.11.11 15:17
435 [플래시수업] 플래시 생각 수업 : 세상에서 가장 아름다운 시 첨부파일 교컴지기 8086 2008.09.22 22:34
434 [플래시수업] [모듈자료] 기후 그래프 그리기 첨부파일 [1] 함영기 10116 2008.03.03 09:35
433 [플래시유틸] [프리웨어]각종 동영상포멧을 FLV와 SWF로 전환시켜주는 프램 첨부파일 유춘모 6882 2008.01.29 22:29
432 [플래시강좌] 서버에 실시간 AVI를 FLV로 변환하는 날개를 달자 첨부파일 유춘모 6093 2008.01.03 22:02
431 [플래시수업] 환경교육과 플래시가 만나면? [6] 함영기 6638 2007.10.29 14:48
430 [플래시수업] [수학] 정다면체의 전개도 애니메이션 자료~* 첨부파일 [1] 함영기 9013 2007.10.24 21:56
429 [기타플래시] [안내] 1~3분 분량의 주의집중 콘텐츠 공모 사진 함영기 5427 2007.10.24 21:36
428 [플래시강좌] 플래시로 쉽게 공부하는 포토샵 매뉴얼 함영기 7615 2007.10.24 21:29