[카테고리:] ActionScript

작성일자

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();
    }
}

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