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

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

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

1. menu.swf

[Flash] /attachment/1313033471.swf



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

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

※ 각각의 메뉴 무비클립 : menu01 ~ menu16 / 메뉴이름 동적연결 이름 (linkage name) menu01_m ~ menu16_m
[#M_menu.swf 액션스크립트 소스 - level0 (열기)|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. }


_M#]
[#M_menu.swf 액션스크립트 소스 - button_proto (열기)|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(0×000000);


  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. }

_M#]
후배님이 디자인한 내용을 초안으로 최대한 노가다 작업을 아껴보고자 액션스크립트를 사용했다. 동적으로 연결되는 메뉴이름 무비클립들의 밝기를 일괄조정 하는 작업에서, 과도한 시스템 자원 낭비를 방지하기 위해  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

[Flash] /attachment/1170838957.swf


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

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

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

[#M_지역별분류.swf 액션스크립트 소스 - level0 (열기)|지역별분류.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. }


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


4. 수도권노선도.swf

 

[Flash] /attachment/1118899035.swf


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

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

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


[#M_수도권노선도 swf 액션스크립트 소스 - level0 (열기)|수도권노선도 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. }

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



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


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

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

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

2 thoughts on “[FRDB Project] 03 – view.php 와 플래시 액션스크립트

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>