동강의AS3.0 강좌2008.12.11 01:41

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

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

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



Posted by Flash 동강