본문 바로가기

동강의AS3.0 강좌

[Base] 4강 - Tween 클래스와 객체 동적 생성(1)


자 오랜만에 공부를 시작하겠습니다. 이것 저것 참고하면서 쓰니 덩달아 잘 이해가 안되었던 부분까지 이해가 되니 기분이 좋습니다. ㅎㅎ 정작 보는 사람은 이해 못하고 있는데 나만이해 되는건 아닌지;;;; ;후덜덜 지난 시간에 ENTER_FRAME 을 이용해서 노가다로 객체의 크기를 변화 시켜 보았는데 먼저 그 코드의 길이를 줄이겠습니다.  

Tween 
패키지 fl.transitions
클래스 public class Tween
상속 Tween  EventDispatcher  Object  
Tween 클래스는 Flash 에서 객체의 움직임을 조절할수 있도록 정의해놓은 내장 class 입니다.
사용방법은 아래와 같습니다.  

import fl.transitions.Tween;
import fl.transitions.easing.*;
var myTween:Tween = new Tween(myObject, "x", Elastic.easeOut, 0, 300, 3, true);

import 는 사용자 정의 class 나 flash 에서 사용되는 내장 class 를 불러올때 쓰입니다.
1)  import 패키지이름.클래스이름;
2_  import 패키지이름.*; 

* 는 패키지 안에 있는 모든 class 를 불러 올때 쓰입니다.  

Tween(obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean = false)
Tween(객체:Object, 변화시킬속성:String, 변화스타일:Function, 시작위치:Number, 끝위치:Number, 변화시간:Number, useSeconds:Boolean = false)
우선 stage 에 import 를 시킨뒤 my_mc 라는 무비클립을 만드세요 여기서는 Tween 이름을 myTween으로 하겠습니다.   

 
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.*;
  3.  
  4. var myTween:Tween = new Tween(my_mc, "x", Elastic.easeOut, 100, 300, 1, true);
  5.  

 어떻게 되나요? 움직임을 자세히 보기 위해 마우스 이벤트를 넣어 보겠습니다

 
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.*;
  3.  
  4. my_mc.addEventListener(MouseEvent.MOUSE_OVER, myOverhandler);
  5. function myOverhandler(event:MouseEvent):void
  6. {
  7.         var myTween:Tween = new Tween(my_mc, "x", Elastic.easeOut, 100, 300, 1, true);
  8.        
  9. }
  10.  
  11. my_mc.addEventListener(MouseEvent.MOUSE_OUT, myOuthandler);
  12. function myOuthandler(event:MouseEvent):void
  13. {
  14.        
  15.         var myTween:Tween = new Tween(my_mc, "x", Elastic.easeOut, 300, 100, 1, true);
  16.  
  17.  
  18. }

 여기서는 "x" 속성을 바뀌었지만 여기에 들어 갈수 있는 속성은 MovieClip 이나 Sprite 등 이 가지고 있는 모든(?) 속성이 들어 갈수 있습니다. 그럼 크기를 바꾸려면 어떻게 해야 될까요? "scaleX" 와 "scaleY" 를 동시에 바꿔주어야 합니다. Elastic.easeOut 이라는 변화 속성을 넣어 줬는데, 이것 외에도 여러가지가 있습니다

Elastic.easeOut, easeIn, easeInOut
Bounce.easeOut, easeIn, easeInOut
None.easeOut, easeIn, easeInOut
Strong.easeOut, easeIn, easeInOut

등등 한번식 사용해 보세요. 은근 Tween 클래스를 가지고 노는건 재미 있답니다.  

그럼 저번시간에 했던 것을 바꿔보겠습니다.

 
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.*;
  3.  
  4. var ori_W = my_mc.width
  5. var ori_H = my_mc.height            // bu_mc 들은 모두 같은 크기 이기 때문에 임의로 my_mc 의 값을 저장
  6. var targetW = 120;
  7. var targetH = 120;
  8. //var bo:Boolean = false;
  9. addEventListener(MouseEvent.MOUSE_OVER, Overhandler);  
  10. addEventListener(MouseEvent.MOUSE_OUT, Outhandler);    
  11. var myTween:Tween;
  12. function Overhandler(event:MouseEvent):void
  13. {
  14.         myTween = new Tween(my_mc, "width", Elastic.easeOut, ori_W, targetW, 1, true);
  15.         myTween = new Tween(my_mc, "height", Elastic.easeOut, ori_H, targetW, 1, true);
  16.    
  17. }
  18. function Outhandler(event:MouseEvent):void
  19. {
  20.         myTween = new Tween(my_mc, "width", Elastic.easeOut,targetW ,ori_W,1, true);
  21.         myTween = new Tween(my_mc, "height", Elastic.easeOut,targetW, ori_H,1, true);
  22.  
  23. }

 어떤가요? 저는 Tween 을 알게 되었을때 ENTER_FRAME 으로 왜 노가다를 했을까 하고 한탄을 했었는데, 이 Tween 클래스 는 잘만 사용하면 정말 편리하고 강력하게 사용됩니다. 그밖에 가지고 있는 속성들은 후에 다루도록 하겠습니다.  

DisplayObject
DisplayObjectContainer

도대체 이놈들은 뭐냐?  

나열되는객체
나열되는 객체 그릇 

한글로 써진 그대로 입니다. stage 에 올려진 것들은 모두 DisplayObject 이고 그 중에서는 DisplayObjectContainer 기능을 하는것도 있습니다. 쉽게 말하면(?) , 바구니는 그 자체로 하나의 객체가 될수 있지만 그안에 다른 물체들을 담을수도 있지요. 이 바구니가 DisplayObjectContainer 입니다. 이게 왜 중요한가?  

DisplayObject

패키지              :loadClassListFrame('class-list.html')" href="http://livedocs.adobe.com/flash/9.0_kr/ActionScriptLangRefV3/flash/display/package-detail.html">flash.display
클래스 public class DisplayObject
상속 DisplayObject EventDispatcher Object
구현 IBitmapDrawable
하위 클래스 AVM1Movie, Bitmap, InteractiveObject, MorphShape, Shape, StaticText, Video

 

DisplayObjectContainer

패키지            :loadClassListFrame('class-list.html')" href="http://livedocs.adobe.com/flash/9.0_kr/ActionScriptLangRefV3/flash/display/package-detail.html">flash.display
클래스 public class DisplayObjectContainer
상속 DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object
하위 클래스 Loader, Sprite, Stage

위와 같이 DisplayObject 에서 시작하여 stage위에서 구현되는 객체들이 정의되게 됩니다. (상속관계를 잘 보세요) 그럼 상속은 뭔가? 신상품과 구상품의 예를 들어 보겠습니다. 구상품이 상위 클래스 이고, 신상품이 하위 클래스 입니다.  

구상품이 출시되고 신상품이 출시 될때 신상품이 가지고 있는 기능은 무엇일까요? 구상품이 가지고 있는 기능들은 모두 가지고 있고 그 기능을 변화 시키던가, 새로운 기능을 추가 해 주어서 신상품이 만들어 지는 것입니다. 따라서 신상품은 구상품보다 덩치(가지고 있는 기능들) 가 더 커지게 되는 것이지요.

 이 관계는 우리가 지금까지 써 보았던 MovieClip 과 DisplayObject 와 의 관계라고 할수 있습니다. MovieClip 이 신상품이고 DisplayObject 가 구상품이지요. 

상속관계를 더 살펴 보면 모든 클래스의 최상위 클래스인 Object 는 모든것을 쓸수 있는 전자 제품을 예로 들면 아무것도 추가 시키지 않은 기판이라 할수 있습니다. ( 여기서, 공대생 특징이 나오는군요;; )

다현아빠 님의 글을 인용해 보겠습니다

 

red : 추상화 클래스(3.0에서는 추상화 클래스가 없지만 추상화 계념의 기반클래스이다.

물론 추상화이니 당연히 인스턴스도 생성을 해서는 안된다.)

yellow : 생성제한(MorphShape/StaticText는 플래시 오서링툴로만 생성가능.

AVM1Movie는 2.0이하 기반에서 제작한 swf 또는 심볼 객체이다.) 

green : 동적으로 인스턴스 생성이 가능한 클래스 

purple : 마커 인터페이스(마커 인터페이스에 대한 포스팅글 참조.)

뭐야 왜이렇게 갑자기 어려워 진거냐, 이거 기초 강좌 아니었냐  

어려워도 이것만은 꼭 알아 두고 넘어가야할 부분입니다. DisplayObject 야 말로 flash 의 핵심이고 flash 그 자체라고 해도 과언이 아닐 정도로 중요한 class 입니다. (위의 그림과 연관하여 ) http://livedocs.adobe.com/flash/9.0_kr/ActionScriptLangRefV3/flash/display/DisplayObject.html

 정독하면서 읽어 보세요. 무슨말인지 모르겠다고 해도, 다음 강에서는 예를 들어 이해 시켜 드리기 위해 노력하겠습니다. flash 에 이런 class 들이 있구나 참고 하시고 공부하시는것도 좋을것 같습니다.

 

역시나 잘못된 부분이나 질문은 거침없이 댓글 날려 주세요.

 

http://dongkang.ivyro.net/zbxe/?module=file&act=procFileDownload&file_srl=3846&sid=493dd3dea32e8baf0c73221c13a66134

클래스 다이어그램 링크 입니다.