Actionscript3.02008.12.11 11:42

동적으로 라이브러리에 있는 무비 클립이나 bitmap 파일을 어떻게 불러 올수 있을까요? 

as3.0 에서 class 개념이 좀더 확장 되면서 Linkage 에서 identifial 지정 뿐만 아니라 class 및 base 클래스를 지정 할수 있습니다. 라이브러리에 있는 객체들을 동적으로 불러 오기 위해서는 Linkage 와 class 와 new 와 addChild 이 필요 합니다.   

우선 Linkage 창을 보면 (라이브러리에서 우클릭 Linkage)


Export for Actionscript 를 클릭하면

 무비 클립을 Linkage 하셨다면 flash.display.MovieClip 가 Base로 지정되게 되고 자신이 이름 붙일수 있는 Class 창이 활성화 됩니다 ( 여기서는 cursor ) 원하는 class 이름을 써 놓고 ok 를 누르게 되면 이제 해당 객체가 클래스로 정의가 된 것입니다. (매우 간단히 클래스를 만들수 있다는 ) ( 아마 내부적으로  fla 파일에 매여 있는 class 가 생성됩니다. )

만약 아래와 같은 무비 클립을 Linkage 하셨다면.

 

var cur:cursor = new cursor(); <-- var mc:MovieClip = new MovieClip();
addChild(cur);

하게 되면 좌표 0,0 값에 cur 가 보여 지게 됩니다.

 

동적으로 다른 위치에 5개 생성 

for(var i:int= 0; i < 5; i++){

     var cur:cursor = new cursor();
     cur.x = i*5;
     addChild(cur);

}

 이런식으로 연결하여 사용하시면 되고요, 이것 이용해서 우리가 지금까지 토의 했던 상속이라는 개념을 적용할수 있습니다. 위의 cursor는 단지 화살표 모양의 무비 클립일 뿐 속성이 정의가 안되어 있는데 여기서 속성을 추가해 보겠습니다. 같은 폴더에 Ccursor.as 를 생성하시고 아래 코드 입력. 


  1. // 테스트를 위한 Ccursor 생성
  2.  
  3. package{
  4.  import flash.display.*;
  5.  import flash.events.*;
  6.  
  7.  public class Ccursor extends cursor           //fla 파일에서 정의한 cursor class 를 상속 받는다.
  8.  {
  9.   public function Ccursor():void
  10.   {
  11.    addEventListener(MouseEvent.MOUSE_OVER, Overhandler);
  12.    addEventListener(MouseEvent.MOUSE_OUT, Outhandler);
  13.      
  14.   }
  15.   private function Overhandler(ev:MouseEvent):void
  16.   {
  17.    trace("오버");
  18.   }
  19.   private function Outhandler(ev:MouseEvent):void
  20.   {
  21.    trace("아웃");
  22.    
  23.   }
  24.  
  25.  }
  26.  
  27. }

 
  1. //fla 파일 두가지 종류의 클래스 생성
  2.  
  3. var cur:cursor = new cursor();
  4. cur.x = 200;
  5. cur.y = 200;
  6. addChild(cur);
  7.  
  8.  
  9.  
  10. var cur2:Ccursor = new Ccursor();
  11. cur2.x = 300;
  12. cur2.y = 200;
  13. addChild(cur2);

 

 Ccursor class 로 addChild 된 왼쪽 객체 만이 마우스 이벤트에 반응하게 됩니다. 이와 같이 Flash 는 라이브러리에 있는 사용자 정의 객체들을 자유 롭게 사용할수 있는 편안한 인터페이스를 제공합니다.

 



Posted by Flash 동강
Actionscript3.02008.12.11 11:31

플래시를 시작 하고 나서 처음으로 만들어 보고 싶은 것을 꼽으라면 내 사진첩 이라는 말을 제일 많이 들어보았습니다. 

저 또한 플래시를 접하게 되고 처음으로 "내가 만든 것" 이라고 사람들에게 보여 준것도 사진첩이었습니다. 사진첩이라는 말이 거창하게 들릴지 모르겠지만, 사진첩이난 MP3 플레이어를 만들때 핵심이라 할수 있는 Loader Class 에 대해 끄적여 볼까 합니다.

Loader

Loader DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object

Loader 클래스는 SWF 파일이나 이미지(JPG, PNG 또는 GIF) 파일을 로드하는 데 사용됩니다. load() 메서드를 사용하여 로드를 시작합니다. 로드된 표시 객체는 Loader 객체의 자식으로 추가됩니다.

텍스트 또는 이진 데이터를 로드하려면 URLLoader 클래스를 사용합니다. Loader 객체는 자식 표시 객체(Loader 객체가 로드하는 표시 객체)를 하나만 가질 수 있기 때문에 Loader 클래스는 자신이 상속하는 다음 메서드를 무시합니다. 따라서 addChild(), addChildAt(), removeChild(), removeChildAt()setChildIndex() 메서드를 호출하면 예외가 발생합니다. 로드된 표시 객체를 제거하려면 해당 부모 DisplayObjectContainer 자식 배열에서 Loader 객체를 제거해야 합니다.

레퍼런스에 적혀 있는 말이 어렵게만 느껴지는 군요;;  위의 말대로 Loader 는 파일을 로드 하기 위해 사용 됩니다.   

var testloader:Loader = new Loader();
testloader.load(new URLRequest("image.jpg");
addChild(testloader);   

로더 클래스에서 경로를 설정해 주기 위해서는 URLRequest 라는 클래스를 사용하게 되는데 URLRequest 클래스는 하나의 HTTP 요청에 포함된 모든 정보를 캡처합니다.

 

가장 기본이 되는 뼈대 입니다. 그렇다면 Loader 는 불러 오기만 하면 그 기능을 다 하는 것인가? Loader Class 에서는 그 해당 로더로 불러와 지는 데이터의 접근 기능을 가지고 있습니다. 이 기능으로 인해 예를 들어 사진을 로드 한다면 width 값이나 height 값을 바꿀수 있는 것이지요.  


testloader.contentLoaderInfo.addEventListener(Event.COMPLETE, fComplete);
function fComplete(ev:Event):void
{
    var mObject:DisplayObject = ev.target.content;
    mObject.width=100;
    mObject.height=100;

}


// ev.target.content 로 해당 로더로 불러와 지는 데이터에 대한 접근을 할수 있습니다. 그 후에 width 값과 height 를 바꿔주는 것이지요. 위의 예는 이미지 로드 뿐만 아니라 xml 로드 swf 로드 때에도 동일하게 적용이 됩니다.  


function  fComplete(ev:Event){
   var loader:URLLoader=URLLoader(ev.target);             
// URLLoader 에 대한 내용은 레퍼런스를 참고하세요

   var dataXML=new XML(loader.data);
   trace(dataXML);
  
  }

 LoaderEvent 에서는 load 가 끝났을때의 이벤트 뿐만 아니라 로드가 진행 될때의 이벤트도 제공 하고 있습니다.  


testloader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, fProcess);
function fProcess(ev:ProgressEvent):void
{
    var mPercent:Number =int( e.bytesLoaded/e.bytesTotal*100.0);
    trace(mPercent);
}

 위의 기능으로 이미지 로드시 로딩바를 만들수 있게 되는 것입니다. ( progressEvent 가 진행되고 있을때는 로딩 무비 클립을 addChild 해 주고 끝나면 그 무비 클립을 제거 해 주는 방식으로)  

이러한 이벤트들로 이미지를 불러오고 불러온 이미지를 조작하고 interaction 을 추가 하여 기본적인 겔러리를 구현할수 있습니다. 이 로드하는 방식을 간단하게 쓸수 있게 만들어 놓은 Class 를 소개 합니다.

( 새롭게 시작하는 Actionscript 3.0 -윤훈남 의 예제 소스 ) - 문제가 생기면 삭제 하겠습니다.  

 

  1. package {
  2.  
  3.  import flash.display.Loader;
  4.  import flash.display.DisplayObjectContainer;
  5.  import flash.events.ProgressEvent;
  6.  import flash.events.Event;
  7.  import flash.net.URLRequest;
  8.  import flash.display.DisplayObject;
  9.  
  10.  public class CLoaderUI extends CLoadAni {
  11.   var pLoader:Loader = new Loader();
  12.   var pRequest:URLRequest = new URLRequest();
  13.   var pContainer:DisplayObjectContainer;
  14.  
  15.  
  16.   var pWidth:Number,pHeight:Number;
  17.   var pX:Number,pY:Number;
  18.  
  19.   function CLoaderUI(mStage:DisplayObjectContainer,mURL:String,mWidth:Number,mHeight:Number,mX:Number=0, mY:Number=0):void {
  20.    pContainer = mStage;                      // mStage 는 어느 객체에 load 를 할지를 지정할수 있게 해 준다.
  21.    pX=mX;                                         // 위치 지정
  22.    pY=mY;                                          // 크기 지정
  23.    pWidth=mWidth;
  24.    pHeight=mHeight;  
  25.          
  26.    pRequest.url =mURL;                       // 해당 이미지 경로 지정
  27.    if(pRequest.url != "")
  28.     pLoader.load(pRequest);
  29.    else
  30.     pLoader.load(new URLRequest("noImage.jpg"));          // 이미지가 없을때는 정해진 이미지 로드
  31.    
  32.    pLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, fProcess);       // 진행중
  33.             pLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fComplete)           // 완료
  34.    
  35.  }
  36.      function fProcess(e:ProgressEvent):void {
  37.      var mPercent:Number =int( e.bytesLoaded/e.bytesTotal*100.0);
  38.  
  39.      trace(mPercent);
  40.   }
  41.  
  42.   function fComplete(e:Event):void
  43.   {  
  44.     var mObject:DisplayObject = e.target.content;        //load 된 내용을 불러 와서
  45.     mObject.width=pWidth;                                       // 조작한다.
  46.     mObject.height=pHeight;
  47.     mObject.x=pX;
  48.     mObject.y=pY;
  49.     pContainer.addChild(mObject);
  50.     pContainer.removeChild(this);                  // 해제 시켜 준다.
  51.     pLoader =null;
  52.     pContainer=null;
  53.     pRequest=null;
  54.   }
  55.  }
  56. }

 위의 클래스를 사용하면 로드시에 겪는 불편을 조금 덜어 줍니다. 처음 사진첩 만들때 이미지 크기 조작을 어떻게 해야 할지 몰라 고생했던거 생각을 하면서 썼습니다.
조금이라도 도움이 되셨다면 좋겠네요.

Posted by Flash 동강
동강의AS3.0 강좌2008.12.11 01:32

자주 올린다고 했는데, 속도가 더디네요.ㅋㅋ 졸업 시즌이다 보니 친구들 졸업식에 갔다 오게 되고, 오늘은 친형 졸업식에 갔다 왔담니다;; 크헐...... 날씨도 많이 풀리고, 학기가 시작한다고 생각하니;; 머리에 쥐가 날꺼 같은;; 으악!!!!!  

오늘은 기초스터디를 하고 있는 것과 이어서 " 사용자 정의 클래스 " 에 대해 간단히 하는 방법을 알아 보고

"내가 만든 클래스를 사용한다" 라는 주제로 시작해 보겠습니다.   

우선 5강 동적 생성 부분에서 Linkage 로 객체를 정의 해서 Linkage Properties 창에서  Class 에 이름을 입력을 하는것으로 내가 스테이지에 그린 객체가 클래스로 정의 된다는 것을 알았습니다 

(잘 기억 안나시면 http://cafe.naver.com/flashactionscript/12025 되돌아 가보시는것도 좋습니다 )  

그럼 내가 클래스를 만들었는데, 그 클래스의 속성을 지정할수 없는가? 이 객체에 속성을 추가해 보고 싶다. 어떻게 해야 될까요?

단순 Frame 액션에서는 어떻게 하는지 감이 오셨을 것입니다. 제가 말하고 있는 건 Linkage 로 Circle 이라는 클래스를 만들었을때, 이 객체를 어떻게 사용하는지는 알겠는데, 속성을 어떻게 추가 할것인가 하는 것입니다.

어떻게 하시겠어요? Frame 액션에서는 이렇게 해 왔습니다.

 

 // circle frame 액션으로 적용
  1. var cir:Circle = new Circle();
  2. cir.x = 100;
  3. cir.y = 100;
  4. cir.alpha = 0.8;
  5. cir.width = 200;
  6. cir.height = 100;
  7. addChild(cir);
  8.  
  9. // 마우스 이벤트를 추가 하려면
  10. cir.addEventListener(MouseEvent.CLICK, fcirdownhandler);
  11.  
  12. function fcirdownhandler(event:MouseEvent):void
  13. {
  14.         trace("마우스 다운이랑께");
  15.        
  16.        
  17. }

 

지금부터 사용하고자 하는 사용자 정의 클래스는 위의 액션과 똑같은 작용을 합니다. 그런데 구지 클래스로 만들어서 사용하려고 하는가? 우선은 습관이라고 말해 드리고 싶습니다. 단순 100줄도 안되는 액션 코드에서는 자신이 알아 볼수 있다면 frame 액션에 때려 박고, 사용하셔도 상관없습니다. 하지만 코드가 500~ 1000줄 10000줄까지 가면 어떻게 하시겠어요? Ctrl + F 조낸 눌러 가면서 일일이 변수명 확인해서 사용하는게 좋을까요 ? 아님 클래스를 따로 만들어서 관리 하시는게  좋으시겠어요? 선택은 자유지만, 전 필수라고 생각이 됩니다. 그 밖에도 무궁 무진한 장점들이 있으니 절 믿고 따라와 보세욜.

이제 클래스 파일을 만들어 보겠습니다.

메뉴의 File - New - Actionscript File 을 클릭 하세요.

우선은 클래스를 만들기 위한 기본 구조 부터 익히겠습니다.

 
  1. package {
  2.        
  3.         import flash.display.MovieClip;
  4.         /* import 를 정의하는 부분 입니다.
  5.         import 란 이 package 안에서 사용되어질 다른 클래스들을 불러 오기 위한 부분입니다
  6.         C 에서는 include 라고 생각하시면 되겠고 자바랑은 똑같습니다.
  7.         보통 Flash fla 파일에서는 무비 클립과 같은 클래스들은 import 를 하지 않아도 사용이 가능하지만
  8.         여기에서는 import 를 해야 사용이 가능합니다. 아무 것도 없는 상태에서 하나하나 불러서 써야
  9.         사용할수 있는 것입니다
  10.         */
  11.        
  12.         public class Circle extends MovieClip{
  13. extends MovieClip 을 왜 해주는가? 구지 MovieClip 으로 안하고 Sprite로
  14. 하는 방법도 있지만 우선은 우리가 정의한 것이 MovieClip 이니 MovieClip
  15. 을 상속받아야 정의가 가능합니다.
  16.        
  17.                 // 클래스의 메인이 되는 부분 전역 변수를 여기에 선언합니다.
  18.                 public function Circle():void
  19.                 {
  20.                         /*
  21.                         클래스의 생성자 라는 부분입니다. 함수이름은 클래스 이름과 동일하게 작성해야
  22.                         이 해당 클래스의 생성자로 적용이 되게됩니다. 생성자란 무엇인가?
  23.                         사용자가 Circle 이라는 클래스를 만들었을때 바로 호출되는 부분입니다. 이 생성자에서
  24.                         이 클래스의 속성을 지정할수 있고, 처음으로 해야 되는 부분을 모두 여기에서
  25.                         정의하고 사용하게 됩니다
  26.                         */
  27.                          
  28.                         trace("생성");
  29.                        
  30.                 }
  31.                
  32.                
  33.         }
  34.        
  35.        
  36. }

 

그리고 클래스 파일명은 Document 파일및 fla파일을 저장한 같은 폴더 안에 클래스 이름과 같은 이름으로 저장합니다

(여기 에서는 Circle.as 입니다) 

그리고 전 시간에 만들어보았던 Document 클래스를 fla 파일에 연결 시켜 봅시다.

 
  1. package {
  2.        
  3.         import flash.display.MovieClip;
  4.                
  5.         public class CustomMain extends MovieClip
  6.         {
  7.        
  8.                 public function CustomMain():void
  9.                 {
  10.                         var cir:Circle = new Circle();
  11.                         addChild(cir);
  12.                        
  13.                 }
  14.                
  15.                
  16.         }
  17.        
  18.        
  19. }

 

// output

생성  

그동안 Document 클래스 사용법은 숙지 하셨지요? 기억 안나시면 6강으로...................
그럼 위의 frame 액션으로 추가 시켜 줬던 Circle 에 대한 속성은 어떻게 정의해 줄까요?? 아주 간단합니다.

 
  1. package {
  2.  
  3.         import flash.display.MovieClip;
  4.         import flash.events.MouseEvent;
  5.         public class Circle extends MovieClip {
  6.  
  7.                 public function Circle():void {
  8.                         trace("생성");
  9.                         this.x = 100;
  10.                         this.y = 100;
  11.                         this.alpha = 0.8;
  12.                         this.width = 200;
  13.                         this.height = 100;
  14.  
  15.                         this.addEventListener(MouseEvent.CLICK, fcirdownhandler);
  16.  
  17.  
  18.                 }
  19.                 public function fcirdownhandler(event:MouseEvent):void {
  20.                         trace("마우스 다운이랑께");
  21.  
  22.                 }
  23.         }
  24. }

 

여기서 this 란 Circle 이란 클래스 자기 자신의 의미 합니다. 그러니 자기 자신에게 속성을 추가해 주는것이지요. 정말 간단하죠? 지금까지 as 파일 2 개 fla 파일 1개가 생성되었습니다.  function 앞에 public 이나 private 로 정의를 하고 있는데, 우선은 모두 public 으로 해도 무방합니다. 클래스의 개념을 좀더 추가해 주면서 설명하도록 하겠습니다.   

어찌 파일이 좀 깔끔해 졌다 라는 것을 느끼고 계신가요??  이것으로 [Base 강좌] 에서 이론에 대한 부분중 큰 가닥은 잡은것 같습니다.  늘 하는 얘기지만 어렵다고 생각하시는 분들이 많으실꺼라 봄니다. 하지만 이게 3.0 의 아주아주아주 기초중에 기초 라는 점을 알아 두셨으면 좋겠습니다. 앞으로 엄청난 기능을 자랑하는 내장 클래스들과, 우수한 개발자들이 만들어 놓은 클래스를 활용할 수 있게 되기 위해서는 아직 갈길이 많이 남아 있습니다. 기초 부터 탄탄히 라고, 하나하나 스텝을 밟아 가시기 바람니다.   

앞으로는 실습을 중심으로 이론을 추가해 나아가면서 Base에 살을 붙여 나가도록 하겠습니다. 수고 하셨습니다.

다음 강에 뵙겠습니다. 안뇽~ 

 

역시 틀린 부분이나 질문 거침없는 답글 댓글 부탁드립니다. (해보기는 없습니다;;;;;  아싸! ) 



Posted by Flash 동강
동강의AS3.0 강좌2008.12.11 01:30

안녕하세요 "동강" 입니다. 저번 시간에 이어서 Class 의 대한 이야기를 계속 해나갈까 합니다. 앞으로의 강좌에서는 frame 액션의 사용을 최대한 버리고, 오직 Class 상에서의 액션으로 진행하겠습니다. 우선 Class 에 대해 다시 한번 알아 보도록 합니다. 클래스를 알기 위해서는 우선 객체 지향 프로그래밍 부터 알아야 합니다.  

0. Class 와 객체 지향 프로그래밍  

그럼 객체 지향 프로그래밍은 무엇일까요? 흔히 OOP 라고 알고 있는 객체 지향 프로 그래밍은 말 그대로 객체 하나하나를 존중해서 프로그래밍 한다는 의미 입니다.  

예) 자전거를 예로 들면, 움직이는 자전거를 프로그래밍 한다고 생각해 봅시다. 우선 자전거를 기능 별로 나눠 보면 앞바퀴 부분, 뒷바퀴 부분, 페달 부분, 그리고 몸체 부분으로 나눌수 있습니다. 이것들 하나하나가 다 클래스가 되는 것이지요. 각각의 클래스들의 서로의 연관 관계는 나중에 생각하기로 하고, 앞바퀴 클래스의 안을 들여다 보면 그 안에는 기어가 있고, 바퀴 타이어가 있고, 바람 넣는 구멍도 있고, 여러 가지 클래스 안의 구성물들이 존재 합니다. 이 구성물들은 자신의 부모 클래스의 지시에 따라 움직이게 됩니다. 

이때, 페달을 밟고 있는 사용자는 바퀴의 기어 부분에서 무슨일이 일어 나고 있다는것을 모두 신경쓰고 있어야 될까요??    아님니다. 사용자는 오직 페달 부분에만 신경 쓸뿐 바퀴가 돌아 가는건 신경을 쓰지 않아도 됩니다. 바퀴는 페달이 관장을 하겠지요. 객체 지향이 뭔지 감이 좀 오시나요? 이 객체 지향 프로그래밍 방법론(OOP)으로 구성되어 있는것이 Actionscript 자체 입니다.

( "대충 설명 하고서 먼 감이 오냐" 라는 분들을 위해 자료를 첨부하겠습니다 ;;; )

여기에서 우리가 곡 알고 넘어가야 할 부분은  객체지향 프로그래밍( 앞으로는 OOP 라 하겠습니다 )의 특징중 상속이란 개념입니다. 상속은 무엇일까요? 앞에 강에서 언급했던 것이 이어서 말하겠습니다 ( 2~4강을 참고 하세요 ) Actionscript는 객체 지향 자체의 언어 입니다. 우리가 지금 까지 썼던 MovieClip 도 Flash 안에서 정의 되어 있는 내장 클래스 입니다   

MovieClip 

MovieClip  Sprite  DisplayObjectContainer  InteractiveObject  DisplayObject  EventDispatcher  Object 

Object 에서 시작하여 살을 붙이고 붙여 MovieClip 이 탄생하게 되는 것이지요. 그럼 Object 는 뭐냐? Object 는 아무 것도 없는 하나의 공간 입니다. 여기에는 무엇이든 넣을수 있고, 어떤 한 물건을 넣어서 한종류의 어느 무엇으로도 사용될수 있습니다. (배열같이 사용될수도 있고, 그냥 무비 클립으로도 사용될수도 있다는 뜻입니다) 대략 적으로 위의 상속 구조를 언급한다면, Object 의 빈 공간에서 시작하여

1. EventDispatcher 에서 Event 를 가질수 있는 구조를 상속 받는다.
( MovieClip 의 addEventListener 는 괜히 가지고 있는게 아니겠지요? 여기에서 상속 받은 것입니다.)
2. DisplayObject 에서 화면에 보일수 있는 객체로 정의 되어 진다.
3. InteractionObject 에서 마우스와 키보드와 상호 작용할수 있는 속성을 상속 받는다.
4. DisplayObjectContainer 에서 무엇인가 담을수 있는 그릇으로 진화 한다.
5. 기본 표시 목록을 구성하는 단위로 그패릭을 표시할수 있고, 자식도 포함할수 있는 Sprite 가 만들어 지게 된다.
6. 타임라인이 추가 되어 MovieClip 이 완성 된다.  

Object 는 무한한 공간이지만 속성이 없습니다.
MovieClip 은 무한한 공간은 아니지만 속성이 많습니다. ( 상속을 통한 속성 추가 )
이제 이러한 것들이 어떻게 사용되는 가를 보겠습니다.  

- Document Class 로의 진화 

CS 3 들어 와서 가장 큰 변화의 하나는 Document Class 로 정의 되는 fla 파일의 main 클래스 부분 입니다. Document class 는 그 자체로 fla 의 타임라인이라고 생각하시면 됩니다. fla 파일의 라이브러리 및 stage 에 있는 모든 객체들의 접근이 가능하고, 타임라인에서 조정했던것과 마찬가지로 객체들을 바로 바로 움직일수 있습니다.  


main 이라 써 있는 저 부분에 지정을 하여 사용합니다. (위의 M 자를 m 으로 바꾸세요;; ) 그리고 stage 위에 무비 클립을 만들고 이름을 지정해 보세요. 여기서는 circle_mc 로 하겠습니다. 이제 main class 파일을 만듬니다. File - > New -> ActionScript File  기본 문법이기 따라서 타이핑 하세요. 

// main.as

 
  1. package {
  2.        
  3.         import flash.display.MovieClip;
  4.        
  5.         public class main extends MovieClip
  6.         {
  7.  
  8.                 private var text:Number;
  9.              
  10.                 public function main():void
  11.                 {
  12.                         trace(circle_mc);
  13.                        
  14.                 }
  15.                
  16.         }
  17.        
  18. }
  19.  

 그리고 main.as 와 fla 파일을 같은 폴더에 저장합니다. 실행해 보세요.
// output
[object MovieClip]  

접근이 되나요?
main.as 에 대해 설명 하면 class 는 생성자와 class 인스턴스 그리고 인스턴스 함수로 이루어 짐니다.

위에서

  1.   public function main():void
  2.                 {
  3.                         trace(circle_mc);
  4.                        
  5.                 }

이 부분이 생성자 Class 가 생성되어 질때 실행 되는 부분입니다. 여기에서는 fla 파일이 실행 되자 바자 이 함수가 호출되어 실행 되어 집니다.  

 private var text:Number;  

이 부분이 Class 인스턴스를 선언하는 부분입니다. 걍 쓰일 변수를 여기에 선언한다고 생각하면 됩니다. 이제 circle_mc 에 간단한 마우스 이벤트를 추가해 보겠습니다. 

 
  1. package {
  2.        
  3.         import flash.display.MovieClip;
  4.         import flash.events.MouseEvent;
  5.        
  6.         public class main extends MovieClip
  7.         {
  8.                
  9.                 public function main():void
  10.                 {
  11.                         trace(circle_mc);
  12.                        
  13.                         circle_mc.addEventListener(MouseEvent.MOUSE_OVER, fcircleOver);
  14.                        
  15.                 }
  16.                 private function fcircleOver(e:MouseEvent):void
  17.                 {
  18.                         trace("마우스 오버");
  19.                        
  20.                 }
  21.                
  22.         }
  23.        
  24. }
  25.  

바뀐점은 import flash.events.MouseEvent; 입니다. fla 와 다르게 class 파일에서는 내장함수를 직접 불러 올수 없습니다 .( 참고로 fla 에서도 자주 쓰는 class 만 fla 파일 만들때 불러와 지는 것으로 보입니다 ) 그래서 import 문으로 그 class 를 불러 오는 것이지요. 멀 불러 오는지 어떻게 아느냐? 저 같은 경우는 F1 의 예제를 참고해서 import 합니다. 

잘 되나요??  

구지 어려운 개념인 Document class 로 작업을 하자고 한건, frame 액션으로 막코딩을 하다 보면 잘못된 습관이 들수도 있다는 생각이 들어서 입니다. 저도 frame 액션으로 시작해서 막코딩에서 Document 로 넘어 올때 편한 frame 액션만 찾다 보니 점점 코드가 엉망이 되더군요. 위에 있는 기본 뼈대만 잘 알아 놓으신다면 frame 액션 보다 휠씬더 효율 적이라는 것을 금방 느끼실수 있을것 입니다. frame 액션보다 class 액션이 좋은 몇가지만 말씀 드리자면, 

1. 유지 보수가 쉽다.

2. 코드가 알아 보기 쉽다.

3. 객체 지향 프로그래밍으로 발전 하기 위해서는 꼭 필요한 요소 이다.  

입니다. 갑자기 어려워 져서 당황하는 분들이 많이 있으실것 같습니다. 어렵다고 포기 하지 마시고, 천천히 따라해 보세요. 잘 안되는 부분은 바로 질문 올려 주시고요.
그럼 4강에서 했던 예제 파일을 Document class 형식으로 바꿔보는 것으로 이번 강을 마치겠습니다.

 

 
  1. package {
  2.  
  3.         import flash.display.MovieClip;
  4.         import flash.events.MouseEvent;
  5.         import fl.transitions.easing.*;
  6.         import fl.transitions.Tween;
  7.  
  8.  
  9.         public class main extends MovieClip {
  10.  
  11.                 public function main():void {
  12.  
  13.                         for (var i:int = 0; i < 50; i++) {
  14.                                 var cir:Circle = new Circle();
  15.                                 cir.x = Math.random() * 550;
  16.                                 cir.y = Math.random() * 400;
  17.                                 addChild(cir);
  18.                         }
  19.                         addEventListener(MouseEvent.MOUSE_OVER, mouseOverhandler);
  20.  
  21.  
  22.                 }
  23.                 function mouseOverhandler(event:MouseEvent):void {
  24.                         var targetX = Math.random() * 550;
  25.                         var targetY = Math.random() * 400;
  26.                         new Tween(event.target,"x",Strong.easeOut,event.target.x,targetX, 30,false);
  27.                         new Tween(event.target,"y",Strong.easeOut,event.target.y,targetY, 30,false);
  28.  
  29.  
  30.                 }
  31.         }
  32. }

 한번 해 읽어 보기 : 객체 지향 프로그래밍 , 상속 개념
과제는 자신이 지금까지 frame 액션으로 작성하시던 예제 하나를 Document class 형식으로 바꿔서 제출 하셨으면 합니다.   

수고 하셨습니다. 다음강에는 개념보다는 실습으로 이뤄지도록 하겠습니다. ( 개념이 어렵네요;;; )



Posted by Flash 동강
동강의AS3.0 강좌2008.12.11 00:53

지난 강에서 DisplayObject 의 개념에 대해 잠깐 언급하였습니다. 그때 클래스 다이어 그램은 기억이 나시는지요? ( 4강참고) 그 다이어 그램과 같이 Flash 에 존재 하는 모든 객체속성( class ) 들은 상속에 상속을 거쳐서 자신의 속성을 만들게 됩니다.  

예를 들어 F1 을 눌러 봅시다.

 

 

MovieClip

패         키지 :loadClassListFrame('class-list.html')" href="file:///C:/Documents%20and%20Settings/All%20Users/Application%20Data/Adobe/Flash%20CS3/en/Configuration/HelpPanel/Help/ActionScriptLangRefV3/flash/display/package-detail.html">flash.display
클래스 public dynamic class MovieClip
상속 MovieClip  Sprite  DisplayObjectContainer  InteractiveObject  DisplayObject  EventDispatcher  Object

모든 클래스의 최상위인 Object 에서 DisplayObject Sprite 를 거쳐서 MovieClip 이 만들어 짐니다. 이게 바로 상속관계지요

그러면 1) 상속되면 머가 좋은거냐??  2) 왜 상속 되는 거냐??  

1) 상속되면 하위 클래스에서 상위 클래스의 속성을 그대로 가져다 쓸수 있기 때문에 속성을 재 정의할 필요가 없습니다.

단적인 예를들면 MovieClip 은 Sprite 를 상속 받는데 이 Sprite 속성은 F1 을 보시면 알겠지만 MovieClip 에서 타임라인이 없는 Class 라고 보시면 됩니다. 따라서 MovieClip 에서 사용가능한 gotoAndPlay, gotoAndStop 속성을 사용할수가 없습니다.  

2) 왜 상속되는거냐? class 에 대해 확실하게 이해 하고 있지는 않지만, 제 의견은 이렇습니다. 있던 속성을 갔다 쓰면 되지 또 만들 필요가 있는가? 라는 생각입니다. 자세한건 객체 지향 프로그램 관련 서적을 참고 하세요.  

위와 같이 우리가 가장 많이 쓰고 있는 MovieClip 은 이렇게 만들어 지는 것입니다. 상속에 개념은 여기 까지 하고 이제 DisplayObject 와 DisplayObejectContainer 개념을 적용해 보겠습니다.

우선 fla action 창에
trace(root, stage); 
를 찍어 봅시다.
// output
[object MainTimeline] [object Stage]

그리고
var mc:MovieClip = new MovieClip();
trace(mc); 
// output
[object MovieClip] 

여기서 말하는 stage 는 위에서 output 으로 나온것과 같이 object Stage 타입의 하나의 객체 입니다.
보이는 화면이라고 해서 객체가 아닌것이 아니라 그 화면 자체도 객체인 것입니다.
단적인 예를 들어 지구 = stage , 사람 = MovieClip 이라 볼수 있습니다.


위와 같은 계층도로 되어 있습니다. 복잡하니깐 여기에선 Stage 와 Main 부분만 보도록 하겠습니다. 

trace(stage.root);
trace(this.parent);
trace(stage.getChildAt(0));

trace(stage.getChildAt(0).root);
trace(stage.getChildAt(0).parent);

(getChildAt 은 (안) 안에 있는 숫자의 뎁스로 접근하여 그 뎁스에 있는 객체를 반환 합니다. 

// output

[object Stage]
[object Stage]
[object MainTimeline]
[object MainTimeline]
[object Stage] 

parent 는 객체.parent  ==> 객체의 부모에 접근한다는 말 입니다. 여기서 유심이 볼 부분은 빨간색 입니다. stage 에 0 뎁스에 있는 것은 MainTimeline 이다. stage 가 시작 부터 가지고 있는 객체 이지요 ( 그냥 첫 화면에서 보는 타임 라인 이라고 생각하시면 됩니다 ) 이렇게 stage 는 담을 공간을 마련해 주고, 우리는 그 위에 무비클립을 생성하여 사용하는 것이지요. 어려운 개념이니 어렵다고 대충 넘어 가지 마시고 찬찬히 trace 찍어 보시기 바람니다.

 

자 이제 stage 에 마우스 클릭으로 무비 클립을 만들어 circle_mc 를 만들어 봅시다.
action 창에는 ( 앞으로 action 이라고만 쓰겠습니다 )  

removeChild(circle_mc);
trace(circle_mc); 

짠! 어디로 갔을까요??  화면에서는 사라졌지만 아직도 trace 문에서는 찍히고 있는 것을 알수 있습니다. 이 말은 뭘 의미하는 것일까요?

화면에서 사라졌다고 해서 메모리에서도 지워진 건 아님니다.
장난 하냐 ? 그럼 어떻게 지워야 다 지워지는 거냐?   

removeChild(circle_mc);
trace(circle_mc);
circle_mc = null;
trace(circle_mc);  

// output
[object MovieClip]
null  

null 값을 넣어 줘야 지워 지게 됩니다. ( 어렵게 말하면 플레시에는 가비지 콜렉션이라는 쓰레기 값들을 ( 메모리에서 필요하지 않은 부분 ) 을 수집하는 장치가 있습니다. 그 수집 장치의 수집되는 후보가 되는 것이지요 ) 이 개념은 단순 코딩할때는 그냥 지나치는 부분 이지만 Loader class 나 URLLoader

로 파일을 불러 들일 때는 광장히 중요하게 작용하는 부분입니다. 예를 들어 Loader 로 이미지를 주기적으로 10개씩 로드 한다고 생각하면 removeChild 와 null 값으로 이미 지나간 이미지를 지워주지 않는다면 메모리는 점점 쌓이게 되어 컴퓨터 다운!!! 의 결과를 볼수 있으실 것입니다.  

지워주는건 이제 어떻게 하는지 알았고, 같은 무비 클립을 어떻게 동적으로 생성 할거냐? 가 문제 인데 2.0 에서는 duplicateMovieClip 나 attachMovie 을 사용하였지만, 3.0 으로 오면서 모두 사라졌습니다. 대신에 좀더 강력한 세부적으로 작용하는 addChild 나왔습니다.
우선 아까 소스에서

removeChild(circle_mc);
trace(circle_mc);
addChild(circle_mc); 

다시 원이 나타남니다. 그럼  


removeChild(circle_mc);
trace(circle_mc);
circle_mc = null;
addChild(circle_mc);
// output
[object MovieClip]
TypeError: Error #2007: 매개 변수 child은(는) null이 아니어야 합니다.
 at flash.display::DisplayObjectContainer/addChild()
 at Untitled_fla::MainTimeline/frame1()

이미 참조 할수 없게 되어 버렸다는 에러가 나오네요.


addChild removeChild 를 알았다고 해서 동적 생성을 할수 있는건 아님니다. 이제 부터 중요한 라이브러리에 있는 무비클립을 Linkage 하는 절차에 대해 알아 보겠습니다. 우선 아까 것에 이어서 circle_mc 를 stage 에서 지워 버림니다. 그리고 라이브러리에 등록되어 있는 무비클립 위에서 마우스 우클릭을 합니다.

Linkage 에 Export for Actionscript 를 클릭하면 아래와 같이 바뀌게 됩니다. Class 명에는 자신이 지정하고 싶은 이름을 쓰면 됨니다 여기서는 Circle 로 하겠습니다.



이제 준비가 끝났습니다. 이제 addChild 해 볼까요?

var cir:Circle = new Circle();       // 방금전 Circle 이라는 Class 를 생성하였습니다. 이제 그

addChild(cir);                                 클래스를 이용하는 것이지요.  

짠! 붙었습니다. 부모인 stage 에 자식인 cir 을 addChild 했습니다. stage.addChild(cir); 도 같은
의미 입니다. (stage 상에서만 )

변수를 생성하는 방법은

var 이름:클래스명 = new 클래스명();  

본래 검은색으로 써있는 클래스명은 인터페이스 명이라고 해야 되는게 맞지만 그냥 넘어 가겠습니다.( 인터 페이스는 아주 나중에...)  

이제 이걸 이용하여 좀더 재미난걸 만들어 보겠습니다.   

 
  1. import fl.transitions.easing.*;
  2. import fl.transitions.Tween;
  3.  
  4. for(var i:int = 0; i < 50; i++)
  5. {
  6.         var cir:Circle = new Circle();
  7.         cir.x = Math.random() * 550;
  8.         cir.y = Math.random() * 400;
  9.         addChild(cir);
  10. }
  11.  
  12. addEventListener(MouseEvent.MOUSE_OVER, mouseOverhandler);
  13.  
  14. function mouseOverhandler(event:MouseEvent):void
  15. {
  16.         var targetX = Math.random() * 550;
  17.         var targetY = Math.random() * 400;
  18.         new Tween(event.target,"x",Strong.easeOut,event.target.x,targetX, 30,false);
  19.         new Tween(event.target,"y",Strong.easeOut,event.target.y,targetY, 30,false);
  20.        
  21.        
  22. }

만들어 보시면 알겠지만 여기서 Tween 클래스의 치명적인 버그가 존재(?) 한다는 걸 알수 있습니다.
움직이다 멈춰 버리지요..ㅋㅋㅋ 그래서 ENTER_FRAME 을 돌리던가 google Tweener 를 쓰곤 한담니다. 한번 영역 밖으로 나가지 않게 소스를 수정해 보세요.
Math.random() 함수는 뒤에 오는 인자 값으로 랜덤한 값을 반환해 줍니다.
예)
Math.random() * 10; 
0~ 10 까지 숫자중 하나는 반환해 줌.  

이제 클래스 개념이 본격적으로 시작 되었슴니다. 다음 강 부터는 Frame 액션에서 벗어나 class 액션으로의 업그래이드를 해 보겠습니다.  

역시나 잘못된 점이나 질문들을 거침없는 댓글 부탁드리고요.



Posted by Flash 동강
동강의AS3.0 강좌2008.12.11 00:45

자 오랜만에 공부를 시작하겠습니다. 이것 저것 참고하면서 쓰니 덩달아 잘 이해가 안되었던 부분까지 이해가 되니 기분이 좋습니다. ㅎㅎ 정작 보는 사람은 이해 못하고 있는데 나만이해 되는건 아닌지;;;; ;후덜덜 지난 시간에 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

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


Posted by Flash 동강
동강의AS3.0 강좌2008.12.11 00:37

1, 2 강에서 Event 중 마우스 이벤트와 ENTERFRAME 이벤트에 대해 잠깐 훑어 보았습니다. 이 두가지 이벤트는 Flash 에서 가장 많이 쓰이는 이벤트에 불과 하고요( 하지만 굉장히 중요한 이벤트들 입니다 ) 상상하지 못할 별에 별 신기한 이벤트 들이 Actionscript 3.0 에 존재 하고 있고, 사용자는 단지 이벤트의 전달 구조만 이해 한다면 손 쉽게 사용할수 있습니다.  

시작에 앞서 사람들이 말하는 "F1 형님" 에 대해 알아 보겠습니다. F1 형님이란, Flash 에서 제공하는 도움말입니다. Actionscript 에서 제공하는 거의 모든 클래스를 포함하고 설명하고 예제로 사용법을 알려 주는 아주 편안한 도구 입니다.  

사용법은 그냥 F1 키를 누르면 도움말 기본이 뜨고 위에 있는 검색 창에 모르는 클래스나 함수를 써주게 되면 도움말에 들어 있는 파일중에서 그 단어가 포함된 링크들을 찾아 줍니다. ( 실제로 이 도움말은 html 파일로 되어 있습니다 )  



이건 단순한 사용법이고 좀더 효율적으로 해당 클래스를 찾으려면 아래 그림과 같이 문자열을 마우스로 드레그 하고 F1 을 누르면 해당 클래스나 메소드로 바로 이동하게 됩니다. ( 아래 그림에서는 MouseEvent ) 처음 시작할때 부터 F1 습관을 들여 놓는 것이, 실력이 쭉쭉쭉 향상 되는 지름길 입니다. 영어가 부담스러우신 분들은 CS3 한글판을 설치 하시던가,

  http://cafe.naver.com/flashactionscript/9310 

이글을 참고 하세요.

1. Event 이용하기

지금까지 배웠던 3 가지 이벤트로 간단한 크기 변환 버튼을 만들어 보겠습니다. 우선 Stage 에 자신이 원하는 버튼의 모양을 3개를 만들어 주세요. ( 이름을 : bu_mc1, bu_mc2, bu_mc3 이라 하겠습니다.


이름을 입력 하고 레이어를 추가한 후에 action 을 추가 하겠습니다. 

  1. bu_mc1.addEventListener(MouseEvent.MOUSE_OVER, Overhandler);
  2. bu_mc2.addEventListener(MouseEvent.MOUSE_OVER, Overhandler);
  3. bu_mc3.addEventListener(MouseEvent.MOUSE_OVER, Overhandler);
  4. bu_mc1.addEventListener(MouseEvent.MOUSE_OUT, Outhandler);
  5. bu_mc2.addEventListener(MouseEvent.MOUSE_OUT, Outhandler);
  6. bu_mc3.addEventListener(MouseEvent.MOUSE_OUT, Outhandler);
  7.  
  8. function Overhandler(event:MouseEvent):void
  9. {
  10.         trace("오버");
  11.  
  12. }
  13. function Outhandler(event:MouseEvent):void
  14. {
  15.         trace("아웃");
  16.  
  17. }

다 타이핑 하기 지겨우시지요? for문을 이용해서 간략화 하겠습니다.

  1. for(var i:int= 1; i < 4; i++)
  2. {
  3.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OVER, Overhandler);        
    // bu_mc1 를 [] 를 통해 표현하는방법
  4.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OUT, Outhandler);      
    // addEventListener 사이에 .() 이없다는것 주의
  5.  
  6.                                                                                                                    
  7. }
  8.  
  9. function Overhandler(event:MouseEvent):void
  10. {
  11.  
  12.  trace("오버");
  13. }
  14. function Outhandler(event:MouseEvent):void
  15. {
  16.  trace("아웃");
  17.  
  18. }

같은 기능을 수행 하지만 보기에 더 깔끔합니다. 그런데 6개의 Event 에 대해 작용하는 함수를 왜 두개 밖에 않만들었을까요? Actionscript 의 EventListener 는 함수를 이어 주는 역할만 하는게 아니라 이벤트가 발생한 객체와 이벤트를 전달할 객체 그리고 이벤트 자체에서 포함하고 있는 정보 들도 전달해 주는 기능을 합니다.

  1. event.target
  2.  
  3. function Overhandler(event:MouseEvent):void
  4. {
  5.    trace(event.target.name);
  6. }
  7. function Outhandler(event:MouseEvent):void
  8. {
  9.    traceevent.target.name);
  10.  
  11. }

어떤 결과가 나올까요???? 직접 해 보시기 바랍니다. 위와 같이 event 는 정보 덩어리 입니다. ( 위에서는 무비 클립의 name 속성을 이용했습니다 ) name 속성 뿐만 아니라 event.target.x , event.target.width, event.target.alpha 등등.. 전달되는 객체가 가지고 있는 ( 여기서 전달 되는 객체는 bu_mc 들이고, bu_mc 들은 MovieClip 으로 정의 했다는 거 기억 하시지요? ) 속성들을 알아 볼수 있습니다. ( 엄격하게 따지면 달라지는 경우도 있지만 여기에서는 그냥 넘어 가겠습니다.) 소스를 보다 보면 event.target 이 아니라 event.currentTarget 으로 전달 받는 경우가 있는데, 잠깐 언급하고 지나가겠습니다.

2. event.target , event.currentTarget 

 target <- 이벤트를 쏜놈 입니다. 보통은 EventDispatcher 이며 EventDispatcher를 상속받은 클래스. IEventDispatcher를 구현한 클래스만이 event.target 이 될 수 있습니다. currentTarget 은 보통은 화면에 출력되는 객체 입니다. DO와 DOC는 트리구조이죠. 간다한 예를 들어... 나무가 있습니다. 나무의 뿌리(target) 부분에 링겔(이벤트리스너)을 꼽습니다. 최초 뿌리 부분에서의 약물이 잎사귀 까지 가는 단계를 캡쳐 단계라 합니다. 약물이 잎사귀(타겟)에 도달한 후 다시 (약물을 전달한)수액은 뿌리로 돌아갑니다. 이것은 버블링 단계라 합니다. currentTarget 은 현재 (약물을 전달하는)수액이 어느지점에 있는가를 나타냅니다. - 퍼옴 

한마디로 target 은 이벤트를 발생 시킨 객체고 currentTarget 은 이벤트가 발생하는 객체 입니다. 따라서 target 과 currentTarget 이 같은 경우도 있고 달라지는 경우도 있습니다. 두가지를 잘 구분해서 써야 원하는 코딩이 이루어 질수 있습니다. ( 저도 확실하게 이해 하고 있지 않은 부분이라 더 깊게 들어 가는건 조금 공부를 더 한후에 하겠습니다.. ㅜㅡ;; 곧 수정하겠습니다. (2008-12-11)  

또 지겨운 이론을 이렇게 줄줄줄 늘어 놓았네요... 다시 돌아 와서 ..위와 같은 원리로 함수는 두개만 있어도 상관이 없다는 말을 하고 싶었습니다..   

변수를 추가 해서 제일 상단에 처음 width 값과 height 값을 저장합니다.
var ori_W = bu_mc1.width
var ori_H = bu_mc1.height           
// bu_mc 들은 모두 같은 크기 이기 때문에 임의로 bu_mc1 의 값을 저장 
 

그리고 변화 시키고 싶은 target 값을 지정하겠습니다.
var targetX = 120;
var targetY = 120; 
  1. var ori_W = bu_mc1.width
  2.  
  3. var ori_H = bu_mc1.height            // bu_mc 들은 모두 같은 크기 이기 때문에 임의로 bu_mc1 의 값을 저장
  4.  
  5.  
  6.  
  7. var targetW = 120;
  8.  
  9. var targetH = 120;
  10.  
  11.  
  12.  
  13. for(var i:int= 1; i < 4; i++)
  14. {
  15.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OVER, Overhandler);         // bu_mc1 를 [] 를 통해 표현하는방법
  16.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OUT, Outhandler);       // addEventListener 사이에
  17.  
  18.                                                                                                                     .() 이없다는것 주의
  19. }
  20.  
  21. function Overhandler(event:MouseEvent):void
  22. {
  23.  
  24.      event.target.width = targetW;
  25.      event.target.height = targetH;
  26.  }
  27. function Outhandler(event:MouseEvent):void
  28. {
  29.    event.target.width = ori_W;
  30.      event.target.height = ori_H;
  31.  
  32.  
  33. }
    실행! 생각한 대로의 결과 인가요?
  1. 그럼 여기에 부드러운 크기 변화를 위한 ENTER_FRAME 이벤트를 적용해 보겠습니다. fpt 는 36으로 조절
    var ori_W = bu_mc1.width
  2. var ori_H = bu_mc1.height            // bu_mc 들은 모두 같은 크기 이기 때문에 임의로 bu_mc1 의 값을 저장
  3. var targetW = 120;
  4. var targetH = 120;
  5. for(var i:int= 1; i < 4; i++)
  6. {
  7.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OVER, Overhandler);  
  8.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OUT, Outhandler);    
  9.                                                                                                      
  10. }
  11.  
  12. function Overhandler(event:MouseEvent):void
  13. {
  14.  
  15.    event.target.addEventListener(Event.ENTER_FRAME, enterframehandler);    
  16.    
  17. }
  18. function Outhandler(event:MouseEvent):void
  19. {
  20.    event.target.removeEventListener(Event.ENTER_FRAME, enterframehandler);    
  21.    
  22. }
  23. function enterframehandler(event:Event):void
  24. {
  25.  if(targetW > event.target.width){        // targetW 에서 정한 크기보다 작을때 까지 +3 씩 해 준다.
  26.   event.target.width += 3;                    
  27.   event.target.height += 3;
  28.  }
  29.  else                                              // 그 크기가 되면 이벤트 삭제
  30.   event.target.removeEventListener(Event.ENTER_FRAME, enterframehandler);
  31.  
  32.  
  33. }

아놔...  왜 크게만 되고 작게는 안되요?


  1. var ori_W = bu_mc1.width
  2. var ori_H = bu_mc1.height            // bu_mc 들은 모두 같은 크기 이기 때문에 임의로 bu_mc1 의 값을 저장
  3. var targetW = 120;
  4. var targetH = 120;
  5. for(var i:int= 1; i < 4; i++)
  6. {
  7.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OVER, Overhandler);  
  8.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OUT, Outhandler);    
  9.                                                                                                      
  10. }
  11.  
  12. function Overhandler(event:MouseEvent):void
  13. {
  14.  
  15.  event.target.addEventListener(Event.ENTER_FRAME, enterframehandler);    
  16.    
  17. }
  18. function Outhandler(event:MouseEvent):void
  19. {
  20.    event.target.addEventListener(Event.ENTER_FRAME, enterframehandler2);    
  21.    event.target.removeEventListener(Event.ENTER_FRAME, enterframehandler);    
  22.  
  23.    
  24. }
  25. function enterframehandler(event:Event):void
  26. {
  27.  if(targetW > event.target.width){
  28.   event.target.width += 3;
  29.   event.target.height += 3;
  30.  }
  31.  else
  32.   event.target.removeEventListener(Event.ENTER_FRAME, enterframehandler);
  33.  
  34.  
  35. }
  36. function enterframehandler2(event:Event):void
  37. {
  38.  if(ori_W < event.target.width){
  39.   event.target.width -= 3;
  40.   event.target.height -= 3;
  41.  }
  42.  else
  43.   event.target.removeEventListener(Event.ENTER_FRAME, enterframehandler2);
  44.  
  45.  
  46. }


코드가 점점 길어 짐니다.. 으악!!! 어떻게 코드를 줄일수 있을까요? if 문을 사용해 봅시다.

  1. var ori_W = bu_mc1.width
  2. var ori_H = bu_mc1.height            // bu_mc 들은 모두 같은 크기 이기 때문에 임의로 bu_mc1 의 값을 저장
  3. var targetW = 120;
  4. var targetH = 120;
  5. var bo:Boolean = false;
  6. for(var i:int= 1; i < 4; i++)
  7. {
  8.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OVER, Overhandler);  
  9.  this["bu_mc"+i].addEventListener(MouseEvent.MOUSE_OUT, Outhandler);    
  10.                                                                                                      
  11. }
  12.  
  13. function Overhandler(event:MouseEvent):void
  14. {
  15.  bo = true;
  16.  event.target.addEventListener(Event.ENTER_FRAME, enterframehandler);    
  17.    
  18. }
  19. function Outhandler(event:MouseEvent):void
  20. {
  21.   bo = false;
  22.  event.target.addEventListener(Event.ENTER_FRAME, enterframehandler);    
  23.  
  24. }
  25. function enterframehandler(event:Event):void
  26. {
  27.  if(bo){
  28.   if(targetW > event.target.width){
  29.    event.target.width += 3;
  30.    event.target.height += 3;
  31.   }
  32.   else
  33.   {
  34.    event.target.removeEventListener(Event.ENTER_FRAME, enterframehandler);
  35.    bo = false;
  36.   }
  37.  }
  38.  else
  39.  {
  40.   if(ori_W < event.target.width){
  41.    event.target.width -= 3;
  42.    event.target.height -= 3;
  43.   }
  44.   else{
  45.    event.target.removeEventListener(Event.ENTER_FRAME, enterframehandler);
  46.    bo = true;
  47.   }
  48.  }
  49.  
  50. }


bo 값을 이용해 ture, false 를 조절해서 enterframehandler 를 하나로 줄였습니다. 어렵다고요?
제가 봐도 어렵습니다. 최종 코드를 하나하나 타이핑 해 보시고, 이 ENTERFRAME 과 MouseEvent 와의 이벤트 전달 관계를 잘 이해해야 뒤에 나오는 더 어려운 이벤트들의 관계를 이해 할수 있을꺼라 생각이 됩니다. 우리의 생각을 컴퓨에서 전달하기 위해서는 한글을 이해를 못하는 멍청한 컴퓨터를 배려 해서 10101111111001 로 전달해 줘야 되는데 그 10101111101의 중심에는 if 문이 있습니다. 잘 활용하면 명검이 될수도 있고 잘 활용못한다면 무수히 많은 에러로 인해 프로그램을 망가뜨릴수 있으니 잘 이해 하고 넘어 가세요. 

버튼 크기 바꾸는데 왜이리 복잡하냐!!!!!!!!! 라고 말하시는 분들을 위해

 위의 방법을 쓴 것은 ENTERFRAME 의 이해를 위해서 사용한 것이고, actionscript 에는 알아서 계산해 주는 Tween 이라는 클래스가 있습니다. 위의 방법은 강력한 Tween 클래스를 사용하기 전의 연습단계이고,, Tween클래스는 좀 후에 다루겠습니다. 궁금하신 분들은 Tween 클래스를 F1 에서 찾아 보는것도 좋을것 같습니다.  

ps : 위와 같이 enterframe 을 하나로 사용하면 문제가 발생합니다. 왜 발생하는 것일까요?  
       생각해 봅시다.

 

 문제 수정전 swf 파일
 

 

Posted by Flash 동강