얼마 전에 이시봉 족발 홈페이지를 런칭했습니다.ㅎ


거의 플래시를 많이 사용했습니다.

홈페이지 디자인하는 부분에서 상당히 많은 어려움이 있었는데요, 이시봉 족발 사장님의 몇번에 걸친 피드백 이후에 현재의 홈페이지 디자인이 완성 되었습니다.



작업을 진행하다가 매장에 들른 적이 있었는데요, 그 때 인심 좋은 사장님께서 족발을 싸주시더라구요.

배달 전문이 무슨 의미인가 했는데, 정말 깔끔하게 잘 포장되어 있어서 깜짝 놀란 기억이 나네요.ㅎㅎ


메뉴도 다양해서 골라먹는 맛도 있겠더라구요.ㅎ 

저희 집이 근처라면 많이 배달시켜 먹을텐데,, 하는 아쉬움이 있을 정도.ㅎ 



홈페이지를 보고 주문을 하는 고객을 위해,  특별 할인이 되는 쿠폰도 만들어뒀습니다.ㅎ



부산 북구 / 부산 진구 / 김해 전지역에 배달이 된다고 하니까, 근처에 사시는 분들은 한번 드셔보세요.ㅎ

개인적으로는 정말 맛있었습니다.ㅎ


홈페이지 링크를 걸어둡니다. ^^

구경해 보세요.ㅎ

http://cbong.co.kr

신고
Posted by Code-Moon

댓글을 달아 주세요

  1. 부산서면사는사람 2010.04.09 16:05 신고 Address Modify/Delete Reply

    오늘 이시봉 족발 시켜 먹었는데..
    완전 만족^^ 맛있던데..ㅋ
    근데...
    어느 족발집과 마찬가지로 쌈을 쬐금만 준다는거... ㅠㅠ

    • BlogIcon Code-Moon 2010.04.09 19:18 신고 Address Modify/Delete

      ㅎㅎ그래요??제가 쌈을 잘 안싸먹어서 그런건 생각 못했네요 ㅎㅎ 쿠폰 출력해서 할인받으셨어요??ㅎ

  2. 구포사는 사람 2010.04.20 22:12 신고 Address Modify/Delete Reply

    ^^ 이시봉족발 깔끔하고 맛나서 좋더라구요.
    쿠폰 사용했어요.

  3. BlogIcon Code-Moon 2010.04.21 11:05 신고 Address Modify/Delete Reply

    ㅎ제 블로그 글을 보고 쿠폰 사용하신건가요?^^
    맛있었다니 다행이네요^^
    아~ 저도 먹고 싶어지네요.ㅎ

플래시에 동영상을 넣는 방법을 배워보자.
(이 작업은 CS4에서 이루어졌으므로 그 아래 버전에서는 약간 다를 수도 있다.)

먼저 새로운 플래시(fla)를 연다.
그리고 나서 파일-가져오기-비디오 가져오기...를 누른다. 음.. 본인은 현재 플래시를 한글 버전으로 사용하고 있는데 아마 영어 버전으로는 file-import-import video...?일 것 같다.(추측일 뿐...)




이제 비디오 파일을 선택해야 하는데 플래시에서 지원되는 파일 형식은 flv와 f4v이다.

흔히들 동영상 파일하면 avi, wmv, mpeg등을 떠올리기 쉽고, 실제로도 많이 쓰이는 포멧들이다. 그런데 플래시에서는 이러한 파일들을 import할 수가 없다.
그래서 제공해주는 것이 바로 Adobe Media Encoder이다.


비디오 가져오기 창에서 Adobe Media Encoder시작 버튼을 누르자.
그러면 약간의 시간이 지나고 나서 미디어 인코더가 시작된다.(원래 구동시간이 좀 느리니, 여유를 가지고 기다리자)




미디어 인코더에서 추가 버튼을 눌러서 인코딩할 동영상 파일을 선택하자.




동영상 파일을 추가했으면 편집 - 내보내기 설정을 눌러서 인코딩하고 난 결과물을 설정하도록 하자.




여기서 오른쪽의 설정을 이용해 내용을 저장할 수 있다. 눌러보면 이것저것 많은 설정이 있으니 직접해보고 필요한 설정을 건드리면 되는 것이고, 여기에서는 동영상의 원하는 구간을 자르는 부분만 알아보도록 하자.

내보내기 설정 창에서 아래쪽에 노란 막대기가 보일 것이다.
그 막대기의 위에 있는 표시는 편집중인 화면에서 보여줄 부분을 선택하는 것이고, 노란 막대기의 아래쪽에 있는 두개의 표시가 결과 동영상의 구간이다.


노란 막대기 아래쪽의 표시를 이동시켜서 원하는 만큼의 동영상 구간을 선택하자.





그리고 확인을 누르면 다시 미디어 인코더 창으로 넘어갈 것이다. 여기에서 대기열 시작 버튼을 누르면 인코딩이 시작된다.





인코딩이 완료되면 아래와 같이 상태부분에 녹색 체크 표시가 뜬다.


그러면 이제 Adobe Media Encoder가 할 일은 모두 끝난 것이다. 그리고 혹시 출력파일의 위치를 잘 모르겠으면 미디어 인코더에서 출력 파일 부분에 마우스를 가져가면 경로가 뜰 것이다.


출력 파일 경로를 잘 알고 있다면 이제 다시 플래시로 돌아가자.
비디오 가져오기 창에서 찾아보기 버튼을 눌러서 방금 인코딩한 flv파일의 경로를 찾아가 파일을 선택한다.



flv또는 f4v 파일을 제대로 선택했다면 아무런 에러도 안뜰 것이다. 그러면 다음 버튼을 누르자.
그러면 이제 동영상의 스킨을 선택하는 화면이 나올 것이다.

여기에서 여러가지 스킨 중 하나를 고를 수도 있고 색상도 선택할 수 있다. 물론 스킨을 사용안할 수도 있다.
스킨을 선택했다면 다음 버튼을 눌러 계속 진행하자.




비디오 가져오기가 완료되었으므로 완료 버튼을 눌러 작업을 완료하자.







이렇게 플래시에서 다양한 포멧의 동영상을 삽입할 수 있다.
다음에는 as3.0을 이용해서 동영상을 제어하는 방법을 알아보자.
신고
Posted by Code-Moon

댓글을 달아 주세요

플래시 파일의 용량이 클 경우에 웹에서 플래시를 조금씩 받아오게 된다. 그런데 다운로드 속도가 플레이 속도보다 느리다면 플래시 화면이 끊기거나 음성과 위치가 맞지 않는 등 많은 문제를 유발할 수 있다.
그래서 사용하는 것이 프리로더(preloader)이다.(플래시를 플레이하기 전에 미리 로딩을 다 해놓는 것이다.)

이번에 홈페이지를 하나 만들게 됐는데, 만들다보니 swf파일의 크기가 어느정도 크다고 판단되었기에 프리로더가 필요하게 되었다.

그런데 나는 as1.0 , as2.0으로는 예전에 프리로더를 만들어봤지만, as3.0으로 작업을 한 것은 이번이 처음이었다.
그래서 간단한 기능 하나를 하는데에도 약간씩 이해 못할 문제들이 발생하곤 했는데 그 중 하나가 프리로더였다.

먼저 플래시에서 장면(Scene)을 하나만 이용한다고하면 프리로더는 1프레임에 위치하게 된다. 프리로딩하는 시간동안 사용자가 지루해 할 것 같다면 가벼운 에니메이션을 1프레임에 무비클립을 이용해서 위치할 수도 있고, 얼마나 로딩했는지 퍼센트 또는 progress bar로 현재 로딩 상황을 보여줄 수도 있다.
이러한 부분은 약간 부가적이라고도 생각할 수 있는 부분이지만, 사용자가 로딩하는 시간이 지겨워서 웹 브라우저를 끄지 않도록 충분히 관심을 끌어야 한다.

그리고 또 중요한 것이 actionScript이다.
먼저 소스 코드를 살펴보도록 하자.

stop();

/******************************************************************
** 이벤트 핸들러 등록
******************************************************************/

loaderInfo.addEventListener(ProgressEvent.PROGRESS, preloadingHandler);
loaderInfo.addEventListener(Event.COMPLETE, preloadingCompleteHandler);




/******************************************************************
** 함수 정의 
******************************************************************/

function preloadingHandler(e : ProgressEvent) : void {
	var percent : int = int(e.bytesLoaded / e.bytesTotal * 100);
	loadedPercent.text = percent.toString() + "%";
	
	if(e.bytesLoaded == e.bytesTotal) 
		loaderInfo.removeEventListener(ProgressEvent.PROGRESS, preloadingHandler);
}


function preloadingCompleteHandler(e: Event) {
	loaderInfo.removeEventListener(Event.COMPLETE, preloadingCompleteHandler);
	gotoAndStop(2);
}


먼저 stop()을 이용해서 플래시 무비가 1프레임에서 멈추도록한다.(stop()을 하지 않으면 다음 프레임으로 넘어가서 프리로더가 제대로 동작하지 않을 것이다.)
그리고 loaderInfo라는 객체에 두개의 이벤트 리스너를 추가한다.

ProgressEvent.PROGRESS는 바이트를 로드할 때마다 호출되는 이벤트이다.
그래서 preloadingHandler()를 보면 로딩된 바이트를 퍼센트로 계산하여 loadedPercent라는 동적 텍스트에 값을 넣어준다. 그리고 종료 조건으로 로드된 바이트(e.bytesLoaded)와 전체 바이트(e.bytesTotal)가 같으면 현재 이벤트 리스너를 삭제한다.

Event.COMPLETE는 전체 바이트를 모두 로딩하면 호출된다.
그래서 여기에서는 자신의 이벤트 리스너를 삭제하고 2프레임으로 가서 play하도록 한다.

이렇게 하면 기본적인 프리로더가 만들어지는 것이다.
만약 더 화려한 프리로더를 만들고 싶다면 ProgressEvent.PROGRESS가 호출될때 등록한 이벤트 핸들러 함수에서 적절한 동작을 하도록 해주면 된다.
신고
Posted by Code-Moon

댓글을 달아 주세요

  1. BlogIcon 깜씨ㅋ 2012.01.14 22:30 신고 Address Modify/Delete Reply

    찾고 있었는데 정말 감사합니다! ^^
    죄송한 말씀이지만, 밑에 오타가 있네요 ;;
    pr"o"loadingHandler라고 되어있습니다 ㅎ

플래시 플레이어 디버거는 플렉스에서 작업을 하는 동안 디버깅을 할 필요가 있는데 이 때 꼭 필요한 디버깅 툴이다.  그래서 오늘은 플래시 플레이어 디버거를 설치하는 방법에 대해 알아보자.

먼저 자신의 컴퓨터에 flash player debugger가 설치되어 있는지 확인해야 한다.
이를 위해서는 플래시 또는 플렉스가 동작하고 있는 브라우저에서 오른 클릭을 해보자.


아마 대부분의 사람들이 아래와 같은 화면을 볼 수 있을 것이다.
사용자 삽입 이미지

하지만 디버깅이 가능하기 위해서는 다음과 같은 화면이 나와야 한다.
사용자 삽입 이미지


두 화면의 차이를 알겠는가?
바로 "디버거"의 유무이다.

대부분의 사용자는 플래시 플레이어는 설치되어 있지만 플래시 플레이어 디버거는 설치되어 있지 않다. 그래서 이를 설치해줘야 한다.

플래시 플레이어 및 디버거를 다운로드하기 위해서는 아래 사이트로 가자.
http://www.adobe.com/support/flashplayer/downloads.html

여기에서 최신 버전의 debugger를 다운 받는다.
이 때 주의할 점은 다운로드 페이지의 상단에 바로 보이는 Get the latest version(아래 이미지)으로 받으면 안된다는 것이다. 이 버전은 플래시 플레이어일 뿐, 디버깅은 안된다.
사용자 삽입 이미지

다운로드 페이지에서 아래로 조금만 내려보면 아래 이미지와 같이 Debugger Versions을 볼 수 있다.
사용자 삽입 이미지

여기에서 자신이 사용하는 디버깅용 브라우저에 맞는 것을 다운로드 하도록 하자.
참고로 본인은 디버깅할 때 IE를 사용하기 때문에 Downlaod the Windows Flash Player 10 ActiveX control content debugger (for IE)를 다운받아서 설치했다.

디버거를 다운로드했다면 이제 언인스톨러(uninstaller)를 다운받아야 한다.
언인스톨러를 이용해서 기존의 플래시 플레이어를 삭제하지 않으면 제대로 설치되지 않을 수도 있기 때문에 꼭 필요하다.
언인스톨러는 다운로드 페이지의 상단에 보면 Uninstallers가 링크되어 있다.
사용자 삽입 이미지

여기에서 Uninstallers링크를 따라가 보면 아래와 같은 화면으로 내려가게 된다.
사용자 삽입 이미지
여기에서 Tech Note링크를 따라가면 언인스톨러를 다운받을 수 있을 것이다.

이렇게 플래시 플레이어 디버거언인스톨러를 다운 받았다면 이제 준비는 끝난 것이다.
그러면 현재 작업하고 있는 웹 브라우저를 모두 닫고, 언인스톨 -> 플래시 플레이어 디버거 설치 순으로 진행하면 된다.
신고
Posted by Code-Moon

댓글을 달아 주세요

  1. BlogIcon 웹눈 2010.05.05 09:21 신고 Address Modify/Delete Reply

    감사합니다. ^^

티스토리 툴바