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에서 처럼 컴파일전에 알아볼 수 있는 것은 아닙니다. 하지만 이 정도면 훌륭하다고 볼 수 있습니다. 꽁자니까요~

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