플래시 플레이어에서는 회전시키기 위해 rotation 속성을 사용하지만
Starling 에서는 radian 값을 사용한다.
degree 를 사용하여 회전을 시키고 싶다면
starling.utils.deg2rad 함수를 사용하여 변환하면 된다.
sp.rotation = deg2rad( Math.random() * 360 );
모든 DisplayObject 는 pivotX 와 pibotY 속성을 갖고 있으며
이를 이용해서 런타임 때 중심점을 바꾸는 것도 가능.
sp.pibotX = sp.width / 2;
sp.pibotY = sp.height / 2;
두서없는 글이 될 것은 뻔하지만 일단 최근에 웹접근성 프로젝트를 하면서 발생한 문제(?)들에 대한 요약정리랄까.
까먹을까봐 적어둬야겠다는 생각이 들었다.
위키백과, 우리 모두의 백과사전.
웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.
웹 접근성에는 다음의 사항들을 고려하여야 한다:
웹 브라우징을 할 수 있게 하거나 도움을 주는 등을 목적으로 보조공학을 이용할 수 있다.
http://ko.wikipedia.org/wiki/웹접근성
스크린 리더 소프트웨어로 Sense Reader 라는 프로그램을 사용하는데 이게 좀 골때린다.
플래시에서 접근성 작업 하는 방법이야 검색하면 많이 나오니 그대로 했는데도 안되는 것들이 있는 것이다.
어떤 것들이 있는가 하면..
1. 센스리더를 켰을 때와 켜지 않았을 때 탭 이동의 반응이 다르다?
센스리더가 플래시의 버튼을 인식하지 못하는 듯 하다.
버튼들을 모두 무비클립으로 바꿔주니 정상동작. –_-a
2. 센스리더가 플래시에 들어있는 디스크립션을 안 읽는다?
플래시의 accessibility 창에 디스크립션을 입력할 때에 한 줄로 입력해야 한다.
메모장같은 다른 텍스트 에디터에 적어놓고 Ctrl + C, V 해서 입력을 했었는데
텍스트가 길어서 보기 편하게 엔터로 줄 정리를 했던걸 그대로 입력했더니 아예 안읽어버림.
3. 버튼에 넣은 디스크립션을 두번 읽는다?
1번에서 무비클립으로 죄다 바꾸고 센스리더도 인식하고 디스크립션도 읽는데 이젠 두번씩 읽는다. –_-;
안읽어도 문제, 쓸데없이 두번씩 읽어도 문제..
이미지를 버튼으로 만들었을 경우엔 별 상관이 없지만 텍스트 필드를 사용하면 달라진다.
플래시에서 무비클립을 선택하고 Make child objects accessible 의 체크를 풀면 무비클립의 자식개체들에는 접근이 안된다.
근데 텍스트 필드에 있는 텍스트들은 쌩까고 걍 읽더라-_-;
텍스트필드의 텍스트도 읽고 디스크립션에 들어있는 것도 읽고.. 그래서 두번 읽는 증상이…
4. 그래픽 심볼로 만든 애들은 또 다 읽어버린다.
센스리더로 플래시 컨텐츠에 진입하고 나서 화살키를 움직이면
모션질 할때 이미지들을 그래픽 심볼로 만들어 버리면 이놈들을 “어쩌구 저쩌구 그래픽” 하고 센스리더가 읽어버린다.
무비클립으로 만들고 Make child objects accessible 체크를 풀자.
음.. 또 생각나는게 있으면 추가 해야겠다. –_-a
플래시 디버거 툴 중에 몬스터 디버거라는게 있다는걸
플래시 액션스크립트 카페(http://cafe.naver.com/flashactionscript)에서 알게 되었는데요.
이게 어디에 어떻게 쓰는 물건인가 살펴보면서 간략정리를 시도해보았습니다.
공식 홈페이지 - http://www.monsterdebugger.com/
AsDoc - http://www.monsterdebugger.com/asdoc/
설치는 홈페이지에서 다운받으셔서 air 파일을 설치하면 됩니다.
에어로 배포되니 윈도우건 맥의 osx건 상관없이 사용할 수 있는 장점이 있네요.
air가 설치가 안되셨으면 먼저 어도비 홈페이지부터 가셔서 air부터 설치하시면 되구요.
몬스터디버거의 첫 실행화면
처음 실행시키면 이런 모양으로 뜨네요.
영어로 뭐라뭐라 써있는데 까막눈이라 읽을줄 몰라서 일단 패스.
빨간색으로 체크해둔 부분을 누르면
1. Project type
Actionscript 3.0 / Flex MXML (플래시와 플렉스 모두 지원하는군요)
2. Project target
Web/Desktop / Mobile (모바일용으로도 지원하나봐요)
3. Client SWC
SWC 파일을 저장하는 창이 나옵니다.
4. Example Code
저는 웹쟁이니까 Actionscript 3.0 / Web 기준으로..!!
Flash CS5 / Flash Builder Burrito 를 사용하였습니다. (플래시빌더는 저도 어색어색)
플래시에서 fla 파일을 만들고 플래시빌더에서 Flash Professional Project 를 만들었습니다.
fla 파일에 아까 저장해두었던 MonsterDebugger.swc 파일을 연결해줍니다. (저는 fla 파일과 같은 경로에 저장했습니다.)
빨간색 체크 부분을 순서대로 눌러가며 찾아시면 끝.
이걸 언제 쓰면 유용하려나요?
웹상에 swf 파일을 올려놓고 동작이 안되거나 하는 것들을 체크하려면 참 번거롭고 귀찮죠.
그런 상황들이 어떤게 있을까요.
메뉴 네비게이션 같은 경우 xml 경로를 flashVars로 받아서 swf 가 로드해서 사용하는데 경로가 잘못되었을 경우
경로가 제대로 받아와지는지 확인하려면 다른 분들은 어떻게 확인 하실지 모르겠지만
저는 텍스트 필드를 화면에 붙여넣고 그 안에 경로를 찍어서 확인해봅니다.
확인이 끝나면 텍스트필드를 없애고 확인을 위한 관련 코드를 또 삭제해줘야 하죠.
이런 경우 이렇게 사용할 수 있을거 같네요.
HTML 파일 추가.
<param name="flashVars" value="xmlPath=xml경로" />
Actionscript Code.
var paramObj:Object = this.loaderInfo.parameters;
var xmlPath:String = paramObj.xmlPath;
MonsterDebugger.trace(this, xmlPath);
몬스터디버거에는 이렇게 찍혀나오네요. 외부에서 받아오는 값이 제대로 들어오는지 확인하기 편한듯 합니다.
또 이런 경우도 있을수 있겠네요.
서버쪽으로 값을 전송할때 전송될 값들이 제대로 들어가는지 확인 할 때
GET 방식으로 보낸다면 URL에 찍혀나올테니 상관 없겠지만
POST 방식으로 보낸다면 눈으로 확인하기가 쉽지 않죠.
this.send_btn.addEventListener( MouseEvent.CLICK, onSendClick);
private function onSendClick( e:MouseEvent ):void {
var url:String = "http://doworld.tistory.com/";
var request:URLRequest = new URLRequest( url );
var variables:URLVariables = new URLVariables();
variables.time = new Date().getTime();
variables.myName = "doworld";
request.method = URLRequestMethod.POST;
request.data = variables;
MonsterDebugger.trace(this, variables);
navigateToURL( request );
}
SEND 버튼을 누르면 이름과 지금 시간을 보내는 코드가 있습니다.
GET 방식으로 보낸다면
이렇게 브라우저 URL 부분에서 확인이 가능하지만
POST 방식으로 전송한다면 몬스터 디버거에서 편하게 할 수 있습니다.
GET 과 POST 의 전송방식의 차이점은
GET : 속도가 빠르지만 정보가 노출되어 보안에 취약하고 정보의 크기가 1024바이트로 제한적.
POST : URL 주소에 정보노출이 되지 않으니 보안성이 좋고 정보의 크기 제한이 없지만 GET방식보다 느리다.
좀 더 자세한 내용이 궁금하신분들은 따로 검색해보세요.
만약에 버튼 위에 눈에 보이지 않는 무언가가 덮혀 있어서 버튼이 클릭되지 않는다고 가정해봅니다.
코드에서 작성되어서 addChild 된 녀석이 어느샌가 나타나서 가리고 있으면
이게 언제 나타나서 가리고 있는지 참 알아내려면 참 속상합니다-_-;;
몬스터 디버거를 이용하니 이런 점도 편하네요.
화면에 붙어있는 오브젝트들 리스트가 다 나옵니다. (인스턴스 네임까지 찍혀나오네요)
하나를 클릭해보니 해당 오브젝트가 웹상에 있는 swf 에서도 저렇게 표시가 되니 찾기도 편하고
오른쪽 Properties 탭을 보면 속성들이 표시되는데
x, y 좌표 또는 alpha 값이라던가 visible 값을 바꾼다던가 저기서 값을 바꾸면 웹상에 있는 swf 에도 변화가 일어납니다.
Methods 탭을 눌러보면 그 오브젝트의 메소드들이 주우욱 나오는데 public 메소드들만 나올거 같네요.
FPS 와 메모리 점유율도 보기 편하게 제공해주고요.
MonsterDebugger.trace(); 이외에도 여러가지 메서드 들이 제공되고 있습니다.
MonsterDebugger.clear();
trace 한 결과들을 모두 지워줍니다.
MonsterDebugger.log( ..args );
trace와 비슷한거 같은데 여러개를 한번에 확인할 수 있네요. ex) MonsterDebugger.log( x, y, width, height );
MonsterDebugger.snapshot();
메소드 이름에서 알수 있듯이 스냅샷을 찍을수 있나봐요. 숨겨진 인터페이스 항목을 표시해야 할 경우 유용할 수 있다네요.
MonsterDebugger.breakpoints();
이번에 업데이트 된 몬스터디버거 3.0 버전부터 생겼나본데요. 중단점을 설정해두고 디버깅 할 수 있게끔 하는 녀석인듯.
마지막으로 플래시에서 trace() 로 확인을 하고 웹에 올리기 전엔 trace() 문을 사용한 곳들을 찾아다니면서
주석처리를 해주거나 지워줬었는데요. ( trace()도 많이 찍어놓으면 퍼포먼스가 떨어지더라구요 )
MonsterDebugger.enabled = false;
몬스터 디버거 초기화 해둔곳 바로 밑에 줄에 요렇게 한줄 넣어주면 일일이 찾아다니면서 주석 또는 삭제 할 필요없이
몬스터 디버거 관련 코드는 모두 기능 상실하네요.
AS3에서 navigateToURL로 다음과 같이 메소드를 수행하면 팝업방지 기능이 있는 브라우져의 경우
팝업 방지창이 뜨며 정상적으로 작동하지 아니한다.
navigateToURL(new URLRequest("http://www.naver.com/"), "_blank");
이럴 경우 자바스크립의 window.open 메소드를 사용하여 해결할 수 있다.
다음은 이를 보다 쉽게 클래스 패키지화 한 내용이다.
package { import flash.external.ExternalInterface; public class URLUtil { protected static const WINDOW_OPEN_FUNCTION : String = "window.open"; public static function openWindow(url : String, window : String = "_blank", features : String = "") : void { ExternalInterface.call(WINDOW_OPEN_FUNCTION, url, window, features); } } }
button.addEventListener(MouseEvent.CLICK, function(e:MouseEvent) { handleClickEvent(e, "Home") } );
function handleClickEvent(e:MouseEvent,str:String) {
trace("Argument :"+str,"- Event target :"+e.target.name);
}
출처 : http://blog.naver.com/soju15jan/80062709998
VIGMONK.com | 빅몽크
http://blog.naver.com/realgoldhwan/120034907030 코딩된 index 파일(flash를 물고 있는)이 ROOT나 다른 폴더에 있고,
이곳에서 다른 플래시 파일들을 로드해 올 경우
복잡한 경로의 플래시일 경우 작업하면서 각 경로를 로컬에 맞게 잡아주거나
기본 경로를 루트로 잡아주고, 웹에 올릴 때와, 로컬에서 작업할때를 구분지어 작업 해주어야 합니다.
그러나 간단히 코딩에 몇줄 추가해주면 로컬에서의 경로대로 웹에 올릴 수 있습니다.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="1024" height="768" id="aa" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="new/aa.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="base" value=".">
<embed base="." src="new/aa.swf" quality="high" bgcolor="#ffffff" width="1024" height="768" name="aa" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
색이 들어 간 부분만 넣어주면 된다.
value 값에 "."(default 시) 나 "http://www.vigmonk.com/" 머 이런식의 풀 경로를 써주어도 된다.
굳이 이렇게 까지 안해도, 경로 잡아주지 뭐 그러시는 분들 계실 겁니다.
그런데 공유폰트나 공유 사운드 등.. 공유 라이브러리를 쓸때는 얘기가 틀려집니다.
라이브러리 공유 폰트나 사운드에 경로를 넣어줘야 하기 때문인데.
기본 로드 구조에서는 로컬에서 작업할때와, 웹에 업 할 시 경로를 스크립트로 간단 제어할 수 있지만,
공유 라이브러리는 경로를 스크립트로 제어 할 수 없기 때문에(제가 알기론..),
위와 같으나 코딩을 넣어주면 간단히 해결 됩니다.
관련 문서 >> http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_04157
