[AS3] 다이나믹 넘버링...

Project/Programming 2007. 10. 14. 04:13
업무상 다이나믹하게 숫자가 바뀌는 형태가 필요해서 만들어 보았다. 이제 어느덧 내 나이 31살 이다 보니 예전처럼 머리가 잘 돌아가지 않는 것 같다. 정도를 밟아서 코드를 작성하면 될 것을, 에러나면 귀찮다는 핑계로 trace로 대충 찾아 헤매다 보니, 체크해야 할 시작 점과 끝 점을 제대로 파악하지 못하고 건성이다.














    

설정

트랙백

댓글

  • 소다수 2007.10.15 08:41 ADDR 수정/삭제 답글

    와우~~

  • moonkoon 2007.10.15 21:50 ADDR 수정/삭제 답글

    소름 쫚;;;; 멋져여 ㅠㅠ

    • jasu 2007.10.15 23:27 신고 수정/삭제

      ^^; 왜 소름이 ;; 아무튼 감사합니다.;

[AS3] CenterPoint 클래스 예제

Project/Programming 2007. 10. 5. 18:39
표시 오브젝트들이 상속하고 있는 DisplayObject 클래스에는 globalToLocal(point:Point):Point 와 localToGlobal(point:Point):Point 메소드를 지원하고 있다. 이를 통해서 DisplayObject의 특정 좌표로 중심점을 이동하는 클래스를 테스트 해 보았다.

아래 예제에서는 rotation을 하고 있는 rectangle의 특정 좌표 점을 클릭하게 되면 DisplayObject의 중심점을 이동하며 한번의 클릭당 해당 오브젝트의 scaleX, scaleY를 각각 0.05 값만큼 증가시키도록 해 놓았다.

이는 실질적으로 표시 오브젝트의 중심점이 이동하는 것이 아니라 local 좌표와 global 좌표간의 gap에 따라서 위치 이동하는 것으로, 생성한 CenterPoint에 있는 get, set 메소드인 rotation 메소드를 통해서 로테이션이 컨트롤 되며, scaleX, scaleY의 값 또한 CenterPoint 클래스에 작성한 메소드를 통해서 컨트롤 되도록 되어 있다.


    

설정

트랙백

댓글

  • moonkoon 2007.10.06 00:42 ADDR 수정/삭제 답글

    읔;;; 저 단순한 모션이 왜케 머찐거징 --;;;

    자수님 암튼 자꾸 좌절하게 만드시면서 불끈거리게 만드셔성 감사 ㅋㅋㅋ

  • 이니셜Z 2007.10.09 11:19 ADDR 수정/삭제 답글

    회전공식을 사용하지 않고도 중심점을 기준으로 회전이 되니.
    참 편리합니다.^^
    어쩜 기하학 적인 알고리즘이
    localToGlobal, globalToLocal이라는 메서드에
    숨어있을지도 모르겠내요.

    • jasu 2007.10.10 09:39 신고 수정/삭제

      globalToLocal(point:Point):Point 와 localToGlobal(point:Point):Point 메소드에서 지원하는 기능은 아니고 그들 메소드를 이용해서 CenterPoint라는 클래스를 만들어서 테스트 예제로 올려 놓았습니다.

  • JHKIM 2008.01.03 14:43 ADDR 수정/삭제 답글

    안녕하세요 자수님.
    displayObject 의 포인트를 어떻게 옮겨야 하는가 한참 고민하던터에 찾게되었습니다..
    포인트를 이용하여 displayObject 의 중심점을 이동한다.. 이해가 잘 안되네요..;;
    조금 쉽게 설명을 들을 수 있을까요..? - wltn222@naver.com

    • jasu 2008.01.03 20:15 신고 수정/삭제

      만약 sprite라는 Sprite가 있을 경우, 이것 자체의 중심점을 이동하기는 어렵습니다. 위 결과물과 같이 sprite를 감싸는 parentSprite를 만들어서 sprite.rotation 값을 적용하는 것이 아니라 parentSprite에서 설정한 get, set rotation 함수를 통해서 컨트롤 할 수 있습니다. parentSprite 안에 있는 sprite의 x, y 좌표를 이동하는 것으로 sprite가 중심점을 이동하는 것처럼 표시할 수 있습니다. 플래시 스테이지 상에서 무비클립을 만들때 Shape의 위치를 이동하는 것과 같은 효과로 보시면 될것 같네요

  • JHKIM 2008.01.04 11:03 ADDR 수정/삭제 답글

    아... 그런 힌트가 있었군요~ 자수님께 한수 배우고 갑니다 ^^

    • jasu 2008.01.09 16:58 신고 수정/삭제

      힌트라고 하기도 좀 뭐한 방법이에요 ^^;

[AS3] 웹페이지에 코드를 이쁘게 보여주는 AScodeViewer

Project/Programming 2007. 9. 13. 06:43

AScodeViewer 1.0 Beta

개인적으로 플래시 코드를 웹상에 올릴 때 하이라이트를 적용하여 편하게 보기 위해서 만들었다. 만들다 보니 플래시 코드뿐만 아니라 다른 코드의 경우도 xml 파일을 수정하는 것으로 적용할 수 있다.

기능적인 요소
기능적인 요소로는 swf에 외부 변수값(코드파일url, 라이라이트 xml, 스타일 xml, selectable) 값을 전달하여 불러들인 xml과 코드, 그리고 코드를 선택 및 복사가 가능하도록 할 것인지를 지정하는 sable 값을 전달하게 된다. 이로서 AScodeViewer.swf 파일에서 코드 하이라이트 및 스타일이 적용된 AScodeViewer를 볼 수 있다.

외부 변수 값을 전달할 때 주의할 점은 크로스도메인 정책에 따라 도메인이 다른 url 경로에 있는 코드나 xml를 불러올 수 없다는 것이다. AScodeViewer.swf 파일이 있는 위치와 같은 도메인 상에 있는 파일을 불러들여야 한다.


사용성에 따른 기능적인 요소로는 오른쪽 하단에 보면 FullScreen mode로 전환할 수 있는 버튼이 있다. 클릭을 할 경우 전체 풀사이즈 화면으로 코드를 볼 수 있는 기능이다.

사용 방법
AScodeViewer을 사용하는 방법은 아래 제공하는 파일을 다운 받아서 사용하고자 하는 계정에 업로드를 하고 아래와 같이 코드를 웹페이지 html상에 넣어주면 된다.

<object width="700" height="400" >
<param name="bgcolor" value="#242424" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="code=TintColor.as&format=as3.xml&style=style_dark.xml&sable=true" />
<param name="movie" value="AScodeViewer.swf" />
<embed src=" AScodeViewer.swf"  flashvars="code=TintColor.as&format=as3.xml&style=style_dark.xml&sable=true" type="application/x-shockwave-flash" allowFullScreen="true" width="700" height="400" bgcolor="#242424" /></embed>
</object>

위에서 보이는 바와 같이 FlashVar에 해당하는 부분의 변수들에 각각의 파일 및 설정 값을 넣어주면 된다. 위 코드의 경우는 swf파일이 있는 같은 폴더 안에 code, format, style 에 해당하는 파일들이 있는 것으로 가정한 것이다.

하이라이트 및 스킨 적용 방법
코드 하이라이트는 플래시 스크립트 에디터로 많이 사용하고 있는 FlashDevelop 프로그램의 language폴더에 있는 xml 데이터를 그대로 사용하였다. FlashDevelop 프로그램을 사용하는 분은 아래 경로에서 사용하고 있는 하이라이트 xml 파일을 취득할 수 있다.

C:\Program Files\FlashDevelop\FirstRun\Settings\Languages

위 경로에서 보면 AS3.xml, AS2.xml, Jscript.xml 등을 볼 수 있는데 AScodeViewer 1.0 Beta에서 지원하는 xml 형태는 AS3.xml, AS2.xml, Jscript.xml, HaXe.xml 이다. 다른 C++ 이나 Java 등의 코드 하이라이트를 사용할 경우에는 위 4개의 파일 중에 아무 파일이나 열어서 해당 언어에서 사용하는 하이라이트 단어들을 등록하고 다른 이름으로 저장하여 사용하면 된다.

AScodeViewer의 스킨 적용은 제공하는 Style_dark.xml 파일이나 style_light.xml 파일을 열어서 해당 부분의 RGB 색상을 변경하여 스킨을 바꿀 수 있다. 아래 이미지를 보면 style.xml 파일에서 지정할 수 있는 부분들을 표시해 놓았다.

사용자 삽입 이미지


아래는 파일로 제공하는 두 가지 스킨을 적용한 예이다. Style_dark.xml 이나 style_light.xml 파일을 수정하여 원하는 색상을 만들어 낼 수 있기 때문에 적용하는 페이지상의 디자인에 맞게 수정하여 사용하면 된다.
왼쪽은 style_dark.xml을 적용한 예이고 오른쪽은 style_light.xml을 적용한 예이다. 왼쪽의 경우 코드 선택이 안되도록 sable = false 값을 적용하였다.


아래 파일을 다운로드 하여 위에서 설명한 대로 원하는 페이지에 적용하면 된다. 블로그 서비스에서는 “외부 멀티미디”어 등에서 youtube 동영상을 임베드 하는 형태로 적용하면 된다. 주의할 점은 위에서 언급한 바와 같이 AScodeViewer.swf 파일이 있는 곳과 불러오는 파일들의 도메인이 같아야 한다는 것이다(같은 도메인 내의 폴더 구분은 상관없다.)

앞으로 버전업의 경우도 FlashDevelop의 기능을 적용할 생각이다. 시간이 허락하는 대로 업데이트 버전을 올려 놓도록 하겠다. 사용하다가 문제점이 있거나 버그 발견 시에는 아래에 댓글로 남겨주시면 많은 도움이 될 것 같다.


AScodeViewer1_0Beta.zip

    

설정

트랙백

댓글

  • 지돌스타 2007.09.13 09:53 ADDR 수정/삭제 답글

    이야~ 아이디어 정말 훌륭하군요~

    • jasu 2007.09.13 15:28 신고 수정/삭제

      감사합니다. ^^ 외국분이 2005년도 경에 작업했던 것이 모티브가 되었습니다.

  • 공씨 2007.09.13 10:12 ADDR 수정/삭제 답글

    >ㅁ< 형님 브라보~ 멋져요~

    • jasu 2007.09.13 15:29 신고 수정/삭제

      고마우이...쿠쿠 사용해보고 문제 있으면 알려주라

  • 뚜기~ 2007.09.13 14:04 ADDR 수정/삭제 답글

    ^-^ 멋지네요~ ㅋ

    • jasu 2007.09.13 15:30 신고 수정/삭제

      감사합니다. ^^ 유용한 자료가 되었으면 좋겠네요

  • 금봉이 2007.09.13 14:53 신고 ADDR 수정/삭제 답글

    너무 멋집니다.. ^^
    제가 SQL파일에 적용하던 중에 커맨트안에 '가 들어가니까 이후 문장이 다 스트링값의 색으로 변경되어 버리더라고요. /* This lock is global, so we can't tell */ 라는 커맨트에서 can't의 '이후가 다 스트링으로 인식해버리더라고요.. can not으로 바꿔버려 해결했지만... 다음 버젼에는 가능하면 수정해 주시면 감사하겠습니다. 혹시 제가 잘못했을지도 모르니 테스트한번 해보시와요.
    멋진 tip을 올려 주셔서 감사드립니당~!

    • jasu 2007.09.13 15:32 신고 수정/삭제

      감사합니다. 확인해 본 결과 ActionScript 코드나 여타 언어에서는 문제가 발생하지 않았는데 sql 코드에서는 언어 구조에서 약간 오류가 있었던 것 같네요 확인하고 수정하였으며 다시 파일을 업로드 하였습니다. 불편하시더라도 다시 다운로드 하셔서 swf 파일만 대체해서 사용하세요...

  • 사노이 2007.09.13 16:01 ADDR 수정/삭제 답글

    멋집니다^^ 언제나 말보다는 행동으로,결과물로 보여주시는게 정말 존경스럽습니다.
    저도 많이 노력해야겠네요^^

    • jasu 2007.09.13 17:30 신고 수정/삭제

      제가 말수가 좀 없어서 오해를 하신거 아닌가 하는 생각이 드네요^^ 아무튼 말씀 고맙습니다.

  • 금봉이 2007.09.13 16:41 신고 ADDR 수정/삭제 답글

    와우~! 빠른 응답속도를 보이시는 JASU님께 다시 한번 존경을 표합니다... ^^;
    고맙습니다.

    • jasu 2007.09.13 17:32 신고 수정/삭제

      ^^ 네... 유용하게 사용하세요...감사합니다.

  • 열이아빠 2007.09.14 08:31 신고 ADDR 수정/삭제 답글

    하루사이에 벌써 버전업까지 되었네요.
    멋진 기능 감사합니다.

    • jasu 2007.09.14 13:15 신고 수정/삭제

      버전업은 아니고 금봉이님께서 sql 코드를 넣었을 때 위와 같은 문제가 있어서 살짝 수정해서 몰래 엎어치기 해놨어요..쿠쿠 감사합니다.

  • fan 2007.10.07 07:08 ADDR 수정/삭제 답글

    너무 좋은데.. as 2.0 버전으로도 만들어주시면 더 좋겠습니다^^

    • jasu 2007.10.07 12:29 신고 수정/삭제

      안녕하세요.. flashDevelop 프로그램폴더에 있는 as2.xml 파일을 사용하시면 as2 버전 highligiht 기능을 사용할 수 있습니다. ^^

  • fan 2007.10.07 18:57 ADDR 수정/삭제 답글

    as2 버전 하이라이트가 아니구요.. AScodeViewe를 as2버전으로 제작하는것을 말씀드린겁니다^^
    다른무비에서의 로딩이 가능하도록 말이죠..^^

    • jasu 2007.10.08 10:01 신고 수정/삭제

      ^^; 요즘은 2.0보다 3.0이 친근한 것 같네요... fan님께서3.0을 접해보시는 것도 나쁘지는 않을 것 같습니다. 2.0으로 다시 제작하기에는 의미가 없는 것 같아서 어려울 것 같네요..^^ 아무튼 감사드립니다.

  • 동강 2007.11.10 04:58 ADDR 수정/삭제 답글

    와우 자기 소스 자료 관리 할때 유용하게 쓰일꺼 같아요, 잘 쓸께요.

    • jasu 2007.11.12 02:47 신고 수정/삭제

      좀더 편하게 만들고 싶었는데 그놈에 크로스도메인 때문에 소스 코드 업로드로 인해서 불편함이 있네요 서버에서 서비스를 한다면 좀더 편해지지 않을까 싶긴 하지만...;;

  • 원강민 2008.03.25 10:03 신고 ADDR 수정/삭제 답글

    http://airdev.tistory.com/226
    AIR로 SWF를 생성해주는 어플을 만들었습니다..트랙백 안걸려서 덧글로^^

    • jasu 2008.03.25 16:21 신고 수정/삭제

      오.. 편하겠네요 ^^ 스킨을 수정 가능한 기능을 추가하면 좋겠네요 ^^

  • 리베하얀 2008.05.09 13:33 ADDR 수정/삭제 답글

    정말 좋네요~
    한번 사용해야 겠습니다
    늘 좋은 정보만 얻고 가네요~

  • seo4234@hanmail.net 2009.02.05 17:18 ADDR 수정/삭제 답글

    한글이 깨져서 나오는건 왜 그런걸 까요?

    • jasu 2009.02.07 12:31 신고 수정/삭제

      제가 한글입력을 안해봤네요 잠시만요

    • jasu 2009.02.07 12:31 신고 수정/삭제

      위 게시물에 한글을 입력 해 봤는데 제대로 나오는것 같네요 아무래도 플래시 소스에서의 문제 보다는 적용한 코드 소스 파일의 인코딩에서 문제가 발생 하는 것 같습니다. 적용한 코드를 메모장으로 열어서 다른 이름으로 저장시 UTF-8로 저장해 보세요

    • seo4234@hanmail.net 2009.02.15 16:05 수정/삭제

      좋은 답변 감사합니다. 다시 한번 해보도록 할게요.

  • Flask 2009.07.03 12:46 신고 ADDR 수정/삭제 답글

    폰트는 바꿀수 없나요? // 그런데 저는 적용이 쉽지 않네요,,,, 티스토리 쓰는데 그냥 컬러값이 #242424인 박스(700x400)만 나오고 '동영상이 로드되지 않음'이라고만 떠요,,ㅠㅠ

    정말 사용하고 싶은데 어떻게 하면 될까요,,,(다운로드 받은 파일과 as파일을 스킨에 업로드 한뒤 html 코드를 html 에디터에 넣은뒤 as파일 이름만 바꿔서 저장했습니다..)

    • jasu 2009.07.05 22:55 신고 수정/삭제

      안녕하세요
      댓글이 좀 늦었네요 폰트는 사용하시는 style xml 데이터 아래에 보시면 폰트 관련 default 설정 노드가 있습니다. Courier New 부분은 원하시는 폰트명으로 바꾸시면 됩니다. 윈도우 설치시 기본으로 들어있는 시스템폰트를 이용하셔야 정상적으로 적용됩니다.

      동영상이 로드되지 않음 이라고 표시되는 것은 swf의 경로가 잘못되어 해당 경로에서 swf파일을 찾을 수 없을 때 방생합니다. swf파일 경로가 제대로 되어 있는지 확인이 필요합니다. 감사합니다.

    • Flask 2009.07.06 12:52 신고 수정/삭제

      답변 감사합니다,,ㅎ
      그런데요, 억지로 swf파일의 경로를 적어줘서 해두었는데 계속 동그라미만 돌아가네요,,,아마 다른 파일들(xml)을 읽어들이지 못하는것 같은데요,,,

      제가 한 방법이 맞는지 말씀해주세요,,ㅠ

      1. 다운로드 받은 파일을 압축을 풀고 티스토리 어드민에 들어간다음, 스킨 바꾸기에서 파일업로드를 눌러 파일들을 업로드 한다. 추가로 내가 작성한 TA.as파일도 업로드 한다. ( 자동으로 경로가 images/파일명 으로 되더군요,, )

      2. 자수님 블로그에 적혀있는 태그를 복사한뒤 글쓰기에서 html에디터로 들어간다음 붙여넣고 TintColor.as -> TA.as(제가 업로드 한것)로 바꿔준다.

      3. 글작성을 완료하고 확인한다 (-> 동영상이 로드되지 않음. 그래서 swf파일을 글에 업로드 한뒤 그 경로를 적어주니 swf파일은 로드되지만, 동그라미만 돌아감,,,)

      아 이거 제가 바보같아서 정말 죄송하네요,,,

    • jasu 2009.07.06 17:05 신고 수정/삭제

      안녕하세요
      제가 설명을 명확하게 해놓지 않은 것 같습니다.
      다른 문제는 없어 보입니다. 다만 FlashVars로 swf 파일에 전달하는 변수들의 값들을 모두 http://를 포함한 절대경로로 지정해 주시면 될것 같습니다. 플래시에서 파일 경로를 탐색할 때 swf가 임베드되어 있는 html파일의 위치에 따라 상대경로를 지정합니다. 샘플에서 작성해 놓은 것은 로컬에서 모든 파일이 한 폴더에 있을 때 가정으로 설명해 놓은 것이니 모든 파일 경로는 http://를 포함하는 절대경로를 지정해 보세요
      감사합니다.

    • Flask 2009.07.07 15:22 신고 수정/삭제

      우...와..... 드디어 성공했어요,,,,ㅠㅠ

      스킨에 업로드된 파일의 겅로를 찾아줘서 적어주면 되는군요! (제 경우는 http://cfs.tistory.com/custom/blog/24/246210/skin/images/ 이거 네요,,,ㅎㅎ)

      아, 정말 잘되요!! 정말 좋은 기능이에욧!! ^^

      답변 정말 감사드립니다!

      // 배경에 줄이 있으면 어떨까요? 그냥 선 말고 한줄씩 격줄로, 드래그 된 모양으로 줄구분이요;;ㅎ,,,,

    • jasu 2009.07.16 20:29 신고 수정/삭제

      라인으로 구분지어 놓으면 보기 편할거 같기는 하네요 ^^ 감사합니다.

  • -_-;; 2009.10.07 19:26 ADDR 수정/삭제 답글

    이런 아예 안되네요... 그냥 검은 화면만나오고..

    • jasu 2009.10.07 21:03 신고 수정/삭제

      안녕하세요~
      플래시가 나오지 않을 경우는 아마도 경로문제일 것 같습니다. swf 파일 경로와 xml, as파일 경로가 제대로 적용되어 있는지 확인해 보시는 것이 좋을 것 같습니다. 안되는 페이지 경로를 보내주시면 확인해 보도록 할께요 감사합니다.

  • -_-;; 2009.10.16 20:26 ADDR 수정/삭제 답글

    그래도 검은 박스만 뜨는데요;;
    스킨에 업로드된 파일 경로를 어떻게 알아내는지...
    주소표시줄 있는거 복사해도 안되는데요;;....-_ㅡ;;

    • jasu 2009.10.18 01:38 신고 수정/삭제

      일단 올리신 임베드 소스와 as파일 경로, xml파일 경로 등을 올려주세요 제가 확인해 보고 문제가 있는 부분을 알려드릴께요

  • 천우철 2010.10.15 10:26 ADDR 수정/삭제 답글

    자수님 안녕하세요 처음뵙겠습니다 ^^
    자료 잘 받아서 블로그에 처음 적용해보았습니다. 너무 이쁘고 쓰기 간편하네요.
    잘쓰겠습니다 공부도 열심히 하겠습니다.
    수고하십시요 ^^

    • jasu 2010.10.18 18:00 신고 수정/삭제

      안녕하세요 ^^ 네 하도 오래전에 올려놓은 스킨이라 현재 티스토리 환경과 잘 맞을지는 모르겠네요. 감사합니다.

[AS3] SelectArea, DrawShape and Sewing

Project/Programming 2007. 8. 31. 18:30
예전에 http://www.tileui.com/ 사이트를 보면 스테이지 상에 있는 복수의 오브젝트를 선택할 때 직사각형으로 선택하는 것이 아닌 draw 형태를 이용하여 필요한 요소만 선택할 수 있다. 이 것을 보고 그려진 Shape를 통해서 선택할 수 있도록 하면 되겠다 싶어서 구현해 봤다.

일단은 클래스의 구조는 아래와 같이 작성했다.

DrawShape.as
이 클래스는 Point 요소를 가지고 있는 Array를 전달하고 그것을 통해 그려진 Shape를 돌려주는 클래스

Sewing.as
이 클래스는 Point 요소를 가지고 있는 Array를 전달하고 그것을 통해 외각선을 그려주는 클래스

SelectArea.as
이 클래스는 DrawShape와 Sewing클래스를 통해 그려진 Shape에 걸쳐진 오브젝트들을 Array로 반환하는 메소드를 가지고 있다. 여기에는 마우스를 UP을 했을 때 Event를 dispatch하게 되는데 이벤트를 받는 메소드에서 기존의 array 요소 중에서 선택된 오브젝트 요소를 가지고 있는 새로운 배열을 참조할 수 있게 하였다.

아래 예제에서는 랜덤한 위치에 생성한 오브젝트들을 마우스 down and drag, up을 통해서 선택을 하면 대각선 방향으로 정렬하게 해놨는데 대각선으로 정렬되는 것은 일정한 규칙이 있는 것은 아니고 디테일하게 하기 귀찮아서 그냥 되는대로 정렬해놨다…쿠쿠 목적이 없는 예제는 슬슬 힘이 빠진다는..;;

    

설정

트랙백

댓글

  • c.moore 2007.11.11 19:59 ADDR 수정/삭제 답글

    Any source going to be made available for this? I could really see this being useful to many :) thanks!

    • jasu 2007.11.12 02:48 신고 수정/삭제

      Sorry... I don't reveal the source code... but, if my source code is cleanup, i will... thank you for visit my blog...

  • SC 2008.10.02 16:53 ADDR 수정/삭제 답글

    JaSu님 제발. .다시한번만 볼수 없을까요 ..
    영역 선택문제 때문에 살이 쫙쫙 빠지고 있습니다.

    • jasu 2008.10.07 12:54 신고 수정/삭제

      이 게시물에 대한 소스는 오픈한 적이 없습니다. hitTest와 좌표계를 이용하시면 될것 같네요 소스는 예전에 만들어 놓은 자료에서 정리가 되지 않아서 정리가 되면 올려 놓도록 하겠습니다. 감사합니다.

  • SC 2008.10.09 07:31 ADDR 수정/삭제 답글

    JaSu님 ㅋㅋ 영역선택하는거 성공했습니다 .ㅋ
    차분히 생각하면서 하면 되는군요.ㅋ
    감사합니다 .ㅋ

APE : SpringConstraint의 이벤트는 왜...

Project/Programming 2007. 8. 23. 05:50

Collide 이벤트를 가지고 형광등을 표현해 봤다. 형광등의 진공 유리관에도 collide 이벤트를 적용하려고 했었는데 SpringConstraint에서 이벤트 반응을 하지 않는다. 구조상으로는 SpringConstraint -> AbstractConstraint -> AbstractItem -> EventDispatcher 와 같은 상속관계를 갖고 있음에도 이벤트에 반응하지 않는 것이 좀 이상하다.

일단은 진공관에 대한 이벤트 반응과 collidable을 false로 해 놓았다.


    

설정

트랙백

댓글

APE(Actionscript Physics Engine) Class Diagram

Project/Programming 2007. 8. 16. 10:05

기존에 만들었던 APE의 UML에서 Association 표기가 없었던 것을 추가하고 기존에 잘못 되었던 부분을 수정했다. 클래스 소스를 기준으로 작성된 class diagram이므로 정확하지 않을 수 있지만 대체적으로 package를 분석하는데 도움이 될 것 같다.

아래 풀사이즈 jpg이미지와 플래시로 만들어 놓은 파일을 올려놓는다.  






사용자 삽입 이미지





    

설정

트랙백

댓글

  • 지돌스타 2007.08.16 14:33 ADDR 수정/삭제 답글

    오~ 멋집니다. 아직 APE는 사용해보지 않았지만 올려주신 예제 들을 보면 실질적이면서도 동적인 것을 만드는데 큰 도움이 될 것 같습니다.

    • jasu 2007.08.16 17:37 신고 수정/삭제

      네...지금은 엔진 부분은 static으로 하나만 돌릴 수 있도록 되어 있는데 아무래도 안정성 문제 때문에 그런듯 싶네요.. 각 오브젝트별로 vectorForce를 따로 지정할 수 있다면 다용도로 사용할 수 있지 않을까 싶네요...^^ APE는 일단 심플해서 좋습니다.

  • 2007.08.17 09:26 ADDR 수정/삭제 답글

    비밀댓글입니다

  • 동강 2008.02.15 02:38 ADDR 수정/삭제 답글

    APE 를 공부 하는데 많은 도움이 되고 있습니다. 자료 감사합니다.ㅎ

    • jasu 2008.02.15 10:36 신고 수정/삭제

      도움이 되었다니 좋네요 ^^ 즐공하세요

[AS3] WheelParticle 상속

Project/Programming 2007. 8. 12. 22:40
WheelParticle 클래스를 상속하여 Square 클래스를 만들어 봤다. WheelParticle 클래스에서는 angle 메소드를 원하고 있어서 paint 메소드를 오버라이드 할때 그리게 되는 graphics의 rotation에 적용하였다.

화면에서 마우스를 클릭하고 있으면 Square 오브젝트 들이 생성하며 일정한 범위(y값 450) 이상으로 넘어가는 오브젝트는 엔진에서 제외(and sprite 삭제) 하였다.

엔 진에서 제외할 때 더이상 사용하지 않는 sprite인 경우에는 delete 시켜줄 필요가 있다. removeParticle을 실행할 때 cleanup 메소드를 통해서 해당 sprite에 있는 오브젝트들을 removeChildAt 시켜주지만 sprite 그 자체는 메모리에 남아있게 된다.

왼쪽, 오른쪽에는 경계영역을 만들어 분산되는 오브젝트들을 어느정도 밀집시켰다.


    

설정

트랙백

댓글

  • jin_u 2007.08.13 19:50 ADDR 수정/삭제 답글

    cool~~

    • jasu 2007.08.13 22:44 신고 수정/삭제

      서늘하나? 쿠쿠 뭐 재밌는 일 없낭...

  • jin_u 2007.08.14 08:56 ADDR 수정/삭제 답글

    여친이랑 단땅 하는데 너도 할래? 지금 새롬98 버전으로 하니깐 자꾸 튕기네, 그래서 지머드 설치해보고 최신 새롬 설치해 보고 있다. 관심있으면 연락 하도록~

    • jasu 2007.08.14 11:09 신고 수정/삭제

      앙 그런거 말공...예를 들면 좀 전에 대전 친구한테서 문자가 왔는데 공주님이 탄생했다는....뭐 이런거 말이지..쿠쿠

  • moonkoon 2007.09.21 02:41 ADDR 수정/삭제 답글

    와웅 다시바도 놀랍네여 ㅠ_ㅠ 이거 하는게 요즘 소원이라능 -_-;;
    힌트좀 주세용 ㅋㅋㅋ

    • jasu 2007.09.21 18:23 신고 수정/삭제

      APE라는 물리엔진을 이용했습니다. wheelparticle 클래스를 상속해서 sprite를 사각으로 표시한 것이구요 포스트중에 ape관련 내용들이 있으니 참고하세요... 기본적인 사용 법은 ape 홈페이지에서 소스를 다운로드 하시면 어렵지 않게 응용하실 수 있을 것 같습니다.

[AS3] Revive 테스트

Project/Programming 2007. 8. 8. 13:37
Circle 오브젝트를 클릭하여 드레그할 수 있다. 중앙 원은 ImmovableCircleInnerSegment(움직임이 없는 중력방향 Inner)이다.



 





 
 


 


    

설정

트랙백

댓글

[AS3] 무게 중심축과 질량

Project/Programming 2007. 8. 7. 03:08
검은 바탕화면에서 마우스를 Down하고 있으면 CircleParticle을 생성하게 되는데 갯수는 16개로 한정하였다. 중력에 의해서 아래로 하강할 때 스테이지 밖으로 밀려나는 것들에 대해서는 삭제하였다. 
















    

설정

트랙백

댓글

  • jin_u 2007.08.06 18:28 ADDR 수정/삭제 답글

    재밌다 재미써~ 근데 파일은 오픈 안하냐??
    요즘에 물리에 빠져는거 같다? 맨날 물리에 관련된 것들이 올라오네? 재밌다. 소스 공개해라~ 그리고 이건 안터지는군...~

    • jasu 2007.08.07 03:02 신고 수정/삭제

      APE 엔진을 가지고 구조나 흐름을 분석해볼 목적으로 만든느거라 소스는 형편없다..쿠쿠 좀더 바람직한 뱡향으로 흐르게 되면 그때야.... 잘 만들어진 api나 엔진들을 보면 공부가 되는거 같다.
      뻑난건 내탓 아니랑께, 쿠쿠 임베드 코드 수정해서 다시 올려놓은 것들이니까 cpu도 그다지 많이는 안 올라갈거 같은데...

  • 지혜 2007.08.10 15:05 ADDR 수정/삭제 답글

    와~멋있어요~ㅎㅎ

[AS3] 물리엔진 중력의 관계

Project/Programming 2007. 8. 5. 11:11
APE를 통해서 물리 엔진을 실험하기 위해 샘플을 만들어 봤다. 기본적인 클래스 기능에 대한 이해를 위해 비교적 간단한 오브젝트와 관계를 통해서 실험을 했다.

엔 진의 구동은 기본적으로 APEngine클래스의 영역 안에서 실행이 된다. init 메소드와 container 메소드 등으로 기본적인 세팅을 하게 되며 addGroup 메소드를 통해서 물리 역학에 대한 관계를 형성할 인스턴스들을 등록한다. 등록된 인스턴스들은 각각의 기능에 따라 서로 관계를 형성하게 된다.

충돌과 중력, 무게에 관련된 파라미터들을 볼 수 있었는데 자세한 것들은 클래스를 좀더 분석해 봐야 할 듯싶다. 만들어 놓은 위 결과물의 기능은 다음과 같다.

검은 화면에서 마우스 클릭을 할 경우 원형의 오브젝트를 생성하며 중력에 의해서 아래로 하강한다. 하강 과정에서 로프에 걸리게 된다. 생성한 각각의 오브젝트들도 서로 관계를 형성하며 탄성을 갖게 된다.

로 프의 원형을 클릭할 경우 CircleParticle 오브젝트가 가지고 있는 fixed(Boolean)의 값을 변경하게 되는데 true일 경우에는 고정이며 false일 경우에는 비 고정상태로 주변의 오브젝트의 반응에 의해서 역학 운동을 하게 된다. 이때 true일 경우 붉은색, false일 경우에는 노랑색으로 구분하였다.

* circle 오브젝트 생성을 6개로 한정.


    

설정

트랙백

댓글

  • jin_u 2007.08.05 10:37 ADDR 수정/삭제 답글

    자수야 circle을 많이 만들어서 움직임 보다가 우측에 고정되어있는 circle을 클릭해서 다 아래로 떨어트린후에 좀있다가 갑자기 파폭이 닫히는거야 그래서 다시 실행해서 파폭 섹션을 복구 하겠냐고 해서 하겠다고 하니깐 재부팅 대써... 메모리상에 문제인거 같다. 체크해봐라. ㅡㅡ

    • jasu 2007.08.05 10:58 신고 수정/삭제

      ㅇㅇ..쿠쿠 내 컴이 넘 좋은강..;; 몇개나 만들었길랭...

  • jin_u 2007.08.06 18:30 ADDR 수정/삭제 답글

    circle이 6개밖에 안만들어져서 테스트 못하겠다. 막아논거야?? 퇴근할 시간이다. 퇴근~

    • jasu 2007.08.07 03:04 신고 수정/삭제

      ㅇㅇ 그때 이야기 했을 때 6개로 제한해 놨다. 아무래도 무한하게 생성한다는 것이 좀 찝찝하기도 하고...

  • jin_u 2007.08.07 10:03 ADDR 수정/삭제 답글

    그럼 드레그라도 되게 해놔야 더 탄력적인걸 느끼지~ 그냥 떨어지고 나니깐 끝이네.. 먼가 아쉬움이.. ㅋㅋ

[AS3] SelectRectangleExample

Project/Programming 2007. 8. 2. 11:47
예전에 마리오클링거만이 만들었던 Marching Ants Rectangle을 AS3 버전으로 수정하고 Object select 기능을 추가하여 MouseEvent.MOUSE_DOWN, MouseEvent.MOUSE_MOVE,MouseEvent.MOUSE_UP 이벤트를 통해서 오브젝트를 선택할 수 있도록 만들어 보았다. 윈도우 바탕화면에서 처럼 아이콘들을 선택하고 선택한 아이콘들을 이동하는 기능으로 확장 가능할 것으로 생각된다. 오늘은 여기까지만...;;













    

설정

트랙백

댓글

  • jin_u 2007.08.02 15:44 ADDR 수정/삭제 답글

    오호라~ 잼나네. 옮기는건 언제쯤? ㅋㅋ

    • jasu 2007.08.02 19:45 신고 수정/삭제

      옮길까 말까 생각중이다. 쿠쿠, 하던거 해야겠지...있다가...ㅎㅎ

    • jasu 2007.08.03 09:45 신고 수정/삭제

      아니다 다른거 할란다..쿠쿠 공부삼아 하기에는 불필요한 스펙이 생긴당..쿠쿠

[AS3] Create Number

Project/Programming 2007. 7. 28. 17:34
웹상에서 본 효과가 재미있어서 확장하여 숫자 DisplayObject를 만들어 보았다...

















    

설정

트랙백

댓글

UI&C(User Interface & Communication) Lab을 끝맺음 하며...

Project/UI&C Lab 2007. 6. 22. 12:43
그 동안 ActionScript 2.0으로 UserInterface & Communication Lab(UICLab)을 진행하였던 작업물을 압축파일로 올려놓는다. 평소에 생각하던 아이디어나 기술적인 부분을 테스트 하기 위해 오프라인에서 진행하였으나 이제는 오프라인에서 진행하는 의미가 없어졌고 기술적인 진보를 위하여 이쯤에서 UICLab을 끝맺음 하고 앞으로는 시급한 사항이 아닌 이상은 ActionScript 3.0로 작업을 진행할까 한다.

차기 UICLab은 AS3 공부를 위한 아주 기초적인 것에서부터 시작할 듯 싶다. 오프라인에서 진행을 할지 아니면 블로그의 infinite 메뉴에서 진행할지는 앞으로 생각해 봐야 하겠다.

사용자 삽입 이미지


제작된 결과물에 대한 내용은 압축파일을 풀고 실행파일을 실행하면 왼쪽 메뉴 왼쪽에 중간에 나와있는 버튼을 클릭하면 상세하지는 못하나 결과물에 대한 설명을 볼 수 있다. 버튼 가독성이 떨어져서 버튼의 위치는 위 이미지에 표시해 놓았다.

아무쪼록 플래시를 시작하시는 분들에게 재미있다는 느낌이 전해졌으면 좋겠다...

UIClab.zip



    

설정

트랙백

댓글

  • AS3시작 2007.06.22 13:39 ADDR 수정/삭제 답글

    워~~파일 받아 다 보고 놀랄뿐 ㅠㅠ 나도 언젠간 저런 실력을 갖출수 있을가?;;

    • jasu 2007.06.23 10:57 신고 수정/삭제

      안녕하세요...적성에 맞는 일이라면 하다보면 자연히 재미가 붙을거에요...^^ 말씀 감사합니다.

  • 엄인호 2007.06.22 23:01 ADDR 수정/삭제 답글

    감탄사가 절로 나오네요.. 부럽습니다..
    자수님 결과물을 보니 노력하신만큼 좋은 결과물이 나오는것 같다는 생각이~~
    잘 봤습니다.

    • jasu 2007.06.23 10:58 신고 수정/삭제

      감사합니다. 무엇보다 중요한 것은 매일 하나라도 직접 해보는 것이 중요한 것 같습니다.

  • Lee 2007.06.23 00:46 ADDR 수정/삭제 답글

    정말 멋지십니다..+_+ 항상 눈으로만 보고 가다가 이렇게 글을 남겨 봅니다.
    저도 열심히 해서 자수님 처럼 실력을 갖추고 싶네요..^^;;

    • jasu 2007.06.23 11:00 신고 수정/삭제

      저도 아직 배우는 과정이라 뭐라 말씀 드릴게 없네요 열심히 하면 힘든일이 많을 것 같습니다. 재미있게 하세요...

  • 키넛 2007.06.23 21:53 ADDR 수정/삭제 답글

    우왕 멋쟁이.

  • 열이아빠 2007.07.11 09:56 신고 ADDR 수정/삭제 답글

    어디선가 많이 보았던 그림인가 했는데
    네이버에서 이사를 오신거였군요..
    cs3 정보찾아오다가 다시 찾게 되었습니다.

Flickr Searcher 1.8 업로드

Project/Programming 2007. 5. 13. 13:49

사용자 삽입 이미지


사용자 삽입 이미지

사용자 삽입 이미지


Flickr의 Open API를 이용한 사진 검색 어플리케이션 'FlickrSearcher'
version 1.8

http://dicaland.cafe24.com/flickr/FlickrSearcher1_8.swf
====================================================================================================

FlickrSearcher1_8.exe

Version 1.8  Release date : 2007/05/13
Change log
1. photo 썸네일 클릭시에 나타나는 왼쪽 중앙에 있는 information 버튼의 가독성을 위하여 색 변경
2. Search history 기능 추가 : 특정 모드(tags, name, email, nsid)를 통해 검색한 history를 저장할 수 있도록 함.
(최근 검색한 검색어와 페이지 수를 통해서 되돌아 갈 수 있도록 함)
====================================================================================================


    

설정

트랙백

댓글

  • clotho 2007.05.13 22:22 ADDR 수정/삭제 답글

    와~ 멋지네요. +_+ 잘 쓰겠습니닷!!
    사진 저장이 된다면 조금 더 좋을 뻔 했는데.. 차차 버젼업 하시면서 하실듯? ^^

    • jasu 2007.05.14 07:09 신고 수정/삭제

      안녕하세요
      현재 버전(1.8)에서는 썸네일을 클릭후 큰 이미지를 로드할 때 왼쪽 중앙에 보시면 버튼이 나오고 그 버튼을 클릭할 시에는 해당 이미지 정보와 이미지 소유자의 정보가 나타납니다.

      그 정보에 보시면 해당 이미지를 다운로드 할 수 있도록 되어 있습니다. 큰 이미지의 경우는 불러들이지 못할 시에는 중간 이미지로 저장이 됩니다. 이미지 링크 주소로 바로가게 되어 있으니 그곳에 접근하시면 오리지날 이미지(큰 이미지)도 다운로드 할 수 있습니다. 감사합니다.

  • 하얀별 2007.05.14 07:56 신고 ADDR 수정/삭제 답글

    한글 검색어로 검색해도 되는 프로그램인가요!?

    • jasu 2007.05.14 10:01 신고 수정/삭제

      api로 받아올때 한글 테그로는 검색이 제대로 되지 않는 듯 합니다. 나중에 확인 후 가능하면 적용할 예정입니다. 감사합니다. ^^

  • brainchaos 2007.05.18 23:32 신고 ADDR 수정/삭제 답글

    프로그램 잘쓰고 있습니다.
    저의 첫번째 추천 블로그이십니다.^^;
    사진 잘보고 갑니다. 푸근하네요.

    • jasu 2007.05.19 00:03 신고 수정/삭제

      감사합니다. 첫번째 추천 블로그로 등록해 주셨다니 영광이네요...^^ 요즘은 개인적인 일, 회사일 등으로 바쁜 생활을 하다보니 버전업을 하지 못하고 있네요...몇가지 업그레이드 아이디어들이 있는데 시간 되는되로 업데이트 하겠습니다...^^

  • 황지욱 2007.05.19 09:46 ADDR 수정/삭제 답글

    정말 좋은 프로그램이네요^^
    우연히 이 프로그램을 득템해서 외국껀지 알았는데...

    잘쓰겠습니다. 이제 좋은 이미지 찾아 여기 저기 갈필요가 없네요.^^

    • jasu 2007.05.19 12:45 신고 수정/삭제

      감사합니다. 도움이 된다고 하니 기분이 좋네요...^^
      어디서 알게 되셨는지 궁금하네요...
      아무튼 감사합니다. 잘 사용하세요....^^

  • 2007.06.13 05:38 ADDR 수정/삭제 답글

    비밀댓글입니다

    • jasu 2007.06.15 04:22 신고 수정/삭제

      안녕하세요...
      flickr가 KR로 론치되었군요... 제 블로그를 어찌 아시고 오셨는지 모르지만 반갑고 감사합니다. flickr는 기능적인 부분에서는 이미 입증이 된 사이트지만 앞으로 한국 웹의 정서에 맞는 서비스로 보완할 필요가 있을 듯 싶습니다. 한글 테그 관련 사항도 반가운 소식이네요...^^ 아무튼 방문 감사합니다.

  • 정진호 2007.08.07 15:09 ADDR 수정/삭제 답글

    정말 쓰면 쓸수록 마음에 드는 멋진 툴 인것 같습니다.
    좋은 프로그램 만들고 공유해 주셔서 감사합니다. :)

    • jasu 2007.08.08 06:45 신고 수정/삭제

      안녕하세요...^^ 도움이 되신다니 기쁘네요 감사합니다.

  • 최호정 2007.08.09 20:57 ADDR 수정/삭제 답글

    음.. 많이 놀라고 턱빠지고,, 뭐 자멸감이랄까.. 자수님의 프로그램들을 보고 있으면 이런 것들이 떠오릅니다 정말 멋지네요 플래시는 단지 그림만 그리는 툴로만 알고있다가 액션스크립트를 안지 얼마 되지 않았습니다 정말 for, if, while 단순한 조건문 프로그램만 알다가 매소드니 클래스니 머리는 아프지만 자수님 덕분에 좋은 정보 많이 배웠습니다. 특히 이 프로그램은 제 턱길이를 좀더 늘릴만큼 놀랄만하군요.. 감사합니다.

    • jasu 2007.08.09 22:56 신고 수정/삭제

      일발 프로그래밍과 플래시의 다른 점이자 장점이라고 하면 기술보다는 아이디어가 많은 부분을 차지한다는 것이 개인적인 생각입니다. 기술은 하루에 하나씩 익히시는 것이 가장 빠른 방법인거 같구요 아이디어는 많이 보고 많이 생각하시면 될거 같네요 ^^ 크리에이티브적인 작업을 잘 한다는 것은 모방과 창조 사이의 구분을 잘 하는 사람이라고 생각합니다. 많이 보시고 직접 모방해 보시고 그것을 통해 파생되는 자신만의 생각에서 또 다른 창조에 귀기울여 보세요.. 어렵다는 것은 무엇인가를 알기 전에 느끼는 감정일 뿐이니까요...^^ 말씀 감사합니다.

  • jin_u 2007.08.10 14:27 ADDR 수정/삭제 답글

    자수 월? "어렵다는 것은 무엇인가를 알기 전에 느끼는 감정일 뿐이니까요"
    모두다 똑같은 생각을 하고 있나 보군.. ^^

    • jasu 2007.08.10 18:11 신고 수정/삭제

      쿠쿠 알면 보이고 보이면 느낄 수 있는거 아이강 다 비슷하겠지

  • jin_u 2007.08.10 18:29 ADDR 수정/삭제 답글

    '감정일 뿐이니까요' 보다 '공포일 뿐이니까요'가 더 맞는거 아이가? 더 섬뜩하게 -_-a

  • 바보라기★ 2007.08.18 13:51 ADDR 수정/삭제 답글

    정말 유용한 프로그램입니다^^
    정말 잘 쓰고있구요.. 혼자 쓰기 아까워서 그런데..
    링크를 걸거나.. 따로 자료 게시판같은데서 자유롭게 배포해도 되는건지
    여쭤봅니다 ^^

    • jasu 2007.08.18 14:16 신고 수정/삭제

      ^^ 감사합니다. 도움이 되신다니 기쁩니다. 프로그램은 링크를 거셔도 되고 따로 자료실에 올리셔도 됩니다. 자유롭게 이용하세요 ^^

  • ontop 2007.09.03 16:14 신고 ADDR 수정/삭제 답글

    안녕하세요!

    써보니 정말 좋네요~ ^^
    플리커는 요즘들어 가장 자주 가는 곳 중 하나인데~ 이렇게 멋진게 있었네요.. 감사합니다.

    플리커 사진을 좀 쉽게 보기 위해 야후 플리커 위젯을 사용했었는데, 좀 답답한 감이 없지않습니다만... 유용한 기능들이 좀 있습니다.

    - 로그인 -> contacts 사진들 보기, 사진 upload 등이 가능
    - interestingness slide show, tag search 결과 slide show 등...

    혹시 야후위젯 안써보셨다면 참조해보세요.. ^^

    • jasu 2007.09.03 19:05 신고 수정/삭제

      감사합니다. ^^ 야후위젯은 사용안해봤는데 한번 사용해 봐야 겠네요...고맙습니다.

  • binnamoo 2008.01.13 06:33 신고 ADDR 수정/삭제 답글

    플리커 이미지를 자주 검색하기때문에 저한테 상당히 유용한 프로그램이네요. 그런데 플리커에서는 매일 500개의 오늘의 사진 (INTERSTINGNESS) 이 선정이 되는 걸로 알고있습니다. 이 오늘의 사진만 별도로 볼 수 있는 기능은 없을까요? 그냥 INTERSETINGNESS 태그로는 오늘의 사진이 검색되지 않는군요. 부탁드립니다. ^^

    • jasu 2008.01.17 12:53 신고 수정/삭제

      안녕하세요 FlickrSearcher는 as2.0 버전으로 작업이 되었던 터라 다음에 기회가 되면 as3으로 좀더 다양한 형태의 검색프로그램으로 만들어 보도록 하겠습니다. 감사합니다.

    • binnamoo 2008.01.18 02:02 신고 수정/삭제

      그 날을 손꼽아 기다리겠습니다. ^^

  • papapac 2008.01.27 19:14 신고 ADDR 수정/삭제 답글

    디자인과 프로그래밍 두 분야를 조화롭게 다루는 분들을 만나기는 어려운데 대단하네요- 저도 외국 사람이 만든건줄 알았어요. 한가지 아쉬운 점은 CCL저작권 방식에 따라 검색되는 기능이 지원됐더라면 하는 것입니다. 이미지를 디자인 소스로 활용하려면 저작권 방식에 따라 검색하는 점이 매우 중요하다고 생각됩니다. 앞으로도 멋진 업데이트 기대하겠습니다 ^^

    • jasu 2008.01.28 19:14 신고 수정/삭제

      별말씀을요 전 둘다 아직 서툴러서 공부중입니다. 디자인계열이 아니여서 감각이 없네요 눈 동냥 중입니다. ^^;

  • 나그네 2010.01.20 17:41 ADDR 수정/삭제 답글

    컴퓨터 이미지 관리 프로그램을 찾다가 여기까지 왔습니다. 플릭커에서도 자주 검색하는데 좋은 프로그램 같네요. 혹시 컴퓨터 내에 이미지 검색 기능을 추가 하실 생각은 없으신지요...사용자 입장에서 글 적어 봤습니다. 좋은 프로그램 감사합니다.

    • jasu 2010.01.20 20:49 신고 수정/삭제

      안녕하세요 많이 흘러오실 듯 하네요 ^^ 말씀 감사합니다. 파이어폭스의 익스텐션으로 제공되는 tombloo도 좋은 것 같습니다. http://wiki.github.com/to/tombloo/

      그리고 웹상에서 검색한 이미지를 공유하고 정리하고자 하신다면 tumblr 서비스를 활용해 보시는 것도 괜찮을 것 같네요 감사합니다.

  • 나그네그 2010.04.12 23:07 ADDR 수정/삭제 답글

    한국사람이 만든거였군요

Flickr Searcher 1.7 업로드

Project/Programming 2007. 5. 10. 11:45
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지

Flickr의 Open API를 이용한 사진 검색 어플리케이션 'FlickrSearcher'
version 1.7

====================================================================================================
Version 1.7  Release date : 2007/05/10
Change log
1. 1.6에서 'VIEW AUTHOR PHOTOS'로 검색을 할때 search mode 'name'으로 이동하면서 textField 길이가 불규칙하게 변했던 버그 수정.
2. 정보 TextField를 선택가능 하도록 변경.
3. Photo Information에서 이미지의 exif 정보를 볼 수 있도록 기능 추가.
====================================================================================================
    

설정

트랙백

댓글

  • Joonsung 2007.05.10 10:31 신고 ADDR 수정/삭제 답글

    정말 날로 변신해가는 FlickrSearcher군요.. 굉장합니다. exif정보를 못보는게 참 아쉬웠는데 바로 반영이 됐네요..

    • jasu 2007.05.10 21:43 신고 수정/삭제

      네... ^^ 감사합니다. 개인적인 시간을 쪼개서 말들어 보는거라 부족한 부분이 많이 있습니다. 앞으로 시간이 허락되는 한 주기적으로 취미삼아 업데이트 하도록 하겠습니다.

  • 모로 2007.05.12 14:37 ADDR 수정/삭제 답글

    대단하십니다~

    님 스킨을 조심씩 바꿔 볼려고 하는데 힘드네요..ㅋㅋ
    혹시요

    ABOUT+LINK 이런 방을 만들어
    내용하고 링크만을 보관할수 있는 방을 만들고 싶은데 가능한가요?

    나중에 스킨 변경하면서 어려운거 있으면 또 문의 드리겠습니다

    좋은 주말 보내세요~^^*

    • jasu 2007.05.12 22:25 신고 수정/삭제

      감사합니다.
      기존 틀에서 벗어난 페이지를 말씀하시는 것인가요?
      새로운 html을 만들어서 div를 기존의 div container 위에 레이어로 올리는 방법이 있습니다.

      기존의 틀을 사용하되 특정 페이지를 제공되는 게시판 형태가 아닌 직접 작성한 html을 불러들이기 위해서는 skin.html의 내용을 수정해야 할 듯 싶습니다. 저도 해보지 않은지라 현재의 스킨에서 어떠한 형태로 수정을 해야 하는지의 구체적인 방법은 저도 해봐야 알것 같네요...

      감사합니다.

Flickr의 Open API를 이용한 사진 검색 어플리케이션

Project/Programming 2007. 5. 9. 09:23



Flickr의 Open API를 이용한 사진 검색 어플리케이션 'FlickrSearcher'


사용자 삽입 이미지
사용자 삽입 이미지

====================================================================================================
Version 1.6  Release date : 2007/05/08
Change log
1.    search mode를 tag, name, email, nsid와 같이 4개 모드로 검색 가능하도록 기능 추가.
2.    tag로 검색할 경우에는 ‘,’ 구분자를 통해 복수 tag 검색 가능 추가. ex) quality, blue, yellow
3.    author & photo information 확인 가능.
4.    author의 정보에 있는 “VIEW AUTHOR PHOTOS” 버튼을 통해 author의 사진들을 볼 수 있는 기능 추가.
5.    photo information에서 이미지의 크기별로 view가 가능하며 해당 이미지를 download하는 기능 추가.
6.    license 적용(크리에이티브 커먼즈의 저작권 규약 표시)
7.    author의 icon 이미지 표시(이미지에 대한 모든 정보를 사전에 습득할 시, 속도 문제를 감안하여 해당 이미지를 클릭한 이후 적용됨).
8.    편의성을 고려하여 1.0버전에 있던 fullscreen 모드 삭제,
9.    기타 1.0버전에 없는 다수 기능 추가.
====================================================================================================
Version 1.0  Release date : 2007/05/03
Change log
최신 버전 업데이트시 자동 알림 기능 추가 ====================================================================================================

    

설정

트랙백

댓글

  • MissFlash 2007.05.02 10:08 ADDR 수정/삭제 답글

    완전 멋진데요 ^^;

    웹에서 사용가능했으면 더 좋았을 것 같아요~

    Jasu님이라면 며칠내로 웹용도 만드시겠죠? ㅋㅋㅋ(무언의 압박?)

    • jasu 2007.05.02 10:12 신고 수정/삭제

      웹서비스로 가능한 형태이긴 하지만 중간에 BitmapData로 변환하는 루팅을 빼야해서요 그걸 빼면 썸네일 무비클립이 많이지만 버벅거리는 현상이 생길듯...^^;; 감사합니다.

  • hansim 2007.05.02 10:50 신고 ADDR 수정/삭제 답글

    글쎄요. 네이버의 경영철학이 폐쇄적인 것에는 저도 공감합니다만,
    이러한 제한은 Daum OPEN API 쿼리 제한수와 같습니다.
    별도의 신청(제휴신청)을 통해 쿼리수를 늘릴 수도 있습니다.
    Last.fm이나 msn검색같은 외국 OPEN API도 네이버만큼은 아니지만 제한을 갖고 있는 것로 알고 있습니다.

    • jasu 2007.05.02 13:02 신고 수정/삭제

      네이버에 종사하시는 분이신가봐요...^^ 5000쿼리는 사실 개발하는 입장에서는 시도 자체를 할 수 없게 만드는 제한이 아닐까 생각되요. 실시간 검색순위를 서비스 하기 위해서는 적어도 분단위만이라도 쿼리를 날려야 할텐데 말이죠... 그냥 간단하게 개발해 보고 서비스는 할 수 없다는 것과 같지 않을까 싶네요...
      국내 포탈사이트에서 open api를 통해서 얻으려고 하는 것이 과연 무엇인가를 생각해 봤습니다. ^^

  • 2007.05.03 16:34 ADDR 수정/삭제 답글

    비밀댓글입니다

    • jasu 2007.05.03 22:46 신고 수정/삭제

      안녕하세요...
      http://www.flickr.com/services/api/
      이곳에 가시면 각 언어별로 Flickr API를 이용할 수 있도록 소스를 제공하고 있습니다. 이곳에 가셔서 샘플을 다운 받으시면 될 것 같습니다. 감사합니다.

  • joon 2007.05.08 23:04 신고 ADDR 수정/삭제 답글

    헉 ! 고맙습니다...
    디자인도 멋지고 무설치에 가볍네요.감각이 멋집니다.
    잘쓰겠습니다

  • 최강쥐으니 2007.05.09 15:56 ADDR 수정/삭제 답글

    오~머찌십니다..^^
    계속계속~업그레이드!^^
    웹에서도 그냥 쓸수있었으면 좋겟어요..ㅋ~

    • jasu 2007.05.10 00:08 신고 수정/삭제

      웹에서 하려면 기능 적인 부분의 수정이 불가피해서 그냥 패스....쿠쿠

  • 2007.05.22 19:09 ADDR 수정/삭제 답글

    멋있습니다. 저는 집이인터넷이 안되는데... 걍 피시방에서 써야지.ㅋㅋ 정말 대단합니다.
    저도 여러가지를 배우고 싶은데 머리가 굳은건지 어찌된건지. 어느때부터인가. 전혀 회전이 안됩니다. 그냥 뒤돌아볼때 말고는... 나이가 불혹이라서.

  • 2007.05.22 19:13 ADDR 수정/삭제 답글

    한가지 궁금한게 있어서 몇달에 걸쳐서 여러군데 게시판에 질문을 올렸지만 아직 완전한 답을 얻지못한게 있어서 여기에 함 질문해볼께요....
    엑티브 사용안한 홈피에서 템플라지 폴더에 캐쉬 파일 안남게하는거 어떻케 하는 거죠?
    일부 해답들중에는 메타태그나 PHP에서 헤드함수인가 하는걸로 노캐쉬라고 설정하면 된다해서 해봤지만 다 허당이더라구요. 방법좀 아시면 답글 부탁드립니다.
    언제나 발전하는 자수님을 더욱더 기대하며...

    • jasu 2007.05.22 23:50 신고 수정/삭제

      먼저 말씀 감사합니다.
      기본적으로 템프폴더에 파일이 남게 되는 이유부터 생각해보면 템프폴더에 파일이 남지 않을 방법이란 없습니다. php에서 노캐쉬 설정으로 하는 것은 파일을 남기지 않는 것이 아니라 기존에 다운 받은 파일을 계속 사용하지 않고 접근할 때마다 새로 받아온다는 것이기 때문에 님이 목적하는 방법과는 다른 의미입니다.
      저도 플래시의 swf파일을 남기지 않기 위한 방법에 대해 생각을 해보았습니다만 딱히 완전한 대안은 없습니다. 남기지 않을 파일을 디비에 저장을 하고 그 디비에 접근을 허용한 경로를 통해서만 접근할 수 있도록 하는 방법이 있다고 하지만 그 과정이 불편할 것 같고 제가 확인해 본바가 없기 때문에 자세한 설명은 못드리겠네요…
      남기지 않아야 할 파일이 swf파일이라면 swf파일의 스크립트를 알아볼 수 없도록 만들어 주는 프로그램도 있고 디컴파일러로 열 수 없도록 해주는 프로그램도 있습니다. 하지만 항상 이 둘은 버전업을 통해서 진화를 하기 때문에 어느 시점에서는 무의미한 방법일 수 있겠습니다.
      제가 착안한 방법 아닌 방법은 확장자명을 강제로 다른 확장자로 사용하는 방법입니다. 웹에서 불러오는 파일들은 확장자로 파일의 형태를 인식하는 것이 아니라 바이트 형태로 인식을 하기 때문에 확장자가 다른 확장자라고 하더라도 실행하는데 문제가 없습니다. 따라서 swf파일을 php확장자로 변경을 하여 사용하여도 문제가 없으며 템프폴더에 저장되는 파일명은 php확장자를 가진 파일이기 때문에 표면적으로는 swf파일이 아닌 것으로 인식할 수 있겠죠…문제는 이것 또한 근본적으로는 파일이 저장이 되고, 그 파일 크기와 날짜가 명시되기 때문에 유추해서 찾아낼 수 있는 방법입니다.
      길게 설명을 드렸지만 결론적으로는 확실하게 파일은 원천적으로 로컬 템프폴더에 남기지 않을 수 있는 방법은 없을 것 같습니다.

블로그의 올플래시 페이지 infinite 메뉴 추가

Project/Web 2007. 4. 15. 02:26
예전 방문자 카운터 기능을 추가하면서 생각한 것이 있었다. div로 iframe을 잡고 상위 레이어를 올리면 올플래시 형태의 페이지를 만들 수 있을 거라는 생각에서 시도해 보았다.

이 구조를 넣으면서 여러가지 문제점이 생겼는데 문제점들은 아래와 같다.


1. 자바스크립트에서 플래시로 값을 넘겨주기 위해서는 플래시에서 ExternalInterface 클래스를 사용하게 된다. 이 클래스를 이용하면 html에 삽입된 javascript와 플래시간 상호 지정한 function을 호출할 수 있으며 return값도 전달 할 수 있다.
하지만 배경 화면에 해당하는 플래시에서 티스토리 스킨에 제공하고 있는 skin.html안에 삽입된 자바스크립트를 호출하는 것은 가능하나 그 자바스크립트에서 플래시로 값을 넘겨주지 못하는 문제점이 있다. 아마도 크로스 도메인 문제인 듯 싶다.

하루정도 고민 하다가 결국은 우회하기로 결정했다. 일단 하단에 있는 메뉴플래시에서 infinite 버튼을 클릭할 시에 상위에 있는 레이어를 display = block을 적용하고 플래시의 LocalConnection을 이용하여 레이어 안에 있는 플래시와 통신을 하는 방법이다.
여기도 또다시 문제점이 발생했는데 하위 플래시에서 레이어를 살리는 동시에 상위 플래시와 통신을 할 경우에는 기존에 있던 플래시가 포함된 레이어가 작동을 정지하면서 제대로 호출해주지 않는 문제가 발생했다. Display를 대신해 visibility을 이용해 보았지만 마찮가지였다.

상위 레이어가 살아났을 때 플래시에 레이어가 나타났다는 메시지를 전달함으로써 infinite의 초기 시작 모션을 적용해야 하는데 그 문제가 해결되지 않아서 발생하는 문제점이다.

익스플로러와 파이어폭스 두 브라우저에서 테스트해본 결과 두 브라우저 간의 약간의 차이가 발생했다.

그래서 LocalConnection으로 플래시간 통신을 하되 약간은 딜레이 타임을 적용하기로 하고 레이어를 살리고 초기 시작 모션들 들어가기 전에 0.5초간 로딩바를 보여주는 형태로 LocalConnection의 문제점을 해결했다. 사실 해결이라기보다는 궁여지책이다.


2. 두번째 문제는 익스플로러와 파이어폭스의 호환 문제다. document.all는 IE에서만 먹는 코딩 방식이라는 것을 알게 되었다.
보 통 IE에서 div의 style이나 레이어에 접근하기 위한 접근자 방식을 document.all.ID.style.display이런 형태로 썼는데, 이러한 코딩방식은 파이어폭스나 타 브라우저에서는 먹히지 않는 방식이다. MSDOM에서만 사용하는 것이며 W3C에서도 권하지 않는 방법이라고 한다. 우리나라의 경우는 90% 가량이 IE를 사용하고 있는 상황이기 때문에 IE를 사용하고 있다면 별 문제가 되지 않겠지만 타 브라우저를 사용하는 사용자에게는 치명적인 문제를 발생시킨다. 공든 탑이 이러한 표준 문제에서 무너질 수 있다.

W3C에서 권장하는 표준형은 document.getElementById("ID").style.display 이러한 형태로 접근하는 것이다.


3. 세번째 문제는 티스토리에 로그인한 상태에서 블로그에 접근했을 때는 오른쪽 상단에 티스토리 툴바가 보이게 된다.  테스트 과정에서 레이어의 index값을 아무리 올려도 상위에 있는 레이어보다 티스토리 툴바가 상위에 떠있는 것이다. 그래서 블로그 소스를 뒤져보니 상위에 뜨는 툴바의 index값이 무려 1000000라는 사실… 그래서 상위에 뜨는 레이어의 index 값을 1000001로 잡아서 해결했다.


4. 네번째는 문제라기 보다는 레이어를 올리는 과정에서 생겨난 부가적인 노동이다. 블로그에서 음악이 흘러나오도록 play를 시켜놓은 상태에서 infinite 페이지로 들어갔을 때는 끄고, play되고 있던 사용자라면 다시 나올 때 play를 시켜주는 것이다. 그리고 음악을 듣지 않고 있던 사용자라면 그대로 음악이 흘러나오지 않는 기능을 추가해야 했다. 그리고 블로그의 배경에서 랜덤으로 생겨나는 나비의 움직임이 infinite 페이지를 접근했을 때에 불필요하게 CPU의 낭비를 가져오고 있어서 infinite메뉴로 들어갔을 때는 나비들이 생성하지 않도록 interval을 clear시켜주고 다시 블로그로 나갔을 때는 생성하도록 설정해 놓았다.


Infinite메뉴를 추가하면서 가장 큰 문제는 자바스크립트에서 플래시로 통신하기가 어렵다는 것이 가장 큰 문제였던 것 같다. 일단 지금은 LocalConnection을 이용하여 플래시 간에 주거니 받거니 하고 있으니 나중에 알게 되면 수정해야 겠다.

Infinite 메뉴는 아직 구체적은 내용 구성과 구현 방법에 대해서는 생각해 둔 것은 없다. 일단 블로그에서 새로운 시도를 해본 것이고 캠버스에 어떤 것들을 담아갈지는 앞으로 시간 날 때 고민해 봐야 하겠다.

사용자 삽입 이미지


    

설정

트랙백

댓글

  • 2007.06.23 22:31 ADDR 수정/삭제 답글

    비밀댓글입니다

루이까또즈 브랜드 사이트

Project/Web 2007. 3. 27. 00:48
사용자 삽입 이미지

루이까또즈 브랜드 사이트의 장점
루이까또즈는 사용자 중심으로 설계하려고 노력했다.
 
사용자 삽입 이미지

기본적으로 메뉴 구조라고 한다면 위와 같이 단일 메뉴, 순차적 메뉴, 트리 메뉴, 네트웍 메뉴 등으로 나눌 수 있을 것이다. 각각 특정 메뉴로 접근하는 방식에 차이가 있다. 웹은 기본적으로 이러한 여러 가지 메뉴 구조를 복합적으로 사용하고 있는데 루이까또즈는 이러한 메뉴구조를 좀더 다른 방식으로 접근한 형태이다.

루이까또즈의 경우는 기본적으로 트리 메뉴구조를 가지고 있으며 네트웍 메뉴 구조로 접근이 가능하다. 이를 다른 형태로 표현하면 아래와 같은 형태로, 사용자는 원하는 특정 페이지로 다이렉트 접근이 가능하다.
 
사용자 삽입 이미지

이런 형태는 자칫하면 사용자가 현재의 위치를 파악하지 못하는 문제점이 발생할 수 있는데 루이까또즈는 이러한 문제점을 해결하기 위해서 사용자가 새로운 페이지로 접근을 시도할 때 하나의 규칙을 만들었다.
 
사용자 삽입 이미지

SiteMap을 보면 1뎁스와 2뎁스 모두를 세로 직렬로 배치하여 현재 위치에서 원하는 페이지로 이동할 때 컨텐츠들은 위에서부터 아래로 정렬되어 있다는 것을 사용자가 학습할 수 있도록 모션을 적용하였다.

예를 들면 현재 AD CAMPAIGN에서 HISTORY 메뉴로 이동시 현재 컨텐츠는 위로 올라가고 HISTORY 컨텐츠는 아래에서 위로 올라오게 된다. 반면 HISTORY에서 WEBZINE 페이지로 이동시에는 현재 페이지는 아래로 내려가고 WEBZINE 페이지는 위에서 아래로 내려오게 함으로써 사용자가 현재 위치에서 원하는 위치로 이동할 때, 현재의 위치를 파악할 수 있도록 하였다.

로딩바의 형태도 이러한 규칙의 일환으로 위에서 내려오는 컨텐츠의 로딩바는 아래에서 위로, 아래에서 올라오는 컨텐츠의 로딩바는 위에서 아래로 채워지게 된다.

루이까또즈에서 가장 중요한 컨텐츠인 Collection은 로딩의 순서가 왼쪽에서 오른쪽으로 이루어지며 전체 로딩이 어느 정도 진행되었는지를 사용자가 알 수 있도록 메뉴 아래에 상태를 표시하고, 사용자가 특정 메뉴의 이미지를 먼저 보기위해 접근을 시도하면 해당 이미지를 개별적으로 로딩함으로써 사용성을 높이고자 했다.

루이까또즈 브랜드 사이트의 구조는 아래와 같은 형태로 사용자가 인지할 수 있을 것이다.
 
사용자 삽입 이미지


사이트의 단점
루이까또즈는 사용자 중심의 UI로 접근을 하였기 때문에 페이지 전환시 획일적인 모션 적용으로 인하여 다소 각 컨텐츠의 재미요소가 미흡한 단점이 있다. 이는 각 페이지로 넘어갔을 때 그 페이지에 고유의 모션을 통해서 어느 정도 해소할 수는 있겠으나 그런 과정에서 기존의 컨셉트에 부합되지 않는 문제점도 발생할 것으로 예상된다.

* 정해진 일정으로 빠듯하게 작업을 진행하였으나 클라이언트의 자료수급이 제때 이루어지지 않아 오픈 시일이 연기되었고, 클라이언트의 개인적인 취향에 따른 수정과 일관성 없는 요구사항으로 인하여 전체적인 컨셉트를 훼손하는 결과를 낳았던 것 같다.

항상 이런 부분들은 아쉬움을 남기지만 갑과 을의 관계에서 진행되는 프로젝트이므로 어쩔 수 없는 아쉬움이 아닌가 싶다.

http://www.louisquatorze.co.kr/

    

설정

트랙백

댓글

  • K군 2007.03.28 12:17 ADDR 수정/삭제 답글

    전 디자인도 디자인이지만, 편리성을 위해 사이트맵을 주로 이용하지요.
    포스팅과 상관없을려나?

    • jasu 2007.03.28 20:40 신고 수정/삭제

      ^^ 편한 사이트는 불편한 사이트보다 자주 들리겠죠...^ 저도 그렇구요...

  • rookiemodel 2007.04.10 19:58 ADDR 수정/삭제 답글

    종종 뜬금없는 인사'를 드리곤 하는 주진용입니다.
    이번에는 짧막하니 흔적 남겨두고 가네요/ ㅎㅎ
    구경 잘 하고 갑니다 자수님 ^^

    • jasu 2007.04.10 22:49 신고 수정/삭제

      안녕하세요...^^ 요즘 MSN을 잘 사용하지 않네요... 이렇게 글을 남기시는 것을 보면 앞으로 쭈욱 사용하지 않는게 좋을까...생각중입니다. ^^
      감사합니다. 요즘은 시간이 없어서 개인적인 놀이를 소홀히 하고 있다는 생각이 드네요... 뭔가 꿂틀거리고 선명하지는 않으나 아이디어가 있는거 같기도 하고 분출할 수 있는 구멍을 뚫어야 겠습니다.

라이브플렉스

Project/Web 2007. 3. 4. 03:27
사용자 삽입 이미지


작년 말쯤에 오픈란 라이브 플렉스, 화면에 나타난 오브젝트들이 스테이지 사이즈에 따라 유동적으로 좌표를 찾아 가도록 만들었다.

http://www.liveplex.co.kr/


    

설정

트랙백

댓글

Dcaland.com - 사진 갤러리사이트

Project/Web 2007. 3. 3. 03:30
Dcaland.com 사진 갤러리 사이트

이 사이트는 개인적인 취미인 디카 생활을 하면서 모아온 사진을 웹에 올리고자 만들었던 사이트다 이미지를 클릭했을 때 사진이 나타나는 모션을 만들고 그것을 어떻게 활용해 볼 방법이 없을 까 해서 만들게 되었다.

플래시8에서 추가된 FileReference 클래스를 이용하여 이미지 업로드를 지원했으며 모든 구성요소들이 현재 화면의 크기에 따라 유기적으로 위치를 잡고 사이즈를 조정하게 만들었다.

이 사이트 또한 나에게 여러가지 재미를 준 고마운 녀석인데 만들고 나서 언제나 그랬듯이 관리가 안되었던 것 같다. 추가적인 기능과 보완할 것들을 정리하고 수정해야 하는데 회사일이 그렇다보니...

http://www.dcaland.com
사용자 삽입 이미지

    

설정

트랙백

댓글

  • 쿵야 2007.03.04 01:02 신고 ADDR 수정/삭제 답글

    정말 멋집니다+ㅁ+!!!
    우와.....
    공부겸 만드셨다니 존경스럽습니다.ㅠ_ㅠ

    • jasu 2007.03.04 02:03 신고 수정/삭제

      혼자 집에서 놀꺼리가 별로 없어서 그런거 같아요...^^ 개인적으로 공부하고 연구하고 만드는 것들은 실무에서 활용을 많이 하니까 도움이 많이 되죠....

      내가 하는 일에 대한 열정과 재미가 없으면 개인적인 시간에 이런 것을 만드는 것 자체가 일이 될수밖에 없는 일인 듯 싶어요...쭈야님도 자신이 진정 원하는 일이 무엇인자를 찾아봐요... 늦었다는 생각을 하는 시기가 가장 빠른 시기일 수 있답니다. ^^ 참고로 전 원하는 일이 무엇인지는 28 나이에 알게 되었답니다.

  • 비룡포크 2007.03.13 11:08 ADDR 수정/삭제 답글

    오! 대단합니다. ^^ 참~ 프로그램도 잘하는거 같고- 색감각도 아주 뛰어납니다.
    주로 외국 사이트에서 느꼈던 창의성도 느껴지구요. 눈도 편하게 좋네요. ^^
    앞으로 이분야에 대성할 분이란 느낌이 드네요. 그럼, 앞으로도 종종오겠습니다.
    좋은 활동 부탁드려요! 다시한번 좋은 싸이트를 알게되서 감사합니다. ^^ 수고하세요!!

    • jasu 2007.03.13 19:42 신고 수정/삭제

      좋게 봐주시니 감사합니다.
      저도 아직 공부할 것도 많고 익혀야 할 것도 너무 많은 나이네요...^^ 아직은 젊으니 안주 보다는 도전적인 생활을 해야 겠지요...지켜봐 주세요...^^ 감사합니다.

N-collection.com 개인 사이트

Project/Web 2007. 3. 3. 03:18
2005년 연말쯤에 만들었던 개인 홈페이지

이 사이트는 개인적인 포트폴리오 관리와 사진 갤러리를 통해 취미 활동을 하기 위해 제작하였다. 전체적으로 심플한 디자인과 CPU와 용량에 신경을 썼지만 관리가 제대로 되지 않았다.

항상 개인 홈페이지를 만들때면 잘 가꾸어 나가겠다고 하지만 회사 일들과 개인적인 생활을 하다보면 관리가 제대로 되지 않는다. 그래서 지금은 그냥 사용하기 편하고 유지 관리가 편리한 블로그를 활용할 생각이다.

이 사이트의 마지막 메뉴에는 탱크 게임을 만들어 놨는데 플래시툴을 개발했던 매크로미디어의 마지막으로 진행한(지금은 Adobe가 인수) MAX 2005 Korea에서 강연을 했던 스피커가 만든 게임을 보고 나름대로 비슷하게 만들어 봤었다.

http://dicaland.cafe24.com/nc_project/main.html
사용자 삽입 이미지



    

설정

트랙백

댓글

  • laballade 2007.03.04 08:23 ADDR 수정/삭제 답글

    홈페이지 정말 멋지네요..누가 추천해줘서 예전에 한번 방문한적이 있었는데...
    이제 블로그활동만 하시는 군요.

    • jasu 2007.03.05 01:38 신고 수정/삭제

      안녕하세요...
      언제 제 홈페이지에 방문하신 적이 있으신가 보네요 ^^ 반갑습니다. 블로그를 활용하고 있지만 글세요...또 언젠가 필 받고 개인적인 홈페이지를 구상할지도 모르겠네요...^^ 그 전에 여자친구 생긴다면 블로그 활동만 할 것 같네요 ^^;

Adatto 사이트

Project/Web 2007. 3. 3. 02:50
2005년 9월 5일 오픈한 아다또 사이트

이 사이트는 웹에이전시에 근무한지 6개월이 지난 시점에서 처음 혼자서 플래시 부분을 담당하여 작업했던 사이트다. 지금 보면 여러가지로 미흡한 부분이 많이 보이지만 3일도 안되는 작업 일정동안 나름대로 노력했던 기억이다. 이 사이트는 월간 w.e.b 2005년 10월호에 Site of the Month로 선정되기도 하여 나에게는 의미있는 사이트가 되었다.


http://www.adattorelax.com/main.html






사용자 삽입 이미지


    

설정

트랙백

댓글

ImagePuzzle Game Project

Project/Programming 2007. 3. 3. 02:13
*  대학교 시절 졸업년도에 만들었던 게임이다. 퍼즐 게임에 대한 어떠한 자료도 없이 그냥 퍼즐게임을 해보고 초등학교 문방구에서 파는 퍼즐 놀이기구(?!)를 사다가 로직을 어떻게 설계할 것인가를 고민하며 만들었던 것이라 많은 애착이 있는 자료다.

어 플리케이션으로서 그럴듯 하게 디자인도 해서 넣어보고 게임의 순위도 사용자 컴퓨터에 저장할 수 있도록 하였고, 무엇보다도 이미지는 프로그램상에 존재하는 것이 아니라 사용자 컴퓨터에서 이미지를 검색하여 그 이미지를 사용하여 게임을 진행할 수 있도록 한 점이 특징이다, 이때 이미지만을 축출하여 리스트로 표현하는 로직을 구현할 때 재귀함수를 사용하여 하위 디렉토리를 탐색하는 방식을 사용했는데 그때 아마도 재귀함수의 짧은 코드로서의 단순성에 반해 엄청난 결과를 창출한다는 것을 알게 되었는데 속도 면에서는 영 마음에 들지 않았던 기억이다.

아무튼 이 게임 하나 만든다고 학과 컴퓨터실에서 알바를 하며 밤 늦게까지 혼자만의 재미에 푹 빠져 살았던 시절이 그립기도 하다. 물론 지금도 그런 놀이속에 살고는 있지만...

뭐.. 누가 그랬던가 돈이 있어도 지하철을 타는 것과 돈이 없어서 지하철을 타는 것은 모두 지하철을 탄다는 것은 같으나 그 마음은 다르다고.... 아마도 그 재미는 비슷하나 그때의 젊음속에서 느꼈던 것과는 다른 것 같은 생각이 든다. 아무래도 돈과 관련이 있는 것과 나이와 관련이 있는, 이 두가지 때문이 아닐까...쿠쿠

사용자 삽입 이미지

game_project.ppt

프로젝트 프리젠테이션


imagepuzzle.exe

게임 인스톨 파일


위 프로그램을 실행하기 위해서는 JDK 1.2이상 버전이 설치되어 있어야 합니다.









    

설정

트랙백

댓글

  • 쿵야 2007.03.04 01:04 신고 ADDR 수정/삭제 답글

    자바공부하고 있는데 정말 도움이 많이 됩니다+ㅁ+
    감사합니다(__*)

    • jasu 2007.03.04 02:05 신고 수정/삭제

      도움이 될만한 자료는 아니에욧 ^^ 제가 어설프게 설계를 하고 공부를 한지라 코드를 보면 난감합니다.
      코드를 보면 열정만 가득히 묻어나지 기술과 노하우는 전혀 없는지라.... ^^

Artificial Intelligence(Max-Min CRI of Fuzzy System)

Project/Programming 2007. 3. 3. 01:44
구현시 느낌점

※ 이 프로그램에서는 결론부에서 6개의 버튼을 일일이 CLICK해 봄으로써 해당 조건부의 Y값으로 결론부의 범위를 자르게 하였습니다. 이유는 처음에는 조건부의 6개의 버튼중, 또는 비 퍼지값을 임의로 넣었을 때 입력값에 의하여 조건부에 그려짐과 동시에 결론부에도 일괄적인 처리를 통해서 그림을 뿌려지게 하려 하였으나 Paint 메소드가 컴퓨터 내에서 스레드의 형태로 화면에 그림을 뿌려주기 때문에 순차적인 접근으로 일괄적으로 결론부의 그림을 화면에 모두 뿌릴수 없었습니다. 그래서 다소 번거롭지만 각각의 조건부에 해당되는 결론부를 처리할 때 해당되는 결론부 버튼을 클릭함으로써 값을 얻게 하였습니다.

※ 결론부의 잘려진 그림을 그릴 때 직선의 방정식을 이용하여 각각의 X 또는 Y 좌표의 포인트를 계산하려 하였으나 컴퓨터 화면상의 픽셀은 세로, 즉 Y 픽셀은 위로 갈수록 값이 작아지기 때문에 직선의 방정식을 그대로 이용하면 원하는 픽셀의 결과를 얻을 수 없었습니다. 그래서 X를 구하기 위한 식 x=( ((x2-x1)/(y2-y1))*(y-y1) )+x1 의 식을 변형하여 y2와 y1의 위치를 변경하여 시도를 해 보았으나 그것 역시도 주어진 y값에 의해서 원하는 x픽셀을 찾지 못하였습니다. 이 과제에서 주어진 조건은 극히 제한적이기 때문에 y값이 0.25,0.5, 0.75, 1.0을 갖을 때를 switch문을 이용해서 x값을 찾도록 하였습니다.

※ 잘려진 결론부의 그림들을 모두 합하여 y좌표의 max값을 통한 x좌표의 회전값을 이용해서 무게중심을 구해야 합니다만 잘려진 각각의 도형들의 선들이 만나는 지점을 찾는 것이 어려웠습니다. 처음부터 직선의 방정식을 이용해서 잘려진 부분의 x값을 찾을 수 있었다면 약간의 조건문과 반복문으로 max 값만의 line을 축출할 수 있었을 텐데 저는 그렇게 하지 못하여 각각의 잘려진 부분의 무게중심들을 구하여 모두를 더한 값을 잘려진 부분이 있는 결론부의 수로 나눈 값을 최종 결과값으로 출력하도록 하였습니다.

※ Max-Min CRI 알고리즘의 개념은 극히 단순하지만 그것을 프로그램으로 구현하는 과정은 어려웠습니다. 특히 수학의 직선의 방정식과 컴퓨터의 픽셀을 연결하는데 연구가 필요하다고 느꼈습니다.




* 대학교 시절 인공지능 시간에 만들었던 퍼지 알고리즘 객체지향 언어의 장점을 활용하지 못하고 무작정 손가락 가는대로 만들었던 것 같다.
사용자 삽입 이미지
<초기 실행시 화면>

사용자 삽입 이미지
<조건부 2의 버튼을 눌렀을 때의 화면>


사용자 삽입 이미지
<비퍼지값 3을 입력 하고 Setting을 누르고 결론부 1부터 6까지 누른 상태 화면>


사용자 삽입 이미지
< Max-Min Result 버튼을 누른 상태 화면>



사용자 삽입 이미지





    

설정

트랙백

댓글

  • basha2er 2007.10.22 04:40 ADDR 수정/삭제 답글

    jdkjf

  • basha2er 2007.10.22 04:41 ADDR 수정/삭제 답글

    please i want to send me project about artificial intellegince

Multipayer Perceptron(EBP 알고리즘 구현 프로그램)

Project/Programming 2007. 3. 3. 01:25
구현 과정
프 로그램 구현 과정에서 처음에는 5 by 5픽셀로 설정을 하여 패턴을 입력한 결과 숫자들이 서로 비슷한 픽셀 안에서 학습을 하기 때문에 학습율이 저조한 편이었습니다. 그래서 픽셀의 수를 7 by 7로 하여 구현해 보았습니다. 앞의 5 by 5 픽셀에 비해서는 좀더 나은 학습율을 보였지만 이것 마저도 학습율은 만족스럽지 못했습니다. 그래서 다음에는 픽셀의 수를 7 by 8로 가로 세로의 픽셀수를 다르게 하여 총 입력 노드수를 56개로 패턴을 결정하고 노이즈 패턴을 입력한 결과 앞의 픽셀보다는 나은 결과치를 얻을 수 있었습니다.
 이 과정에서 한가지 알수 있던 것은 10개의 패턴들이 1로 세팅된 수가 많으면 많은 수록 학습율은 떨어졌으며 0인 부분 즉 패턴에서 색깔이 칠해지지 않은 부분이 많은 10개의 패턴의 학습율은 크게 향상되는 것을 알수 있었습니다.
 그리고 에타의 값과 초기의 가중치값의 변경에서도 학습율이 변동되는 사실을 입증할 수 있었습니다.

프로그램 설명
 EBP 알고리즘으로 구현한 제 프로그램은 패턴의 픽셀 수(가로, 세로)와 히든 노드의 수,에타값, 웨이트을 프로그램 구동 중에 수정할 수 있도록 하였으며 10개의 패턴의 픽셀을 마우스로 클릭하여 임의의 패턴들을 만들어 노이즈패턴을 입력 결과를 확인할수 있도록 하였습니다.

프로그램 버그, 및 문제점
1.)이 프로그램의 입력 노드는 총 56개인대 반하여 패턴의 수가 10개이기 때문에 입력노드의 15% 벗어나는 패턴들을 학습하였기 때문에 학습율이 보다 작은 패턴으로 학습하는 것보다는 저조할 수 있습니다.

2.> 프로그램의 패턴의 픽셀 수를 프로그램 구동중에 수정할 수 있도록 하였으나 자바 언어에서는 배열의 값을 초기 세팅할 때 초기 선언 부분에서만 가능하여 7 by 8의 배열 범위를 넘는 필셀의 수를 입력하였을 경우에는 ArrayIndexOutOfBoundsException에러를 냅니다. 그래서 초기 배열의 값을 넣을 때 뒤에 20개의 공간을 추가하여 사용자가 7 by 8이상의(가로*세로 20이하) 픽셀을 입력하였을 경우에도 프로그램에 에러가 나오지 않도록 보완하였습니다.

3.> EBP 알고리즘의 학습의 끝을 모든 가중치가 0에 가깝거나 가중치의 차이가 거의 없을 때까지 반복 학습을 해야하는데 반하여 제 프로그램의 학습의 끝은 카운트로 설정을 하였습니다. 픽셀의 수를 고정했을 경우에는 차이의 최소 값을 셋팅할 수 있지만 사용자가 임의로 픽셀의 수를 셋팅하게 만들었기 때문에 그 기준에 문제점이 있었습니다.


* 대학교시절 인공지능 수업을 들으면서 실습 과제로 제작했던 EBP 알고리즘 프로그램.
사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지



 

    

설정

트랙백

댓글

  • 2008.06.18 23:50 ADDR 수정/삭제 답글

    비밀댓글입니다

    • jasu 2008.06.25 03:02 신고 수정/삭제

      안녕하세요
      저도 대학 시절에 수업시간에 실습 과제로 했던 것들이기 때문에 지금은 그 개념 조차도 아리송 하네요 ^^; 충분한 도움이 되지 못해서 죄송합니다.

      서점에서도 인공지능 관련 책들이 많이 나와 있으니 서점에서 한번 훑어 보시는 것도 좋을 것 같네요 인터넷에 찾아보면 대부분의 자료들은 찾으실 수 있을거에요

[UI&C] Crop BitmapData

Project/UI&C Lab 2007. 2. 21. 11:03
이번에는 BitmapData를 이용하여 특정 무비클립을 bitmap으로 전환하고 다시 무비클립으로 되돌리는 클래스를 제작한 이후에 재미난 기능을 추가했다.

플래시 8의 bitmapData 클래스가 아니라면 예전에는 상상도 못할 구현이 가능해졌다. 플래시로 만든 마술이라고 해야할까...;;

사용자 삽입 이미지

위에 보이는 이미지는 중앙에 있는 crop 버튼을 누르게 되면 현재 화면에 보여지고 있는 오른쪽 네비게이션을 포함한 화면에 보여지는 모든 무비클립을 하나의 BitmapData로 전환하고 기존에 있던 무비클립을 visible = false를 적용한다. 이렇게 하면 화면에서 event가 발생하는 모든 것들은 bitmapData로 전환되기 때문에 작동하지 않는다.

여기서 화면에서 특정 좌표에 마우스로 클릭하고 사각 박스를 드레그하여 영역을 잡게 되면 그 영역을 새로운 bitmapData로 전환하여 무비클립을 생성하게 되는데 그 무비클립을 마우스로 press and drag하면 그 부분만 따로 분리하게 만들어 졌다. 화면에 보여지는 것처럼 rectangle로 선택한 영역을 따로 분리되는 것을 볼수가 있다.

ctrl 키를 누르게되면 순차적으로 다시 제자리로 되돌아간 이후 기존에 있던 무비크립으로 대체된다.

사용자 삽입 이미지

이것은 위의 것을 조금 응용한 모션이다. 중앙에 있는 crop 버튼을 누르게되면 화면에서 random 좌표의 사각 박스가 화면에서 분리되어 위로 올라가게 된다. _y값 모션에서 blur 필터를 적용하였다. 모두 올라간 이후에는 ctrl 키를 누르면 다시 각각의 영역이 자신의 자리로 되돌아 오게 된다.

이번 아이디어의 구상은 처음 원하는 무비클립을 bitmapData로 전환하고 되돌리는 클래스를 제작한 이후에 파생된 모션 형태이다. 이것은 많은 부분에서 활용도가 높을 것으로 예상된다. 예를 들면 처음 모션이 이루어진 이후에 더이상 움직임이 없는 배경의 경우는 이렇게 bitmapData로 전환하게 되면 모션을 주기 위해서 생성했던 많은 무비클립들을 하나의 무비클립으로 대체할 수있어 리소스 낭비를 줄일 수 있는 점이 있을 것이고, 화면전환효과에서 이를 활용하면 다양한 형태의 전환효과를 만들어 낼 수 있을 것으로 예상된다.

    

설정

트랙백

댓글

[UI&C Lab] Clip Navigation

Project/UI&C Lab 2007. 2. 21. 11:02

사용자 삽입 이미지
 
무비클립 생성 화면
 
클립 형태의 네비게이션을 만들어볼 생각으로 만든 기본적인 무비클립 생성이다. 생성된 무비클립들의 _rotation을 통해서 모션을 적용하였다.
 
사용자 삽입 이미지
스케일 조정 화면

사용자 삽입 이미지
네비게이션 무비클립 생성
 
앞에서 만든 기본적인 무비클립 생성을 통해서 각각의 무비클립에 event를 적용하였다.
각 무비클립을 클릭했을 때의 모션으로 선택된 무비클립의 rotation을 0으로 하며 나머지는 특정 rotation값을 적용하고 무비클립이 포함된 무비클립의 좌표를 왼쪽 상단으로 위치시켰다.
Back 버튼을 통해서 다시 펼쳐진 형태로 되돌아 가는데 클릭할 때 적용했던 scale을 그대로 적용함으로서 클릭하기 전의 형태를 유지하도록 하였다.

사용자 삽입 이미지
특정 무비클립 클릭시 모션 적용

사용자 삽입 이미지
컨텐츠 view 화면 back 버튼을 누르면 초기화면으로 모션 적용

사용자 삽입 이미지
네이게이션 무비클립 생성
 

사용자 삽입 이미지
특정 무비클립 클릭시 모션 적용

사용자 삽입 이미지
컨텐츠 view 화면 scale을 통해서 줌인 형태로 화면을 채움

사용자 삽입 이미지
 
BACK 버튼을 눌렀을때 화면으로 되돌아 가는 모션
 
 
clip_navi_2번과 같은 로직으로 구성하였으나 무비크립을 클릭했을 때 무비클립 전체가 scale이 커지면서 보여지는 화면을 채우는 형태로 제작하였다.
이것 또한 2번과 같이 back 버튼을 누르면 기존의 형태로 되돌아 간다.
 
이로써 간단한 _rotation의 Tween을 통한 재미있는 네비게이션이 만들어진듯 하다.
    

설정

트랙백

댓글

[UI&C Lab] Create Random MovieClip

Project/UI&C Lab 2007. 2. 21. 11:01
사용자 삽입 이미지

Create Random MovieClip_1

stage의 특정 random 영역에 무비클립을 생성한다. 생성할 때는 중심점이 되는 new Point(x,y)좌표점을 rnadom으로 설정하므로써 그룹단위로 무비클립을 생성하게 된다. 여기서의 문제점은 무비클립이 많아지면 많아질수록 CPU의 과부화 문제가 발생한다. 노트북에서는 무비클립 300개 이상이되면 그때부터 현저하게 속도 저하가 발생한다.

사용자 삽입 이미지

Create Random MovieClip_2

앞의 버전에서 발생한 CPU 문제점을 BitmapData를 통해서 해결한 버전이다. 생성 방법은 앞과 동일하며 그룹단위(무비클립이 30개 단위로 그룹으로 묶는다 if count%30 == 0)

한 그룹이 완료되었을 때 BitmapData를 통해서 화면에 보여지는 무비클립들을 빈 무비클립으로 생성한 무비클립에 draw하고 생성했던 30개의 무비클립을 remove 시킨다. 그리고 다시 30개의 그룹이 완료되면 또다시 밑에 있는 BitmapData로 그린 무비클립과 새로 생성한 무비클립을 다시 BitmapData로 draw시킨다.

이렇게 진행하면 쌓이는 무비클립이 30개 이상을 넘지 않기 때문에 생성하는 무비클립의 갯수가 무한정 늘어난다고 하여도 CPU의 문제는 없다.

진행을 하면서 오류를 범했던 부분은 BitmapData를 draw시키는 무비클립을 draw 시킬때 마다 새로 생성하지 않고 같은 무비클립에 draw시킬 경우에 기존의 draw시킨 무비클립이 메모리에 쌓이는 문제로 인하여 CPU문제가 그대로 존재한다는 것이었다. 이는 30개 그룹단위로 draw시킨때 같은 depth에 새로 무비클립을 생성하여 기존의 무비클립을 삭제하는 형태로 해결하였다.

BitmapData로 draw시킬때 alpha 값을 50%으로 설정하여 draw시키는 시점과 30개의 무비클립이 삭제되는 시점을 화면에 보여주고 있다

사용자 삽입 이미지
Create Random MovieClip_3
 
앞의 구조와 같다. 앞의 경우는 draw시키는 시점을 alpha = 50으로 보여주었으나 여기서는 Bitmap에 blur 필터를 적용한 것이다.
var filter = new BlurFilter (2, 2, 1);
bitmap.applyFilter (bitmap,bitmap.rectangle, new Point (0, 0) , filter);
 

사용자 삽입 이미지
 
Create Random MovieClip_4
 
앞에서 연구한 결과를 가지고 비주얼적으로 표현할 수 있는 방법으로 이와 같은 형태로 작업을 진행하였다.
 
이것은 앞의 것들과 무비클립의 생성과정은 동일하다. 여기서 해당 무비클립이 그룹단위로 생성할때 자신의 고유색을 가지고 생성을 하는데 그 색은 Shift버튼을 누르면 나타나는 background 이미지의 pixel단위 RGB를 축출하여 적용하였다.이미지의 사이즈가 작기 때문에 앞의 것들보다 무비클립을 작게 하였다.
 
사용자 삽입 이미지
 
Shift 버튼을 눌렀을때 배경을 볼 수 있다.
 
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지

Create Random MovieClip의 가장 중요한 부분은 화면에 나타난 무비클립이 변형되지 않는다는 전제조건이 있을 경우에는 해당 무비클립을 stage에 남겨두는 것이 아니라 remove 시키되 기존의 이미지가 그대로 남도록 BitmapData를 사용하여 특정 무비클립에 draw시키므로써 수많은 무비클립의 생성으로 발생하는 플래시의 전체적인 cpu 문제점을 해소하는 것에 중점을 두었다.
    

설정

트랙백

댓글

  • Dongwook, Kwon 2007.12.28 02:43 ADDR 수정/삭제 답글

    간단하지만 정말 좋은 아이디어고 구현도 감각있게 잘 하셨네요...
    많이 자극 받고 갑니다.

    • jasu 2007.12.28 10:21 신고 수정/삭제

      한참 하나하나 만들어 가는 재미가 있었던 것 같네요 ^^ 생각을 표현하는 자체로 재미가 있습니다.

[UI&C Lab] graph

Project/UI&C Lab 2007. 2. 21. 11:01
예전 모 클라이언트가 그래프를 플래시로 제작하고자하여 만들었던 그래프다. 기본적인 형태는 xml을 로그하여 데이터를 보여주게 되는데 그래프가 나타날때 다이나믹한 모션 효과를 주었다. 시간이없어서 재사용성을 고려하지 않고 만들었던 아쉬움이 있는데 나중에 다용도로 사용할 수 있는 그래프 컴포넌트를 만들어볼 생각이다.
사용자 삽입 이미지


    

설정

트랙백

댓글

  • 난 단지 내가 매우 표준 정보 방문자의 개별 공급 사랑하라는하기 전에 귀하의 사이트를 떠날 수 있을까? 새 게시물을 검사하기 위해 지속적으로 다시있을 건가요

[UI&C Lab] trapezoid navigation

Project/UI&C Lab 2007. 2. 21. 11:00
사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지

trapezoid navigation 은 좌우로 슬라이드되는 형태의 네비게이션을 만들기 위해 만들었는데 여러장을 적용했을 경우 CPU문제가 있어서 잠시 보류중이다. 이것은 무비클립을 좌우로 사다리꼴모양으로 외곡시켜기 중앙에 위치했을 때는 무비클립을 사용할 수 있도록 만들어 졌다.
 
    

설정

트랙백

댓글