Ming 라이브러리를 사용하여 동적인 Flash Movie 만들기

이 페이지를 이메일로 보내기'); //--> 

- 난이도: 중급
- Jack D. Herrington, Senior Software Engineer, Leverage Software

- 2007 년 1 월 16 일

Rich Internet Applications는 Web 2.0의 새로운 유행어가 되었고, Web 2.0 막후의
핵심 컴포넌트는 Adobe Flash입니다. Flash Movie를 애플리케이션으로 통합하고
Ming 라이브러리를 사용하여 Flash Movie를 만드는 방법을 배워봅시다.

Web 2.0은 Rich Internet Application을 약속한다. Rich Internet Applications란 무엇인가?
일반적으로 이것은 웹 애플리케이션에 매우 반응적인 인터랙션을 제공한다. 특히, 서버에서
새로운 페이지를 가져올 필요가 없는, 페이지에서 지속적으로 변하는 위젯, 웹 폼, 리포트를
의미한다.

Rich Internet Applications (RIA)의 방식 중 하나는 Dynamic HTML (DHTML)을 사용하는 것이다.
이것은 Ajax, JavaScript, Cascading Style Sheets (CSS), HTML (참고자료)을 합쳐놓은 것이다.
DHTML은 웹 애플리케이션에 인터랙션을 추가하는 유일한 방법은 아니다. 또 다른 방법으로는
Adobe Flash Player가 있는데 이것은 십 년 이상 웹 사이트에 인터랙션을 추가하는데 사용되었다.

Flash의 첫 번째 버전이 움직이는 이미지들을 만드는 툴이었다면 새로운 버전은 웹 서비스
액세스를 제어하고 ECMAScript (JavaScript의 공식 버전)를 사용하여 전체 스크립팅 지원을
제공하는 포괄적인 인터페이스를 포함하고 있다.

Flash 이해하기

Flash Player는 Microsoft® Windows®, Mac OS X, Linux®를 실행하는 컴퓨터상의 웹 브라우저에
통합된 플러그인이다. 무료로 사용할 수 있으며 대부분의 브라우저들이 설치되어 있다.
매우 유명하고 훌륭한 고객층을 거느리고 있다. 이러한 고객층은 비디오 스트림에 Flash를
사용하는 YouTube와 Google Video 같은 서비스가 탄생하면서 발전해 왔다.

Flash Player는 반 정도의 역할을 한다. 이것이 작동하려면 Flash Player는 Flash Movie가 필요하다.
이와 같은 무비는 Flash의 개발 툴들 중 하나를 사용하여 컴파일 된 .swf 파일 확장자를 가진
파일이 대부분이다. 하지만, 이 글에서 보겠지만 Ming 라이브러리를 사용하여 웹 서버에서
그래프를 그리기 위해 동적으로 이미지를 만들었던 것과 같은 방식으로 .swf 파일을 구현할 수 있다.
Ming 라이브러리는 PHP 코드로 구현하는 객체와 메소드에서 새로운 .swf 파일로 op-code를
구현한다.

두 방식 중 한 가지를 사용하여 웹 사이트에서 .swf 파일을 볼 수 있다.
첫 번째는 .swf 파일의 URL을 검색하는 것이다. 웹 서버의 전체 콘텐트 영역을 Flash Movie로
대체하게 된다. 이 방식은 디버깅이 간편하지만, HTML 웹 페이지 내의 <Object> 태그에 무비를
삽입하는 것이 주 방식이다. 이 <Object> 태그는 URL을 통해 SWF MOVIE를 참조한다.

<Object> 방식의 장점은 페이지의 어디에나 무비를 놓을 수 있고, 다른 엘리먼트와 마찬가지로
JavaScript 코드를 통해 동적으로 제어할 수 있다는 점이다.

Listing 1은 SWF MOVIE를 참조하는 <Object>태그의 예제이다.

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
    version=6,0,40,0" WIDTH="550" HEIGHT="400">
<PARAM NAME="movie" VALUE="lines.swf">
<EMBED src="lines.swf" WIDTH="550" HEIGHT="400"
    TYPE="application/x-shockwave-flash"
    PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

이 태그 세트는 lines.swf라는 무비를 참조한다. 안쪽의 <embed> 태그는 플러그인이 설치되면
이 Flash Movie가 다른 모든 브라우저들을 실행하도록 한다.

이 태그는 또한 Flash Player의 높이와 넓이를 각각 550과 400 픽셀로 지정한다. Flash Movie의
그래픽은 벡터 기반이고 라인과 텍스트를 그리는 Flash 명령어를 사용할 때 엘리먼트들은
디스플레이 영역의 크기에 맞도록 조정되면서 저장된다. Flash Movie는 고유의 조정 시스템을
갖고 있어서 코드를 깨끗하게 유지한다.

Ming

이 글에서 소개하는 Flash Movie의 첫 번째 단계는 Ming 라이브러리를 사용하여 동적으로
이들을 생성하는 것이다. Ming 라이브러리는 sprites, shapes, text, bitmap 등, SWF MOVIE의
데이터 유형으로 매핑되는 객체를 갖고 있는 PHP 라이브러리이다.
Ming의 구현과 설치 방법은 지금 설명하지 않겠다.

이 글에서는 사전 컴파일 된 Windows 버전의 PHP용 php_ming.dll 라이브러리를 사용하겠다.
Ming은 아직 개발 중이다. 이 글을 쓰고 있는 지금 Ming 라이브러리 버전은 V0.4였고
이전 명령어 일부는 이후 버전에서는 작동하지 않는다. 나는 V0.4를 채택했다.
여러분도 이 버전을 사용하기 바란다.

Listing 2는 Ming 라이브러리를 사용하여 구현된 HelloWorld 예제이다.

Listing 2. Hello.php

<?php
$f = new SWFFont( '_sans' );

$t = new SWFTextField();
$t->setFont( $f );
$t->setColor( 0, 0, 0 );
$t->setHeight( 400 );
$t->addString( 'Hello World' );

$m = new SWFMovie();
$m->setDimension( 2500, 800 );
$m->add( $t );

$m->save( 'hello.swf' );
?>

명령행에서 이 코드를 실행하면 hello.swf 파일이 만들어 진다. 내 웹 브라우저에서 그 파일을 열면
그림 1과 같은 결과를 볼 수 있다.

코드로 다시 가서 첫 번째로 할 일은 빌트인 폰트(_sans) 중 하나에 대한 포인터를 만들고
텍스트 필드 이것의 폰트, 컬러, 크기를 만든 다음 여기에 텍스트 콘텐트("Hello World")를
입력하는 것이다. 그런 다음 SWFMovie 객체를 만들고, 크기를 설정한다. 마지막으로 무비에
텍스트 엘리먼트를 추가하고 파일에 무비를 저장한다.

파일을 직접 구현하는 대신 다음 코드를 사용하여 페이지의 아웃풋으로서 SWF MOVIE를
만들어 낼 수도 있다.

header( 'Content-type: application/x-shockwave-flash' );
$m->output( );

이 프로세스는 PHP 내에서 ImageMagick 라이브러리를 사용하여 비트맵 그래픽이 구현되는
방법과 비슷하다. 모든 Ming 예제의 경우 나는 save 메소드를 사용하지만 여러분은
원하는 대로 해도 좋다.

텍스트 움직이기

텍스트를 움직이도록 하지 않는다면 텍스트를 Flash Movie로 놓는다고 해서 작동하는 것은
아니다. 두 개의 텍스트가 있는 Listing 2의 예제를 보자. 하나는 작게 시작해서 점점 커지고
또 다른 하나는 움직임이 없다.

<?php
$f = new SWFFont( '_sans' );

$pt = new SWFTextField();
$pt->setFont( $f );
$pt->setColor( 0, 0, 0 );
$pt->setHeight( 400 );
$pt->addString( '1000' );

$tt = new SWFTextField();
$tt->setFont( $f );
$tt->setColor( 192, 192, 192, 90 );
$tt->setHeight( 350 );
$tt->addString( 'Points' );

$m = new SWFMovie();
$m->setDimension( 2500, 800 );

$pts = $m->add( $pt );
$pts->moveTo( 0, 0 );

$tts = $m->add( $tt );
$tts->moveTo( 1300, 200 );

for( $i = 0; $i < 10; $i++ ) {
  $m->nextframe();
  $pts->scaleTo( 1.0 + ( $i / 10.0 ), 1.0 + ( $i / 10.0 ) );
}

$m->save( 'text.swf' );
?>

명령행에서 코드를 실행할 때 text.swf를 만든다. 내 웹 브라우저에서 그 파일을 열면
그림 2 같은 이미지를 볼 수 있다.

"1000" 이라는 텍스트는 작다. 350 포인트 크기이다. ScaleTo() 메소드를 사용하여 750 포인트로
늘린다. movie 객체에서는 nextframe() 메소드를 사용했다.

이것의 작동 방법을 이해하려면 Flash가 애니메이션을 실행하는 방법에 대해 알아야 한다.
Flash의 애니메이션은 무비의 애니메이션처럼 작동한다. 바로 프레임에 의해서 작동한다.
그래픽 스프라이트는 프레임 별로 움직인다. 한 가지 주요한 차이는 Flash는 각 프레임의
스냅샷을 찍지 않는다는 점이다. 각 프레임에 스프라이트 객체의 상태를 저장한다.

"1000"이라는 텍스트를 가진 $pt 변수가 있다. $pt를 무비에 추가할 때 add() 메소드에서
$pt라고 하는 새로운 객체를 얻는다. 이 객체는 SWFDisplayItem인데 그 스프라이트의
인스턴스를 나타낸다. 프레임 별로 무비 표면에 이 인스턴스를 이동시킬 수 있다.

다소 혼란스럽지만 동시에 움직이는 "1000" 텍스트 스프라이트나 "points" 텍스트 스프라이트의
여러 버전들이 생길 수도 있었다.

그래픽 그리기

다음은 벡터 그래픽에 관한 것이다. 프레임의 왼쪽 상단에서 오른쪽 밑으로 이어지는
라인으로 시작하겠다.

<?php
$m = new SWFMovie();
$m->setDimension( 300, 300 );

$s = new SWFShape();
$s->setLine( 10, 0, 0, 0 );
$s->movePenTo( 10, 10 );
$s->drawLineTo( 290, 290 );
$m->add( $s );

$m->save( 'line.swf' );
?>

명령행에서 이 스크립트를 실행하고 아웃풋 .swf 파일을 보면 그림 3과 같은
이미지가 나타난다.

간단하지만 재미는 없다. 무엇을 하면 좋을까? 새로운 SWFShape 객체를 만든 다음에
펜 움직임과 라인을 추가했다. 그런 다음 모양 스프라이트를 무비에 추가했다.
더 재미있게 하기 위해 텍스트에 했던 것과 똑 같은 유형의 프레임 애니메이션을 사용한다.
이 같은 경우 아래 코드를 사용하여 무비를 중심으로 라인을 회전시킨다.

<?php
$m = new SWFMovie();
$m->setDimension( 300, 300 );

$s = new SWFShape();
$s->setLine( 5, 0, 0, 0 );
$s->movePenTo( -100, -100 );
$s->drawLineTo( 100, 100 );
$ts = $m->add( $s );

$ts->moveTo( 150, 150 );

for( $i = 0; $i < 100; $i++ ) {
  $ts->rotate( 10 );
  $m->nextframe();
}

$m->save( 'rotate.swf' );
?>

이 경우 라인은 -100, -100에서 100, 100으로 그린다. 좌표 0,0에 라인의 중심을 놓는다.
그러한 방식으로 모양을 회전하고, 회전은 라인의 중심에서부터 시작한다.
모양을 무비에 추가할 때 프레임의 중심으로 리턴된 SWFDisplayItem을 움직인다.
그런 다음 rotate() 메소드로 이것을 회전시키고 매번 프레임을 늘린다.

이미지 사용하기

라인, 원, 아크(arc), 커브(curve), 직사각형 같은 텍스트와 벡터 그래픽 프리머티브(primitive)도
좋다. 하지만 이상적으로는 Flash Movie에 있는 이미지에 액세스 해야 한다. 다행히
Ming 라이브러리에서는 이미지를 쉽게 사용할 수 있다.

Listing 6. 이미지 사용하기

<?php
$img = new SWFBitmap( file_get_contents( 'megan.jpg' ) );

$s = new SWFShape();
$imgf = $s->addFill( $img );
$s->setRightFill( $imgf );
$s->movePenTo( 0, 0 );
$s->drawLineTo( $img->getWidth(), 0 );
$s->drawLineTo( $img->getWidth(), $img->getHeight() );
$s->drawLineTo( 0, $img->getHeight() );
$s->drawLineTo( 0, 0 );

$m = new SWFMovie();
$m->setDimension( $img->getWidth() * 2, $img->getHeight() * 2 );
$is = $m->add( $s );
$is->moveTo( $img->getWidth() / 2, $img->getHeight() / 2 );

for( $i = 0; $i < 10; $i++ )
{ 
$is->skewx( 0.02 );
$is->skewy( -0.03 );
$m->nextframe();
}

$m->save( 'image.swf' );
?>

이 스크립트는 local .jpeg 파일을 읽는 것으로 시작한다. (이것은 내 딸 Magan의 사진이다.)
그런 다음 직사각형 모양을 만들고 여기에 이미지를 채운다. 그 다음 10개 이상 프레임에
SKEW 효과를 주어 이미지를 조금 이동시킨다.

움직임

Ming 라이브러리의 극히 일부만 다루었다. 여기에서 설명하지 않은 것 중에
상호 운용성 부분이 있는데 간단한 스크립트를 엘리먼트에 붙일 수 있는 기능이다.
(상호 운용성 문제의 경우 매우 복잡한 Flash Movie를 염두하고 있다면 웹 애플리케이션 내에서
웹 서비스와 통신하는 Flash Movie를 구현하는 Flash 개발 툴을 사용하는 것도 좋은 방법이다.)

복잡한 Flash Movie를 구현할 때 또 다른 옵션은 Adobe Flex 또는 Laszlo 같은 툴을 사용하는
것이다. 이 두 가지 모두 Flash Movie의 사용자 인터페이스를 구성하는 XML Syntax를 제공하고
인터페이스에서 상호 운용성을 제공하는 JavaScript를 개발할 수 있다.

XML Chart와 XML Gauge

내가 감동을 받았던 두 개의 Flash SWF가 있는데 XML Chart와 XML Gauge이다.
PHP 애플리케이션에서 XML 페이지를 만들면 웹 사이트에 동적 게이지와 그래프가 생긴다.
먼저 사이트에서 SWF를 다운로드 한다. 이것을 웹 페이지의 <Object> 태그에 삽입하고
XML 데이터 피드에 URL을 준다. 컨트롤에 필요한 포맷으로 XML을 반출하는 PHP 페이지를
작성한다. 이 무비용 XML 포맷은 사이트에서 잘 문서화 되고 생성도 쉽다.

맺음말

Flash는 단순한 방법으로 웹 애플리케이션에 상당한 상호 운용 특성을 제공한다. 위젯 스타일의
컨트롤 같이 작은 것으로 시작해서 최근에 대중화 되었다. XML Ming, Flex, Laszlo를 배우기 전에 Chart와 XML Gauge로 유형을 공부하는 것이 좋은 방법이다.
Flash는 Web 2.0 PHP 애플리케이션의 접근성과 상호 운용성 확장에 기여했다.

참고자료

• Adobe Systems is the source for all things Flash
• documented on the PHP site
• "DHTML과 XML을 사용하여 풍부한 Ajax 슬라이드 쇼 만들기 (한글)" Ajax를 사용하여 동적인 HTML 효과 만들기
• maani.us
• ECMAScript standard
• PHP project resources
• PHP content (developerWorks)
• developerWorks 오픈 소스 존 (한글 페이지): 오픈 소스 개발과 구현의 참고자료
• developerWorks technical events and webcasts
• Safari Books Online
• podcast

• Laszlo Systems
• Adobe Flex
• Ming library
• IBM 시험판 소프트웨어 다운로드 (한글 페이지)

• PHP Developer Forum
• developerWorks blogs

필자소개

		Jack D. Herrington은 20년 경력을 지닌 소프트웨어 엔지니어이다. Code Generation in Action , Podcasting Hacks , PHP Hacks의 저자이다. 30개 이상의 기술자료를 기고했다