컴퓨터공학전공 3학년 팀 명 : 문 제 아 팀 원 : 이명하, 김선미

Presentation on theme: "컴퓨터공학전공 3학년 팀 명 : 문 제 아 팀 원 : 이명하, 김선미"— Presentation transcript:

1 컴퓨터공학전공 3학년 팀 명 : 문 제 아 팀 원 : 이명하, 김선미 E-mail : anyface@hanmail.net
강남역 놀자지도! 컴퓨터공학전공 3학년 팀 명 : 문 제 아 팀 원 : 이명하, 김선미

2 목 차 PROJECT 소개 PROJECT 제작과정 제작과정시 문제점 - 인트로에 사용한 액션 & 효과
목 차 PROJECT 소개 PROJECT 제작과정 - 인트로에 사용한 액션 & 효과 - 메인 페이지에 사용한 액션 & 효과 제작과정시 문제점

3 Project 소개 프로잭트 목적 - 건전하고 신선한 놀이 문화를 위한 그 장소에
한번도 가보지 않은 사람이라도 쉽게 찾아 갈 수 있고 정확한 정보로 작업(?)시 실수하지 않을 방법을 제시하고 여러가지 놀이와 음식점들을 종류 별로 지도에 표시 기존의 가게들의 정보나 간단한 약도만 보유 한 사이트와 차별화하여 전체적인 지도 위에 위치와 정보를 표시한 애니매이션 지도

4 PROJECT 제작과정 도입부에 사용된 액션 & 효과 1. 버튼 액션걸기 2. 사운드 첨가 3. 모션 트위닝 4. 랜덤 함수

5 PROJECT 제작과정(계속) 인트로에 사용된 액션 & 효과
1. 버튼액션 걸기 Action/Color Effect 등을 줄려고 하는 것 입니다. 창이 뜨면 Action 항목을 선택하고 그곳에서 Get URL 을 선택합니다. 이 명령은 이 버튼을 누르면 어떤 페이지로 이동 할건지 링크를 걸어주는 것입니다.

6 PROJECT 제작과정(계속) 인트로에 사용된 액션 & 효과
1. 버튼액션 걸기 URL 을 쓸때... 앞에 꼭 써주셔야 합니다. (절대 경로시) 상대경로로 페이지 를 링크시킬수 있습니다. 예를들어 이 버튼이 들어있는 페이지가 main.htm 이고 이 버튼을 눌렸을 때 download.htm 이라는 페이지로 갈려고 한다면 같은 디렉토리에 있다면 download.htm 이라고 쓰시 면 됩니다. 그럼 download 디렉트리에 있다면 Download/download.htm 이라고 쓰시면 됩니다.

7 PROJECT 제작과정(계속) 인트로에 사용된 액션 & 효과
2. 사운드 첨가 사운드를 Import 한 뒤 타임라인에 삽입된 Sound에 대한 속성을 변경 합니다. > Sound : 타임라인에서 적용된 사운드 선택 > Effect : 사운드의 효과 선택 > Sync : 사운드 연주 방법 선택 > Loops : 반복 횟수 지정 > Edit : 이 부분 또한 플래쉬 4와 동일합니다.

8 PROJECT 제작과정(계속) 인트로에 사용된 액션 & 효과
3. 모션 트위닝 (1) 모션 트윈효과를 만들기 위해서는 먼저 보여줄 이미지를 심벌(Symbol)로 등록한다. (2) 심벌이 위치된 프레임의 뒷프레임에 키프레임을 삽입게 되면, 자동으로 앞의 심벌이 그대로 복사된다. (3) 프레임에 위치한 2개의 심벌중에서 변환되어질 심벌의 효과를 만들어 준 다음, 프레임의 중간부분을 마우스로 선택하여 Motion Tween메뉴를 실행한다.

9 PROJECT 제작과정(계속) 인트로에 사용된 액션 & 효과
4. 랜덤 함수

10 PROJECT 제작과정(계속) 인트로에 사용된 액션 & 효과
4. 랜덤함수 while (n<20) { duplicateMovieClip ("/snow", "snow" add n, n); n++; } 위와 같은 랜덤 함수를 이용하여 무비안에 무비클립 이 뿌려지는 횟수를 조정 눈이 오는 효과 만든다.

11 PROJECT 제작과정(계속) 메인페이지 사용한 액션 & 효과
TV과 리모콘을 이용한 배경 (1) 포토샵을 이용하여 그리기 *그라데이션을 이용하여 색채우기 (2) jpg파일이나 gif파일로 만들기 (3) flash으로 넣기

12 메인페이지 사용한 액션 & 효과

13 메인페이지 사용한 액션 & 효과 리모콘에 들어가는 버튼 만들기

14 메인페이지 사용한 액션 & 효과 Flash를 이용한 지도그리기 기존 지도를 보고 선그리기를 이용하여 그린다. 선의 두께는
Straighten을 이용하여 선의두께 를 정한다. 그리고 공간색은 페인트통을 이용하여 색을 채운다.

15 메인페이지 사용한 액션 & 효과 버튼으로 지도 보여주는 액션 Basic Action->Go To를 이용한
다. gotoAndPlay(1)이 나올 것 이며 여기서 (1)은 frame number 를 말하는 것이다. 즉 (7)은 7 frame으로 가서 play하라는 것이다.

16 메인페이지 사용한 액션 & 효과 버튼에서 gotoAndplay후 frame에서 지도 보여주는 방법
의 Frame마다 stop을 넣어준다.

17 메인페이지 사용한 액션 & 효과 지도내의 건물을 버튼심벌로 만들기
인터넷에서 다운로드 받은 gif/jpg파일을 Flash로 불러들인다. New symbol(Ctrl+F8)을 이용하여 버튼을 만든다.그리고 음식점을 알 수 있도록 DOWN/OVER에 음식점을 보이게 한다.

18 메인페이지 사용한 액션 & 효과 음식점들의 쓰일 배경들 제작과정 기존의 그림들을 모아서 배경으로 씀

19 메인페이지 사용한 액션 & 효과 음식별로 분류해 놨던 음식점들의 배경은 모두 이런 같은 방식에서 이루졌다.

20 메인페이지 사용한 액션 & 효과 음식점들의 글을 꾸미기 위해 사용된 액션과 효과
예1)점점 글과 배경이 입체적으로 다가오는 효과 ->

21 메인페이지 사용한 액션 & 효과 예2)사각형이 갈라지며 흐릿하게 멀어지는 효과와 글이 다가오는 효과 → → →

22 메인페이지 사용한 액션 & 효과 예3)모션트위닝을 이용한 자연스러운 동작을 이용하는 효과 보여주기
자연스러운 움직임을 강조하였음

23 메인페이지 사용한 액션 & 효과 예4)자연스럽게 움직이는 글과 금붕어 보여주기. →

24 메인페이지 사용한 액션 & 효과 예5)솓아오르는 물방울 구현하기 액션 스크립트 이용!! →

25 메인페이지 사용한 액션 & 효과 솓아오르는 물방울 구현에 필요한 액션 첫번째 프레임 // init()
z = 0;setProperty ("star", _visible, 0); 두번째 프레임 duplicateMovieClip("star","star" add z,z); y_cord=200; x_cord=225-(Math.random()*450); scale=Math.random()*60; setProperty("star" add z,_y,y_cord); setProperty("star" add z,_x,x_cord); setProperty("star" add z,_xscale,scale); setProperty("star" add z,_yscale,scale); ++z; 세번째 프레임 gotoAndPlay(2);

26 메인페이지 사용한 액션 & 효과 예6)사운드 넣기와 실 폭탄 터트리기 효과 (뒷배경 포토샵으로 작업) → → →

27 제작과정시 문제점 액션스크립트 사용에 미숙한 점이 많아힘들었음.
또한 무비클립안 의 무비클립들이 import하여 불러들 일 때 제대로 움직이지 않아 문제점을 없애기 위해 액션스크립트를 이용하였으나 위치지정의 문제점을 발견하였음. 그림을 그리는 데서 오는 미숙함