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

얼마전 swf 와 html 사이를 통신하는 애플리케이션을 만드는 과정중이었습니다. 플래시에서 ExternalInterface.call() 를 이용해 JavaScript를 호출하는 것을 구현하고 있는 중이었는데, EditPlus 의 내장 브라우저에서 아래 스크린샷과 같은 에러를 내는 것이었습니다.

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. 지금 기억을 더듬어 보면 몇시간 동안 원인을 못찾았던것 같습니다 [↑]

관련된 글

• AS2.0 ExternalInterface.call() 로 html 에 embed 된 swf 의 크기 조절하기 (10)
• ExternalInterface.call() 로 html 에 embed 된 swf 의 크기 조절하기 (9)
• 다른 액션스크립트 개발자들은 어떻게 코딩을 하는지 궁금해? (12)
• 파이어폭스에서 워드프레스 글쓰기 업로드 충돌 문제 해결 (0)
• AS3.0 클래스 구조의 여러가지 상황에서 부모, 자식 객체의 참조 방법 (8)
• Embed 메타데이터 태그를 이용하여 다른 swf 파일의 그래픽 자원 이용 (4)
• 프리랜서 액션스크립트 개발자들이여, 일해주고 돈은 제대로 받고 있습니까? – swf 날짜제한 평가판 기능 구현 AS3.0 클래스 (12)
• Adobe Flash, Photoshop, Illustrator CS4 프로그램 에러 때문에 윈도우 비스타 포맷할뻔한 사연 (30)
• 여러버전의 IE를 테스트해 볼 수 있는 IETester (1)