노무현 대통령 배너

AS2.0 ExternalInterface.call() 로 html 에 embed 된 swf 의 크기 조절하기

by on 7.10, 2009, under AS2.0 API

loupeExternalInterface 를 이용하여 플래시 내부에서 필요한 크기의 swf 를 계산하고 html 의 자바스크립트를 호출하여 swf 를 감싸고 있는 div 의 크기를 조절하는 내용입니다.

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

이 글을 복사해서 퍼가시는건 허용하지 않습니다. 글의 주소를 다른곳에 알려주시는 것은 환영합니다.

관련된 글

:, , , , , , , , , , , , ,

10 Comments for this entry

  • zinniaNo Gravatar
    12월 7th, 2009 on pm 3:59

    안녕하세요 플생사모에서 질문과답변게시판을 통해 링크로 방문하게 되엇습니다.
    정말 제게 유용한 정보였습니다.
    좋은정보 감사드리구여.

    제가 플래시에 마니 약한면이 있어서 질문 한개 드려도 될까싶습니다.
    다름이 아니구여 결과 확인 새창으로 보면 텍스트에 온클릭으로 되어있는데요.
    그걸 플래시에서 버튼으로 적용하게 되면 어떻게 스크립트를 작성해야할지 몰라서
    코딩을 좀 알고 싶어서요. 부탁드려도 될런지요

    응답
    • 세계의끝No Gravatar
      12월 7th, 2009 on pm 8:39

      아래와 같이 수정하면 900 * 400 까지 애니메이션으로 동작하고.

      0
1
2
3
4

      resizeButton.onRelease = function() {
	px = Stage.width;
	py = Stage.height;
	moving( this, px, 900, py, 400, 0.2 );
}

      이렇게 하면 곧바로 크기 변경됩니다.

      0
1
2

      resizeButton.onRelease = function() {
	resizeHtmlObject( 900, 400 );
}
      응답
      • 잘쓰려다가No Gravatar
        3월 31st, 2010 on pm 5:05

        잘쓰려고 했는뎅 익스6에서 디브 크기는 커지는데 플래시 스테이지 커지지 않는 버그가

        있습니다.

        익스6에서 초기 나온 플래시 스테이지에서 플래시가 100% 일지라도

        div 크기에 맞게 늘어나지 않습니다.

        이문제는 어떻게 해결 할 수 없을까요 ….

      • 세계의끝No Gravatar
        3월 31st, 2010 on pm 5:42

        IETester 에서 테스트 해 봤습니다만, IE6 도 마찬가지로 정상 작동합니다.
        위 본문에서 다운로드한 파일을 IE6 에서 실행시켜보세요.
        제대로 동작할겁니다.
        그렇다면 질문하신 분의 작업에 수정하여 붙이는 과정에서 뭔가 잘못 옮겨졌다는 의미죠.

  • 와이No Gravatar
    6월 14th, 2010 on am 5:10

    궁금한게 있는데 제가 swf파일이 있는데 이게 소리도 나오고 움직이는 파일입니다. 그런데 핸드폰에 넣으려고 하니까 사이즈를 줄여야 하는데 웹상에 첨부하는 것은 태그소스로 크기 조절하면 되지만 swf파일 자체를 컴퓨터로 재생시켰을때에 사이즈를 조절하는 법을 모르겠습니다. 정말 찾다가 이 블로그까지 오게되었는데 아신다면 좀 알려주실수 없나요?

    응답
    • 세계의끝No Gravatar
      6월 14th, 2010 on am 5:20

      어떤 디바이스를 이야기하신지 모르겠지만 대부분의 경우, 컴파일 옵션, 그러니까 Flash IDE을 사용할 경우 Ctrl + Shift + F12 의 퍼블리시 세팅에서, 사이즈를 변경해 주면 됩니다.
      그런데 이런 질문을 하신것 보니 fla 없이 swf 파일만 가지고 계신데다가 액션스크립트를 다뤄본 경험이 없는 분인것 같군요.
      만약 그렇다면, 애석하게도 방법이 없습니다.

      응답
  • 황희성No Gravatar
    6월 28th, 2010 on pm 2:50

    테스트해본결과 IE6과 IE7에서는 동작을 하지않는데요.
    원래 IE8에서만 작동하는것이 맞는것인지요? 외부에서 스크립트로 사이즈를 조절하는것은
    잘 IE6에선 안되고 IE7에선 됩니다. 그런데 플래시에서 스크립트가 호출이 안되네요..

    응답
  • 밍고No Gravatar
    9월 3rd, 2010 on pm 3:46

    좋은소스 넘 감솨합니다.
    그런데 이걸 플래시에서 클릭이 아닌 오버했을때 사이즈 변화를 주고싶습니다.
    그렇게 소스를 수정했는데 8에서는 잘 되는데 6에서 안되네요
    님께서 올려주신 소스를 한번 오버로 바꿔봤습니다. 역시나 8에서는 되는데 6에서 안되네요
    혹시 수정이 가능한건지…방법이 없는건지??? 답변부탁드리겠습니다.

    응답
    • 세계의끝No Gravatar
      9월 3rd, 2010 on pm 4:02

      이 소스코드는 400번이 넘게 다운로드 되었는데, 댓글을 다는 분들은 자신의 환경에서 뭔가 문제 있다는 분들 뿐이군요.
      여러분의 작업물로 옮기는 과정에서 일어난 에러를 제가 알 방법이 없습니다.

      혹시 몰라 IETester 에서 IE6 으로 설정하고 onPress 를 onRollOver 로 바꾼 후 테스트 해봤습니다만, 전혀 문제 없었습니다.

      응답

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Meta

관련된 글

Visit our friends!

A few highly recommended friends...