세계의끝과 플래시 원더랜드 » 무비클립 http://ufx.kr/blog Flash + ActionScript & Design Fri, 27 Jan 2012 21:51:23 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 AS3.0 클래스 구조의 여러가지 상황에서 부모, 자식 객체의 참조 방법 http://ufx.kr/blog/404 http://ufx.kr/blog/404#comments Mon, 29 Mar 2010 09:35:02 +0000 세계의끝 http://ufx.kr/blog/?p=404 fla 파일의 프레임에 코드를 잔뜩 늘어놓았던 시절에는, 모든 함수와 변수의 스코프가 동일하므로 참조하는 방법에 대한 고민을 거의 하지 않아도 좋았습니다. 말하자면 fla 프레임의 코드는 하나의 클래스이면서, 생성자 함수외에는 존재하지 않는 클래스라고 볼 수 있을겁니다.

그러나 클래스를 이용하여 객체를 생성하는 경우에는 그렇게 단순하게만 돌아가지는 않습니다. 필연적으로, 원하지 않아도 부모 객체와 자식 객체를 생성하게 되는데, 몇 가지 규칙을 알고 있어야만 올바른 객체간 통신을 할 수 있게 됩니다.

이 내용은 AS2.0을 다루던 초보 개발자들이 AS3.0에 와서 가장 먼저 부딪히는 부분이며, 가장 많이 헤메는 부분이기도 합니다. 이제까지 MovieClip 이나 Sprite 객체를 만들어 마우스 클릭 이벤트만 걸고 노는 것에만 익숙했던 분들은 이 포스트를 정독하시면 많은 것을 얻으실 수 있을겁니다. 그런 즉슨 이 포스트는 AS3.0 에 막 입문한 초보분들을 위한 포스트 입니다.

아래에 설명한 방법들은 객체간 통신을 하기 위해 사용하는 여러가지 방법들 입니다. 물론 이 외에도 다른 방법이 있을 수 있습니다만, 가장 사용빈도가 높고 반드시 알아야 하는 몇 가지 방법을 소개하겠습니다.

A. 부모 객체가 자식 객체를 참조

객체간 관계에서 가장 흔한 상황이 되겠습니다. 부모 객체는 다수의 자식 객체를 가질 수 있고, 자식 객체에 public 으로 선언된 변수나 함수에 대해서는 자식 객체의 객체이름을 통하여 참조할 수 있다는것을 모두들 잘 알고 계실겁니다. 코드로 보면 아래와 같죠.
아래는 부모 객체를 생성한 부모 클래스의 코드 입니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13

package
{
	import flash.display.Sprite;
 
	public class ParentClass extends Sprite
	{
		public function ParentClass()
		{
			var _childInstance:ChildClass = new ChildClass();
			addChild( _childInstance );
			_childInstance.doSomething();
		}
	}
}

아래는 자식 객체를 생성한 자식 클래스의 코드 입니다.

0
1
2
3
4
5
6
7
8
9
10
11

package
{
	import flash.display.Sprite;
 
	public class ChildClass extends Sprite
	{
		public function doSomething():void
		{
			trace( "하위 클래스 : do something in ChildClass !!" );
		}
	}
}

B. 자식 객체가 부모 객체를 참조 – 첫 번째 방법

자, 그럼 거꾸로 자식 객체가 부모 객체에 있는 함수나 변수를 참조하려면 어떻게 하면 될까요? 자식 객체에서 parent 키워드를 사용하면 자신을 addChild 한 부모에게 접근할 수 있습니다만, DisplayObject 상속구조상의 메서드, 속성만 사용 가능할뿐 부모 객체에 정의된 것을 사용할 수는 없습니다.
이것의 논리적 원인을 따져보자면 이렇습니다. 우리가 부모, 자식 객체를 맺어주는데 사용한 메서드는 addChild() 입니다. addChild() 메서드는 Sprite 클래스가 바로 윗 단계에서 상속한 DisplayObjectContainer 클래스의 메서드죠. 아래의 레퍼런스 스샷에서 보시는 바와 같이 parent 를 사용해도 반환되어 나오는 것은 DisplayObjectContainer 입니다.

DisplayObjectContainer 의 읽기 전용 속성인 parent. 반환되어 나오는 것도 DisplayObjectContainer.

다시말해, DisplayObject 상속 체인 구조[01] 에서 부모와 자식 객체간의 결합은 DisplayObjectContainer 가 담당하고 있다는 것이죠… 라는 내용은 당연스러운 사실이지만, 무심코 사용한 parent 역시 DisplayObjectContainer 형(type)을 반환 하므로, DisplayObjectContainer 를 상속한 Sprite 도, 그 Sprite 를 상속한 개별 클래스(ParentClass) 역시 DisplayObjectContainer 까지의 메서드, 속성만 사용할 수 있습니다.[02]
약간 어려운가요? 논리적 원인을 따지자니 오히려 어려워진 감이 있는데, 어쨌건 ParentClass 의 메서드나 속성을 사용하기 위해서는 ParentClass로 형 변환을 해줘야 한다는 것만 이해하고 있다면 오케이 입니다.

아래는 부모 객체를 만드는데 사용한 클래스 입니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package
{
	import flash.display.Sprite;
 
	public class ParentClass extends Sprite
	{
		public function ParentClass()
		{
			var childInstance:ChildClass = new ChildClass();
			addChild( childInstance );
		}
 
		public function doSomething():void
		{
			trace( "상위 클래스 : do something in ParentClass !!" );
		}
	}
}

아래는 자식 객체를 만드는데 사용한 클래스 입니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	public class ChildClass extends Sprite
	{
		public function ChildClass()
		{
			// 클릭을 위한 RoundRect
			this.graphics.beginFill( 0x336699 );
			this.graphics.drawRoundRect( 10, 10, 100, 100, 60 );
 
			this.buttonMode = true;
			this.addEventListener( MouseEvent.CLICK, clickHandler );
		}
 
		private function clickHandler( $e:MouseEvent ):void
		{
			trace( this.parent ); // 출력 : [object ParentClass]
 
			// this.parent 는 DisplayObject 구조의 메서드나 속성만을 사용할 수 있음.
			// 상위 클래스 형(type)으로 형변환(casting:캐스팅) 하면 public 멤버를 사용할 수 있음
			ParentClass( this.parent ).doSomething();
 
			// 아래는 컴파일 에러
			// this.parent.doSomething();
		}
	}
}

trace( this.parent ) 출력 결과에서 보는것과 같이 parent 는 확실히 부모 객체 자체 까지는 참조 가능하지만 parent 가 가리키고 있는 것은 부모 객체의 DisplayObjectContainer 형태이기 때문에 부모 객체의 doSomething() 을 호출하게 되면 컴파일 에러가 발생합니다.
그래서 위와 같이 ParentClass로 형변환을 해야 부모 객체의 메서드를 사용할 수가 있습니다.

또한 형변환은 아래와 같이 할 수도 있습니다.

0
1

var parentInstance:ParentClass = this.parent as ParentClass;
parentInstance.doSomething();

C. 자식 객체가 부모 객체를 참조 – 두 번째 방법

자식 객체에서 부모 객체의 public 메서드를 사용하는 방법은 B 케이스와 같이 형변환 하는 방법 외에도 한가지 더 있습니다. 부모객체가 자식객체에게 부모 객체 자신을 참조할 수 있는 참조(레퍼런스)를 넘겨주는 방법입니다. 아래와 같이 말이죠.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

package
{
	import flash.display.Sprite;
 
	public class ParentClass extends Sprite
	{
		public function ParentClass()
		{
			var childInstance:ChildClass = new ChildClass();
			addChild( childInstance );
 
			// 이렇게 자식 객체에게 this(부모 자신의 객체 레퍼런스)를 넘겨줌
			childInstance.updateParent( this );
		}
 
		public function doSomething():void
		{
			trace( "상위 클래스 : do something in ParentClass !!" );
		}
	}
}
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	public class ChildClass extends Sprite
	{
		private var _parent:ParentClass;
 
		public function ChildClass()
		{
			// 클릭을 위한 RoundRect
			this.graphics.beginFill( 0x336699 );
			this.graphics.drawRoundRect( 10, 10, 100, 100, 60 );
 
			this.buttonMode = true;
			this.addEventListener( MouseEvent.CLICK, clickHandler );
		}
 
		/**
		 * 부모 객체의 레퍼런스를 저장함 (부모 객체에서 호출)
		 * @param	부모객체를 인자로 받아 전역변수에 저장
		 */
		public function updateParent( $parent:ParentClass ):void
		{
			this._parent = $parent;
		}
 
		private function clickHandler( $e:MouseEvent ):void
		{
			this._parent.doSomething();
		}
	}
}

마치…부모가 통장과 도장과 비밀번호를 자식에게 알려주는 것과 같은 느낌이네요.

D. 자식 객체가 부모 객체에게 이벤트를 보냄

위의 B, C 케이스를 이벤트로 통신을 하는 형태로 바꿔보면 어떨까요? 흔히 사용하는 MouseEvent 도 이에 해당하지만, MouseEvent 같이 사용자의 인터랙션에 의한 이벤트는, 이벤트를 발생하는 객체(dispatcher:디스패쳐)가 하는일이 없는것처럼 보이므로 아래와 같이 일부러 디스패쳐를 사용하는 상황을 구성해보았습니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

package
{
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class ParentClass extends Sprite
	{
		public function ParentClass()
		{
			var childInstance:ChildClass = new ChildClass();
			addChild( childInstance );
			childInstance.addEventListener( Event.COMPLETE, animationComplete );
		}
 
		private function animationComplete( $e:Event ):void
		{
			trace( "부모 객체에서 자식 객체에 걸어놓은 Event.COMPLETE 를 캐치함 !!" );
		}
	}
}

자식 객체를 만든 클래스 입니다. 클릭을 하게 되면 객체 자신에게 Event.ENTER_FRAME 을 걸게 되고 매 프레임마다 enterFrameHandler() 핸들러를 실행하게 됩니다. 자세한 내용은 주석을 참고하세요.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	public class ChildClass extends Sprite
	{
		public function ChildClass()
		{
			// 클릭을 위한 RoundRect
			this.graphics.beginFill( 0x336699 );
			this.graphics.drawRoundRect( 10, 10, 100, 100, 60 );
 
			this.buttonMode = true;
			this.addEventListener( MouseEvent.CLICK, clickHandler );
		}
 
		private function clickHandler( $e:MouseEvent ):void
		{
			this.addEventListener( Event.ENTER_FRAME, enterFrameHandler );
		}
 
		private function enterFrameHandler( $e:Event ):void
		{
			// x 가 200이 될 때까지 감속운동 (easeOut)
			this.x += ( 200 - this.x ) * 0.1;
 
			// 200이 되면 엔터프레임을 중단하고 Event.COMPLETE 를 dispatchEvent() 함
			if ( Math.round( this.x ) >= 200 )
			{
				this.removeEventListener( Event.ENTER_FRAME, enterFrameHandler );
				this.dispatchEvent( new Event( Event.COMPLETE ) );
			}
		}
	}
}

실제 작업에서는 이런 종류의 코드를 작성해야 하는 경우가 많을 겁니다. 자식 객체에서 발생한 어떤 상황을 모두 실행한 후, 그 결과를 부모에게 알리고 싶은거죠.

E. 부모 객체가 자식 객체에게 이벤트를 보냄

부모 객체가 자식 객체에게 이벤트를 보낼 경우도 있겠죠? 부모 객체 입장에서는 자식 객체의 public 멤버들은 모두 참조가 가능하므로 자식 객체의 메서드나 변수를 직접 참조하여 데이터를 전달하거나 메서드를 호출할수도 있습니다. 바로 A케이스와 같은거죠.
그러나 A 케이스의 경우 부모 객체가 자식객체의 public 멤버들이 뭔지 알고 있어야 합니다. 물론 Flash(Flex) Builder 나 FlashDevelop, 또는 FDT, 그리고 Flash CS5 같이 코드 힌트를 지원하는 에디터에서는 자식객체가 가지고 있는 public 멤버들을 볼 수 있지만, 여기서 말하는 것은 그런 기능적인 부분을 이야기 하는 것이 아니라 객체지향 프로그래밍에서의 설계 원칙의 문제입니다. 예를 들어보죠.

만약 부모 객체와 자식 객체가 서로 분리되야할 상황이 생겼습니다. A나 B 케이스는 부모 자식객체간에 서로 직접 참조하고 있으므로, 이 두 객체를 만든 클래스가 분리되는 순간 서로를 참조하고 있던 부분은 모두 컴파일 에러가 발생합니다. 이런 것을 보고 두 객체간 강한 결합을 했다고 표현하죠.
한편, D나 E 케이스는 이벤트를 통해 이 결합을 다소 약하게 만들 수 있습니다. 데이터를 이벤트를 통해 전달하고 이벤트를 보냈다고 어떤 행동을 강제하지 않습니다. 이벤트를 보내는 입장에서는 보내는 걸로 역할을 다 한 것이고 받는 입장에서는 받긴 받았지만 이것을 실행할지 말지는 자신이 결정할 수 있기 때문입니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	public class ParentClass extends Sprite
	{
		private var _roundRect:Sprite = new Sprite;
		private var _childInstance:ChildClass = new ChildClass;
 
		public function ParentClass()
		{
			// 클릭을 위한 RoundRect
			_roundRect.graphics.beginFill( 0x996633 );
			_roundRect.graphics.drawRoundRect( 10, 10, 100, 100, 60 );
 
			_roundRect.buttonMode = true;
			_roundRect.addEventListener( MouseEvent.CLICK, clickHandler );
 
			addChild( _roundRect );
 
			addChild( _childInstance );
		}
 
		private function clickHandler( $e:MouseEvent ):void
		{
			// _roundRect 의 MouseEvent.CLICK 를 캐치하면
			// _childInstance 객체에 MouseEvent.ROLL_OUT 이벤트를 보냄
			_childInstance.dispatchEvent( new MouseEvent( MouseEvent.ROLL_OUT ) );
		}
	}
}

부모 객체에서 사용자의 인터랙션에 의해 발생한 MouseEvent.CLICK과는 다른 이벤트를 고르느라 자식 객체에는 MouseEvent.ROLL_OUT 를 보내는 다소 엉뚱한 예제 입니다만, 이벤트는 이렇게도 할 수 있다는것을 보여주는 예시라고 볼 수도 있겠습니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	public class ChildClass extends Sprite
	{
		public function ChildClass()
		{
			// ChildClass 객체의 존재를 확인하기 위한 RoundRect
			this.graphics.beginFill( 0x336699 );
			this.graphics.drawRoundRect( 120, 10, 100, 100, 60 );
 
			this.buttonMode = true;
			this.addEventListener( MouseEvent.ROLL_OUT, rollOutHandler );
		}
 
		private function rollOutHandler( $e:MouseEvent ):void
		{
			trace( "부모 객체가 자식 객체에게 dispatchEvent() 한 MouseEvent.ROLL_OUT 을 캐치함 !!" );
		}
	}
}

부모 객체(왼쪽에 그려진 RoundRect 그림)를 클릭하면 자식 객체에게 MouseEvent.ROLL_OUT 이벤트를 발생시킬수가 있습니다. 또한 자식객체에는 addEventListener( MouseEvent.ROLL_OUT ) 가 걸려 있으므로 자식 객체를 표시한 오른쪽 RoundRect 그림에 마우스를 올렸다가 밖으로 빼도 동일한 이벤트가 발생하게 됩니다.

F. 이벤트 발생위치를 바꿈

E 케이스의 코드는 부모객체가 자식객체에게[03] dispatchEvent() 메서드를 사용한 것이지만, 반대로 부모객체 내부에서 dispatchEvent() 를 하고 자식객체에서 이것을 addEventListener() 할 수도 있습니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	public class ParentClass extends Sprite
	{
		private var _roundRect:Sprite = new Sprite;
		private var _childInstance:ChildClass = new ChildClass;
 
		public function ParentClass()
		{
			// 클릭을 위한 RoundRect
			_roundRect.graphics.beginFill( 0x996633 );
			_roundRect.graphics.drawRoundRect( 10, 10, 100, 100, 60 );
 
			_roundRect.buttonMode = true;
			_roundRect.addEventListener( MouseEvent.CLICK, clickHandler );
 
			addChild( _roundRect );
 
			addChild( _childInstance );
		}
 
		private function clickHandler( $e:MouseEvent ):void
		{
			// 이번에는 부모 객체인 this 에 dispatchEvent() 를 함
			// _childInstance 객체에서 addEventListener() 하고 있건 말건 무조건 이벤트가 발생
			this.dispatchEvent( new Event( Event.SELECT ) );
		}
	}
}

아래는 자식 객체를 만드는 클래스 입니다. 자세한 내용은 주석을 참고하세요.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

package
{
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class ChildClass extends Sprite
	{
		public function ChildClass()
		{
			// ChildClass 객체의 존재를 확인하기 위한 RoundRect
			this.graphics.beginFill( 0x336699 );
			this.graphics.drawRoundRect( 120, 10, 100, 100, 60 );
 
			// 이 객체가 addChild() 되면 핸들러 실행
			// 즉, 어떤 객체의 자식 객체가 된 상황
			this.addEventListener( Event.ADDED, addedHandler );
		}
 
		private function addedHandler( $e:Event ):void
		{
			// 어떤 부모 객체인지는 모르겠지만 부모 객체에 addEventListener() 를 걸어놓음
			// addEventListener() 는 ParentClass 형(type)이 아니더라도 사용할 수 있으므로 캐스팅이 필요 없음
			this.parent.addEventListener( Event.SELECT, selectHandler );
		}
 
		private function selectHandler( $e:Event ):void
		{
			trace( "부모 객체의 이벤트를 자식 객체에서 캐치함 !!" );
		}
	}
}

또는 반대로, 자식 객체에서 this.addEventListener() 하지 않고, 부모객체에서 이벤트가 일어나도록this.parent.dispatchEvent() 한 후, 부모객체가 this.addEventListener() 까지 하게 할 수도 있습니다. 이벤트가 발생(dispatchEvent)하는 위치만 다를뿐 부모, 자식 객체간은 서로를 자유롭게 참조할 수 있으므로 addEventListener() 메서드는 어디나 걸어 놓을 수 있는 것이죠.

이렇게 부모, 자식 객체간의 여러가지 상황에서 서로를 참조하는 방법에 대해 알아보았습니다. 어떤 방법이 절대적으로 옳지 않으므로 상황에 따라 적절하게 사용하면 됩니다. 또한, 어떤 방법이 절대적으로 옳은건 아니지만, 모든 방법을 제대로 이해하고 있어야 합니다. 그 만큼 객체 지향 프로그래밍에서 가장 기초적이고 중요한 내용입니다.

이해가 잘 안되는 케이스가 있다면, 빈 fla 파일에 ParentClass 를 도큐먼트 클래스로 설정하고 컴파일을 해 보세요.

* * *

만약 이벤트와 함께 데이터를 보내야 할 필요가 있을 경우에는 커스텀 이벤트를 사용하면 됩니다. 커스텀 이벤트는 이 포스트의 범위를 벗어나는 내용이므로 “이벤트에 뭔가 같이 보내보자 – 커스텀 이벤트 만들고 사용해보기” 를 읽어보시기 바랍니다.

또한, 객체간 더욱 약한 결합을 구현하기 위한 별도의 방법으로는 옵저버 디자인 패턴을 이용하는 방법이 있습니다. “Observer Pattern 옵저버 패턴 – 이벤트 디스패처를 이용해 구현” 을 참고하세요.

이 포스트는 부모, 자식 객체간 참조 방법을 다룬 글이었습니다. 객체가 아닌 상위 클래스와 하위 클래스의 참조 방법에 대한 글 “AS3.0 클래스의 상속(extends)구조에서 상위, 하위 클래스의 메서드 호출방법” 도 초보 개발자 여러분들에게 많은 도움이 될 것입니다.

  1. Object – EventDispatcher – DisplayObject – InteractiveObject – DisplayObjectContainer – Sprite
  2. Object, EventDispatcher, DisplayObject, InteractiveObject, DisplayObjectContainer 의 메서드, 속성만 사용할 수 있고, Sprite 이하의 메서드, 속성은 사용할 수 없습니다.
  3. 즉, 자식객체의 입장에서 보면 this.dispatchEvent() 된 것입니다.
]]> http://ufx.kr/blog/404/feed 28 도큐먼트 클래스 *.as 파일을 연결하지 않은 fla 파일의 도큐먼트 클래스 이름은? http://ufx.kr/blog/393 http://ufx.kr/blog/393#comments Thu, 25 Feb 2010 04:24:33 +0000 세계의끝 http://ufx.kr/blog/?p=393 작년 7월에 작성한 “AS3.0 로더(Loader)로 불러온 다른 swf 의 클래스 사용하기” 를 보면, ApplicationDomain 클래스의 getDefinition() 메서드를 이용해서 다른 로더를 통해 가지고 온 다른 swf 파일의 클래스를 사용하는 방법을 알아본 바 있습니다.
그런데 이 포스트에 “료”님이, fla 파일의 타임라인에 직접 코딩한 경우에는 어떻게 해야 하느냐고 질문하셨길래 방법을 찾아 보았습니다.

우리가 Fla 에 도큐먼트 클래스를 연결해서 swf 를 만들었을 경우, Main.as 도큐먼트 클래스에서 trace( this ) 를 하면 [object Main] 이 출력 됩니다. “AS3.0 로더(Loader)로 불러온 다른 swf 의 클래스 사용하기” 의 예제 코드를 보면 다른 swf 의 도큐먼트 클래스의 이름을 통해 런타임으로 클래스로 만들고 그것을 객체화 하여 도큐먼트 클래스 내부에 있는 여러가지 자원들을 참조하게 됩니다. 도큐먼트 클래스의 이름이 곧 ApplicationDomain 이 되는 것이죠. 그것은 결국 도큐먼트 클래스의 클래스 이름을 알 수 없다면 getDefinition() 으로는 참조가 불가능하다는 이야기가 됩니다.

그런데 만약 도큐먼트 클래스를 사용하지 않은 fla 파일로 만든 swf 파일이라면 어떻게 되는 걸까요? “료”님의 질문을 받고 저역시 이 부분에서 살짝 당황했습니다. 도큐먼트 클래스 as 파일이 없는데 도큐먼트 클래스의 이름을 어떻게 알아낼 수 있을까 하는 것이었죠.

그런데 결국 추론를 통해 도큐먼트 클래스의 이름을 알아냈습니다.
라이브러리에 클래스 정의를 한 무비클립에도 물리적 as 파일을 연결하지 않으면, 컴파일 과정에서 자동으로 as 파일을 생성한다는것에 힌트를 얻었습니다.

라이브러리의 속성창에서 클래스 이름만 써 넣고 as 파일은 연결하지 않을때 나타나는 경고 다이알로그 박스

위의 다이알로그 박스의 메세지 내용인 즉슨, 클래스가 필요한 객체는 어떠한 형태로든 클래스 파일을 생성한다는 것이죠. 이와 마찬가지로 Flash IDE에서 도큐먼트 클래스 없이 컴파일을 하더라도 어딘가 가상으로 파일을 만들어 낼 거라는 생각이 들었습니다.

이때 빛을 발휘하는 프로그램이 바로 FlashDevelop(이하 FD) 이죠. FD 의 Project 패널은 as 파일과 디렉토리를 네비게이션 하는 1차적 용도를 가지고 있지만, 컴파일된 swf 파일이나 swc 파일의 구조를 분석할 수 있도록 기능도 가지고 있습니다.

FlashDevelop 의 Project 패널

FlaSubSystem.fla 은 도큐먼트 클래스가 없는 fla 파일 입니다. 이 파일로 FlaSubSystem.swf 파일을 컴파일 했습니다. 이 파일의 1프레임에는 간단한 무비클립과 코드 몇줄을 넣어놓았습니다.
Main.as 파일은 FD에서 프로젝트를 생성할때 만든 도큐먼트 클래스 입니다. 이 도큐먼트 클래스로는 GetDefinition.swf 파일을 만들었죠.

그러니까 “AS3.0 로더(Loader)로 불러온 다른 swf 의 클래스 사용하기” 의 내용과 매칭하자면 FlaSubSystem.swf 파일이 SubSystem.swf 이 되는 것입니다.

컴파일된 FlaSubSystem.swf 파일의 왼쪽에 있는 + 기호를 이용해 펼치면 swf 파일 내부에 정의되어 있는 클래스들을 모두 볼 수 있는데요, 보시는 바와 같이 fla 의 파일명에 _fla 라는 문자가 붙고 점 찍은 후에 MainTimeline 이 클래스 화 되어 있는것을 볼 수 있습니다. 1프레임에 코드를 넣게 되면 위와 같이 MainTimeline 이 클래스 화 되고, 프레임에 코드가 없으면 클래스가 생성되지 않습니다.

그러면 Main.as 파일의 코드를 살펴보겠습니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

package
{
	import flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.system.ApplicationDomain; 
 
	public class Main extends Sprite
	{
		private var loader:Loader = new Loader();
		private var request:URLRequest = new URLRequest( "FlaSubSystem.swf" );
 
		public function Main()
		{
			loader.contentLoaderInfo.addEventListener( Event.INIT, completeHandler );
			loader.load( request );
			trace( this )
		}
 
		private function completeHandler( e:Event ):void
		{
			var runtimeClassRef:Class = loader.contentLoaderInfo.applicationDomain.getDefinition( "FlaSubSystem_fla.MainTimeline" ) as Class;
			var displayObj:DisplayObject = new runtimeClassRef(); //addChild 하려면 DisplayObject 로 캐스팅
			addChild( displayObj );
 
			var subSystemObj:Object = displayObj as Object; //메서드를 호출하려면 다시 Object 로 캐스팅
 
			// 아래의 member 들은 모두 fla 파일의 stage 또는 타임라인의 1프레임에 정의한 내용.
			trace( subSystemObj.myInstance ); // stage 에 인스턴스네임 부여한 무비클립 객체. 참조 가능 // 출력 : [object MovieClip]
			trace( subSystemObj.myString ); // 변수에는 접근안됨 // 출력 : null
			trace( subSystemObj.myGetter ); // getter/setter 메서드 접근 가능
			trace( subSystemObj.myFunction() ); // 함수 접근 가능
		}
	}
}

getDefinition() 메서드를 보면 fla 파일의 메인 타임라인 클래스에 접근하기 위해 FlaSubSystem_fla.MainTimeline 라는 문자열을 사용한것을 볼 수 있습니다. 이 ApplicationDomain 을 런타임 클래스 화 하고 객체로 만들어 내는 과정은 동일합니다.

각 요소들에 대한 참조 여부는 코드 내부의 주석에 적었으므로 그것으로 설명을 대신합니다.

타임라인 코드에 var 키워드를 이용해 생성한 변수에는 접근이 되지 않는데, 차후에 방법을 알게되면 추가하겠습니다. 그러나 getter/setter 가 가능하므로 굳이 필요하다면 변수 대신 사용할 수 있을것 같습니다.

]]> http://ufx.kr/blog/393/feed 7 AS3.0 getDefinitionByName() 메서드를 이용한 라이브러리 자원 이용 – AS2.0 attachMovie 대응 http://ufx.kr/blog/269 http://ufx.kr/blog/269#comments Wed, 24 Jun 2009 17:03:53 +0000 세계의끝 http://ufx.kr/blog/?p=269 blue_swf_iconAS2.0 시절, 프레임에서 신나게 코딩할때 라이브러리 패널에 링키지 네임을 준 무비클립을 attachMovie() 메서드를 이용해 스테이지에 불러와서 자유롭게 사용할 수 있었습니다.

AS3.0 에 들어와서는 라이브러리 패널의 링키지는 사용할 수 없지만 클래스 네임을 부여하여 별도의 클래스 파일을 만들지 않고도[01] new ClassName() 을 하여 마찬가지의 기능을 수행할 수 있습니다.

그런데 new ClassName() 에서 ClassName 부분은 정확한 클래스 이름이 와야 하고, this["str"] 나 _root["str"] 같이 AS2.0에서 흔히 사용했던 레퍼런스 참조 방법을 new 연산자 다음에는 사용할 수 없으므로 AS3.0에서 new ClassName() 으로는 아래와 같은 AS2.0의 for 문을 이용한 동적인 attachMovie() 는 사용할수가 없습니다.[02]

0
1
2
3
4
5
6

//AS2.0의 동적 attachMovie 예시
var arr:Array = new Array( "메뉴1", "메뉴2", "메뉴3" )
var len:Number = arr.length;
for ( i = 0; i < len; i++ )
{
	 attachMovie( "mc", "mc"+i, i )
}

그럼 어떻게 해야할까요?

먼저 라이브러리 패널에 있는 무비클립 심볼의 속성창을 열고 아래와 같이 클래스 이름을 지정해 줍니다.
lib_properties
클래스 이름은 for 문의 i 값으로 호출할 수 있게끔 숫자를 붙여 순차적으로 지정합니다. 그리고,

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//AS3.0에서 라이브러리의 클래스 이름을 이용하여 무비클립을 동적으로 사용
for ( var i:uint = 0; i < 5; i++ )
{
	var ClassReference:Class = getDefinitionByName( "mc" + i ) as Class;
	var displayObj:DisplayObject = new ClassReference();
 
	displayObj.addEventListener( MouseEvent.CLICK, clickHandler );
	displayObj.name = "mc" + i;
	displayObj.x = i * 51;
 
	addChild( displayObj );
}
 
function clickHandler( e:MouseEvent ):void
{
	trace( e.currentTarget.name )
}

이렇게 getDefinitionByName() 메서드를 이용해 Class의 레퍼런스로 캐스팅하고 new 연산자로 클래스를 호출하여 DisplayObject 객체에 담을 수 있습니다.
클래스가 다형성을 가지지 않고 이렇게 클래스의 이름을 이용하여 호출하는 주객이 전도가 된듯한 사용법은 객체지향 프로그래밍과는 약간 거리가 있는것 같긴 합니다만, 이런 사용법을 원하는 분들이 있고, 어도비에서도 이런 메서드를 제공하고 있으니 필요하다면 사용할 수 있는 거겠죠.

만약 buttonMode 등의 Sprite 속성을 사용해야 할 경우 DisplayObject 에는 해당 속성이 없으므로 아래와 같이 Sprite 로 캐스팅을 해야 합니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

for ( var i:uint = 0; i < 5; i++ )
{
	var ClassReference:Class = getDefinitionByName( "mc" + i ) as Class;
	var displayObj:DisplayObject = new ClassReference();
 
	//buttonMode 등의 Sprite 속성을 사용하려면 한번 더 캐스팅
	var instance:Sprite = displayObj as Sprite;
	instance.buttonMode = true;
 
	instance.addEventListener( MouseEvent.CLICK, clickHandler );
	instance.name = "mc" + i;
	instance.x = i * 51;
 
	addChild( instance );
}
 
function clickHandler( e:MouseEvent ):void
{
	trace( e.currentTarget.name )
}

관련 레퍼런스

  getDefinitionByName 예제 다운로드 - fla (Flash CS4에서 CS3 버전으로 저장, Flash 8 이하에서는 열리지 않습니다) , swf

* Loader 를 통해 로드한 다른 swf 의 라이브러리 자원 또는 클래스를 사용하는 방법은 “AS3.0 로더(Loader)로 불러온 다른 swf 의 클래스 사용하기” 를 읽어보세요.

  1. 정확하게는 컴파일 타임에 자동으로 클래스 파일이 생성됩니다. 그러나 개발자가 이에 관여할 필요는 없습니다.
  2. new this["mc"+i]() 이런식으로 될리가 없다는거죠.
]]> http://ufx.kr/blog/269/feed 4 AS2.0과 AS3.0의 무비클립 부모자식 관계 차이점 이해 http://ufx.kr/blog/128 http://ufx.kr/blog/128#comments Thu, 30 Apr 2009 06:19:14 +0000 세계의끝 http://ufx.kr/blog/?p=128 AS2.0의 무비클립의 포함 관계에서는 대상을 참조하기 위해서 . (dot:점) 을 찍고 계속 참조할 수 있습니다.
실제로 무비클립의 참조에서는 부모 무비클립 안에 자식 무비클립이 들어가 있죠.

그런데 AS3.0의 addChild 는 메소드명이 그래서 그런지 AS2.0처럼 실제 부모안으로 자식을 집어넣는다고 이해하는 경우가 종종 있는것 같습니다.

가령 아래와 같은 코드가 있을때

0
1
2
3
4

//mc는 스테이지에 놓여져 있는 무비클립
var k:MovieClip = new MovieClip();
mc.addChild( k );
 
trace( mc.k ) // 출력 : undefined

이렇게 참조하려고 할 수 있겠습니다. 그러나 출력 결과에서 보시듯이 undefined 가 나오게 됩니다. 이것은 addChild를 AS2.0의 무비클립의 포함관계, 또는 계층구조로 이해하려고 하는 습관 때문입니다.
아래의 코드를 보시면,

0
1
2
3
4
5
6

var k:MovieClip = new MovieClip();
k.name = "name_k"; // 이렇게 인식하기 좋도록 name 속성을 주고.
mc.addChild( k );
 
trace( mc.getChildByName( "name_k" ) ); //출력 : [object MovieClip]
trace( mc.getChildAt( 1 ).name ); // 출력 : name_k (mc 안에 도형이 하나만 있어서 도형이 index가 0이고 k의 index가 1이 되므로 k를 가리키게 됨.)
trace( k ); // 출력 : [object MovieClip]

이 trace 구문들을 보고 뭔가 무릎을 탁 치고 느끼는게 있다면 AS3.0 앞에 놓인 벽 하나를 넘은 셈이 됩니다.

AS2.0에서의 무비클립의 부모자식 관계와 마찬가지로, AS3.0에서도 드로잉 툴에서 무비클립을 만들어 자식을 포함시켜 나가면 AS2.0과 동일하게 점찍고 참조도 가능합니다. AS3.0에서도 당연히 물리적으로(시각적) 무비클립을 포함하는 관계를 만들수도 있죠.

그러나 addChild 로 엮어진 관계는 그런 포함관계가 아니라 수평적으로 엮인 관계 입니다. 실제 인간세상에 비유하자면 양부모와 양자녀 관계라고 할 수 있을것 같습니다.
즉 물리적으로 부모클립에 들어가는 관계가 아니라 논리적으로 엮인 관계인 것이죠.
위의 코드에서 보듯이 점찍고 호적문의 ( getChildByName ) 를 해서 참조도 가능하고, 직접 k 를 잡고 핸들링도 가능합니다. AS2.0 에 비해 참조 방법이 늘어나서 좀더 수월하다고 느낄 수도 있을 것입니다.

 

이 글은 플생사모의 질문 글에 대한 답변으로 작성되었습니다. ( http://cafe.naver.com/flashdev/37371 )

]]> http://ufx.kr/blog/128/feed 12 AS3.0에서의 인스턴스네임 핸들링 http://ufx.kr/blog/23 http://ufx.kr/blog/23#comments Sun, 26 Apr 2009 15:04:45 +0000 세계의끝 http://ufx.kr/blog/?p=23 instance_name

Flash CS4 의 속성 패널

이 글은 AS2.0에서는 원하는 화면을 제어할 줄 아는 사람이, AS3.0 으로 넘어갈때 겪게되는 문제점 중의 하나인 인스턴스 네임에 대해 다루는 글 입니다.

AS2.0에서는 속성패널에 instance name 을 넣고 나면, 부여한 이름으로 액션 패널에서 모든 속성을 조절할 수 있습니다.  AS3.0 에서도 Flash IDE (흔히 Flash 프로그램 으로 부르는 개발환경)의 scene(한글판 : 장면)에 그림을 그리고, F8 키를 눌러 심볼로 변환 한 후, 속성패널에서 instance name 을 지정해 주면, F9 를 눌러 나오는 액션 패널에서 프레임에 스크립트를 작성하여 동일하게 속성을 변경해 줄 수 있습니다만,  AS3.0을 사용하면서 프레임에 스크립트를 작성하는 경우는 거의 없다고 할 수 있겠죠.

일단 아래의 도큐먼트 클래스를 보시면,

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

package
{
	import flash.display.Sprite;
 
	public class ExampleClass extends Sprite
	{
		public function ExampleClass ()
		{
			var item:Sprite = new Sprite();
			item.graphics.lineStyle(0, 0, 0);
			item.graphics.beginFill(0x000000, 1);
			item.graphics.drawCircle(50, 50, 50);
			item.graphics.endFill();
 
			addChild(item);
 
			trace(item.name); // 출력 : instance1
			item.name = "myname";
			trace(item.name); // 출력 : myname
 
			doAction();
		}
 
		private function doAction():void
		{
			getChildByName("myname").x = 100;
		}
	}
}

도큐먼트 클래스 내부에서 런타임에 item 을 생성한 경우에, AS2.0의 감각으로 보면 Sprite 의 인스턴스 네임이 item 으로 지정된 것 처럼 보이지만, 위의 코드에서 item 은 생성자 안에 있는 지역변수명일뿐, AS2.0의 감각에서 느끼는 무비클립의 인스턴스 네임이 아닙니다.

이렇게 느끼게 되는 가장 큰 이유는 AS2.0 에서 인스턴스 네임을 주는 방식이 속성창에 입력하는 방식 이외에 액션패널에서 아래와 같이 지정할 수 있기 때문입니다.

0
1
2

//스테이지에 무비클립 mc 가 있음
mc._name = "mc2"; // _name 속성을 바꿈
mc2._x; = 0 // 올바르게 작동함

즉, 속성 패널에서 인스턴스 네임을 주는것과, 액션 패널에서 무비클립에 _name 속성을 주는것이 완전히 동일한 행위 입니다.

그러나 AS3.0 에서는 시각적 객체인 Sprite나 MovieClip 을 만들면서 name 속성을 부여해도 AS2.0과 같은 방식으로 핸들링이 불가능 합니다. 그 이유는 AS3.0 도큐먼트 클래스 생성자 안에 있는 trace(item.name); // 출력 : instance1 부분을 통해 알 수 있습니다. AS2.0 이라면 item 이라고 출력되어야 할 텐데, 위에서 보듯이 임의로 자동 설정된 인스턴스네임이 출력됩니다.
AS3.0 에서 인스턴스 네임은, 스테이지에 addChild 되는 순서대로 instance1, instance2 … 이렇게 정해집니다.

인스턴스가 어떤 name 을 가지고 있는지 확실하게 알 수 있거나 특정한 name 속성을 부여한 경우에는 가장 위의 도큐먼트 클래스의 doAction() 함수 내부에서 하는 것처럼,

0

getChildByName("myname").x = 100;

위와 같이 getChildByName() 메서드를 사용하여 인스턴스를 잡아내면 됩니다.

그러나 무비클립등이 동적으로 생성되는 경우에는, for 문 등에서 변수 이름이 지역변수로 돌기 때문에, 무비클립에 특정 인스턴스 네임을 가지도록 할수 없습니다. 다시한번 상기시켜드리지만 AS3.0에서의 인스턴스네임과 name 속성은 완전히 다릅니다. AS3.0 에서의 name 속성은 그냥 이름표 정도로 생각하시는 것이 정신 건강상 좋습니다.

인스턴스가 동적으로 생성되는 경우에는 인스턴스 네임을 알 필요가 없는 방법으로 핸들링 하게 됩니다.

0
1
2
3
4
5
6
7

var instanceArray:Array = new Array()
 
for(var i = 0; i < len; i++)
{
	instanceArray[k] = new Sprite()
}
 
instanceArray[0].x = 100; //첫번째 만들어진 Sprite 위치를 변경

위와 같은 방법으로 인스턴스를 생성함과 동시에 배열에 넣어서 배열원소로 핸들링 하면 됩니다.

]]> http://ufx.kr/blog/23/feed 2 특정위치에 있는 모든 무비클립을 배열로 http://ufx.kr/blog/66 http://ufx.kr/blog/66#comments Fri, 02 Jan 2009 15:58:39 +0000 세계의끝 http://ufx.kr/blog/?p=66 사용빈도가 빈번한 코드라 메모

 

var spriteArray:Array = new Array();
for (var i:int = 0; i < container.numChildren; ++i)
{
	if (container.getChildAt(i) is MovieClip)
	{
		spriteArray.push (container.getChildAt(i));
	}
}
]]> http://ufx.kr/blog/66/feed 2