티스토리 뷰

 플래시 플레이어가 10.2로 업그레이드되면서 추가 지원되는 API중에 하나가 바로 Native Mouse Cursor입니다. 이전 버전에서는 커서를 구현하기 위해 Mouse.hide()를 사용해 감추고, Mouse의 move이벤트를 잡고, 포지션을 체크해서 대체 이미지를 이동하면서 보여주는 방법을 사용했었습니다.

해서 앱이 많이 느리게 보였고, 사용자의 조작감이 떨어져서 불만이 많았는데요. 10.2에서 이 부분이 완전히 해결되었습니다. 이제 플래시도 느리거나 조작감이 떨어지는 마우스 포인트에서 해방되었습니다.
포토샾같은 애플리케이션을 만들어서.. 크기 조절할 때, 워드 프로세서, 파워포인트 등등 같은 애플리케이션이 있다면 맘껏 적용해 보시는 것도 ^^;;

주의 사항
 - 10.2에서만 지원하므로, 마우스 커서에 대한 호환성 보장을 해주셔야 겠지요 ^^

새로운 API에 대해 살펴 보겠습니다!

1. 일반적인 마우스 커서 변경하는 방법입니다.
순서를 살펴보면 커서 데이터를 생성하고, 커서의 중앙 포인트 지점 값을 설정합니다. (offset개념입니다)
비트맵 데이터가 담긴 Vector객체를 생성하는데, 이게 Vector인 이유는 프레임을 넣기 위해서 입니다.

일반적인 커서는 프레임이 1개이겠죠? 따라서 Vector의 크기가 1개인 Vector객체를 만들고, 1프레임에 들어갈 커서의 비트맵 데이터를 넣었습니다. 그 다음은 커서데이터의 데이터에 프레임을 넣어 주고요..

해당 커서를 Alias로 지정할 이름을 주고, Native Cursor로 지정할 수 있도록 등록합니다.
그리고 Mouse.cursor로 커서를 등록할 때, 지정했던 Alias를 지정해서 사용하면 됩니다.

/**
* redCursor는 비트맵데이터로 32*32의 png 이미지를 활용
*/
var cursorData:MouseCursorData = new MouseCursorData();
cursorData.hotSpot = new Point(15,15);
var cursorBitmapDataFrame:Vector.<Bitmapdata> = new Vector.<Bitmapdata>(1, true);
cursorBitmapDataFrame[0] = redCursor;
		
cursorData.data = cursorBitmapDataFrame;
Mouse.registerCursor("redCursor", cursorData);
Mouse.cursor = "redCursor";


2. 애니메이션 커서의 활용
일반적인 커서를 생성하는 방법에서 말씀 드렸는데요. 커서의 데이터가 Vector이며, Vector인 이유는 프레임이 들어가기 때문이라 했습니다. ^^)/ 기억 나시죠?
(동영상같은거.. Bitmapdata 떠서 배열로 넣고 동영상 커서도 만들 수 있을 듯;;; )
이 프레임 여러개를 넣어서 애니메이션화 할 수 있는 거죠.. 소스 보시면 이해가 쉬우실 겁니다.

/**
* redCursor,blueCursor,animatedCursor 는 비트맵데이터로 32*32의 png 이미지를 활용
*/

//커서 데이터 생성
var cursorData:MouseCursorData = new MouseCursorData();

//커서의 중앙 지점을 정의 (offset)
cursorData.hotSpot = new Point(15,15);

//전체 마우스 커서에 대한 프레임 설정 (3개의 프레임이 있다고 가정)
var cursorBitmapDataFrame:Vector.<Bitmapdata> = new Vector.<Bitmapdata>(3, true);

// 1프레임
cursorBitmapDataFrame[0] = redCursor;

// 2프레임 
cursorBitmapDataFrame[1] = blueCursor;

// 3프레임
cursorBitmapDataFrame[2] = animatedCursor;

//setting framerate for cursor
cursorData.frameRate = 2;

//커서로 등록
cursorData.data = cursorBitmapDataFrame;

Mouse.registerCursor("animatedCursor", cursorData);


3. 마우스 커서를 원래 대로 돌리기!
마우스 커서를 맘껏 바꾸어 봤으니, 이제 원래대로 하는 방법도 알아야 겠죠?
아주 쉽습니다 ^^

/**
* 시스템에서 정의된 마우스 커서를 사용합니다.
*/
Mouse.cursor = MouseCursor.AUTO;

/**
* 기타 시스템 커서 지정 방법
*/

//시스템의 핸드 커서를 표시합니다.
Mouse.cursor = MouseCursor.HAND;

//시스템의 화살표 커서를 표시합니다.
Mouse.cursor = MouseCursor.ALLOW;

//이외에 BUTTON, IBEAM의 커서 종류가 있습니다.

[DEMO]

To view this page ensure that Adobe Flash Player version 10.2.0 or greater is installed.



package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.ui.Mouse;
import flash.ui.MouseCursor;
import flash.ui.MouseCursorData;

[SWF(frameRate="42", backgroundColor="#666666", width="720", height="380")]
public class MouseCursorSample extends Sprite
{
	
	//--------------------------------
	// Class Static Variables
	//--------------------------------	
	
	/**
	 * Red Cursor Bitmapdata 
	 */	
	private static var redCursor:BitmapData;
	
	/**
	 * Blue Cursor Bitmapdata 
	 */
	private static var blueCursor:BitmapData;
	
	/**
	 * For animated cursor Bitmpdata 
	 */	
	private static var animatedCursor:BitmapData;
	
	//--------------------------------
	// Class Variables
	//--------------------------------
	
	[Embed(source="/../assets/sample.png")]
	private var redCursorImage:Class;
	
	[Embed(source="/../assets/sample2.png")]
	private var blueCursorImage:Class;
	
	[Embed(source="/../assets/sample3.png")]
	private var animatedCursorImage:Class;	
	
	[Embed(source="/../assets/resetImage.png")]
	private var defaultCursorBtnImage:Class;	
	
	private var redCursorBtn:Sprite;
	
	private var blueCursorBtn:Sprite;
	
	private var animatedCursorBtn:Sprite;
	
	private var defaultCursorBtn:Sprite;
	
	//--------------------------------
	// Constructor
	//--------------------------------
	
	/**
	 * Constructor 
	 * 
	 */	
	public function MouseCursorSample()
	{
		redCursor = Bitmap(new redCursorImage()).bitmapData;
		blueCursor = Bitmap(new blueCursorImage()).bitmapData;
		animatedCursor = Bitmap(new animatedCursorImage()).bitmapData;
		
		addEventListener(Event.ADDED_TO_STAGE, onStageHandler);
	}
	
	//--------------------------------
	// Class Methods
	//--------------------------------
	
	/**
	 * 
	 * registerCursor RED cursor
	 */	
	private function regCursorType1():void
	{		
		var cursorData:MouseCursorData = new MouseCursorData();
		cursorData.hotSpot = new Point(15,15);
		var cursorBitmapDataFrame:Vector.<Bitmapdata> = new Vector.<Bitmapdata>(1, true);
		cursorBitmapDataFrame[0] = redCursor;
		
		cursorData.data = cursorBitmapDataFrame;
		
		Mouse.registerCursor("redCursor", cursorData);
	}
	
	/**
	 * 
	 * registerCursor BLUE cursor
	 */	
	private function regCursorType2():void
	{		
		var cursorData:MouseCursorData = new MouseCursorData();
		cursorData.hotSpot = new Point(15,15);
		var cursorBitmapDataFrame:Vector.<Bitmapdata> = new Vector.<Bitmapdata>(1, true);
		cursorBitmapDataFrame[0] = blueCursor;		
		cursorData.data = cursorBitmapDataFrame;
		
		Mouse.registerCursor("blueCursor", cursorData);
	}
	
	/**
	 * 
	 * registerCursor Animated cursor has frameRate 2
	 */	
	private function regCursorType3():void
	{		
		var cursorData:MouseCursorData = new MouseCursorData();
		cursorData.hotSpot = new Point(15,15);
		var cursorBitmapDataFrame:Vector.<Bitmapdata> = new Vector.<Bitmapdata>(3, true);		
		cursorBitmapDataFrame[0] = redCursor;
		cursorBitmapDataFrame[1] = blueCursor;
		cursorBitmapDataFrame[2] = animatedCursor;
		
		cursorData.frameRate = 2;
		cursorData.data = cursorBitmapDataFrame;
		
		Mouse.registerCursor("animatedCursor", cursorData);
	}
	
	/**
	 * Reset cursor 
	 * 
	 */	
	private function resetCursor():void
	{		
		Mouse.cursor = MouseCursor.AUTO;
	}
	
	/**
	 * Application Layout 
	 * 
	 */	
	private function setLayout():void
	{
		redCursorBtn = new Sprite();
		blueCursorBtn = new Sprite();
		animatedCursorBtn = new Sprite();
		defaultCursorBtn = new Sprite();
		
		redCursorBtn.buttonMode = true;
		blueCursorBtn.buttonMode = true;
		animatedCursorBtn.buttonMode = true;
		defaultCursorBtn.buttonMode = true;
		
		redCursorBtn.x = 10;
		blueCursorBtn.x = 62;
		animatedCursorBtn.x = 104;
		defaultCursorBtn.x = 156;
			
		animatedCursorBtn.y = 
				redCursorBtn.y = 
				defaultCursorBtn.y = 
				blueCursorBtn.y = 40;
		
		addChild(redCursorBtn);
		addChild(blueCursorBtn);
		addChild(animatedCursorBtn);
		addChild(defaultCursorBtn);
		
		redCursorBtn.addChild(new redCursorImage());
		blueCursorBtn.addChild(new blueCursorImage());
		animatedCursorBtn.addChild(new animatedCursorImage());
		defaultCursorBtn.addChild(new defaultCursorBtnImage());
		
		configureEvent();
		displayApplicationGuide();
	}
	
	/**
	 * display application control guide 
	 * 
	 */	
	private function displayApplicationGuide():void
	{
		var rectLine:Shape = new Shape();
		rectLine.graphics.lineStyle(1, 0xFFFFFF, 1);
		rectLine.graphics.drawRect(0,30,200,50);
		addChild(rectLine);
		
		var guideText:TextField = new TextField();
		guideText.autoSize = TextFieldAutoSize.LEFT;
		guideText.text = "이미지를 클릭하면 마우스 포인터가 변경됩니다.";
		guideText.y = 10;
		guideText.mouseEnabled = false;
		
		addChild(guideText);
	}
	
	/**
	 * configure event for application 
	 * 
	 */	
	private function configureEvent():void
	{
		redCursorBtn.addEventListener(MouseEvent.CLICK,
				cursorBtneClickHandler);
		
		blueCursorBtn.addEventListener(MouseEvent.CLICK, 
				cursorBtneClickHandler);
		
		animatedCursorBtn.addEventListener(MouseEvent.CLICK, 
			cursorBtneClickHandler);
		
		defaultCursorBtn.addEventListener(MouseEvent.CLICK, 
			cursorBtneClickHandler);
	}
	
	//--------------------------------
	// Event Handlers
	//--------------------------------
	
	/**
	 * 
	 * @param $e
	 * 
	 */	
	private function onStageHandler($e:Event):void
	{
		regCursorType1();
		regCursorType2();
		regCursorType3();
		setLayout();
	}
	
	private function cursorBtneClickHandler($e:MouseEvent):void
	{
		switch($e.currentTarget)
		{
			case redCursorBtn :
			{
				Mouse.cursor = "redCursor";
				break;
			}
			case blueCursorBtn : 
			{
				Mouse.cursor = "blueCursor";
				break;
			}
			case animatedCursorBtn :
			{
				Mouse.cursor = "animatedCursor";
				break;
			}
			default : 
			{
				resetCursor();
				break;
			}
		}
		
		$e.stopImmediatePropagation();
		$e.preventDefault();
	}
		
}
}


 

 

저작자 표시 비영리 동일 조건 변경 허락
신고
댓글
댓글쓰기 폼