[Flex 팁] 윈도우용 마우스 커서를 Flex에서 사용하기 -지돌스타 블로그-

[Flex 팁] 윈도우용 마우스 커서를 Flex에서 사용하기

2007/10/11 10:57

6 Comments

[공지]이미지나 링크가 깨졌다면 댓글 부탁드립니다.

Window XP에서 C:\WINDOWS\Cursors 폴더에 보면 확장자 .cur 을 가진 파일들이 많다.
이 .cur 파일은 Window에서 마우스 커서로 이용되는 것으로 Flex 나 Flash에서 필요할 때 Embed해서 사용하면 아주 유용하겠다. 단, .cur 자체는 Embed를 할 수 없기 때문에 .png로 바꿔주는 작업을 해야한다.
이 작업은 photoshop으로는 안되고 다른 변환프로그램을 사용해야하는데 찾다 보니깐 아주 유용한 프로그램이 있었다.

Advanced Batch Converter 라는 것인데... naver 어느 블로그에서 아래 프로그램이 링크되어 있는 것을 발견했다. keyzen도 있더라... 헤헷~ 아래 주소에 가서 다운로드 받길 바란다.

http://blog.naver.com/essbihan/100010924325

이 프로그램을 이용하면 .cur 파일을 .png로 변환할 수 있다. 그외 다른 형태로도 변환이 가능하겠다.

bmp, jpg, gif, giff, png, tif, jpeg, rle, dib, pcd, icb, ico, wmf, tiff, tga, pcx, scr, emf, jif, vda, jfif, rgb, afi, vst, win, cel, jpe, rgba, pic, pcc, cut, ppm, pgm, pbm, sgi, rla, rpf, psd, pdd, psp, cur, targa, bw, tar, jfi, eps (preview), int, inta, fax, jng, mng, 411, wbmp, wbm, ani, pix, thm, g3f, g3n, jp2, j2k, jpc, jpx, j2c, j, rl4, rl8, sys, tim, g3, tpi, tpic, pnm, pxm, iri, iris, rppm, rpgm, rpbm, rpxm, rpnm, rpp, rpg, rpb, rpx, rpn, bpx, avi, wap

위의 포멧을

bmp, dib, rle, jpg, jpeg, jpe, gif, png, pcx, tga, pcc, tif, tiff, ico, jng, wbmp, pbm, ps, eps, pdf, wmf and emf

으로 바꿔준다.

그럼 한번 윈도우 커서를 Flex에서 사용해보도록 해보자.

앞서 언급했듯이 C:\WINDOWS\Cursors 를 보면 아래와 같은 다양한 커서가 있다. 이중에서 자기가 쓰고 싶은 Cursor를 골라 다른 곳에 복사해둔다.

Advanced Batch Converter를 이용해 해당 커서를 변경하면 된다. File에 Convert를 선택한후 저장파일 형식을 *.PNG (Portable Network Graphics)로 설정한 다음에 저장하면 된다.

그럼 위와 같은 이미지들을 뽑아낼 수 있다.

만들어낸 PNG 커서들을 사용해보자.

새로운 프로젝트를 만들고 assets 폴더를 만들어 위에서 만든 커서를 복사해둔다.
메인 Application 에는 아래와 같이 코딩을 한다.

커서 사용하기 (Language : xml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="init()">
<mx:Style>
Application
{
fontSize:12;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.managers.CursorManager;

[Embed(source="/assets/3dwmove.png")]
private var cursor_3dwmove:Class;

[Embed(source="/assets/3dwnesw.png")]
private var cursor_3dwnesw:Class;

[Embed(source="/assets/3dwns.png")]
private var cursor_3dwns:Class;

[Embed(source="/assets/3dwnwse.png")]
private var cursor_3dwnwse:Class;

[Embed(source="/assets/3dwwe.png")]
private var cursor_3dwwe:Class;

private function init():void
{
StyleManager.setStyleDeclaration(".buttonSkin01", makeStyle("3dwmove",cursor_3dwmove), false);
StyleManager.setStyleDeclaration(".buttonSkin02", makeStyle("3dwnesw",cursor_3dwnesw), false);
StyleManager.setStyleDeclaration(".buttonSkin03", makeStyle("3dwns",cursor_3dwns), false);
StyleManager.setStyleDeclaration(".buttonSkin04", makeStyle("3dwnwse",cursor_3dwnwse), false);
StyleManager.setStyleDeclaration(".buttonSkin05", makeStyle("3dwwe",cursor_3dwwe), true);
}

private function makeStyle( selector:String, cursor:Class ):CSSStyleDeclaration
{
var style:CSSStyleDeclaration;
style = new CSSStyleDeclaration(selector);
style.setStyle("upSkin", cursor);
style.setStyle("downSkin", cursor);
style.setStyle("overSkin", cursor);
style.setStyle("disabledSkin", cursor);
return style;
}

private var cursorID:int = -1;
private function changeCursor( cursor:Class = null ):void
{
if( cursorID > -1 )
{
CursorManager.removeCursor( cursorID );
}
if( cursor != null )
cursorID = CursorManager.setCursor( cursor, 2.0, -10, -10 );
}

]]>
</mx:Script>
<mx:Button styleName="buttonSkin01" buttonMode="true" useHandCursor="true" click="changeCursor(cursor_3dwmove)"/>
<mx:Button styleName="buttonSkin02" buttonMode="true" useHandCursor="true" click="changeCursor(cursor_3dwnesw)"/>
<mx:Button styleName="buttonSkin03" buttonMode="true" useHandCursor="true" click="changeCursor(cursor_3dwns)"/>
<mx:Button styleName="buttonSkin04" buttonMode="true" useHandCursor="true" click="changeCursor(cursor_3dwnwse)"/>
<mx:Button styleName="buttonSkin05" id="btn05" buttonMode="true" useHandCursor="true" click="changeCursor(cursor_3dwwe)"/>
<mx:Button label="원래대로" buttonMode="true" useHandCursor="true" click="changeCursor()"/>
</mx:Application>

아래는 결과이다.

어떠한가? 헷헷~~

관련글

CursorManger 레퍼런스 : http://flexdocs.kr/docs/flex2/langref/mx/managers/CursorManager.html
커서의 작성과 삭제 : http://flexdocs.kr/docs/flex2/docs/00000894.html
StyleManager 클래스의 사용 : http://flexdocs.kr/docs/flex2/docs/00000771.html
flash.ui.Mouse : http://flexdocs.kr/docs/flex2/langref/flash/ui/Mouse.html

글쓴이 : 지돌스타(http://blog.jidolstar.com/244)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Adobe Flash Platform' 카테고리의 다른 글

[Flex] 폰트를 런타임(run time)시 동적으로 불러와 적용하는 방법 (8)	2007/10/12
[Flex] CSS를 Embed 하는 방법과 런타임시 적용하는 방법 예제 (3)	2007/10/11
[Flex 팁] 윈도우용 마우스 커서를 Flex에서 사용하기 (6)	2007/10/11
[Flex] 런 타임(run-time)시 Style sheets 불러오기 (4)	2007/10/09
Papervision3D로 만든 Spaceship Demo (0)	2007/10/09
[Flex] 자잘한 버그를 없앤 말풍선 컴포넌트, 아이콘 컴포넌트 추가 (17)	2007/10/08

Adobe Flash Platform Cursor, CursorManager, flex, 커서

Trackback 주소: http://blog.jidolstar.com/trackback/244

검쉰

2007/10/11 10:56

Reply | Edit

오호.. 커서에 있는 이미지를 png로 뽑을 수가 있군요 ㅋㅋㅋ
좋은 팁입니다. ㅋ
이인준

2007/10/11 11:38

Reply | Edit

헤헷 잘보고갑니다.
허성회

2008/07/07 15:43

Reply | Edit

오~ 느므 좋은데요... 아이콘 만들고 있었는데...ㅠㅠ
퍼가도 되죠??
지돌스타

2008/07/07 17:37

Reply | Edit

네
지돌스타

2009/09/24 19:17

Reply | Edit

ㅎㅎ 그렇겠네요. ^^
조심할께요