세계의끝과 플래시 원더랜드

브라우저의 전체화면으로 플래시 웹 사이트를 만들고자 하는 디자이너들의 열망은, 아마도 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 전체 소스코드와 결과 다운로드 (1471)

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. 오타가 나더라도 폭발이 일어나거나 하진 않지만, 원하는 화면이 나오지 않는데다가 그 원인이 오타로 인한 것임을 깨닫게 되기까지 한참 걸릴 가능성이 높습니다. [↑]

관련된 글

• onResize 이벤트 리스너를 이용한 풀플래시 무비클립 제어 (48)
• ExternalInterface.call() 로 html 에 embed 된 swf 의 크기 조절하기 (11)
• AS2.0 ExternalInterface.call() 로 html 에 embed 된 swf 의 크기 조절하기 (10)
• AS3.0에서 stage.stageWidth 와 stage.width 의 차이 (6)
• AS3.0 로더(Loader)로 불러온 다른 swf 의 클래스 사용하기 (21)
• Timer Class를 이용한 원하는 시간에 원하는 일 하기 F1 대로 구현 (0)
• 액션스크립트 개발자 입문용 추천 도서 (11)
• 로드한 파일이 AS2.0인지 AS3.0인지 런타임에 확인하는 방법 (9)
• AS3.0 클래스 구조의 여러가지 상황에서 부모, 자식 객체의 참조 방법 (28)
• 도큐먼트 클래스 *.as 파일을 연결하지 않은 fla 파일의 도큐먼트 클래스 이름은? (7)