Drag & Resize 컴포넌트

작업중인 컴포넌트 하나 올려봅니다. 디자인툴에 많이 사용되죠 드래그하고 리사이징하는 기능인데요..
기본 기능에 몇가지 추가해 보았습니다. 

좌측 메뉴판에서 여러옵션을 줄수 있는데요..
먼저 add 버튼으로 캔버스에 인스턴스를 추가합니다. select 관리부터 시작해 보겠습니다.

Select Test
먼저 마우스에 의한 선택상황 체크를 테스트 해 봅니다. 각 체크박스에 따른 옵션이 따라 버튼을 누르면 적용되어 집니다.
예를 들면 selectedOption=false, selectableOption=true 옵션에 removeAll 버튼을 클릭하면 현재 선택 상황이 아닌 모든 인스턴스가 제거되는 식입니다. selected, selectable 버튼에 대한 설명은 툴팁으로 넣어놨습니다.

Drag Test
드래그 움직임 효과, 드래그 할때 모양 표시, 마그네틱(snap) 효과 옵션 입니다.
인스턴스 먼저 선택 후 (드래그) 동작하는 방식입니다.
Snap Sensitive와 snap mode 로 마그네틱 효과 조절할 수 있구요, SnapToObject Line은 snap mode가 SnapToObject일때만 활성화 됩니다. 말 그대로 라인 표시기능입니다. 두개 이상의 인스턴스가 있을때 확인 가능합니다.
다른건 모양표시라든지 움직임 효과에 대한 것입니다.
인스턴스 생성 위치를 랜덤으로 돌려놨는데 화면 밖에서 생성되서 안보일때가 있네요.

Resize Test 
앵커 핸들 모양과 위치 조절, 리사이징 움직임 효과, 리사이징시 영역 표시 방법, 마그네틱(snap) 효과 옵션입니다. 각 효과는 드래그 할때 말고 리사이징 할때만 적용됩니다. 아래 "강제 크기 변환" 버튼은 마우스가 아닌 코드상으로 사이즈 변경했을때 앵커 등이 잘 적응하는지 테스트(trace) 해보기 위한 용도입니다.

Canvas에 통합
캔버스를 만들어서 테스트 해 보았습니다. 스크롤이 좀 이상하게 되있긴 하지만 드래그와 리사이징은 잘 작동하는듯 합니다. 캔버스만 좀 수정하면 괜찮을듯 합니다.ㅎㅎ;
좌측 옵션은 위에서 봤던것들 입니다. 캔버스는 두개의 Group컨테이너를 겹쳐서 구현했습니다. 아래쪽 Group은 인스턴스 표시용으로 위쪽 Group은 리사이징툴 표시용으로 사용하는데, 리사이징 툴이 컨테이너의 child넘버에 간섭하지 않으면서 항상 인스턴스보다 위쪽에 나타나도록 하기위해 이렇게 해 보았습니다.

아래는 각 SWF의 테스트용 MXML과 SWC파일입니다.
마무리하고 배포할때쯤 되면 개인적으로 신경이 덜 쓰여지기 때문에 정보를 잘 정리해서 공개해야 하는데 항상 이런식으로 공개가 되는군요ㅜㅜ;
소스는 정리되는대로 올리도록 하겠습니다. 일단 사용하실 분은 swc를 이용해주세요


테스트를 위해선 Flex SDK 4.0이 필요합니다.

 [추가]

네이버 개발자 센터 소스가 공개되었습니다.
http://vulcan9.tistory.com/65


저작자 표시 비영리 변경 금지
신고

'Blog > 나의 작업물' 카테고리의 다른 글

Drag & Resize 소스를 공개합니다.  (8) 2010.09.15
Filterable Tree Example  (0) 2010.09.07
Drag & Resize 컴포넌트  (9) 2010.08.23
ebook에 대한 Q&A  (0) 2010.08.12
Docking system 소스 받기  (6) 2010.08.10
Naver 개발자 센터에 Docking system 소스를 공개합니다.  (1) 2010.08.10
TAG
트랙백 ( 0 )개 , 댓글 ( 9 ) 개가 달렸습니다.

Commentary

댓글을 달아 주세요.

  1. Favicon of http://drumcap.tistory.com BlogIcon 드럼캡 2010.08.23 22:35 신고  댓글주소  수정/삭제  댓글쓰기

    ㅎㅎ 이렇게 저작툴을 먼저 공개하시네요 ^^
    지금 열심히 이거 관련해서 만들고 계신가봐요??

    • Favicon of http://vulcan9.tistory.com BlogIcon vulcan 2010.08.24 00:10 신고  댓글주소  수정/삭제

      개인 프로젝트로 진행하고 있는게 있어서 단위 과정마다 마침표찍는 의미로 공개하고는 있지만..
      아무래도 공개방법에는 성의가 부족한거 같다는...ㅎㅎ
      레퍼런스로 문서화라도 시켜서 공개해야 할텐데 좀 게을러서요--;

  2. Favicon of http://diebuster.com BlogIcon hika 2010.09.02 00:32 신고  댓글주소  수정/삭제  댓글쓰기

    플렉스기반의 저작툴을 제작하는 과정은 이미 기저 컴포넌트가 고수준으로 제공되어서 구상 기능에 곧장 집중할 수 있다는 점이 매력적인 것 같습니다.

    대신 제가 만들어 내야 할 여러 가지에는 이 속도가 참 감당할 수 없이 느리긴 합니다만 쨌든 깔끔하고 재밌습니다.

    저희 회사 저작툴도 언제라도 공개하고 싶은데, 공개해도 소용이 없는게 문제라 하겠습니다.

    만드신 저작툴이 flex기반에서만 작동하는 것처럼 제 툴도 동작하려면 제 기저 프레임을 전부 로딩해와야하기 때문에 ^^;

    • Favicon of http://vulcan9.tistory.com BlogIcon vulcan 2010.09.02 11:37 신고  댓글주소  수정/삭제

      해놓으신 작업양이 너무 방대해서 그런걸까요? ㅎㅎ
      AS3.0 기반에서 flex 프로젝트가 출발했던 것처럼 히카님도 히카님의 기본 프레임웍과 그 위에 돌아가는 저작툴을 구분해서 공개하시면 직접적으로는 아니더라도 누군가에겐 분명 도움이 되지 않을까요.
      저는 여러 방면으로 as3의 프레임웍이 늘어난다는것은 그만큼 시장에서 as3 개발자의 입지가 넓어진다는 의미로 받아들이고 있습니다. 예를 들어 as3로 증강현실을 구현할 수 있다는점이 저에게 얼마나 위안이 되는지 모릅니다. 이것은 저나 다른사람이 실제로 이 기술을 쓰냐 안쓰느냐와는 또 다른 문제입니다.
      현재 flex 프레임웍을 사용하는 유저가 많듯, 히카님에 프레임웍을 사용하여(게임쪽인가요?) 훌륭히 어떤 결과를 만들어내는 사람이 한명이라도 생겼다면 그걸로 큰일 하신거라 생각합니다. (아무런 교육비용없이 히카님 프레임웍에 대해 말이 통하는 개발자 한명이 생기는 기적이 일어났습니다.)

    • Favicon of http://vulcan9.tistory.com BlogIcon vulcan 2010.09.04 03:36 신고  댓글주소  수정/삭제

      예를 들어 히카님이 AS3.0으로 플래시게임을 보다 체계적으로 만들 수 있는 프레임웍을 만드셨고,
      이것을 기반으로 게임에 필요한 여러 구현 객체(컴포넌트)를 만드신게 있어서 이걸 다른 유사 게임 제작에 활용도가 뛰어나다면,
      또 국내 플래시 게임 제작 방식이 너무 후진적이고 표현(퍼포먼스)의 한계를 넘지 못해서 정체되고 있다는 느낌이여서 오픈했을때 다른 업체들이 히카님 프레임웍을 차용할것이라는 예상이 있다면,
      나름의 라이센스를 갖춘 후 오픈 하는 방법도 괜찮다고 생각합니다. (아마 영업력이 없는 상태에서 초기 시장을 응수타진 해보기에도 좋겠죠)
      그럼 소스누출은 어떡할거냐? 대부분의 소스누출은 라이센스 위반일 가능성이 높고, 이런것까지 감안해서 소스 누출 이상의 것을 얻을 수있다고 판단될때 해야겠지요.
      공익 이전에 저작권 우선이라는 입장입니다.

      좋은 소스는 어떻게 해서든지 쓸려고 하는게 아니겠습니까..ㅎㅎ

  3. Favicon of http://diebuster.com BlogIcon hika 2010.09.06 11:35 신고  댓글주소  수정/삭제  댓글쓰기

    솔루션 업체로서도 포지션을 확보하고 싶은 생각이야 항상 굴뚝 같습니다 ^^
    단지 오픈소스 또는 솔루션으로 자리 매김하려면 어떤 업계표준 규격으로 만들어야한다는 점이 귀찮고 돈받지 않고는 힘든 부분인 것 같습니다.

    프로토콜이야 확실하게 일관성있지만 그 규격자체가 제 사내 규격방침인 경우가 많고 그게 업계표준과 안맞는 경우도 많기 때문에 그런 부분을 상당히 해소해야 진정한 공개가 가능할 거 같아요.

    도선님도 맨날 보면 범용성있고 다양한 수준의 개발자들이 이용할 수 있는 형태로 솔루션을 구축하는 부분을 항상 고민스러워하시는 것 같고 ^^

    단지 용호씨처럼 팬이 생기면 알아서 그 팬이 제 프로토콜을 받아들여 흡수하시긴 하더라구요 ㅋㅋ

    • Favicon of http://vulcan9.tistory.com BlogIcon vulcan 2010.09.07 02:28 신고  댓글주소  수정/삭제

      개발자가 고생할수록 사용자는 편해진다는 말이 여기에도 통하는군요.
      사실 제가 사용자가 개발자인 경우 "잘 알아서 쓰겠겠지"하고 안이하게 생각하는 경향이 좀 있는것 같습니다.
      결과물이 엔드 유저에게 하듯이 친절해지지 않죠. 표준까지는 생각 못했네요^^

  4. ... 2010.09.08 13:42 신고  댓글주소  수정/삭제  댓글쓰기

    혹시 소스 공개 해주실수 있으신가요?
    정리되는대로 올려주신다고 하셔서 기다리고있는데...
    요즘 플렉스 공부중이라서...참고좀 하고 싶습니다^^;

    • Favicon of http://vulcan9.tistory.com BlogIcon vulcan 2010.09.09 01:31 신고  댓글주소  수정/삭제

      현재 Select 관리를 CollectionView를 통해 하고 있는데 화면에 객체가 100개 정도만 등록되어도 굉장히 버벅거리는 문제가 있어 수정중에 있습니다.
      위 화면에서 add버튼을 마구마구 누른 후 마우스로 선택하면 선택 표시때까지 약간의 시간이 걸릴겁니다.
      설마 아이디가 "..."은 아니시겠죠. 현재버젼이라도 괜찮으시면 연락처 남겨주세요.

Add a Comment

comment에 대한 답변글은 해당 글상자에 있는 "R"(reply)버튼을 클릭하여 작성해 주시기 바랍니다.

티스토리 툴바