geuni

http://enfren.hankooktire.com/

AS3.0을 이용한 첫 작업이 되었다.
기능적으로도 심플하고 개발쪽에 연동되는 작업또한 고난이도가 없었기 때문에 3.0을 활용해 제작을 하기로 마음을 먹고 제작을 하게 되었다.
그동안 테스트나 필요할만한 클래스를 제작해 두었지만 혹시 나올지 모르는 버그나 레퍼런스가 절대적으로 부족해서 쉽지 않을거라 생각을 했었는데 역시나 버그가 하나둘씩 나왔다.
프로젝트 동안에 발생한 버그.

1. 엔터 프레임으로 무비클립을 제어하는 동안에는 엔터프레임으로 제어되는 클립안의 무비클립은 멈추게 된다.(이부분은 다른 사람들에게 물어봤지만 다들 모르고 있는 버그였다 차후에 문제가 있을듯 하다...)
2. 로드된 swf를 삭제할 경우 오브젝트가 남아있다.(flv,사운드,리스너등이 남게된다. 스코프를 잃어 버린 상태에서 혼자 작동을 하고 있기 때문에 심각한 문제였다.) help에 명시되어 있기 때문에 버그라고 할수는 없고 알아서 리소스 관리를 잘해줘야 할듯하다...^^;;;
3.xml데이터를 불러왔을때 4000자 이상의 문자가 있을경우 제대로 인식이 되지 않는 문제(이건 정말 심각한 문제였다. 할수 없이 utf - 8 로 형태를 바꿔서 불러왔지만 실제 개발쪽과 연동이 된다면 이건 통용이 안될수도 있기 때문에 xml로 연동하는건 생각을 해봐야 할 문제인것 같다.)

원래부터 버그를 예상하고 작업했지만 정말 as3.0은 왼지 내가 베타 테스터가 되는 느낌이 강하다.
버그도 많고 너무 성급히 출시 한게 아닌가 하는 생각이 들정도...;;;; 아무튼 무리 없이 오픈했기에 뿌듯하다..

http://www.11st.co.kr
모자이크의 경우는 제품으로 모자이크를 구성하는 방식이다.
원래는 이미지에 각각의 포인트를 잡아서 그 포인트의 색상값에 따라서 제품별로 가장 근사한 색상을 가진 제품을 이미지의 위치로 이동을 시켜로 했었지만 제품의 업데이트의 용이성과 기획전의 성격을 가지는 서비스를 제공하기 위해서는 많은 양의 썸네일을 로드해 올수는 없는 노릇이었다.
그리고 개발쪽에서도 너무 많은 통신은 서버자체에 무리를 줄수 있다는 의견이 있었기 때문에 지금과 같은 형태로 구현이 되었다.
기본적으로 최대 30개의 제품이미지와 제품 정보를 xml로 받아서 제품의 이미지를 뿌리면서 각 이미지에
각각의 포인트에 색상에 맞추어서 이미지의 색상을 변경해 주는 식으로 모자이크가 구현이 된다.
이 모자이크는 기획전용이 있으며 사용자가 자신이 원하는 이미지를 업로드해서 모자이크를 구현할수도 있으며 기획전의 모자이크 또한 블로그로 가져가는 것이 가능하게 구현이 되어있다.

작년 6개월정도를 진행한 프로젝트 이다.
초기 제안부터 해서 실구축에서의 기획의 및 클라이언트와 의견조율등 플래쉬에 관한 전반에 대한걸 수행을 했다. 정말이지 어찌보며 코드를 짜내면서 보내는 시간 보다 회의나 기타 업무 외적인 부분에 쏟아 부은 시간이 더 많다고 느껴질 정도이다.
우선은 11st의 특징인 즐거운 쇼핑과 , 빠른 쇼핑 이 거대한 두개의 카테고리중 즐거운 쇼핑을 구현하였고 이 즐거운 쇼핑쪽에 들어가는 5가지의 서비의 플래쉬 구축의 전반에 대해서 수행을 했다 그중 내가 실제 작업을 한부분은 2가지의 서비스 이다.
입체검색과 모자이크30을 내가 실제 제작을 하였고 나머지 i,m 코디 , 비교쇼핑, t-map 등은 초기 플래쉬 시안 제작과 기획에 참여를 하였다.
마지막으로 버츄얼 카테고리 보기또한 제작은 내가 하였다.

입체검색
http://www.11st.co.kr
즐거운 검색의 메인에서 검색을 하시면 색다른 검색을 할수 있습니다..^^





제작은 2.0 클래스 기반으로 제작을 하였다
초기 기획때 디자이너와 상의를 하면서 검색에 대한 모션을 제작을 하면서도 검색API와의 연동이 어떤식으로 될지에 대해서 검색API개발자와는 애기를 해볼 기회가 없었기에 초기 제작때는 막연함 감이 많아서 힘든 부분이 많았다.
검색자에서 파생되는 기능들인 제검색,결과내 재검색,속성검색,재솔트,거기에 백으로 이동해야 하는 기능
부가적으로 UI적인 측면에서는 휠을 이용해서 한계의 카테고리에 한에서 페이지의 갱신 없이 카테고리에 가지고있는 제품을 다 보여주기 위해서 기능적의로나 디자인적으로 양쪽다 잡아내기 위해서 너무나 코드가 방대해진면도 없지않아 있고 추가적으로 ui를 html베이스의 ui또한 플래쉬에서 구현하는것이 어려우면서도 재미있었지만 힘든작업이기도 했다.

http://www.pcaretire.co.kr

예정에 없던 프로젝트로 갑자기 들어가게된 프로젝트였다..
그런 연고로 제대로 ppt나 어떻게 돌아갈지에 대해서 생각도 하지 못하고 진행을 하게 되었다.
때문에 나중에 잡다구리한 기능을 넣고 또 그 기능때문에 생겨나는 버그를 잡느라
아주...정말...즐겁게(짜증나는)작업이 진행하게 되었다.
기본적으로 모션들이 이어져서 나가는 경향이 많아서 인과 아웃되는 애니메이션 프레임을 계산해서 해주는 방식을 택했다
하지만... 너무 느리다는 의견들이 많아서 인이 되는 애니메이션의 프레임을 체크해서 바로 로드를 할것인지
말것인지 체크해 플레이 해주도록 제작을 하였다.
여러모로 힘든 작업이었고 트윈을 생각없이 편하다고 생각하고 썼는데 이번에 알게 된 사실이 트윈을 걸어준
오브젝트 자체가 사라지면 루핑이 돈다는 사실을 알게되었다...;;;;
이게 꾀 심각해서 루프가 생겨서 무비클립들이 제대로 작동을 하지 안는 사태가 일어나서 머리가 아팟던..;;
머 이번에 알게 되었기 때문에 똑같은 실수를 박복만 하지 않으면 되겠지만...ㅎㅎ

http://girl.maplestory.nexon.com

회사를 옮기고 첫 작업인지라 나 나름대로으 실력도 보여줘야 했었고 또 팀원들과 처음으로 손발을 맞추는
프로젝트라 힘에 겨웠던 프로젝트다.
또한 커뮤니케이션이 얼마나 중요한 프로젝트인지 나에게 알게해준 프로젝트였다.. (밝힐순 없지만 여로모로 힘들었던...기억이..)
일단 메이플 걸이라는 비디오 자키들의 프로모션사이트 였다
프로모션 사이트이고 클라이언트의 요청은 색다른 UI형태를 보여달라는거 였다
여기서 부터 쉽지 않아지는데 일단 키보드키를 이용해서 다른 서브페이지로 이동이 가능해야 한다 또한
버튼을 클릭해서나 기존의 네비게이션 UI를 따라서도 작동을 해야 했다.

http://t43.i-station.co.kr

디자인의 초기 컨셉자체가 많은 기능을 가지고 있다는걸 표현하는게 중심이 되었다...
물론 제작된 홈페이지에는 그게 포함이 안되있다 단.... 그결과 엄청나게 많은 서브페이지에 페이지상에서 변환이 많아 졌을 뿐이다 UI적으로 많은 수의 아이콘들을 움직이게 하고 그 아이콘에서 페이지가 생성되는 쪽으로 가게 하고 싶었지만 아쉽게도 아직은 커뮤니케이션 스킬이 떨어지는건지 내 의견을 반영하는 것에는 무리 였나 보다..;;;; 다음부터는 좀더 노력해서 내 의견이 적용이 될수 있는 방향으로 가는걸 생각해 봐야 겠다.
일단 기술적으로는 해외 외국사이트의 트랜지션 효과를 따라했다..노골적으로...;;; 그래서 이 트랜지션 효과를 쓰기위해서는 다음 파일의 로딩이 완료되어야 하며 초기 보고있는 서브페이지의 플레이 상태를 체크 해서 현재보고있는 페이지의 솔팅이 완료되기 전에는 다음 페이지로 이동할수 없게 하는 나름대로 머리를 굴려서 제작이 되었다고나 할까...음... 머 특별한게 없는 마이크로 사이트였다...
뒷단에서는 나름대로 여러가지의 경우의 수를 산정해서 했지만 나의 노력은 별로 보이지 못했다고나 할까
이것도 아쉬움이 많았던 프로젝트...ㅎㅎ

http://khg790.dothome.co.kr/portfolio/x650

글로벌 사이트였기 때문에 cpu의 부하체크및에 신경을 많이 썻던 사이트이다.
각각의 서브페이지에서 3D로 모델링된 핸드폰들이 애니메이션 되는 부분이나 초기의 인트로등 최적화하기에 정말 좋지 못한 여건이었고 트랜지션에서 색다를 효과를 주기위해서 만은 부분 할애 했지만...
단 작업시간이 너무 짧았고 너무나 아쉬움이 많았던 사이트 이다.

지금 제가 참여하는 프로젝트에서 사운드에 동기화 해서 무비클립들이 작동을 하는 작업을 진행하게 되었습니다. 그런데 문제가  현재까지의 버전의 플래쉬에서는 자체적으로 mp3 파일에서 정보를 받아서 사운드에 동기화 시키는건 불가능 하더군요 그래서 SwiftMP3 프로그램을 이용해서 테스트를 해보았습니다.
SwiftMP3를 이용해서 스펙트럼 만들기는 의외로 검색을 해보니 자료가 만더군요 그중에서 라이센스 없이 도스에서 swf를 만들어 주는것을 가장 잘 설명해주신 분의 블로그는  http://blog.naver.com/natureprince/50007461796   이분의 블로그를 가보시면 자세히 설명이 나왔있습니다. 그런데 문제가 SwiftMP3를 이용해서 swt를 만들어서 불러 들어오게 되면 플래쉬 자체가 굉장히 느려지더군요 fps문제도 아닌거 같고 이유를 알수없이 느려 지더군요......^^;;;
그래서 내린결론은 결코 이녀석은 사용할수가 없다... 였습니다....^^;;;;
철야를 하다가 우울모드로 바뀌는 순간이었습니다. 예저에는 이 비트 정보의 처리를 사운드 파일을 무비 클립에 심은 다음에 비트의 정보를 일정한 프레임마다 표기를 해서 watch메소드를 이용해서 값을 받아 들였습니다. 다시 이걸 찍어서 작업하자니 너무나 오랜 시간이 걸릴것 같아서....마지막으로 생각해 낸것이 플래쉬9.0의 사운드의 새로운 기능을 이용하는 것이었습니다 제가 포스팅 했던 자료이긴 하지만 아무튼 9.0의 새로운 메소드를 이용 비트의 정보를 쭈욱 트레이스 시켜서 이걸 배열에 넣어서 실행을 하는 방법으로 진행을 하였습니다

more..

예전에 비트를 찍는 대신 셋 인터벌을 이용해서 일정한 주기 마다 실행 되는 함수에 배열의 길이와 사운드의 길이를 비례신으로 정리해서 플레이된느 비트 정보를 동기화 시켜서 작업을 하였습니다.


사운드의 길이를 비례신으로 정리해서 플레이된느 비트 정보를 동기화 시켜서 작업을 하였습니다.

http://khg790.dothome.co.kr/portfolio/lanege

정말 힘겹게 힘겹게 오픈시키고 안정화 시킨 사이트....
플래쉬 쪽의 전반적인 제어나 게시판 온라인 폴 기타 무비의 제어및 동영상 제어를 당담했다.(써놓고 보니 꽤나 되는군...-_-;;;;;)
게시판에서의 생각지 못한 에러나 다수의 FLV를 컨트롤 해야 하며 용량이 큰 FLV를 사용자가 최대한 쾌적한 환경에서 이벤트에 참여할수 있게 하기 위해서 생각 한것이 각 신별로 swf 와 그 씬에 들어가게 될 FLV들을 미리 다운 로드 받아 놓는 방식을 사용하기로 했다.
예상대로 진행 되는 무비들을 사용자가 전부 다 봐주신다면 네트워크가 원활한 곳에서는 무리 없이 진행이 가능했다 하지만..... 네트워크가 원할하지 못하거나 스킵으로 넘기는 경우에는 정말 생각지 못한 버그들이 수업이 나오기 시작했다 물론 게시판에서의 버그도 함께....;;;;
그 와중에서도 FLV를 컨트롤 하면서 갑자기 멈추는 현상이 발생한 것이다.
보통은 FLV를 외부에서 가져오지 않고 직접 프레임에 삽입 해서 사용했거나 단 한개나 두개정도의 FLV를 사용했기에 전혀 격어보지 못한 일이 발생을 한것이다...
급박하게 돌아가는 프로모션 사이트와 일정때문에 우여곡절 끝에 버그를 잡아 내고 오픈을 시켰다.
이 FLV가 멈추는 것은 stopAllSounds 의 사운드 메소드를 사용하면은 flv들이 죄다 멈처버린다는 것이다.
또한 계산하지 못했던 부분중에 하나인 사용자의 컴퓨터에 따라 swf프레임 플레이 되는것과 FLV의 속도가 달랐다는 것이다....^^;;;;
이걸 미치 깨닫지 못하다가 타이밍이 달라지는 문제를 잡기 위해서 죄다 큐포인트를 찍어서 무비클립을 이용해서 컨트롤을 하였다.
아무튼 프로젝트를 진행 하면서도 하나씩 하나씩 터져주는 문제들 때문에 힘이 들었지만 정말이지 한참은 기억에 남게될 프로젝트 일것이다.

온라인 풀의 형식으로 메뉴 자체를 동영상을 사용했다.

정말 단시간에 뚝딱 만들어진 게시판(프르젝트 일정의로 보면 많은 시간을 투자한샘..)
이 게시판에 인풋 텍스트를 마스크로 쒸워 놨더니 서버를 타는지....인풋 텍스트가 사라져 버렸다.....
이부분의 버그를 잡는데에도 많은 시간을 투자 했어야 했다....;;;
텍스트의 애니메이션은 랜덤값과 프레임을 이용해서 애니메이션이 된다.

사용자 시물레이션 정말이지 몇번이고 작업을 해왔었는데 이걸 작업할때는 이상하게 생각이 나질않아 다른 방식으로 제어를 하다가 차장님의 아이디어로 바꾼 부분이다....처음 부터 움직이는 영역을 프레임으로 제어를 할것을....가끔 바보같은 짓을 한다...><
프로젝트를 진행할 당시에는 잘 몰랐지만...이렇게 정리를 하고 나니 무지 많은걸 했다는 생각이 든다....^^;;;
게시판,온라인 풀,FLV컨트롤,플래쉬 무비의 전반적인 제어,사용자 시물레이션 등등....
많은 사람들이 함께 고생했고 나또한 무지 고생했던 프로젝트...
이제는 이벤트 기간동안 잘 마무리 됐으면 좋겠다.

제일은행 웹진의 메인 페이지의 플래쉬의 리뉴얼을 진행하였습니다.
기존에는 여러개의 작은 픽셀들이 움직이거나 이동을 하면서 한가지의 형상을 보여주었고 이번에 이루어진 리뉴얼에서는 플래쉬에서 표현해주는 방식만 바뀌는 식으로 진행을 하였습니다.

http://we.scfirstbank.com여기에서 보실수 있습니다.
============================================================================================================
플래쉬의 표현방식이 이동이 아닌 카드게임에서 카드를 뒤집는 형식을 사용하게 되었습니다.
또한 차후에 있을 업데이트또한 고려를 해서 작업이 진해을 하여야 했습니다.
차후에 업데이트를 위해서 이미지는 외부에서 불러들여서 모션을 이용한 표현 방식을 사용 하였고 이미지의가 생성되는 모습은 배열을 이용해서 작업을 진행하였습니다.
방식은 함수에서 호출을 해서 다음 단계로 넘어가는 순차진행이 되게 작업이 되어있습니다.
//
사용한 몇가지 함수를 보시자면~
일단......랜덤하게 진행을 하기위해서 81개의 이미지를 랜덤 실행하기 위해 81개의 숫자를 랜덤하게 만든 숫자의 조합으로 순서를 만들어 냅니다.
*랜덤함수*
***********************************************************************************************************
function randomArray(dummyArray:Array) {
var list:Array = new Array();
var checkNum:Number = dummyArray.length;
for (var i = 1; i<=checkNum; i++) {
var kr:Number = random(dummyArray.length);
var kro = dummyArray[kr];
dummyArray.splice(kr, 1);
list.push(kro);
}
return list;
}
var Arr80:Array = new Array();
for (var i = 1; i<82; i++) {
Arr80.push(i);
}
***********************************************************************************************************
81개의 각각의 이미지를 스테이지에 위치에 맞게 뿌려주고 기타 등등의 셋팅을 이루는 함수
*컨텐츠 셋팅*
***********************************************************************************************************
function seting(px, py, dsell) {
trace("#seting("+"px= "+px+" py= "+py+" dsell= "+dsell+")");
var mc = _rtl.createEmptyMovieClip("_movie", 10);
var doc = mc.createEmptyMovieClip("dot", mc.getNextHighestDepth());
var mc2 = _rtl.createEmptyMovieClip("bigMc", 9);
mc2.attachMovie("movie", "movie_mc", this.getNextHighestDepth());
bigMc._alpha = 0;
mc2._x = doc._x=px;
mc2._y = doc._y=py;
var tn = 0;
for (var j = 0; j<9; j++) {
var my = j*dsell;
xSeting(my);
}
function xSeting(my) {
for (var j = 0; j<9; j++) {
  tn++;
  var mdoc = doc.attachMovie("dotmc", "dotmc"+tn, doc.getNextHighestDepth());
  mdoc.name = tn;
  mdoc.chVisible = _rtl.chVisible[tn-1];
  mdoc2._y = mdoc._y=my;
  mdoc2._x = mdoc._x=dsell*j;
}
}
}
***********************************************************************************************************
*이미지를 로드하기 위한 함수*
***********************************************************************************************************
function loadFunc(mc, n) {
var loading:MovieClip = mc.createEmptyMovieClip("loading", 0);
var img:MovieClip = mc.createEmptyMovieClip("img", mc.getNextHighestDepth());
if (n == 1) {
if (mc._parent._parent.chVisible == 0) {
  img._alpha = 20;
}
img.loadMovie("./img/img_"+mc._parent._parent.name+".jpg");
} else {
img.loadMovie("./img/img_t"+mc._parent._parent.name+".jpg");
}
loading.onEnterFrame = function() {
if (img._width>0) {
  delete this.onEnterFrame;
  this.removeMovieClip();
  if (mc._parent._parent.name == 81) {
   if (n == 1) {
    _rtl.startFunc();
   }
  }
}
};
}
***********************************************************************************************************
이 3개의 함수가 골격을 이루는 함수가 됍니다 이 3가지에 의해서 이미지가 뿌려지게 되고 기타 진행은 이미지의 진행은 부수적인 함수를 이용하여 제작이 되었습니다.