Download presentation
Presentation is loading. Please wait.
1
주)INVENTORNICS 노창배 강좌 소개 및 액션 스크립트
게임 제작 (플래시 액션 스크립트) 강좌 소개 및 액션 스크립트 주)INVENTORNICS 노창배
2
마우스 따라 움직이는 무비클립(1) 부드러운 움직임이란 시작지점에서 목표지점으로 이동할때 한번에 이동하지 않고 조금씩 이동하는 것 this : 무비클립 targetX : 무비클립이 최종적으로 이동해야 할 X 좌표 targetY : 최종적으로 이동할 이동할 Y좌표 0.4 값 대신 큰값은 : 움직임의 속도가 빨라짐, 작은값은 속도가 느려짐 duck._x(0) target(100) target – duck._y =100 target – duck._y =60 duck._x(40) ……………….. onClipEvent(enterFrame) { this._x = this._x + 0.4*(targetX - this._x); this._y = this._y + 0.4*(targetY- this._y); }
3
마우스 따라 움직이는 무비클립(2) P145 실습 정리 준비파일 : mouseTrail_자료.fla 오픈
onClipEvent(load){ speedX = 0.1; speedY = 0.1; } onClipEvent(enterFrame){ this._x = this._x + speedX*(_root._xmouse - this._x); this._y = this._y + speedY*(_root._ymouse - this._y); // target : 현재 마우스의 x, y 좌표
4
마우스 따라 움직이는 무비클립(3) P146 응용 1 실습 정리 응용1_자료.fla 파일 준비 무비클립 안에 버튼 심볼
<무비클립 심볼 코드 추가> onClipEvent (load) { closedy = -140; openy = 50; flag = 0; target = closedy; } onClipEvent (enterFrame) { this._y = this._y + (target - this._y)*0.5; openy = 20; <무비클립 안에 버튼에 코드 추가 on (release) { if (flag == 0) { target = openy; flag = 1; } else { target = closedy; flag = 0; }}
5
마우스를 따라 움직이는 무비클립(4) P147 응용 3 실습 정리 응용3-자료.fla 파일 준비
무비클립 : slider1/slider2/slider3 레이어 겹쳐서 배치 (instance name : menu1/menu2/menu3) onClipEvent (load) { target = 0; speed = 0.6; } onClipEvent (enterFrame) { this._x = this._x + (target - this._x)*speed; onClipEvent (load) { target = -800; speed = 0.4; } onClipEvent (enterFrame) { this._x = this._x + (target - this._x)*speed; onClipEvent (load) { target = -1600; speed = 0.5; } onClipEvent (enterFrame) { this._x = this._x + (target - this._x)*speed;
6
마우스 따라 움직이는 무비클립(4-1) on (rollOver) { _root.menu1.target = -400;
} on (rollOver) { _root.menu1.target = 0; _root.menu2.target = -800; _root.menu3.target = -1600; } on (rollOver) { _root.menu1.target = -800; _root.menu2.target = -400; _root.menu3.target = -1200; } on (rollOver) { _root.menu1.target = -1200; _root.menu2.target = -1600; _root.menu3.target = 0; } on (rollOver) { _root.menu1.target = -1600; _root.menu2.target = 0; _root.menu3.target = -400; }
7
마우스 따라 움직이는 무비클립(5) P147 응용 4 실습 준비 응용4-자료.fla 파일 준비
Dynamic text : txtA onClipEvent (load) { speed = 0.03; } onClipEvent (enterFrame) { this._x = this._x + speed*(_root._xmouse -360); _root.txtA = int(this._x); if (this._x > ) { this._x = 365; } else if (this._x < ) { this._x = 355;
8
마우스 트레일러(1) 움직일 때 잔상 효과 주기 마우스의 위치에 따라 따라다니는 이미지의 위치를 설정 P154 실습 정리
Nabi0의 목표지점은 마우스 좌표값으로 Nabi1의 목표지점은 nabi0의 x,y 좌표값으로 Nabi2의 목표지점은 nabi1의 x,y 좌표값으로 nabi nabi nabi mouse
9
마우스 트레일러(2) Nabi0의 코드 Nabi1과 nabi2의코드 targetX = _root.nabi0._x -50
onClipEvent (load) { speedX = 0.1; speedY = 0.1; } onClipEvent (enterFrame) { targetX = _root._xmouse - 30; targetY = _root._ymouse; this._x = this._x + speedX*(targetX - this._x); this._y = this._y + speedY*(targetY - this._y); targetX = _root.nabi0._x -50 targetY = _root.nabi0._y; targetX = _root.nabi1._x -35; targetY = _root.nabi1._y;
10
자유롭게 움직이는 무비(1) 목표 지점을 향해 random하게, 부드럽게 이동
P159 실습 정리 randomMovement_자료.fla 오픈 회색원 무비클립에 코드 작성 onClipEvent(load){ speedx = 0.1; speedy = 0.1; targetX = random(550); targetY = random(400); } onClipEvent(enterFrame){ if(random(8)==1){ this._x = this._x + speedx*(targetX - this._x); this._y = this._y + speedy*(targetY - this._y);
11
자유롭게 움직이는 무비(2) P(targetx, targey) (this._x, this._y)
문제_자료.fla 오픈 1/20 확률로 이동할 위치를 재설정 하면서 이동 방향을 자유롭게 변경 이동 방향 결정 P(targetx, targey) (this._x, this._y) 형식 : Math.atan2(y, x) 각도값 설정 180/Math.pi 각도 값에 따라 방향 바꾸기 diffX = targetX - this._x; diffY = targetY - this._y; this._rotation = Math.atan2(diffY, diffX)*180/Math.PI;
12
반딧불처럼 곡선 운동으로 부드럽게 움직이기(1)
부드럽게 움직일때 곡선으로 움직이게 하는 경우 직선으로 움직일 무비 클립을 작성 화면에서 숨김 따라 다닐 무비클립을 천천히 이동하도록 설정 1 2 3 4 파란색 사각형 : p0 무비클립으로 직선으로이동 빨간색 원 : P1 무비클립으로 P0을 따라서 서서히 움직임
13
반딧불처럼 곡선 운동으로 부드럽게 움직이기(2)
P166/ P168 실습 정리 P0 (파란색 사각형) 무비클립을 숨김 1/10 확률로 램덤하게 움직임 움직이는 회전 값은 atan2 값을 이용 onClipEvent(load){ this._visible = false; speedx = 0.1; speedy = 0.1; targetX = random(550); targetY = random(400); } onClipEvent(enterFrame){ if(random(10)==1){ this._x = this._x + speedx*(targetX - this._x); this._y = this._y + speedy*(targetY - this._y); diffX = targetX - this._x; diffY = targetY - this._y; this._rotation = Math.atan2(diffY, diffX)*180/Math.PI;
14
반딧불처럼 곡선 운동으로 부드럽게 움직이기(3)
Fish(빨간색 원) 무비클립 p0 무비클립의 x, y 좌표값을 목표지점으로 설정 onClipEvent(load){ speedx = 0.05; speedy = 0.05; } onClipEvent(enterFrame){ targetX = _root.p0._x; targetY = _root.p0._y; this._x = this._x + speedx*(targetX - this._x); this._y = this._y + speedy*(targetY - this._y); diffX = targetX - this._x; diffY = targetY - this._y; this._rotation = Math.atan2(diffY, diffX)*180/Math.PI;
15
바네이 메뉴(1) 버튼을 클릭하면 화면의 이미지가 슬라이드 처럼 이동하는 것 부드럽게 움직일 메뉴로 사용할 그림이 필요
무비 클립을 각각 등록, 기준점을 왼쪽 위로 . P170 실습정리 이미지들을 일렬로 나열 이때 x 좌표값을 이용하여 일렬로 나열 이미지들의 Instance Name : Img0~img6 Img0~img6 묶어서 mcMenu 라는 무비클립 작성 onClipEvent (load) { this.img0._x = 0; this.img1._x = 500; this.img2._x = 1000; this.img3._x = 1500; this.img4._x = 2000; this.img5._x = 2500; this.img6._x = 3000; speedX = 0.1; targetX = 0; } onClipEvent (enterFrame) { this._x = this._x+speedX*(targetX-this._x); }
16
바네이 메뉴(2) 버튼을 클릭할때 마다 해당 무비클립(이미지)의 좌표값을 이동 on (release) {
_root.menu.targetX = 0; } on (release) { _root.menu.targetX = -500; } on (release) { _root.menu.targetX = -1000; } on (release) { _root.menu.targetX = -1500; } on (release) { _root.menu.targetX = -2000; }
17
바네이 메뉴 활용 (가로확대) 각 버튼을 클릭하면 그림이 가로축으로 매우 길게 확대 되었다가 원 상태로 되돌아 가면서 해당위치로 이동 실습 : 177 Barney_응용_가로확대_자료.fla 오픈 1번 프레임 무비클립 expand = ; onClipEvent (load) { this.img0._x = -1500; this.img1._x = -1000; this.img2._x = -500; this.img3._x = 0; this.img4._x = 500; this.img5._x = 1000; this.img6._x = 1500; speedX = 0.1; targetX = 0; } onClipEvent (enterFrame) { this._x = this._x+speedX*(targetX-this._x); this._width = this._width+0.3*( this._width);
18
바네이 메뉴 활용 (가로확대) 각 버튼 심볼에 코드 작성 on (release) {
_root.menu._width = expand; _root.menu.targetX = 1500; } on (release) { _root.menu._width = expand; _root.menu.targetX =-500; } on (release) { _root.menu._width = expand; _root.menu.targetX = 1000; } on (release) { _root.menu._width = expand; _root.menu.targetX = -1000; } on (release) { _root.menu._width = expand; _root.menu.targetX = 500; } on (release) { _root.menu._width = expand; _root.menu.targetX = -1500; } on (release) { _root.menu._width = expand; _root.menu.targetX = 0; }
19
바네이 메뉴 활용(세로) 각 버튼을 클릭하면 그림이 위 아래로 부드럽게 이동 실습 : 176 무비클립
Barney_응용_세로_자료.fla 오픈 무비클립 onClipEvent (load) { // 이미지 순서대로 정렬하기 this.img0._y = 0; this.img1._y = 340; this.img2._y = 340*2; this.img3._y = 340*3; this.img4._y = 340*4; this.img5._y = 340*5; this.img6._y = 340*6; speedY = 0.3; targetY = 17; } onClipEvent (enterFrame) { this._y = this._y+speedY*(targetY-this._y);
20
바네이 메뉴 활용 (세로) 각 버튼 심볼에 코드 작성 on (release) { _root.menu.targetY = 17;
} on (release) { _root.menu.targetY = ; } on (release) { _root.menu.targetY = *4; } on (release) { _root.menu.targetY = *2; } on (release) { _root.menu.targetY = *5 } on (release) { _root.menu.targetY = *3; } on (release) { _root.menu.targetY = *6 }
Similar presentations
