ExternalInterface 를 이용해 JavaScript 를 호출할때 생긴 스크립트 에러

EditPlus 의 내장 브라우저는 IE 엔진을 사용해서 렌더링을 하죠. 현재 EditPlus 의 최신 버전인 3.11의 내장 브라우저는 IE8과는 매우 다르고 IE6은 아닌것 같으면서 IE7과도 약간 다른, 어느쪽에 가장 가깝느냐 하면 버전 7에 가깝고, 숫자로 표현하면 체감상 6.7정도 되는 렌더링 엔진입니다.^[01]

EditPlus 에서는 Ctrl + B 를 이용해서 브라우저 미리보기를 하면 위의 스크립트 에러창이 모달(modal)창으로 자동으로 뜨고, 실제 데스크탑에 설치된 IE8로 보면 왼쪽 아래에 노란색 삼각형 스크립트 에러 표시가 나는 상황입니다. 에러 메세지로 보아 ActionScript 에서도 흔하게 보는 null 객체 에러네요.

그럼 FF나 GC 에서는? 괜찮습니다. 이 에러는 IE 에서만 나오는 문제였고, IETester 로 확인한 결과 IE6, 7, 8 모두에서 동일하게 발견되었습니다.

한참동안 원인을 찾을 수가 없어 꽤 오랜 시간을 헤메다가^[02] , 다시 처음부터 되짚어가보자는 생각에 Flash IDE의 퍼블리싱 세팅(Ctrl + Shift + F12)에서 html 을 포함하여 퍼블리싱을 한 후, 새로 만든 html로 swf 을 보니 이번에는 ExternalInterface가 정상적으로 동작하는 겁니다.

기존 html 에 사용한 object , embed 코드와, 새로 만든 코드의 다른점을 살펴본 결과, 기존 html 코드에는 object 태그의 id 값을 주지 않은 것을 발견했습니다.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" id="" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="swf_app.swf" />
	<param name="quality" value="high" />
	<embed src="swf_app.swf" quality="high" width="100%" height="100%" name="" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_kr" />
</object>

object 태그 속성중 height="100%" 다음에 보이는 id="" 의 공백문자가 보이시나요?
한편, 비 IE 계열 브라우저들이 사용하는 embed 태그에는 id 속성이 있어야 할 자리에 name 속성이 있는데요, FF나 GC 는 이렇게 name="" 속성이 공백이라도 ExternalInterface 가 동작하는데에는 전혀 문제가 없습니다. 실제로 object 의 id 속성과 embed 의 name 속성은 Flash IDE에서 퍼블리싱 했을 때, 그다지 의미 없어 보였던 swf 의 파일명이 기본값으로 입력되는것에 이런 이유도 포함되어 있었던 겁니다.

‘설마…’ 하면서 임의의 값을 넣었더니 허무하게도 정상적으로 동작합니다. 임의 값이란 정말 임의의 값입니다. 공백문자만 아니라면 아무 문자나 상관이 없습니다.

ExternalInterface 를 사용하지 않는다면 id 속성이 공백문자라도 swf 의 동작 자체는 문제가 생기지 않습니다. 결국 JavaScript 함수 호출을 하기 위해, swf 무비와 html 컨테이너 사이에서 함수 호출이 발생한 객체(swf)를 IE가 찾지 못해서 생기는 에러인 것이죠.

1. 실제로 이런 버전의 IE는 없지만, html의 표준화 표현 정도와, 여러 가지 렌더링 표현등을 고려해 봤을때 그정도 될것 같다는 의미 입니다.
2. 지금 기억을 더듬어 보면 몇시간 동안 원인을 못찾았던것 같습니다

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 의 크기 조절하기

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

먼저 액션스크립트쪽 코드를 보시죠.

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

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
 
//스테이지에 놓여있는 mc
mc.buttonMode = true;
mc.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownHandler );
mc.addEventListener( MouseEvent.MOUSE_UP, mouseUpHandler );
 
function mouseDownHandler( e:MouseEvent ):void
{
	e.currentTarget.startDrag();
	stage.addEventListener( MouseEvent.MOUSE_MOVE, mouseMoveHandler );
}
 
function mouseUpHandler( e:MouseEvent ):void
{
	e.currentTarget.stopDrag();
	stage.removeEventListener( MouseEvent.MOUSE_MOVE, mouseMoveHandler );
}
 
function mouseMoveHandler( e:MouseEvent ):void
{
	resizeWrappedDiv( stage.width, stage.height );
	txtOutput();
}
 
function txtOutput():void
{
	txtWidth.text = "stage.width : " + stage.width;
	txtHeight.text = "stage.height : " + stage.height;
	txtStageWidth.text = "stage.stageWidth : " + stage.stageWidth;
	txtStageHeight.text = "stage.stageHeight : " + stage.stageHeight;
}
txtOutput()
 
//html 에 있는 JavaScript 를 호출
function resizeWrappedDiv( $width:Number, $height:Number ):void
{
	ExternalInterface.call( "resizeElement", "swfDiv", "width", $width )
	ExternalInterface.call( "resizeElement", "swfDiv", "height", $height )
}

AS3.0 에서는 stage.width 와 stage.stageWidth 가 서로 다른 속성이라는 것을 이전 포스트에서 말씀드린바 있습니다. 위의 코드는 stage.width 와 stage.height 를 자바스크립트로 던져 swf 가 embed 된 크기를^[01] stage.width, stage.height 와 일치시키는 동작을 수행합니다.

화면에 나오는 stage.stageWidth, stage.stageHeight는 데이터로 주고받는 인자 내용과는 직접 관계 없고 현재 stage 의 크기를 알아볼 수 있도록 편의상 출력한 것입니다.

그럼 위의 resizeWrappedDiv 메서드에서 ExternalInterface.call() 로 호출한 html 에 포함되어있는 자바스크립트도 살펴볼까요.

0
1
2
3

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

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

결과 확인 (새 창)

중앙의 무비클립을 드래그 해서 html 의 div 크기를 조절하고 있습니다.
IE8.0, FF3.0, Chrome2.0 에서 모두 정상 동작하는것을 확인했습니다.

AS3.0 버전으로 코드가 쓰여졌지만, ExternalInterface.call() 은 AS2.0 도 사용할 수 있기 때문에 resizeWrappedDiv() 메서드를 그대로 이용하여 AS2.0 에서 사용해도 됩니다. AS2.0 에서는 반환 타입이 Void (V가 대문자)인것만 주의하세요.

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

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

1. 정확하게는 div 의 크기를