300 likes | 527 Views
FLASH 를 이용한 GAME 제작. 컴퓨터 그래픽스 프로젝터 발표자 : 우인호 배현진. 목차. Game 제작에 필요한 기능설명 Text Field 설명 액션스크립 설명 Game 제작과정 설명 Ready 심볼 제작 과정 설명 (/5) 심볼 배열 과정 (/2) 제작시 어려운 점 참고 자료. 제작 Game 주요 구성요소. Text Field 이용한 GAME 상의 정보 표시 액션 스크립에서의 임으로 지정된 범위의 마우스 드래그 액션 애니메이션 심벌과 액션스크립의 상호작용 설정.
E N D
FLASH를 이용한 GAME 제작 컴퓨터 그래픽스 프로젝터 발표자 : 우인호 배현진
목차 • Game 제작에 필요한 기능설명 Text Field 설명 액션스크립 설명 • Game 제작과정 설명 Ready 심볼 제작 과정 설명 (/5) 심볼 배열 과정(/2) • 제작시 어려운 점 • 참고 자료
제작 Game 주요 구성요소 • Text Field 이용한 GAME상의 정보 표시 • 액션 스크립에서의 임으로 지정된 범위의 마우스 드래그 액션 • 애니메이션 심벌과 액션스크립의 상호작용 설정
Text Field 정의 • FLASH4 에서의 새로 추가된 기능 • 무비가 재생 중에도 사용자의 텍스트 내용을 변경할 수 있다. • 변수 지정하여 서버응용 프로그램과 연동이 가능 제너레이터에서만 가능했던 무비 컨텐츠의 동적인 갱신 제공
Text Field 속성창의 이해 • Draw border and background : Text 경계선을 보이지 않게 한다. • Password : 텍스트 모양이 별표 모양으로 된다. • Mutiline : 입력값에 Enter값이 있으면 여러 개의 행을 갖을 수가 있다. • Word wrap : Mutiline 항목을 적용시 자동 줄바꿈이 된다.
Restrict text length to () characters : 텍스트의 입력 값을 제한 함. • Disable editing : 텍스트 편집을 할 수 없도록 함. • Disable selection : 텍스트를 선택 할 수 없도록 함.
Do not include font outline : 설정한 폰트를 플래시 무비에 삽입하지 않는다. • Include all font outlines : 사용자가 설정한 폰트대로 보이게 함. • Include only spcified font outlines : 제한적인 옵션을 사용 대문자, 소문자, 숫자, 구드점, 사용자 정의
액션의 정의 • 웹 에니메이션 구현의 핵심 기능 • 강력한 인터랙티브 구현이 가능 • 버튼과 프레임의 액션 지정하여 다양한 인터랙티브한 동작을 제어 가능 사용자와 상호작용이라고도 불리우는 인터랙티브 정보 전달 수단
Game 제작 과정 구슬, 막대기, 바탕 심벌 제작 -> 구슬, 막대기, Ready 애니메이션 심벌 제작 -> 애니메이션 심벌 액션 값 삽입 -> 심벌 배열하기 -> Export Movie로 Swf 파일로 생성
제작 GAME 구성 • 구슬 애니메이션 심벌 Name : bbb -> Instance Name : ball • 마우스 액션 애니메이션 심벌 Name : note -> Instance Name : mousetrack • X축 막대바 애니메이션 심벌 Name : xxx -> Instance Name : Vert • Y축 막대바 애니메이션 심벌 Name : yyy -> Instance Name : hor • Ready 애니메이션 심벌 Name : ready -> Instance Name : Controller
Ready 애니메이션 심볼 • 점수와 구슬상태와 거의 모든 액션을 포함 • 변수 Score(점수), Lives(구슬 상태) 표시함 • Score, Lives Text Field 지정 :Disable editing, Disable selection 설정 Include only specified font outlines 설정에서 Number와 Character 설정 Character 설정에 ‘-’를 적용
Ready 애니메이션 심볼 제작과정 (1/5) 첫번째 프래임에 적용된 액션 Set Variable “xStep”=Random(5) + 6 Set Variable “yStep”=Random(5) + 3 Set Variable “xModifier”=Random(10) Set Variable “yModifier”=Random(10) If(xModifier>5) Set Variable : “xStep”=xStep-(xStep*2) End If If(yModifier>5) Set Variable : “yStep”=yStep-(yStep*2) End If If (lives=0) Go to and step (22) End If
Step 값으로 구슬의 x,y의 Data 값을 표현 • Step 값의 변화를 주기 위하여 Modifier x,y 값 사용 및 Random 함수 사용 • Lives 변수 값이 0을 가르치면 게임 중단 구슬의 Data 값을 변수로 설정한 액션 값
Ready 애니메이션 심볼 제작과정 (2/5) 스물번째 적용된 액션 Set Variable : “horX”=GetProperty(“/Mousetrack”,_x) Set Property (“/hor”, X Position)=Eval(“horX”) Set Variable : “vertY”=GetProperty(“/Mousetrack”,_y) If(vertY<310) Set Property (“/vert”, Y Position)=Eval(“vertY”) Else Set Property (“/vert”, Y Position)=310 End If Set Variable : “BallX”=GetProperty(“/Ball”,_x) Set Property (“/Ball”, X Position)=BallX + Int(xStep) Set Variable : “BallY”=GetProperty(“/Ball”,_y) Set Property (“/Ball”, Y Position)=BallY + Int(yStep)
마우스 애니메이션의 x(horX), y(vertY)설정 • 구슬 애니메이션의 x(BallX+Int(xStep)), y(BallY+Int(yStep)) 설정 마우스 애니메이션, 구슬 애니메이션 x축 y축 설정
Ready 애니메이션 심볼 제작과정 (3/5) 스물 한번째 적용된 액션 Set Variable : “Lose” = 0 Set Variable : “LeftContraint”=GetProperty(“/hor”,_x)-30 Set Variable : “RightContraint”=LeftContrint + 120 Set Variable : “UpperContraint”=GetProperty(“/vert”,_y)-30 Set Variable : “LowerContraint”=UpperContraint+120 Set Variable : “yAccel”=vertY-Getproperty(“/mousetrack”,_y) Set Variable : “xAccel”=horX-Getproperty(“/mousetrack”,_x) If(Getproperty(“/Ball”,_y)>350 OR Getproperty(“Ball”,_y)<50) If((Getproperty(“/Ball”,_x)>LeftContraint) AND (GetProperty (“/Ball”,_x)<RightContraint)) Set Variable : “yStep”=yStep – (yStep*2) Set Variable : “xStep”=Int(xStep – (0.15*xAccel)) Set Variable : “Score”=Score+100 Begin Tell Target (“/Sounds”) Go to and Play (“Horizontal”) End Tell Target Else Set Variable : “Lose”=1 End If End If
Ready 애니메이션 심볼 제작과정 (4/5) If(Get Property(“/Ball”,_x)>350 OR Get property(“/Ball”,_x) <50) If((Get Property(“/Ball”,_y)>UpperContraint) AND (GetProperty (“/Ball”,_y)<LowerContraint)) Set Variable: “xStep”=xStep-(xStep*2) Set Variable: “yStep”=Int(yStep-(0.15*yAccel)) Set Variable: “Score”=Score+100 Begin Tell Target (“/Sounds”) Go to and Play (“Vertical”) End tell Target Else Set Variable: “Lose”=1 End If End If If (Lose=0) Go to and Play (20)
Ready 애니메이션 심볼 제작과정 (5/5) Else Set Property (“/Ball”, X Position)=200 Set Property (“/Ball”, Y Position)=200 Set Variable: “Lives”=Lives-1 Set Variable: “Score”=Score-500 Go to and Play (1) Begin Tell Target (“/Sounds”) Go to and Play(“Lose”) End Tell Target End If
상하 좌우 제한 값을 설정 • 구슬의 y축이 50~350이고 좌우 제한 값에 포함 되지 않을 때 구슬 변화 Data 제공 • 구슬의 x축이 50~350이고 상하 제한 값에 포함 되지 않을 때 구슬 변화 Data 제공 • 그 이외에 값에서 구슬의 변화 Data 제공 구슬의 x,y 축의 제한 값과 이외의 값에 반응을 나타낸 액션 값
심볼 배열 과정 (1/2) • 바탕심벌을 중앙에 배열함 • X,Y축 애니메이션 심벌을 각각 배열함 • X,Y축 Instance Name을 vert,hor로 설정 • 막대 레이어에 다음 액션 값을 설정한다. • 구슬을 가운데에 배열한다. • Instance Name을 mousetrack으로 설정한다. • 구슬 레이어에 다음 액션 값을 설정한다. Set Variable: “/Controller:Lives”=“5” Set Variable: “/Controller:Score”=“0” Fs Command(“allowscale”,”false”)
FS Command : 외부의 프로그램으로 신호를 보내는 액션이다. Command와 Argument등 두 가지 설정 상항이 있다. Command에서 전달한 명령문을 입력하고, Argument에서 참조할 독립변수를 입력한다.
심볼 배열 과정 (2/2) • 마우스 이벤트를 위한 애니메이션 심벌을 구슬 심벌 가운데에 위치 시킨다. • Instance Name을 mousetrack라고 입력 • 마우스 이벤트 레이어에 다음 액션 값을 설정 • Ready 애니메이션 심벌을 다른 심벌과 겹치지 않게 위치시키다. • Instance Name을 Controller라고 입력 • 막대기, 그림자, 구슬, ready, 바탕순으로 배열한다. Set Property(“/mousetrack”,Visibility)=“0” Start Drag(“/mousetrack”, L=80, T=80, R=320,B=320 lockcenter)
Start Drag(“/mousetrack”, L=80, T=80, R=320,B=320 lockcenter) • 마우스 드래그 액션 값 “/mousetrack”는 operation taget 값 L=80, T=80, R=320,B=320 은 이동 범위 lockcenter 은 마우스를 중앙에 고정시키는 옵션
제작시 어려웠던 점 • 변수 값에서 Literal과 Expression 옵션의 차이 • 각 심벌에서 나왔던 새로운 함수 사용 • 구슬의 이동경로 예상 • 구슬의 위치에 따른 Data 값의 변화 계산
참고 문헌 • 따라해보세요 Flash4 – ㈜한컴프레스 • Flash 액션스크립트 바이블 – ㈜성인당 • http://myhome.netsgo.com/proda/ • http://www.easyflash.tv/ • http://www.bestflash.com/