세계의끝과 플래시 원더랜드 » div http://ufx.kr/blog Flash + ActionScript & Design Fri, 27 Jan 2012 21:51:23 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 AS2.0 ExternalInterface.call() 로 html 에 embed 된 swf 의 크기 조절하기 http://ufx.kr/blog/290 http://ufx.kr/blog/290#comments Fri, 10 Jul 2009 04:10:52 +0000 세계의끝 http://ufx.kr/blog/?p=290 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 의 크기 조절하기

]]> http://ufx.kr/blog/290/feed 10 ExternalInterface.call() 로 html 에 embed 된 swf 의 크기 조절하기 http://ufx.kr/blog/273 http://ufx.kr/blog/273#comments Sat, 27 Jun 2009 14:56:12 +0000 세계의끝 http://ufx.kr/blog/?p=273 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 의 크기를
]]> http://ufx.kr/blog/273/feed 11