Actionscript3.02008.12.11 11:44

Actionscript 3.0 에서의 사운드 작업 

ActionScript 3.0을 사용하여 사운드를 재생할 경우 다음 작업을 수행할 수 있습니다.

  • 특정 시작 위치에서 사운드 재생
  • 사운드를 일시 정지하고 나중에 같은 위치에서 다시 재생 시작
  • 사운드 재생이 끝나는 정확한 시간 알아보기
  • 사운드의 재생 진행률 추적
  • 사운드 재생 중에 볼륨 변경 및 패닝

위의 기능은 Sound 클래스로만 이룰 수 있는게 아니라 SoundChannel 이나 SoundMixer SoundTransform 클래스를 이용해야 가능합니다.  

기본적으로 Sound 클래스의 재생과 정지는 다음과 같습니다.

 

// 재생

var snd:Sound = new Sound(new URLRequest("bigSound.mp3"));
var channel:SoundChannel = snd.play();

//정지

var pausePosition:int = channel.position;
channel.stop();

 

//특정 위치에서의 사운드 시작

channel = snd.play(pausePosition);

 

// mp3 파일의 로드 처리시 기본 사용.

//재생 진행률을 표시하는 데 Event.ENTER_FRAME 이벤트를 시간 메커니즘으로 사용합니다. 그리고 현재 위치 값을 사운드 데이터의 전체 길이로 나누어 계산되는 재생 백분율을 정기적으로 보고합니다.

 

import flash.events.Event;
import flash.media.Sound;
import flash.net.URLRequest;

var snd:Sound = new Sound();
var req:URLRequest = new
    URLRequest("http://av.adobe.com/podcast/csbu_dev_podcast_epi_2.mp3");
snd.load(req);

var channel:SoundChannel;
channel = snd.play();
addEventListener(Event.ENTER_FRAME, onEnterFrame);
snd.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete);

function onEnterFrame(event:Event):void
{
    var estimatedLength:int =
        Math.ceil(snd.length / (snd.bytesLoaded / snd.bytesTotal));
    var playbackPercent:uint =
        Math.round(100 * (channel.position / estimatedLength));
    trace("Sound playback is " + playbackPercent + "% complete.");
}

function onPlaybackComplete(event:Event)
{
    trace("The sound has finished playing.");
    removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}

 사운드를 스트리밍 중 중단했을시 발생하는 문제

스트리밍되는 사운드 즉, 재생하는 동안 계속 로드되는 사운드의 경우 재생 프로세스에 이상 현상이 발생하기도 합니다. 스트리밍 사운드를 재생 중인 SoundChannel 인스턴스에서 응용 프로그램이 SoundChannel.stop() 메서드를 호출하면 한 프레임에 대한 사운드 재생이 중지되고 다음 프레임에서 사운드를 처음부터 다시 재생합니다. 이러한 현상이 나타나는 이유는 사운드 로드 프로세스가 아직 진행 중이기 때문입니다. 스트리밍 사운드의 로드와 재생을 모두 중단하려면 Sound.close() 메서드를 호출합니다. 

역시 고려 되야 하는 사운드 로드시 보안문제

사운드 파일의 원본 도메인은 내용 샌드박스의 보안 제한 사항을 정의합니다. 일반적으로 사운드 파일을 로드하는 응용 프로그램 또는 객체의 SWF 파일과 동일한 도메인 또는 폴더에 사운드 파일이 있으면 응용 프로그램 또는 객체는 해당 사운드 파일에 액세스할 수 있습니다. 응용 프로그램과는 다른 도메인에서 사운드가 제공되는 경우에도 크로스 도메인 정책 파일을 사용하여 내용 샌드박스에서 사운드를 가져올 수 있습니다.

응용 프로그램은 checkPolicyFile 속성을 사용하여 SoundLoaderContext 객체를 Sound.load() 메서드에 매개 변수로 전달할 수 있습니다. checkPolicyFile 속성을 true로 설정하면 Flash Player는 사운드가 로드된 서버에서 크로스 도메인 정책 파일을 찾습니다. 크로스 도메인 정책 파일이 존재하고 로드하는 SWF 파일의 도메인에 액세스 권한이 부여되면 SWF 파일은 사운드 파일을 로드하고 Sound 객체의 id3 속성에 액세스한 다음 로드된 사운드에 대한 SoundMixer.computeSpectrum() 메서드를 호출합니다.

소유자 샌드박스는 사운드의 로컬 재생을 제어합니다. 사운드 재생을 시작하는 응용 프로그램 또는 객체가 소유자 샌드박스를 정의합니다.

다음 조건에 맞는 경우 SoundMixer.stopAll() 메서드는 현재 재생 중인 모든 SoundChannel 객체의 사운드를 중지합니다.

  • 동일한 소유자 샌드박스 내의 객체에 의해 시작된 사운드
  • SoundMixer.stopAll() 메서드를 호출하는 응용 프로그램 또는 객체의 도메인에 대한 액세스를 허용하는 크로스 도메인 정책 파일을 가진 소스에서 제공되는 사운드

SoundMixer.stopAll() 메서드가 모든 재생 사운드를 실제로 중지하는지 알아보기 위해 응용 프로그램이 SoundMixer.areSoundsInaccessible() 메서드를 호출할 수 있습니다. 해당 메서드가 true 값을 반환하면 재생 중인 일부 사운드는 현재 소유자 샌드박스의 제어 범위를 벗어나므로 SoundMixer.stopAll() 메서드에 의해 중지되지 않습니다.

또한 SoundMixer.stopAll() 메서드는 외부 파일로부터 로드된 모든 사운드에 대해 재생 헤드가 계속 진행되지 않도록 중지합니다. 하지만 Flash 제작 도구를 사용하여 FLA 파일에 포함된 사운드 및 타임라인 내 프레임에 연결된 사운드는애니메이션이 새 프레임으로 이동하면 다시 재생되기 시작합니다.  

스피커 마다의 패닝 제어 

SoundChannel 객체의 팬 속성은 재생 중에 왼쪽 및 오른쪽 채널 각각에 다른 볼륨 수준을 지정하는 데 사용될 수 있습니다. 팬 속성은 -1 ~ 1 범위의 값을 가질 수 있습니다. 여기서 -1은 오른쪽 채널 음을 소거한 상태에서 왼쪽 채널을 최고 볼륨으로 재생한다는 의미이며, 1은 왼쪽 채널 음을 소거한 상태에서 오른쪽 채널을 최고 볼륨으로 재생한다는 의미입니다. -1과 1 사이의 숫자 값은 왼쪽과 오른쪽 채널 값에 대한 비례 값을 설정하며, 0은 양쪽 채널이 균형 있는 중간 볼륨 수준으로 재생된다는 의미입니다. 

 // Enterframe 을 이용하여 스피커의 양쪽 볼륨을 왔다 갔다 하는 코드 입니다.
import flash.events.Event;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.media.SoundMixer;
import flash.net.URLRequest;

var snd:Sound = new Sound();         
var req:URLRequest = new URLRequest("bigSound.mp3");
snd.load(req);

var panCounter:Number = 0;

var trans:SoundTransform;
trans = new SoundTransform(1, 0);
var channel:SoundChannel = snd.play(0, 1, trans);
channel.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete);

addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(event:Event):void
{
    trans.pan = Math.sin(panCounter);
    channel.soundTransform = trans; // 또는 SoundMixer.soundTransform = trans;
    panCounter += 0.05;
}

function onPlaybackComplete(event:Event):void
{
    removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}
 본 내용은 Flash CS3 설명서를 정리한 내용 입니다.

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 동강