swf 이 html 에 앉혀지게 되는 object 태그와 embed 태그에는 width와 height를 모두 100%로 설정되어있고, swf 의 외부를 감싸고 있는 div 의 크기가 지정되어 있으므로, 로드된 직후 swf 는 div 와 동일한 크기로 보여집니다.

AS3.0 버전으로는 같은 제목의 포스트를 얼마전에 작성하였습니다. 생각해보면 이런 팁이 필요한 분들은 비교적 가벼운 swf 를(네비게이션 바 또는 플래시 비주얼 무비 같은 것) html 에 사용하는 경우일터라 AS2.0 으로 코딩하는 경우가 압도적으로 많을테고, 3.0 문법에는 익숙하지 않은 쪽일거라 생각하여 이 포스트를 작성하게 되었습니다.

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

import flash.external.ExternalInterface;
 
Stage.scaleMode = "noScale";
Stage.align = "TL";
 
mc.onPress = function() {
	this.startDrag();
	Mouse.addListener( mouseListener );
}
 
mc.onRelease = function() {
	this.stopDrag();
	Mouse.removeListener( mouseListener );
}
 
var mouseListener:Object = new Object();
mouseListener.onMouseMove = function() {
	resizeHtmlObject( mc._x + mc._width, mc._y + mc._height );
	txtOutput()
}
 
function txtOutput():Void {
	txtWidth.text = "Stage.width : " + Stage.width;
	txtHeight.text = "Stage.height : " + Stage.height;
}
txtOutput();
 
//html 에 있는 JavaScript 를 호출
function resizeHtmlObject( $width:Number, $height:Number ):Void {
	ExternalInterface.call( "resizeElement", "swfDiv", "width", $width );
	ExternalInterface.call( "resizeElement", "swfDiv", "height", $height );
}
 
//아래 내용은 resize ! 버튼에 대한 내용
var px:Number;
var py:Number;
 
resizeButton.onRelease = function() {
	px = Stage.width;
	py = Stage.height;
	moving( this, px, parseInt( txtResizeX.text, 10 ), py, parseInt( txtResizeY.text, 10 ), 0.2 );
}
 
function moving( $mc, $x, $targetX, $y, $targetY, $speed ) {
	$mc.onEnterFrame = function() {
		$x += ( $targetX - $x ) * $speed;
		$y += ( $targetY - $y ) * $speed;
 
		resizeHtmlObject( $x, $y );
 
		if ( $targetX == Math.round( $x ) && $targetY == Math.round( $y ) ) {
			$x = $targetX;
			$y = $targetY;
			delete this.onEnterFrame;
		}
		txtOutput()
	}
}

무비클립을 리사이징 핸들과 같이 사용할 수도 있고, 코드 아랫부분처럼 width와 height값에 easing 애니메이션 을 거는 것도 가능합니다. 적용 가능한 방법으로 적당히 응용해서 사용하면 되겠습니다.

resizeWrappedDiv 메서드에서 ExternalInterface.call() 로 호출한 html 에 포함되어있는 자바스크립트도 살펴볼까요. 자바스크립트는 AS3.0 버전에서 사용된것과 동일합니다.

0
1
2
3

function resizeElement( $id, $prop, $pixel ){
	var obj = document.getElementById( $id );
	obj.style[$prop] = $pixel + "px";
}

id 값으로 요소를 찾아, 인자로 던진 픽셀 크기만큼 속성을 조절하는 자바스크립트 입니다. div 뿐만 아니라 img 나 table 과 같은 다른 html 요소에도 사용가능하도록 범용으로 만들어져 있습니다.

참고로, swf 의 object 의 id 를 통해 object 태그의 width와 height속성을 직접 조절할 수도 있습니다만, 자바스크립트의 getElementById() 메서드로는 embed 태그의 name 속성이 잡히질 않아, IE계열에서는 크기 조절이 되는데, FF, Chrome 에서는 먹통이 됩니다. 이것을 크로스 브라우징이 되도록 하려면 브라우저 종류를 체크하여 별도로 제어해야 할듯 합니다. (자바스크립트의 영역이므로 이런건 각자 알아서~)
그리고 swf 을 직접 사이즈 조절하면 IE에서는 swf 가 floating 된것 처럼 html의 다른 요소들 위로 올라가 버립니다. IE에서는 ActiveX로 동작하게 되니 어쩌면 당연한 결과겠죠. 이것은 일반적으로 우리가 원하는 결과가 아니라고 생각 하지만, IE만 고려해도 되는 상황에 또 이런것을 필요로 하는 분들도 있을 수 있으므로 참고하시면 되겠습니다.

IE8.0, FF3.5, Chrome2.0 에서 모두 정상 동작하는것을 확인했습니다.

결과 확인 (새 창)

  swf2div resize AS2.0 소스코드 다운로드 - fla, swf, html 포함 (fla 파일은 CS4에서 CS3 버전으로 저장, Flash 8 이하에서는 열리지 않습니다)

* 연결된 글 : AS3.0 버전 ExternalInterface.call() 로 html 에 embed 된 swf 의 크기 조절하기

htmlText 에서 지원하지 않는 속성으로 표현되어야 하거나, htmlText 속성을 줄 수 없는 경우에 이 방법을 사용하면 됩니다. 기본적으로 htmlText 보다는 TextFormat 이 좀 더 강력하다고 할 수 있습니다.

0
1
2
3
4
5
6
7
8

var _tf:TextField = new TextField();
_tf.text = "세계의끝과 플래시 원더랜드";
_tf.autoSize = "left";
addChild(_tf);
 
var format:TextFormat = new TextFormat();
format.color = 0xff0000;
format.bold = true;
_tf.setTextFormat( format, 6, 9 );

컴파일한 결과는 아래와 같습니다.

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

그런데 TextFormat 을 사용할 때 몇가지 주의할 점이 있습니다.

1. 텍스트필드에 스타일 시트(css) 가 적용된 경우 setTextFormat() 메서드는 무시됩니다.
2. endIndex 부분의 숫자에 주의해야 합니다.
   F1 레퍼런스에 있는 메서드 정의가 아래와 같은데요.
   public function setTextFormat(format:TextFormat, beginIndex:int = -1, endIndex:int = -1):void
   여기서 endIndex 는 TextFormat 이 끝나는 index 가 아니라 끝나고 난 후 다음 TextFormat 이 오는 index 입니다.
   “세계의끝과 플래시 원더랜드” 일 경우 “세”의 index 가 0 이고 띄어쓰기 공백 문자 포함해서 “플” 의 index 는 6입니다. 그러면 “시” 문자의 index 가 8 이 되는데요. _tf.setTextFormat( format, 6, 8 ); 으로 하면 우리가 원하는 결과가 아니라는 것 입니다. 즉, TextFormat 이 끝나고 난 후의 그 다음 index 인 9를 입력해야 합니다.
3. AS2.0에서도 사용할 수가 있습니다.
   그런데 AS2.0에서 사용할 경우 setTextFormat() 메서드 정의에서 파라미터의 순서가 다릅니다.
   public setTextFormat([beginIndex:Number], [endIndex:Number], textFormat:TextFormat) : Void
   어이없게도 TextFormat 객체가 들어가야 할 위치가 첫번째가 아니라 마지막입니다.^[01]

1. ActionScript 3.0 Cookbook 의 한글판 해당 내용이 있는 338~339페이지에는 3.0 서적인데도 묘하게 2.0 코드로 예제가 설명되어 있네요.

그래서 AS2.0 수준에서는 프레임 액션에 모든 코드를 넣고 플래시 애플리케이션을 만들게 됩니다. 애니메이션을 위한 코드 또한 예외 없이 다른 모든 코드들과 같이 프레임에 작성되어 구현하게 되죠. 아래와 같은 형태로 말입니다. 

0
1
2
3
4
5
6
7
8

//스테이지에는 각각 mc와 btn 무비클립이 놓여져 있음
function moving( $mc, $pos, $speed ) {
	$mc.onEnterFrame = function() {
		this._x += ( $pos - this._x ) * $speed;
	}
}
button.onRelease = function() {
	moving( mc, 300, 0.2 );
}

나름대로 굉장히 간결한 형태입니다. 움직이는 요소들이 많지 않거나, 제한된 범위 내에서 사용하기에는 무리가 없어보입니다.

그런데 _x 좌표말고 _y 좌표라던가, 아니면 _alpha 라던가, _xscale, _height 같이 다른 속성의 애니메이션이 되어야 한다면, 해당하는 속성별로 함수를 종류별로 만들어야 됩니다.

이런경우 변화되어야하는 속성까지 같이 인자로 넘겨버린다면 이야기가 달라지겠죠. 변경하고 싶은 속성은 문자열 형태의 인자로 보내고 함수내부에서는 [] 연산자로 처리해버리면 됩니다.

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

function moving( $mc, $var, $pos, $speed ) {
	$mc.onEnterFrame = function() {
		this[$var] += ( $pos - this[$var] ) * $speed;
		if ( $pos == Math.round( this[$var] ) ) {
			this[$var] = $pos;
			delete this.onEnterFrame;
		}
	}
}
button.onRelease = function() {
	moving( mc, "_x", 300, 0.2 );
}

위의 코드를 보면 마지막으로 남아있던 무비클립 속성인 this._x 부분이 this[$var] 로 변경되어 모든 속성과 수치들이 함수의 인자로 빠져나왔습니다. (보너스로, 목표하는 지점에 속성이 거의 근접해서 소숫점 이하 반올림한 좌표와 같은 경우 무비클립을 목표 위치로 옮기고 엔터프레임을 죽여서 퍼포먼스를 확보하는 if 문을 추가하였습니다.)

속성을 선택하면서 해당속성을 변경하는 이런 방식은 AS3.0에서는 어찌보면 당연한 것인데 AS2.0 에서는 속성에 언더바( _x, _alpha … )가 붙어서 뭔가 접근할 수 없는것처럼 느껴져 위와 같은 생각을 쉽게 하지 못하는 경향이 있는것 같습니다.

액션스크립트에서는 this["문자열"] 형태의 참조가 가능합니다. ( _root["문자열"], _parent["문자열"], myMc["문자열"] 모두 가능 )
뒤에 계속 참조하려면 this["문자열"].myMc.yourMc._x 와 같이 점찍고 이어가기도 가능합니다.
문자열 부분에는 위와 같이 속성이나 변수도 올수도 있고, 내부에 있는 다른 무비클립도 가능하고, 함수도 가능하고, 뭐, 안되는게 없습니다.
다른 언어 하시는 분들은 이런 형태의 참조를 보고서는 “와, 이런게 가능하네. 무진장 편하겠네요” 하더군요.
양날의 검이긴 하지만 말이죠.

코드만 있고 그림이 없으면 뭔가 섭섭하기 때문에 간단하게 아래와 같이 만들어보았습니다.

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 무비클립 제어 를 클릭하세요.