[Base] 10강 - Array + caurina Tweener = iMac Navigation

10강을 시작으로 다룰 내용은 Flash Navigation 입니다. 플래시 메뉴라고 하면 되겠네요. 아주 간단한 메뉴에서 시작해서 xml 을 이용한 메뉴 구성 까지 계획을 하고 있습니다. 우선 적으로 알아야 할것이 Array Class 와  caurina Tweener 의 사용법을 알아야 합니다.  

Array    Package    :loadClassListFrame('class-list.html')" href="file:///C:/Documents%20and%20Settings/All%20Users/Application%20Data/Adobe/Flash%20CS3/en/Configuration/HelpPanel/Help/ActionScriptLangRefV3/package-detail.html">Top Level   Class            public dynamic class Array   Inheritance  : Array -> Object

 Array 는 배열 입니다. ( 기본 속성은 레퍼런스를 참조하세요 )

var twoArray:Array = ["z"];   twoArray[0] = "z";              trace(oneArray);

 여기서 알고 넘어 갈 부분은 push, pop , Array 속성의 함수 입니다. push 는 배열에 넣어 주는 역할 pop 은 배열의 가장 끝에 있는 객체를 반환에 주는 함수 입니다.

push 예제  a,b,c String 을 letters 에 넣어 주고 toString 으로 확인해 봅니다. var letters:Array = new Array();   letters.push("a"); letters.push("b"); letters.push("c");   trace(letters.toString()); // a,b,c

 

pop 예제  // 자료구조에서 pop 과 의미가 같다. 배열의 가장 뒤에 있는 객체를 반환한다. (반환된 객체를 받지 않으면  소멸 된다 ) var letters:Array = new Array("a", "b", "c"); trace(letters); // a,b,c var letter:String = letters.pop(); trace(letters); // a,b trace(letter);     // c

 

var mc:MovieClip = new MovieClip(); var a_arr:Array = new Array(); var b_arr:Array = new Array();   a_arr[0] = mc; b_arr[0] = mc;   trace("a_arr[0] : "+a_arr[0].name); trace("b_arr[0] : "+b_arr[0].name);

1. a_arr[0] = mc;
2. b_arr[0] = mc;

이 부분을 a_arr.push(mc);  b_arr.push(mc) 로 해도 같은 결과가 출력됩니다. 요지는, Array 의 사용에 있어서 push 와 pop 을 잘 활용 해야 된다는 점 입니다. push 와 [0] = mc 로 인해 배열에 저장되는 값은 실체 그 객체가 아니라, 그 객체가 저장되어 있는 주소 값이 라고 생각하시면 될것 같습니다. 지금까지는 언급하지 않았지만 , 배열을 사용할때 Actionscript 에서의 메모리 문제를 잘 이해 하시고 사용하셔야 됩니다. 우선 Actionscript 에서의 메모리 참조 해제 방식은 Flash Player 에 있는 가비지 콜렉션  이 관장을 하고 있습니다. 가비지 콜렉션이란, 뜻 그대로 쓰레기 값들을 모아 준다는 말입니다. 일반적으로 Java 에서는 객체 = null 하면 메모리가 바로 해제 되는 경우였지만 플레시 에서는 조금 다름이다. 예제를 보면

var mc:MovieClip = new MovieClip(); mc = null;

 mc 라는 무비 클립의 메모리가 바로 해제 되는 것이 아니라, 가비지 콜렉션의 수집 대상이 되는 것입니다. ( 수집이 완료된 후에 메모리 해제가 일어 나는 것이지요 ) 이 경우는 addEventListener 의 경우에서도 똑같이 적용 됩니다.   

addEventListener

()

메서드

public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void

 

마지막 파라미터 값인 useWeakReference 로 인해  리스너에 대한 참조가 강한지 아니면 약한지를 결정합니다. 강한 참조(기본값)는 해당 리스너의 가비지 수집을 막습니다. 약한 참조는 이를 막지 못합니다.

 

addEventListener 을 하고 removeEventListener 를 해 줬다고 해서 메모리가 바로 해제 되는 것은 아니라는 점입니다. 일반 적으로 addEventListener 를 사용할때 두 가지 파라 미터만 쓰는 경우가 많은데 이 경우도 알아 놓으시기 바람니다.

 

한가지의 예제를 더 보면

var mc:MovieClip = new MovieClip(); addChild(mc); var a_arr:Array = new Array(); var b_arr:Array = new Array();   a_arr[0] = mc; b_arr[0] = mc;   mc = null;   trace("a_arr[0] : "+a_arr[0].name); trace("b_arr[0] : "+b_arr[0].name);   output a_arr[0] : instance1 b_arr[0] : instance1

var mc:MovieClip = new MovieClip(); addChild(mc); var a_arr:Array = new Array(); var b_arr:Array = new Array();   a_arr[0] = mc; b_arr[0] = mc;   mc = null; a_arr[0] = null; b_arr[0] = null; trace("a_arr[0] : "+a_arr[0].name); trace("b_arr[0] : "+b_arr[0].name);   output TypeError: Error #1009: null 객체 참조의 속성이나 메서드에 액세스할 수 없습니다.  at Untitled_fla::MainTimeline/frame1()

 mc = null 로 객체의 주소 값에 대한 참조를 삭제 하긴 했지만

1. a_arr[0] = mc;
2. b_arr[0] = mc;

여기에서 새로운 참조가 생겨 가비지 콜렉션의 수집을 막게 됩니다. 수집대상으로 만들기 위해서는 모든 연결을 없애 주어야 겠지요?

요지는 쓸대 없는 객체의  = null 을 생활화 하자 입니다. 어려운 내용이니 계속 반복해서 보세요.  

가비지 콜렉션의 자세한 내용은 : http://memolog.blog.naver.com/dongkang0626/38

 

Caurina Tweener

caurina 트위너는 Google code 에 업댓 되고 있는 AS2.0, AS3.0 트윈 클래스 입니다.    

클래스원본위치

http://code.google.com/p/tweener/  

사용을 위해서는 우선 caurina 패치지를 다운 받으시고, (첨부 파일) fla 나 as 파일이 있는 곳에 압축을 풀어 놓으심니다. 그후

import caurina.transitions.Tweener;               // 클래스를 사용하기 위한 import

여기에서 import 를 잘못해서 헤매시는 분이 있는데, fla 이 만들어져 있는 폴더에 caurina 폴더가 함께 있으면 됩니다.  

아주 간단한 사용법 Tweener.addTween(myMovieClip, {속성이 들어감}); myMovieClip 은 무비 클립 이름입니다 (지금까지 무비 클립의 이름을 지정해서 사용했던 방법으로 입력하면 됨) 그리고 트위너 자체에서 제공 하고 있는 엄청난 종류의 속성들 x , y , width ,height , scaleX, scaleY , alpha , _bezier:[],time, onComplete:,onCompleteParams:[],onStart:,onUpdate, rotation,delay, 등등.   onStart : tween 시작 핸들러 등록 onComplete : tween 큰 핸들러 등록 onUpdate : tween 진행중 핸들러 등록 onCompleteParams:[], onComplete 함수 지정시 넘길 파라미터를 지정해 준다.(onStart 와 onUpdate로 똑같이적용)   _bezier: [] 이동할때 베지어 곡선을 만들기 위한 점을 지정해 준다. time : 변화가 진행되는 시간을 정해준다. delay : 명령문이 실행되고, delay: 몇초 가 흐른 뒤에 해당 명령문을 실행 시켜 준다.   transition:"" 변화 진행되는 그래프를 지정해 준다.

  그럼 사용해 보겠습니다. circle_mc 무비 클립을 만들고,

import caurina.transitions.Tweener;   Tweener.addTween(circle_mc,{x:300,y:300,time:2.0,transition:"easeoutinelastic"});

 Flash 자체의 Tween 과 다르게 한번에 여러 속성을 변경 시킬수 있습니다. 해당 속성에 들어 가는 값은 목표치 즉, 변경 하고자 하는 결과 위치를 나타 냄니다. 괴물투수 형님이 쓰신 팁을 인용하면

 

간단히 사용해보기 <A> Tweener.addTween(myObject , {x:20, time:1, transition:"easeOut"});   <B> Tweener.addTween(myObject , {_frame:20, time:1, transition:"easeOut"});   간단한 설명 이것은 기본적으로 1. 바꾸고 싶은 것과 바꾸고 싶은것의 2. 목표치를 적어넣음으로써 작동합니다.   위의 <A>에서 바꾸고 싶은건 x 좌표이고 목표치는 20이 되겠고 <B>에서는 바꾸고 싶은건 프레임이고 가고 싶은 프레임은 20프레임이 되겠네요   그리고 뒤의 time은 이동하는 시간이고 뒤의 transitions는 운동의 느낌을 나타냅니다.   <A> x는 myObject 이놈이 원래 가지고 있는 속성입니다. myObject가 무비클립이라면 x , y , alpha , width , height 등등이 되겠죠?   <B> 여기서 _frame은 myObject란 놈이 원래 가지고 있는 속성이 아닙니다 이것은 google tweener에서 스페셜하게도 제공하는 스페셜한 special properties인 것입니다 frame , color , sound 등등이 있고 사용은 동일하게 하되 , 속성명 앞에 _(언더바)가 붙는 특징이 있습니다.

 

import caurina.transitions.Tweener;   startfunc(circle_mc);   function startfunc(_mc:MovieClip):void {         Tweener.addTween(_mc,{onComplete:completefunc,onCompleteParams:[_mc],scaleX:5.0,scaleY:5.0,time:2.0,transition:"easeoutinelastic"}); } function completefunc(_mc:MovieClip):void {         trace("트윈종료 : "+_mc); }

 

참 쉽지요? ;;; 

저는 Tween 보다 caurina 를 자주 사용 한담니다. 그 만큼 편하고, 속도도 나름(?) 괜찬게 나오는 좋은 녀석입니다. 지금까지 네비게이션을 만들기 위한 기초 부분에 대해 써 보았습니다. 다음에는 iMac navigation 디자인 및, 구현 방법, 프로토 타입을 만들어 보도록 하겠습니다.   

이제 3월 18일이면 AIR 가 우리나라에서도 정식으로 나오게 되고, Flex 3 도 런칭이 되게 됩니다. 이 말은 Actionscript 3.0 이 더이상 Flash Flex 만을 위한 조금한 일부분을 벗어나 RIA 의 선두 주자로의 도약을 시작할것이라 생각됩니다. 많은 분들이 Actionscript 3.0 은 선택이 아니라, 필수라는 말을 하심니다. 이제 그 말이 현실이 되어 나타 나고 있습니다. 곧 Adobe 에서 디자이너와 개발자의 협업을 위한

"Thermo"(http://labs.adobe.com/wiki/index.php/Thermo) 가 출시 될 것이고, Actionscript3.0 의 중요성은 더욱 강조될 것입니다.  

Adobe 에서 이렇게 발빠르게 움직이고 있는데, 쓰는 사람이 가만히 있을수는 없겠지요??

"자 공부 합시다. 그리고 삽질 합시다."

역시나 잘못된 부분이나, 질문 사항 거침 없이 댓글 부탁드립니다.