jasu's blog
블로그 메뉴검색결과 리스트
Adobe에 해당되는 글 32건
- 2012.01.17 AIR 3 & FP11 - RTMFP + Starling framework
- 2012.01.12 Starling 이미지 로드 및 scale & rotation
- 2012.01.10 Starling performance test 1
- 2012.01.10 [Starling-10] 터치 이벤트와 Touch 클래스 3
- 2012.01.09 [Starling-09] Starling의 Button 클래스 사용
- 2012.01.09 [Starling-08] Starling에서 TextFiled의 사용
- 2012.01.09 [Starling-07] MovieClip 클래스를 이용한 애니메이션
- 2012.01.08 [Starling-06] 비트맵을 표시하는 방법
- 2012.01.08 [Starling-05] Tween 클래스를 이용한 애니메이션
- 2012.01.08 [Starling-04] EnterFrame 이벤트를 이용한 애니메이션
- 2012.01.05 [Starling-03] Flash 컨텐츠 표시의 기본 2
- 2012.01.04 [Starling-02] Starling 2D framework 소개
- 2012.01.04 Starling에서 resize 적용
- 2010.04.16 NHN의 플래시 폐지 기사를 보면서... 20
- 2010.02.12 애플(Apple)의 마이크로소프트(Microsote)화? 1
- 2010.02.04 스티브잡스의 발언과 플래시의 방향 6
- 2009.04.30 AIR 애플리케이션 경연대회
- 2009.01.22 ACC(Adobe Community Champion) 14
- 2008.10.26 [AIR] AIR 1.5 (Cosmo) 출시 예정...
- 2008.03.04 Adobe cards... 4
- 2007.11.07 콜린무크의 「지금부터 시작한다 ActionScript 3.0 - WORLD WIDE TOUR 」 8
- 2007.10.02 Flash Player 10 코드네임 Astro 4
- 2007.09.06 [FlashCS3] Auto Format 기능 주의... 4
- 2007.08.27 [FlashPlayer] Adobe Flash Player v9.0.60.184 beta - H.264/HE-AAC지원
- 2007.08.10 Flash Player 9 실시간 인스톨 상황 4
- 2007.07.29 [CS3] 패널 도킹 방지를 위한 팁
- 2007.07.25 Adobe MAX 2007 3개국에서 개최
- 2007.07.11 adobe CS3 신제품 발표회를 다녀와서... 4
- 2007.04.03 어도비, 모바일 개발용 디바이스 센트럴 발표
- 2007.03.30 어도비 25년 역사상 가장 방대한 SW제품군 발표
글
Starling 이미지 로드 및 scale & rotation
package { import starling.events.Event; import starling.core.Starling; import starling.display.Sprite; import starling.display.Button; import starling.display.Image; import starling.textures.Texture; import starling.events.Touch; import starling.events.TouchEvent; import starling.events.TouchPhase; import starling.animation.Tween; import starling.animation.Transitions; import starling.utils.deg2rad; import starling.display.DisplayObject; import starling.text.TextField; import starling.utils.HAlign; import starling.utils.VAlign; import utils.TouchSheet; import flash.geom.Rectangle; import flash.geom.Point; import flash.display.Bitmap; import flash.net.URLRequest; import flash.display.Loader; import flash.events.Event; public class Demo extends Sprite { private var _loader:Loader; private var _image:Image; private var _posText:TextField; private var _sheet:TouchSheet; public function Demo() { _loader = new Loader(); _loader.load(new URLRequest("https://t1.daumcdn.net/cfile/tistory/11252E424F0ADA1C06")); _loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE, onLoadedHandler); } private function onLoadedHandler(e:flash.events.Event):void{ var bitmap:Bitmap = _loader.content as Bitmap; var texture:Texture = Texture.fromBitmap(bitmap); _image = new Image(texture); var description:String = "- touch and drag to move the images \n" + "- pinch with 2 fingers to scale and rotate \n" + "- double tap brings an image to the front \n" + "- use Ctrl/Cmd & Shift to simulate multi-touch"; var infoText:TextField = new TextField(300, 75, description); infoText.x = 10; infoText.y = 35; infoText.fontSize = 12; infoText.color = 0x999999; infoText.vAlign = VAlign.TOP; infoText.hAlign = HAlign.LEFT; addChild(infoText); _sheet = new TouchSheet(_image); _sheet.scaleX = 0.2; _sheet.scaleY = 0.2; setAlignCenter(_sheet); _sheet.addEventListener(TouchEvent.TOUCH, onTouchHandler); addChild(_sheet); _posText = new TextField(400, 480, ""); _posText.x = 10; _posText.y = 105; _posText.fontSize = 12; _posText.color = 0xBBBBBB; _posText.vAlign = VAlign.TOP; _posText.hAlign = HAlign.LEFT; _posText.touchable = false; addChild(_posText); stage.addEventListener(starling.events.Event.RESIZE, onResizeHandler); } private function onTouchHandler(e:TouchEvent):void{ var touches:Vector.<Touch> = e.getTouches(_sheet); _posText.text = "_sheet.x : "+_sheet.x+"\n"+ "_sheet.y : "+_sheet.y+"\n"+ "_sheet.width : "+_sheet.width+"\n"+ "_sheet.height : "+_sheet.height; var len:int = touches.length; for(var i:int=0;i<len;i++){ var touch:Touch = touches[i]; var currentPoint:Point = touch.getLocation(_sheet); var previousPoint:Point = touch.getPreviousLocation(_sheet); _posText.text +="\n\n"+"touches["+i+"]========================\n"+ "previousGlobalX : "+touch.previousGlobalX+"\n"+ "previousGlobalY : "+touch.previousGlobalY+"\n"+ "globalX : "+touch.globalX+"\n"+ "globalY : "+touch.globalY+"\n"+ "getLocation().x : "+currentPoint.x+"\n"+ "getLocation().y : "+currentPoint.y+"\n"+ "getPreviousLocation().x : "+previousPoint.x+"\n"+ "getPreviousLocation().y : "+previousPoint.y; } } private function onResizeHandler(e:starling.events.Event):void{ } private function setAlignCenter(inTarget:DisplayObject):void{ inTarget.x = stage.stageWidth >> 1; inTarget.y = stage.stageHeight >> 1; } public override function dispose():void { super.dispose(); } } }
글
Starling performance test
package { import starling.events.Event; import starling.core.Starling; import starling.display.Sprite; import starling.display.Button; import starling.textures.Texture; import starling.display.DisplayObject; import starling.display.Image; import starling.utils.deg2rad; import flash.display.Bitmap; public class Demo extends Sprite { [Embed(source = "f60.png")] private var MyBitmap:Class; private var _myTexture:Texture; private var _arrButterflys:Vector.<Butterfly>; public function Demo() { // addedToStage 이벤트에 대한 리스너 추가 addEventListener( Event.ADDED_TO_STAGE , onAddedToStage); } private function onAddedToStage(e:Event):void { var myBitmap:Bitmap = new MyBitmap() as Bitmap; _myTexture = Texture.fromBitmap(myBitmap); var len:int = 800; _arrButterflys = new Vector.<Butterfly>(len, false); for (var i:int = 0; i<len; i++) { var fly:Butterfly = new Butterfly(_myTexture); fly.alpha = Math.random(); fly.destX = Math.random()*stage.stageWidth; fly.destY = Math.random()*stage.stageHeight; fly.setVertexColor(0, Math.random()*0xFFFFFF); fly.setVertexColor(1, Math.random()*0xFFFFFF); fly.setVertexColor(2, Math.random()*0xFFFFFF); fly.setVertexColor(3, Math.random()*0xFFFFFF); fly.x = Math.random()*stage.stageWidth; fly.y = Math.random()*stage.stageHeight; fly.rotation = deg2rad(Math.random()*360); fly.pivotX = fly.width >> 1; fly.pivotY = fly.height >> 1; _arrButterflys[i] = fly; addChild(fly); } stage.addEventListener(Event.ENTER_FRAME, onFrame); } private function onFrame(e:Event):void{ var len:uint = _arrButterflys.length; for (var i:int = 0; i < len; i++){ // move the sausages around var fly:Butterfly = _arrButterflys[i]; fly.x -= ( fly.x - fly.destX ) * .1; fly.y -= ( fly.y - fly.destY ) * .1; if (Math.abs(fly.x - fly.destX)<1 && Math.abs(fly.y-fly.destY) < 1){ fly.destX = Math.random()*stage.stageWidth; fly.destY = Math.random()*stage.stageHeight; fly.rotation = deg2rad(Math.random()*360); } } } public override function dispose():void { removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); _myTexture.dispose(); super.dispose(); } } } import starling.display.Image; import starling.textures.Texture; class Butterfly extends Image{ public var destX:Number = 0; public var destY:Number = 0; public function Butterfly(inTexture:Texture):void{ super(inTexture); } }
글
[Starling-10] 터치 이벤트와 Touch 클래스
Starling의 모든 표시 객체(Sprite, Stage, Quad, …)는 TouchEvent을 처리할 수 있다. 단, Button 클래스는 내부적으로 터치 이벤트를 triggered 이벤트로 변환하고 있기 때문에 자신의 리스너를 추가하는 것은 주의가 필요하다. 또한 표시 객체 자신이나 부모 개체 touchable 속성이 false의 경우는 TouchEvent를 받을 수 없다.
아무튼 Starling에서 터치 작업을 처리하려면 우선 표시 객체에 TouchEvent.TOUCH 이벤트 리스너를 추가해야 한다. 아래는 샘플이다.
import starling.events.TouchEvent;
myImage.addEventListener(TouchEvent.TOUCH,onTouch);
private function onTouch(e:TouchEvent):void {
trace(e.target);
}
Starling의 이벤트는 표시 목록에 버블링하기 위해 아래의 계층 객체에서 이벤트도 검색할 수 있다. (참고:사양에서는 계층의 위에서 아래로 전파하지만 지금의 구현에서는 Stage에서 이벤트를 받을 수도 있는 것 같다.)
샘플에서 사용하는 target 속성과 currentTarget 속성 사용법은 Flash Player 표준 이벤트와 동일하다. 기타 TouchEvent에는 다음과 같은 속성도 있다. 모든 읽기 전용이다.
ctrlKey : 이벤트가 발생할 때 Ctrl 키가 눌리고 있었는지 나타내는
shiftKey : 이벤트 발생시 Shift 키가 눌리고 있었는지 나타내는
timestamp : 터치가 시작된 이후의 시간(초)
touches : 사용 가능한 Touch 객체의 벡터
마지막 touches은 이벤트와 관련된 하나 이상의 Touch 객체의 벡터다. Touch 객체는 이벤트 발생시킨 손가락이나 마우스 조작 정보를 보유하고 있다.
Touch 객체 가져오기
TouchEvent에는 Touch 객체를 취득하기 위한 메소드가 포함되어 있다. 멀티 터치를 사용하지 않는 경우 getTouch()메소드에서 Touch 객체를 얻을 수 있다. (멀티 터치의 경우는 후술)
private function onTouch(e:TouchEvent):void {
var touch:Touch = e.getTouch(stage);
if (touch) {
trace(e.target, touch.target);
}
}
getTouch() 메소드의 첫 번째 인수는 검색할 Touch 객체를 좁히려는 조건이다. 작업의 대상이 된 표시 객체가 인수로 지정된 오브젝트와 일치하는 또는 인수 계층 아래에 포함된 경우, getTouch()는 값을 반환한다. 실제 작업의 대상은 Touch 객체 취득 후에 target 속성에서 볼 수 있다. (작업의 대상과 이벤트의 대상은 반드시 일치하지 않는다는 것에 유의)
Touch객체는 target 이외에도 작업을 식별하는 특성이 몇 가지가 더 있다.
target : 터치 조작의 대상이 된 표시 객체
id : 터치를 식별하는 숫자
timestamp : 터치 조작 시간 (터치 시작으로부터 초)
TouchPhase
위에서 이야기한 것처럼, Touch 객체는 작업 상태를 나타내는 속성이 있다. 속성 이름은 phase다.
phase : 현재 터치 상황
phase 속성에 설정 가능한 값은 TouchPhases 클래스에 정의되어 있다. 자주 사용되는 값은 다음 세 가지다.
BEGAN : 손가락이 화면에 접한 또는 마우스 버튼이 눌러진
MOVED : 손가락이 화면을 이동하거나 마우스 버튼이 눌러진 상태 이동
ENDED : 손가락이 화면에서 떨어진 또는 마우스 버튼에서 떨어진
BEGAN이 한 번, MOVED가 0 이상 반복되고, ENDED가 한 번 발생하는 것이 기본적인 흐름이다.다음과 같은 상태도 있다.
STATIONARY : 손가락 또는 마우스가 이전 프레임에서 이동
일반적으로 이 상태에서는 이벤트가 발생되지 않아야하지만, 멀티 터치를 취급하는 경우에는 STATIONARY가 포함될 수 있다.마지막으로 마우스 이용 때만 나타나는 상태다.
HOVER : 마우스 버튼이 눌러지지 않은 상태에서 표시 객체에 포인터가 있을 때
손가락으로 (지금까지) 접하지 않고 포인터를 이동시킬 수 없기 때문에 OVER는 있어도 HOVER는 없다는 것이다.
포인터 위치 가져오기
Touch 객체는 스테이지의 현재 위치와 이전 위치 속성을 가지고 있다. 다음 네 가지다. 형태는 모두 Number.
globalX : 스테이지 좌표를 기준으로 한 현재의 손가락 (포인터)의 x 좌표
globalY : 스테이지 좌표를 기준으로 한 현재의 손가락 (포인터)의 y 좌표
previousGlobalX : 스테이지 좌표를 기준으로 이전의 손가락 (포인터)의 x 좌표
previousGlobalY : 스테이지 좌표를 기준으로 이전의 손가락 (포인터)의 y 좌표
그러나 대부분의 경우 다른 좌표계에서의 위치를 계산하게 될 것이다. 그래서, Touch 클래스에는 위의 속성 값을 특정 객체를 기준으로 한 좌표로 변환하는 메소드를 제공 한다.
public function getLocation(space:DisplayObject):Point
public function getPreviousLocation(space:DisplayObject):Point
이 두 메소드는 인수 객체의 좌표를 기준으로 한 현재의 위치 또는 마지막 위치를 반환한다.아래는 Touch 객체의 위치 정보를 사용하는 샘플이다.
var touch:Touch = event.getTouch(this, TouchPhase.MOVED);
if (touch) {
// 부모 개체를 기준으로 이동 거리를 계산하는
var currentPos:Point = touch.getLocation(parent);
var previousPos:Point = touch.getPreviousLocation(parent);
var delta:Point = currentPos.subtract(previousPos);
// 객체의 위치를 변경
x += delta.x;
y += delta.y;
}
getTouch() 메소드의 두 번째 인수는 원하는 상태를 지정할 수 있다. 위의 예제에서는 손가락 이동 정보를 취급하기 위하여 TouchPhase.MOVED를 지정하고 있다.
더블 클릭의 사용 방법
Touch 객체를 통해 더블 클릭을 감지할 수 있도록 tapCount 속성이 있다. 이 속성을 사용하여 더블 클릭에 해당하는 코드를 작성한 것이 아래의 예제다.
touch = event.getTouch(this, TouchPhase.ENDED);
if (touch & & touch.tapCount == 2) parent.addChild (this);
작동 상태가 ENDED의 Touch 객체가 존재하며 탭 횟수가 2 회인 경우를 검색하고 있다.멀티 터치Starling은 멀티 터치도 지원한다. 멀티 터치를 처리하려면 Starling 객체에 다음과 같이 설정한다.
mStarling.simulateMultitouch = true;
이 상태에서 실제로 멀티 터치를 하면 터치 때마다 Touch 객체가 만들어진다. 그리고 TouchEvent에 전달된다. TouchEvent에서 여러 Touch 개체를 가져오려면 getTouches() 메소드를 사용한다. 아래는 그 예제다.
var touches:Vector.<Touch>=touchEvent.getTouches(this);
반환 값은 Touch 벡터다. getTouch()뿐만 아니라 두 번째 인수로 원하는 상태를 지정할 수 있다.참고로 Ctrl 키를 사용하여 데스크탑 환경에서도 멀티 터치를 시뮬레이션할 수 있게 되어 있다. 물론 실제 터치 디바이스에서는 손가락으로 조작하면 된다.
원본 : http://cuaoar.jp/2012/01/starling-touch.html
package { import starling.events.Event; import starling.events.Touch; import starling.events.TouchEvent; import starling.events.TouchPhase; import starling.core.Starling; import starling.display.Sprite; import starling.display.Image; import starling.textures.Texture; import starling.display.DisplayObject; import starling.animation.Tween; import starling.animation.Transitions; import starling.utils.deg2rad; import flash.display.Bitmap; import flash.geom.Point; public class Demo extends Sprite { [Embed(source="icon128.png")] private var MyBitmap:Class; private var myButton:Image; public function Demo() { // addedToStage 이벤트에 대한 리스너 추가 addEventListener( Event.ADDED_TO_STAGE , onAddedToStage); } private function onAddedToStage(e:Event):void { var myBitmap:Bitmap = new MyBitmap() as Bitmap; var myTexture:Texture = Texture.fromBitmap(myBitmap); myButton = new Image(myTexture); myButton.addEventListener(TouchEvent.TOUCH, onTouchHandler); myButton.pivotX = myButton.width >> 1; myButton.pivotY = myButton.height >> 1; addChild(myButton); setAlign(myButton); } private function onTouchHandler(e:TouchEvent):void{ var touch:Touch = e.getTouch(myButton); if(touch){ switch(touch.phase){ case TouchPhase.BEGAN : myButton.setVertexColor(0, 0xFF6600); myButton.setVertexColor(1, 0xFF6600); myButton.setVertexColor(2, 0xFF6600); myButton.setVertexColor(3, 0xFF6600); break; case TouchPhase.MOVED : break; case TouchPhase.ENDED : myButton.setVertexColor(0, 0xFFFFFF); myButton.setVertexColor(1, 0xFFFFFF); myButton.setVertexColor(2, 0xFFFFFF); myButton.setVertexColor(3, 0xFFFFFF); } } /* touch = e.getTouch(myButton, TouchPhase.MOVED); if (touch) { // 부모 개체를 기준으로 이동 거리를 계산하는 var currentPos:Point = touch.getLocation(parent); var previousPos:Point = touch.getPreviousLocation(parent); var delta:Point = currentPos.subtract(previousPos); // 객체의 위치를 변경 myButton.x += delta.x; myButton.y += delta.y; } */ touch = e.getTouch(this, TouchPhase.ENDED); if (touch && touch.tapCount == 2){ rotationToTween(0.6, 90, Transitions.EASE_OUT_BOUNCE); } var touches:Vector.<Touch> = e.getTouches(stage); if(touches.length == 2){ var firstPos:Point = touches[0].getLocation(parent); var secondPos:Point = touches[1].getLocation(parent); var distance:Number = Point.distance(firstPos, secondPos); scaleToTween(0.2, distance*0.01, Transitions.EASE_OUT); }else{ touch = e.getTouch(this, TouchPhase.MOVED); if (touch){ moveToTween(0.14, touch.globalX, touch.globalY, Transitions.EASE_OUT); } } } private function rotationToTween(inTime:Number, inRot:int, inEase:String):void{ var tween:Tween = new Tween(myButton, inTime, inEase); tween.animate("rotation", myButton.rotation+deg2rad(inRot)); Starling.juggler.add(tween); } private function moveToTween(inTime:Number, inX:int, inY:int, inEase:String):void{ var tween:Tween = new Tween(myButton, inTime, inEase); tween.moveTo(inX, inY); Starling.juggler.add(tween); } private function scaleToTween(inTime:Number, inScale:Number, inEase:String):void{ var tween:Tween = new Tween(myButton, inTime, inEase); tween.scaleTo(inScale); Starling.juggler.add(tween); } private function setAlign(inTarget:DisplayObject):void { inTarget.x = stage.stageWidth >> 1; inTarget.y = stage.stageHeight >> 1; } public override function dispose():void { removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); super.dispose(); } } }
글
[Starling-09] Starling의 Button 클래스 사용
아래가 Button의 생성자다. 첫 번째 인수는 버튼에 대한 스킨이 되는 텍스처이고 옵션으로, 두 번째 인수에 제목을, 3번 째 인수에는 누를 때 표시할 텍스처를 지정할 수 있다.
Button(upState:Texture, text:String = "", downState:Texture=null)
Flash Professional에서 만든 버튼과 달리, "오버" 스킨은 지정할 수 없다. 아마도 이것은 터치 장치의 이용을 전제로 하고 있기 때문이라고 생각된다.
버튼을 클릭하면 (또는 탭하면) triggered라는 이벤트가 발생한다. 클릭시 실행하고 싶은 처리는 triggered 이벤트 리스너 함수에 작성한다. 아래는 그 예제다. 텍스처 포함 관련 부분은 여러번 나왔기 때문에 생략한다.
import starling.display.Button; import starling.events.Event; private var myButton:Button; private function onAddedToStage(e:Event):void { var myBitmap:Bitmap = new MyBitmap ; var myTexture:Texture = Texture.fromBitmap(myBitmap); // 텍스처를 지정하여 단추의 객체를 생성 myButton = new Button(myTexture); // triggered 이벤트 수신기를 추가 myButton.addEventListener(Event.TRIGgered, onTriggered); } private function onTriggered(e:Event):void { // 이벤트를 발생 개체를 가져 trace(e.target); }
Staring 이벤트는 Flash Player의 이벤트처럼 버블링(표시 목록 계층 간에 전파, 자식에서 부모 방향으로만 지원) 하는 여러 버튼을 사용할 때는 triggered 이벤트를 부모 객체에서 처리하는 것도 가능하다.
스킨 지정
Starling 버튼은 터치하면 (또는 버튼에 마우스가 눌러진 상태가 되면), 버튼의 표시 크기가 조금 작아진다. 손가락을 떼면 원래 크기로 돌아간다. 이 것은 버튼에 표준 텍스처 하나만 지정된 경우의 동작이다. 버튼을 눌린 상태에 해당하는 텍스처를 지정하면 텍스처가 작아지는 대신 스킨이 바뀐다.
이 두 텍스처는 생성자에 지정할 수 있지만 나중에 속성에서도 설정할 수 있다. 아래가 속성 목록이다.
upState : 버튼이 터치되지 않은 상태로 표시되는 텍스처
downState : 버튼이 터치되는 상태로 표시되는 텍스처
scaleWhenDown : 터치되어있는 상태 텍스처의 표시 비율
upState과 downState가 각 상태로 표시하는 텍스처를 설정하는 속성이다. (upState는 생성자에서 지정 필수) 성능의 관점에서 어느 텍스처도 같은 텍스처 아틀라스에 있는 것이 바람직할 것이다. 마지막 scaleWhenDown는 0에서 1 사이의 숫자를 지정한다. 이 값은 downState = null의 경우에만 사용할 수 있다.
위에서도 썼지만, 단순한 장식 추가가 필요한 경우, 2 개의 텍스처 이외에도 항시 표시 객체를 추가할 수 있다. 만약 동작을 변경하려면, 커스텀 버튼 클래스를 만드는 편이 빠를지도 모른다.
텍스트 표시
Starling의 버튼은 텍스처로 지정한 이미지에 텍스트를 표시할 수 있다. 텍스트는 생성자에서 지정하거나 인스턴스 생성 후, text 속성에 설정한다. textBounds 속성을 사용하여 텍스트의 위치를 지정할 수도 있다.
text : 버튼에 표시되는 텍스트
textBounds : 텍스트 표시 영역을 Rectangle로 지정
텍스트 표시에 사용할 글꼴의 모양을 설정하는 속성도 있다. 거의 TextField의 경우와 동일하다.
fontName : 텍스트 표시에 사용할 글꼴 이름
fontSize : 텍스트 표시에 사용할 글꼴의 크기
fontColor : 글꼴 색상
fontBold : 글꼴을 굵게 표시 여부를 지정
포함된 글꼴과 비트맵 글꼴을 사용할 수 있다.
버튼 비활성화
버튼을 사용할 수 없는 상태라면 enabled 속성의 값을 false로 적용한다.
enabled : 버튼을 사용할 수 있는지 여부를 지정
alphaWhenDisabled : 버튼이 비활성화 때 알파 값
기본적으로 단추를 비활성화하면 버튼의 표시가 반투명하게 된다. 그 때 사용되는 알파 값은 alphaWhenDisabled에 설정된 값이다.
원본 : http://cuaoar.jp/2012/01/starling-button.html
package { import starling.events.Event; import starling.core.Starling; import starling.display.Sprite; import starling.display.Button; import starling.textures.Texture; import starling.display.DisplayObject; import flash.geom.Rectangle; import flash.display.Bitmap; public class Demo extends Sprite { [Embed(source="icon128.png")] private var MyBitmap:Class; private var myButton:Button; public function Demo() { // addedToStage 이벤트에 대한 리스너 추가 addEventListener( Event.ADDED_TO_STAGE , onAddedToStage); } private function onAddedToStage(e:Event):void { var myBitmap:Bitmap = new MyBitmap() as Bitmap; var myTexture:Texture = Texture.fromBitmap(myBitmap); // 텍스처를 지정하여 단추의 객체를 생성 myButton = new Button(myTexture); // 터치 상태일 때, 텍스처의 표시 비율 myButton.scaleWhenDown = 0.95; myButton.fontColor = 0xFFFFFF; myButton.fontBold = true; myButton.fontSize = 24; myButton.text = "BUTTON"; myButton.textBounds = new Rectangle(myButton.width-60>>1, 85, 60, 30); // addChild(myButton); setAlign(myButton); // triggered 이벤트 수신기를 추가 myButton.addEventListener(Event.TRIGGERED, onTriggered); } private function onTriggered(e:Event):void { // 이벤트를 발생 개체를 가져 trace(e.target); myButton.fontColor = Math.random()*0xFFFFFF; } private function setAlign(inTarget:DisplayObject):void { inTarget.x = stage.stageWidth - inTarget.width >> 1; inTarget.y = stage.stageHeight - inTarget.height >> 1; } public override function dispose():void { removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); super.dispose(); } } }
글
[Starling-08] Starling에서 TextFiled의 사용
그렇다고해도, GPU에서 직접 글꼴을 취급할 수는 없다. 사실, 뒤에서 Flash Player의 TextFiled를 사용하여 CPU에서 그린 것을 비트맵화 하여 GPU에 업로드하는 형식으로 사용한다. 즉, Starling의 TextField가 제공하는 것은 주어진 텍스트 및 글꼴에서 동적으로 텍스처를 생성하는 기능인 것이다. 따라서 커서가 표시되는 입력 텍스트와 같이 문자를 선택하는 등의 작업은 할 수 없다.(비트맵이므로)
또한, 동적으로 생성할 이유가 없는 텍스트는 TextField를 사용하는 것보다는 사전에 텍스처로 준비하여 사용하는 것이 효율적이다.
TextField 인스턴스 생성
아래는 TextField의 생성자 정의를 보여준다. 표시 영역의 너비와 높이, 표시할 텍스트의 3개의 인수가 필요하다.
TextField (width:int, height:int, text:String, fontName:String = "Verdana", fontSize:Number=12, color:uint=0x0, bold:Boolean=false);
//
어떤 값을 나중에 변경할 수 있지만 효율 측면에서 너비와 높이를 바꾸지 않는 것이 좋다. 아래는 Hello World를 표시하는 예제다. 글꼴 크기와 색상을 인스턴스 생성 후에 지정하고 있다.
import starling.text.TextField; private var myTextField:TextField; private function onAddedToStage(e:Event):void { // TextField 인스턴스를 생성 myTextField = new TextField(160,80,"Hello World"); // TextField 인스턴스에 속성을 지정 myTextField.fontSize = 16; myTextField.color = 0x993333; myTextField.border = true; addChild(myTextField); }
border 속성 값을 true로 하면 TextField 영역을 눈으로 확인할 수 있기 때문에 개발시 유용하다. Starling의 TextField에는 지정된 너비와 높이에서 텍스트를 초과하지 않게 글꼴 크기를 자동 조정하는 편리한 기능이 있다.
myTextField.autoScale = true;
TextField 객체의 autoScale 속성을 true로 설정하면 전체 텍스트 표시가 글꼴 크기 지정보다 우선한다. Starling 유용한 클래스 Starling은 색상을 지정하는 Color라는 유용한 클래스가 있다. TextField의 color 속성의 지정에 사용할 수 있다.
import starling.utils.Color; myTextField.color = Color.AQUA;
또한 텍스트 배치 값을 가진 클래스도 있다. 세로 배치는 HAlign, 가로 배치는 VAligin 다.
import starling.utils.HAlign ; import starling.utils.VAlign ; // TextField의 왼쪽을 기준으로 문자를 배치 myTextField.hAlign = HAlign.LEFT; myTextField.vAlign = VAlign.TOP;HAlign에 정의되어 있는 값은 LEFT, CENTER, RIGHT 이렇게 3 종류이고 VAlign에 정의되어 있는 값은, TOP, CENTER, BOTTOM 이렇게 3 종류다. 글꼴 포함 Starling의 TextField에서 포함된 TrueType 글꼴 이용이 가능하다. 글꼴을 포함하면 표시 결과가 실행 환경에 의존하지 않기 때문에 권장한다. 다음은 글꼴 포함된 샘플이다. Ubuntu라는 글꼴을 포함하고 있다.
[Embed(source="Ubuntu-R.ttf",embedAsCFF="false", fontFamily="Ubuntu")] private static const UbuntuRegular:Class; private function onAddedToStage(e:Event):void { myTextField = new TextField(160,80,"Hello World"," Ubuntu ",16); myTextField.color = 0x993333; addChild(myTextField); }
Embed 지정 시에는 embedAsCFF 계정은 필수다. 비트맵 글꼴 사용 Starling의 TextField에서 비트맵 글꼴을 사용할 수 있다. 비트맵 글꼴은 문자를 비트맵으로 내보낸 것이다. 개별 문자 파일의 위치 정보 등은 별도 XML 형식으로 작성한다. XML 파일은 다음과 같은 형식으로되어 있다. 기본 정보, 문자 코드와 텍스처 관련, 그리고 옵션으로 커닝 정보다.
이러한 비트맵 글꼴 정보는 BitmapFont 클래스에 로드한다. 다음은 그 절차다. 먼저 각각의 파일을 포함한다. 여기는 텍스처 아틀라스와 동일한 절차다.
[Embed (source="desyrel.png")] private static const DesyrelTexture:Class; [Embed (source = "desyrel.fnt"mimeType = "application / octet - stream")] private static const DesyrelXml:Class;다음 BitmapFont 객체를 생성한다.
import starling.text.BitmapFont; import starling.textures.Texture; private function onAddedToStage(e:Event):void { // 비트맵 글꼴로드 var texture:Texture = Texture.fromBitmap(new DesyrelTexture); // 문자 정보 가져오기 var xml:XML = XML(new DesyrelXml); // BitmapFont 인스턴스 생성 var myBitmapFont:BitmapFont = new BitmapFont(texture,xml); //... 앞으로는 아래에 계속 }
생성한 BitmapFont객체는 사용하기 전에 registerBitmapFont() 메소드를 통해서 TextField 클래스에 등록한다. (registerBitmapFont()는 정적 메서드다) 그 후, TextField의 fontName 속성에 비트맵 글꼴의 이름을 설정하면 표시된다. 글꼴 이름은 BitmapFont 객체의 name 속성에서 가져올 수 있다.
import starling.text.TextField; private function onAddedToStage(e:Event):void { //... 위에서 계속 // TextField 클래스 비트맵 글꼴을 등록 TextField.registerBitmapFont(myBitmapFont); // TextField 인스턴스를 생성; myTextField = new TextField(300,150,"Hello World"); // 비트맵 폰트의 폰트 이름을 설정 myTextField.fontName = myBitmapFont.name; addChild(myTextField); }
필요하지 않은 비트맵 글꼴은 unregisterBitmapFont() 메소드로 등록을 삭제할 수 있다. 인수에는 삭제할 글꼴 이름을 지정한다. 이 때 삭제된 BitmapFont 대해 dispose()가 실행된다. 이것을 피하고 싶은 경우에는 두 번째 인수에 false를 지정한다.
TextField.unregisterBitmapFont (myBitmapFont.name, false );
비트맵 글꼴 텍스처는 독립적인 파일이 아닌 일반 텍스처 아틀라스와 함께 파일에 추가하는 형태로 사용할 수 있다. 이는 텍스처 전환을 줄일 수 있다. 비트맵 글꼴 표시 설정 비트맵 글꼴을 제작시의 크기로 표시하고 싶을 때는 TextField 객체의 fontSize 속성 BitmapFont.NATIVE_SIZE를 지정한다.
// 비트맵 글꼴의 원래 크기로 보기 myTextField.fontSize = BitmapFont.NATIVE_SIZE ;
또한 비트맵 글꼴을 제작시 모양으로 표시하고 싶을 때는 TextField 객체의 fontSize 속성 Color.WHITE을 지정한다.
// 비트맵 글꼴 텍스처 그대로보기 myTextField.color = Color.WHITE ;
color 속성의 기본 값은 아무 것도 지정하지 않으면 검은색 텍스트가 렌더링된다. 마지막으로 비트맵 글꼴의 제작에는 다음과 같은 것을 권장하고 있다.
Windows : Bitmap Font Generator (Angel Code : 무료)
Mac OS : Glyph Designer (71squared : 유료)
원본 : http://cuaoar.jp/2011/12/starling-textfiled.html
package { import starling.events.Event; import starling.core.Starling; import starling.display.Sprite; import starling.text.TextField; public class Demo extends Sprite { private var _myTextField:TextField; public function Demo() { // addedToStage 이벤트에 대한 리스너 추가 addEventListener( Event.ADDED_TO_STAGE , onAddedToStage); } private function onAddedToStage(e:Event):void { // TextField 인스턴스를 생성 var len:int = 50; for (var i:int = 0; i<len; i++) { var myTextField = new TextField(160,80,"Hello World 한글" + i); // TextField 인스턴스에 속성을 지정 myTextField.fontSize = 16; myTextField.color = Math.random()*0xFF0000+i; myTextField.border = true; addChild(myTextField); myTextField.x = stage.stageWidth >> 1; myTextField.y = stage.stageHeight >> 1; myTextField.alpha = 0.20; myTextField.rotation = i; } _myTextField = new TextField(160,80,"Hello World"); _myTextField.fontSize = 24; _myTextField.color = 0xFFFFFF; //_myTextField.border = true; addChild(_myTextField); setAlign(_myTextField); } private function setAlign(inTarget:TextField):void { inTarget.x = stage.stageWidth - inTarget.width >> 1; inTarget.y = stage.stageHeight - inTarget.height >> 1; } public override function dispose():void { removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); super.dispose(); } } }
글
[Starling-07] MovieClip 클래스를 이용한 애니메이션
또한 Starling MovieClip의 자식 객체를 관리하거나 프레임에 스크립트가 들어가는 기능은 없다. 이 점도 Flash Player의 MovieClip과는 크게 다르다. (Starling은 표시 목록의 관리는 Sprite의 책임이다. 한편, MovieClip은 Image 클래스에 타임 라인 기능을 더한 Image의 서브 클래스다. MovieClip이 Sprite의 하위 클래스인 Flash Player와는 달리, 양쪽의 역할은 분리되어 있다.)
스프라이트 시트와 TextureAtlas
MovieClip의 각 프레임을 볼 때 GPU는 표시 프레임에 할당된 텍스처, 셰이더에서 사용할 수 있도록 준비가 이루어진다. 이 때 텍스처가 프레임마다 물리적으로 다른 비트맵 파일이면 프레임을 진행할 때마다 텍스처 전환이 발생한다.
텍스처 전환 처리에는 당연히 시간이 걸린다. 또한 텍스처의 GPU에 업로드가 필요할 때 추가 오버헤드가 증가한다. 일반적으로 이 문제를 해결하기 위해 각 프레임의 텍스처를 하나의 파일에 정의한다. 이 것을 스프 라이트 시트라고 한다.
아래 그림은 Starling 샘플에 포함된 스프라이트 시트의 일부를 자른 것이다.
여러 프레임에 해당하는 텍스처가 1개의 파일로 되어 있으면 GPU를 이용해서 사용 위치를 바꾸는 것만으로 텍스처 자체를 전환하지 않고 렌더링 처리가 가능하다. 따라서 고속 프레임을 업데이트할 수 있다.
또한 Stage3D에서 취급할 수 있는 텍스처의 폭은 2의 계승이라는 규칙 때문에, 그 이외의 너비 텍스처는 Starling 내부에 여분의 사전 처리가 발생한다. 하지만 스프라이트 시트의 경우 표시되는 텍스처가 더 큰 텍스처(스프라이트시트)가 아니기 때문에 개별 텍스처 너비 사이즈를 걱정할 필요가 없다.
이 것을 최적화한 1단계가 TextureAtlas다. TextureAtlas는 여러 스프라이트시트를 하나의 파일에 정리한 것이다. 동시에 여러 애니메이션을 재생하는 경우 특히 유용하다. TextureAtlas를 만들기 위해, 차기 버전의 Flash Professional CS6에서 지원되는 것 같다. 벡터 애니메이션 스프라이트시트로 내보내기 기능을 기다리거나 Texture Packer 등의 도구를 이용하면 된다.
TextureAtlas 로드
TextureAtlas를 사용하여 프레임마다 각각 TextureAtlas의 어떤 영역을 표시할지 정보가 필요하다. 따라서 다음과 같은 형식으로 각 프레임의 텍스처 정보를 지정하게 되어 있다. 도구를 사용하여 TextureAtlas를 생성하는 경우 이러한 XML 파일도 동시에 생성된다.
TextureAtlas 태그 imagePath 속성은 TextureAtlas의 파일 이름이다. SubTexutre 태그의 name 속성은 애니메이션의 고유 이름 뒤에 프레임 번호를 추가한 것이다. 나머지 x, y, height, width에서 텍스처로 사용 영역을 지정한다. (실제로 SubTexture는 텍스처의 일부를 처리하는 클래스가 있다) TextureAtlas가 준비되면 다음과 같은 프로그램에 포함한다.
[Embed (source = "atlas.png")] private static const MyBitmap:Class; [Embed (source = "atlas.xml"mimeType = "application / octet - stream")] private static const MyXml:Class;
이러한 정보는 TextureAtlas라는 클래스에서 함께 관리한다. TextureAtlas(PNG 파일)은 일단 Texture 클래스 로딩하면서 XML 파일과 함께 TextureAtras 생성자에 전달한다. TextureAtlas 객체에서 고유 이름을 지정하여 Texture(실제로는 SubTexture의) 벡터를 얻을 수 있다. 이 때 사용하는 메소드가 getTextures()다.
import starling.textures.TextureAtlas; private function onAddedToStage(e:Event):void { // 텍스처 아틀라스로드 var myTexture:Texture = Texture.fromBitmap(new MyBitmap); // 텍스처 아틀라스의 영역 정보 가져오기 var myXml:XML = XML(new MyXml); // TextureAtlas 인스턴스 생성 var myTextureAtlas:TextureAtlas = new TextureAtlas(myTexture,myXml); // "walk_"를 식별 이름으로 가진 Texture 벡터 생성 var frames:Vector.= myTextureAtlas.getTextures("walk_"); // ... 앞으로는 아래에 계속 }
벡터의 첫 번째 텍스처의 크기가 애니메이션의 영역을 결정한다. 애니메이션 여기까지 왔으면 나머지는 MovieClip의 인스턴스를 생성하면 된다. MovieClip 생성자의 인수에서 얻은 텍스처 벡터를 지정한다.
import starling.display.MovieClip; private var myMovieClip:MovieClip; private function onAddedToStage(e:Event):void { //... 위에서 계속 // MovieClip 객체의 생성 myMovieClip = new MovieClip(frames); // 애니메이션 재생 시작 Starling.juggler.add(myMovieClip); addChild(myMovieClip); }
알겠지만, Tween뿐만 아니라 MovieClip의 재생도 Juggler을 사용한다. MovieClip도 IAnimatable의 서브클래스다. Juggler에 MovieClip을 추가하면 재생이 시작된다. 재생을 제어하는 세 가지 메소드가 포함되어 있다.
myMovieClip.play(); myMovieClip.pause(); myMovieClip.stop();
pause()를 실행한 다음에 play()를 실행하면 현재 상태부터 재생되지만 stop()을 실행한 다음에 play()를 호출하면 처음 부터 다시 재생된다. 애니메이션은 default로 반복 재생된다. 이 설정은 loop 속성을 설정하여 바꿀 수 있다. 재생 여부 isPlaying 속성을 확인한다. 애니메이션이 끝까지 재생되면 movieComplete 이벤트가 발생한다. 재생이 완료되면 다음 작업으로 이동하고자하는 경우에 사용할 수 있을 것이다.
myMovieClip.addEventListener(Event.MOVIE_COMPLETED, onMovieComplete);
애니메이션이 반복되는 경우에는 재생이 완료될 때마다 movieComplete 이벤트가 발생한다. MovieClip의 부모 Sprite가 Stage에서 제거되면 MovieClip 재생을 중지해야한다. 그래서 다음과 같은 코드를 추가한다.
addEventListener(Event.REMOVED_FROM_STAGE,onRemovedFromStage); private function onRemovedFromStage(event:Event):void { Starling.juggler.remove(myMovieClip); }
Juggler의 remove() 메소드는 MovieClip뿐만 아니라 Tween도 삭제할 수 있다. 또 다른 MovieClip 사용 MovieClip의 생성자의 두 번째 파라미터에 임의의 프레임 속도를 지정할 수 있다.
// 40 fps를 지정 myMovieClip = new MovieClip (frames, 40);
MovieClip마다 다른 프레임 속도를 지정할 수 있다. 재생중인 프레임 속도는 fps 속성에서 가져올 수 있다. 또한 fps 속성 값을 설정하여 프레임 속도를 변경할 수도 있다. 그리고 모든 프레임에 대해 별도의 재생 시간을 지정할 수 있다. 아래는 5 번째 프레임을 2 초 동안 재생하도록 설정하는 예다.
myMovieClip.setFrameDuration(5, 2);
나중에 프레임을 추가하거나 삭제할 수도 있다. 이를 위해서 addFrameAt() removeFrameAt() 메서드를 사용한다. 아래는 5 프레임 애니메이션을 10번 째 프레임에 추가하거나 5 프레임을 제거하는 것이다.
myMovieClip.addFrameAt(5, frames [10]); myMovieClip.removeFrameAt(5);
프레임의 텍스처를 바꿀 수도 있다. setFrameTexture() 메소드를 사용하면 된다.
myMovieClip.setFrameTexture(5, frames [10]);
프레임에 소리를 연결할 수도 있다. setFrameSound() 메서드를 사용한다.
[Embed (source = "step.mp3")] private static const StepSound:Class; myMovieClip.setFrameSound (5, new StepSound() as Sound);
이제 5번 째 프레임이 표시되는 타이밍에 지정한 소리가 재생된다. 프레임에 직접 스크립트를 연결할 수는 없다. 그 대신 Juggler.delayCall() 메서드를 사용할 수 있다. 이상에서 Starling 애니메이션의 기본은 끝이다. Starling 표현의 유연성은 CPU 렌더링보다 미약하다. 그러나 빠른 렌더링을 안정적으로 해야할 경우에 선택하면 적당할 것이다.
원본 : http://cuaoar.jp/2011/12/movieclip-starling.html
package { import starling.events.Event; import starling.display.Sprite; import starling.display.DisplayObject; import starling.display.Image; import starling.textures.Texture; import starling.textures.RenderTexture; import starling.textures.TextureAtlas; import starling.display.MovieClip; import starling.core.Starling; public class Demo extends Sprite { [Embed(source = "patch.png")] private var MyBitmap:Class; [Embed(source = "patch.xml",mimeType = "application/octet-stream")] private var MyXml:Class; private var _arrMovieClips:Array; public function Demo() { // addedToStage 이벤트에 대한 리스너 추가 addEventListener(Event.ADDED_TO_STAGE,onAddedToStage); } private function onAddedToStage(e:Event):void { // 텍스처 아틀라스로드 var myTexture:Texture = Texture.fromBitmap(new MyBitmap()); // 텍스처 아틀라스의 영역 정보 가져오기 var myXml:XML = XML(new MyXml()); // TextureAtlas 인스턴스 생성 var myTextureAtlas:TextureAtlas = new TextureAtlas(myTexture,myXml); // "walk_"를 식별 이름으로 가진 Texture 벡터 생성 var frames:Vector.<Texture>=myTextureAtlas.getTextures("patch_"); // MovieClip 객체의 생성 _arrMovieClips = []; var count:int = 20; for(var i:int=0;i<count;i++){ var myMovieClip = new MovieClip(frames, 60); myMovieClip.x = 20+((stage.stageWidth-90)/count)*i; myMovieClip.y = stage.stageHeight - myMovieClip.height >> 1; Starling.juggler.add(myMovieClip); _arrMovieClips.push(myMovieClip); addChild(myMovieClip); } // myMovieClip.setFrameDuration(5, 2); // myMovieClip.addFrameAt(5,frames[10]); // myMovieClip.removeFrameAt(5); } private function setAlign(inTarget:DisplayObject):void{ inTarget.x = stage.stageWidth >> 1; inTarget.y = stage.stageHeight >> 1; } public override function dispose():void { removeEventListener(Event.ADDED_TO_STAGE,onAddedToStage); super.dispose(); } } }
글
[Starling-06] 비트맵을 표시하는 방법
Image와 Texture 클래스
Starling 프레임워크는 비트맵을 표시하기 위하여 Image를 사용한다. Image는 Quad의 서브클래스다. 따라서 Quad에서 비트맵 처리 기능을 추가한 것이 Image 클래스가 되는 것이다. Flash Player 표시 객체는 Bitmap에 BitmapData가 있지만 Starling에서는 Image에 Texture가 있다. Texture에 로드할 수 있는 이미지 포멧은 PNG, JPEG, JPEG-XR, ATF 이렇게 4 종류이다. 각 형식마다 전용 읽기 함수가 포함되어 있다. 예를 들어, Bitmap 객체에서 Texture 객체를 만드는 경우 다음과 같다.
var myTexture:Texture = Texture.fromBitmap(myBitmap);
다음은 생성된 Texture에서 Image 객체를 생성하고 표시 목록에 추가하는 것만으로 화면에 비트맵이 표시된다. 아래는 myBitmap.png라는 파일을 표시하는 예제다. 포함된 비트맵 처리 부분을 제외하면 사각형을 표시하는 샘플 코드와 거의 동일하다.
package { import starling.events.Event; import starling.display.Sprite; import starling.display.Image; import starling.textures.Texture; import flash.display.Bitmap; public class Demo extends Sprite { // PNG 파일을 포함 [Embed(source = "icon128.png")] private var MyBitmap:Class; private var myImage:Image; public function Demo() { // addedToStage 이벤트에 대한 리스너 추가 addEventListener( Event.ADDED_TO_STAGE , onAddedToStage); } private function onAddedToStage(e:Event):void { var myBitmap:Bitmap = new MyBitmap() as Bitmap; // Bitmap에서 Texture 오브젝트를 생성 var myTexture:Texture = Texture.fromBitmap(myBitmap); // Image 객체를 생성 myImage = new Image(myTexture); // 표시 목록에 추가 addChild(myImage); } public override function dispose():void { removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); super.dispose(); } } }
Starling의 Texture는 가로와 세로 픽셀 수가 2층(1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048)을 전제로하고 있는 것 같다. 다른 크기의 비트맵에서 Texture를 생성하면 Starling은 자동으로 가장 가까운 크기에 맞게 Texture를 다시 만든다.
벡터 이미지를 텍스처로보기
Flash Player 표시 객체는 벡터 데이터를 비트맵화 하는 기능을 가지고 있다. 이것을 이용하면 AS3 및 Flash Professional 기능을 사용하여 그린 벡터 이미지에서 Image 개체를 생성할 수 있다. 처리 효율을 생각하면 일부러 런타임에 비트맵을 생성하는 것보다는 사전에 비트맵화해 두는 것이 좋을 것이다. 따라서 이 방법은 동적으로 텍스처를 생성해야하는 경우에 필요하다. 구체적인 예를 소개한다. 아래는 Sprite의 graphic 특성에 그린 원을 텍스처로 변환하여 Image 객체로 화면에 표시하는 예제다.
private function onAddedToStage(e:Event):void{ var radius:uint = 100; // Flash Player의 Sprite를 생성 var shape : flash.display.Sprite = new flash.display.Sprite(); // 임의의 색상을 결정 graphics 속성 원을 그린다 var color:uint = Math.random() * 0xFFFFFF; shape.graphics.beginFill(color); shape.graphics.drawCircle(radius, radius, radius); shape.graphics.endFill(); // Sprite를 BitmapData로 변환; var buffer : BitmapData = new BitmapData (radius * 2, radius * 2, true, color); buffer.draw(shape); // BitmapData에서 Texture를 생성 var myTexture:Texture = Texture.fromBitmapData(buffer); // Texture에서 Image를 만듭니다 myImage = new Image(myTexture); // 표시 목록에 추가 addChild(myImage); }
이 경우 코드에서 Flash Player 표시 객체를 사용하게되므로, Starling 표시 객체와 혼동하지 않도록 주의가 필요하다.
동적 텍스처의 업데이트
위의 방법을 사용하면 동적으로 생성한 비트맵을 볼 수 있다. 그러나 표시 비트맵을 업데이트하려면 벡터 이미지 만들기부터 다시 한다. 즉, CPU 그리기 및 GPU 렌더링이 모두 행해지는 것은 그다지 효율적 수단은 아닌 것 같다.(항상 피해야한다는 의미는 아니다.)
이럴 때는 RenderTexture 클래스가 유용하다. RenderTexture은 Texture의 서브 클래스에서, "Starling 표시 객체"를 기존의 Image 객체에 그리는 기능을 제공한다. 이는 GPU만을 사용하기 때문에 효율적이다. RenderTexture은 "Flash Player 표시 객체"를 취급하지 않기 때문에 이미 준비되어 있는 Image 객체를 비트맵으로 합성하는 방법이 기본이다. 특히 미리보기 그래픽을 알고 있는 경우에 유효하다. RenderTexture 생성자는 그리기 영역의 크기만을 지정한다. 이 시점에서 RenderTexture 아직 새하얀(투명)상태다.다음으로 RenderTextire 인스턴스를 사용하여 Image의 인스턴스를 생성하는 단계로 위 코드에서 보았던 방식 그대로다.
import starling.textures.RenderTexture; private var myRenderTexture:RenderTexture; private function onAddedToStage(e : Event):void { // RenderTexture 객체를 생성 myRenderTexture = new RenderTexture(320,480); // RenderTexture에서 Image를 만든다 var canvas:Image = new Image(myRenderTexture); // 표시 목록에 추가 addChild(canvas); }
이제 그리기 영역 지정이 완료되었다.
다음은 RenderTexture를 업데이트하면 화면 표시도 자동으로 업데이트된다. RenderTexuture에 Starling의 표시 객체를 그리려면, draw() 메서드를 사용한다. 그릴 표시 객체는 위치, 비율, 각도, 알파를 지정할 수 있다. 아래 예제에서는 RenderTexture의 x 좌표와 y 좌표를 지정하고 있다.
myImage.x = 10; myImage.y = 20; myRenderTexture.draw(myImage);
많은 표시 객체를 그리고 싶은 경우를 위해, drawBundled() 메소드도 포함되어 있다. 이것은 여러 표시 객체 그리기를 일괄적으로 실행하는 것으로, 처리 효율의 향상을 노린 것이다. GPU를 효율적으로 사용하기 위해서 GPU에 대한 그리기 요청 횟수를 줄이는 것은 중요하다. drawBundled()의 인수는 함수를 지정한다. 함수에서 draw()은 함께 처리된다. 아래는 이미지를 조금씩 회전시키는 예제다.
myRenderTexture.drawBundled(rot); private function rot():void { var count:int = 30; var diff:Number = 2 * Math.PI / count; for (var i:int = 0; i < count; ++i) { myImage.rotation = diff * i; myRenderTexture.draw(myImage); } }
행하면 아래와 같이된다.
이미지는 Starling 샘플에 포함된 것을 사용했다. RenderTexture에 그려진 내용을 모두 삭제하려면 clear() 메소드를 사용한다.
자원의 해제
불필요하게 된 텍스처가 있는 경우에는 dispose()가 리소스를 해제한다. 특히 RenderTexture은 일시적인 이용이 많다고 생각되므로 잊지 말아야한다.
public override function dispose():void { myRenderTexture.dispose(); super.dispose(); }
원본 : http://cuaoar.jp/2011/12/starling-flash-1.html
package { import starling.events.Event; import starling.display.Sprite; import starling.display.Image; import starling.textures.Texture; import flash.display.BitmapData; import flash.display.Bitmap; import starling.textures.RenderTexture; public class Demo extends Sprite { [Embed(source = "icon128.png")] private var MyBitmap:Class; private var myRenderTexture:RenderTexture; private var myImage:Image; public function Demo() { // addedToStage 이벤트에 대한 리스너 추가 addEventListener( Event.ADDED_TO_STAGE , onAddedToStage); } private function onAddedToStage(e:Event):void { // RenderTexture 객체를 생성 myRenderTexture = new RenderTexture(330,330); // RenderTexture에서 Image를 만든다 var canvas:Image = new Image(myRenderTexture); canvas.x = stage.stageWidth- canvas.width >> 1; canvas.y = stage.stageHeight- canvas.height >> 1; // 표시 목록에 추가 addChild(canvas); var myBitmap:Bitmap = new MyBitmap() as Bitmap; // Bitmap에서 Texture 오브젝트를 생성 var myTexture:Texture = Texture.fromBitmap(myBitmap); // Image 객체를 생성 myImage = new Image(myTexture); myImage.x = 165; myImage.y = 165; addEventListener(Event.ENTER_FRAME, run); } private function run(e:Event):void{ myRenderTexture.drawBundled(rot); } private function rot():void { var count:int = 8; var diff:Number = (Math.random()*2) * Math.PI / count; for (var i:int = 0; i < count; ++i) { myImage.rotation += diff * i; myRenderTexture.draw(myImage); } } public override function dispose():void { removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); removeEventListener(Event.ENTER_FRAME, run); myRenderTexture.dispose(); myImage.dispose(); super.dispose(); } } }
글
[Starling-05] Tween 클래스를 이용한 애니메이션
코드는 다음과 같다. 먼저 Tween 생성자에서 대상 객체와 시간을 지정하여 다음 animate() 메소드를 사용하여 변화하는 속성의 이름과 마지막 값을 설정한다. 여러 특성을 변화시키는 경우 animate()를 계속해서 부르면 된다.
// myObject을 2 초 걸쳐 가로 50px, 세로 80px 이동하는 애니메이션 지정
var myTween:Tween = New Tween(myObject, 2.0);
myTween.animate( "x", myObject.x + 50);
myTween.animate( "y", myObject.y + 80);
아래 예제는 onAddedToStage() 리스너 함수에 적용한 것이다. 사각형을 4초에 걸쳐 (0,0)에서 (220, 380) 좌표로 이동시키는 것이다.
package { import starling.animation.Tween; import starling.core.Starling; import starling.display.Quad; import starling.events.Event; private function onAddedToStage(e:Event):void { myQuad = new Quad(100,100); myQuad.color = 0x00FF00; // Tween 객체의 생성 var myTween:Tween = new Tween(myQuad,4.0); // 변화시키는 속성 지정 myTween.moveTo(220, 380); // Juggler에 Tween 객체를 추가하려면 Starling.juggler.add(myTween); } }
이 샘플에서는 animate() 메소드 대신 moveTo() 메소드를 사용했다. moveTo()는 x좌표와 y좌표를 동시에 이동 시킬 때 유용한 방법이다. 그 외에도 비슷한 방법으로 비율을 바꾸는 scaleTo()와 alpha를 바꾸는 fadeTo() 등이 제공되고 있다. 각도를 바꾸는 방법은 아직 없기 때문에 회전할 때는 animate()를 사용한다.
import starling.utils.deg2rad; var myTween:Tween = new Tween (object, 2.0); myTween.scaleTo(2); myTween.fadeTo(0); myTween.animate( "rotation", deg2rad (45)); Starling.juggler.add(myTween);
위 예제에서 사용한 deg2rad()는 각도를 라디안으로 변환하는 함수다. Starling 프레임워크에서 지원. Juggler 클래스 위 예제에서 살펴보면 Tween 인스턴스에 필요한 설정을 한 후, Tween 인스턴스를 Starling의 juggler이라는 속성에 추가했다. 이는 애니메이션의 시작을 알리는 신호라고 보면 된다. Juggler은 객체의 "시간을 진행하는" 클래스다.
그러나 IAnimatable이라는 인터페이스를 상속하는 객체에만 적용이 된다. Tween은 IAnimatable을 상속하고 있다. Juggler는 객체를 전달하면 해당 객체의 시간을 진행한다. 그리고 객체에 대해 지정된 시간이 지나면 객체에 대한 참조를 자동으로 해제한다. 그런데 Juggler는 delayCall()이라는 메소드가 있다. 이 것은 임의의 함수를 지정한 시간이 지나면 호출하도록 Juggler에게 지시하는 것이다. 호출 함수에 인수를 전달할 수도 있다.
아래는 1초 후에 myFunc()함수를 호출하면서 "Hello"라는 인수를 전달하는 예제다.
Starling.juggler.delayCall (myFunc, 1.0, "Hello"); private function myFunc (message:String):void{ trace (message); }
애니메이션의 시간과 함수의 실행 시점을 같은 Juggler을 통해서 관리함으로써 양자를 완벽하게 동기화시킬 수 있어 편리하다. Juggler 객체는 Starling 클래스를 제공하기 위해 일반적으로 이 것을 사용하여 애니메이션을 시작하면 충분하다. 단, 애니메이션을 개별적으로 제어하고 싶은 경우에는 Juggler 객체를 생성하는 것이 유용할 수 있겠다.
Juggler 객체를 직접 관리하는 경우 EnterFrame 이벤트에 대한 advanceTime() 메소드를 호출하도록 한다. 또한 dispose()에서 리소스 해제 처리가 필요할지도 모른다. easing 함수 지정 Tween에는 여분의 함수를 지정할 수 있다. easing 함수의 종류는 생성자의 3 번째 인수로 전달한다. 기본 값은 linear다. 생성자에서 설정한 easing 함수는 애니메이션이 시작한 이후에는 변경할 수 없다. Tween 객체의 transition 속성에서 값을 참조만 가능하다.
import starling.animation.Transitions; var myTween:Tween = new Tween (myQuad, 4, Transitions.EASE_OUT_BOUNCE );위 예제에서는 easing 함수 easeOutBounce를 지정하고 있다. 여기에 지정 가능한 값은 Transitions 플래스에 정의되어 있다.
아래는 Starling 저자의 사이트에 게재되어 있는 easing 함수의 동작 그래프다. 참고.
섬세한 조정은 허용하지 않는다. 이 점은 Edge 및 Flex와 같다. Tween 진행 상태 알림 Tween은 애니메이션의 시작, 진행, 종료를 알리는 함수를 설정할 수 있다. AS2의 이벤트 핸들러와 비슷하게 사용한다. 구체적인 함수 이름은 각각 onStart(), onUpdate(), onComplete()다. onStart()와 onComplete()는 한 번씩, onUpdate()는 업데이트 프레임 수만큼 실행한다. 아래는 3개의 함수를 설정한 예다.
private function onAddedToStage(e:Event):void { myQuad = new Quad(100,100); myQuad.color = 0x00FF00; var myTween:Tween = new Tween(myQuad,4,Transitions.EASE_OUT_BOUNCE); myTween.moveTo(220, 380); Starling.juggler.add(myTween); myTween.onStart = onStart; myTween.onUpdate = onProgress; myTween.onComplete = onComplete; addChild(myQuad); } private function onStart():void { trace("트윈이 시작되었습니다"); } private function onProgress():void { trace("트윈 실행 중"); } private function onComplete():void { trace("트윈이 완료되었습니다"); }
애니메이션의 전처리와 후처리를 실시하고 싶은 경우에는 도움이 될 것이다. 다음에는 Starling의 텍스처의 사용법을 소개한다.
원문 : http://cuaoar.jp/2011/12/tween-starling.html
package { import starling.events.Event; import starling.core.Starling; import starling.display.Quad; import starling.utils.deg2rad; import starling.display.Sprite; import starling.animation.Tween; import starling.animation.Transitions; public class Demo extends Sprite { private var myQuad:Quad; public function Demo() { // addedToStage 이벤트에 대한 리스너 추가 addEventListener( Event.ADDED_TO_STAGE , onAddedToStage); } private function onAddedToStage(e:Event):void { myQuad = new Quad(100,100); myQuad.setVertexColor(0, 0xFFFF00); myQuad.setVertexColor(1, 0xFF0000); myQuad.setVertexColor(2, 0x00FF00); myQuad.setVertexColor(3, 0x0000FF); myQuad.pivotX = myQuad.width >> 1; myQuad.pivotY = myQuad.height >> 1; // Tween 객체의 생성 var myTween:Tween = new Tween(myQuad, 2.0, Transitions.EASE_IN_OUT); // 변화시키는 속성 지정 myTween.moveTo(stage.stageWidth >> 1, stage.stageHeight >> 1); // Juggler에 Tween 객체를 추가하려면 Starling.juggler.add(myTween); Starling.juggler.delayCall(myFunc, 2.0); addChild(myQuad); } private function myFunc():void{ var myTween:Tween = new Tween(myQuad,4.0, Transitions.EASE_OUT_ELASTIC); myTween.animate( "rotation", myQuad.rotation+deg2rad(90)); myTween.onStart = onStartHandler; myTween.onUpdate = onUpdateHandler; myTween.onComplete = onCompleteHandler; Starling.juggler.add(myTween); } private function onStartHandler():void{ var myTween:Tween = new Tween(myQuad,4.0, Transitions.EASE_OUT_ELASTIC); if(myQuad.scaleX == 2.0){ myTween.scaleTo(1); }else{ myTween.scaleTo(2); } Starling.juggler.add(myTween); } private function onUpdateHandler():void{ trace("트윈 실행 중"); } private function onCompleteHandler():void{ myFunc(); } public override function dispose():void { removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); super.dispose(); } } }
글
[Starling-04] EnterFrame 이벤트를 이용한 애니메이션
이번에 소개하는 방법은 기존의 Flash 컨텐츠를 재사용하기 쉬운 방법이다. 이번 예제에서는 그라데이션으로 사각형에 색을 채우고 회전시켜 본다. Quad 클래스는 정점마다 색을 지정하는 메소드가 있어서 편리하다. 메소드는 setVertexColor() 이다. setVertexColor()의 첫 번째 인자는 정점의 번호다. 번호는 0부터 시작하여 왼쪽, 오른쪽 위 및 왼쪽 아래 오른쪽 아래 정점이다. 두 번째 인수는 색상을 지정한다.
// myQuad.color = 0xABCDEF; 대신 다음을 작성
myQuad.setVertexColor (0, 0x000000);
myQuad.setVertexColor (1, 0xFF0000);
myQuad.setVertexColor (2, 0x00FF00);
myQuad.setVertexColor (3, 0x0000FF);
이렇게 지정하면 나머지는 자동으로 각 정점 사이의 픽셀의 색이 보완되기 때문에 사각형에 그라데이션이 입혀진다.
EnterFrame 이벤트 리스너 사용
본론으로 돌아가서 EnterFrame 이벤트 리스너를 추가하는 방법이다. 사용하는 Event 클래스가 Starling 프레이워크에 포함된 클래스라는 점에 주의가 필요하다. 그러나 지금까지 AS3의 이벤트 처리 코드를 구현해 봤다면 별 어려움 없이 사용할 수 있을 것이다. (리스너 함수 삭제 타이밍이 약간 다르다 : 아래)
아래는 EnterFrame 이벤트를 사용하여 프레임마다 사각형을 회전시키는 샘플이다. 이전 예제의 onAddedStage()를 수정한 것이다.
private function onAddedToStage(e:Event):void {
// Quad의 인스턴스를 생성
myQuad = new Quad(200,200);
// 각 정점의 색상을 지정 myQuad.setVertexColor(0,0x000000);
myQuad.setVertexColor(1,0xFF0000);
myQuad.setVertexColor(2,0x00FF00);
myQuad.setVertexColor(3,0x0000FF);
// Quad의 인스턴스를 중앙에 표시;
myQuad.x = stage.stageWidth - myQuad.width >> 1;
myQuad.y = stage.stageHeight - myQuad.height >> 1;
// Sprite에 Quad 인스턴스를 추가
addChild(myQuad);
// EnterFrame 이벤트 리스너 추가
myQuad.addEventListener( Event.ENTER_FRAME , onEnterFrame);
}
private function onEnterFrame(e:Event):void {
// Quad의 인스턴스를 회전
if (e.currentTarget as Quad) {
myQuad.rotation += .01; }
}
프레임마다 rotation 값을 0.01씩 증가시키고 있기 때문에 위 코드를 실행하면 사각형이 시계 방향으로 회전한다. 이 때 회전의 중심점은 사각형의 왼쪽 상단 모서리가 된다. Starling 표시 객체에는 기준점을 지정하기 위한 속성 pivotX과 pivotY가 있다. 이들을 사용하면 사각형 내의 임의의 점을 기준으로 회전시킬 수 있다. pivotX와 pivotY의 초기값은 모두 0이다. 즉, 표시 객체의 기본 등록 포인트는 왼쪽 모서리가 된다. 여기서는 기준점을 사각형의 중심으로 변경해 보자.
// 기준점을 Quad 인스턴스의 중심으로 설정
myQuad.pivotX = myQuad.width >> 1;
myQuad.pivotY = myQuad.height >> 1;
이렇게 기준점을 변경하면 표시 위치의 기준도 다르기 때문에 표시 위치가 어긋난다. 이번 예에서는 사각형의 폭과 높이의 절반인 100 픽셀씩 왼쪽과 위로 이동한다.
// Quad의 인스턴스를 중앙에 표시
myQuad.x = (stage.stageWidth - myQuad.width >> 1) + myQuad.pivotX;
myQuad.y = (stage.stageHeight - myQuad.height >> 1) + myQuad.pivotY;
myQuad.pivotX = myQuad.width >> 1 이므로, 아래와 같이 축약할 수가 있을 것이다.
// Quad의 인스턴스를 중앙에 표시
myQuad.x = stage.stageWidth >> 1;
myQuad.y = stage.stageHeight >> 1;
이상으로 화면의 중앙에 위치하는 사각형을 중심점을 기준으로 회전해봤다.
자원의 개방(메모리 해제)
Starling 표시 객체에는 dispose()라는 메소드가 있다. 이는 표시 객체가 삭제되는 타이밍을 알리는 표시객체에서 사용하는 리소스를 해제하기 위한 메소드이다. Starling에서 표시 객체의 서브 클래스를 정의할 때 dispose() 실행을 잊지 않도록 한다. 그렇지 않으면 메모리 누수의 원인이 될 수도 있다.
아래 예제 코드는 dispose()를 사용하는 예다.
public override function dispose():void {
removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
myQuad.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
super.dispose();
}
샘플은 이벤트 리스너를 제거하는 것이다. Starling 이벤트 리스너에 약한 참조를 사용할수 없기 때문에 삭제 타이밍에 확실히 삭제하도록 한다. 메소드의 마지막 행에서 super.dispose()를 호출한다. 이렇게 하면 객체에 addChild()로 추가된 모든 자식 객체에 대해 dispose()가 호출된다. 따라서 myQuad.dispose()는 명시적으로 기술할 필요가 없다. 기타 표시 목록에 추가되지 않은 객체가 있다면 dispose() 실행은 필수다.
또한 표시 목록에 추가할 수 없는 객체에서 리소스의 개방이 필요한 객체가 있다면 여기에 필요한 처리를 기술한다. 예를 들어, 다른 객체와 공유하는 전용 텍스처(여기서는 myTexture)를 참조하고 있다면 이 객체를 소멸한다면 myTexture.dispose()를 실행하여 myTexture가 확보한 비트맵 메모리 공간을 해제해야 한다.
원문 : http://cuaoar.jp/2011/12/enterframe-starling.html
package { import starling.events.Event; import starling.display.Quad; import starling.display.Sprite; public class Demo extends Sprite { private var myQuad:Quad; public function Demo() { // addedToStage 이벤트에 대한 리스너 추가 addEventListener( Event.ADDED_TO_STAGE , onAddedToStage); } private function onAddedToStage(e:Event):void { // Quad의 인스턴스를 생성 myQuad = new Quad(200,200); // 각 정점의 색상을 지정 myQuad.setVertexColor(0,0xFFFFFF); myQuad.setVertexColor(1,0xFF0000); myQuad.setVertexColor(2,0x00FF00); myQuad.setVertexColor(3,0x0000FF); // 기준점을 Quad 인스턴스의 중심으로 설정 myQuad.pivotX = myQuad.width >> 1; myQuad.pivotY = myQuad.height >> 1; // Quad의 인스턴스를 중앙에 표시 myQuad.x = stage.stageWidth >> 1; myQuad.y = stage.stageHeight >> 1; // Sprite에 Quad 인스턴스를 추가 addChild(myQuad); // EnterFrame 이벤트 리스너 추가 myQuad.addEventListener( Event.ENTER_FRAME , onEnterFrame); } private function onEnterFrame(e:Event):void { // Quad의 인스턴스를 회전 if (e.currentTarget as Quad) { myQuad.rotation += .01; } } public override function dispose():void { removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); myQuad.removeEventListener(Event.ENTER_FRAME, onEnterFrame); super.dispose(); } } }
글
[Starling-03] Flash 컨텐츠 표시의 기본
개발 환경 준비 Starling의 개발 환경은 Flash Player 11과 AIR 3가 필요하다. 툴은 Flash Builer 4.6을 권장한다. Flash Professional CS5 또는 CS5.5를 사용하는 경우 다음 문서에서 소개하는 기능확장이 편리하다.
Flash Professional CS5 or CS5.5에 Flash Player 11 설정 MXP
그리고 Starling framework는 github에서 구할 수 있다.
PrimaryFeather / Starling - Framework / zipball
위 링크에서 다운로드한 zip에 포함되어 있는 SWC 파일을 경로에 추가하면 Starling 애플리케이션을 개발 할 수 있다. 또한 혼합 모드에 direct를 지정하지 않으면 제작에 성공해도 화면에 표시할 수 없다. 따라서 SWF 경우 wmode = direct를, AIR일 경우 <renderMode> direct </renderMode> 로 지정하는 것을 잊지 말아야한다.
Starling 인스턴스 생성 Starling로 렌더링하려면 먼저 Starling의 인스턴스를 생성한 다음 start() 메소드를 호출한다. 이 부분은 어떤 Starling을 개발에도 그대로 사용할 수 있다. 아래가 가장 간단한 예제이므로 사용해보자. fla 파일에서 document class로 사용하는 것이 편하다.
package{ import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import starling.core.Starling; public class StartStarling extends Sprite{ private var myStarling:Starling; public function StartStarling(){ stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; // Starling의 인스턴스를 생성 myStarling = new Starling(MyStarlingSprite,stage); // 그리기 작업을 시작 myStarling.start(); } } }
Starling의 생성자 첫 번째 인수는 Starling의 Sprite다. 이 Sprite의 내용이 실제 화면 그리기에 사용된다. 그리기 정보는 Flash Player의 Sprite와 마찬가지로 자식 객체의 목록 구조와 같이 유지된다. 두 번째 인수는 표기 객체의 그리기 stage다. Starling 생성자는 5개의 인수를 가지지만 3 번째 이후 인수는 기본값을 가지고 있기 때문에 일반적으로 지정할 필요가 없다. 명시적으로 소프트웨어에서 3D 렌더링을 사용하려는 경우에는 5개의 인수를 작성할 수 있다. 마지막 인수가 혼합 모드를 지정한다.
// 5 번째 째의 인수로 그리기 모드를 지정 myStarling = new Starling (Game, stage, null, null, Context3DRenderMode.SOFTWARE );
이렇게 할 경우, 어떤 환경에서도 GPU로 렌더링 되지 않고 CPU로 처리하게 된다. 만약 실행 중에 소프트웨어 렌더링으로 대체되어 있는지 확인하고 싶다면 Starling 인스턴스 context.driverInfo 속성을 통해서 확인할 수 있다. 다음은 context3DCreate 이벤트를 사용하여 Stage3D를 초기화 한 후, 소프트웨어 렌더링의 프레임 속도를 절반으로 설정하는 예를 보여준다.
stage.stage3Ds[0].addEventListener (Event.CONTEXT3D_CREATE,onContext3DCreate); private function onContext3DCreate (event : Event) : void { if (Starling.context.driverInfo.toLowerCase() indexOf ( "software ")!=- 1){ Starling.current.nativeStage.frameRate = 30; } }
Starling 런타임 오류 검사를 수행하려는 경우에는 start()를 호출하기 전에 다음 설정을 추가한다.
myStarling.enableErrorChecking = true;
그러나 오류 검사 및 성능에 미치는 영향이 크기 때문에 디버깅 이외에는 설정하지 않는 것이 좋다. 기타 Starling 클래스의 기능은 다음 기회에 소개할 예정이다. 우선 온라인 문서는 이 곳에서 확인할 수 있다. Starling @ Starling Framework Reference
사용자 정의 Sprite 만들기
(참고 : 앞으로 Sprite와 같은 클래스 이름은 설명이 없는 한 모두 Starling 프레임워크에 종속된 클래스다. 익숙해질 때까지 실수에 주의가 필요하다.)
다음은 Starling의 생성자의 첫 번째 인자로 지정하는 Sprite 사용자 정의 클래스를 만든다. 만드는 단계는, 표시 오브젝트를 작성하고 Sprite에 addChild() 메소드를 추가하는 기존의 방식과 비슷하다. Stage3D의 그리기 단위는 삼각형이지만 Starling은 삼각형 2개를 기본으로 한다. 따라서 사각형에 해당하는 Quad 클래스의 인스턴스를 표시하는 방법에서 시작한다. 아래의 샘플은 화면에 사각형을 표시하는 것을 수행한다.
package { import Starling.display.Quad; import Starling.display.Sprite; public class MyStarlingSprite extends Sprite { private var myQuad:Quad; public function MyStarlingSprite() { // Quad의 인스턴스를 생성 myQuad = new Quad(200,200); // 우선 채우기 색상을 지정 myQuad.color = 0xABCDEF; // Sprite에 Quad 인스턴스를 추가 addChild(myQuad); } } }
위 코드를 실행하면 사각형이 화면 왼쪽에 그려진다. 사각형을 화면 중앙에 표시하려면 다음과 같이 Quad의 좌표를 설정한다.
단, 위의 코드는 stage 속성에 대한 액세스를 포함한다. 따라서 Sprite가 초기화가 끝나기 전에 실행되면 오류가 발생한다. 그래서 addedToStage 이벤트를 이용한다. 이 addedToStage 이벤트는 Starling 이벤트지만, Flash Player의 addedToStage 이벤트 처럼 Stage가 이용 가능하게 된 것을 알려준다.
myQuad.x = stage.stageWidth - myQuad.width>> 1; myQuad.y = stage.stageHeight - myQuad.height>> 1;
package { import Starling.events.Event; import Starling.display.Quad; import Starling.display.Sprite; public class MyStarlingSprite extends Sprite { private var myQuad:Quad; public function MyStarlingSprite() { // addedToStage 이벤트에 대한 수신기를 추가 addEventListener( Event.ADDED_TO_STAGE , onAddedToStage); } private function onAddedToStage(e : Event ):void { // Quad의 인스턴스를 생성 myQuad = new Quad(200,200); myQuad.color = 0xABCDEF; myQuad.x = stage.stageWidth - myQuad.width >> 1; myQuad.y = stage.stageHeight - myQuad.height >> 1; // Sprite에 Quad 인스턴스를 추가 addChild(myQuad); } } }
원문 : http://cuaoar.jp/2011/12/starling-flash.html
글
[Starling-02] Starling 2D framework 소개
이번에는 조금 더 자세하게 Starling을 소개한다.
Starling 아키텍처
Starling은 Stage3D로 구축되어 있다. Stage3D는 데스크탑 환경에서 DirectX 및 OpenGL, 모바일 환경에서는 OpenGL ES2에 구축되어 있다. 따라서 OpenGL 등이 GPU의 API를 직접 호출하기 때문에 Starling이 두 계층 사이에서 GPU를 사용할 수 있는 것이다.
1. Starling
2. Stage3D
3. OpenGL, DirectX, OpenGL ES2
3. GPU
1. starling.events.EventDispatcher
2. starling.display.DisplayObject
3. starling.display.DisplayObjectContainer
MovieClip은 조금 다르다. Image class의 서브 클래스이다. 아래와 같은 계층관계를 가지고 있다.
1. starling.display.DisplayObject
2. starling.display.Quad
3. starling.display.Image
4. starling.display.MovieClip
Image의 서브 클래스인 MovieClip은 GPU를 활용하기 위해 최적화되어 있기 때문에 기존에 타임라인 애니메이션을 좋아하는 사람은 활용도가 높다. 그리고 Quad라는 새로운 클래스가 등장했는데 Quad는 사각형 영역을 그리기 위한 클래스다.
비트맵 이미지를 표시하려면 다음과 같다.
// 비트맵을 포함 [Embed (source = "myBitmap.png")] private static const myBitmap:Class; // 비트맵 텍스처를 생성 var texture:Texture = Texture.fromBitmap(new myBitmap()); // 텍스터를 사용하여 이미지 객체를 생성 var image:Image = new Image(texture); // 이미지의 표시 위치를 지정 image.x = 300; image.y = 150; // 이미지를 표시 addChild(image);
기존의 DisplayObject와 Starling을 동시에 사용하는 경우
Stage3D는 기존의 표시객체와 다른 레이어에 그려진다. 참고로 GPU에서는 비디오 재생을 StageVideo(FlashPlayer 10.2에서 도입) 레이어에 별도로 그려진다. 각 레이어의 관계는 아래와 같다.
1. 표시목록
2. Stage3D
3. StageVideo
각각이 독립된 레이어로 다른 레이어의 display 데이터에 직접 액세스할 수 없다. 예를 들어, StageVideo에서 재생중인 영상을 표시객체에 붙이는 것은 현재는 할 수 없다. 표시 목록과 Starling(즉 Stage3D)를 동시에 사용할 경우, 표시 목록이 레이어이므로 모든 표시 객체는 Starling의 객체 위에 표시된다. Stage3D는 프레임마다 모든 영역을 다시 그린다. 그리고 현재 버전에서는 Stage3D 객체를 투과할 수 없다. 따라서 StageVideo 위에 객체를 올리기 위해서는 Starling객체가 아닌 표시객체를 사용해야 한다.
Stage3D를 사용할 수 없는 경우
Starling의 Stage3D를 사용하려면 wmode를 direct로 지정해야 한다. wmode가 지정되지 않았거나 wmode가 다른 값으로 설정되어 있으면 런타임 오류가 발생한다. Starling은 오류가 발견되면 wmode가 올바르게 지정되지 않았다는 메시지를 출력한다. 따라서 HTML에서 플래시가 제대로 임베드 되지 않았을 경우, 쉽게 발견할 수 있다. wmode가 올바르게 지정되어 있어도 드라이버의 버전, 또는 GPU를 사용할 수 없는 경우에는 Stage3D가 SwiftShader로 대체되어 실행되기 때문에 원하는 속도를 내기 어렵다. FlashPlayer 11버전이 설치되어 있더라도 느리다면 드라이버 설치 버전이 최신인지 확인이 필요하다.
원문 : http://cuaoar.jp/2011/09/starling-actionscript-3-1.html
글
Starling에서 resize 적용
package { import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.geom.Rectangle; import starling.core.Starling; import flash.events.Event; public class Startup extends Sprite { private var mStarling:Starling; public function Startup() { stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; mStarling = new Starling(Demo, stage); mStarling.enableErrorChecking = false; mStarling.start(); stage.addEventListener(Event.RESIZE, onResizeHandler); addChild(new Gaze(true, "http://jasu.tistory.com")); } private function onResizeHandler(e:Event):void{ var viewPortRectangle:Rectangle = new Rectangle(); viewPortRectangle.width = stage.stageWidth; viewPortRectangle.height = stage.stageHeight; Starling.current.viewPort = viewPortRectangle; } } }이렇게 viewPort의 사이즈를 변경하면 resize 이벤트를 통해서 stage의 width, height 사이즈가 변경된 사이즈로 렌더링 된다. 그러나 렌더링되는 실제 해상도에는 변함이 없기 때문에 강제로 resize한 것처럼 스케일 비율이 무시된다. (stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; 로 설정을 했더라도 Starling(Stage3D)을 통해서 렌더링되는 영역은 별도) 따라서 아래와 같이 mStarling.stage의 stageWidth, stageHeight 값도 변경해야 실제 렌더링하려는 픽셀 사이즈를 확보할 수가 있다.
private function onResizeHandler(e:Event):void{ var viewPortRectangle:Rectangle = new Rectangle(); viewPortRectangle.width = stage.stageWidth; viewPortRectangle.height = stage.stageHeight; Starling.current.viewPort = viewPortRectangle; mStarling.stage.stageWidth = stage.stageWidth; mStarling.stage.stageHeight = stage.stageHeight; }
글
NHN의 플래시 폐지 기사를 보면서...
글
애플(Apple)의 마이크로소프트(Microsote)화?
글
스티브잡스의 발언과 플래시의 방향
Adobe CTO Kevin Lynch 가 Apple 디바이스에 플래시가 탑재하지 않는 것에 대하여 Adobe의 입장을 담았다.
원문 : http://blogs.adobe.com/conversations
/2010/02/open_access_to_content_and_app.html
컨텐츠 및 애플리케이션에 대한 오픈 액세스
게시자: Kevin Lynch, CTO
최근 출시되고 있는 우수한 디바이스에 Flash Player가 탑재되어 있지 않다는 사실에 적잖이 놀랐을 것입니다.
본래 Flash는 시장이 형성되지 않았던 약 15년 전에 펜(Pen) 컴퓨팅 태블릿을 위해 고안되었습니다. 초창기에는 낮은 대역폭의 벡터 그래픽을 지원했지만 지난 십여 년간 새로운 기능을 빠르게 추가해 나가면서, 웹의 틈새 시장을 공략했습니다. 현재는 새로운 활용 방안을 찾는 데 노력을 기울이고 있습니다. 일례로 웹상에서의 애니메이션, 스트리밍 오디오, 풍부한 인터랙션, 임의의 폰트, 양자간 오디오/비디오 커뮤니케이션, 로컬 저장소, 혁신적인 비디오 전달 등이 있습니다.
HTML 기능이 추가된 Flash는 상당히 높은 채택율을 기록하고 있는 가운데, 상위 웹 사이트의 85% 이상에서 Flash 컨텐츠를 사용하고 있으며, 인터넷이 연결된 컴퓨터의 98% 이상에서 Flash가 실행되고 있습니다. Flash는 웹상의 대부분의 캐주얼 게임, 비디오 및 애니메이션에 사용되고 있으며 Nike, Hulu, BBC, Major League Baseball 등 유명 브랜드에서 Flash를 사용하여 10억 이상에 달하는 전세계 사용자에게 매력적인 경험을 전달하고 있습니다.
Flash의 미래에 있어서 지금이 가장 중요한 시기입니다. 현재 PC 외에도 다양한 디바이스들이 하루가 다르게 출시되고 있으며, 많은 수의 디바이스가 인터넷 검색에 사용될 것입니다. 따라서 컨텐츠 및 애플리케이션 제작자와 사용자는 PC에서 Flash를 통해 얻어질 것으로 기대되는 경험, 즉 원활하고 일관되며 풍부한 경험을 디바이스에도 동일하게 전달하기 위해 많은 과제들을 해결해야 할 것입니다. Flash 엔지니어링 팀은 이를 실현하기 위해 다양한 디바이스에서 Flash Player를 철저히 분석해 왔습니다.
이러한 노력의 결과로 Adobe는 시장 선도적인 제조업체를 대상으로 한 스마트폰용 Flash Player 10.1을 선보이려고 합니다. 이러한 제조업체에는 스마트폰 뿐만 아니라 태블릿, 넷북, 인터넷 TV 등 시장을 형성하고 있는 Google의 Android, RIM의 Blackberry, Nokia, Palm Pre, 기타 업체들이 있습니다. Flash를 통해 고객은 전체 웹을 검색할 수 있으므로 브라우저에서 Flash를 사용하고 있는 이러한 디바이스는 경쟁력을 갖추게 됩니다. 이는 사실상 오픈 스크린 프로젝트(Open Screen Project)를 통해 이루어지고 있으며, Adobe는 50여 이상의 파트너와 협력하면서 다양한 디바이스에서 이를 실현하기 위해 노력하고 있습니다. 예를 들어, 최근 선보인 구글 넥서스원(Nexus One)은 Flash Player 10.1을 통해 탁월한 브라우저 경험을 선사할 것입니다.
그렇다면 Apple 디바이스에서 실행 중인 Flash는 어떨까요? Adobe는 Flash 기반으로 iPhone용 독립 실행형 애플리케이션을 구축할 수 있게 함으로써, Flash 기술은 이러한 디바이스에서의 사용을 넓혀 나가기 시작했습니다. 실제로 이러한 애플리케이션 중 일부는 FickleBlox, Chroma Circuit과 같은 Apple App Store(앱스토어)에서 이미 제공되고 있습니다. 이 동일한 솔루션은 iPad에서도 작동될 것입니다. Adobe는 이러한 디바이스의 브라우저에서 Flash를 지원하기 위한 준비를 마친 상태이며 이제 Apple에서 사용자를 위해 이를 허용하는 것만이 남아 있습니다. 그러나 Apple은 지금까지도 어도비의 이러한 협력 요청을 받아들이지 않고 있습니다.
장기적으로 볼 때, Flash에 대한 요구 사항을 대신하게 될 것으로 HTML이 꼽히고 있는 데, 특히 최근 개발된 HTML 5 버전이 출시되면 그 움직임은 본격화될 것으로 전망하는 사람들이 많아지고 있습니다. 그러나 오늘날은 물론이거니와 앞으로도 한 기술이 다른 한 기술을 대체하게 되지는 않을 것으로 예상됩니다.
Adobe는 HTML의 발전을 지원하고 있습니다. 앞으로 HTML이 진화를 거듭할수록 Adobe 소프트웨어에 더 많은 기능이 추가될 것으로 기대하고 있습니다. HTML이 Flash의 기능을 안정적으로 수행할 수 있다면, Adobe는 많은 시간과 수고를 덜 수 있지만, 사실상 그렇게 될 가능성은 거의 없습니다. 비디오 부문의 경우 현재 웹상에 있는 비디오의 75% 이상에서 Flash가 사용되고 있는 데도 불구하고, 브라우저 간 포맷 통일이 이루어질 수 없으므로 사용자와 컨텐츠 제작자는 비호환성이라는 문제를 안게 되고 결국 HTML 비디오 구현은 어두운 뒤안길에 남겨질 것입니다.
HTML의 진보에도 불구하고 Flash의 생산성과 표현 기능은 웹 커뮤니티에서 가희 독보적이라고 할 수 있습니다. Flash 팀은 지난 십여 년간 불가능하다고 여겼던 경험을 구현해 왔던 것처럼 앞으로도 더욱 혁신에 박차를 가할 것입니다. 1년도 채 안 되는 짧은 시간 동안 대다수의 웹 클라이언트를 업데이트할 수 있었던 Flash는 다양한 브라우저 전반에 걸쳐 HTML이 수행하는 것보다 훨씬 빠른 시간 내에 고객에게 이러한 혁신 기술을 선보일 수 있을 것으로 기대를 모으고 있습니다.
Adobe는 시간, 장소, 매체에 구애 받지 않고 아이디어와 정보를 생성하고 전달할 수 있는 방식을 혁신하고 있으며 디자이너와 개발자가 자신의 독창적인 아이디어를 마음껏 펼칠 수 있는 방법을 고안해 내는 데 전력을 다하고 있습니다. 또한 가장 생산성이 우수한 툴과 컨텐츠 및 애플리케이션을 배포할 수 있는 광범위한 기능을 창의적인 관리 방법과 접목시키는 것 또한 Adobe의 미션이라고 할 수 있습니다. Adobe는 고객이 목표를 달성하고 기술 격차를 극복할 수 있는 기술 혁신을 이뤄내는 데 필요한 모든 기술과 포맷을 지원하고 있습니다. Flash와 HTML이 결합되면 최고의 기술이 탄생하게 될 것입니다. 그렇게 되면 누구나 웹상에서 이 기술을 사용하여 최상의 경험을 제공할 수 있게 될 것입니다.
아이디어와 정보를 활용하는 것은 사용자가 선택한 컨텐츠와 애플리케이션을 보고 서로 인터랙션할 수 있는 개방된 에코시스템과 자유가 존재한다는 것을 의미합니다. 이 오픈 액세스 모델은 가장 효율적인 모델로 그간의 여러 시행착오를 거쳐 그 효과가 입증되었습니다. 이와 반대로 폐쇄 모델에서는 사용자가 개별 컨텐츠와 애플리케이션을 보거나 승인 및 거부할 수 있는 사항을 제조업체에서 결정하려고 했습니다. 웹은 디바이스에 상관없이 컨텐츠와 애플리케이션을 일관되게 액세스할 수 있는 개방된 환경으로 존재해야 한다는 데는 이견이 없을 것입니다.
Adobe는 고객들이 최상의 업무 성과를 달성하고 운영 체제, 브라우저 및 다양한 디바이스 전반에 걸쳐 효과적이고 안정적으로 전세계 모든 사용자에게 다가갈 수 있도록 지속적으로 지원해 나갈 것입니다.
번역 : adobe korea
아래 김국현님이 ZDnet에 올린 컬럼 내용이 공감이 갑니다. "후발주자의 입장에서 선두주자에게 타격을 입히는 가장 쉬운 방법은 게임의 룰을 바꿔 버리는 것이다."
http://www.zdnet.co.kr/Contents/2010/02/04/zdnet20100204092647.htm
글
AIR 애플리케이션 경연대회
<경품>
대상(1팀) : Adobe Flash CS4 Professional 1copy, 상장 수여
최우수상(1팀) : Adobe Flex Builder 3 Professional 1copy, 상장 수여
우수상(1팀) : Filco Majestouch 기계식 키보드, 상장 수여
장려상(4팀) : 우야꼬의 Flash CS4로 만드는 AIR 1.5 서적, 상장 수여
<특전>
입상한 7팀 중 대상 1팀과 최우수상 1팀에게는 2010년 ACC(Adobe Community Champion) 후보가 될수 있는 자격을 부여해 드립니다.
<일정>
선정기준 : 응모된 작품 중 ACC(Adobe Community Champion)이 심사해 7건을 선정
마감 : 2009년 5월 17일까지
입상작 발표 : 2009년 5월 25일
현장심사, 발표 : 2009년 5월 28일
<선정 과정>
1. 접수된 작품 중 ACC 사전심사를 실시해 1차 7팀의 작품을 선정한다.
2. 7팀의 작품을 가지고 최종 발표회 심사를 실시해 대상을 선정한다.
<심사기준>
작품의 기술성(40)
-데스크톱 리소스 응용도(20) : AIR의 장점인 데스크톱의 리소스를 효과적으로 응용하는가?
-성능(10) : 애플리케이션의 성능이 이용에 불편없는가?
-완성도(10) : 구현하고자 하는 기능과 제출문서 등이 모두 완성되었는가?
주제의 창의성(20) : 기존 애플리케이션과 주제면에서 차별화되는가?
작품의 활용성(20) : 사용자의 생활에 도움을 주는 애플리케이션인가?
사용자 편의성(20) : 사용자가 이용하는데 효과적인 UI로 구성되었는가?
응모 방법 및 자세한 사항은 아래 웹 경로에서 확인 할 수 있다.
http://www.adoberia.co.kr/iwt/blog/blog.php?tn=flex&id=302
글
ACC(Adobe Community Champion)
기존에 플렉스 개발자로만 구성되었던 ACC(Adobe Community Champion)가 adobe flash platform으로서 플래시, 플래시 라이트, 플렉스가 통합되어 활동하게 되었습니다. 송구스럽게도 실력 있는 분들과 함께 임명장을 받게 되어 스스로 소식을 전하는 것이 조심스럽습니다. 앞으로도 더욱 많이 배워야 하는 저이지만 임명장을 받은 마당에 의무감도 없지 않은 듯싶어서 소식을 전합니다.
임명식이 있던 날, 회사 업무로 부득이하게 참석을 하지 못하였는데, 마음을 담은 카드까지 전달해 주셨네요. Adobe ACC 관계자 분들에게도 감사를 전합니다.
제가 격식에 따라 활동하는 타입은 아니지만 앞으로 꾸준히 활동하도록 하겠습니다. 다소 부족한 부분이 있더라도 배우는 자세로 이해해 주시고 잘못된 부분이 있으면 서슴없이 말씀해 주시면, 앞으로 ACC 활동을 통해서 또 다른 진정한 커뮤니티 챔피언을 발견할 수 있지 않을까 생각해 봅니다.
감사합니다.
글
[AIR] AIR 1.5 (Cosmo) 출시 예정...
주요한 신기능,
* Flash Player 10 의 통합
o Pixel Bender 를 이용한 커스텀 필터
o 3D 효과나 화면처리 API
o 새로운 텍스트 엔진에 의한 향상된 레이아웃 기능
* 새로운 스트리밍 기능, 코덱
* SquirrelFish 의 Webkit 에의 통합에 의한 JavaScript 실행 속도의 개선
* SQLite 데이타베이스에의 레코드 단위로의 암호화
또한 1.5 버전 이후부터는 Linux를 정식으로 지원한다고 한다.
글
콜린무크의 「지금부터 시작한다 ActionScript 3.0 - WORLD WIDE TOUR 」
토픽은 객체지향프로그래밍, 클래스, 오브젝트, 변수, 메소드, 패키지, 조건 제어, 루프, 연산자, 함수, 이벤트 핸들링, 화면상에서의 표시, 프로그램의 컴파일 및 실행 등과 관련된 내용이다.
학습 내용
* 오브젝트 프로그래밍의 모든 주요 개념
* 클래스 및 오브젝트의 이해
* ActionScript 3.0프로그램의 구축 및 기술 방법
* Flex Builder 2의 개발 환경
* ActionScript3.0주요 개념의 리뷰
일정 :
2008년1월15일(화) 9:30개장 10:00-19:00 300명
MAX 레퍼런스가 한국에서 개최되지 않았던 것도 아쉬운 마당에 이런 군침 도는 기회조차 일본에 빼앗긴 것 같아서 아쉽다. 하루 동안에 얼마나 많은 지식을 얻을 수 있겠냐고 이야기 할 수도있지만 그 느낌만으로도 충분한 가치가 있는 자리가 아닐까 싶다.
일본에 계시거나 일본에 가는 분들은 신청을 해보시길….
http://www.event-web.net/as3/
글
Flash Player 10 코드네임 Astro
1.새로운 텍스트 레이아웃 엔진
Astro에서는 향상된 새로운 기능의 텍스트 표현 엔진이 탑재될 예정이라고 한다. 이를 통해서 복수 컬럼의 레이아웃이나 이미지를 자동적으로 감싸는 레이아웃, 그리고 테이블 형식의 레이아웃 등이 가능하게 될 것 이라고 한다.
2. 3D 효과
Flash의 무비 클립을 3D 공간 내에서 취급할 수 있는 기능이 제공될 예정이라고 한다. PaperVision3D나 Away3D등과 같은 엔진이 탑재 되는 것은 아닌 것 같지만 표현의 폭이 다양해짐에 따라서 추가적인 3D엔진에 대한 기능 개선이 있을 것으로 기대되는 대목이다.
3.custom 필터, 브랜드, 효과
Flash Player 8 버전부터 추가되었던 필터기능에서 추가적으로 스스로 작성한 필터나 효과를 사용할 수 있게 될 예정이라고 한다. 필터등의 작성에는 Adobe Image Foundation (AIF) 툴킷을 사용하게 되는데 AIF 툴킷은 프리뷰판을 다운로드할 수 있게 되어 있다. 관심이 있는 분은 아래 경로에서 다운 받아서 사용해 보길 바란다.
(Adobe Image Foundation (AIF) Toolkit@Labs )
Flash Player 10의 릴리즈 시기는 아직 미정이라고 한다.
글
[FlashCS3] Auto Format 기능 주의...
아래 코드의 경우 예상되는 결과값은 9가 되어야 하지만 스크립트 창에 있는 Auto Format 기능을 실행해서 코드를 정렬하고 퍼블리시를 해보면 결과는 엉뚱하게 7이 나온다.
Auto Format 기능을 실행하게 되면 return 이후에 나타나는 ()는 리턴값으로 간주하여 ()를 제거해 버린다. 이 때문에 결과로 내보낼 사칙연산 순서가 b*c + a로 되어버린다. 실제로 Auto Format 기능을 실행하면 아래처럼 코드상에서 ()가 제거된 것을 확인 할 수 있다.
간단한 코드의 경우에는 문제가 되는 부분을 찾을 수 있겠지만 덩치가 큰 코드의 경우에는 Auto Format 기능 한방으로 예상치 못한 에러 아닌 에러를 내는 곳을 찾기란 쉽지 않다. 그나저나 FlashDevelop은 왜 Auto Format 기능 안 넣는겨….
글
[FlashPlayer] Adobe Flash Player v9.0.60.184 beta - H.264/HE-AAC지원
베타판은 Flash Player 9 Update Downloads@Labs에서 다운로드 하여 인스톨 할 수 있는데 주의할 것은 기존에 있던 FlashPlayer를 언인스톨하고 설치 해야 한다. H.264가 FlashPlayer에 추가되면 iPod를 재생할 수 있다. H.264/HE-AAC 비디오 재생도 플래시플레이어에서 가능하게 되어 MPEG-4 표준을 따르고 있는 MP4, MOV, 3GP등을 재생할 수 있다고 한다.
현재는 단지 지원한다는 의미로 flv만큼의 퍼포먼스를 기대하기는 어려울 듯싶지만 지원한다는 자체의 의미는 매우 크다고 볼 수 있다. Adobe의 다이나믹 미디어 담당 Mark Randall에 의하면 최신판에서는 그래픽 카드의 하드웨어 가속을 이용할 수 있도록 설계되고 있어 듀얼 코어 프로세스에서 최적화 된다고 한다.
Microsoft는 Silverlight를 통해서 웹비디오계의 흐름에서 Flash의 독점에 도전할 의향인 듯 하다. Microsoft는 이미 MLB.com 등 대기업과 Silverlight 채용을 계약했다고 한다. Microsoft는 현시점에서 H.264의 지원을 이야기하고 있지 않지만 고객의 피드백에 근거해서 지원할 가능성이 있으면 지원할 방침이라고 전하고 있다.
웹비디오 기술의 흐름은 앞으로 웹의 발전 방향의 초석이 될 듯싶다. 메크로미디어가 어도비에 인수되었던 시점은 메크로미디어로서는 절호의 찬스였다는 생각이다. 하지만 어도비가 아니라 구글 쪽에서 메크로미디어를 인수 했다면 어떤 변화가 발생했을까 궁금하다. 간간히 구글이 flash만을 인수하거나 어도비를 인수할 수 있는 가능성에 대해서 조심스럽게 이야기를 하고 있는 듯하다. 어도비가 메크로미디어를 인수할 때 20%이상의 프리미엄이 있었던 것을 감안한다면 인수금이 대단할 것으로 예상된다. 만약 그렇게 된다면 엄청난 이슈가 될 것이지만 그러한 이야기는 구글 쪽에서 서비스 하고 있는 대부분이 FlashPlayer를 통해서 배포되고 있기 때문에 나오는 루머가 아닐까 싶다.
글
Flash Player 9 실시간 인스톨 상황
현재 Flash Player 9버전 install 상황, 이 숫자의 개념이 머리 속에 들어오지 않는다.
글
[CS3] 패널 도킹 방지를 위한 팁
이런 불필요한 도킹을 방지하기 위해서는 위치를 옮기고 싶은 패널을 드레그 할 때 Ctrl 키를 누른 상태에서 옮기면 어디에도 도킹하지 않고 자신이 원하는 곳에 올려놓을 수 있다.
간단하지만 플래시 툴을 편하게 다루기 위해서 아주 요긴한 사용법인데 이와 같은 정보는 쉽게 찾기 어려운 것 같다…
글
Adobe MAX 2007 3개국에서 개최
Adobe MAX 2007을 3개국에서 개최한다. 매년 많은 참가자들이 모여 어도비의 최신 제품에 대한 테크놀로지를 접할 수 있는 Adobe MAX는 Macromedia에서 진행하던 Flash관련 행사였으나 Adobe에서 메크로미디어를 인수하면서 Adobe MAX로 새롭게 태어나게 되었다.
이번 MAX 이벤트는 미국(시카고), 유럽(바르셀로나), 그리고 일본(도쿄)에서 개최를 한다. 나는 2005년, 2006년 MAX에 참관을 했었는데 항상 그 때마다 새로운 에너지를 얻는 기분이 든다.
아쉽게도 이번 2007년 Adobe MAX는 한국에서는 개최를 하지 않는다. 한국은 CS3 신제품 발표회로 CS3의 13개 제품에 대한 발표회가 있었으나 하루 동안 진행되었던 발표회였기 때문에 아쉬운 부분이 많았다.
행사 일정
미국(시카고) - 2007/09/30 ~ 2007/10/03
유럽(바르셀로나) - 2007/10/15 ~ 2007/10/18
일본(도쿄) - 2007/11/01 ~ 2007/11/02
글
adobe CS3 신제품 발표회를 다녀와서...
어제 CS3발표회를 다녀왔다. 전날 새벽에 잠을 못 잔 관계로 오후로 접어들면서 급격한 뇌 산소부족으로 인해 하품이 나고 눈이 슬슬 감겼다… 하루 일정에 13개나 되는 제품에 대한 설명을 하다 보니 다소 아쉬움이 있었다. 이제는 플래시만을 위한 conference가 아니라는 것이 가장 큰 아쉬움이긴 하지만…
한국 adobe 사장의 인사말로 시작을 했는데 예전의 macromedia 대표이사였던 이원진 사장의 카리스마가 옛 추억처럼 떠올랐다. 이원진 전 adobe사장은 현재 구글코리아의 사업 및 운영총괄 사장으로 있다. Vip참석자는 동시통역기를 나중에 준다고 하여 넋을 놓고 앉아 있다가 오전 한 섹션은 제대로 이해를 하지 못하고 지나갔다. Adobe 제품의 전반적인 통합 workflow에 관한 이야기였던 것 같다.
Adobe의 신제품 발표회였던 만큼 가장 비중을 둔 것은 포토샵CS3였다. 그만큼 좋은 기능들이 많이 포함되어 있었다. 사진을 취미로 하고 있는 나에게는 더없이 좋은 기능들이다. 예를 들면 피사체를 부분별로 찍은 복수의 사진들을 하나의 이미지 형태로 자동 배치하고 블랜드효과를 적용하여 하나의 이미지처럼 매끄럽게 처리하는 스크립트 기능은 놀랄만한 것이었다. 그리고 3D오브젝트를 포토샵에서 불러와서 맵핑을 하고 x,y,z 위치를 변경하여 화면에 배치할 수 있는 기능은 앞으로 웹디자이너들이 웹에서 3D를 활용할 수 있는 방법을 제시해줬다.
그리고 이미지의 특정한 부분의 실제 길이를 알려주고 면적을 구하는 것과 z값의 각도를 틀어서 맵핑을 할 수 있는 기능등과 같이 많은 기능들이 추가되었다. 그리고 포토샵에서 동영상을 편집 가능하게 된 것은 어도비에서 포토샵에 대한 욕심이 얼마나 많은 것인가를 단적으로 보여준다.
inDesign이라는 툴을 새롭게 소개하기도 했는데 개인적으로는 국내 웹디자인에서 큰 효력을 발휘할지는 의문이다. 어떻게 보면 포토샵과 드림위버의 필요한 기능들만을 가볍게 혼합해 놓은 것 같기도 하다. 몇가지 편리한 기능들을 볼 수는 있었지만 그 기능들을 사용하기 위해 또 다른 툴을 알아가기에는 국내 웹디자이너들에게는 무리가 있을 듯 싶다.
플래시의 경우, 통합 workflow의 이점이라고 한다면 psd파일이나 ai파일의 레이어 구조까지 그대로 플래시에서 불러와서 사용가능 하다는 것이다. ai파일의 경우 ai에서 심볼에 인스턴스 네임을 적용 하면 플래시에서 일러스트를 불러왔을 때 심볼의 인스턴스네임까지 가지고 올 수 있다. 하지만 플래시와 디자인을 구분하고 있는 지금의 시점에서 본다면 서로간에 업무협조가 제대로 이루어 질 수 있을지 의문이다. 일러스트의 백터 시스템 구조를 플래시CS3에서 그대로 사용하게 된 점은 Macromedia가 어도비라는 배를 탄 것이 잘한 것이라고 이야기하고 있는 듯 하다.
psd파일도 앞의 ai파일과 같이 레이어구조 그대로 가져와서 필요한 부분만을 체크하여 불러올 수 있고 텍스트의 경우도 비트맵 또는 수정 가능한 텍스트 형태로 불러올 수도 있다. 기존에는 png형태의 외부 파일로 저장을 하여 다시 import하던 방식에서 획기적으로 작업 효율성을 높인 부분이다.
그러나 포토샵 cs2 버전으로 제작된 psd이기 때문에 그러한지는 모르겠지만 이렇게 PSD파일을 플래시에서 직접 불어올 경우 비트맵 이미지의 경계선이 매끄럽지 못한 부분이 있어서 다시 외부 png파일로 저장을 하여 불러오는 경우가 있다. 그리고 포토샵에서 레이어이펙트를 적용했을 경우에도 투명png형태로 가지고 오는 것이 아니라 배경까지 포함하기 때문에 그림자에 멀티레이어이펙트를 적용했을 경우에도 다시 png파일로 저장해야 하는 문제가 있다.(여담이지만 제발 디자이너들은 그림자에 레이어이펙트를 적용하지 않았으면 좋겠다) 포토샵 cs3에서 제작된 파일의 경우도 이러한 문제가 있다면 다음 버전을 출시하기 전에 패치해야 할 부분이다.
이 밖에도 프리미어, 에프터이펙트등에 관한 설명을 들을 수 있었는데 짧은 시간 동안 설명이 이루어진 관계로 자세한 내용을 접할 수는 없었다. CS3의 제품에서 가장 중점은 둔 부분을 말한다면 “통합workflow”라는 말로 대신할 수 있을 듯싶다.
플래시 모임에서 만난 진우와 같이 앉아서 경청을 했는데 진우의 재미있는 입담 덕분에 즐겁게 들을 수 있었다. 피곤한 하루였지만 맛있는 호텔 점심식사도 하고 나름대로 즐거운 하루였다.
글
어도비, 모바일 개발용 디바이스 센트럴 발표
그 동안 모바일 애플리케이션을 개발하는 것은 매우 어려운 일이었다. 휴대폰 종류와 화면 크기가 매우 다양하기 때문에 사용자 인터페이스를 구성하는 것도 만만치 않았고 컴퓨팅 성능이 각양각색인 장치들을 개발하는 것도 쉬운 일이 아니었다.
그 동안 장치용 애플리케이션을 만드는 방법으로 플래시 라이트(Flash Lite)가 많은 인기를 끌었다. 하지만 디바이스 센트럴의 목표는 디자이너와 개발자들이 CS3 툴을 사용하여 멋진 모바일용 콘텐츠를 훨씬 더 쉽게 만들 수 있게 하는 것이다.
어도비 디바이스 센트럴은 플래시(Flash), 드림위버(Dreamweaver), 포토샵(Photoshop), 일러스트레이터(Illustrator) 및 기타 제품들을 포함하여 어도비의 많은 주력 제품들과 연계하여 판매된다.
그 모든 제품들에는 특정한 작업에 초점을 맞추어 각각 다른 버전의 디바이스 센트럴이 제공된다. 예를 들어, 플래시와 함께 판매되는 디바이스 센트럴 버전은 사용자 인터페이스를 만들고 싶어 하는 플래시 디자이너들을 겨냥한 것이다.
드림위버와 함께 판매되는 버전은 멋진 모바일 웹 환경을 만드는데 초점을 맞추고 있다. 포토샵에 초점을 맞춘 디바이스 센트럴을 이용하면 프로토타입을 빠르고 쉽게 만들 수 있다.
이 모든 툴은 함께 사용할 수 있으므로 포토샵에서 하던 일을 빠르고 쉽게 처리하여 플래시에 넣을 수 있으므로, CS3 제품군에서, 그리고 디바이스 센트럴 자체 내에서 일관성 있는 환경을 사용할 수 있다.
따라서 이 제품을 사용하는 디자이너들과 설계자들은 다채로운 모바일 애플리케이션을 만드는 방식에 있어 유연성을 즐길 수 있다.
워크플로를 제외하고 디바이스 센트럴은 개별적인 장치에 관한 풍부한 정보도 제공한다. 여러 가지 면에서, 이것은 시중에 나와 있는 휴대폰, 그리고 각 휴대폰의 규격과 기능에 대해 모든 것을 알려주는 백과사전이다.
개발자들과 설계자들은 디바이스 센트럴의 데이터베이스를 사용하여 기능에 따라 목표로 삼을 휴대폰을 구상할 수 있다. 개발 대상이 될 특정한 화면 크기와 같은 요소를 선택하면, 그 요소가 적용되는 모든 휴대폰이 나타난다.
이것을 이용하면 개발자들이 장치들을 신속하게 결합하여 특정한 요소에 맞추어 콘텐츠를 극대화할 수 있다.
디바이스 센트럴은 콘텐츠를 테스트하는 면에서도 상당한 발전을 하였다. 그것은 백과사전 내의 모든 장치들에 대해 완벽한 에뮬레이션을 제공하며, 테스터들이 배터리 전력, 신호 강도, 시스템 시간 등과 같은 요소들을 수정할 수 있다.
모바일 인터페이스에는 이런 요소들이 점점 더 많이 포함될 것이다. 날이 저물면 배경이 점점 어두워진다든지, 배터리 전력이 줄어들면 실제로 인터페이스의 일부가 흐려진다던지 하는 기능도 적용할 수 있다.
따라서 모바일 환경이 훨씬 더 다채로워지며, 개발자들이 그것을 테스트할 수 있다는 것이 중요하다. 디바이스 센트럴을 사용하면, 장치를 완벽하게 제어할 수 있으며 인터페이스와 콘텐츠가 정확하게 기능을 수행하고 있는지 확인할 수 있다.
장치의 수가 증가하고, 모바일 콘텐츠가 브랜드나 개개인이 사용자들에게 도달하는데 중요한 수단이 되면서, 모바일 세계에 맞게 디자인하는 것은 매우 수지 맞는 일이 되었다. 디바이스 센트럴은 그렇게 하는데 도움이 되는 멋진 프로그램이며 CS3의 숨겨진 보석 중 하나이다.
크리에이티브 제품군에 속한 다른 제품들과 마찬가지로, 디바이스 센트럴은 사람들이 멋진 환경을 만드는데 정말 도움이 되지만, 이번에는 모바일 세계에 도움을 준다. 필자의 디바이스 센트럴 갤러리에서는 새로운 프로그램을 캡처한 몇 가지 화면을 볼 수 있다.
출처 : Ryan Stewart ( ZDNet )
글
어도비 25년 역사상 가장 방대한 SW제품군 발표
이번 어도비 CS 3는 어도비와 매크로미디어의 합병으로 인한 최초의 기술 통합으로 인쇄, 웹, 모바일, 인터랙티브, 영상 등 모든 크리에이티브의 영역에 걸쳐 디자이너 및 개발자에게 혁신적인 솔루션을 제공한다.
발표되는 이번 신제품은 ▲어도비 CS 3 디자인 프리미엄 에디션 및 스탠다드 에디션 ▲어도비 CS 3 웹 프리미엄 에디션 및 스탠다드 에디션 ▲어도비 CS 3 프로덕션 프리미엄 에디션 ▲ 어도비 CS 마스터 콜렉션 등 총 6개 에디션으로 이루어져 있다.
어도비 CS 3 디자인 프리미엄 에디션 및 스탠다드 에디션
인쇄, 웹, 인터랙티브 및 모바일 디자인 등 크리에이티브 작업을 위한 필수적인 툴 킷이다. 페이지 레이아웃, 이미지 편집, 일러스트레이션, PDF 워크플로우가 모두 통합되어 출판, 웹사이트, 풍부한 사용자 경험 및 모바일 컨텐츠를 하나의 환경에서 효율적으로 작업할 수 있다.
기존의 CS2 버전에서는 오프라인 컨텐츠 제작에 초점되어 있는 반면, 새로운CS3버전에서는 매크로미디어의 플래시, 드림위버가 추가로 통합됨으로써 오프라인 컨텐츠를 온라인으로 쉽게 퍼블리싱할 수 있게 되었다. 이로써 CS3 디자인 프리미엄 에디션은 크로스 미디어 디자인 전문가를 위한 완벽한 솔루션으로, 기존 출판 및 디자인 프로세스에 대변화를 가져올 것으로 예상된다.
어도비 CS3 디자인 프리미엄 에디션에는 어도비 인디자인 CS3, 어도비 포토샵 CS3 익스텐디드, 어도비 일러스트레이터 CS3, 어도비 플래시 CS3 프로페셔널, 어도비 드림위버 CS3가 포함되며, 추가적으로 어도비 애크로뱃 8 프로페셔널이 포함된다.
새롭게 강화된 인디자인 CS3은 반복적인 레이아웃 작업을 쉽고 빠르게 처리할 수 있도록 도와 주며, 일러스트레이터의 라이브컬러 기능은 디자이너들이 빠르고 직관적으로 색을 배합하고 저장하고 다양한 실험을 할 수 있게 한다. 이 외에도 포토샵 CS 3 익스텐디드를 통해 이미지 영역 선택, 이미지 합성, 필터 적용 등의 일상적인 이미지 편집 작업이 더 빠르고 유연하게 진행될 수 있게 된다. 또한 플래시 CS3 프로페셔널과 통합되어 디자이너와 개발자들이 포토샵과 일러스트레이터에서 작업한 파일을 그대로 플래시로 보낼 수 있게 되어 작업 시간을 크게 단축할 수 있게 된다. 이 외에도 드림위버 CS3를 통해 디자이너들이 포토샵 파일을 웹 레이아웃에 복사해서 붙일 때 웹을 자동적으로 최적화해 준다.
어도비의 존 로이아코노(John Loiacono) 크리에이티브 솔루션 수석 부사장은 “디자인 전문가들은 어도비와 매크로미디어 툴의 새로운 차원의 통합을 경험하게 될 것"이라며 “플래시와 드림위버의 추가로 오늘날 크리에이티브의 중심이 되는 인터랙티브한 디자인 영역으로 확대될 수 있는 계기를 마련함과 동시에 혁신적으로 변화된 디자인 환경을 제공하게 될 것이다”고 밝혔다.
어도비 CS 3 웹 프리미엄 에디션 및 스탠다드 에디션
웹 디자이너 및 웹 개발자들이 손쉽게 웹사이트와 애플리케이션, 게임, 프레젠테이션, 모바일 컨텐츠 등을 디자인하고, 개발하고, 관리할 수 있게 해준다. 특히, 인터랙티브한 웹을 개발하고 디자인하고자 하는 개발자 및 디자이너를 위한 최적의 툴이다.
어도비 CS 3 웹 프리미엄 에디션에는 어도비 드림위버 CS3, 어도비 플래시 CS3 프로페셔널, 어도비 파이어웍스 CS3, 어도비 컨트리뷰트 CS3와 함께 어도비 포토샵 CS3 익스텐디드, 어도비 일러스트레이터 CS3, 어도비 애크로뱃 8 프로페셔널 등이 포함되어 있다.
웹 전문가들은 포토샵과 일러스트레이터 파일을 바로 플래시 및 파이어웍스에서 사용할 수 있게 되었다. 이에 따라 웹 페이지 관리가 편해지며, 웹 페이지의 이미지를 일관되게 유지하기가 더욱 쉬워진다. 또한 파이어웍스 CS3의 새로운 계층구조화 기능을 통해 복잡한 웹 페이지 모델을 바로 만들 수 있으며, 하나의 PNG 파일로 저장할 수 있다.
어도비 CS3 웹 에디션은 모든 웹 브라우저, 운영체제, 모바일 기기 등을 통해 일관된 경험을 할 수 있게 해준다. 드림위버 CS3는 Ajax를 위한 Spary 프레임워크를 통합해 RIA 구현을 더욱 쉽게 해 준다. 새로운 CSS 레이아웃은 사용화된 웹 브라우저 호환성 체크를 가능하게 하고 다양한 웹 브라우저를 통해 CSS기반 웹사이트를 테스팅할 수 있게 한다.
어도비의 존 로이아코노 부사장은 "어도비 CS3 웹 에디션은 웹 상에서의 크리에이티브한 비전 실현을 위해 디자이너와 개발자의 모든 작업 영역에서 활용할 수 있는 필수적인 솔루션을 제공한다" 라며 "드림위버, 플래시, 파이어웍스, 컨트리뷰트에 포토샵, 일러스트레이터와 같은 주요 디자인 툴을 통합하여 웹 디자인 및 개발을 놀라울 정도로 단순화할 수 있다" 라고 밝혔다.
어도비 CS 3 프로덕션 프리미엄 에디션
영상 전문가와 리치 미디어 전문가를 위한 포스트 프로덕션 솔루션이다. 영상, 방송, 웹, DVD, 모바일 디바이스 등을 위한 혁신적인 결과물을 창조하고 전달할 수 있도록 통합된 작업 환경을 제공한다. 프로덕션 프리미엄 에디션은 전체 캡쳐에서부터 포스트 프로덕션 워크플로우 전반에 필요한 모든 애플리케이션을 통합한 것으로, 작업 시간을 대폭 줄여준다.
어도비 CS 3 프로덕션 프리미엄 에디션에는 어도비 애프터 이펙트 CS3 프로페셔널, 어도비 프리미어 프로 CS3, 어도비 앙코르 CS3, 어도비 포토샵 CS3 익스텐디드, 어도비 일러스트레이터 CS3, 어도비 플래시 CS3 프로페셔널, 어도비 사운드부스 CS3등이 포함된다.
어도비 프리미어 프로 CS3는 ‘타임 리매핑’이라는 신기능을 통해 슬로 모션을 향상시키고, 다양한 속도 효과를 제공한다. 애프터 이펙트 CS3는 ‘쉐이프 레이어’ 기능을 통해 벡터 쉐이프를 그리고 애니메이션할 수 있게 해 주고, ‘퍼핏’ 기능을 통해 2D 이미지들을 움직이게 한다.
또한, 브레인스토밍 툴을 통해 애니메이션에 변화를 조금씩 주도록 생성하고 미리 볼 수 있게 한다. 오디오 기능은 어도비 사운드부스 CS3를 통해 전문가 수준의 사운드트랙을 개발할 수 있다. 어도비 플래시 CS3 프로페셔널을 통해서 애프터 이펙트 및 앙코르에서 웹을 통해 작업을 바로 보여줄 수 있다.
그리고 ‘다이나믹 링크’를 통해 프리미어 프로 CS3, 애프터 이펙트 CS3, 앙코르 DVD CS3에서 작업한 미디어를 서로 교환할 때에 렌더링을 하지 않아도 되게 되었다. 또한 이번 CS3 프로덕션 프리미엄은 어도비 온로케이션 CS3는 바로 디스크로 녹음이 가능하며 모니터링 기능을 제공한다. 이는 현장에서 고화질의 촬영을 하는데 큰 도움을 줄 것이다. 또한, 프리미어 프로 CS3는 HD, SD, HDV 형식을 모두 지원한다. 이 외에도 어도비 미디어 엔코더를 통해 모바일폰, 디바이스, 아이팟 등의 다양한 기기에서 촬영한 비디오를 송출 할 수 있다.
어도비의 존 로이아코노 부사장은 “어도비 CS 3 프로덕션 프리미엄의 타겟 시장인 비디오 편집 시장이 점차 확대되어 가고 있다”며 “특히, 인터넷을 통해 대량의 비디오 유통이 이루어지면서 플래시 기술이 표준으로 자리 잡아 가고 있다. 이는 TV의 온라인 방송이나 유투브(YouTube), 마이스페이스(MySpace)로 입증되고 있다. 어도비의 프로덕션 에디션은 최첨단 비디오 및 리치 미디어 작업을 위해 최적의 솔루션이 될 것이다.”고 밝혔다.
이 제품은 중순경 발표 예정이다.
어도비 CS 마스터 콜렉션
총 12개의 개별 애플리케이션을 하나로 통합한 콜렉션이다. 프린트, 웹, 모바일, 비디오, 필름 등 모든 미디어를 통해 디자인 및 개발 작업을 할 수 있도록 해준다.
어도비의 최고 경영자인 브루스 치즌(Bruce Chizen)은 “어도비와 매크로미디어의 강력한 기술을 통합한 이번 신제품은 디자이너와 개발자 사이의 간격을 메워주는 작업 효율성을 극대화 하는데 중점을 두었다”며 “새로운 워크플로우를 통해 더욱 풍부한 컨텐트 개발과 효율적인 협업이 가능해질 것”이라고 밝혔다.
한편 어도비 CS 3 제품군에 있는 12개의 소프트웨어는 개별적으로도 구매 가능하다. 환경으로는 파워PC, 인텔 기반 맥킨토시 등에서 모두 사용 가능하며, 마이크로소프트 윈도우 XP, 윈도우 비스타를 지원한다. 특히 고객들은 인텔 기반의 매킨토시 시스템 및 최신 윈도우 하드웨어에서 CS 3의 한층 향상된 성능 및 속도를 체험할 수 있다.
발표하는 이 시점 이후, 이전 버전(Creative Suite2와 Studio8 및 관련 단품)을 구매하는 고객에 한해 한정 기간 동안 무상 업그레이드 혜택을 제공한다. 특히 기존에는 포함되어 있지 않은 제품들이 추가적으로 제공되어 한층 업그레이드된 경험을 누릴 수 있다. 자세한 내용은 고객지원센터(563-2555)로 문의하면 된다.
한편, 어도비 CS 3의 한글판은 올해 중순경 출시 예정이다.
출처 : 김효정 기자 ( ZDNet Korea )