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


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

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



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

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


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

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



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



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

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


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

구경해 보세요.ㅎ

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

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


어도비가 써드-파티 개발자에게 photoshop.com mobile for android 1.1을 사용하여 개발자의 애플리케이션에 포토샵 모바일의 기능을 넣을 수 있도록 한다고 밝혔다. photoshop.com mobile을 릴리즈한지 4달만에 나온 뉴스이다 . 물론 예전보다 더 업그레이드 되었다.



어도비의 Digital Imaging Rich Media Solutions의 부사장이자 general manager인 Doug Mack가 다음과 같이 말했다.
아이폰과는 다르게 안드로이드 플랫폼에서는 photoshop.com 에디터를 개발자가 넓게 활용할 수 있도록 해주었다.


photoshop.com mobile for android 1.1의 업데이트 버전에서는 Vibrant(boost photo colors), Pop(팝 아트 스타일) 같은 효과들이 추가된다. Soft Black and White, Warm Vintage 툴은 클래식적이고 고풍의 느낌을 내기 위해 사용될 수 있다. 다른 새로운 효과에는 Vignette Blur, White Glow, Rainbow 등이 포함된다.

photoshop.com mobile for android 1.1은 안드로이드 마켓에서 모든 나라에 무료로 제공된다.(물론 영어버전만 있다)
안드로이드 마켓에서 "photoshop.com"을 검색해보자.



원문 사이트 : http://www.mobilecrunch.com/2010/03/05/photoshop-editor-android/
안드로이드 앱에 포토샵 모바일을 통합하는 방법 : http://mobile.photoshop.com/android/developers.html
Posted by Code-Moon

댓글을 달아 주세요

플래시에 동영상을 넣는 방법을 배워보자.
(이 작업은 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라고 되어있습니다 ㅎ

예전에 한 친구와 프로젝트를 같이 진행한 적이 있었다. 그때 svn을 사용해서 개발하려고 subclipse를 설치해서 사용했다.
그리고 열심히 프로젝트를 진행하려고 하는데 크나큰 문제점이 닥쳤다.

revision1 인 파일을 나와 내 친구가 update를 통해 받은 상태에서 각자의 작업을 진행하고 있었고, 내 친구가 먼저 수정을 끝내고 commit을 했다. 나도 얼마있지 않아서 작업을 끝내고 commit을 하려고하는데 error가 발생했다.
이유는 revision 때문이었다.

친구가 commit을 한 순간 그 파일은 revision2가 HEAD로 된다. 그런데 나는 revision1을 가지고 수정을 한 상태이니, 당연히 commit을 못하도록 막는 것이다.

그런데 오늘에서야 그 해결책을 찾아냈다.


방법은 간단하다.

먼저 앞에서 말한 상황과 같은 상황을 만들어보자.
아래의 Test.java파일은 revision182이다.




여기에서 수정을 약간 가해보자.


그리고 수정된 파일을 commit하면 이제 revision183이 된다. 이 상태가 내 친구가 commit을 한 상태이다.



그런데 나는 아직 update가 되지 않은 상태이므로 그 이전 상태로 돌아가야 한다.

Test.java에서 오른 클릭하여 Team - Switch to another Branch/Tag/Revision을 눌러서 revision182로 돌아가도록 하자.




다시 revision182로 돌아가서 여기에서 친구가 수정한 부분과 다르게 수정을 해보자.



이렇게 수정을 한 뒤에 team - commit을 해보면 에러가 발생한다는 것을 알 수 있다.



이제 본격적으로 우리가 알아봐야 할 부분이다.
Test.java에서 오른클릭하여 team - update to HEAD를 눌러보자. 그러면 다음과 같은 화면을 볼 수 있을 것이다.
(이때 Test.java의 아이콘에 별표가 아닌 사각형이 생김에 유의하자.)



subclipse에서 친절하게도 HEAD버전와 충돌이 일어나는 부분을 다 표시해 주었다.
뿐만 아니라, revision이 183으로 올라갔다!!!

<<<<<<< .mine에서부터 ========== 까지가 내가 수정한 부분이고,
=========에서부터 >>>>>> .r183까지가 revision183버전의 상태이다.
(즉, ========를 경계로 어떻게 바꿀지 확인을 하면되는 것이다.)


여기에서는 a의 값은 내가 수정한대로 바꾸고, 주석 부분은 친구가 수정한 부분으로 두고 싶다.
그러면 직접 손으로 그 부분을 수정하면 된다.



이렇게 한 뒤에 Test.java에서 오른 클릭 - Team - Mark Resolved를 누르면 아래와 같은 화면이 뜬다.
여기에서 첫번째를 선택하자.(파일의 충돌을 해결했다는 뜻)


그리고 나서  Package Ex탭을 보면 Test.java의 아이콘에 별표가 뜰 것이다.



이렇게 한 뒤에 Test.java에서 오른 클릭 - Team - Commit을 해보자.
아무런 에러없이 잘 올라갔고 버전도 revision184로 올라간 것을 볼 수 있을 것이다.!!

Posted by Code-Moon

댓글을 달아 주세요

안드로이드 application을 만들기 위한 개발 환경을 구축해보자.

  1. 먼저 최신 버전의 Eclipse를 다운로드 한다.
    다운로드 링크 : http://www.eclipse.org/downloads/

    Eclipse홈페이지에서 Downloads 페이지를 보면 여러 개의 Eclipse Packages를 볼 수 있다.
    이 중에서 자바 개발자용 통합 팩인 Eclipse IDE for Java Developers를 다운받으면 된다.

    위 그림에서 오른쪽 빨간 사각형 부분을 보면 OS 선택하는 부분이 있는데 만약 자신의 운영체제가 Windows라면 Windows를 클릭하면 된다.

     

  2. 다음으로 할 일은 안드로이드 SDK를 다운받는 것이다.
    다운로드 링크 : http://developer.android.com/sdk/index.html

    여기에서도 마찬가지로 자신의 OS에 맞는 버전을 다운로드하면 된다.

     

  3. SDK의 다운로드가 끝났으면 Eclipse를 적절한 폴더에 압축을 풀고, 마찬가지로 SDK도 적절한 폴더에 압축을 푼다. (왠만하면 Eclipse 폴더 안에 Android SDK를 넣어두자)

     

  4. (내컴퓨터-오른클릭-속성-고급 탭-환경변수-시스템 변수) 에서 Path라는 변수를 찾은 다음에 그 안의 값에 내용을 추가해야 한다.
    이때 Path에는 여러 개의 값들이 존재하는데 이 값들을 구분지어 주는 것이 ;(세미콜론)이다. 따라서 Path 변수 값의 맨 마지막 부분에 ;이 없다면 ;을 적고 나서 아래의 내용을 추가해 주자.
    SDK가 있는 폴더\android-sdk-windows\tools
    (위의 경로는 버전에 따라 약간 다를 수도 있다. 중요한 것은 SDK가 있는 폴더의 tools폴더를 경로로 입력한다는 것이다.)

     

  5. 이클립스를 실행하여 (Help-Install New Software…)에 들어가서 Work With란에 https://dl-ssl.google.com/android/eclipse/ 를 입력한다.(안될 경우에는 https에서 s를 빼고 http://dl-ssl.google.com/android/eclipse/ 를 입력한다.)
    사이트가 추가되면 체크 박스를 체크하고 Next 버튼을 눌려서 install을 진행한다.

     

  6. 업데이트가 끝나면 이클립스를 재시작한다.

     

  7. (Window-Preferences)에 들어가서 왼쪽 패널의 Android를 선택하고 Browse버튼을 눌러서 안드로이드SDK가 설치된 폴더 경로를 입력한다. 제대로 입력되어도 별다른 변화가 없을 것이다.


  8. 위와 같은 화면이 나왔다면 제대로 입력을 한 것이고, 아래와 같은 화면이 나왔다면 경로를 다시 수정해야한다.(위쪽의 빨간 x표시가 안나오도록...)


    그리고 나서 OK를 눌러서 이클립스 메인 화면으로 돌아가면 툴바에 검은색의 핸드폰 모양 버튼이 있다. 그 버튼을 클릭하자.

    그러면 아래와 같은 화면을 볼 수 있다. 여기에서 Available Packages 로 간 다음에 체크 박스에 체크를 하고 Install Selected 버튼을 눌러 설치를 하면된다.




    이렇게 함으로써 안드로이드 개발 환경이 모두 구축된다. 이제 신나게 개발하는 일만 남았다!!!

Posted by Code-Moon

댓글을 달아 주세요

  1. daisy 2010.03.17 15:20 Address Modify/Delete Reply

    안드로이드 개발 공모전도 도전해보세요
    상금도 2천만원이나 된다니깐......참여상도 있구요
    글구 국내 이동통신회사 후원받는걸 보니 아마 나중에 취업할때도 특전이 주어질지도..
    www.twittpop.com에서 접수하면 된다네요...

  2. BlogIcon Code-Moon 2010.03.23 11:10 신고 Address Modify/Delete Reply

    네^^ 정보 감사합니다.
    얼마 전에 들은 정보인데 다른 분들도 보실 수 있게 올려둬야겠네요

HTTPService를 이용하면 XML, JSON등의 형식으로 데이터를 송신 및 수신할 수 있다.
그런데 이번에 다음 책 검색API를 이용하여 웹 사이트를 만들려고 했었는데, 이 때 큰 문제가 있었다.

보통 액션스크립트를 이용해서 받아온 xml데이터를 조작해 줄 필요가 있을 것이다.
그러면 for문이나 for each문을 이용해서 하나하나의 값을 조작해줘야 하는데, xml에 들어있는 값이 여러개일 때에는 문제가 되지 않는데 1개의 값만 갖고 있을 때 문제가 발생한다.

받아온 xml의 형식은 아래 그림과 같다고 하고 예를 살펴보자.

root는 channel이고 그 밑에 Item의 총 개수를 나타내는 totalCount가 있고, Item이 0개 이상 존재하게 된다. 각 아이템마다 title과 imageSrc를 가지게 된다.

이런 형식의 데이터를 받아온다고 했을 때, 보통은 다음과 같은 방식으로 HTTPService의 resultHandler를 코딩하게 될 것이다.
private function resultHandler(event : ResultEvent) : void {
	if(event.result.channel.totalCount == 0) {
		Alert.show("표시할 아이템이 없습니다.");
		return;
	}

	for each(var item : Object in event.result.channel.item) {
		//item.title 처리
		//item.imageSrc 처리
	}
}

이런식으로 코딩을 하게 되면 평소에는 잘 동작하는 듯 보인다. 그런데 그 결과를 잘 살펴보면 잘 못 동작하고 있다는 것을 알 수 있다.
바로 Item이 1개일 경우이다. Item이 1개일 경우에는 for each문을 수행하지 않는다. 그래서 아무런 결과 값도 처리할 수 없게 된다. 이러한 문제는 만들려는 프로그램의 종류에 따라서는 심각한 문제가 될 수 있다.

그래서 열심히 구글링한 결과 다음과 같이 코딩하면 된다는 것을 알았다.
private function resultHandler(event : ResultEvent) : void {
	if(event.result.channel.totalCount == 0) {
		Alert.show("표시할 아이템이 없습니다.");
		return;
	}
	
	var results : ArrayCollection;
	
	if(event.result.channel.item == null) {
		Alert.show("데이터가 없습니다.");
		return;
	} else if(event.result.channel.item is ObjectProxy) {
		results = new ArrayCollection([event.result.channel.item]);
	} else {
		results = event.result.channel.item as ArrayCollection;
	}
	
	for each(var item : Object in result) {
		//item.title 처리
		//item.imageSrc 처리
	}
}

Posted by Code-Moon

댓글을 달아 주세요

  1. BlogIcon pooha302 2010.03.11 17:02 Address Modify/Delete Reply

    XML의 데이터 구조에 따라 for each로 사용 가능한지 판단해서 적절히 사용할 수 있도록 해야지.
    나는 짜증나면 for문으로 전부 일일이 파싱해서 처리하는데 ㅋㅋ
    근데 뭐하는데 액션스크립트를 사용하노??

    • BlogIcon Code-Moon 2010.03.16 11:09 신고 Address Modify/Delete

      원래 for each는 1개일때 안되요??

    • BlogIcon Code-Moon 2010.03.16 11:10 신고 Address Modify/Delete

      아, 그리고 중학교 때 플래시를 썼었는데,ㅎ 그동안 버려두고 있었거든요,ㅎ 그래서 제가 알고있는 as가 2.0 수준이었는데,ㅎ
      이번에 플렉스도 해볼겸 해서 as3.0으로 매쉬업 해볼려고했죠.ㅎ

플렉스에서 애니메이션을 만드는 방법은 2가지가 있다.

1. 먼저 첫번째는 enterFrame이벤트를 이용하는 것이다.
이는 원래 플래시에서 사용하던 방식인데, 프레임 개념을 사용해서 애니메이션을 만드는 것이다.

enterFrame이벤트를 사용하기 위해서는 이벤트 리스너를 등록시켜줘야 한다.

addEventListener(Event.ENTER_FRAME, onEnterFrame);

이렇게 해주면 enterFrame에 대한 이벤트 리스너가 등록된 것이다.
두번째 인자인 onEnterFrame은 매 프레임마다 호출되는 함수이다.
그러면 이제 우리가 해야할 일은 onEnterFrame함수를 작성하는 것이다.

private function onEnterFrame(event : Event) : void  {
  //매 프레임마다 해야할 작업을 작성한다.
}

그러면 이제 마우스를 따라 부드럽게 움직이는 이미지를 만들어보자.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" mouseMove="onMouseMove(event)" width = "400" height = "400" verticalScrollPolicy="off" horizontalScrollPolicy="off">
    <mx:Image width="100" height="100" source="{img}" id="image" x="150" y="122"/>
    <mx:Script>
        <![CDATA[
            private var targetX : Number;
            private var targetY : Number;
            private const speed : Number = 0.1;
           
            [Embed(source="../images/wisu_300.png")]
            [Bindable]
            private var img : Class;
           
            private function init() : void {
                addEventListener(Event.ENTER_FRAME, onEnterFrame);
                targetX = 0; targetY = 0;
            }
           
            private function onEnterFrame(event : Event) : void {
                var dx : Number = targetX - image.x;
                var dy : Number = targetY - image.y;
                image.x += dx * speed;
                image.y += dy * speed;
            }
           
            private function onMouseMove(event : MouseEvent) : void {
                targetX = event.stageX;
                targetY = event.stageY;   
            }
        ]]>
    </mx:Script>
</mx:Application>



2. 플렉스에서 애니메이션을 만드는 두번째 방법은 timer를 이용하는 것이다.
타이머는 원하는 시간마다 특정함수가 호출되도록 하는 이벤트이다.
타이머를 사용하기 위해서는 일단 타이머 객체를 생성해야 한다.

private var timer : Timer = new Timer(30);

이렇게 해주면 30밀리초마다 호출되는 타이머 객체가 만들어지는 것이다.
그리고 나서 이벤트 리스너를 등록해야한다.

timer.addEventListener(TimerEvent.TIMER, onTimer);

이렇게 하면 타이머 리스너가 등록된 것이다. 그런데 여기서도 마찬가지로 onTimer함수를 정의해줘야 한다.
private function onTimer(event : TimerEvent) : void {
  //매 30밀리초마다 해야할 작업을 작성한다.
}

이렇게 등록을 했다면 타이머를 시작시켜줘야한다. 타이머는 enterFrame과는 다르게 시작을 해주지 않으면 동작하지 않는다.

timer.start(); 

이렇게 start()메소드를 호출해 줌으로써 이제 타이머가 동작하게 되는 것이다.
만약 타이머를 정지시키고 싶다면 stop()메소드를 호출해야한다.

timer.stop();

이제 타이머를 이용해서 위에서 만든 마우스를 따라 움직이는 애니메이션을 만들어보자.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" mouseMove="onMouseMove(event)" width = "400" height = "400" verticalScrollPolicy="off" horizontalScrollPolicy="off">
    <mx:Image width="100" height="100" source="{img}" id="image" x="150" y="122"/>
    <mx:Script>
        <![CDATA[
            private var targetX : Number;
            private var targetY : Number;
            private const speed : Number = 0.1;
            private var timer : Timer;
           
            [Embed(source="../images/wisu_300.png")]
            [Bindable]
            private var img : Class;
           
            private function init() : void {
                timer = new Timer(30);
                timer.addEventListener(TimerEvent.TIMER, onTimer);
                timer.start();
                targetX = 0; targetY = 0;
            }
           
            private function onTimer(event : TimerEvent) : void {
                var dx : Number = targetX - image.x;
                var dy : Number = targetY - image.y;
                image.x += dx * speed;
                image.y += dy * speed;
            }
           
            private function onMouseMove(event : MouseEvent) : void {
                targetX = event.stageX;
                targetY = event.stageY;   
            }
        ]]>
    </mx:Script>
</mx:Application>



이렇게 enterFrame과 timer를 이용해서 애니메이션을 구현해 보았는데 동작하는 모습은 똑같다.
그런데 이렇게 애니메이션을 사용할 때에는 주의해야할 점이 있다.
이번에 프로젝트를 진행해보면서 느낀 점인데, 애니메이션을 보여주기 위해 계속해서 어떤 연산을 수행한다면 다른 컴포넌트가 업데이트 될 충분한 시간을 주지 못한다는 것이다.
그래서 기능적인 면이 우선시 되는 프로젝트라면 애니메이션이 그 기능을 제한하지 않는 범위 내에서 사용될 수 있도록 해야할 것이다.
Posted by Code-Moon

댓글을 달아 주세요

  1. 버젼업 2012.05.16 14:22 Address Modify/Delete Reply

    var icx:Number = image.width / 2 + image.x; // 이미지의 정확한 중간 좌표 x
    var icy:Number = image.height / 2 + image.y; // 이미지의 정확한 중간 좌표 y

    var dx:Number=targetX - icx;
    var dy:Number=targetY - icy;

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

먼저 자신의 컴퓨터에 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

    감사합니다. ^^

멀티 쓰레드(multi-thread) 기반의 프로그래밍을 하게 되면 중요한 것이 바로 원자성의 보장이다.

그렇다면 원자성이 무엇인가?

원자성이란 여러개의 쓰레드가 있을 때 특정 시점에 어떤 메소드를 두개 이상의 쓰레드가 동시에 호출 못한다는 것이다.

간단한 예를 들어보자.
class Job implements Runnable {
   public void run() {
      while(true) {
         go();
         stop();
      }
   }
   public void go() {
      /* 매우 중요한 작업이다 */
   }
   public void stop() {
      /* 그냥 일반적인 작업이다. */
   }
}

위의 Job 클래스를 보면 run()메소드에서 go()와 stop()메소드를 무한 호출하고 있다.
그런데 여기에서 go()메소드가 아주 중요한 메소드라고 하자.

메인 클래스에서 Job객체를 이용해서 여러개의 쓰레드를 만들었고, 각 쓰레드를 수행시켰다고 하면 각 쓰레드는 start()메소드를 언제 호출했든지에 상관없이 멀티 쓰레드 정책에 따라 수행될 것이다.

그런데 잘 생각해보면 1번 쓰레드에서 go()메소드를 수행하는 중에 2번 쓰레드가 go()메소드를 수행할 수도 있다.
그렇게 되면 우리가 예상치 못한 문제가 발생할 수 있는 부분이라고 가정하자. (그런 상황은 여러가지 상황이 있을 수 있다. 특히, 서로 다른 쓰레드의 go()메소드에서 같은 변수의 값을 변화시키는 부분일 경우를 생각해 보면 된다.)

어쨌든 go()메소드가 그렇게 중요한 부분이라서 절대로 함수 호출이 끝나기 전에 또 다시 go()메소드가 호출되는 일이 없어야 한다면, 이런 경우가 바로 원자적으로 수행되어야 하는 부분이다.

그래서 이러한 부분을 원자적으로 (atomic) 수행되는 것을 보장해 주는 것이 바로 synchronized 키워드이다. 그래서 go()메소드의 선언 부분을 다음과 같이 바꿔주면 된다.

public synchronized void go() 



Posted by Code-Moon

댓글을 달아 주세요