주)INVENTORNICS 노창배 강좌 소개 및 액션 스크립트

Presentation on theme: "주)INVENTORNICS 노창배 강좌 소개 및 액션 스크립트"— Presentation transcript:

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

2 변수 원하는 데이터를 필요할 때마다 불러오거나, 계산하고 저장하기 위해서 컴퓨터의 기억장소에 방을 만들어 놓은 것 var 변수이름 = 변수값(데이터) 변수(variables) 숫자 : 1, 100, 3.14 문자열 (string) : “abc” , “숭실” 불린 (boolean) : true , false 오브젝트 (object) – 배열 기억장소 저장될 수 있는 데이터의 타입

3 변수의 유효 범위 타임라인 변수 같은 타임라인 상에 존재하는 변수는 무비클립을 제외하고 버튼이나 프레임 어느 곳에 써도 동일한 변수로 인식 전역 변수 프로그래밍 전체에서 공통적으로 사용할 수 있는 변수 _global 속성을 이용하여 전역 변수를 선언할 수 있음 당연히 무비클립 내에서도 유효게 사용할 수 있다. 지역 변수 특정 함수 안에서만 유효한 변수 객체 변수 해당 객체에서만 유효한 변수 객체명.변수

4 텍스트 필드를 이용한 변수 선언 Text Field Static text Dynamic text Input text 변수 값을
지정할 수 없음 변수 값 지정 변수 값 지정 변수에 들어온 값을 텍스트 박스에 출력 변수에 들어온 값을 텍스트 박스에 출력 텍스트 박스에 입력한 값을 변수에 저장

5 mouseMove 이벤트를 이용한 마우스 추적(1)
마우스가 움직일 때 마다 발생하는 이벤트 마우스 커서가 움직일 때 마다 현재 마우스 커서의 좌표 값을 전달해 줌 마우스의 좌표 값 표시할 때 필요한 기능 Dynamic Text : Var 변수 이름을 지정 _xmouse, _ymouse 라는 무비 클립 속성 이용 onClipEvent(mouseMove) { _root.txtX = _root._xmouse; _root.txtY = _root._ymouse; }

6 mouseMove 이벤트를 이용한 마우스 추적(2)
P106 실습 정리 무비클립이벤트_자료.fla 오픈 txtX, txtY 변수이름을 가진 Dynamic Text 추가 액션을 넣어주기 위한 빈 무비클립(action) 을 작성해서 추가 Int 함수 : 값을 정수로 표현 onClipEvent (load) { this._visible = false; } onClipEvent (mouseMove) { _root.txtX = int(_root._xmouse); _root.txtY = int(_root._ymouse); fscommand("allowscale", false);

7 mouseMove 이벤트를 이용한 마우스 추적(3)
P109 / P110 활용 실습 정리 106 실습에 추가 updateAfterEvent() : 무비클립에 지정된 이벤트를 수시로 업데이트하는 함수 txtUp/txtDown 이라는 이름을 가진 Dynamic Text 추가 onClipEvent (mouseMove) { …. 생략 updateAfterEvent(); } onClipEvent (mouseMove) { … 추가 _root.txtUp = "No"; _root.txtDown = "No"; } onClipEvent (mouseUp) { _root.txtUp = "Yes"; onClipEvent (mouseDown) { _root.txtDown = "Yes";

8 문자열/비교 연산자 문자열 연산자는 문자열 데이터에 대한 연산을 수행한다.
비교연산자는 주어진 데이터 값들의 크기를 서로 비교하여 그 결과를 불린(boolean) 형태로 알려준다. 연산자 기능 보기 결과 + 데이터 연결 “Flash” + “MX” “Num” + 10 FlashMX Num10 == != <> <= >= 왼쪽과 오른쪽의 문자열 비교 “a” < “z” “sky” < “sound” “A” < “a” True 연산자 기능 예 내용 == 항등 연산자 If(a==100) A의 값이 문자열 “100” - 실행됨 != 부등 연산자 If(a !=0) A의 값이 문자열 “0” - 비교함 < , > 비교 <= , >=

9 논리 연산자 논리 연산자는 불린(Boolean) 값을 서로 비교하여 그 결과를 다시 불린 형태로 알려준다.
예제 : 논리연산자.fla 연산자 기능 예 내용 && 논리 And If(a=10 && b=20) { 수식 1; } 변수 a=10이고 20일 때만 수식 1 실행 || 논리 Or If(a=10 b=20) { 변수 a와 b중의 하나만 만족하면 수식 1실행 ! 논리 Not If(!(a<10)) { 변수 a가 10보다 클 때 수식 1 실행

10 제어문 프로그램의 실행 흐름을 제어하는 문장 주어진 조건에 따라 선택적으로 실행됨 if, switch
조건문 주어진 조건에 따라 선택적으로 실행됨 if, switch 반복문 : 주어진 조건이 만족되는 동안 반복적으로 실행됨 주어진 조건이 만족되는 동안 반복적으로 실행됨 for, while

11 조건문 switch if 조건문 조건문 switch(표현식){ case 상수식 1: 실행 액션스크립트; break;
주어진 조건이 참인지 거짓인지를 결정한 후 조건에 맞는 액션스크립트 실행 If(조건식){ 실행 액션스크립트 1; } switch(표현식){ case 상수식 1: 실행 액션스크립트; break; case 상수식 2: case 상수식 3: default: 기본 실행 액션스크립트; } switch if If(조건식){ 실행 액션스크립트 1; }else{ 실행 액션스크립트 2; } 조건문 If(조건식){ 실행 액션스크립트 1; }else if(조건식2){ 실행 액션스크립트 2; }else{ 실행 액션스크립트 3; } 다중 IF 문과 switch 문 예제 조건에 만족하는 값을 출력

12 if 문을 공부하자 (1) 특정한 조건을 만족하는 실행문만 처리 만약 ~ 하면 ~ 하시오 형식
조건 : 비교 연산자 교재 : P112 참조 If(조건식) { 실행1; 실행2; } if (조건식) { 조건식이 참일 경우 실행1; } else { 조건식이 거짓일 경우 실행2; if (조건식1) { 조건식1이 참일 경우 실행1; } else if(조건식2) { 조건식2가 참일 경우 실행2; else { 조건식2가 거짓일 경우 실행3;

13 if 문을 공부하자 (2) score가 90~100 이면 grade 에 “A” 이면 “B” 나머지는 “C”로 대입하는 다중 IF 문 조금씩 x좌표 값 만큼 움직이는 코드 움직이는 방향 변경 할 때 If(score>90 && score<=100) { Grade =“A”; } else if(score>80 && score <=90) { Grade =“B”; } else { Grade =“C”; } onClipEvent(enterFrame) { this._x = this._x + speed; } speed = -1 * speed;

14 if 문을 공부하자 (3) P114 실습 정리 If문_자료.fla 오픈 공 무비클립 : instance Name : ball
번갈아 가면서 크기 변경 코드 삽입 onClipEvent(load){ speed = 5; } onClipEvent(enterFrame){ this._x = this._x + speed; if(this._x > 490){ speed = -1*speed; if(this._x < 60){ if 문 을 수정 if(this._x > 490 || this._x <60) { speed = -1 * speed; } this._xscale = -1*this._xscale;

15 거꾸로 재생되는 플래시 무비 이전 프레임으로 이동 하는 메소드 이용 prevFrame() : 이전 프레임으로 이동
_currentframe : 현재 프레임 번호 리턴 _totalframes : 전체 프레임 수 리턴 P121 실습 정리 Reverse_data.fla 오픈 무비클립 instance Name : Cat This.prevFrame() /nextFrame() 코드를 변경 if (this._currentframe ==1) { this.gotoAndStop(this._totalframes); } else { this.prevFrame(); } this.gotoAndStop(this._currentFrame-1); this.gotoAndStop(this._currentFrame+1);

16 startDrag 응용하기 (1) startDrag : 마우스로 드래그 stopDrag : 드래그를 멈춤 형식
target.startDrag(lockCenter, left, top, right, bottom); target : 드래그할 무비 클립 lockcenter : 무비클립의 중심점이 마우스 커서와 일치시킬지 여부를 나타냄 (true: 중심점이 일치, false: 일치 안함) left/top/right/bottom : 드래그될 사각형 영역 (left,top) (right,bottom) _root.window.startDrag(true); _root.cat.startDrag(true,100,100,300, 400);

17 startDrag 응용하기 (2) P127 실습 정리 startDrag_자료.fla 오픈 스티커 예제
1) 마우스 버튼에 눌려졌는지를 여부를 판단 버튼 심볼 2) startDrag 액션을 이용하여 드래그 무비클립 심볼 스티커 예제 Sticker.fla 오픈 on(press){ this.startDrag(); } on(release){ this.stopDrag();

18 startDrag 영역 설정하기 (1) 형식 : target.startDrag(lockCenter, left, top, right, bottom); mask 영역안에 보여질 무비클립의 이동 범위 P131/P132 그림 참조 왼쪽 : 이미지가 왼쪽방향으로 더 이상 이동할 수 없을때 마스크 중심 x좌표에서 (드래그되는 이미지- 마스크 이미지)/2 한 만큼 이동시키면 이미지가 드래그가 가능 Left = mask._x -(3-1) 위쪽 : 이미지가 위쪽 방향으로 더 이상 이동할 수 없을때 마스크 중심 y좌표에서 (드래그되는 이미지- 마스크 이미지)/2 한 만큼 이동시키면 이미지가 드래그가 가능 Top = mask._y-(5-4) left mask._x ① ② ③ top mask._y ④ ⑤ ⑥

19 startDrag 영역 설정하기 (2) 오른쪽 : 이미지가 오른쪽 방향으로 더 이상 이동할 수 없을때
right=mask._x + (3-1) 아래쪽 : 이미지가 아래쪽 방향으로 더 이상 이동할 수 없을때 Bottom : mask._y _(5-4) right mask._x ① ② ③ bottom mask._y ④ ⑤ ⑥

20 startDrag 영역 설정하기 (3) P133 실습 정리 stargDrag2_자료.fla 요픈
Img : bnImg 버튼 심볼 등록  mcImg 무비클립 심볼 등록 mcImg 무비클립을 더블클릭해서 bnImg 버튼 심볼에 코드 작성 마스크로 사용할 영역 (instance Name :mask)만든 후에 마스크 기능 부여 on (press) { left = _root.mask._x - (this._width - _root.mask._width)/2; right = _root.mask._x + (this._width - _root.mask._width)/2; top = _root.mask._y - (this._height - _root.mask._height)/2; bottom = _root.mask._y + (this._height - _root.mask._height)/2; startDrag(this,false, left, top, right, bottom ); } on (release, releaseOutside) { stopDrag(); (10,10) (390, 290) 이미지가 실질적으로 이동할 범위 (310, 235) (90,65) 이미지의 반지름 : 가로 300, 세로 225

21 startDrag 영역 설정하기 (4) P137 활용1 실습 정리 문제1_자료.fla 오픈
사각형 이미지 : bnDrag 버튼 심볼 등록  mc무비클립 등록 영역 : box on(press){ left = _root.box._x - _root.box._width/2 + this._width/2; right = _root.box._x + _root.box._width/2 - this._width/2; top = _root.box._y - _root.box._height/2 + this._height/2; bottom = _root.box._y + _root.box._height/2 - this._height/2; this.startDrag(false, left, top, right, bottom); } on(release, releaseOutside){ this.stopDrag(); (10,10) 사각형이 실질적으로 이동할 범위 사각형 반지름 : 가로 12, 세로 12 (310, 260)

22 startDrag 영역 설정하기 (5) P137 활용2 실습정리 on(press){ left = _root.line._x;
문제2_자료.fla 오픈 선 : mcline 무비 클립 등록 (instance Name : line) 사각형 : bnRect 버튼 등록  mcRect 무비 클립 등록 선과 사각형 선택 : mcSlider 무비 클립 등록 on(press){ left = _root.line._x; top = _root.line._y; right = _root.line._x + _root.line._width; bottom = _root.line._y; this.startDrag(false, left, top, right, bottom); } on(release){ this.stopDrag(); line

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

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

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

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

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

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

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

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

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

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