Monthly Archive for December, 2006

Blink Effect

작업을 하다가 우연하게 발견한 팁이다.

전에는 아무생각없이 blink 효과를 구현하려면 그냥 간단하게 모션트윈으로 키프레임 에니메이션을 만들어서 사용하곤했다. 그런데 actionscript 로 blink 효과가 가능했다.

PropertyTweenEase class 는 이전 포스트에서 새롭게 구현한 방법을 사용했다.

import mx.transitions.easing.Bounce;
import com.dstrict.UB.util.transitions.tween.PropertyTweenEase;
 
function blink(){
	src_mc._alpha=0;
	PropertyTweenEase.tween(src_mc,{_alpha:100},Bounce.easeIn,8);
}
 
start_btn.onRelease=function(){
	blink();
}

플래시에서 기본으로 내장되어있는 이징 패키지 함수를 이용한 방법으로 Bounce 클래스는 뜻 그대로 뛰어오르는 느낌을 낼 수 있게 해준다.

따라서 Bounce 클래스에서 증가하는 느낌의 easeIn 함수를 사용하면 손쉽게 번쩍거리는 효과를 만들 수 있다.

Why must you use a function statement

Methods are defined using the function keyword.
You can use a function statement, such as the following:

public function sampleFunction() : String {}

Or you can use a variable to which you assign a function expression, as follows:

public var sampleFunction:Function = function () : String {}

In most cases you will want to use a function statement instead of a function expression for
the following reasons:

* Function statements are more concise and easier to read.

Function statements 는 좀더 간결하고 가독성이 뛰어나다.

* Function statements allow you to use the override and final keywords.

Function statements 는 override 와 final 키워드를 사용할 수 있게 한다.(override 방법은 expression 방법으로는 불가능합니다.)

* Function statements create a stronger bond between the identifier—that is, the name of the function—and the code within the method body. Because the value of a variable can be changed with an assignment statement, the connection between a variable and its function expression can be severed at any time. Although you can work around this issue by declaring the variable with const instead of var, such a technique is not considered a best practice because it makes the code hard to read and prevents the use of the override and final keywords.

Function statements 는 식별자(함수 이름과 메소드 몸체안에 있는 코드) 와의 결합을 더 강하게 한다.

변수값이 할당구문에 의해 변할 수 있기 때문에 function expression 과 변수와의 연결이 언제든지 위험하게 될수 있다.

비록 var 대신에 const 를 사용하여 변수선언을 하여 문제를 해결할 수 있겠지만, 그런 기술은 오버라이드(override)와 final 키워드의 사용을 막고, 코드를 읽기 어렵게 만들기 때문에 좋은 방법이라고 생각되어지지 않는다.

One case in which you must use a function expression is when you choose to attach a function to the prototype object.

전에는 function statement 방법과 function expression 과의 차이점에 큰 영향을 느끼지 못했다.

주로 가독성 측면에서 좋아서 전자의 방법으로 코딩을 해왔는데 이 방법이 추천하는 방식이였다니….

가독성 측면이나 메소드 오버라이드 같은 기능을 활용하려면  function statement  방법을 사용해야할 것이다.

Tween Engine

기존에 동시에 2개의 속성을 트윈시킬 수 있었던 것에서 트원 속성 갯수에 관계없이

가능하도록 수정하였다.  이 클래스 하나로 무비클립 속성 트윈은 대부분 가능하다.
마지막 파라미터를 이용해 콜백함수를 호출할수 있다. 이징 함수 자체도 조절 가능하게
해보았지만 효율성 측면에서 생략했다.
어쩌면 이정도 길이에 가장 많은 기능을 제공하고 범용적으로 사용될수 있는 트윈클래스가 없지 않을듯 싶다…^^

/**
* @description
* 무비클립 속성  트윈 클래스 : 이징함수 설정으로 조절 
* 트원할 속성의 갯수에 관계없이 오브젝트로 적용 가능
* 
* 트윈이 끝났을 때 실행할 함수 및 파라미터 설정 방법
* 다른 클래스에서 직접 참조해서 호출 가능....
* @param referObj : reference object(caution--> 파라미터값 반드시 배열요소로 입력)
* @example
*     <code>
*        PropertyTweenEase.tween(targetMc,{_x:200,_y:100},Elastic.easeOut,30,{{func: 실행할 함수
이름 , obj: 참조오브젝트, param: [파라미터 배열로 들어감]}}
*     </code>
*/
class com.dstrict.UB.util.transitions.tween.PropertyTweenEase {
/**----------------------------------------------------------------------------------
* @param mc : MovieClip, 적용무비클립
* @param property : Object, 무비클립속성 오브젝트 ex. {_x:100,_y:200}
* @param func : Function, easing function
* @param durationFrame : Number, 지속프레임
*------------------------------------------------------------------------------------*/
public static function tween(mc:MovieClip,obj:Object,func:Function,durationFrame:Number):Void{
var time:Number=1;
var beginning:Array=new Array();
var change:Array=new Array();
  
for(var i in obj){
  beginning.push(mc[i]);
     change.push(obj[i]-mc[i]);
     
}
       var type=(typeof(arguments[4])=="object")? true : false;
       if(type){
        var referObj=arguments[4];
       }else{
        var p:Number=arguments[4]; 
        var referObj=arguments[5];
       }
  mc.onEnterFrame=function(){
  var objIdx:Number=0;
  for(var i in obj){
   mc[i]=func(time,beginning[objIdx],change[objIdx],durationFrame,p);
   objIdx++;
  }
     time++;
  if(time>durationFrame){
   delete this.onEnterFrame;
   if(referObj!=undefined){
    referObj.func.apply(referObj.obj,referObj.param);
   }
   
  }
};
}
}

<사용방법>

PropertyTweenEase.tween(mc,{_x:100,_y:200,_alpha:100},Regular.easeOut,20,
{func:this.onMotionFinished,obj:this});
 
function onMotionFinished():Void{
trace("motion finished.......");
}