5. SMIL 미디어 및 장면 변환

6. RealText & RealPix

리얼시스템의 다양한 컨텐츠 기능

RealText

일종의 Markup Language로 구현, 확장자 *.rt => 리얼플레이어와 자동 연결

비디오의 자막처리 및 해설기능에 활용

RealPix

일종의 Markup Language로 구현, 확장자 *.rp
이미지의 동적인 연결과 변환 효과 가능

RealText

리얼텍스트의 지원 형식

generic-기본	예제	일반적인 윈도우 형태 텍스트 태그들을 자유롭게 사용가능
scrollingnews	예제	물흐르듯이 텍스트가 위로 흐르는(scroll) 형태 지정 픽셀 단위로 이동
teleprompter	예제	처음에는 화면에 텍스트를 채운다 다 채우면 scrollingnews처럼 위로 이동하나 줄단위로 이동(push up)
marquee	예제	오른쪽에서 왼쪽으로 텍스트가 이동(crawl), 텍스트가 세로 중앙에 위치 tickertape과 유사한 효과
tickertape	예제	오른쪽에서 왼쪽으로 텍스트 이동(crawl), 텍스트가 윗단 또는 아래단에 위치 주식 상황중계나 비디오의 자막

<window> 태그

리얼텍스트의 루트요소

속성으로 리얼텍스트의 종류, 화면 크기, 플레이시간 등을 지정 가능
<window>...</window>사이에 리얼텍스트의 다른 태그 넣는다.

텍스트 뿌리기, 폰트 및 색상 제어, 시간 제어, 위치 관련 태그

일부를 제외하고 HTML과 유사하나 XML 형식의 태그에 주의

<window> 태그 속성

type : 윈도우 형식 (generic, scrollingnews, teleprompter, marquee, tickertape)
duration : 디스플레이 시간
width, height : 리얼텍스트 디스플레이 창의 크기
scrollrate, crawlrate : 초당 세로로 스크롤되는 픽셀수, 가로로 이동되는 픽셀수
bgcolor, link : 배경색, 텍스트의 색상
loop : 텍스트의 반복 여부 (tickertape, marquee의 경우)

윈도우 종류에 따른 속성의 기본(default) 값

	generic	scrollingnews	marquee	tickertape	teleprompter
width X height	320 x 180	320 x 180	320 x 180	500 x 30	500 x 30
bgcolor	white	white	white	white	black
scrollrate	-	10	-	-	-
crawlrate	-	-	-	20	20
loop	false	false	false	true	true

시간 제어

SMIL 시간과 RealText 시간

<textstream src="..." dur="hh:mm:ss" ... />
<window ... duration="hh:mm:ss">

SMIL dur 이 RealText duration 보다 작으면 dur 시간후 종료
SMIL dur 이 RealText duration 보다 크면 남은 시간동안 fill 속성 상태로 유지

<time/> 태그

text block 별로 시간 지정
속성 : begin, end

예 (예제실행)

위치 제어

<pos x="xxx" y="yyy" /> 태그 : 직접 텍스트의 위치를 지정
<tl> ... </tl> 태그 : ticker의 경우 텍스트를 아래(lower)단으로, color 속성
<tu> ... </tu> 태그 : ticker의 경우 텍스트를 윗(upper)단으로, color 속성
<clear /> 태그

예 (예제실행)

텍스트 관련 태그

태그

한글을 사용시에는 반드시 문자세트 지정 필요 :
속성 : face, size, charset, color, bgcolor

레이아웃 태그

 , ... , <center> ... </center>
<hr /> : 두 개의 과 동일 결과 (only for HTML compatibility)
<ul> ... </ul>, <ol> ... </ol> : 들여쓰기만 한다 (only for HTML compatibility)
<li /> : 한 개의 과 동일 결과 (only for HTML compatibility)

텍스트 모양 태그

 ... , ... , <s> ... </s>, ... , <pre> ... </pre>

하이퍼링크

<a href="URL"> ... </a>

RealPix

리얼픽스에서 지원하는 변환 효과 (예제실행)

이미지 변환

fadein 또는 fadeout (to a color) : <fadein />, <fadeout />
2개의 이미지 사이의 cross fade, wipe 효과 : <crossfade />, <wipe />
이미지의 일부분에만 적용 가능

기타 효과

줌인, 줌아웃 : <viewchange />
animated GIF 제어 : <animate />
일부분만 칠하기 : <fill />

<imfl> 태그 : 리얼픽스의 루트요소

<head /> 태그

화면 크기, 재생률, 시간 등 리얼픽스의 정보를 규정하는 태그
주요 속성

author, title, copyright : 작성자의 이름, 제목, 저작권
width, height, aspect : 가로 길이, 세로 길이, 가로세로 비율유지 여부
bitrate : bandwidth지정
maxfps : 재생률 (frame per second, 기본값 30)
duration : 총 플레이 시간
background-color : 배경색

<image /> 태그

이미지 파일명과 핸들 번호를 설정 => 이미지 효과 태그에서 핸들을 지정한다
주요 속성

handle = "ID 번호" : 이미지 파일을 제어할때 사용한다
name = "파일 경로" : 경로와 이미지 명을 지정
size = 파일 크기 (bytes)
mime = "image/jpeg", "image/gif", "image/png"

<imfl>
 <head title="RealPix(tm) Sample Effects"
 author="Hongran Yun" copyright="(c)2000 Sookmyung, Hongran Yun"
 duration="50" timeformat="dd:hh:mm:ss.xyz" bitrate="12000"
 width="400" height="275" aspect="true" url="http://snow.sookmyung.ac.kr" />

 <!-- Assign handle numbers to images --/>
 <image handle="1" name="20.gif" />
 <image handle="2" name="26.gif" />
 <image handle="3" name="33.gif" />
 ...
 <!-- Fade in and crossfade images --/>
 <fill start="0" color="black"/>
 <fadein start="1" duration="2" target="1" />
 <crossfade start="4" duration="3" target="2" />
 <fadeout start="8" duration="1" color="lime" dstx="100" dsty="100" dstw="200" dsth="75"/>
 ...
<!-- Wipe in checkerboard images --/>
 <wipe type="push" direction="left" start="16" duration="3" target="4"
 srcx="0" srcy="0" srcw="200" srch="137" dstx="0" dsty="0" dstw="200" dsth="137"/>
 <wipe type="push" direction="right" start="19" duration="3" target="4"
 srcx="200" srcy="137" srcw="200" srch="138" dstx="200" dsty="137" dstw="200" dsth="138"/>
 ...
 <!-- Zoom in and pan --/>
 <fadein start="29" duration="3" target="5"/>
 <viewchange start="32" duration="3" srcx="0" srcy="0" srcw="160" srch="160"/>
 <viewchange start="35.5" duration="3" srcx="96" srcy="0" srcw="160" srch="160"/>
 ...
</imfl>

좌표속성의 이해

source : srcx,srcy,srch,srcw
destination : dstx,dsty,dsth,dstw

srcx="0" srcy="0"
srch="128" srcw="128"

dstx="128" dsty="0" dsth="128" dstw="128"

srcx="0" srcy="0"
srch="128" srcw="128"
dstx="54" dsty="32"
dsth="192" dstw="192"

<fill /> 태그

지정구역을 채울때 사용
속성

color : 채워질 색상
dstx, dsty, dsth, dstw : 채워질 구역

target, aspect, start, duration, maxfps, url : 공통 속성 (이하의 효과에서 공통으로 적용)

예 (예제실행)

<fadein /> 및 <fadeout /> 태그

이미지를 점차적으로 나타나게 하거나 점차적으로 사라지게 하는 효과
속성

srcx, srcy, srch, srcw (fadein 경우만 적용)

dstx, dsty, dsth, dstw

color : fadeout 경우의 색상
target, aspect, start, duration, maxfps, url : 공통 속성

<image handle="1" name="20.gif" /> <fadein start="0" duration="2" target="1" />	fadein 예제실행
<image handle="1" name="20.gif" /> <fadein start="0" duration="2" target="1" aspect="true" srcx="0" srcy="0" srcw="200" srch="130"/>	일부분 fadein 예제실행
<image handle="1" name="20.gif" /> <fadein start="0" duration="2" target="1" /> <fadeout start="5" duration="2" target="1" />	fadein & fadeout 예제실행

<crossfade /> 태그

기존 이미지에서 새로운 이미지로 전환 (2개 이미지 사이)

fadein에서 사용하는 속성과 동일

예 (예제실행)

<wipe /> 태그

와이퍼 효과
속성

direction = left, right, up, down
type : normal, push

srcx, srcy, srch, srcw, dstx, dsty, dsth, dstw
target, aspect, start, duration, maxfps, url : 공통 속성

예 (예제실행)

<viewchange /> 태그

화면상의 이미지를 확대/축소하는 기능, 줌효과를 줄 수 있다.
속성

srcx, srcy, srch, srcw, dstx, dsty, dsth, dstw
target, start, duration, maxfps

예 (예제실행)

SMIL에 포함하기

SMIL 태그 : <textstream…/>, <img…/>

SMIL 예제

리얼텍스트+오디오(poet.smil) 예제실행	리얼픽스+오디오(india.smil) 예제실행
<smil> <head> <meta name="title" content="그대가 곁에 있어도 나는 그대가 그립다-류시화" /> </head> <body> <par> <textstream src="poet_scrolling.rt" /> <audio src="adagio.rm" end="00:40" /> </par> </body> </smil>	<smil> <head> <meta name="title" content="인도의 모습" /> </head> <body> <par> <img src="rpsample.rp" /> <audio src="adagio.rm" end="00:50" /> </par> </body> </smil>

SMIL을 웹페이지에 넣기

Embed태그로 웹페이지에 넣는방법

(poet.html) 웹페이지보기

(india.html) 웹페이지보기