본문 바로가기

동강의AS3.0 강좌

[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 는 배열 입니다. ( 기본 속성은 레퍼런스를 참조하세요 )

 
  1. var twoArray:Array = ["z"]; 
  2.  twoArray[0] = "z";            
  3.  trace(oneArray);              
  4.  

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

  

  push 예제  a,b,c String 을 letters 에 넣어 주고 toString 으로 확인해 봅니다.

  1. var letters:Array = new Array();
  2.  
  3. letters.push("a");
  4. letters.push("b");
  5. letters.push("c");
  6.  
  7. trace(letters.toString()); // a,b,c

 

 

 pop 예제  // 자료구조에서 pop 과 의미가 같다. 배열의 가장 뒤에 있는 객체를 반환한다. (반환된 객체를 받지 않으면

 소멸 된다 )

  1. var letters:Array = new Array("a", "b", "c");
  2. trace(letters); // a,b,c
  3. var letter:String = letters.pop();
  4. trace(letters); // a,b
  5. trace(letter);     // c

 

 
  1. var mc:MovieClip = new MovieClip();
  2. var a_arr:Array = new Array();
  3. var b_arr:Array = new Array();
  4.  
  5. a_arr[0] = mc;
  6. b_arr[0] = mc;
  7.  
  8. trace("a_arr[0] : "+a_arr[0].name);
  9. trace("b_arr[0] : "+b_arr[0].name);
  10.  

  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 하면 메모리가 바로 해제 되는 경우였지만 플레시 에서는 조금 다름이다. 예제를 보면

 
  1. var mc:MovieClip = new MovieClip();
  2. mc = null;
  3.  

 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 를 사용할때 두 가지 파라 미터만 쓰는 경우가 많은데 이 경우도 알아 놓으시기 바람니다.
 
한가지의 예제를 더 보면
 
  1. var mc:MovieClip = new MovieClip();
  2. addChild(mc);
  3. var a_arr:Array = new Array();
  4. var b_arr:Array = new Array();
  5.  
  6. a_arr[0] = mc;
  7. b_arr[0] = mc;
  8.  
  9. mc = null;
  10.  
  11. trace("a_arr[0] : "+a_arr[0].name);
  12. trace("b_arr[0] : "+b_arr[0].name);
  13.  
  14. output
  15. a_arr[0] : instance1
    b_arr[0] : instance1
  16.  
 
  1. var mc:MovieClip = new MovieClip();
  2. addChild(mc);
  3. var a_arr:Array = new Array();
  4. var b_arr:Array = new Array();
  5.  
  6. a_arr[0] = mc;
  7. b_arr[0] = mc;
  8.  
  9. mc = null;
  10. a_arr[0] = null;
  11. b_arr[0] = null;
  12. trace("a_arr[0] : "+a_arr[0].name);
  13. trace("b_arr[0] : "+b_arr[0].name);
  14.  
  15. output
  16. 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 무비 클립을 만들고,

 
  1. import caurina.transitions.Tweener;
  2.  
  3. 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 등등이 있고 사용은 동일하게 하되 ,

속성명 앞에 _(언더바)가 붙는 특징이 있습니다.

 

 

 
  1. import caurina.transitions.Tweener;
  2.  
  3. startfunc(circle_mc);
  4.  
  5. function startfunc(_mc:MovieClip):void
  6. {
  7.         Tweener.addTween(_mc,{onComplete:completefunc,onCompleteParams:[_mc],scaleX:5.0,scaleY:5.0,time:2.0,transition:"easeoutinelastic"});
  8. }
  9. function completefunc(_mc:MovieClip):void
  10. {
  11.         trace("트윈종료 : "+_mc);
  12. }

 

참 쉽지요? ;;; 

저는 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 에서 이렇게 발빠르게 움직이고 있는데, 쓰는 사람이 가만히 있을수는 없겠지요??

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

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