Flash Player 10 보안샌드박스

<펌> : http://adnaru.com/55

Flash Player 10(astro)의 베타버전이 공개된지 엊그제 같은데, 지난달 Adobe CS4출시와 곧 있을 Flex 3.2 출시로 Flash Player 10의 정식 출시가 초읽기로 다가왔습니다.


올 4월 Flash Player9의 ExternalInterface와 NavigateToURL의 보안샌드박스 적용등으로 엄청난 충격을 받은적이 있었는데, 이번 Flash Player10에서도 역시 보안샌드박스가 변경되거나 추가되었습니다. ㅎㄷㄷㄷ


엄청난 고생길이……. 눈앞에 선하군요…….
 


1. 변경된 사항 


1. Policy File
Flash 10에서는 meta-policy의 기본값이 all에서 master-only로 바뀝니다. 이 설정은 해당 swf파일이 존재하는 도메인 루트의 crossdomain.xml을 읽어옵니다. 그러나, meta-policy를 바꿔서 예전처럼 쓸수도 있습니다.


2. 소켓 타임아웃
액션스크립트에서 Socket, XMLSocket의 모든 securityError이벤트는 connect()메서드의 호출 이후 일정시간 경과후 발생하게 됩니다. 이것은 송출 이후 즉각적인 securityError가 더 늦게 발생하게 되며, 또한 더 일찍 연결에 성공하게되면 securityError 이벤트는 긴 딜레이가 발생하게 됩니다. 그래서, 20초의 소켓 타임아웃을 정해 두었습니다. 물론, 개발자들은 Socket.timeout과 XMLSocket.timeout를 통해서 이 시간을 조정할 수 있습니다.


3. 파일선택과 다운로드시 사용자의 직접적인 인터렉션을 필요로 합니다.
Filerefrence.browse를 통해 사용자의 로컬의 파일을 찾는 창을 띄울수 있고, Filerefrence.download를 통해 파일을 내려 받을수 있습니다.
두 메서드의 경우 종전엔 사용자의 UI 인터렉션을 필요로 하지 않았습니다만, Flash 10에서는 사용자가 직접 UI인터렉션을 취해야 작동하게 됩니다.


4. 클립보드를 지정할시 사용자의 직접적인 인터렉션을 필요로 합니다.
System.setClipboard를 통해 사용자의 클립보드에 텍스트를 지정할 수 있습니다. 종전엔 사용자의 직접적인 UI 인터렉션을 필요로 하지 않았습니다만, Flash 10에서는 사용자가 직접 UI인터렉션을 취해야 작동하게 됩니다.



2. 추가된 사항


1. 로컬파일을 불러오고 저장할때
Flash 10에서는 SWF파일에서 사용자 로컬의 파일을 읽어오고 또 저장할 수 있습니다. 다만, 이 메서드들은 사용자가 파일 선택창에서 직접 파일이나 경로를 선택할때만 가능합니다.


2. 풀스크린 모드에서 제한적으로 입력허용
근래의 플래시 플레이어에서는 풀스크린 모드에서는 입력이 허용되지 않았습니다. 하지만 Flash 10에서는 탭, 스페이스, 방향키의 사용이 허용됩니다.


3. RTMFP
플래시 플레이어와 플래시 미디어서버간의 통신에 UDP기반의 RTMFP를 지원합니다.


4. Paste event handler를 통한 클립보드 데이터 핸들링
Flash 9에서는 시스템 클립보드의 데이터를 불러오지 못했습니다. Flash 10에서는 새롭게 추가된 Clipboard.generalClipboard.getData() 메서드를 통해 시스템 클립보드의 데이터를 읽어올수 있습니다. 다만, flash.events.Event.PASTE 이벤트가 발생할때에만 불러올수 있습니다 -_-;;;;

링크 : http://www.adobe.com/devnet/flashplayer/articles/fplayer10_security_changes.html#head5 

특히 제일 주목이 되는것은, UI인터렉션 후 클립보드 저장이나, 파일 창띄우기, 다운로드가 가능하다는 점인데, 현재 많은 개발자들이 쓰고있는 꼼수가 대부분 새로운 샌드박스의 영향으로 막히게 되어버립니다.


예를들어, 클립보드 복사의 경우, JS로 처리할때 IE외의 브라우저는 제대로 처리되지 않는 문제가 있습니다. 이 문제를 해결하기위해, flash의 setClipboard를 쓰는데, 대부분의 경우 UI는 HTML상에서 구현하고, JS로 Flash내부의 함수를 호출해 처리하는 방법이 있는데, 이 방법이 사용이 불가능해집니다.
(사용자의 직접적인 UI인터렉션이 발생하지 않음으로)


필자의 경우 Yezzang&Naru이미지호스팅(http://img.yezzang.net)를 운영하고 있습니다. 이미지를 업로드 하게 될경우, 업로드된 이미지 주소를 받아와 자동으로 클립보드에 담기게 하는데, 이 부분에 있어서 수정을 해야할것 같습니다.. 흑흑 (ㅠㅠ)


역시 개발자에겐 야근은 기본 스펙이 되어버리는군요..

CrossDomain Data Loading Context

플래시 6 이전 버전의 크로스도메인에 대한 보안 규칙

1. 토큰 수가 같은 도메인, 즉 점(.)으로 구분되어 있는 단어의 갯수가 같은 경우.


ex) 토큰의 갯수 => a.b.c.d (4개) / a.b.c (3개)


2. 가장 앞자리의 토큰을 제외한 나머지 토큰이 일치하는 경우


ex) abc.flashartwork.com 와 efg.flashartwork.com 는 성립함.


위의 두가지를 모두 만족하는 경우에만 데이터 로딩을 허용하도록 되어 있었다. 그래서 서로 다른 도메인 네임을 가진 서버에서는 loadVariable, loadVars, XMLSocket 등을 통하여 데이터를 불러오는 것이 불가능했었다.


플래시 7 플레이어가 발표되면서 몇가지 보안 규칙이 바뀌게 되었는데 그 중, 플래시 6의 크로스도메인에 대한 규칙이 없어지면서 다른 도메인의 데이터를 로딩하는 것이 좀 더 유용하게 바뀌었다. 일단, 완전히 다른 도메인 상에서도 데이터를 불러올 수 있는 것이 가능하게 되었다. 그리고 이러한 유용한 기능을 보안상의 문제 없이 사용하기 위하여 새로운 “크로스도메인 정책파일” 규칙이 생겼다.


크로스도메인 정책파일(cross-domain policy file)이란 크로스도메인을 통해 데이터를 로딩하는 경우에, 해당 서버의 데이터에 접근하는 것이 허용된 외부 도메인을 명시한 문서를 말한다. 이 문서에는 접근을 허용하는 외부 도메인이 명시되어 있고 플래시 무비는 해당 문서에 명시된 서버에서 접근시에만 데이터 로딩이 허용된다.


플래시 6 이전의 제작환경에서 만들어진 플래시 무비는 이러한 정책파일이 없었기 때문에 보안 경고창을 띄워 이러한 접근을 사용자의 허락하에 허용하고 있다. 보안 경고창은 플래시 6 이전의 제작환경에서 만들어진 플래시 무비가 정책파일 없는 서버에서 이전 크로스도메인 규칙에 따라 데이터 로딩을 시도한 경우에 나타난다. 따라서, 플래시 6 이전에 제작한 플래시 무비에서 크로스도메인으로 데이터를 불러오는 경우, 새롭게 정책파일을 만든다면 이러한 경고창이 나타나지 않도록 할 수 있다. 만약 플래시 7 제작환경에서 만들어진 플래시 무비가 정책 파일이 허용하지 않는 접근을 시도한다면 경고창을 보여주지 않고 접근을 무시한다. 따라서 플래시 7에서 크로스도메인을 시도한다면 반드시 정책파일을 설정해 주어야 한다.


크로스도메인 정책 파일은 항상 crossdomain.xml 이름을 가져야 하며, 서버의 HTML 루트에 위치하여야 한다. 정책 파일은 간단한 XML 형식을 취하고 있으며 신택스는 다음과 같다.



crossdomain.xml – 크로스도메인 정책 파일의 예
<?xml version=”1.0″?>
<!DOCTYPE cross-domain-policy SYSTEM “http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd”>
<!– Policy file for http://www.mysite.com –>
<cross-domain-policy>
<allow-access-from domain=”*.mysite.com” />
<allow-access-from domain=”www.myothersite.com” />
</cross-domain-policy>

1. <!– comment –> : 주석 태그의 허용


2. <cross-domain-policy> : 크로스도메인 정책에 대한 내용이 들어가는 태그로 항상 하나의 태그가 존재하며 하위에 <allow-access-from> 태그를 가질 수 있다.(경우에 따라 이 태그가 없어도 무방하다.) <allow-access-from> 태그는 접근을 허용한 외부 도메인 네임을 domain 이라는 속성에 명시한다. domain 속성의 값으로 명시할 수 있는 것은 다음과 같다.


– 도메인 네임 : www.mysite.com 와 같은 특정 도메인 네임.


– IP 주소 : 65.57.83.12 와 같은 특정 IP 주소. http://65.57.83.12/test.swf 와 같이 해당 IP 주소가 정확히 명시된 플래시 무비에만 접근을 허용한다. 해당 IP를 가리키는 도메인 네임이라 할지라도 도메인 네임이 정책파일에 명시되어 있지 않다면 접근을 허용하지는 않는다.


– 와일드카드 문자를 이용한 도메인 네임 : 가장 앞자리의 도메인 토큰 대신 와일드카드 문자(*)를 사용할 수 있다. 가장 앞자리를 제외한 토큰은 정확히 명시되어야 한다. *.mysite.com 과 같이 사용가능하며, 이 경우 www.mysite.com, store.mysite.com, longer.subdomain.mysite.com(토큰4개) 등을 모두 포함되며 가장 앞자리 토큰이 생략된 mysite.com 도 포함한다.


– 와일드카드 문자 : 모든 사이트에 대하여 접근을 허용하고 싶은 경우 사용한다.


만약 <cross-domain-policy> 태그가 <allow-access-from> 태그를 하나도 포함하지 않는다면 모든 도메인에 대하여 접근을 막는 정책이 된다.


모든 <allow-access-from> 태그는 domain 속성외에 secure라는 속성을 true/false 라는 값으로 가질 수 있는데, 이 속성은 HTTPS(HTTP 보안 프로토콜) 서버에서 HTTPS 서버가 아닌 다른 프로토콜 서버의 플래시 무비에 대한 데이터 접근을 허용할 것인가에 대한 속성이다. 만약 이 속성이 true로 되어있다면 HTTPS 서버끼리만 허용을 할 것이고, false로 되어있다면 다른 프로토콜 서버에서의 접근도 허용하게 된다. 이는 HTTPS 서버의 정책 파일에만 해당되는 내용이다. 생략할 경우 기본적으로 true의 값을 갖는다.


한번 정책 파일을 생성하면 대부분의 액션스크립트를 통해 쉽게 도메인 간의 데이터 로딩을 사용할 수 있지만, 몇가지 예외는 있다.


일단, XMLSocket.connect 액션의 경우는 조금 다르다. XMLSocket으로 다른 도메인 네임의 서버에 소켓을 연결하는 경우에도 마찬가지로 접속하고자 하는 서버에서 정책파일을 요청하지만, 보통 소켓서버에서는 80 포트를 이용한 HTML 웹서버는 사용하지 않기 때문에 정책파일 문서를 제공할 수 없다. 따라서 XMLSocket을 이용하여 다른 도메인 네임을 가진 서버에 접속을 하려면 소켓 서버 쪽에 80 포트에서 별도의 웹 서버를 가동하여 crossdomain.xml 파일을 제공해 주어야 한다. 80 포트에 crossdomain.xml에 대한 요청만 처리해 주는 서버를 제공하는 방법도 가능할 것이다.


한가지 더 유의할 점은 데이터 요청을 받은 서버가 다른 도메인 네임의 서버로 리다이렉팅 할 경우 현재 서버의 정책파일을 무시하고 새로 리다이렉팅 된 서버의 정책파일을 따른다는 것이다. 따라서, 다른 도메인의 서버로 리다이렉팅 시키는 경우 경유하는 서버와 목적지 서버에 정책파일이 모두 존재해야 된다.


그리고 크로스도메인 정책파일이 생기므로써 나타난 문제점은 이 파일이 존재해야 모든 데이터 통신이 가능하다는 이유 때문에(플래시 리모팅 포함) 기존 인터넷상의 수많은 웹서비스들을 사용할 수 없다는 것이다. 플래시 MX에서 플래시 리모팅의 강력한 기능을 역설하였던 것을 상기하면 이러한 문제점은 아쉬울수밖에 없다.


그러나 웹서비스의 기능에 제한이 생기는 문제점과 정책파일 생성의 번거로움을 감안하고라도 크로스도메인 정책파일을 통한 확장된 외부 도메인의 데이터 로딩으로 인하여 플래시 7에서는 좀 더 융통성있고 편리한 서버간 데이터 통신 환경이 지원되었다고 생각한다.








플래시 7.2와 플레이어 7.0.19.0에서 System.security.loadPolicyFile() 메소드 추가


loadPolicyFile()는 서버의 루트가 아닌 특정 폴더에서 크로스도메인 정책 파일을 불러올 수 있다.


System.security.loadPolicyFile(“http://www.B.co.kr/allowed/cdpf.xml“);


이렇게 하면 플래시 플레이어는 B 서버의 allowed 폴더 및 그 하위 폴더의 모든 자원에 접근이 가능하다


그러나 상위 폴더나 다른 폴더의 자원에는 접근할 수 없게 된다



덧붙여서 XMLSocket을 사용하는 경우


7.0.14.0 이전 버전은 1024번 이상의 포트만 사용할 수 있다.


또한 크로스도메인 파일은 XMLSocket을 사용하는 서버의 80포트에서만 찾기 때문에


항상 XMLSocket 서버의 80포트에 웹서버 열어두어야 하는 문제가 있다.



그러나 7.0.19.0 이후 버전에서는 이런 문제가 해결되었다.


XMLSocket을 사용할 때 1024 이상의 포트뿐 아니라 다른 모든 포트를 사용할 수 있으며,


loadPolicyFile()에서 특정 포트에서 정책 파일을 불러올 수 있게 되었다.


그러므로 항상 80포트를 열어두어야 하는 문제가 없어진다.



서버의 루트폴더에 xml을 crossdomain.xml 이름으로 생성


만약 루트에 만들지 않을경우는 System.security.loadPolicyFile(“http://www.B.co.kr/allowed/cdpf.xml“);로 명시



xml에 포함되어야 할 코드


<cross-domain-policy>
<allow-access-from domain=”testowner.hyundai-motor.com” />  
<allow-access-from domain=”testcyber.hyundai-motor.com” />  
</cross-domain-policy>





도메인간 데이터 액세스 허용



이것때문에 한참 헤맸습니다. 도메인 정책을 2004에서는 공식적인 방법으로 지원하고있다는것을 찾아보고나서야 알게되었습니다.


한동안 손떼고 있다가 열심히 다시 해서 밥이라도 먹고살려나 싶어 다시 손을 뎃는데 많은부분이 바뀌어있군요.


Flash 문서는 다음 데이터 로드 호출 중 하나를 사용해 외부 소스에서 데이터를 로드할 수 있습니다. XML.load(), XML.sendAndLoad(), LoadVars.load(), LoadVars.sendAndLoad(), loadVariables(), loadVariablesNum(). 또한, SWF 파일은 런타임 공유 라이브러리나 다른 SWF 파일에 정의된 자원을 런타임에 가져올 수 있습니다. 기본적으로, 런타임 공유 라이브러리의 경우 데이터나 SWF 미디어는 해당 외부 데이터나 미디어를 로드할 SWF와 같은 도메인에 존재해야 합니다.


런타임 공유 라이브러리의 데이터와 자원을 서로 다른 도메인의 SWF가 사용할 수 있도록 하려면 크로스 도메인 정책 파일을 사용합니다. 크로스 도메인 정책 파일은 서버가 자신의 데이터와 문서를 특정 도메인 또는 모든 도메인에서 제공되는 SWF에 사용할 수 있다는 것을 나타내는 방법을 제공하는 XML 파일입니다. 서버의 정책 파일에 의해 지정된 도메인에서 제공되는 모든 SWF 파일은 그 서버의 데이터나 자원에 액세스하도록 허용됩니다.


Flash 문서가 다른 도메인의 데이터에 액세스하려고 시도하면 Flash Player는 자동적으로 그 도메인에서 정책 파일을 로드합니다. 액세스하려는 Flash 문서의 도메인이 정책 파일에 포함되어 있으면 자동적으로 데이터에 액세스할 수 있게됩니다.


정책 파일의 이름은 반드시 crossdomain.xml이어야 하며 데이터를 제공할 서버의 루트 디렉토리에 존재해야 합니다. 정책 파일은 HTTP, HTTPS 또는 FTP 상에서 통신하는 서버에서만 동작합니다. 정책 파일은 파일이 저장된 서버의 포트와 프로토콜에만 해당됩니다.


예를 들어, https://www.macromedia.com:8080/crossdomain.xml에 있는 정책 파일은 HTTPS를 통하여 www.macromedia.com의 8080 포트에 대한 데이터 로드 호출에만 적용됩니다.


XMLSocket 객체를 사용하여 다른 도메인의 소켓 서버에 연결하는 경우에는 이 규칙이 적용되지 않습니다. 이 경우, 소켓 서버와 같은 도메인의 80번 포트에서 실행 중인 HTTP 서버는 메서드 호출을 위한 정책 파일을 제공해야 합니다.


XML 정책 파일은 하나의 <cross-domain-policy> 태그를 가집니다. 그리고, 이 태그에는 0개 이상의 <allow-access-from> 태그가 포함됩니다. 각 <allow-access-from> 태그는 한 개의 속성 domain을 가집니다. 이 속성에 정확한 IP 주소, 정확한 도메인 또는 와일드카드 도메인(모든 도메인)을 지정합니다. 와일드카드 도메인은 모든 도메인과 IP를 대표하는 단일 별표 문자(*) 또는 접미어로 끝나는 도메인을 대표하는 접미어를 가진 별표 문자로 표현됩니다. 접미어는 점으로 시작해야 합니다. 그러나, 접미어를 가진 별표 문자는 앞의 점을 제외한 접미어 만으로 구성되는 도메인과 일치할 수 있습니다. 예를 들어, foo.com은 *.foo.com에 속한 것으로 생각할 수 있습니다. 와일드카드는 IP 도메인 형식에 사용할 수 없습니다.


IP 주소를 지정하면 IP 구문(예: http://65.57.83.12/flashmovie.swf)을 사용하여 해당 IP 주소에서 로드된 SWF에만 액세스 권한이 부여됩니다. 이 경우, 도메인 이름 구문을 사용하여 로드된 SWF에는 액세스 권한이 부여되지 않습니다. Flash Player는 DSN 이름 해결을 수행하지 않습니다.


다음은 foo.com의 Flash 문서에 대해 foo.com, friendOfFoo.com, *.foo.com 및 105.216.0.40에서 온 Flash 문서에 액세스를 허용하는 정책 파일의 예입니다.

정책 파일에 <allow-access-from> 태그가 없으면 서버에 정책이 없는 것과 동일합니다.

Using the TransitionManager Class in AS3

<펌> : http://www.republicofcode.com/tutorials/flash/as3transitionmanager/2.php

The TransitionManager Class provides ActionScript developers with 10 ready-made transition effects that can be applied directly onto any MovieClips. The 10 available transitions can be used either as an ‘in’ or an ‘out’ transition and can also be further customized to suit the needs of the particular project in which the transitions are used in. This tutorial will teach you everything you need to know about using the TransitionManager in ActionScript 3.0. Check the example below to see the ten transitions in action.

This tutorial is divided into the following sections:



  1. Basic Usage of the TransitionManager Class.
  2. The Common Parameters for The 10 Transitions.
  3. Events of the TransitionManager Class.
  4. The 10 Transitions Explained in Detail.

Basic Usage of the TransitionManager Class


The TransitionManager Class is used to apply ready-made transition effects to any MovieClip object. These transitions are Blinds, Fade, Fly, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, and Zoom. Transitions are different from Tweens because tweens manipulate single properties while a transition manipulate an entire object. The TransitionManager is used in circumstances where you wish to, for example, dissolve an image into another as a transition effect between two sections in your Flash website. It is not the only way for creating such effects, but probably one of the quickest methods for doing so. Each transition type has a varying level of customization that allows you tailor the transition effect to the specific needs of your project.


We are going to start off by creating a simple example in Flash to show the TransitionManager Class in action. We need to create a Flash movie with at least one MovieClip object on stage to use the TransitionManager on it.


Open up Flash and create a new Flash movie in ActionScript 3.0 format. Insert an image onto stage, then select it, press F8 to convert it to a symbol, select Movie clip as the symbol Type. The Name of the symbol does not matter so you can put anything you want there.


AS3 - Transition Manager


In order to easily refer to our object using ActionScript we need to assign an Instance Name to our object. To do this, simply select the MovieClip on stage, then access the Properties Inspector and set the Instance Name in specified field. Use my_mc as the instance name for our MovieClip.


AS3 TransitionManager Class - Properties Inspector


It is possible to refer to any object placed on Stage by using the .getChildAt() method, but that will require guessing the position of the object on the Display List. Using Instance Names is the easiest method for referring to manually created objects on stage.

We can now start coding, right-click the only frame you have on the timeline and select Actions. This will open up the Action Panel on which all of our code will reside.


Using the TransitionManager Class requires importing its class into our current movie. The TransitionManager makes use of the easing classes to specify the flow of the transition so it must also be imported. We can import all the required classes at the start of our code by using the import directive.


import fl.transitions.*;
import fl.transitions.easing.*;

Using the TransitionManager Class – Method 1


The transition Class can be used in two different ways, the shortest way of doing this is by using the .start() method on the class directly without creating an instance of the class. This method can be used in the following generalized code:


TransitionManager.start(target_movie_clip, transition_parameters);

Where the target_movie_clip is replaced with the instance name of the MovieClip, while the transition_parameters field is to be replaced with a set of parameters specifying the transition to be used. For example, to create a simple Fly transition for our image on stage we can use the following code:


import fl.transitions.*;
import fl.transitions.easing.*;

TransitionManager.start(my_mc,{type:Fly, direction:Transition.IN, duration:2, easing:Strong.easeOut})

Where my_mc is the name of the target movie clip and the parameters between the curly brackets are the transition parameters. You can test the movie now (Ctrl+Enter) to see the effect.


Each transition has a number of optional parameters that can be used to customize it. You may use as many of these as you want, not specifying any of them will simply revert the effect to its default settings. The only parameter that you have to specify is the type (which is obvious as you cannot do a transition before deciding what transition it is). So for example, the code below will still work even though it will look a bit different than the previous one:


import fl.transitions.*;
import fl.transitions.easing.*;

TransitionManager.start(my_mc,{type:Fly})

You can at this moment try all the possible transitions by replacing the word Fly with any of the following: Blinds, Fade, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, or Zoom.


Using the TransitionManager Class – Method 2


The alternative method for using the TransitionManager Class is by creating an instance of it and then executing the transition by using the .startTransition() method. The difference between this method and the previously used .start() is that the .startTransition() method does not require setting the target movie clip because it is specified when instantiating the class. This method is one line longer than the previous method. It can be used in the generalized code below:


var identifier:TransitionManager = new TransitionManager(target_movie_clip);
identifier.startTransition(transition_parameters);

In the example above the identifier can be replaced with any name you choose while the target_movie_clip and transition_parameters are to be used in the same way shown in method 1. So in order to do a trick similar to the ones we used above we can write something similar to this:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.IN, duration:2, easing:Strong.easeOut})

This method might look longer, but it allows us to listen to transition completion events – we will discuss this later in this page. The next section will show you the different ways in which you customize any of transitions.


Customizing the Ten Different Transition Types


It is possible to pass a number of optional parameters to each transition to customize it when executing the transition. However, all of these transitions are optional and a transition can still be made without specifying anything other than the type of the transition.


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Zoom})

However, you would usually like to customize the transition to a certain extent to make it fit your project. All the transitions share a number of common parameters that can be used with any of them. Some transitions also have unique parameters that can only be applied to them. We are going to discuss the common parameters which are shared by all the transitions. The unique parameters for each of transitions will be discussed in the second page of this tutorial.


The three common shared parameters are Direction, Duration, and Easing. It is important to note that all of these parameters are optional, you are not required to specify them in any order, and you may use as many of them as you choose or use none at all.


Common Parameter 1 – Direction


The Direction parameter specifies whether this is an intro or an outro transition. An intro transition is one which is used to introduce the movie clip to the scene, while an outro transition is one that removes an object from the scene.


There are only two possible values for this parameter, Transition.IN and Transition.OUT. The naming conventions are pretty self-explanatory, you can use parameter easily in the manner shown below:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fade, direction:Transition.OUT})




Common Parameter 2 – Duration


The Duration of any transition is the time period required for the transition to complete. You need to specify this value in seconds. It can be easily incorporated in the manner shown below:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Rotate, duration:50})




Common Parameter 3 – Easing


The Easing parameter determines the flow of the speed of the transition animation. It is pretty hard to explain in words, but is easy to understand once you see it. There are five easing Classes that can be used to determine how the animation flows.



  • None – No easing is used, the animation flows at constant regular speed.
  • Regular – Normal easing means that the animation will gradually increase or decrease in speed depending on the way it is used.
  • Strong – A more emphasized gradual increase or decrease in the animation speed.
  • Back – The animation will exceed the final or initial target and then go back (almost like a bounce effect).
  • Elastic – A mixture of strong and back easing together.

Each of these easing types mentioned above can be further customized by using its easing at the start of the animation (easeIn), at the end of the animation(easeOut), or both at the start and end of the animation (easeInOut). This parameter can be incorporated this way:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Rotate, easing:Back.easeOut})

It is pretty hard to understand how easing works without looking at a visual example. Note that the difference between Regular and None easing can be too subtle to notice.





Using the Three Common Parameters Together


The three mentioned above parameters can be used for all the transition types. You may use any of them in any specific order you choose. For example, if you want to have a fly In-Transition, that lasts for 3 seconds and uses a Back easing you would write that using a code similar to the one below:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.IN, duration:3 , easing:Back.easeOut})

Reacting to Transition Events


Say you wanted to open a link or move to another section in your movie once a transition completes, to do this you will have to use an event listener to trigger a listener function.


The TransitionManager Class has two events (1) allTransitionsOutDone and (2) allTransitionsInDone – both of which are not documented by Adobe at the time I am writing this tutorial. The allTransitionsOutDone event is triggered when a transition with a direction parameter set to Transition.OUT finishes, while the allTransitionsInDone event is triggered when a transition with a direction parameter set to Transition.IN finishes.


These events are to be attached to an instance of the TransitionManager Class and are used exactly like all other events in ActionScript 3.0. For example, if we want to output a message saying that the animation is complete we can use the following code:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.IN, duration: 3, easing:Back.easeOut})

myTM.addEventListener(“allTransitionsInDone”, doneTrans);

function doneTrans(e:Event):void{
trace(“The animation has finished!”);
}

It is possible to refer to the movie clip that was animated by using the .content property of the event target (which is the instance of the TransitionManager) from within the listener function:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.IN, duration: 3, easing:Back.easeOut})

myTM.addEventListener(“allTransitionsInDone”, doneTrans);

function doneTrans(e:Event):void{
trace(“The animation has finished!”);
MovieClip(e.target.content).alpha=.5;
}

“MovieClip()” was used on the reference to the target movie clip to ‘type-cast’ the MovieClip type of that object. This lets Flash know for sure that this object is a movie clip as required by the authoring tool if it is used in strict mode.

Using the technique above makes it possible to reuse the listener function for various objects and lets us use the listener without necessarily knowing the name of the target object.


The first page of this tutorial taught you the basic usage of the TransitionManager Class and how to use the common parameters for all the transition types. This page will show you the ten different transition types and the special parameters available for each of these transition types and which can be used to further customize each of these effect.


We are going to go through these transition one by one in the following order:



It is worth noting that all of these transitions share the common parameters explained in page one, namely: Direction, Duration, and Easing. Refer to page 1 to learn how to use these attributes.


Blinds


The Blinds transition uses vertical or horizontal strips masks to show or hide an image. In addition to the commonly shared parameters it has two additional parameters for specifying the number of strips to use in the transition and whether to use vertical or horizontal strips:



  • Additional Parameters:

    • numStrips: accepts any positive number.
    • dimensions: accepts 0 or 1. 0 uses horizontal strips while 1 uses vertical strips.

Usage Example:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Blinds, direction:Transition.OUT, duration:3, easing:None.easeOut, numStrips:50, dimension:1});
}




Fade


The Fade transition simply fades in or fades out a movie clip. It has no parameters other than the commonly shared parameters.


Usage Example:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fade, direction:Transition.OUT, duration:3, easing:Strong.easeOut});
}




Fly


The Fly transition moves a movie clip in to or out of stage. It has one additional parameter to specify the position from which the movie clip flies from or to.



  • Additional Parameters

    1. startPoint: accepts any number between 1 to 9 to specify the direction from which the the movie clip will fly from or to:

      • 1 = Top Left
      • 2 = Top Center
      • 3 = Top Right
      • 4 = Left Center
      • 5 = NA
      • 6 = Right Center
      • 7 = Bottom Left
      • 8 = Bottom Center
      • 9 = Bottom Right

Usage Example:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.OUT, duration:3, easing:Strong.easeOut, startPoint:7});
}




Iris


The Iris transition uses an animated circle or square mask to reveal or hide a movie clip. In addition to the commonly shared parameters it has two additional parameters for specifying the direction from which the mask shows up and whether to use a circle or square as the shape of the mask.



  • Additional Parameters

    1. startPoint: accepts any number between 1 to 9 to specify the position from which the mask starts growing or shrinking.

      • 1 = Top Left
      • 2 = Top Center
      • 3 = Top Right
      • 4 = Left Center
      • 5 = Center
      • 6 = Right Center
      • 7 = Bottom Left
      • 8 = Bottom Center
      • 9 = Bottom Right

    2. shape: specifies whether to use a circle or a square for the shape, use Iris.CIRCLE for circle, and Iris.SQUARE for square:

Usage Example:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Iris, direction:Transition.OUT, duration:3, easing:Strong.easeOut, startPoint:1, shape:Iris.CIRCLE});
}




Photo


The Photo transition uses a camera flash-like effect to fade in or fade out movie clips. It has no parameters other than the commonly shared parameters.


Usage Example:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Photo, direction:Transition.OUT, duration:3, easing:Strong.easeOut});
}




Pixel Dissolve


The Pixel Dissolve transition uses randomly appearing rectangles to show or hide a movie clip. In addition to the commonly shared parameters it has two additional parameters for specifying the number of vertical and horizontal rectangles at which the shape will be divided.



  • Additional Parameters:

    • xSections: accepts any positive number, determines the number of horizontal divisions.
    • ySection: accepts any positive number, determines the number of vertical divisions.

Usage Example:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:PixelDissolve, direction:Transition.OUT, duration:3, easing:None.easeOut, xSections:35, ySections:35});




Rotate


The Rotate transition simply rotates an object. It can be customized by setting the rotation direction and the amount of rotation.



  • Additional Parameters:

    • ccw: this parameters specifies whether to rotate clockwise or counter-clockwise, set this as true to rotate counter-clockwise or set it as false to rotate clockwise.
    • degrees: Specify the number of degrees to rotate to, you can use any number.

Usage Example:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Rotate, direction:Transition.OUT, duration:3, easing:None.easeOut, ccw:false, degrees:720});




Squeeze


The squeeze transition squeezes (scales down) or expands (scales up) an object horizontally or vertically. It has one additional parameter to specify whether to have a horizontal or vertical squeeze.



  • Additional Parameters:

    • dimensions: accepts 0 or 1. 0 squeezes the object horizontally while 1 squeezes the object vertically.

Usage Example:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Squeeze, direction:Transition.OUT, duration:3, easing:None.easeOut, dimension:1});




Wipe


The wipe transition uses a mask to show a movie clip or wipe it out. It has one additional parameter to specify the position from which the animation ends or starts.



  • Additional Parameters

    1. startPoint: accepts any number between 1 to 9. If used as an ‘IN’ transition, this specifies the position at which the animation ends, if uses as an ‘OUT’ transition, this specifies the starting point of the wipe effect.

      • 1 = Top Left
      • 2 = Top Center
      • 3 = Top Right
      • 4 = Left Center
      • 5 = NA
      • 6 = Right Center
      • 7 = Bottom Left
      • 8 = Bottom Center
      • 9 = Bottom Right

Usage Example:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Wipe, direction:Transition.OUT, duration:3, easing:Strong.easeOut, startPoint:1});




Zoom


The Zoom transition simply scales up or down a movie clip. It has no parameters other than the commonly shared parameters.


Usage Example:


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Zoom, direction:Transition.OUT, duration:3, easing:Strong.easeOut});




Combo Usage


It is possible to use a combination of transitions at the same time on a single object. This does not work with all transitions, especially ones that involve using a mask, such as Iris, PixelDissolve, and Wipe because they are not compatible with each other, however, they will still work in combination with any other transitions.


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Zoom, direction:Transition.IN, duration:7, easing:Strong.easeOut});
myTM.startTransition({type:Rotate, direction:Transition.IN, duration:7.5, easing:Bounce.easeOut});
myTM.startTransition({type:PixelDissolve, direction:Transition.IN, duration:5, easing:Strong.easeOut});
myTM.startTransition({type:Fly, direction:Transition.IN, duration:4, easing:Strong.easeOut});




This concludes our tutorial. I hope that you’ve learnt something new about the TransitionManager Class and its various transitions types. If you have any questions or comments please post them all at the Oman3D Forum.


End of Tutorial.

Flex 프로젝트 문서화 – ASDoc 사용하기

<펌> : http://blog.jidolstar.com/79

Flex 프로그램을 하다보면 내가 만든 프로그램을 문서화를 하고 싶은 경우가 있다. Java의 경우 JavaDoc이라는 아주 좋은 문서생성 프로그램이 있고 Eclipse내에서 Export시 JavaDoc을 쉽게 사용할 수 있으므로 아주 편리하다.

ASDoc은 JavaDoc과 같이 Flex로 만든 프로젝트 안에 .as/.mxml 파일을 .html API 문서 생성해주는 프로그램이다. Flex SDK 2에 보면 이 ASDoc.exe이 있다. 아쉽게도 Flex Builder의 경우 Eclipse처럼 쉽게 문서를 만들지 못하지만 그래도 문서화 시킬 수 있다는게 얼마나 좋은가?

ASDoc을 가지고 간단하게 Flex 문서화 해보자.


1. ASDoc은 어디에 있나?



ASDoc은 Flex를 설치한 폴더안에 Flex SDK 2/bin 폴더에 있다. 이것을 실행하기 위해서는 Command창을 띄워 그 폴더로 이동해야한다.


2. ASDoc을 수행하기 위한 작업



Flex Builder에서 새 프로젝트(ASDocExample)를 만들고 com.jidolstar.core package 폴더를 만들어 그 안에 ExMath.as와 Const.as를 만들었다.


사용자 삽입 이미지

Java와 같은 방법으로 Flex에서도 비슷하게 주석을 넣어주면 된다. JavaDoc처럼 풍부하게 지원해주지는 않는다. 사용하는 방법은 아래 사이트를 참고한다.


위 사이트를 참고하여 아래 내용과 같처럼 주석을 만들었다.
나중에 확인해보면 알겠지만 JavaDoc에서 사용하는 @author , @since 같은 것은 ASDoc에서 해석하지 않는 것 같았다.

Const.as

사용자 삽입 이미지

ExMath.as

사용자 삽입 이미지



3. ASDoc을 이용해 문서화 하자!

윈도우에서 시작>실행을 선택한뒤 cmd를 입력하면 Command창이 뜬다.
거기서 아래 명령을 통해 ASDoc 있는 곳으로 찾아간다.

   cd C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\bin

여기서 asdoc 명령을 수행할 수 있다. 이 프로그램을 실행할려면 몇가지 옵션을 설정해야한다.


  • -source-path : 프로그램이 있는 경로를 입력한다. 즉, 프로젝트 폴더(E:\…\ASDocExample)를 입력하면 된다.
  • -output : 문서가 저장되는 폴더를 지정한다.
  • -window-title : 브라우져상에 title에 들어가는 문자열이다.
  • -main-title : 문서내에 title이다.
  • -doc-classes : -source-path에서 지정한 프로젝트 폴더내에 문서화할 폴더를 지정하면 된다. 전부 다하고 싶다면 프로젝트 폴더만 입력하면 된다.

옵션설정에 대해서 대충 알았으니 이제 아래와 같이 asdoc을 실행해서 실제로 문서를 만들어보자.

asdoc -source-path E:\…\ASDocExample -output asdoc-output\ASDocExample -window-title “ASDoc Example Documentation” -main-title “ASDoc Example Documentation” -doc-classes ASDocExample

-output을 asdoc-output\ASDocExample로 했기 때문에 그 폴더로 찾아가면 문서들이 만들어져 있는 것을 확인할 수 있다. 거기서 index.html 을 눌러보면 아래와 같은 화면이 나온다.

사용자 삽입 이미지

사용자 삽입 이미지




4. ASDoc 사용시 주의사항

ASDoc을 사용할 때 안되는 경우가 있는데 아래 주의사항만 지킨다면 ASDoc을 무난히 사용할 수 있을것이다.


  1. 명령어 수행중 한글은 사용하지 말자.
  2. 폴더명도 한글이면 안된다. 만약 프로젝트가 있는 경로에 한글폴더가 있다면 프로젝트를 영문 경로만 있는 곳으로 복사한 다음 ASDoc을 사용한다.


5. 정리하며


이로써 ASDoc을 이용해 Flex 프로그램을 문서화 할 수 있게 되었다. ASDoc을 사용하면 주석을 다는데 신중해지고 소스관리할때도 편리하다. 자주 애용해야겠다.

지금까지 Flex 2.0.1 환경에서 작업을 했다.


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

작고 가벼운 패킷 분석 프로그램, Smart Sniff






패킷분석프로그램이란, 간단히 말하여 다운로드 주소를 따오는 프로그램입니다. (깊숙히 들어가면 매우 전문적인 영역이므로 설명을 제하겠습니다.) 그런 패킷분석프로그램 중 가장 작고 가볍다는 평을 받는 것이 이 smart sniff입니다.


사용법은 옵션 – 캡처옵션에서 자신의 네트워크어댑터만 바로 설정후 캡쳐버튼(▶)을 누르면 컴퓨터로 다운되고 있는 정보(패킷)의 주소를 얻을수 있습니다.

– 강력한 패킷 스니퍼링 도구이다.

– winPcap 캡쳐 드라이버가 필수적이다.
http://www.winpcap.org/install/default.htm

– 캡처 데이터를 export 해준다.

– 아스키 127 로 출력 해준다.

– 각종 필터링 기능을 제공한다.

– 라이브 모드 기능을 제공한다.

– 프로세스 정보 보기 기능을 제공한다.

– 한국어 뿐만아니라 다국적 언어를 제공한다.


smart sniff


smart sniff 한글패치 (설치폴더로 복사하세요)



StarUML (무료 UML 프로그램)

starUML이란? 공짜로 UML 그리는 프로그램



Screenshot: Pattern – EJB Support












Pattern – EJB Support

Profile Extension-Customize stereotype

Notation Extension – ER Diagram

Component Diagram

Class Diagram

Usecase Diagram

이렇게나 기능이 마나요~


그럼 이제 다운로드 받으러 갑시다


http://sourceforge.net/project/showfiles.php?group_id=152825&package_id=169190&release_id=437438




클릭하면 아래와 같은 화면이 뜬다
빨간색 상자 클릭!



다운받아서 실행하고 난뒤(계속 next해주심 되요~간편한 설치~)
설치 마지막에 바탕화면에 아이콘 설치할껀지 체크박스로 물어보는데 체크해주시고
설치 완료후 실행시키면 아래와 같이 뜹니다.



이제부터 사용법 참고하시라고 보너스~


* starUML 한국 사이트
http://staruml.sourceforge.net/ko/


 



* StarUML 5.0 사용자 가이드(한글)
http://staruml.sourceforge.net/docs/user-guide(ko)/toc.html


* UML의 기초: 클래스 다이어그램 (한글)-> 그리는 방법http://www.ibm.com/developerworks/kr/library/sep04/bell/index.html



Caurina Tweener Reference

링크주소 : http://hosted.zeh.com.br/tweener/docs/en-us/

———————————————————————————————————————–


Using Tweener classes


So, in Tweener’s case, after installing the Tweener classes (by unzipping the download .zip file on your .FLA’s folder, or copying the files over), you would probably have a list of files as such:

Where “myWebsiteProject.fla” is your hypothetical .FLA file, considering you’re working with the Flash IDE.


The way folders are structured matter for a class. For example, on Tweener’s complete class name is caurina.transitions.Tweener; that’s why the Tweener.as file (and all other class files) have to be on folder /caurina/transitions.


The caurina name is meant to be something unique, neutral; from a technical standpoint, it doesn’t matter much, so it’s just part of Tweener’s package path.


If (and only if) you’re using some unusual folder for your class files – something other than the project folder, for example – you have to make sure the correct class directory is listed on the document’s classpath – the list of folders Flash will look for when it tries to add a class to the project when compiling. On the Flash IDE, you can access the document’s classpath list by using the “File” > “Publish Settings” menu, then clicking on the “Settings…” button next to the Actionscript version combo box. On the window that opens, make sure the class directory you’ve chosen is listed.


You can also change your global classpath settings on Flash preferences.


After you have a class installed, and it is acessible from your project, you can use it when writing Actionscript code. You can use classes by just referring to them, using their complete class path and name. There’s no need to refer to the specific folder where your classes are copied (other than the complete class name with classpath). For example, to call a Tweener method, you would do this:

This is a bit too long, however. Fortunatelly, Flash lets you import classes and reuse them. Like this:

On the surface, this works a bit like #include, but it’s more of a declaration that you’re gonna use the Class than anything. It doesn’t actually include the contents of the class file every time you do an import. Instead, it includes the used class files on the first frame of your movie (or whichever frame you have chosen to be the class frame).


Also, remember that, if you’re writing your code on the timeline (as opposed to in a new class), you have to repeat the import line on every new frame or MovieClip scope you intend to call Tweener.

Caurina Tweener 클래스 사용방법

<펌> : http://jasu.tistory.com/264

caurina Tweener는 Papervision3D를 접하면서 알게 되었는데 플래시에서 지원하고 있는 Tween 클래스보다 다양한 기능과 그 사용법도 간단하다. static 메소드를 지원하여 Tweener.addTween() 형태로 사용하며 파라미터로 넘겨주는 것은 아래와 같다.

Tweener 사용 방법


Tweener.addTween(DisplayObjectInstanceName, {x:-1050, y:300, _bezier:[{x:-575, y:450, z:-375}, {x:411, y:275, z:-337}, {x:344, y:114, z:370}, {x:-466, y:56, z:398}, {x:-336, y:305, z:-1177}], time:10, transition:”easeoutinexpo”});

위와 같이 트윈을 적용한 인스턴스와 그 인스턴스에서 트윈할 프로퍼티의 적용값을 지정하며 _bezier 형태로 복수의 포인트 간 포인트 적용으로 동선을 임의로 제작할 수 있다. time은 적용 시간을 나타내며 초단위이다. transition은 에싱의 형태를 지정.
           
Tweener.addTween(cube, {onStart:tweenStart, onComplete:tweenComplete, rotationX:active, rotationY:active, rotationZ:active, time:1.5, transition:”easeinoutexpo”});

위와 같이 모션의 시작 시점에서 실행할 handler 메소드를 지정할 수 있으며 끝나는 시점과 update마다 실행 하는 handler 메소드도 지정 가능하다. handler 메소드의 종류는 아래와 같다.

handler 종류
///////////////////////////////////////////////////////////////////////

onStart : tween 시작 핸들러 등록
onComplete : tween 큰 핸들러 등록
onUpdate : tween 진행중 핸들러 등록

이 밖에서 여러가지 핸들러 메소드를 지원하고 있다.

transitions 종류
///////////////////////////////////////////////////////////////////////
easeoutquad             // mx.transitions.easing.Regular.easeOut
easeinoutquad          // mx.transitions.easing.Regular.easeInOut
easeoutinquad
           
easeincubic
easeoutcubic
easeinoutcubic
easeoutincubic
           
easeinquart
easeoutquart
easeinoutquart
easeoutinquart
           
easeinquint
easeoutquint
easeinoutquint
easeoutinquint
           
easeinsine
easeoutsine
easeinoutsine
easeoutinsine
           
easeincirc
easeoutcirc
easeinoutcirc
easeoutincirc
           
easeinexpo        // mx.transitions.easing.Strong.easeIn
easeoutexpo        // mx.transitions.easing.Strong.easeOut
easeinoutexpo        // mx.transitions.easing.Strong.easeInOut
easeoutinexpo
           
easeinelastic        // mx.transitions.easing.Elastic.easeIn
easeoutelastic        // mx.transitions.easing.Elastic.easeOut
easeinoutelastic    // mx.transitions.easing.Elastic.easeInOut
easeoutinelastic
           
easeinback        // mx.transitions.easing.Back.easeIn
easeoutback        // mx.transitions.easing.Back.easeOut
easeinoutback        // mx.transitions.easing.Back.easeInOut
easeoutinback
           
easeinbounce        // mx.transitions.easing.Bounce.easeIn
easeoutbounce        // mx.transitions.easing.Bounce.easeOut
easeinoutbounce        // mx.transitions.easing.Bounce.easeInOut
easeoutinbounce


클래스 내부를 살펴보면 아래와 같은 코드를 확인 할 수 있는데 아래와 같이 _frame에 대한 모션도 적용 가능하며(이 클래스를 사용하면 따로 gotoAndPlay 모션 클래스를 제작할 필요도 없어보이지만 간단한 사용을위해서는 따로 제작해서 사용하는 편이 효율적일 듯 싶다.아무래도 프레임간 모션 적용으로 프레임을 많이 필요로 할 듯 싶다) _color 속성으로 사용하면 RGB값으로 DisplayObject의 tint색을 변경하는 모션도 가능하다. 또한 blur값 변경과 사운드 볼륨의 경우도 마찮가지…

DisplayObject의 프로퍼티가 아닌 Tweener 클래스 자체에서 내부적으로 가공하여 사용한 프로퍼티의 경우는 앞에 _를 붙여서 사용하고 있다.

// Normal properties
Tweener.registerSpecialProperty(“_frame”, frame_get, frame_set);
Tweener.registerSpecialProperty(“_sound_volume”, _sound_volume_get, _sound_volume_set);
Tweener.registerSpecialProperty(“_sound_pan”, _sound_pan_get, _sound_pan_set);
Tweener.registerSpecialProperty(“_color_ra”, _color_property_get, _color_property_set, [“redMultiplier”]);
Tweener.registerSpecialProperty(“_color_rb”, _color_property_get, _color_property_set, [“redOffset”]);
Tweener.registerSpecialProperty(“_color_ga”, _color_property_get, _color_property_set, [“greenMultiplier”]);
Tweener.registerSpecialProperty(“_color_gb”, _color_property_get, _color_property_set, [“greenOffset”]);
Tweener.registerSpecialProperty(“_color_ba”, _color_property_get, _color_property_set, [“blueMultiplier”]);
Tweener.registerSpecialProperty(“_color_bb”, _color_property_get, _color_property_set, [“blueOffset”]);
Tweener.registerSpecialProperty(“_color_aa”, _color_property_get, _color_property_set, [“alphaMultiplier”]);
Tweener.registerSpecialProperty(“_color_ab”, _color_property_get, _color_property_set, [“alphaOffset”]);
Tweener.registerSpecialProperty(“_autoAlpha”, _autoAlpha_get, _autoAlpha_set);

// Normal splitter properties
Tweener.registerSpecialPropertySplitter(“_color”, _color_splitter);
Tweener.registerSpecialPropertySplitter(“_colorTransform”, _colorTransform_splitter);

// Scale splitter properties
Tweener.registerSpecialPropertySplitter(“_scale”, _scale_splitter);

// Filter tweening properties – BlurFilter
Tweener.registerSpecialProperty(“_blur_blurX”, _filter_property_get, _filter_property_set, [BlurFilter, “blurX”]);
Tweener.registerSpecialProperty(“_blur_blurY”, _filter_property_get, _filter_property_set, [BlurFilter, “blurY”]);
Tweener.registerSpecialProperty(“_blur_quality”, _filter_property_get, _filter_property_set, [BlurFilter, “quality”]);

// Filter tweening splitter properties
Tweener.registerSpecialPropertySplitter(“_filter”, _filter_splitter);

// Bezier modifiers
Tweener.registerSpecialPropertyModifier(“_bezier”, _bezier_modifier, _bezier_get);

그리고 Tweener 클래스에서는 첫 파라미터인 DisplayObject에 DisplayObject를 복수로 가지고 있는 Array를 등록할 경우 Array에 있는 모든 DisplayObject에 해당 트윈을 적용 할 수 있다.

_bezier의 경우는 Papervision3D에서 주로 사용되었는데 이는 카메라의 위치나 각도를 변경할 때 효과적으로 사용되고 있다. 2D 형태에서도 복잡한 동선의 경우에 기존의 트윈 클래스의 모션이 매끄럽지 못하여 그 모션을 적용하기 위한 클래스를 따로 제작해서 사용해야 했지만 제공하고 있는 샘플을 통해서 쉽게 동선을 그리고 좌표를 축출할 수 있다.  그동안의 트윈 클래스에서 아쉬웠던 부분들을 속시원하게 채워주고 있는 듯 싶다.

코드가 업데이트 되고있는 위치
http://code.google.com/p/tweener/

Runtime font sharing

<펌> http://hangunsworld.com/blog/330

우선 공유하려는 폰트를 라이브러리에 등록하고, 아래 그림과 같이 설정한 다음 SWF을 퍼블리시 합니다.

First, register a font in the library, and set the linkage properties like the following image. Then, publish the SWF file.

 

Sharing a font


이 SWF파일을 Loader 객체로 로드한 다음, 아래 코드를 사용하여 공유된 폰트를 등록, 사용할 수 있습니다.

Load the SWF via Loader object, then you can retrieve the shared font from the loaded SWF.

 



Using the shared font.


그러나 여기서 한 가지 문제가 있습니다. 같은 도메인의 경우 상관이 없으나, 서로 다른 도메인에서는 SWF가 로드되었다 하더라도, ApplicationDomain.getDefinition() 메소드를 통해 폰트를 가져올 수 없습니다. 즉, www.mydomain.com의 SWF에서 font.mydomain.com의 SWF파일에 정의된 폰트를 사용할 수 없다는 것입니다.

이 문제를 해결하기 위해서는 LoaderContext.securityDomain 속성을 사용하여, 다른 도메인의 SWF 사이에서 자원에 대한 접근을 허용할 필요가 있습니다. 다음의 코드는 LoaderContext를 사용하여 다른 도메인 사이에 폰트를 공유할 수 있도록 구성한 것입니다.


But there is a problem. If the two SWF files is on the same domain, no problem. If the SWFs are seperated in different domains, you can not access to the shared font with ApplicationDomain.getDefinition() method, though the SWF file is loaded in. So, an SWF file on www.mydomain.com can not use a font in an SWF on font.mydomain.com.

You can use LoaderContext property, to allow access to assets in a different domain’s SWF file. The following code shows how it works.








Related Links
http://geniusduck.tistory.com/entry/swf-load-%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-embeded-font-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
http://blog.jidolstar.com/247
http://liverwort.tistory.com/227
http://www.adobe.com/devnet/flash/quickstart/embedding_fonts/

Free Builder in FlexSDK and EditPlus

<펌>http://blog.naver.com/nooreestyle/150007454836

이 자료는 힘톤닷컴(http://www.himton.com/)의 내용을 참조하였습니다.

Adobe FlexBuilder 2는 상용소프트웨어로서 돈을 주고 구매하여 사용해야 합니다. 물론 FlexBuilder는 각종 컴포넌트를 드래그하여 쉽게 MXML코드를 삽입할 수 있고, 다양한 Panel를 통하여 MXML의 화면을 마우스만으로 쉽게 편집할 수 있는 장점이 있지만 무료가 아니라는 점에서 Flex를 다뤄보고자 하는 분들에게 경제적인 부담이 매우 큽니다. 하지만 Adobe에서는 Compiler만큼은 무료로 배포하고 있고, 이 Compiler로 생성된 SWF파일은 배포하여도 법적으로 문제가 없으므로 천만다행이다 할 수 있습니다..

먼저 일반 Web개발자의 필수품인 Editplus를 이용하여 MXML코드를 작성하고, 이를 컴파일하여 SWF까지 자동으로 생성해주는 나만의 Flex Builder를 만들어 봅시다. 우선 Adobe에서 FlexSDK를 다운로드 합니다. (http://www.adobe.com/products/flex/sdk/)



그런 다음 하드디스크에 압축을 풀어줍니다. 이 폴더는 계속해서 사용할 Compiler가 있는 폴더이므로 자주사용하지 않는(혹시 모르고 지워버릴 수 있으므로) 곳에 풀어줍니다.

Editplus를 실행하여 [도구]-[사용자 도구구성]을 실행합니다.




그런 다음 추가를 눌러 FlexCompiler라 이름을 입력합니다.(자기만의 이름을 써도 무방합니다.)





메뉴제목 : FlexCompiler
명령 : 자신이 FlexSDK폴더의 경로\bin\mxmlc.exe
        (예: D:\FlexSDK\bin\mxmlc.exe)
인수 : -strict -optimize $(FileName)
디렉토리  : $(FileDir)
출력 내용 캡쳐  : 체크
열려진 파일 저장 : 체크

컴파일러를 지정하였으므로 이제 실행명령을 지정합니다. 기본설정창의 [도구]-[사용자도구]에서 “추가”를 눌러 다음과 같이 지정합니다.







메뉴제목 : FlexCompiler Run
명령 : 자신이 FlexSDK폴더의 경로\player\debug\SAFlashPlayer.exe
        (예: D:\FlexSDK\player\debug\SAFlashPlayer.exe)
인수 : $(FileDir)\$(FileNameNoExt).swf


디렉토리  :
출력 내용 캡쳐  : 체크
열려진 파일 저장 : 체크



이제 Editplus에서 새파일를 열고 아래의 샘플 MXML코드를 입력합니다.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”
http://www.adobe.com/2006/mxml“>  
<mx:Button label=”Click Me!” click=”mx.controls.Alert.show(‘Hello World’)”/>
</mx:Application>



그런 다음 이 파일을 저장합니다(확장자는 mxml). 저장위치는 임의대로 지정합니다. [도구]에서 아까 지정한 컴파일러 실행하고 결과창에 “출력완료 – 정상출력” 표시를 확인한 다음 다시 [도구]에서 실행명령을 실행하면 MXML파일이 저장된 곳에 SWF파일이 실행됩니다.(플래시 플레이어9가 설치되어 있어야 실행됩니다.)



이제, Flex Builder 2가 없어도 mxml로 쉽게 SWF를 컴파일하고 Flex Application을 개발할 수 있습니다. 물론, 디버그 기능은 Flash Player9에서 확인할 수 있지만 Flex Builder 2에서 처럼 컴파일전에 알아볼 수 있는 것은 아닙니다. 하지만 이 정도면 훌륭하다고 볼 수 있습니다. 꽁자니까요~

물론, 울트라에디트나, 국산 무료에디터인 아크로에디트에서도 위와 같은 사용자 도구 기능을 지원하므로 충분히 지정하여 사용할 수 있습니다. 컴파일러위치와 인수값만 제대로 입력하시면 됩니다.