5. SMIL 미디어 및 장면 변환

미디어 요소

<ref> : Generic media reference
<animation> : Animated vector graphics or other animated format
<audio> : Audio clip - WAV, AU, MIDI
<img> : Still image - PNG, JPEG, GIF
<text> : Text reference - TXT
<textstream> : Streaming text
<video> : Video clip - MPEG, MOV, RM

<animation> 미디어

Animated vector graphics or other animated format

예 - Flash(.swf), Animated GIF(.gif)
원래 사양에서는 SVG 파일도 가능

<textstream> 미디어

RealText Format : *.rt

Real Networks System에서 제공
별도의 태그를 갖는다 (SMIL 태그가 아니다)

참고 : TimeText Format : *.tt

WWW 표준으로 작업중
2004.11, 1st working draft

텍스트 미디어

현재 실행가능한 텍스트 미디어

"RealText" 파일

<textstream src="sample01.rt" ... />

Plain Text 파일

<text src="sample101.txt" ... />

Inline Text

<text src="data:text/plain,......" ... />

<text src="data:,......" ... />
예) <text src="data:,other%20language" region="pic0" />

Escape Characters

문자	코드
&	%26
"	%22
>	%3E
<	%3C
%	%25

문자	코드
^	%5E
[	%5B
+	%2B
#	%23
]	%5D

문자	코드
backslash(\)	%26
carriage return	%22
line feed	%3E
space	%3C
tab	%25

텍스트의 속성 지정

<param /> 태그 이용하여 지정
예) : 실행결과
    <text src="kr.txt" region="pic0" >
        <param name="fontFace" value="Batang"/>
        <param name="fontSize" value="+2"/>    
        <param name="fontColor" value="red"/>
        <param name="fontWeight" value="bold"/> 
    </text>
    <text src="kr.txt" region="pic0" >
        <param name="charset" value="ksc5601"/> 
        <param name="fontPtSize" value="11"/>
        <param name="fontStyle" value="italic"/> 
        <param name="hAlign" value="center"/> 
    </text>

스트리밍 미디어

오디오 및 비디오 파일

Windows : WAV, AVI
Mac : QuickTime Mov, AIFF
Unix : Mpeg

Editing A/V Files vs. Encoding Clips

Bandwidth

연결된 네트워크의 전체 대역폭은 사용 곤란

network overhead, error correction, resending lost data, ...

권장 사항

모뎀과 같은 아날로그 연결인 경우 대역폭의 75% 정도가 적당
DSL과 같은 고속 디지털 연결의 경우 대역폭의 90%가 적당

Video Dimension

고속에서는 고화질, 저속에서는 저화질 비디오 전송이 바람직

대역폭에 따른 최대 전송율 및 비디오 화질 (참고)

			비디오 화질 (단위: 픽셀)
	사용 대역폭	최대 스트리밍 전송율	176 x 132	240 x 180	320 x 240	640 x 480
modem	14.4 Kbps	10 Kbps	Excellent	Good	Fair	Poor
	28.8 Kbps	20 Kbps
	56 Kbps	34 Kbps
ISDN	64 Kbps	45 Kbps			Good
	112 Kbps	80 Kbps		Excellent	Excellent	Good
DSL / cable modem	256 Kbps	225 Kbps				Excellent
	384 Kbps	350 Kbps
	512 Kbps	450 Kbps
	786 Kbps	700 Kbps

RealPlayer에서는 Multiple Bandwidth 기능도 지원

시간에 따른 bandwidth 변화

SMIL2.0 Animation 요소

SVG 와 동일

<animate ... /> 시간축에 속성이나 특성의 수치 값을 할당
<set ... /> 비수치값을 가지는 속성 애니메이션
<animateMotion ... /> 패스에 따라 이동
<animateColor ... /> 색상 애니메이션

단, <animateTransform ... /> 은 사용 안한다.

예제 : 실행결과

SMIL2.0 Transition Effect

<transition> 요소

<head>에서 정의 <body>의 미디어 요소에서 적용

예 : 실행결과

주요 속성

id : 명칭
type, subtype : transition 의 종류 지정 (아래 표 참조)
dur : 변환 지속 시간
direction = "forward | reverse"
startProgress, endProgress : 시작/종료 시의 변환 진행 정도
fadeColor : type="fade"의 경우 기준 색상
borderWidth, borderColor

미디어 적용 방식

transIn, transOut 속성 이용

<img src="..." dur="10s" transIn="fadein" transOut="fadeout" ... />

적용 우선순위

<img src="..." dur="10s" transIn="fadein; starBegin; starReverse" ... />

fill="transition" : 미디어간의 변환 도중 이전 미디어 유지

<img src="..." dur="10s" fill="transition" transOut="fadeout" ... />

Slide Show 예제 : 실행결과

Transition Types

Edge Wipes - wipes occur along an edge

Transition type	Transition subtypes (first is the default subtype)
"barWipe"	"leftToRight", "topToBottom"
"boxWipe"	"topLeft", "topRight", "bottomRight", "bottomLeft", "topCenter", "rightCenter", "bottomCenter", "leftCenter"
"fourBoxWipe"	"cornersIn", "cornersOut"
"barnDoorWipe"	"vertical", "horizontal", "diagonalBottomLeft", "diagonalTopLeft"
"diagonalWipe"	"topLeft", "topRight"
"bowTieWipe"	"vertical", "horizontal"
"miscDiagonalWipe"	"doubleBarnDoor", "doubleDiamond"
"veeWipe"	"down", "left", "up", "right"
"barnVeeWipe"	"down", "left", "up", "right"
"zigZagWipe"	"leftToRight", "topToBottom"
"barnZigZagWipe"	"vertical", "horizontal"

Iris Wipes - shapes expand from the center of the media

Transition type	Transition subtypes
"irisWipe"	"rectangle", "diamond"
"triangleWipe"	"up", "right" , "down" , "left"
"arrowHeadWipe"	"up", "right" , "down" , "left"
"pentagonWipe"	"up", "down"
"hexagonWipe"	"horizontal", "vertical"
"ellipseWipe"	"circle", "horizontal" , "vertical"
"eyeWipe"	"horizontal", "vertical"
"roundRectWipe"	"horizontal", "vertical"
"starWipe"	"fourPoint", "fivePoint" , "sixPoint"
"miscShapeWipe"	"heart", "keyhole"

Clock Wipes - rotate around a center point

Transition type	Transition subtypes
"clockWipe"	"clockwiseTwelve" , "clockwiseThree" , "clockwiseSix" , "clockwiseNine"
"pinWheelWipe"	"twoBladeVertical" , "twoBladeHorizontal" , "fourBlade"
"singleSweepWipe"	"clockwiseTop", "clockwiseRight", "clockwiseBottom", "clockwiseLeft", "clockwiseTopLeft", "counterClockwiseBottomLeft", "clockwiseBottomRight", "counterClockwiseTopRight"
"fanWipe"	"centerTop" , "centerRight" , "top" , "right" , "bottom" , "left"
"doubleFanWipe"	"fanOutVertical" , "fanOutHorizontal" , "fanInVertical" , "fanInHorizontal"
"doubleSweepWipe"	"parallelVertical", "parallelDiagonal", "oppositeVertical", "opposite Horizontal", "parallelDiagonalTopLeft", "parallelDiagonalBottomLeft"
"saloonDoorWipe"	"top" , "left" , "bottom" , "right"
"windshieldWipe"	"right" , "up" , "vertical" , "horizontal"

Matrix Wipes - media is revealed in squares following a pattern

Transition type	Transition subtypes
"snakeWipe"	"topLeftHorizontal", "topLeftVertical", "topLeftDiagonal", "topRightDiagonal", "bottomRightDiagonal" , "bottomLeftDiagonal"
"spiralWipe"	"topLeftClockwise", "topRightClockwise", "bottomRightClockwise", "bottom LeftClockwise", "topLeftCounterClockwise", "topRightCounterClockwise", "bottomRightCounterClockwise", "bottomLeftCounterClockwise"
"parallelSnakesWipe"	"verticalTopSame" , "verticalBottomSame" , "verticalTopLeftOpposite" , "verticalBottomLeftOpposite", "horizontalLeftSame", "horizontalRightSame", "horizontalTopLeftOpposite" , "horizontalTopRightOpposite" , "diagonalBottomLeftOpposite" , "diagonalTopLeftOpposite"
"boxSnakesWipe"	"twoBoxTop", "twoBoxBottom" , "twoBoxLeft" , "twoBoxRight" , "fourBoxVertical , "fourBoxHorizontal"
"waterfallWipe"	"verticalLeft" , "verticalRight" , "horizontalLeft" , "horizontalRight"

Non-SMPTE Wipes

Transition type	Transition subtypes
"pushWipe"	"fromLeft" , "fromTop", "fromRight", "fromBottom"
"slideWipe"	"fromLeft" , "fromTop", "fromRight", "fromBottom"
"fade"	"crossfade" , "fadeToColor", "fadeFromColor"