Tag Archive for 'AS2.0'

Checking user bandwidth

우리나라의 웹환경에서는 초고속 인터넷과 같은 인프라의 발전으로 대역폭(bandwidth)을 고려해야할 만큼 네트워크 속도가 절대적으로 중요하지는 않다.
워낙 전송 속도가 빨라서 왠만한 웹사이트는 로딩시간없이 실시간으로  보여진다. 하지만 이는 특수한 우리나라의 경우에서만 해당하는 사항일뿐 아직까지 대부분의 다른나라에서의 전송속도는 생각하는 것 만큼 빠르지 않다. 좀더 범용적인 사이트의 개발을 위해서는 반드시 고려해야 할 사항이다.

특히 영상위주의 컨텐츠가 포함된 사이트의 경우 사용자의 대역폭을 고려하는 것이 좀더 사용자에게 좋은 컨텐츠를 제공하는 방법이 될 수 있다. 대부분 영상을 보여주는 방법으로 점진적 다운로드 방식(progressive download)을 사용한다. 실시간으로 다운로드 한만큼 플레이하는방식으로 이는 사용자 환경의 대역폭이 서비스의 질을 크게 좌우하게 된다.

영상을 보여주는 데 있어 점진적 다운로드 방식은 영상의 전체적인 용량보다는 영상의 압축률에 더 큰 영향을 받는다. 다시말해 데이타를 로드하면서 플레이하는 방식이기 때문에 비디오의 압축률을 높여 단위시간당 받을 수 있는 용량을 보다 크게 하여 좀더 원할하게 플레이 할 수 있다.

따라서 미리 사용자의 대역폭을 알아내어 거기에 알맞는 압축률의 비디오를 제공할 수 있는 것이다.
플래시에서 일반적으로 대역폭을 측정하는 방법으로는 일정크기의 샘플파일을 다운로드하여 걸린시간을 측정하여 구할 수 있다. 하지만 이 대역폭은 절대적인 속도를 의미하는 것은 아니다.
네트워크 사용량, 네트웍크 지연과 같은 여러가지 요인에 의해 언제든지 속도가 변경될 수 있다. 항상 측정된 속도로 데이타를 받을 수 있다는 의미가 아니다. 현재 시간에서 대략적인 사용자의 네트워크 속도를 가늠해 볼 수 있는데 의미가 있다. 불안정한 네트워크 일수록 측정 대역폭의 편차가 크게 발생한다.

대역폭 측정의 정확성을 높이기 위해서는 테스트하기 위해 사용하는 샘플의 용량을 크게 하거나,측정하는 테스트의 횟수를 늘려야한다. 하지만 이는 전송속도 측정을 위해 불필요하게 자원을 소모하게 되기 때문에 어느정도 적정선을 유지해야한다.
여기서 제공하는 방법은 샘플파일의 크기를 50~100 KB 로 제한하고 측정횟수를 2회로 한정하였다.
위 조건으로 측정한다고 해도 사용자의 네트워크 속도가 50KB 미만일 경우 100~200KB 를 테스트를위해 최소 2~4초정도의 시간이 걸리게 된다.

<bandwidthCheck class>

import com.dstrict.UB.events.Dispatcher;
import com.dstrict.UB.events.Event;
 
class com.dstrict.UB.util.system.BandwidthCheck extends Dispatcher {
 
private var _bandwidthSet:Array;
private var _bandwidth:Number;
 
private var _startTime:Number;
private var _checkCount:Number;
 
private var _loader:MovieClipLoader;
private var _container:MovieClip;
 
public function get bandwidth():Number{
return _bandwidth;
}
 
public function BandwidthCheck() {
_checkCount=0;
_bandwidth=0;
_bandwidthSet=new Array();
}
 
public function check():Void{
_container= _root.createEmptyMovieClip("container", _root.getNextHighestDepth());
var nocache:Number=Math.random()*1000000;
_loader=new MovieClipLoader();
_loader.addListener(this);
_loader.loadClip("bandwidthDummy.png?nocache="+nocache,_container);
}
 
private function calculateBandwidth():Void{
for(var i in _bandwidthSet){
_bandwidth+=_bandwidthSet[i];
}
_bandwidth=_bandwidth/_checkCount;
 
//dispatch a complete event
startEvent(new Event(Event.COMPLETE,this));
}
 
private function onLoadStart(targetMc:MovieClip):Void{
_startTime=getTimer();
}
 
private function onLoadComplete(targetMc:MovieClip):Void{
_loader.unloadClip(_container);
var elapsedTime:Number=(getTimer()-_startTime)/1000;
_checkCount++;
 
var progress:Object = _loader.getProgress(targetMc);
var kilobytes:Number=progress.bytesTotal/1024;
var kBps:Number=kilobytes/elapsedTime;
_bandwidthSet.push(kBps);
 
if(_checkCount==1){
check();
}else{
calculateBandwidth();
}
}
}

<sample code>

var bandwidthCheck:BandwidthCheck=new BandwidthCheck();
bandwidthCheck.addEventListener(Event.COMPLETE,onBandwidthCheck);
bandwidthCheck.check();
 
function onBandwidthCheck(evt:Event){
trace("bandwidth-----------------&gt;"+evt.target.bandwidth);
}

대역폭(bandwidth) 의 단위로는 KBps(kilobytes per second) 이다. 브라우저 캐쉬로 부터 다운받는것을 방지하기 위해 첨부한 문자열로 인해 반드시 웹상에서 다운받아야 로드할수 있다.

download sample

Template method pattern

Template method 패턴은 디자인 패턴 중에서도 가장 기본이 되는 패턴중에 하나다.
템플릿이란 단어에서 유추할 수 있듯이 어떤 일정한 틀을 기본으로 클래스를 구성하는 방식이다.
추상클래스(Abstract class) 에 정의되어있는 Abstract method 를 기반으로 알고리즘을 구성하는 template method 를 만들어 동작시키는 것이다. 다시말해 알고리즘의 캡슐화(encapsulation) 라고 할수 있다.

추상클래스(Abstract class) 에서는 단지 알고리즘만 기술하는 역할만 한다. 실제 구현은 서브클래스 (Concrete class) 에서 기술한다. 따라서 Template method 를 이용하면 알고리즘의 구조는 유지하면서 서브클래스에서 추상메소드를 오버라이드하여 재정의 할 수 있다.
서브클래스에서 행동을 지정할 수 있게 하면서도 코드의 재사용이 가능한 특징으로  Template method 패턴은 framework 를 제작하는데 자주 등장한다.

플래시에서는 abstract 키워드가 지원되지 않지만 개념상 큰차이없이 패턴을 사용할 수 있다.

<Abstract class>

class AbstractButton {
 
 private var _mc:MovieClip;
 
 public function setController(inMc : MovieClip) : Void {
  _mc=inMc;
 }
 public function getController() : MovieClip {
  return _mc;
 }
 
 //Constructor function
 function AbstractButton(inMc:MovieClip){
  setController(inMc);
  setButton();
 }
 
 //Template method
 public function setButton():Void{
     getController().onRollOver=Delegate.create(this,onRollOver);
     getController().onRollOut=Delegate.create(this,onRollOut);
     getController().onRelease=Delegate.create(this,onRelease);
     getController().onReleaseOutside=Delegate.create(this,onReleaseOutside);
 
 }
 
 public function onRollOver() : Void{
  // override in sub-class
  throw new Error("Abstract method!!!!!");
 }
  public function onRollOut() : Void{
   // override in sub-class
  throw new Error("Abstract method!!!!!");
 }
  public function onRelease() : Void{
  // override in sub-class
  throw new Error("Abstract method!!!!!");
 }
  public function onReleaseOutside() : Void{
   // override in sub-class
  throw new Error("Abstract method!!!!!");
 }
 
  public function enabled(mode:Boolean):Void{
  // override in sub-class
  throw new Error("Abstract method!!!!!");
 }
 
}

<Concrete class>

class ConcreteButton extends AbstractButton{
 
function ConcreteButton(inMc:MovieClip){
super(inMc);
}
 
public function onRollOver() : Void{
getController().gotoAndPlay("over");
}
 
public function onRollOut() : Void{
getController().gotoAndPlay("out");
}
 
public function onRelease() : Void{
getController().gotoAndPlay("release");
}
 
public function onReleaseOutside() : Void{
 
}
 
public function enabled(mode:Boolean):Void{
getController().enabled=mode;
}
 
}

위 sample 은 버튼을 구성하는 간단한 클래스이다.
플래시에서 Interaction 을 구현할때 거의 대부분버튼을 구현하여 접근한다. 일반적으로 버튼 액션을 구현하려면 버튼 인스턴스나 무비클립 인스턴스를 통해 버튼 이벤트를 주어서 사용하지만 그럴경우 제어해야할 버튼이 많아지면 코드길이가 늘어날 뿐더러 코드 유연성이 떨어지게 된다.

실제 버튼을 구현하려면 추상클래스를 확장하여 추상메소드를 구현하기만 하면 된다.
추상클래스의 추상메소드의 정의는 개발자가 신중히 결정해서 정해야한다. 추상메소드가 너무 많게 되면 서브클래스에서 구현해야할 코드가 많아져 불편한점이 있을 수 있다. 반대로 너무 추상메소드 자체를 큰 덩어리로 나누게되면 유연성을 떨어뜨리게 된다.

ColorMatrixFilter TweenEngine

ColorMatrixFilter 클래스를 이용하면  이미지의 각 픽셀의 RGBA 색상 및 알파 값에 4 x 5 행렬 변환을 적용하여 saturation 또는 contrast 또는  brightness 를 적용할수 있다. 물론 각각의 ColorMatrixFilter 에 적용되는 matrix 속성값을 다르게 설정하여야 한다.

이 예제에서 활용한 ColorMatrix 는 Mario Klingemann(http://www.quasimondo.com) 가 제작한 소스를 이용하여 트윈클래스를 제작하였다.
기본적인 클래스 구조는 이전의 트윈클래스와 같다. 객체속성을 이용하여 for~in 구문으로 트윈을 적용하였다. 다른 객체에 비해 적용되는 속성의 갯수(matrix 속성)가 20개로써 많기 때문에 이미지를 크게 하거나 트윈길이를 너무 길게할 경우 느려질 수가 있다. 또한 트윈이후 이전 트윈클래스와 같이 콜백함수를 호출할 수 있다.

download sample

//==================================================================
//@class name  :  ColorMatrixTween.as
//@author          : vkimone. KimKiJeung  (http://kimkijeung.com)
//@last update   : 2007. 03. 19
//@version         : V1.0
//==================================================================
/**
 @description
* 무비클립의  ColorMatrixFilter 트윈 클래스 : 이징함수 설정으로 조절 
 
* @example
*     <code>
*     ColorMatrixTween.tween(targetMc,0,ColorMatrixTween.SATURATION,Regular.easeOut,30,
             {{func: callBackFunction,obj: functionScope, param: [파라미터 배열로 들어감]}}
*     </code>
*/
 
import flash.filters.ColorMatrixFilter;
import com.dstrict.UB.util.filters.ColorMatrix;
class com.dstrict.UB.util.transitions.tween.ColorMatrixTween{
  public static var SATURATION:String="saturation";
  public static var CONTRAST:String="contrast";
  public static var BRIGHTNESS:String="brightness";
 
 /**---------------------------------------------------------------------
  *@description  saturation, contrast, brightness 트랜지션
    @param mc : MovieClip, 적용무비클립
    @param value : Number , 적용 percentage
    @param mode :String , saturation or contrast or brightness mode
    @param func : Function, easing function
   @param durationFrame : Number, 지속프레임
*----------------------------------------------------------------------*/
public static function tween(mc:MovieClip,value:Number,mode:String,func:Function,durationFrame:Number):Void{
var time:Number=1;
var beginning:Array=new Array();
var change:Array=new Array();
 var mat:ColorMatrix = new ColorMatrix();
 switch(mode){
   case SATURATION :
     mat.adjustSaturation(value/100);
     break;
 
   case CONTRAST :
     mat.adjustContrast(value/100);
     break;
 
   case BRIGHTNESS :
     mat.adjustBrightness(255*value/100);
     break;
  }
  var cm:ColorMatrixFilter = new ColorMatrixFilter(mat.matrix);
  var startMatrix:Array=
                       (mc.filters[0].matrix==undefined) ? ColorMatrix.IDENTITY : mc.filters[0].matrix;
  var targetMatrix:Array=mat.matrix;
 
for(var i in targetMatrix){
  beginning.push(startMatrix[i]);
  change.push(targetMatrix[i]-startMatrix[i]);
}
       var type=(typeof(arguments[5])=="object")? true : false;
       if(type){
        var referObj=arguments[5];
       }else{
        var p:Number=arguments[5];
        var referObj=arguments[6];
       }
  mc.onEnterFrame=function(){
  var objIdx:Number=0;
  for(var i in targetMatrix){
   targetMatrix[i]=func(time,beginning[objIdx],change[objIdx],durationFrame,p);
   objIdx++;
   }
   targetColMatrixFilter.matrix=targetMatrix;
   mc.filters=[targetColMatrixFilter];
   time++;
  if(time&gt;durationFrame){
   delete this.onEnterFrame;
   if(referObj!=undefined){
    referObj.func.apply(referObj.obj,referObj.param);
   }
 
  }
};
}
}
 
import  com.dstrict.UB.util.transitions.tween.FilterTween;
import  mx.transitions.easing.*;
import com.dstrict.UB.util.filters.ColorMatrix;
//SATURATION (from 0  to 100)
image.onRollOver=function(){
 ColorMatrixTween.tween(image,0,ColorMatrixTween.SATURATION,Regular.easeOut,10);
}
image.onRollOut=function(){
 ColorMatrixTween.tween(image,100,ColorMatrixTween.SATURATION,Regular.easeOut,10);
}
//CONTRAST (from 0  to 100)
image2.onRollOver=function(){
 ColorMatrixTween.tween(image2,100,ColorMatrixTween.CONTRAST,Regular.easeOut,10);
}
image2.onRollOut=function(){
 ColorMatrixTween.tween(image2,0,ColorMatrixTween.CONTRAST,Regular.easeOut,10);
}
//BRIGHTNESS (from -100  to 100)
image3.onRollOver=function(){
ColorMatrixTween.tween(image3,100,ColorMatrixTween.BRIGHTNESS,Regular.easeOut,10);
}
image3.onRollOut=function(){
ColorMatrixTween.tween(image3,0,ColorMatrixTween.BRIGHTNESS,Regular.easeOut,10);
}

Filter TweenEngine

무비클립 속성에 비해 다루기가 까다로워 필터 트원은 좀처럼 사용하지는 않았다.
특히 프레임으로 모션트윈은 어느정도 사용했지만 스크립트를 이용한 조절은 거의……

전반적으로 필터에 대해 다시 살펴보면서 이번기회에 필터트윈 클래스를 만들어 보았다.
새로 만들긴 했지만 기존에 만들었던 무비클립 Tween 클래스와 기본 구조는 같다.
어짜피 필터 트원이라는것이 필터속성을 시간단위로 변화를 주는 것이기 때문에 무비클립의 그것과 다르지 않았다.

무비클립 트윈클래스와 다른점은 인자값으로 적용할 필터오브젝트를 생성해서 넘겨주는 것이다.
그리고 그 필터속성의 변화값을 무비클립 filters 속성에 적용해 주는 것이다.
그리고 다중필터 지원은 동시에 여러가지 필터를 적용하는 경우가 많지 않을뿐더러 쓸데없이 파라미터가 길어질 염려가 있어 적용하지 않았다.

필터 적용범위는 필터속성의 데이타 타입이 Number 일경우에만 적용해야 한다. 따라서 ColorMatrixFilter와 같이 속성값이 matrix 일 경우 이 클래스로는 트윈이 적용되지 않는다. 그 이외의 모든 필터의 속성에 대해서는 트윈이 가능하다.
또한 필터 속성마다 해당하는 속성 범위가 존재한다. 이점을 유의해서 적용해야한다.

download sample

//==================================================================
//@class name  :  FilterTween.as
//@author          : vkimone. KimKiJeung  (http://kimkijeung.com)
//@last update   : 2007. 03. 07
//@version         : V1.0
//==================================================================
/**
 @description
* 무비클립의 필터 속성  트윈 클래스 : 이징함수 설정으로 조절
* 트원할 필터속성의 갯수에 관계없이 오브젝트로 적용 가능
*
* @caution
*  -반드시 트원할 필터 속성의 데이타 타입이 Number 일경우에만 적용할수 있다.
    String,Boolean,Array 는 적용할 수 없다.
   -다중필터 적용은 지원하지 않는다.
*
* @example
*     <code>
*        Filtertween.tween(targetMc,{blurX:36,blurY:36},Regular.easeOut,30,
       {{func: callBackFunction,obj: functionScope, param: [파라미터 배열로 들어감]}}
*     </code>
*/
import flash.filters.BitmapFilter;
class com.dstrict.UB.util.transitions.tween.FilterTween{
/**------------------------------------------------------------------------
 * @param mc : MovieClip, 적용무비클립
 * @param filter : BitmapFilter , 적용할 필터 객체
 * @param obj : Object, 단일 필터속성 (필터 속성 data type 이 Number 일 경우)
                                                     ex. {blurX:32,blurY:32}
 * @param func : Function, easing function
 * @param durationFrame : Number, 지속프레임
 * @param referObj :[option] reference object(caution--&gt; 파라미터값 반드시 배열요소로 입력)
*----------------------------------------------------------------------*/
public static function tween(mc:MovieClip,filter:BitmapFilter,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(filter[i]);
  change.push(obj[i]-filter[i]);
}
       var type=(typeof(arguments[5])=="object")? true : false;
       if(type){
        var referObj=arguments[5];
       }else{
        var p:Number=arguments[5];
        var referObj=arguments[6];
       }
  mc.onEnterFrame=function(){
  var objIdx:Number=0;
  for(var i in obj){
   filter[i]=func(time,beginning[objIdx],change[objIdx],durationFrame,p);
   mc.filters=[filter]; //필터 적용부분
   objIdx++;
   }
   time++;
  if(time&gt;durationFrame){
   delete this.onEnterFrame;
   if(referObj!=undefined){
    referObj.func.apply(referObj.obj,referObj.param);
   }
 
  }
};
}
}
 
import  com.dstrict.UB.util.transitions.tween.FilterTween;
import  mx.transitions.easing.*;
import flash.filters.*;
var blurFilter:BlurFilter=new BlurFilter(0,0,1);
var dropShadowFilter:DropShadowFilter=new DropShadowFilter(0,120,0x000000,1);
var glowFilter:GlowFilter=new GlowFilter(0x6E7D74,1,16,16,2,2);
//BlurFilter
image.onRollOver=function(){
 FilterTween.tween(image,blurFilter,{blurX:8,blurY:8},Regular.easeOut,15,
        {func:onFilterTweenFinished,obj:_root,param:["blur"]});
}
image.onRollOut=function(){
 FilterTween.tween(image,blurFilter,{blurX:0,blurY:0},Regular.easeOut,15);
}
//DropShadowFilter
image2.onRollOver=function(){
 FilterTween.tween(image2,dropShadowFilter,{distance:4,blurX:4,blurY:4},Regular.easeOut,15,
        {func:onFilterTweenFinished,obj:_root,param:["dropShadow"]});
}
image2.onRollOut=function(){
 FilterTween.tween(image2,dropShadowFilter,{distance:0,blurX:4,blurY:0},Regular.easeOut,15);
}
//GlowFilter
image3.onRollOver=function(){
 FilterTween.tween(image3,glowFilter,{alpha:1,blurX:36,blurY:36},Regular.easeOut,15,
        {func:onFilterTweenFinished,obj:_root,param:["glow"]});
}
image3.onRollOut=function(){
 FilterTween.tween(image3,glowFilter,{alpha:0,blurX:0,blurY:0},Regular.easeOut,15);
}
function onFilterTweenFinished(evt):Void{
 trace("filterTween finished....."+evt);
}

IME-Input Method Editor

IME(System.IME) Class를 이용하면 클라이언트 컴퓨터에서 실행되고 있는 flash player 에서 운영체제의 IME(Input Method Editor) 를 조절할 수 있다. IME 는 사용자의 문자입력을 받을수 있는 요소로서 흔히 사용하는 Input Textfield 나 TextArea, TextInput 와 같은 component 가 있다. 일정한 폼의 형태로 사용자의 텍스트 정보를 받아야 할 경우 흔히 Input Textfield 를 사용한다. 이때 우리나라와 같이 한글, 영문을 같이 병행하여 사용할 경우 사용자들은 한영키 전환을 잊고 입력하는 경우가 자주 발생한다. 이때 사용성을 높여주는 방법으로써 자동으로 입력 해당필드로 이동했을시 IME Mode 를 변경해 주는 것이다.

class com.dstrict.UB.util.system.IME {
  /**-------------------------------------------------------------------
    * @description IME Mode 설정
  *-------------------------------------------------------------------*/
  public static function setIMEMode(mode:String):Void{
  
   if(System.capabilities.hasIME) {
   
   if(mode=="KOREAN"){
      mode=System.IME.KOREAN;
   }
   if(mode=="ALPHANUMERIC"){
       mode=System.IME.ALPHANUMERIC_HALF;
   }
  }
  System.IME.setConversionMode(mode);
  
 }
}
<example code>
 import com.dstrict.UB.util.system.IME;
 IME.setIMEMode("KOREAN"); // 한글전환시
 IME.setIMEMode("ALPHANUMERIC"); // 영문전환시

각 필드에 포커스 되었을때 원하는 모드에 맞게 설정해 놓으면 사용자의 사용성이 개선될 수 있다.