세계의끝과 플래시 원더랜드 » addEventListener http://ufx.kr/blog Flash + ActionScript & Design Fri, 03 Sep 2010 05:15:04 +0000 http://wordpress.org/?v=2.9.2 en hourly 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 8 도큐먼트 클래스 *.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 5 AS3.0 로더(Loader)로 불러온 다른 swf 의 클래스 사용하기 http://ufx.kr/blog/281 http://ufx.kr/blog/281#comments Sun, 05 Jul 2009 09:43:19 +0000 세계의끝 http://ufx.kr/blog/?p=281 blue_swf_icon이 문제는 AS3.0 의 swf 간 로드 구조를 구성할 때 반드시 한번은 만나게 되는 문제이므로 정리해 둡니다.

Main.swf 에서 Sub.swf 를 Loader 를 이용해 로드한 후에 Main.swf 에서 Sub.swf 의 클래스나 메서드를 사용해야 할 때가 있습니다.

AS2.0 라면 MovieClipLoader 와 loadClip 을 이용하여 로드 완료 이벤트를 확인 한 후 인스턴스네임으로 참조해 들어가면 되지만, AS3.0의 경우에는 그런 방법으로 다른 swf의 클래스를 사용할수 없습니다. 이런 경우 ApplicationDomain 클래스의 getDefinition() 메서드를 이용해 참조해야 합니다.

이 예제에는 3개의 클래스가 사용됩니다. 각 클래스에 대한 설명은 본문과 코드 주석에 포함되어 있습니다.

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

// SubSystem.as 의 내용.
package
{
	import flash.display.Sprite
 
	/*
	 * 이 클래스는 별도로 SubSystem.swf로 컴파일 하여 Main.swf 에서 Loader를 통해 로드하는 대상으로 삼음
	 * 즉, 이 클래스는 SubSystem.swf 의 도큐먼트 클래스 입니다.
	 */
	public class SubSystem extends Sprite
	{
		public function SubSystem()
		{
			trace( "SubSystem !!!" )
		}
 
		public function createItem( $name:String = "" ):Sprite
		{
			var item:Circle = new Circle( $name, 50, 50 );
			addChild( item )
			return item;
		}
	}
}

생성자에서는 제대로 로드가 되었는지 확인하는 용도의 trace 외에는 하는 일이 없고, public 으로 공개된 createItem() 메서드는 Circle 클래스를 new 해주고, 객체를 반환하고 있습니다.

Circle 클래스는 예제용으로 밖에 사용할 일이 없는 궁극의 원그리기 클래스 입니다.

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

// Circle.as 의 내용.
package
{
	import flash.display.Sprite
 
	public class Circle extends Sprite
	{
		private var _name:String;
 
		public function Circle( $name:String = null, $x:int = 0, $y:int = 0, $radius:uint = 50, $color:uint = 0x000000, $alpha:Number = 1 )
		{
			draw( $x, $y, $radius, $color, $alpha )
			this._name = $name
		}
		private function draw( $x:int, $y:int, $radius:uint, $color:uint, $alpha:Number ):Sprite
		{
			var item:Sprite = new Sprite();
			item.graphics.beginFill( $color, $alpha );
			item.graphics.drawCircle( $x, $y, $radius );
 
			addChild( item )
			return item
		}
 
		override public function get name():String { return _name; }
	}
}

SubSystem 클래스에서 Circle 클래스를 따로 import 하지 않았으므로, 이 두개의 클래스는 같은 폴더에 넣어야 동작하겠군요.

다음은 Main 클래스 입니다. 이 파일은 Main.swf 에 사용되는 도큐먼트 클래스 입니다.

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

//Main.as 의 내용.
package
{
	import flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLRequest;
 
	public class Main extends Sprite
	{
		private var loader:Loader = new Loader();
		private var request:URLRequest = new URLRequest( "SubSystem.swf" );
 
		public function Main()
		{
			//Loader는 직접 addEventListener 하지 못하고 contentLoaderInfo 를 통하여야 함
			loader.contentLoaderInfo.addEventListener( Event.COMPLETE, completeHandler );
			loader.load( request );
		}
 
		private function completeHandler( e:Event ):void
		{
			var runtimeClassRef:Class = loader.contentLoaderInfo.applicationDomain.getDefinition( "SubSystem" )  as  Class;
			var displayObj:DisplayObject = new runtimeClassRef(); //addChild 하려면 DisplayObject 로 캐스팅
			addChild( displayObj );
 
			var subSystemObj:Object = displayObj as Object; //메서드를 호출하려면 다시 Object 로 캐스팅
			var item1:Sprite = subSystemObj.createItem( "item1" );
			var item2:Sprite = subSystemObj.createItem( "item2" );
			item2.x = 100;
 
			//로드한 SubSystem.swf 의 자원은 이제 subSystemObj 로 참조하면 됩니다.
			trace( "subSystemObj.numChildren : ", subSystemObj.numChildren );
		}
	}
}

getDefinition() 과는 직접 관련은 없지만, 한가지 짚고 넘어가야할 내용이 있습니다. Loader 의 다운로드 진행상황이나 로드 완료 등의 이벤트를 받고 싶을 경우 Loader 에 contentLoaderInfo 를 통해 addEventListener 를 걸어야 합니다.[01] Loader 에 직접 addEventListener 를 걸고 아무리 기다려본들 이벤트는 발생하지 않습니다.[02]

다시 내용으로 돌아와서, Main.as 는 SubSystem.swf 를 Loader 를 통해 로드하고, 로드 완료된 이벤트 확인한 이후, SubSystem 의 내부 메서드를 호출하여 SubSystem 로 하여금 Circle 객체를 new 로 생성하게 하고 있습니다.

만약 SubSystem.swf 를 통해 얻고 싶은 것이 fla의 라이브러리에 Class 네임으로 정의한[03] 무비클립이라면 getDefinition( “ClassName” ) 과 같이 해당 무비클립의 클래스 네임을 넣어주고 addChild 까지만 해주면 됩니다. 메서드 호출 까지도 필요 하지 않은 경우라면 이렇게 훨씬 더 간단하죠.

참고 : Main.swf 가 AS3.0 이고 SubSystem.swf 가 AS2.0 인 경우 ApplicationDomain 은 사용할 수 없습니다.

관련 레퍼런스 링크
ApplicationDomain 클래스 사용
ActionScript 3.0 언어 및 구성 요소 참조 설명서 : ApplicationDomain

* 다른 swf 가 아닌 하나의 swf에서 fla 라이브러리에 정의한 클래스 이름으로 무비클립을 사용하려면 “AS3.0 getDefinitionByName() 메서드를 이용한 라이브러리 자원 이용 – AS2.0 attachMovie 대응” 을 읽어보세요..

  1. 로더객체.contentLoaderInfo.addEventListener(……)
  2. 로더객체.addEventListener(……) <– (잘못된 사용)
  3. AS2.0의 Linkage 사용하듯
]]> http://ufx.kr/blog/281/feed 8 AS3.0, RESIZE 이벤트를 이용한 풀플래시 stage 무비클립 제어 http://ufx.kr/blog/258 http://ufx.kr/blog/258#comments Mon, 22 Jun 2009 11:06:13 +0000 세계의끝 http://ufx.kr/blog/?p=258 fl_icon브라우저의 전체화면으로 플래시 웹 사이트를 만들고자 하는 디자이너들의 열망은, 아마도 Flash 3.0, 그러니까 지난 세기 말이 될 텐데요, 당시 유고 나카무라의 웹 사이트를 보고 눈이 휘둥그레 졌던 시절부터 쭉 이어졌던거 같습니다.

작년에 AS2.0 에서 onResize 이벤트 리스너를 이용한 풀플래시 무비클립 제어에 대한 포스트를 작성하였습니다. 원래 그 포스트는 플생사모에 올라오는 매번 똑같은 질문에 대한 답변으로 시작되었습니다만, 현재는 이 블로그에서 가장 조회수가 높은 포스트가 되어있죠.

일전에 AS3.0 버전으로도 만들어 달라는 요청을 어떤 분에게 받은 바도 있고, 역시 이런 기능을 원하는 분들은 역시 AS3.0 에 익숙하지 않은 디자이너일 가능성이 높기 때문에, 그런 분들에게 약간이나마 도움이 되고자 이 포스트를 작성하게 되었습니다.

먼저 어떤 모양새인지 살펴보시기 바랍니다. 본문안에 배치하면 브라우져 크기에 따라 swf 의 크기가 달라지지 않으므로 새 창을 띄웁니다. 전체 소스코드는 이 포스트의 가장 하단에 있습니다.

아래 코드는 도큐먼트 클래스 입니다. 다운로드 파일에 fla 파일도 포함되어 있긴 합니다만, 아래의 도큐먼트 클래스를 연결하는 내용 외에는 아무 내용도 없는 텅빈 내용입니다. 스테이지에 올라오는 내용이 간단한 내용이라 모든 그림 그리기는 클래스에서 처리하게 만들었습니다.

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
37
38
39

package
{
	import flash.display.*;
	import flash.events.Event;
 
	public class Main extends Sprite
	{
		private var rect:Sprite = new Rect();
		private var circle1:Sprite = new Circle();
		private var circle2:Sprite = new Circle();
		private var circle3:Sprite = new Circle();
		private var circle4:Sprite = new Circle();
 
		public function Main():void
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
 
			addChild( rect );
			addChild( circle1 );
			addChild( circle2 );
			addChild( circle3 );
			addChild( circle4 );
 
			stage.addEventListener( Event.RESIZE, stageResizeHandler );
 
			stageResizeHandler();//로드시에 초기화 한번
		}
 
		private function stageResizeHandler( $e:Event = null ):void
		{
			trace( "stageWidth :", stage.stageWidth, "/ stageHeight :", stage.stageHeight )
			rect.x = rect.y = 50
			rect.width = stage.stageWidth - 100;
			rect.height = stage.stageHeight - 100;
			circle2.x = circle4.x = stage.stageWidth;
			circle3.y = circle4.y = stage.stageHeight;
		}
	}
}

StageScaleMode.NO_SCALE 부분은 AS2.0 때처럼 문자열로 “noScale” 써도 되지만, 오타에 대한 보장은 해주지 않죠.[01] StageScaleMode.NO_SCALE 과 같이 상수 형태로 사용하면 오타가 있다고 하더라도 컴파일 타임에 오타가 체크 되는 장점이 있습니다.
StageAlign.TOP_LEFT 도 마찬가지로 “LT” 문자열 대신 사용하였습니다.

중앙의 사각형은 Rect 클래스가 그리고, 네 귀퉁이의 원은 Circle 클래스가 그려줍니다.(다운로드한 as 파일 참조) 도큐먼트 클래스에서는 stage 에 올라간 5개의 요소를 addChild 해 주고 stage에 Event.RESIZE 를 걸어 swf 에 크기 변화가 일어날때마다 stageResizeHandler() 메서드를 호출하고 스테이지의 크기 변화에 따라 각 요소들의 위치와 크기를 변경해 줍니다.

위의 도큐먼트 클래스는 그래픽 자원들을 모두 코드에서 생성하였습니다만, 스테이지에 만들어 놓은 무비클립을 제어하는 경우라고 하더라도 stageResizeHandler() 메서드 안에서 무비클립의 인스턴스 네임에 x, y, width, height 등을 조절하면 됩니다.
풀플래시의 화면 제어는 stage.scaleMode = StageScaleMode.NO_SCALE 과,
stage.align = StageAlign.TOP_LEFT 두가지를 설정하고 이해하였다면 그것으로 끝입니다.

AS2.0 에서는 중앙의 사각형의 중심점을 정 중앙에 놓았는데 이번 AS3.0코드에서는 왼쪽 위에 중심점을 놓은 점을 제외하면 AS2.0 의 onResize 와 모두 동일합니다.

html 에서의 주의점.

플래시가 앉혀지는 html 의 object와 embed 태그의 width 와 height 를 모두 100% 로 해줘야 합니다. 즉, 플래시의 크기 자체는 html 상의 상위 요소의 width 와 height 에 따라 꽉 채워지도록 100%로 설정하고, 나머지는 브라우져 크기 변화에 맏기는 겁니다.
한가지 주의할 점은, html 상단에 정의하는 DOCTYPE 이 XHTML 1.0 인 경우에는 스타일 시트의 html과 body 요소까지 height 속성을 100% 으로 설정해야 swf 가 의도된대로 표현됩니다. (DOCTYPE 이 HTML 4.0인 경우에는 div 까지만 height=”100%” 설정해도 동작합니다.)

stage RESIZE 전체 소스코드와 결과 다운로드 (749)
  1. stage_resize_example.fla
  2. stage_resize_example.swf
  3. Main.as
  4. Circle.as
  5. Rect.as
  6. stage_resize_example.html

AS2.0 버전의 풀플래시 화면 제어가 필요한 분은 여기를 클릭하여 이동하세요.

  1. 오타가 나더라도 폭발이 일어나거나 하진 않지만, 원하는 화면이 나오지 않는데다가 그 원인이 오타로 인한 것임을 깨닫게 되기까지 한참 걸릴 가능성이 높습니다.
]]> http://ufx.kr/blog/258/feed 0 Observer Pattern 옵저버 패턴 – 이벤트 디스패처를 이용해 구현 http://ufx.kr/blog/233 http://ufx.kr/blog/233#comments Sun, 07 Jun 2009 19:59:17 +0000 세계의끝 http://ufx.kr/blog/?p=233 bubble지난 옵저버 패턴과 커스텀 이벤트에 대한 포스트에서 AS3.0 의 이벤트 시스템이 옵저버 패턴과 밀접한 관련이 있다고 하였는데요, 이번에는 trace 만 찍지 않고, 실제 액션스크립트로 비주얼 하게 구현을 해 보도록 하겠습니다.

요건은 다음과 같습니다.

  • AS3.0 의 이벤트 디스패처를 이용할 것.
  • 화면에 그래픽 객체가 각자 움직이다가 마우스 클릭을 하면 한 지점으로 모인다.
  • 다시 한번 클릭하면 그래픽 객체들이 다시 각자 움직인다.

옵저버 패턴이므로 등장인물 3인이 필요하겠습니다.

  1. 주제 객체
    이벤트 디스패처 (EventDispatcher) 가 주제 역할을 하게 됩니다. 이벤트 시스템의 중심에서 이벤트를 전파하는 역할을 하고 있죠.
  2. 옵저버 객체
    여기서는 화면에서 움직이는 그래픽 객체가 옵저버 입니다. 옵저버들은 평소에는 다른 기능을 하다가[01] 이벤트가 발생하면 지정된 곳으로 모이게 됩니다.
  3. 인포 객체
    이벤트 디스패처가 옵저버 들에게 전달하는 Event 내부에 같이 실어 보내는 데이터가 인포 객체 입니다.

화면과 기능을 어떻게 구현할 것인가 좀더 구체화 시킬 필요가 있을 것 같습니다.

  • 옵저버 객체들이 움직이는 방식으로는 Timer 를 이용해 2초 주기의 TweenMax 의 베지어 트윈을 이용해 랜덤한 위치로 결정.
  • 주제가 옵저버에게 전달하는 정보로는 MouseEvent.MOUSE_DOWN 이 일어난 mouseX 와 mouseY 좌표값으로하여 그 정보에 따라 옵저버 객체들이 모이도록 한다.
  • 옵저버 객체들이 주제에 등록되고 등록해제 되는 것을 옵저버 객체에 대한 MouseEvent.MOUSE_DOWN 으로 구현한다.
  • 최초 도큐먼트 클래스에서 모두 옵저버 등록을 하고, 옵저버 객체에 MouseEvent.MOUSE_DOWN 이 한번 일어나면 옵저버 리스트에서 빠지고 (동시에 시각적으로 차이를 내기 위해 alpha = 0.5 해줌) 다시한번 MouseEvent.MOUSE_DOWN 이 일어나면 다시 옵저버 리스트로 들어가도록 한다.

그 외에 옵저버와 직접적인 기능과는 관계 없는 내용으로, MouseEvent.ROLL_OVER 가 일어난 객체를 가장 상위로 올리도록 한 후 상하 관계를 쉽게 알 수 있도록 옵저버 객체 중앙에 십자 표시를 하였고, 주제 객체가 정보를 새로 생성했는지 아닌지 시각적으로 구분하기 위해 정보가 생성되면[02] 배경 이미지의 색상을 바꾸는 내용이 추가로 들어갔습니다.

그럼 이제 주제 인터페이스를 보도록 하겠습니다.

0
1
2
3
4
5
6
7
8

package 
{
	public interface ISubject
	{
		function addObserver( $o:IObserver ):void
		function removeObserver( $o:IObserver ):void
		function notifyObserver():void
	}
}

지난번 옵저버 패턴과 완전히 동일합니다.

주제 구상 클래스는 정보의 전달을 이벤트 디스패처가 담당하게 되었으므로 약간 다릅니다.

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

package 
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
 
	public class Subject implements ISubject 
	{
		private var dispatcher:EventDispatcher = new EventDispatcher();
		private var _arrObserver:Array = new Array();
		private var _infoObject:Object;
 
		public function Subject()
		{
 
		}
 
		//ISubject 를 구현 - 옵저버 등록
		public function addObserver( $o:IObserver ):void
		{
			dispatcher.addEventListener( ObserverEvent.NOTIFY, $o.update );
			addObject( $o );
		}
 
		//옵저버에 등록된 대상 객체를 배열에 저장
		private function addObject( $o:IObserver ):void
		{
			arrObserver.push( $o );
		}
 
		//ISubject 를 구현 - 옵저버 제거
		public function removeObserver( $o:IObserver ):void
		{
			dispatcher.removeEventListener( ObserverEvent.NOTIFY, $o.update );
			removeObject( $o );
		}
 
		//옵저버를 제거하면 배열에서 제거
		private function removeObject( $o:IObserver ):void
		{
			var index:int = arrObserver.indexOf( $o, 0 )
			arrObserver.splice( index, 1 )
		}
 
		//ISubject 를 구현 - 이벤트 발생 --> 정보 전달
		public function notifyObserver( ):void
		{
			dispatcher.dispatchEvent( new ObserverEvent( ObserverEvent.NOTIFY, this.infoObject ) )
		}
 
		//도큐먼트 클래스에서 호출할 메서드
		public function setClick( $x:int, $y:int ):void
		{
			makeInfoObject( $x, $y )
			notifyObserver();
		}
 
		//정보를 Object 로 만들어 변수에 저장
		private function makeInfoObject( $x:int, $y:int ):Object
		{
			return _infoObject = { infoX : $x, infoY : $y }
		}
 
		public function get infoObject():Object { return _infoObject; }
 
		public function get arrObserver():Array { return _arrObserver; }
	}
}

EventDispatcher 객체를 생성했고 구상 객체 목록을 관리할 수 있도록 배열을 하나 만들었습니다.
이벤트를 통해 전달할 정보를 저장할 Object 객체도 하나 만들었네요.
ObserverEvent.NOTIFY 가 발생하면 dispatcher가 각각의 옵저버들이 걸어놓은 $o.update 메서드를 실행 하는 것입니다.

디스패처용 커스텀 이벤트 입니다. 커스텀 이벤트에 대한 포스트에서도 있듯이 커스텀 이벤트의 형태는 변수명이나 상수명을 제외하고는 다른 커스텀 이벤트와 동일합니다.

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

package 
{
	import flash.events.Event;
 
	public class ObserverEvent extends Event
	{
		static public const NOTIFY:String = "notify";
		private var _info:Object;
 
		public function ObserverEvent( $type:String, $info:Object, $bubble:Boolean = false, $cancelable:Boolean = false )
		{
			super( $type, $bubble, $cancelable );
			this._info = $info;
		}
 
		override public function clone():Event
		{
			return new CustomEvent( type, _info, bubbles, cancelable );
		}
 
		public function get info():Object
		{
			return _info;
		}
	}
}

옵저버 쪽으로 넘어가 보겠습니다. 인터페이스에는 dispatcher가 호출할 update() 메서드 이외엔 없군요.

0
1
2
3
4
5
6
7

package 
{
	import flash.events.Event;
	public interface IObserver
	{
		function update( $e: Event ):void
	}
}

위의 인터페이스를 구상하는 옵저버 구상 클래스 입니다.

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

package 
{
	import flash.display.Shape;
	import flash.display.Sprite
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.utils.Timer;
	import gs.TweenMax
	import gs.easing.*;
 
	public class Item extends Sprite implements IObserver
	{
		public var txtId:TextField;
		private var _id:uint;
		private var _x:int;
		private var _y:int;
		private var stageWidth:uint;
		private var stageHeight:uint;
		private var timer:Timer = new Timer( 2000, 0 )
 
		private var isInfo:Boolean;
 
		public function Item ( $size:uint = 50 ) 
		{
			var circle:Shape = new Shape()
			circle.graphics.lineStyle( 0, 0, 0 )
			circle.graphics.beginFill( 0x000000, 1 )
			circle.graphics.drawCircle( 0, 0, $size )
			circle.graphics.endFill()
			addChild( circle )
 
			var hLine:Shape = new Shape();
			hLine.graphics.lineStyle( 1, 0xcc3300 );
			hLine.graphics.lineTo( 60, 0 );
			hLine.x = -30;
			addChild( hLine )
 
			var vLine:Shape = new Shape();
			vLine.graphics.lineStyle( 1, 0xcc3300 );
			vLine.graphics.lineTo( 0, 60 );
			vLine.y = -30;
			addChild( vLine )
 
			txtId = new TextField()
			var format:TextFormat = new TextFormat()
			format.font = "Verdana";
			format.color = 0xFFFFFF;
			format.size = 20;
			txtId.defaultTextFormat = format
			txtId.selectable = false;
			txtId.autoSize = "left";
			txtId.backgroundColor = 0x000000;
			addChild(txtId)
 
			this.addEventListener( Event.ADDED_TO_STAGE, initStage );
 
			timer.addEventListener( TimerEvent.TIMER, onTimeHandler )
			timer.start()
		}
 
		//옵저버가 되기위한 구현
		public function update( $e:Event ):void
		{
			var event:ObserverEvent = $e as ObserverEvent;
			this._x = event.info.infoX;
			this._y = event.info.infoY;
			// 정보로 들어온 값이 undefined 인지 아닌지 확인하여 isInfo에 Boolean 으로 저장
			this.isInfo = ( _x && _y ) ? true : false;
		}
 
		private function onTimeHandler( e:TimerEvent = null ):void 
		{
			if ( isInfo )
			{
				concentration()
			}
			else
			{
				deconcentration()
			}
		}
 
		private function initStage( e:Event ):void 
		{
			removeEventListener( Event.ADDED_TO_STAGE, initStage );
			stageWidth = stage.stageWidth;
			stageHeight = stage.stageHeight;
		}
 
		public function set id ( $value:uint ):void 
		{
			_id = $value;
			txtId.text = _id.toString()
		}
 
		public function get id():uint { return _id; }
 
		//Event 의 정보 값으로 모이기
		public function concentration():void
		{
			TweenMax.to( this, 1, { x:_x, y:_y , ease:Quart.easeInOut } );
		}
 
		//Event 정보 값이 undefined 일 경우 랜덤으로 움직이기
		public function deconcentration():void
		{
			TweenMax.to( this, 2, { x:Math.round(Math.random() * stageWidth), y:Math.round(Math.random() * stageHeight), 
					bezier:[ { x: Math.round(Math.random() * stageWidth), y: Math.round(Math.random() * stageHeight) } ], 
					ease:Quart.easeInOut } );
		}
	}
}

구상 클래스의 길이가 약간 길지만 대부분 생성자에서 Shape로 그림을 그리는 부분과, 객체 본연의 할일을 부분[03] 들이고, 옵저버로서의 내용은 인터페이스 메서드인 update() 메서드를 구상하는 내용 뿐 입니다.

그럼 호스트코드(도큐면트 클래스) 에서는 어떻게 주제로 하여금 옵저버들에게 정보를 주게 할까요?

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import gs.TweenLite;
 
	public class Main extends Sprite 
	{
		private var subject:Subject;
		private var isInfo:Boolean = true;
		private var clickedItem:Array = new Array();
		private var bg:Sprite;
 
		public function Main():void
		{
			subject = new Subject()
			createBG();
			createItem();
		}
 
		private function createBG():void
		{
			bg = new Sprite()
			bg.graphics.lineStyle(0, 0, 0)
			bg.graphics.beginFill(0x555555, 1)
			bg.graphics.drawRoundRect( 0, 0, stage.stageWidth, stage.stageHeight, 50, 50 )
			bg.graphics.endFill()
			addChild( bg )
			bg.addEventListener( MouseEvent.MOUSE_DOWN, bgClickHandler)
		}
 
		private function createItem():void
		{
			for ( var i:uint = 0; i < 10; i++ )
			{
				var item:Item = new Item()
				item.id = i;
				item.buttonMode = true;
				item.addEventListener( MouseEvent.MOUSE_DOWN, itemClickHandler );
				item.addEventListener( MouseEvent.MOUSE_OVER, itemRollOverHandler );
				addChild( item );
 
				subject.addObserver( item );
			}
		}
 
		//옵저버 객체에 마우스 이벤트가 일어나면 handleItem() 으로 객체를 보냄
		private function itemClickHandler( e:MouseEvent ):void 
		{
			var target:Item = e.currentTarget as Item
			handleItem( target )
		}
 
		//주제에 있는 옵저버 리스트(배열)을 조회하여 리스트에 있으면 옵저버 등록을 해지 (없으면 옵저버 등록)
		private function handleItem( $item:Item ):void
		{
			var isFind:Boolean;
			for each( var item:Object in subject.arrObserver )
			{
				if ( item === $item )
				{
					subject.removeObserver( $item );
					$item.alpha = 0.5;
					isFind = true;
					break
				}
			}
			if ( !isFind )
			{
				subject.addObserver( $item )
				$item.alpha = 1;
			}
		}
 
		//롤오버된 객체는 가장 위로 올림
		private function itemRollOverHandler( e:MouseEvent ):void 
		{
			setChildIndex( e.currentTarget as Sprite, numChildren - 1 );
		}
 
		//배경을 클릭한 지점을 주제 메서드로 보냄
		private function bgClickHandler( e:MouseEvent ):void
		{
			isInfo = !isInfo;
 
			if ( isInfo )
			{
				subject.setClick( undefined, undefined );
				TweenLite.to( bg, 1, { tint:0x555555 } );
			}
			else
			{
				subject.setClick( mouseX, mouseY );
				TweenLite.to( bg, 1, { tint:0x8D2545 } );
			}
		}
	}
}

각 메서드에 주석을 달아 놓았으니 참고하시면 되겠습니다.
위의 도큐먼트 클래스를 컴파일한 결과입니다.

배경을 한번 클릭하면 이벤트가 발생하고, 다시한번 클릭하면 객체들은 다시 원래의 할일을 합니다.
객체를 클릭하면 옵저버 리스트에서 빠지고, 다시한번 클릭하면 옵저버에 등록됩니다.

이벤트 모델을 이용한 옵저버 패턴은, 옵저버 객체를 임의로 빼거나 추가해도 디스패처로가 다른 옵저버들에게 전달하는 이벤트에는 아무런 문제가 발생하지 않게되죠.[04]

이렇게 디스패처에 의해 발생된 이벤트에 정보를 실어 옵저버 객체에 전달하고 이벤트 리스너에 등록된 함수를 이용해 객체 내부를 업데이트 하여 정보를 사용하는 방법까지 표현하였습니다.

Observer Pattern Dispatcher Event Example 액션스크립트 코드 다운로드 (91)
  1. 화면에서 각자 움직이다가
  2. 즉, 배경에 MouseEvent.MOUSE_DOWN 이 일어나면
  3. 랜덤으로 2초마다 움직이게 하는 일
  4. 객체간 약한 결합 : Loose Coupling
]]> http://ufx.kr/blog/233/feed 3 이벤트에 뭔가 같이 보내보자 – 커스텀 이벤트 만들고 사용해보기 http://ufx.kr/blog/228 http://ufx.kr/blog/228#comments Sun, 07 Jun 2009 04:14:31 +0000 세계의끝 http://ufx.kr/blog/?p=228 sale_imgAS2.0 에서 AS3.0 으로 넘어와 보면 가장 처음 느끼는 것이 “뭐이리 복잡하게 해야 되는 거냐?” 하는 점이겠죠. 버튼에 액션을 넣어 뭔가를 하고 싶은 경우라면 button.onRelease = function() { //하고싶은일 } 이나 심지어 무비클립에 on(release) { //하고싶은일 } 같이 간단한 코드만으로 하고싶은 일을 하던것에 비해서 AS3.0 의 이벤트 리스너 방식은 귀찮기만 해 보입니다.

이 포스트에서는 이벤트 시스템이 2.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

package 
{
	import flash.events.Event;
 
	public class CustomEvent extends Event
	{
		static public const CALL:String = "call";
		private var _data:Object;
 
		public function CustomEvent( type:String, data:Object, bubble:Boolean = false, cancelable:Boolean = false )
		{
			super( type, bubble, cancelable );
			this._data = data;
		}
 
		override public function clone():Event
		{
			return new CustomEvent( type, _data, bubbles, cancelable );
		}
 
		public function get data():Object
		{
			return _data;
		}
	}
}

커스텀 클래스의 모양새는 거의 이런 식입니다. bubble, cancelable 등 몇가지 파라미터들이 있습니다만, 이 포스트에서는 커스텀 클래스를 이용한 데이터 전송만을 다룰 것이므로, 생성자에서 object 를 인자로 받아 변수로 저장하고 있다는 것만 기억하면 되겠습니다.

커스텀 클래스는 어떻게 사용하는지 볼까요?

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
37
38
39
40
41
42

package 
{
	import flash.display.Sprite
	import flash.events.*;
	import CustomEvent;
 
	public class CustomEventTest extends Sprite 
	{
		private var broadcast:EventDispatcher = new EventDispatcher();
		private var info:Object = { info1:"의류관 세일중. ", info2:"무료시식코너 운영중. ", info3:"제휴카드 무이자 할부중. " };
 
		public function CustomEventTest ()
		{
			stage.addEventListener( MouseEvent.CLICK, clickHandler );
			broadcast.addEventListener( CustomEvent.CALL, broadcastListen );
			broadcast.addEventListener( CustomEvent.CALL, customer1Action );
			broadcast.addEventListener( CustomEvent.CALL, customer2Action );
		}
 
		private function clickHandler( e:MouseEvent ):void 
		{
			broadcast.dispatchEvent( new CustomEvent( CustomEvent.CALL, info ) );
		}
 
		private function broadcastListen( e:CustomEvent ):void 
		{
			trace( "----모든 이벤트 목록 : ", e.data.info1, e.data.info2, e.data.info3 );
		}
 
		private function customer1Action(e:CustomEvent):void 
		{
			trace( e.data.info2, ": 먹으러 가볼까나" );
		}
 
		private function customer2Action(e:CustomEvent):void 
		{
			trace( e.data.info1, ": 찜해놨던 옷을 사러가자" );
			trace( "옷을 샀으니 이제 방송 안들어" )
			broadcast.removeEventListener( CustomEvent.CALL, customer2Action );
		}
 
	}
}

위의 내용은 백화점에서 세일 정보를 방송 ( broadcast ) 하고 있고, 그 정보에 반응하는 백화점 고객이 있다는 설정 입니다.

옵저버 디자인 패턴의 등장인물 소개에서 주제를 여러가지 단어로 설명을 했었는데요,[01] broadcaster 도 주제를 표현하는 단어로 볼 수 있습니다. (그래서 이런 비유를 선택했습니다.)

실제로 이벤트 시스템은 옵저버 디자인 패턴에서 주제객체가 update 메서드를 이용해 옵저버들에게 정보를 전달하는 방식과 동일합니다. 디스패처는 이벤트 리스너 목록에 있는 리스너들에게 정보를 뿌려주죠.

인스턴스 멤버를 만든 부분을 볼까요?

0
1

private var broadcast:EventDispatcher = new EventDispatcher();
private var info:Object = { info1:"의류관 세일중. ", info2:"무료시식코너 운영중. ", info3:"제휴카드 무이자 할부중. " };

위와 같이 EventDispatcher 객체를 생성하면서 broadcast 라고 이름 지었고, 이벤트를 통해 전달할 정보인 info 를 Object 객체로 만들었습니다.

아래는 커스텀 이벤트를 발생시키는 디스패치 이벤트 입니다.

0

broadcast.dispatchEvent( new CustomEvent( CustomEvent.CALL, info ) );

이렇게 이벤트를 디스패치 하게 되면 broadcast 객체에 addEventListener 시켜 CustomEvent.CALL 이벤트가 발생하는지 귀 기울이고 있던 리스너에 info 가 전달 됩니다.

이벤트 모델은 리스너들이 정보를 받아보는지 아닌지에 대한 것은 디스패처가 관심 없습니다. 다만 정보를 이벤트를 통해 보낼 뿐이죠. 이러한 구조는 객체지향 프로그래밍이 지향하는 약한 결합 (Loose Coupling)을 표현합니다.

  1. dispatcher, supplier, notifier, publisher, server, service, provider
]]> http://ufx.kr/blog/228/feed 1 Timer Class를 이용한 원하는 시간에 원하는 일 하기 F1 대로 구현 http://ufx.kr/blog/61 http://ufx.kr/blog/61#comments Fri, 12 Dec 2008 00:41:42 +0000 세계의끝 http://ufx.kr/blog/?p=61 플생사모에 올라온 글에 대한 답변입니다.

http://cafe.naver.com/flashdev/34255

Timer Class 의 F1에 있는 예제 그대로 사용하였습니다.

http://livedocs.adobe.com/flash/9.0_kr/main/00000074.html

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
37

package {
	import flash.display.Sprite;
	import flash.events.TimerEvent;
	import flash.utils.Timer;
 
	public class ShortTimer extends Sprite {
		public function ShortTimer() {
			// creates a new five-second Timer
			var minuteTimer:Timer = new Timer(1000,5);
 
			// designates listeners for the interval and completion events
			minuteTimer.addEventListener(TimerEvent.TIMER, onTick);
			minuteTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
 
			// starts the timer ticking
			minuteTimer.start();
		}
 
		public function onTick(event:TimerEvent):void {
			// displays the tick count so far
			// The target of this event is the Timer instance itself.
			trace("tick " + event.target.currentCount);
 
			//원하는 시간에 원하는 일 간단하게 if 문으로 실행
			if (event.target.currentCount == 3) {
				trace("3초에 할일");
				//A1.addChild (B);
			} else if (event.target.currentCount == 4) {
				trace("4초에 할일");
				//A1.addChild (C);
			}
		}
 
		public function onTimerComplete(event:TimerEvent):void {
			trace("Time's Up!");
		}
	}
}

네이버 카페, 트랙백좀 지원했으면….

]]> http://ufx.kr/blog/61/feed 0