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

AS2.0 의 Stage 에는 width 와 height 속성^[01] 이 있어 스테이지의 폭과 높이를 구할 수 있었습니다.

AS3.0 의 stage^[02]  에도 width 와 height 속성이 있습니다만, AS2.0와는 다른 width 와 height 속성을 표시합니다. F1 레퍼런스의 stage 클래스의 속성부분 설명에는 AS3.0의 width와 height 는 표시 객체(DisplayObject : DO)의 폭을 픽셀 단위로 나타낸다고 되어 있습니다. 즉 stage에 전체적인 면적을 커버하는 배경 이미지 같은 것이 없다면 stage 위에 있는 DisplayObject들만의 width와 height를 나타냅니다.

그 대신 AS2.0 의 Stage.width와 Stage.height 는 AS3.0에서는 각각 stage.stageWidth와 stage.stageHeight가 대신하게 되었습니다. 혹시 헷갈리는 분은 아래 swf 를 보시죠.

stageWidth_example.swf 
이 파일을 클릭해서 FlashPlayer 또는 브라우저로 창 사이즈 조절도 해보세요.

버튼을 클릭해서 깃털 객체를 하나 더 만들면 깃털 하나가 200 픽셀이므로 이미 stage 에 표시되어있는 200 픽셀과 더해서 400 픽셀이 됨을 알 수 있습니다. 새로 생성한 깃털은 드래그도 가능하므로 움직여 보세요.

혹시 사용된 코드가 궁금하신 분은 아래를…

(계속 읽기…)

1. 무비클립과는 달리 _width, _height 가 아닙니다. [↑]
2. AS2.0은 Stage(대문자 S) 였지만 AS3.0은 소문자 입니다. [↑]

onResize 이벤트 리스너를 이용한 네귀퉁이 정렬과 중앙 정렬에 관한 간단한 예제 입니다.
이 글은 플생사모에 올라온 질문에 대한 답변글로 작성된 글입니다.
http://cafe.naver.com/flashdev/34311

2008년 12월 14일에 처음 작성되었고,
2009년 4월 1일에 수정하였습니다.
2009년 4월 24일에 중앙 부분 크기 조절과, DOCTYPE 에 대한 설정을 포함하여 다시 업데이트 하였습니다.

  onResize_example.zip - (fla, swf, html 파일 다운로드)

이 fla 파일은 Flash CS4에서 CS3형식으로 저장했습니다. (Flash 8 이하의 버전에서는 열리지 않습니다)

onResize_example.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

Stage.scaleMode = "noScale";
Stage.align = "TL";
 
function resetStage(){
	trace("Stage size is now " + Stage.width + " by " + Stage.height);
 
	tl_mc._x = 0;
	tl_mc._y = 0;
 
	tr_mc._x = Stage.width;
	tr_mc._y = 0;
 
	bl_mc._x = 0;
	bl_mc._y = Stage.height;
 
	br_mc._x = Stage.width;
	br_mc._y = Stage.height;
 
	center_mc._x = Stage.width * 0.5;
	center_mc._y = Stage.height * 0.5;
	center_mc._width = Stage.width - 160;
	center_mc._height = Stage.height - 160;
}
resetStage()
 
var stageResizeListener:Object = new Object();
stageResizeListener.onResize = function () {
	resetStage()
}
Stage.addListener(stageResizeListener);

onResize_example.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%” 설정해도 동작합니다.)

* AS3.0 버전이 필요한 분은 AS3.0, RESIZE 이벤트를 이용한 풀플래시 stage 무비클립 제어 를 클릭하세요.