Flex에서 Timeline 애니메이션 주기

greenshock의 tween 라이브러리를 사용하여 타임라인 애니메이션을 주는 것에 대해 살펴보았습니다. 요즘 UI 디자인의 추세가 정적인 부분에서는 최대한 Simple하게.. 대신 동적인 효과를 주는 것이기에 추후 고객에게 제공할 시스템에서 적용해볼 요량으로 학습하여 정리해봅니다.

원하는 효과는 다음과 같습니다. 사각형 버튼을 0.4초간 수평으로 화면의 가로 가운데로 이동하고 다시 0.4초간 수직으로 화면의 세로 가운데로 이동한 뒤.. 끝으로 0.3초간 2배 확대하는 애니메이션입니다.

사용자 삽입 이미지
이에 대한 코드는 다음과 같습니다.

TweenPlugin.activate([TransformMatrixPlugin, BezierPlugin]); // 1번만 호출하면 됨

var myTimeline:TimelineLite = new TimelineLite({paused:true}); 
var w:Number = btn.width;
var h:Number = btn.height;

// 화면 중심 이동 및 확대를 위해 화면 크기(300, 300)의 반절값인 150 사용 
myTimeline.append(new TweenLite(btn, 0.4, {x:150-w/2})); 
myTimeline.append(new TweenLite(btn, 0.4, {y:150-h/2}));
myTimeline.append(
    new TweenMax(btn, 0.3, {transformMatrix:{tx:150-w,ty:150-h,scaleX:2, scaleY:2}})
);

myTimeline.play();

간단하게는 사용자 경험(UX)는 사용자에게 사용자 인터페이스(UI)와 동일하게 생각할 수 있습니다. 최근 Windows 8이나 Apple의 iOS의 UI를 살펴보면 과거 입체적인 UI에서 벗어나 보다 평면적인 UI로 디자인되어 있는 것을 볼 수 있습니다. 그러나 이 평면적인 UI에 사용자가 반응을 하게 되면 마치 생명체처럼 움직여 반응하게 됩니다.

UI 및 UX를 가장 효과적으로 학습하는 방법은 이러한 OS의 UI를 살펴보고 사용해 보는 것이 가장 좋다고 생각합니다. 개발자나 디자이너라면.. 이러한 사용에서 끝나는 것이 아니라 자신이 만드는 창작물에도 이러한 배움을 반영해 보는 것이 의미있는 일이라 생각합니다.

[ActionScript] GroupingCollection2 클래스를 이용한 그룹핑(Grouping)

플래시빌더 4.7은 언제 정식 출시되나.. 지금 사용하고 있는 4.6의 차트 컴포넌트에 약간의 버그가 있고 4.7에서는 해결되기를 기대해 봅니다. 특히 4.7은 스레드 개념을 지원함으로써 더욱 유연한 개발이 가능할 것으로 기대됩니다. 이 스레드 개념은 HTML5의 Worker 기능에서 많은 힌트를 얻어 이번에 추가한 기능이 아닌가 싶습니다. 여튼………

어떤 데이터가 있다면.. 동일한 값을 가지는 녀석들을 묶는데.. 이렇게 1차적으로 묶인 녀석들에 대해서 또 한번 다른 필드의 동일한 값으로 또 묶어 그룹핑하는데 요긴하게 사용한 클래스입니다. 이 클래스의 존재를 모른체 직접 코드를 한땀.. 한땀.. 땀 한방울.. 땀 두방울 흘리며 코딩했답니다. 물론 지금은 이 클래스를 이용해 기능 개발을 했구요.

var grouping:GroupingCollection2 = new GroupingCollection2();
grouping.source = new ArrayCollection(rows);
grouping.grouping = new Grouping();
grouping.grouping.fields = 
    [ new GroupingField("FIELD1"), new GroupingField("FIELD2") ];
grouping.refresh();

성의없이.. 막 코드로 시작합니다. rows가 그룹핑할 배열(Array)입니다. 이 배열의 요소는 FIELD1과 FIELD2라는 이름의 속성값이 있습니다. 일단 FIELD1에 대해 동일한 요소들을 한번 묶고.. 다시 이렇게 묶인 그룹들을 대상으로 FIELD2로 또 한번 묶습니다.

결과적으로 그룹핑된 컬렉션은 grouping 객체(위의 코드 참조)의 getRoot 매서드를 통해 얻습니다. getRoot()의 결과에 대한 클래스 타입은, 배열을 대상으로 그룹핑 했으므로 ArrayCollection 타입입니다.

그룹핑되기 이전에는 단순한 1차원 배열이였던 것이 GroupingCollection2 클래스를 통해 그룹핑되면 3차원 배열이 됩니다. 이 3차원으로 재가공된 배열(실제로는 ArrayCollection 클래스 타입)의 원소들을 하나 하나 참조해야할 때가 있습니다. 설명하기엔 무척….. 염병같고……………. 걍 코드.. 예제 코드 나갑니다. ;-|

var groupingRows:ArrayCollection = grouping.getRoot() as ArrayCollection;
var driverNameAndCarNumber:Object = new Object();
for(i=0; i{
    var D1:Object = groupingRows.getItemAt(i);
    D1["iconIndex"] = 0;
     
    var carName:String = D1.GroupLabel;
    var D2:ArrayCollection = D1.children as ArrayCollection; 

    for(var j:int=0; j    {
        var item:Object = D2.getItemAt(j);
        var driverName:String = item.GroupLabel;
        item["iconIndex"] = 1;
      
        var D3:ArrayCollection = item.children as ArrayCollection;
        for(var k:int=0; k        {
            var lastItem:Object = D3.getItemAt(k);
            lastItem["iconIndex"] = 2;
        }
      
        var sortField:SortField = new SortField();
        sortField.name = "GroupLabel";
        var sort:Sort = new Sort();
        sort.fields = [sortField];
        D3.sort = sort;
        D3.refresh();
    }
}

이 코드는 그룹핑된 내부의 요소드를 또 다시 정렬해줌과 동시에 아이콘 적용을 위해 아이콘 인덱스 번호를 넣어주는 코드입니다. 시간이 지난후에 이 코드를 보고 제 스스로 이해할 수 있다면… 과연 그럴 수 있을까.. 싶습니다.,

[ActionScript] 날짜로 요일 계산하기

아래의 getDay 함수는 액션스크립트로 구성된 요일을 계산해 반환하는 함수입니다. 이 getDay 함수의 파라메터는 날짜로써 년(예:2012), 월(1 ~ 12), 일(1 ~ 31)입니다.

private function getDay(year:int, month:int, day:int):String
{
    const dayStrings:Object = {
        0:"일요일",
        1:"월요일",
        2:"화요일",
        3:"수요일",
        4:"목요일",
        5:"금요일",
        6:"토요일"
    };
    
    if (month == 1 || month == 2) year--;
    month = (month + 9) % 12 + 1;
    var y:int = year % 100;
    var century:int = year / 100;
    var week:int = ((13 * month - 1) / 5 
        + day + y + y / 4 + century / 4 - 2 * century) % 7;
    if (week < 0) week = (week + 7) % 7;

    return dayStrings[week];
}

이처럼 날짜로부터 요일을 계산하는 함수를 직접 작성해 사용할 수 있지만 다음처럼 액션스크립트에서 이미 제공하고 있는 Date 클래스를 사용해 보다 간단히 요일을 계산할 수 있습니다.

 const dayStrings:Object = {
        0:"일요일",
        1:"월요일",
        2:"화요일",
        3:"수요일",
        4:"목요일",
        5:"금요일",
        6:"토요일"
    };
     
    var d:Date = new Date(2012, 10-1, 4);
    Alert.show(dayStrings[d.day]);

여기서 주의해야할 점은 월(Month)은 1부터 시작하지 않고 0부터 시작한다는 것입니다. 그래서 11번 코드에서 지정한 (10-1)은 9월이 아니라 10월을 의미합니다.

플래시 빌더(Flash Builder)에서 협업을 위한 모듈화

플래시 빌더의 단점은 협업 개발이 어렵다는 것입니다. 사실.. 아직까지도 플래시에서 모듈을 통한 협업 개발이 충분한가라는 점에서.. 실제 프로젝트에 적용해보기 전까지는 확신할 수는 없지만 파악해본 바로는 충분히 가능하다.. 라고 판단됩니다.

메인 어플리케이션 프로젝트가 있고.. 이 메인 어플리케이션에서 사용하는 또 다른 별도의 모듈을 위한 프로젝트(모듈 프로젝트)가 있다고 하겠습니다. 모듈 프로젝트는 일반적인 플렉스 프로젝트(Flex Project)로 생성합니다.

이 모듈 프로젝트에 2개의 모듈을 추가하도록 하겠습니다. 첫번째는 단순히 함수만을 제공하는 모듈 클래스이고 두번째는 UI를 제공하는 모듈 클래스입니다. 먼저 함수만을 제공하는 모듈 클래스는 ActionScript Class로 해서 생성하며 클래스명은 Module1으로 지정하고 Super Class로는 반드시 ModuleBase로 지정합니다. 생성된 Module1.as 파일을 다음처럼 코딩합니다.

package
{
    import mx.modules.ModuleBase;
 
    public class Module1 extends ModuleBase
    {
        private var arg:Number = 1;
  
        public function Module1(arg:Number)
        {
            super();
            this.arg = arg;
        }
  
        public function sum(a:Number, b:Number):Number
        {
            return (a + b) * arg;
        }
    }
}

모듈 클래스의 생성자가 하나의 인자를 갖습니다. 그리고 sum이라는 함수를 제공합니다. 매우 단순한 모듈 클래스입니다. 이 모듈 클래스는 컴파일되어 Module1.swf 파일로 만들어져야 합니다만 확장자가 as는 자동으로 모듈로 만들어지지 않으므로 모듈 프로젝트의 속성창에서 Flex Modules에서 추가해야 합니다.

사용자 삽입 이미지
추가할때 Output Size 옵션을 Do not optimize로 선택해서 다양한 많은 어플리케이션에서 활용될 수 있도록 지정합니다.

이제 추가된 모듈 클래스인 Module1을 별개의 어플리케이션 프로젝트에서 사용해 보도록 하겠습니다. 버튼을 클릭했다고 할때 Module1 모듈 클래스를 활용하는 방식으로 하겠습니다. 버튼 클릭시 실행되는 코드는 다음과 같습니다.

private var iModuleInfo:IModuleInfo;
protected function onTest(event:MouseEvent):void
{
    iModuleInfo = ModuleManager.getModule(
        "../../eTAS_Modules/tstModule/bin-debug/Module1.swf");
    iModuleInfo.addEventListener(ModuleEvent.READY, onModuleReady);
    iModuleInfo.addEventListener(ModuleEvent.ERROR, onModuleError);
    iModuleInfo.load();
}

5번째 줄에 모듈 프로젝트에서 생성된 Module1.swf를 지정하고 있습니다. 로컬에서 테스트할때는 이렇게 폴더 경로로 사용되지만 실제로 웹서버에 올려질때는 URL 경로가 사용됩니다. 모듈의 준비가 잘되었을때 실행되는 onModuleReady와 실패했을때 실행되는 onModuleError 함수는 다음과 같습니다.

private function onModuleReady(e:Event):void
{
    e.target.removeEventListener(ModuleEvent.READY, onModuleReady);
    e.target.removeEventListener(ModuleEvent.ERROR, onModuleError);
    
    var mainClassName:String = iModuleInfo.factory.info().mainClassName;
    
    var mainClass:Class = 
        iModuleInfo.factory["getDefinitionByName"](mainClassName) as Class;
    var module:Object = new mainClass(100); 

    text.text = module.sum(100, 200);
 }
   
private function onModuleError(e:Event):void
{
    e.target.removeEventListener(ModuleEvent.READY, onModuleReady);
    e.target.removeEventListener(ModuleEvent.ERROR, onModuleError);
    
    // ERROR 
}

6번에서 모듈의 클래스명을 가져오고 이 클래스 명으로부터 실제 클래스 타입을 8번 코드를 통해 얻습니다. 그리고 이 클래스 타입을 통해 실제 인스턴스를 10번 코드를 통해 생성합니다. 그리고 12번 코드처럼 사용합니다.

이제 다음으로 UI를 제공하는 모듈에 대한 생성과 사용에 대해서 정리해 보겠습니다. 모듈 프로젝트에서 MXML Module로 하여 새로운 파일을 생성합니다.
 
사용자 삽입 이미지
파일명은 Module2로 하고 Output Size 옵션을 Do not optimize로 하여 다른 많은 프로젝트에서 재활용할 수 있도록 합니다. 생성된 Module2.mxml을 다음처럼 코딩합니다.

  xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
 
    
                    import geoservice.XrMap;
   
            private var map:XrMap = null;
   
            public function setup(map:XrMap):void
            {
                this.map = map;
            }
   
            protected function onClick(event:MouseEvent):void
            {
                map.coordMapper.setMapScale(500);
                map.update();
            }
        ]]>

하나의 버튼 컴포넌트를 배치했고 이 버튼에 대한 클릭 이벤트를 지정했습니다. 그리고 setup이라는 함수를 하나 추가해서 이 UI 모듈의 코드들이 실행하기 위해 필요한 설정값들을 지정할 수 있도록 하였습니다.

이 Module2에 대한 모듈 UI를 별도의 어플리케이션 프로젝트에 사용해 보도록 하겠습니다. 어클리케이션 프로젝트의 메인 mxml에 다음과 같은 UI 컴포넌트를 추가합니다.

네! 바로 앞서 만들어 놓은 Module2 모듈 UI가 들어갈 자리입니다. id는 modLoader로 했음을 기억합시다! 버튼을 클릭하면 이 modLoader에 앞서 만들어 놓은 UI 모듈을 올려 보도록 하겠습니다.

protected function onTest(event:MouseEvent):void
{
    modLoader.addEventListener(ModuleEvent.READY, onUIModuleReady);
    modLoader.addEventListener(ModuleEvent.ERROR, onUIModuleError);
    modLoader.url = "../../eTAS_Modules/tstModule/bin-debug/Module2.swf"
}

모듈 로딩이 성공했을때와 실패했을때에 대한 이벤트 리스너를 지정했고 modLoader의 url 속성에 적재할 UI 모듈에 대한 경로와 파일명을 지정했습니다. 로컬에서는 이처럼 디렉토리 경로지만 실제 웹서버에 올라가면 URL 경로로 변경해줘야 합니다. 모듈 로딩이 성공했을때와 실패했을때에 대한 이벤트 리스너의 코드는 다음과 같습니다.

private function onUIModuleReady(e:Event):void
{
    modLoader.removeEventListener(ModuleEvent.READY, onModuleReady);
    modLoader.removeEventListener(ModuleEvent.ERROR, onModuleError);
    
    modLoader.child.addEventListener(FlexEvent.CREATION_COMPLETE, 
        onUIModuleCreateCompleted);
}

private function onUIModuleError(e:Event):void
{
    modLoader.removeEventListener(ModuleEvent.READY, onUIModuleReady);
    modLoader.removeEventListener(ModuleEvent.ERROR, onUIModuleError);
    
    // ERROR!
}

모듈이 성공적으로 로딩이 되면 6번 코드처럼 UI 모듈을 구성하는 UI가 생성되는 이벤트 리스너를 지정해야 합니다. UI가 생성되는 이벤트 리스너 함수인 onUIModuleCreateCompleted의 코드는 다음과 같습니다.

private function onUIModuleCreateCompleted(e:Event):void
{
    modLoader.child.removeEventListener(FlexEvent.CREATION_COMPLETE, 
        onUIModuleCreateCompleted);
    
    var ui:Object = modLoader.child;
    ui.setup(map);
}

7번 코드가 바로 앞서 UI 모듈에서 추가했던 함수입니다. UI 모듈의 버튼을 클릭하면 지정된 코드가 실행되게 됩니다.

비록…. 모듈에 대한 설명예를 단순하게 들었지만 필요한 것들에 대해서 최소한으로.. 그리고 필요한 모든 것을 설명한듯합니다. 물론 실전에서 적용해보고 부족한 부분에 대해서 덧붙이도록 하겠습니다.