주)INVENTORNICS 노창배 강좌 소개 및 액션 스크립트 2018-09-19 게임 제작 (플래시 액션 스크립트) 강좌 소개 및 액션 스크립트 주)INVENTORNICS 노창배

마우스 따라 움직이는 무비클립(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); }

마우스 따라 움직이는 무비클립(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 좌표

마우스 따라 움직이는 무비클립(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; }}

마우스를 따라 움직이는 무비클립(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;

마우스 따라 움직이는 무비클립(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; }

마우스 따라 움직이는 무비클립(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 > 720+360) { this._x = 365; } else if (this._x < 360 - 720) { this._x = 355;

마우스 트레일러(1) 움직일 때 잔상 효과 주기 마우스의 위치에 따라 따라다니는 이미지의 위치를 설정 P154 실습 정리 Nabi0의 목표지점은 마우스 좌표값으로 Nabi1의 목표지점은 nabi0의 x,y 좌표값으로 Nabi2의 목표지점은 nabi1의 x,y 좌표값으로 nabi2 nabi1 nabi0 mouse

마우스 트레일러(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;

자유롭게 움직이는 무비(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);

자유롭게 움직이는 무비(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;

반딧불처럼 곡선 운동으로 부드럽게 움직이기(1) 부드럽게 움직일때 곡선으로 움직이게 하는 경우 직선으로 움직일 무비 클립을 작성 화면에서 숨김 따라 다닐 무비클립을 천천히 이동하도록 설정 1 2 3 4 파란색 사각형 : p0 무비클립으로 직선으로이동 빨간색 원 : P1 무비클립으로 P0을 따라서 서서히 움직임

반딧불처럼 곡선 운동으로 부드럽게 움직이기(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;

반딧불처럼 곡선 운동으로 부드럽게 움직이기(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;

바네이 메뉴(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); }

바네이 메뉴(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; }

바네이 메뉴 활용 (가로확대) 각 버튼을 클릭하면 그림이 가로축으로 매우 길게 확대 되었다가 원 상태로 되돌아 가면서 해당위치로 이동 실습 : 177 Barney_응용_가로확대_자료.fla 오픈 1번 프레임 무비클립 expand = 500000; 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*(3500 - this._width);

바네이 메뉴 활용 (가로확대) 각 버튼 심볼에 코드 작성 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; }

바네이 메뉴 활용(세로) 각 버튼을 클릭하면 그림이 위 아래로 부드럽게 이동 실습 : 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);

바네이 메뉴 활용 (세로) 각 버튼 심볼에 코드 작성 on (release) { _root.menu.targetY = 17; } on (release) { _root.menu.targetY = 17-340; } on (release) { _root.menu.targetY = 17-340*4; } on (release) { _root.menu.targetY = 17-340*2; } on (release) { _root.menu.targetY = 17-340*5 } on (release) { _root.menu.targetY = 17-340*3; } on (release) { _root.menu.targetY = 17-340*6 }