노무현 대통령 배너

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

by on 6.27, 2009, under AS3.0 API

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

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 의 크기를 [↑]

관련된 글

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

11 Comments for this entry

  • 검쉰No Gravatar
    7월 1st, 2009 on pm 6:21

    오~ 멋지네요 ㅎ

    응답
  • 이재웅No Gravatar
    9월 14th, 2009 on pm 1:49

    올플로 된 홈페이지 만들때 매우 유용할 것 같습니다. 좋은 정보 감사드립니다.

    응답
  • 지룡이No Gravatar
    5월 4th, 2010 on am 12:11

    세계의 끝님 안녕하세요. 올려주신 소스를 사용하여 홈페이지를 만들고 있는 어느 중생입니다.

    다름이 아니라 제가 플래시홈페이지를 만들고 있는데,
    특정 프레임에 MovieClip(root).resizeWrappedDiv(2000,1300); 이런식으로
    프레임마다 크기가 변하도록 하고 있습니다. 그런데 이 크기 변화가 필요한 것은 세로로 긴 내용이 들어간 두 프레임뿐이거든요. 다른 프레임은 100%,100% 상태로 유지하고 싶은데 한번 이 함수를 먹은다음에는 100%상태로 되돌릴수가 없습니다. ㅠㅠ(100%=스크롤바없이 화면에 꽉찬 상태)
    특정프레임에서만 크기변화값을 주고, 다른 프레임에서는 이 함수를 삭제하고 100%상태로 보여졌음 하는데 가능할까요??

    응답
    • 세계의끝No Gravatar
      5월 4th, 2010 on am 8:03

      접근 방식이 잘못되었습니다.
      함수를 삭제했는데 다시 필요해질땐 어떻게 하시려구요.
      문제가 복잡해 지겠죠.

      그런경우는 %로 할건지 px 로 할건지를 html 에 보내주는게 좋습니다.

      아래와 같이 함수에 unit (단위)를 보내는 인자를 추가하고

      0
1
2
3
4

      function resizeWrappedDiv( $width:Number, $height:Number, $unit:String = "px" ):void
{
	ExternalInterface.call( "resizeElement", "swfDiv", "width", $width, $unit )
	ExternalInterface.call( "resizeElement", "swfDiv", "height", $height, $unit )
}

      자바스크립트에서도 추가된 인자를 받아주면,

      0
1
2
3

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

      아래와 같이 사용할 수 있습니다.

      0
1

      MovieClip(root).resizeWrappedDiv( 2000, 1300 ); // 이렇게 하면 px 로 
MovieClip(root).resizeWrappedDiv( 100, 100, "%" ); // 이렇게 하면 %로
      응답
      • 지룡이No Gravatar
        5월 7th, 2010 on pm 12:55

        정말 감사드립니다. ㅠㅠ 이부분은 해결이 되었어요. 그런데 정말 죄송하지만 한가지만 더 질문드려도 될까요? 익스플로러 6 문제입니다. 일단 익스플로러 8에서는 모두 문제 없이 돌아가는데 익스플로러 6버전에서는 %와 px간의 이동은 잘 됩니다. 하지만 px끼리의 이동에서 에러가 나네요. 예를들어 2프레임이 MovieClip(root).resizeWrappedDiv( 2000, 1300 ); 이고
        3프레임이 (2000,1700); 이라면 2프레임에 가면 (2000,1300)이 되고 여기서 3프레임을 가면 윈도우크기는 늘어나는데 1300밑부분은 하얗게 되서 나옵니다. 또 3프레임에 갔다가 2프레임에 가면 윈도우크기가 줄어들지 않습니다. 방법을 다르게 해봐야할까요…하…너무 번거롭게 하는거 같아서 죄송하네용 ㅠㅠ

  • 지룡이No Gravatar
    5월 8th, 2010 on am 10:52

    문제 해결했습니다. 번거롭게 해드려서 죄송합니다. 그리고 감사합니다. 세계의 끝님 블로그가 아니었음 홈페이지 못만들었을거 같아요

    응답
    • 세계의끝No Gravatar
      5월 8th, 2010 on pm 10:30

      다시 질문하신 부분은 액션스크립트의 문제가 아니라 브라우저 버전에 따라 다르게 표현되는 렌더링 방식의 문제죠.
      IE6 은 없어져야할 브라우저 입니다. 유저가 좀더 빨리 XP 에서 탈출해 줬으면 하는 바램이 있네요.

      응답
  • 오주헌No Gravatar
    10월 19th, 2010 on pm 5:07

    잘봤습니다. 정말 배울게 너무 많네요~ㅎ

    응답
    • 세계의끝No Gravatar
      10월 19th, 2010 on pm 5:38

      이 포스트는 지식이라기 보다는 요령에 가깝습니다.
      그러므로 배우실 필요는 없고, 이런 요령이 이 블로그에 위치해 있구나… 하고 기억하시고
      나중에 필요할때 다시 찾으시면 된다는. ^^

      응답

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...