jasu's blog

    *  기본
          o for 루프로 배열내 참조를 하는 경우는 미리 배열의 길이를 구하여 변수를 int/uint 형태로 한다.
          o 다른 클래스의 정수는 일단 로컬의 변수에 값을 대입하고 나서 루프를 사용한다.
          o 로컬 변수 선언은1 행으로 정리한다.
          o (AS2와 같이) 조건문이나 명령문을 고쳐 쓰지 않는다.
          o Object 형태는 사용하지 않는다.
          o 배열의 요소를 읽을 때는 형태 캐스트를 한다.
          o 가능한 한, int 형태를 사용한다
          o Point 형태나 Rectangle 형태등 잘 사용하는 오브젝트의 정수를 만들어 돌린다.
          o 패키지 변수·정수나 패키지 함수를 사용해서 가능한 한 클래스명 참조를 줄인다.
          o (.graphics나.transform 등의) 글로벌getter 프롭퍼티를 2 회이상 사용하는 경우는 로컬 변수에 대입해 사용한다.
          o getDefinitionByName(getQualifiedClassName(object))를 사용하는 대신에 커스텀 리플렉션 메소드를 만든다.
    * 표시
          o 프레임마다 비트 맵 처리가 필요한 경우, 미리 비트 맵 데이터를 작성하여 fillRect()/copyPixels()를 사용한다.
          o mx.utils.GraphicsUtil.drawRoundRectComplex()보다 flash.display.Graphics.drawRoundRectComplex()를 사용한다.
    * 비트 연산화
          o 2 의 누승을 곱하는 경우는 왼쪽 시프트를 사용한다.
          o 2 의 누승을 나누는 경우는 오른쪽 시프트를 사용한다.
          o int 정수 변환은 「>> 0 」
          o int 형태의 변수 교체에는 XOR 연산을 사용한다.
          o 부호의 변환에는 NOT 연산이나 XOR 연산을 사용한다.
          o 2 의 누승으로 나머지를 취할 때는 AND 연산을 사용한다.
          o AND 연산으로 짝수 판단한다.
          o Math.abs()를 사용하지 말고 절대치를 요구한다.
          o 2 개의 int 형태 변수의 부호가 일치할지를 조사할 때는 「eqSign = a ^ b >= 0; 」형태를 사용한다.
          o R5G5B5로부터 R8G8B8 에의 변환에는 비트 시프트를 사용한다.

    * TextField.text에 문자열을 추가할 때는 「+= 」으로 연결하는 것이 아니라 appendText()를 사용한다.
    * 필터의 blurX, blurY 프롭퍼티의 값은 2의 누승으로 한다.
    * 변수 중에 가능한 것은 할 수 있는 한 정수화 한다.
    * 루프의 내부로부터 가능한 처리를 줄인다.
    * 참조는 할 수 있는 한 짧게 한다.

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/

MIT sketching라는 제목으로 youtube에 올라와 있는 동영상이다. 물리 역학을 이용한 스케치 어플리케이션을 설명을 하고 있는데 결과물도 결과물이지만... 순간 머리속으로 이게 가능한가하는 생각마저 든다. 실행 화면과 설명하는 그림이 다른거 아닌가 했었는데 역시나 .... MIT 두뇌 집단 훌륭하다...

관련 사이트
http://icampus.mit.edu/MagicPaper/

며칠 전부터 목이 슬슬 아프더니 이제는 목도 아프고 눈알을 45도만 돌려도 뻐근하게 아프다...아흐...
누구보다도 병원 가기를 싫어하는지라 혼자 병원가기도 싫고 따뜻한 물만 끓여서 마시고 있는데 더워서 죽을 맛이다. 규칙적인 생활을 하지 않으니 몸상태가 좋지 않은 듯 싶다. 오늘 부터는 운동을 위해 자전거도 타고 사진도 찍으러 다니고 그래야 겠다....

서울 공기는 너무 안좋아...