[FRDB Project] 03 - view.php 와 플래시 액션스크립트

http://minsangk.com/17

그간 이래저래 공연도 끼어있고 해서 1,2번 포스트가 올라오던 시점에 비해 업데이트가 늦어졌다.
하지만 시간의 간극이 워낙 크다보니, 그 사이에 놀고 있지만은 않았다는 사실을 증명하듯.
의외로 꽤나 많은 부분에서 진척이 이루어졌다.

대망의 디자인 업데이트 된 페이지뷰가 등장하기 전에 몇가지 업데이트 사항을 기록하고자 한다.

1. menu.swf



- 별다른 설명이 필요 없는. 언제나 레이아웃 상단에 위치할 메인메뉴 네비게이션

* 동그라미에서 막대가 되는 애니메이션은 프레임을 이용했고, 각각의 메뉴가 독립적으로 동작하는 부분은 액션스크립트를 통한 프레임 액션 함수- MovieClip.prevFrame() MovieClip.nextFrame() -들을 이용하여 구현
* 동그라미에서 막대로 변하는 심볼은 하나지만, 각각에 대응하는 메뉴이름들은 전부 각각의 이름(접미어 _m) 으로 개별 등록되어 있고 액션스크립트를 통해 동적으로 등록- MovieClip.attachMovie() 후 일괄적으로 위치 배치 & 회전
* 동적으로 등록된 각각의 메뉴이름들은 재생된 프레임 비율을 계산하여, 등록된 Color 객체의 setRGB 메소드를 통해 밝기 변경
* 무비클립의 Tint 속성을 통해 개별 메뉴의 색 구분
* 각각의 메뉴에 대응하는 링크/타겟 배열을 두어 링크 관리를 용이하게 구현

※ 각각의 메뉴 무비클립 : menu01 ~ menu16 / 메뉴이름 동적연결 이름 (linkage name) menu01_m ~ menu16_m

menu.swf 액션스크립트 소스 - level0 (열기)

(Language : javascript)

1. // 본 파일은 소스코드 작성당시 파일이라 링크는 정확하지 않음
2. var linkArray = new Array(
3.       "http://minsangk.com/kid/test/02.html",
4.       "http://minsangk.com/kid/test/03.html",
5.       "http://minsangk.com/kid/test/04.html",
6.       "http://naver.com",
7.       "http://naver.com",
8.       "http://naver.com",
9.       "http://naver.com",
10.       "http://minsangk.com/kid/test/08.html",
11.       "http://minsangk.com/kid/test/10.html",
12.       "http://pds6.egloos.com/pds/200711/08/03/12.bord2.html",
13.       "http://pds7.egloos.com/pds/200711/08/03/11.bord1.html",
14.       "http://minsangk.com/kid/test/09.html",
15.       "http://pds7.egloos.com/pds/200711/08/03/13.bord3.html",
16.       "http://pds7.egloos.com/pds/200711/08/03/14.bord5.html",
17.       "http://cafe.naver.com/frdb",
18.       "http://cafe.daum.net/kicha"
19.       );
20.  
21. var targetArray = new Array(
22.       "_self",
23.       "_self",
24.       "_self",
25.       "_self",
26.       "_self",
27.       "_self",
28.       "_self",
29.       "_self",
30.       "_self",
31.       "_self",
32.       "_self",
33.       "_self",
34.       "_self",
35.       "_self",
36.       "_blank",
37.       "_blank"
38.       );
39.  
40. headerTitle.onRelease = function()
41. {
42.  getURL("http://minsangk.com/kid/test/01.main(1).htm","_self");
43. }

menu.swf 액션스크립트 소스 - button_proto (열기)

(Language : javascript)

1. stop();
2.  
3. // 최초 1회 실행
4. if (count == undefined) {
5.  // 각각의 메뉴 이름 동적으로 등록
6.  this.attachMovie(this._name + "_m", this._name + "_m", this.getNextHighestDepth());
7.  
8.  // 등록된 메뉴 이름 무비클립의 재배치 / 회전
9.  menuName = this[this._name + "_m"];
10.  menuName._x = 9;
11.  menuName._y = 54;
12.  menuName._rotation = -49.5;
13.  
14.  count=1;
15. }
16.  
17. // 메뉴 이름의 Color 객체 생성
18. menuName_color = new Color(menuName);
19. menuName_color.setRGB(0x000000);
20.  
21. // 롤오버-아웃시 rollover 변수의 값 토글
22. this.onRollOver = function()
23. {
24.  rollover = true;
25. }
26.  
27. this.onRollOut = function()
28. {
29.  rollover = false;
30. }
31.  
32. this.onEnterFrame = function()
33. {
34.  if (rollover)
35.  {
36.   // 현재 프레임이 최종 프레임이 아니면 순방향 재생
37.   if (this._currentframe != this._totalframes) {
38.    this.nextFrame();
39.   }
40.   // 재생이 종료 되었을 경우 stop
41.   else {
42.    stop();
43.   }
44.  }
45.  // 이외의 경우 역방향 재생
46.  else
47.  {
48.   this.prevFrame();
49.  }
50.  
51.  // 재생된 프레임 비율을 계산하여 setRGB 매개변수 포맷으로 변환
52.  color_int = int ( (this._currentframe-1) / (this._totalframes-1) * 255 );
53.  color_0x = "0x" + color_int.toString(16) + color_int.toString(16) + color_int.toString(16);
54.  
55.  // 메뉴 이름에 링크되어 생성된 Color 객체에 색 지정
56.  menuName_color.setRGB(color_0x);
57. }
58.  
59. // 클릭 시 해당되는 주소/타겟 으로 링크
60. this.onRelease = function()
61. {
62.  linkIndex = Number(this._name.substr(4,2)) -1;
63.  getURL(_root.linkArray[linkIndex],_root.targetArray[linkIndex]);
64. }

후배님이 디자인한 내용을 초안으로 최대한 노가다 작업을 아껴보고자 액션스크립트를 사용했다. 동적으로 연결되는 메뉴이름 무비클립들의 밝기를 일괄조정 하는 작업에서, 과도한 시스템 자원 낭비를 방지하기 위해  colorTransform 클래스를 안 쓰고 오로지 Color 객체의 setRGB 메소드만 사용했다. 왜 액션스크립트에는 변수를 포맷팅해서 출력해주는 함수가 없는가-_- 찾다찾다 gg치고 그냥 내가 하려하다보니 좀 난잡한 코드를 만든 감이 없잖아 많은듯-_- 어쨌든 구현에는 성공했다. 프레임 액션은 이것말고도 참 여러모로 쓸모가 많은 코드인듯 싶네. 여기 말고도 현재 제작중인 플라곤 홈페이지의 메인메뉴 네비게이션도 똑같은 방식으로 구현되어 있다. 그것도 그렇고 여기 이 녀석도 그렇고 어쨌든 메뉴 네비의 첫 구상을 내가 하지 않은 경우, 액션스크립트를 통해 자연스러운 애니메이션을 구현하다보면 결국 결론은 프레임 액션으로 귀결되는 것 같다. AS1.0 시절의 노가다성 프레임질에 AS2.0 을 통한 고급스러운 뒷마무리- 라는 느낌을 주는 기술. 어쨌거나 좀 더 화려하고 직관적인, 그러면서도 시스템 효율을 최대한으로 이끌어내는데에 참 유용한 기술인 것만은 분명하다. (다만 구현이 그렇다는 것이고, 구현 후에 수정하려면 여러모로 귀찮아진다는 것 때문에 본인은 별로 선호하지 않을뿐)


2. view.php

http://minsangk.com/frdb/view.php
- idx 파라미터를 넘겨받아 지정된 자료를 테이블로 출력하는 파일

* 구성된 레이아웃대로 각각의 필드를 출력
* 사업상황(state 필드) 의 내용에 따라 1:1 대응되는 신호등 이미지 출력
* 관련노선(linkingIDX 필드) 의 내용을 구분자(|)를 기준으로 explode 하고, 해당 idx 의 노선명을 쿼리 전송받아 각각의 링크를 가진 문자열로 출력
* 목록으로 되돌아가는 버튼 폼
* list.php 코드에 해당 인덱스를 매개변수로 하여 view.php 를 호출하는 하이퍼링크를 추가
 - <a href="./view.php?idx=??">

이건 후배님이 하고 있는 페이지 디자인의 초안이 나오면 들어가려고 계획된 것이었는데, 후배님의 PPT 발표 예정 상황과 겹쳐 하루만에 초고속 날림-_- 제작되었다. (그런데 중요한건 PPT 발표가 미뤄져서 이 녀석은 아직 미공개 상태라는거) 다른 페이지와 마찬가지로 CSS 가 눈꼽만큼만 사용된 극도의-_- 코드위주 페이지이지만 어쨌든 계획된 내용에서 필요한 부분으로 체크된 내용은 전부 구현되었다고 보아도 좋다. 관련자료 필드 추가가 이뤄지면 또 한번의 코드 수정은 불가피하겠지만, 그 외의 부분은 (디자인을 제외하고) 거의 완성 단계다.

워낙 오랜만에 다시 손 댄 PHP 코드라 내가 짜놓은 녀석들이 낯설어 보여 약간의 고생은 했지만, 요즘 과외 때문에 비슷한 구성과 색다른 문법을 지닌 JSP 를 공부하고 있는것이 나름의 상승 작용을 한 것 같은 느낌이다. PHP 코딩능력이 한결 좋아져서 이제 50라인 정도는 그냥 머릿속에 생각한 대로 옮기면 불필요한 중간 확인 과정을 거칠 필요 없이 작성이 가능해졌다.


3. 지역별분류.swf


- 입력된 DB 를 지역분류별로 출력하는 링크 네비게이션

* 각각의 조각지도를 롤오버 하면 최대 알파치로 진해지고, 롤아웃하면 다음 롤오버 액션에 상관없이 부드럽게 최소 알파치로 변경
X 각각의 조각지도에 대응하는 리스트 출력
(list.php 에서 각각의 상황에 맞는 vMode 추가가 이뤄지는대로 링크 예정)

※ 각각의 조각 지도 무비클립 : sub1 ~sub7

지역별분류.swf 액션스크립트 소스 - level0 (열기)

(Language : javascript)

1. // sub (조각지도) 의 갯수
2. AmountOf_sub = 7;
3.  
4. // 특정 링크 선택 변수(roll), 알파 변화 가속도(acc), 최대 알파치(maxAlpha), 최소 알파치(minAlpha) 초기화
5. roll = 0;
6. acc = 0.1;
7. maxAlpha = 100;
8. minAlpha = 40;
9.  
10. // 각각의 sub 가  롤오버되면 roll 변수에 sub 의 인덱스 저장
11. for(var i =1; i<=AmountOf_sub; i++)
12. {
13.  this["sub"+i].onRollOver = function()
14.  {
15.   roll = substring(this._name,4,1);
16.  }
17.  this["sub"+i].onRollOut = function()
18.  {
19.   roll = 0;
20.  }
21. // 각각의 sub 를 최소 알파치로 초기화
22.  this["sub"+i]._alpha = minAlpha;
23. }
24.  
25. this.onEnterFrame = function()
26. {
27. // 선택된 sub 는 최대 알파치로 가속, 나머지 sub 는 최소 알파치로 가속
28.  for(var i =1; i<=AmountOf_sub; i++)
29.  {
30.   if(i == roll) {
31.    this["sub"+i]._alpha += (maxAlpha - this["sub"+i]._alpha)*acc;
32.   }
33.   else {
34.    this["sub"+i]._alpha += (minAlpha - this["sub"+i]._alpha)*acc;
35.   }
36.  }
37. }

지도의 출처는 아마도 네이버가 아닐까 싶은데- 후배님이 손수 비트맵 파일을 따서 각각의 조각지도를 PNG 로 저장했고. 나는 그 파일을 받아 Magic Wand 툴로 투명 부분의 Shape 를 삭제해 심볼화했다. 군대 행정반에서부터 시작된 액션스크립트 2.0 공부는 사실상 이러한 스타일의 부드러운 메뉴 네비게이션을 구현하기 위해서 였다고 해도 과언이 아닐 거다. 이제는 그 코드 구현이 어느 정도 머릿속에 확고히 자리 잡아 어떠한 형식이라도 가장 간결한 형태로 코딩하는 방법을 찾았고. 위 코드는 대략 그 모든 조건이 최적화 되어 있다. 이 블로그에 구현될 메뉴 네비도 대략적으로는 이런 형식에서 크게 벗어나지 않는 형태가 될 듯. 문제는 노력과 시간. 일단 머릿속에 대강의 디자인과 구성이 들어가 있으니, FRDB 프로젝트가 끝나는대로 작업 시작이다-.-.- 그때쯤이면 넘치도록 뛰어난 후배님의 디자인 센스를 마구마구 부려먹는거다. 하하-.-.-


4. 수도권노선도.swf


- FRDB 에 DB화 되어 등록된 자료 중 수도권 분류 노선들과 1:1 매칭되는 수도권 노선도 플래시 파일

* 어느 위치에서나 토글(toggle) 방식으로 이동과 정지가 가능
* 화면 중앙을 중심으로 좌우상하 이동 폭에 따라 노선 이미지의 상하좌우 검색이 가능
* 노선 이미지의 경계선을 인식하여 유효범위가 오버플로우 되지 않음
* 등록된 노선을 오버마우스 하면 블러 필터를 통해 하이라이트 됨
* 등록된 노선을 배열로 관리하여 삽입, 수정, 삭제가 용이하게 구성
(위 파일은 현재 인천지하철 3개 노선만 등록되어 있음)
X 로드 매개변수로(GET Method) idx 를 입력받아 특정 노선을 하이라이트 시키고 그 위치로 전체 노선도를 위치시킴
(이건 조만간에 구현 예정 -_-_-)

※ 전체 노선도 무비클립 : mc_all / 각각의 노선 무비클립 : mc_all.sub?? (물음표 자리에 해당 노선의 idx)

수도권노선도 swf 액션스크립트 소스 - level0 (열기)

(Language : javascript)

1. // 노선도 이미지 전체 사이즈
2. allWidth = 3100;
3. allHeight = 2311;
4.  
5.  
6. // 노선도 이미지 전체 사이즈
7. allWidth = 3100;
8. allHeight = 2311;
9.  
10. // 캔버스 전체 사이즈
11. canvasWidth = 930;
12. canvasHeight = 693;
13.  
14. // 이동 가속도, 이동/정지 모드 초기화
15. acc = -0.05;
16. _root.moveMode = false;
17.  
18. if(idx) {
19. // idx 관련 구현 소스 들어갈 자리
20. }
21.  
22. // 이동/정지 모드 토글
23. mc_all.all.onRelease = function() {
24.  if(_root.moveMode) {
25.   _root.moveMode = false;
26.  }
27.  else {
28.   _root.moveMode = true;
29.  }
30. }
31.  
32. this.onEnterFrame = function()
33. {
34. // 이동 모드일 때-
35.  if (_root.moveMode == true) {
36. // 화면 중앙을 중심으로 노선도의 좌우 이동
37.   scrollStepX = (_root._xmouse - canvasWidth/2) *acc;
38.   scrollStepY = (_root._ymouse - canvasHeight/2) *acc;
39.  
40. // 이미지 오버플로우 방지 if문
41.   if(mc_all._x+scrollStepX >= canvasWidth-allWidth && mc_all._x+scrollStepX <= 0) {
42.    mc_all._x += scrollStepX;
43.   }
44.   if(mc_all._y+scrollStepY >= canvasHeight-allHeight && mc_all._y+scrollStepY <= 0) {
45.    mc_all._y += scrollStepY;
46.   }
47.  }
48. }
49.  
50. // 블러 필터 클래스 import
51. import flash.filters.BlurFilter;
52.  
53. // 관련 노선의 idx 를 배열로 등록
54. var subListArray = new Array ( "93","95","96");
55.  
56. // 블러 필터 객체 생성
57. var blur:BlurFilter = new BlurFilter(4,4,3);
58.  
59. // 관련 노선 필터 적용 (적용된 상태에서 알파값으로 하이라이트/노멀 상태 변경)
60. for(var i in subListArray)
61. {
62.  this["sub"+subListArray[i]]._alpha=0;
63.  this["sub"+subListArray[i]].filters=[blur];
64.  
65.  this["sub"+subListArray[i]].onRollOver = function()
66.  {
67.   this._alpha = 80;
68.  }
69.  
70.  this["sub"+subListArray[i]].onRollOut = function()
71.  {
72.   this._alpha = 0;
73.  }
74. }

후배님 수업시간에 누군가의 한마디 때문에 만들어야만 했던 녀석. 아마 그 학생은 이게 얼마나 힘든 작업인지 자기가 말하면서도 몰랐을 거다, 젠장 -_- 그 덕에 후배님의 피를 깎는 노가다와 본인의 머리털을 쥐어뜯는 노력이 만나 완성되었다. 지역별분류.swf 와 마찬가지로 후배님이 저 수많은 노선들을 손수 하나하나 포토샵으로 따서 PNG 로 저장해주었고, 나는 다시 그걸 Magic Wand 로 손보아 각각의 idx로 심볼화. 일단은 스크립트부터 완성시키느라 인천지하철 3개 노선 외에 나머지는 파일은 있으나 등록되어 있지 않은 상태. 지역별분류.swf 보다 몇배는 더 고심하고 고민하고 삽질해야 했던 스크립트였다. 이제 수십개의 관련 노선들을 추가하고 그 노선에 대응하는 idx 를 찾아 링크하고 각각의 노선 색깔에 맞는 하이라이트 컬러를 조정하고 등등의 노가다성 작업만 넘치도록 남았구나. 아아-_-_-



다음 FRDB Project 포스트는 이전 포스트에서 예고한 바와 같이 후배님이 제작중인 페이지 디자인을 중점적으로 소개해 보겠다. 아직은 이것저것 손 볼 것이 좀 많아 매 수업시간마다 있는 발표 과제 위주로 구성을 하다보니 전체적인 페이지 디자인의 윤곽이 흐릿해진 감이 있지만. PHP 코드 부분이나 중간중간 페이지를 빛내주는(ㅋ;) 플래시 액션스크립트가 어느 정도 궤도에 올랐으니, 조만간 페이지 디자인도 깔끔하게 이 무대에서 데뷔할 날이 올 것이다.


그런데,
소주 두어병 먹고 들어온 상태에서 내가 이런 포스트를 두드리게 될 줄 몰랐다. 요 아래 포스트는 우울해 죽을려고 하더니, 이렇게 신나게 이런 얘기를 떠들고 있는 것 보면. 나 그런대로 체질상 이게 맞는 거 같기도 하고. 에이, 모르겠네. 그냥 하는동안은 참 재밌었고, 해놓고 보니 꽤나 뿌듯하고. 두드리는대로 즉각적으로 결과가 튀어나오는 웹프로그래밍과 액션스크립트는 어쨌거나 참 매력 있는 녀석.

감당할 수 있는만큼만 최선을 다하면 그것도 참 열심히 사는 한 방법인데, 왠지 나란 인간은 그래서는 만족을 잘 못해버린다. 그래서 몰아놨다가 가끔 한번씩 스스로를 확 옥죄어버리면 늘 감당할 수 없을만큼 최선을 다해버리고 마는거다.

아, 참, 인생 좀 피곤하게 살아, 나도.