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

브라우저의 전체화면으로 플래시 웹 사이트를 만들고자 하는 디자이너들의 열망은, 아마도 Flash 3.0, 그러니까 지난 세기 말이 될 텐데요, 당시 유고 나카무라의 웹 사이트를 보고 눈이 휘둥그레 졌던 시절부터 쭉 이어졌던거 같습니다.

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

일전에 AS3.0 버전으로도 만들어 달라는 요청을 어떤 분에게 받은 바도 있고, 역시 이런 기능을 원하는 분들은 역시 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 무비클립 제어 를 클릭하세요.