百科解釋
1、SMIL簡(jiǎn)介
SMIL是同步多媒體集成語(yǔ)言(Synchronized Multimedia Integration Language)的縮寫,念做smile.它是由3W(World Wide Web Consortium)組織規(guī)定的多媒體操縱語(yǔ)言。最新的SMIL版本是2001年8月推出的SMIL 2.0版本(參與制定該標(biāo)準(zhǔn)的公司奇多,J 有Compaq、Gateway、IBM、Microsoft、RealNetworks、Oratrix等等。太多了,一口氣都下不來(lái)!!)。SMIL與我們網(wǎng)頁(yè)上用的HTML(超文本傳輸語(yǔ)言)的語(yǔ)法格式非常相似。后者主要針對(duì)普通的網(wǎng)絡(luò)媒體文件進(jìn)行操縱(文字、圖片、聲音、動(dòng)畫、視頻的機(jī)械堆砌),而前者則操縱多媒體片斷(對(duì)多媒體片斷的有機(jī)的、智能的組合)。J 看來(lái)這東西真的不錯(cuò)!
2、SMIL的優(yōu)點(diǎn)?
SMIL語(yǔ)言是一套已經(jīng)規(guī)定好的而且非常簡(jiǎn)單的標(biāo)記。它用來(lái)規(guī)定多媒體片斷(這里多媒體的包括的范圍有:聲音文件、視頻文件、動(dòng)畫、圖片、文字等)在什么時(shí)候、在什么地方、以什么樣的方式播放。糊涂了嗎?J 我們下面一起來(lái)看看SMIL的優(yōu)點(diǎn)(與眾不同的地方!):
為了方便起見(jiàn),我們把我們想要完成的作品稱之為演示(presentation)。
(1) 避免使用統(tǒng)一的包容文件格式
因?yàn)槲覀兊亩嗝襟w文件的格式的時(shí)非常多的,例如:像聲音就有*.mp3、*.wav、*.ra等等;視頻的格式更是多的出奇:*.mpg、*.avi、*.mov、*.rm等等;圖片的格式就更加不用說(shuō)了。J 如果我們想在本地機(jī)器上直接播放或者在網(wǎng)絡(luò)上用流式播放的方式來(lái)播放若干個(gè)文件。當(dāng)然我們希望的是不要總讓我們自己打開文件。而是,在上一個(gè)文件播放完成以后,就播放下一個(gè)。播放列表是個(gè)辦法。但是,如果格式不一樣,并且要求多個(gè)片斷同時(shí)播放(例如:顯示圖片的同時(shí),有解說(shuō)的聲音。圖片和聲音是兩個(gè)文件),那么以前唯一可行的辦法就是用對(duì)媒體的編輯軟件把這些多媒體文件整合成一個(gè)文件。這就必須統(tǒng)一使用某種文件格式。如果你的源文件(多個(gè)多媒體片斷)沒(méi)有保存副本的話,在你下次要用其中的某個(gè)源文件的時(shí)候,J 你就后悔去吧!如果我們用SMIL來(lái)組織這些多媒體文件,那么可以在不對(duì)源文件進(jìn)行任何修改的情形下,獲得我們想要的效果(從這里來(lái)看,SMIL好像是穿珍珠項(xiàng)鏈用的金絲線,只是把它們穿起來(lái)組成一個(gè)整體,而不會(huì)破會(huì)它們。)。當(dāng)然SMIL的功能決非就這么點(diǎn)。接下來(lái)就是:
(2)同時(shí)播放在不同地方(服務(wù)器上)的多媒體片斷
如果上面第一點(diǎn)你還可以用其他的辦法做到,那么這一條恐怕你就沒(méi)轍了?font face="Wingdings">J 考慮這樣一個(gè)實(shí)際問(wèn)題:假如我們現(xiàn)在想把一段電視采訪的實(shí)況(視頻文件)加上解說(shuō)(包括聲音解說(shuō)(音頻文件)和文字解說(shuō))。姑且假定例子中的視頻文件是甲服務(wù)器上的A文件,音頻文件是乙服務(wù)器上的B文件,而解說(shuō)文字卻是丙服務(wù)器上的C文件。傳統(tǒng)的方法在這里就束手無(wú)策了(窮途末路了J),而SMIL可以非常輕松的做到這一點(diǎn)。
(3)時(shí)間控制
如果我們不想用整個(gè)視頻文件,而只想用其中的某一部分。傳統(tǒng)的方法中唯一可行的就是用剪輯軟件來(lái)剪輯。費(fèi)時(shí)費(fèi)力不說(shuō),弄不好就弄巧成拙,把想要的給剪掉了!而SMIL完成這件事真的是易如反掌!看這樣一個(gè)例子:設(shè)視頻文件A的時(shí)間長(zhǎng)度是10秒,我們要用的是2~5秒,其他部分我們不想要,只要用SMIL規(guī)定:在該視頻文件A的第二秒開始播放,播放到第五秒結(jié)束就可以了。
時(shí)間控制的另外的部分是動(dòng)畫和轉(zhuǎn)場(chǎng)效果。如果上面的時(shí)間控制是絲綢,那么這個(gè)就是在它上面的雙面刺繡!后面我們將要詳細(xì)討論這個(gè)問(wèn)題。J
(4)對(duì)整個(gè)演示進(jìn)行布局
我們把上面提到的那個(gè)例子拿來(lái)說(shuō)明這個(gè)問(wèn)題:由于我們有視頻、有文字我們希望什么樣的布局呢?一般的情形下在一個(gè)區(qū)域(屏幕的上部)播放視頻,在另一個(gè)區(qū)域顯示文字(屏幕的底部)。當(dāng)然,如果你認(rèn)為在視頻上面顯示文字效果更好的話,那也是可以的。用SMIL實(shí)現(xiàn)這樣的效果異常容易!
(5)多語(yǔ)言選擇支持
分析這樣一個(gè)實(shí)際例子:我們要為某種產(chǎn)品作宣傳,其宣傳對(duì)象是多個(gè)國(guó)家的人,有英語(yǔ)國(guó)家的、有法語(yǔ)國(guó)家的、有德語(yǔ)國(guó)家的等等。當(dāng)然最主要是講中文的國(guó)家的人(我是中國(guó)人!)。如果我們想要所有的人都可以聽(tīng)懂、看懂我們的介紹,那么我們就的準(zhǔn)備不同語(yǔ)言版本的媒體文件。傳統(tǒng)的方法是讓用戶來(lái)選擇,然后從服務(wù)器上下載相應(yīng)的版本。麻煩就不用講了。萬(wàn)一我們的選擇老外都看不懂(有時(shí)候,我到德文、日文、朝鮮文的站點(diǎn)上,就不知道他們講些什么東西L),這怎么辦?如果把他們用SMIL來(lái)組織起來(lái)、規(guī)定好,那么SMIL語(yǔ)言將根據(jù)具體的語(yǔ)言設(shè)置來(lái)播放相應(yīng)版本的演示。就是方便!J
(6)多帶寬選擇支持
由于各個(gè)用戶連接到Internet的方式不盡相同,所以其連接的速度差別也較大。為了讓他們都能夠看到我們的演示,我們可以制作適應(yīng)不同傳輸速度的演示。在傳統(tǒng)的方法中,往往要用戶自己選擇他的機(jī)器連接所對(duì)應(yīng)的傳輸速度,然后播放相應(yīng)得演示文件。這確實(shí)解決了一些問(wèn)題。實(shí)際上,并不是所有的用戶都知道自己的連接速度,就是知道了,還得選擇不也是非常麻煩嗎?L SMIL解決這個(gè)問(wèn)題如同吹灰!播放器檢測(cè)出用戶的連接速度后,就同服務(wù)器“協(xié)商”,要求傳輸并播放相應(yīng)的演示文件。
下面我們看一個(gè)實(shí)際的SMIL的例子(用記事本編寫就可以,注意:在英文狀態(tài)下編輯。也就是不要打開中文輸入法。因?yàn)镾MIL播放器不認(rèn)識(shí)中文的標(biāo)點(diǎn)符號(hào)。
程序代碼
< smil>
< head>
< meta name="copyright" content="Your Name" />
< layout>
< !-- layout 標(biāo)記 -->
< /layout>
< /head>
< body>
< !—媒體標(biāo)記 -->
< img src="image1.jpg"/>
< /body>
< /smil>
顯然,SMIL和HTML語(yǔ)言的語(yǔ)法格式非常相像!所以,如果大家對(duì)HTML熟悉的話,SMIL學(xué)習(xí)起來(lái)就很容易。但是,二者的差別是很大的,所以如果想學(xué)的很好,大家一定要認(rèn)真地學(xué)!
從上面這個(gè)例子可以看出:
(1) SMIL程序以<smil>開始,以</smil>結(jié)束。
SMIL必須以<smil>開始,以</smil>結(jié)束,其他的一切標(biāo)記都在這二者之間。這個(gè)和HTML好像是一樣的。
(2) 整個(gè)程序由body和head兩個(gè)部分組成
其中body是必須要有的。而head部分則看實(shí)際情況。如果需要的話,我們就寫。若是整個(gè)SMIL程序非常簡(jiǎn)單并且沒(méi)有必要用head部分,那么,我們可以不寫。從個(gè)人的經(jīng)驗(yàn)來(lái)看,如果要寫出一個(gè)效果好的演示,head部分是必不可少的!J
(3) 屬性和標(biāo)記要求小寫
SMIL要求其標(biāo)記和標(biāo)記的屬性必須小寫!
我們?cè)谶@里不想給出屬性和標(biāo)記的定義。SMIL語(yǔ)言就是由標(biāo)記組成的。每一行都是標(biāo)記,而標(biāo)記基本上都有屬性。例如:< img src="image1.jpg"/>中,img是標(biāo)記,而src是屬性,image1.jpg是src的屬性值。注意:屬性值可以大小寫都可以。后面我們會(huì)碰到有些屬性值要求駱駝寫法。什么是駱駝寫法?像fadeTocolor這樣的屬性值(看看,中間高,兩邊低,是不是非常像駱駝的駝峰?J)就是駱駝寫法。
(4) 有些標(biāo)記必須有一斜杠作為結(jié)束標(biāo)記
在SMIL中,如果標(biāo)記不是配對(duì)標(biāo)記(例如:< smil>< /smil>、< head>< /head>、< body>< /body>等),那么,必須有一斜杠作為結(jié)束標(biāo)記(例如:< img src="image1.jpg"/>)。
(5) 屬性值必須用雙引號(hào)括起來(lái)
例如:src="image1.jpg"。注意:SMIL文件中出現(xiàn)的文件名必須和服務(wù)器上的文件名一致,其路徑一定要正確。否則,SMIL播放器找不到該文件。
(6) SMIL文件的拓展名為*.smil或者*.smi
我們必須以*.smil或者*.smi的拓展名來(lái)保存SMIL文件。這樣SMIL播放器才能認(rèn)出SMIL文件,以采用正確的解碼方式解碼、播放。為了防止與其它類型文件的拓展名沖突,強(qiáng)烈建議采用*.smil這個(gè)拓展名!注意:文件名必須是以數(shù)字、字母開始的,中間可以有下劃線,不可以有空格。例如:test_one.smil可以,而test one.smil堅(jiān)決不行!如果你喜歡的話,可以用我們上面講的駱駝寫法testOne.smil。注意:上面的例子大家可以原版復(fù)制,保存為testOne.smil。并且找一個(gè)圖片放到testOne.smil同一個(gè)文件夾下,并將image1.jpg改成你的圖片的名字(后面如果沒(méi)有特殊說(shuō)明,都得這么做),就可以用Realone player打開該源程序,看看我們的第一個(gè)演示的效果了。
(7) 附加信息寫在< head>< /head>之間
如果我們有些關(guān)于源代碼的一些說(shuō)明也就是附加信息,例如版權(quán)、作者、標(biāo)題、基地址等等,我們可以在< head>< /head>中說(shuō)明。其基本的格式是:< meta name=" " content=" " />,例如:
程序代碼
< meta name="author " content="litterone " />
< meta name="title " content="I want to learn SMI:L " />
(8) 用< !-- … -->進(jìn)行注釋
這個(gè)標(biāo)記和HTML里面的是一樣的。我們可以對(duì)我們的源文件進(jìn)行注釋。SMIL播放器遇到這個(gè)標(biāo)記后,將跳過(guò)去而不予理睬。例如:我們可以在寫源代碼以前,將我們想要實(shí)現(xiàn)的效果在< !-- … -->中寫出來(lái),然后在編寫源代碼,假如我們忘記了刪除該段說(shuō)明,也不會(huì)影響演示的執(zhí)行。
上面簡(jiǎn)單介紹了SMIL語(yǔ)言的基本知識(shí),接下來(lái)要詳詳細(xì)細(xì)地學(xué)習(xí)SMIL!
SMIL語(yǔ)言的內(nèi)容很多,我們從最常用的開始談起。(準(zhǔn)備好了嗎?上路了。
1、 多媒體片斷結(jié)構(gòu)組織(1)< seq>< /seq>標(biāo)記我們首先看下面這個(gè)例子:
程序代碼
< smil>
< head>
< /head>
< body>
< seq>
< img src="image1.jpg"/>
< img src="image2.jpg"/>
< /seq>
< /body>
< /smil>
請(qǐng)保存(記得要用*.smil這樣的文件格式 J)并運(yùn)行該源程序看看效果。我相信如果大家看到的是這樣的效果:Realone player先顯示image1.jpg,然后顯示image2.jpg。這就是我們這里用< seq>< /seq>這對(duì)順序播放標(biāo)記規(guī)定的結(jié)果。< seq>< /seq>規(guī)定的是:在< seq>< /seq>中間的多媒體片斷順序播放。如下圖所示。
(2) <par>< /par>標(biāo)記
接下來(lái)瞧瞧這個(gè)例子:
程序代碼
< smil>
< head>
< /head>
< body>
< par>
< img src="image1.jpg"/>
< img src="image2.jpg"/>
< /par>
< /body>
< /smil>
保存->運(yùn)行->看效果。Realone player同時(shí)顯示image1.jpg和image2.jpg。這就是我們這里用< par>< /par>這對(duì)并行播放標(biāo)記所得到的結(jié)果。< par>< /par>規(guī)定的是:在< par>< /par>中間的多媒體片斷并行播放。如下圖所示。
(3)< seq>< /seq>和< par>< /par>標(biāo)記協(xié)同使用分析下面這個(gè)例子:
程序代碼
< smil>
< head>
< /head>
< body>
< seq>
< img src="image1.jpg"/>
< par>
< img src="image2.jpg"/>
< img src="image3.jpg"/>
< /par>
< img src="image4.jpg"/>
< /seq>
< /body>
< /smil>
這個(gè)例子的效果是這樣的:Realone player先顯示image1.jpg,接下來(lái)同時(shí)顯示image2.jpg和image3.jpg, 然后顯示image4.jpg。為什么會(huì)這樣?其中原因我想大家一定非常清楚了。我就不羅嗦了。
有了< seq>< /seq>和< par>< /par>這樣兩對(duì)標(biāo)記后,我們對(duì)多媒體片斷播放的先后順序的控制就變得非常方便了。但是,我們上面的這些演示雖說(shuō)是演示了。但是,它們的顯示時(shí)間好像沒(méi)有受到我們的控制。接下來(lái)著手解決這個(gè)問(wèn)題。
2、 時(shí)間控制
(1)dur屬性
請(qǐng)大家看看下面這段代碼的效果。
程序代碼
< smil>
< head>
< /head>
< body>
< seq>
< img src="image1.jpg" dur="5s"/>
< img src="image2.jpg" dur="10s"/>
< /seq>
< /body>
< /smil>
相信大家已經(jīng)看出門道了!對(duì)了,我們這里對(duì)image1.jpg和image2.jpg的持續(xù)時(shí)間做了規(guī)定。其中image1.jpg持續(xù)時(shí)間5秒,image2.jpg持續(xù)時(shí)間10秒。
(2)begin和end屬性
上面規(guī)定的是播放多長(zhǎng)時(shí)間,我們也想規(guī)定在什么時(shí)候開始播放。請(qǐng)看下面的程序。
程序代碼
< smil>
< head>
< /head>
< body>
< img src="image1.jpg" begin="2" dur="5s"/>
< /body>
< /smil>
這個(gè)例子的效果是這樣的:Realone player先顯示image1.jpg,接下來(lái)同時(shí)顯示image2.jpg和image3.jpg, 然后顯示image4.jpg。為什么會(huì)這樣?其中原因我想大家一定非常清楚了。我就不羅嗦了。J
有了< seq>< /seq>和< par>< /par>這樣兩對(duì)標(biāo)記后,我們對(duì)多媒體片斷播放的先后順序的控制就變得非常方便了。但是,我們上面的這些演示雖說(shuō)是演示了。但是,它們的顯示時(shí)間好像沒(méi)有受到我們的控制。接下來(lái)著手解決這個(gè)問(wèn)題。
2、 時(shí)間控制
(1)dur屬性
請(qǐng)大家看看下面這段代碼的效果。
程序代碼
< smil>
< head>
< /head>
< body>
< seq>
< img src="image1.jpg" dur="5s"/>
< img src="image2.jpg" dur="10s"/ >
< /seq>
< /body>
< /smil>
相信大家已經(jīng)看出門道了!對(duì)了,我們這里對(duì)image1.jpg和image2.jpg的持續(xù)時(shí)間做了規(guī)定。其中image1.jpg持續(xù)時(shí)間5秒,image2.jpg持續(xù)時(shí)間10秒。
(2)begin和end屬性
上面規(guī)定的是播放多長(zhǎng)時(shí)間,我們也想規(guī)定在什么時(shí)候開始播放。請(qǐng)看下面的程序。
程序代碼
< smil>
< head>
< /head>
< body>
< img src="image1.jpg" begin="2" dur="5s"/>
< /body>
< /smil>
上面的這段程序規(guī)定就是圖片image1.jpg在整個(gè)演示進(jìn)行2秒后,開始顯示,持續(xù)的時(shí)間是5秒。對(duì)于圖片的控制是這樣,而我們常常需要對(duì)視頻/音頻的時(shí)間進(jìn)行控制。下面這個(gè)例子來(lái)說(shuō)明這個(gè)問(wèn)題。
程序代碼
< smil>
< head>
< /head>
< body>
< video src="test.rm" begin="5s" end="40s"/>
< /body>
< /smil>
test.rm這個(gè)視頻文件(如果大家手頭上沒(méi)有*.rm格式文件,就用Realone player的firstrun.rm或者找個(gè)*.avi的也可以。但是文件名要寫對(duì)!)在整個(gè)演示開始5秒后開始播放,在整個(gè)演示播放40秒以后,就結(jié)束播放。實(shí)際的播放時(shí)間是:40-5=35秒。但是,一般情形下,我們的視頻總在一個(gè)組中,這時(shí)候,他就的服從組的時(shí)間了。我們那下面的這個(gè)例子來(lái)解釋這問(wèn)題。
程序代碼
< smil>
< body>
< seq dur="5">
< img src="image1.jpg" begin="2" dur="10"/>
< /seq>
< /body>
< /smil>
image1.jpg所在的組的持續(xù)時(shí)間為5秒,而image1.jpg自己要求持續(xù)10秒,這是不行的。實(shí)際上image1.jpg的顯示時(shí)間只有5-2=3秒!大家在以后寫程序的時(shí)候要注意這個(gè)問(wèn)題。
(3)clip-begin和clip-end屬性
考慮這樣一種效果:
我們只要test.rm播放這個(gè)視頻/音頻的5~10秒這個(gè)時(shí)間斷,怎么辦???J有了clip-begin和clip-end,問(wèn)題就很簡(jiǎn)單了!請(qǐng)看:
程序代碼
< smil> < body>< video src="test.rm" clip-begin="5s" clip-end="10s"/> < /body>< /smil>
clip-begin和clip-end屬性是用內(nèi)部時(shí)間控制的屬性。這里的內(nèi)部指的就是多媒體片斷自己的時(shí)間線(timeline)。前者規(guī)定在什么地方開始播放,后者規(guī)定放到什么地方結(jié)束播放。為了更清楚的理解這些時(shí)間控制,我們看下面的這個(gè)例子:
程序代碼
< smil>
< body>
< par>
< audio src="testone.rm" clip-begin="5" dur="10s"/>
< audio src="testtwo.rm" begin="7s" clip-begin="2s"clip-end="15s"/>
< /par>
< /body>
< /smil>
看看下面這個(gè)示意圖: 顯然,首先是testone.rm從自己的5秒處開始播放,播放7秒以后,testtwo.rm從自己的2秒處開始與testone.rm一起播放,testone.rm播放到自己得15秒處停止播放,testone.rm播放了15-5=10秒。testtwo.rm播放到自己得15秒處停止播放,testone.rm播放了15-2=13秒。圖中灰色(黃色)部分表示播放的部分。
接下來(lái)我們對(duì)時(shí)間的表示方法做個(gè)說(shuō)明(默認(rèn)的時(shí)間是秒,所以"2s" 、"2.0s"和"2"都是一樣的 ):
時(shí)間標(biāo)記 指代 例子 說(shuō)明
h 小時(shí) 1.5h 1小時(shí)30分鐘
min 分鐘 4.75min 4分45秒
s 秒 10.45 10秒450毫秒
正確的時(shí)間寫法是: hh:mm:ss.xy。hh表示小時(shí);mm表示分鐘;ss表示秒;x表示1/10秒;y表示1/100秒。例如:begin="01:40.0"表示的是1分40秒處開始,而begin="01:40"表示的是1小時(shí)40分處開始。真的注意呀J。
時(shí)間控制非常重要,它直接影響我們演示的效果。而我們上面講的這部分是最重要的,所以大家一定要理解上面的各個(gè)時(shí)間概念及其含義。
(4)fill屬性
當(dāng)演示中的某個(gè)片斷播放完成以后,我們可以用fill屬性來(lái)規(guī)定它的顯示狀態(tài)。簡(jiǎn)單的說(shuō)就是我們是清屏還是凍結(jié)屏幕。看下面這個(gè)例子:
程序代碼
< smil>
< body>
< video src="test.rm" dur="30s" fill="freeze"/>
< /body>
< /smil>
假設(shè)test.rm的長(zhǎng)度是20秒,那么我們這里規(guī)定的就是:在test.rm播放終了以后,屏幕上顯示的是test.rm的最后一幀(通俗的說(shuō)就是最后一幅畫面),顯示的時(shí)間是30-20=10秒;如果是圖片的話,那么顯示就是圖片。
Fill屬性只有remove和freeze兩個(gè),默認(rèn)的值為remove。建議大家在演示的最后的一個(gè)多媒體片斷上用凍結(jié)(freeze),以防止屏幕上空空如也!J
(5)repeat屬性
如果我們希望我們演示中的某個(gè)片斷或者全部的片斷重復(fù)播放若干次(姑且設(shè)為2次)。那么我們可以后用repeat屬性來(lái)實(shí)現(xiàn)該效果。分析下面這個(gè)例子:
程序代碼
< smil>
< body>
< vedio src="test.rm" dur="1min" repeat="2"/>
< /body>
< /smil>
上面這個(gè)例子就是讓test.rm播放兩次。如果我們想讓某個(gè)片斷一直播放下去(網(wǎng)絡(luò)光廣告上可以考慮這個(gè)),那么repeat="indefinite"就可以了。當(dāng)然,想要它停下來(lái)的一種方法是按下播放器stop(停止)鍵(在網(wǎng)頁(yè)插件中就是右鍵菜單中的stop);另外的一種辦法(大家都知道的)是關(guān)閉計(jì)算機(jī)!J
3、 布局設(shè)計(jì)
我們這里所說(shuō)的布局就是在我們的屏幕上定出各個(gè)多媒體片斷顯示的位置(單純的聲音文件是不需要布局的!為什么?J 因?yàn)槲覀兊亩渎?tīng)不出聲音在屏幕上的什么地方;而我們的眼睛可以看到圖片、動(dòng)畫和文字在什么地方。瑴(zhǔn)確地說(shuō)是在播放器中。從前面我們并行播放的例子可以看出來(lái),如果我們不對(duì)布局進(jìn)行設(shè)計(jì),那么顯示的效果一塌糊涂!這里是SMIL的重點(diǎn)和精華部分之一,打起精神,Let’s go!
(1) 定義基本顯示窗口
看下面的代碼:
程序代碼
< smil>
< head>
< layout>
< root-layout width="300" height="200" background-color="white" />
< /layout>
< /head>
< body>
< /body>
< /smil>
說(shuō)明:a、 布局標(biāo)記必須以< layout>開頭,以< /layout>結(jié)束,其他具體的標(biāo)記都在這中間。< layout>< /layout>必須放在< head>< /head>之間。
b、 root-layout標(biāo)記表明的是規(guī)定最基本的、最底層的窗口。其他一切窗口都在它的基礎(chǔ)上劃分出來(lái)。
c、 width="300" 表明窗口寬為300個(gè)像素點(diǎn);height="200"表明窗口高為200個(gè)像素點(diǎn);background-color="black"表明窗口的背景顏色為黑色。這里也可以用顏色代碼。例如:background-color="#000000"。個(gè)人更喜歡代碼,因?yàn)轭伾a表達(dá)顏色眾多,但是代碼不直觀。
(2) 定義多媒體片斷顯示窗口
分析下面這段源程序:
程序代碼
< smil>
< head>
< layout>
< root-layout width="300" height="300" background-color="yellow" />
< region id="vedio_region" left="5" top="5" width="290" height="260" />
< region id="text_region" left="5" top="270" width="290" height="25" background-color="white"/>
< /layout>
< /head>
< body>
< par>
< vedio src="test.rm" region="vedio_region" />
< text src="test.txt" region="text_region"/>
< /par>
< /body>
< /smil>
說(shuō)明:
a、< region id="vedio_region" left="5" top="5" width="290" height="260" />定義多媒體片斷顯示窗口,它的id是vedio_region,這個(gè)id是必須要的(在SMIL中,有的id號(hào)是可以省略的,但是我們建議大家都寫上,這樣很容易把整個(gè)SMIL文件的脈絡(luò)弄清楚)!離頂端和左段各有5個(gè)像素點(diǎn)的距離(注意:這里的坐標(biāo)是相對(duì)基本顯示窗口而言!)。窗口寬為290個(gè)像素點(diǎn);高為260個(gè)像素點(diǎn)。下面的顯示窗口的定義和這個(gè)是一樣的。
b、< vedio src="test.rm" region="vedio_region" />聲明了多媒體片斷test.rm在vedio_region這個(gè)區(qū)域播放;< text src="test.txt" region="text_region"/>聲明了文本文件test.txt在vedio_region這個(gè)區(qū)域顯示。
該例子布局效果如下圖:
上面我們對(duì)多媒體片斷顯示窗口的采用的是絕對(duì)定義的方法。多媒體片斷顯示窗口也可以用相對(duì)定義的方法來(lái)定義。例如:
<region id="vedio_region" top="10%" left="10%" width="80%" height="80%"/>
上面的比例是相對(duì)基本顯示窗口而言的。這樣的定義方法更為直觀。
(3) fit屬性
在實(shí)際制作演示的時(shí)候,我們碰到了這樣的問(wèn)題:我們定義的顯示窗口的大小和我們的多媒體片斷的尺寸大小不一致,或大了或小了。相信大家也會(huì)碰到這樣的問(wèn)題。解決的辦法有:
a、 修改窗口的大小(但是,很多時(shí)候我們沒(méi)有辦法修改。因?yàn),如果修改的話,那么?huì)影響其他窗口的顯示。相應(yīng)的其它窗口也得修改。實(shí)際情況是:我們很多的不同尺寸的多媒體片斷都可能在同一個(gè)窗口中顯示。。
b、 使用恰當(dāng)?shù)亩嗝襟w片斷和窗口的匹配方式。
看小面這段代碼:
程序代碼
< region id="vedio_region" width="80%" height="80%" fit="meet"/>
它的意思就是窗口vedio_region以meet方式顯示多媒體片斷。
fit屬性的屬性值有hidden、meet、fill、scroll和slice四個(gè)。其中hidden是默認(rèn)的屬性值。
Hidden表示保持多媒體片斷的尺寸不變,從窗口的左上角開始顯示。如果多媒體片斷尺寸比窗口的尺寸小,那么空白的地方將用背景色填充。如果多媒體片斷尺寸比窗口的尺寸大,那么多媒體片斷超出窗口部分被裁去,不被顯示。個(gè)人不喜歡這樣的方式。
meet表示在保持多媒體片斷寬/高比例不變的情況下,對(duì)多媒體片斷的尺寸進(jìn)行縮放。從左上角開始顯示,縮放到高度和寬度中的一個(gè)尺寸等于窗口的相應(yīng)的尺寸,而另外的一個(gè)小于窗口的相應(yīng)的尺寸?瞻滋幱帽尘吧畛洹N蚁矚g這個(gè)!
fill表示縮放多媒體片斷使得其大小正好和窗口的大小一致。如果多媒體片斷的寬/高比例和窗口的寬/高比例不等,那么多媒體片斷就會(huì)變形,非常難看。強(qiáng)烈建議不要采用這種方式!
scroll表示對(duì)多媒體片斷的尺寸不做什么修改,它以正常的尺寸大小顯示。但是,如果多媒體片斷的尺寸超出了窗口的尺寸,那么將會(huì)相應(yīng)出現(xiàn)水平或者垂直滾動(dòng)條。該種發(fā)式適合于長(zhǎng)時(shí)間的多媒體片斷的顯示。如果多媒體片斷的顯示時(shí)間很短,建議不要使用!
slice表示在保持多媒體片斷寬/高比例不變的情況下,對(duì)多媒體片斷的尺寸進(jìn)行縮放。從左上角開始顯示,縮放到高度和寬度中的一個(gè)尺寸等于窗口的相應(yīng)的尺寸,而另外的一個(gè)大于窗口的相應(yīng)的尺寸。超出的不分被裁去而不顯示。
各個(gè)匹配的效果請(qǐng)參見(jiàn)下圖(省去scroll效果)
(4)z-index屬性
先試運(yùn)行下面的源程序:
程序代碼
< smil>
< head>
< layout>
< root-layout width="300" height="300" />
< region id="vedio1_region" width="300" height="300" />
< region id="vedio2_region" left="270" top="270" width="30" height="30" />
< /layout>
< /head>
< body>
< par>
< vedio src="testone.rm" region="vedio1_region"/>
< vedio src="testtwo.rm" region="vedio2_region" />
< /par>
< /body>
< /smil>
我想大家已經(jīng)看出來(lái)了:我們這里想做的就是那種電視的畫中畫效果。但是在實(shí)際顯示的時(shí)候,我們的小畫面有時(shí)候被大畫面所覆蓋。我的苦心也白費(fèi)了。z-index屬性這個(gè)時(shí)候是我們的救星。
修改< region id="vedio1_region" width="300" height="300" />
< region id="vedio2_region" left="270" top="270" width="30" height="30" />
成:< region id="vedio1_region" width="300" height="300" z-index="0"/>
< region id="vedio2_region" left="270" top="270" width="30" height="30" z-index="1" />
在看看效果,行了嗎?J
z-index屬性規(guī)定相互重疊的窗口的顯示次序。數(shù)字大那么顯示就在上面。這個(gè)很容易理解,我們就不說(shuō)太多。但是以下幾點(diǎn)要注意:
a、root層窗口總是在最后一層,并且不用z-index屬性。
b、z-index屬性值可以是負(fù)數(shù)。當(dāng)然它就的排在0以后。
c、 沒(méi)有重疊的窗口可以使用同一z-index屬性值。
4、 鏈接制作
傳統(tǒng)的流媒體的最大的一個(gè)弊端是沒(méi)有交互性(Interaction),F(xiàn)在如日中天的flash本質(zhì)上就是一種可交互性的流!由此可見(jiàn)可交互性的流的市場(chǎng)潛力。而SMIL是解決大部分流媒體交互性的最好的工具!這部分要求大家必須掌握,如果沒(méi)有的話,那么我們學(xué)習(xí)SMIL就失去了意義。因?yàn)檫@里是SMIL的主要特色(與其他的視頻編輯軟件相比較),就好像指針是C語(yǔ)言的特色一樣。
(1)< a>< /a>標(biāo)記
運(yùn)行下面這個(gè)程序:
程序代碼
< smil>
< head>
< layout>
< root-layout width="300" height="300"/>
< region id="videoregion" top="0" left="0" width="300" height="300"/>
< layout>
< /head>
< body>
< a href="1.rm">
< video src="videotest.rm" region="videoregion"/>
< /a>
< /body>
< /smil>
正常情況下,我們看到播放器播放videotest.rm,如果我們把鼠標(biāo)放到正在播放的videotest.rm上面,鼠標(biāo)將有指針形狀變?yōu)樾∈中螤。單擊鼠?biāo)左鍵,播放器播放將停止播放videotest.rm而播放1.rm這個(gè)文件。這里我們就成功的創(chuàng)建了一個(gè)很簡(jiǎn)單的鏈接。<a></a>屬性就是用于鏈接標(biāo)記,href表示的是所要鏈接的文件。這種方法非常簡(jiǎn)單,我們就不做過(guò)多的介紹。
如果我們要?jiǎng)?chuàng)建更加復(fù)雜的鏈接,我們就要用到下面的這個(gè)屬性。
(2)< anchor>屬性
將上例中的< body>< /body>換成下面這段代碼,看看效果是不是有區(qū)別?
程序代碼
< body>
< video src="videotest.rm" region="videoregion">
< anchor href="1.rm"/>
< /video>
< /body>
我們看到的效果是完全一樣的!那么<anchor>屬性不就多余了嗎? 那是不會(huì)的!JJ請(qǐng)看:
a、 分時(shí)斷鏈接
考慮這樣一個(gè)問(wèn)題:我們要在0~10秒鏈到一個(gè)文件,10~20秒鏈到另一個(gè)文件,該怎么辦?看我們的:
程序代碼
< body>
< video src="1.avi" region="videoregion">
< anchor href="1.jpg" begin="0s" end="10s" >
< anchor href="videotest.rm" begin="10s" end="20s" />
< /video>
大家將看到的效果:播放器播放1.avi,在0~10秒鏈到1.jpg,在10~20秒鏈到videotest.rm。警告:dur、clip-begin和clip-end這里不支持!
B、鏈接部分SMIL
我們的鏈接可以鏈接的文件很多,幾乎所用的多媒體片斷都可以。*.smil和*.html也可以。但是,下面我們要討論的是如何鏈接部分SMIL。請(qǐng)看例子。
第一個(gè)SMIL文件,取名test11.smil
程序代碼
< smil>
< head>
< layout>
< root-layout width="400" height="300"/>
< region id="videoregion" top="0" left="0" width="400" height="300" fit="meet"/>
< /layout>
< /head>
< body>
< video src="1.avi" region="videoregion">
< anchor href="test11app.smil#testlink"/>
< /video>
< /body>
< /smil>
第一個(gè)SMIL文件,取名test11app.smil
程序代碼
< smil>
< head>
< layout>
< root-layout width="400" height="300"/>
< region id="videoregion" top="0" left="0" width="400" height="300" fit="meet"/>
< /layout>
< /head>
< body>
< video id="testlink" src="1.avi" clip-begin="150" region="videoregion"/>
< /body>
< /smil>
大家一定看出來(lái)了!我就是在test11app.smil中為我們要鏈接的那部分內(nèi)容設(shè)上id,然后在test11.smil中的鏈接中用“#”來(lái)指向該標(biāo)記id。應(yīng)用的很多的時(shí)候是組內(nèi)內(nèi)容。我們把test11app.smil修改為:
程序代碼
< body>
< par id="testlink">
< video src="1.avi" clip-begin="150" region="videoregion"/>
< /par>
< /body>
到這里,鏈接可以說(shuō)已經(jīng)很完美了。但是,如果要錦上添花,那么下面這個(gè)屬性是必不可少的。
(3)coords屬性
將上面的<anchor href="1.rm"/>代碼修改為:
< anchor href="1.rm" coords="0, 0,150,300"/>
或者:
< anchor href="1.rm" coords="0%, 0%,50%,100%"/>
運(yùn)行,看看效果。JJ我們看到左半部分有鏈接效果,而右半部分卻沒(méi)有!這是我們采用了坐標(biāo)規(guī)定鏈接區(qū)的緣故。coords屬性值的第一、二個(gè)數(shù)分別表示的是鏈接區(qū)的左上角點(diǎn)的水平(left)和垂直(top)坐標(biāo);第三、四個(gè)數(shù)分別表示的是鏈接區(qū)的右下角點(diǎn)的水平(left)和垂直(top)坐標(biāo)。上面用的是像素點(diǎn)的絕對(duì)定義方法,下面用的是比例的相對(duì)定義方法。喜歡哪一個(gè)就看你的喜好了。
(5)鏈接注意
我們的演示最后基本上都要放到服務(wù)器上。因此,文件的位置的規(guī)定就非常重要,如果文件位置出錯(cuò),那么播放器將找不到文件而不能播放。這是我們最不希望看到的!下面我們就來(lái)討論這個(gè)問(wèn)題。
A、創(chuàng)建基地址
看下面的代碼:
程序代碼
< head>
< meta name="base" content="rtsp://abc.5dmedia.com/"/>
< /head>
上面就是在< head>< /head>中用附加信息的方式規(guī)定了整個(gè)smil文件的基地址為rtsp://abc.5dmedia.com/。規(guī)定了基地址以后,我們?cè)谟迷摰刂废碌奈募臅r(shí)候,就只需要給出路徑就可以了。例如:
程序代碼
< body>
< video src="video/first.rm"/>
< video src=" video /second.rm"/>
< audio src="rtsp:// abc.mysite.com:554/audio/test.mp3"/>
< img src="http// www.5dmedia.com/image/welcome.jpg"/>
< /body>
這個(gè)例子中的前面的兩個(gè)文件用的是基地址服務(wù)器上的文件,所以,可以之寫出相對(duì)地址。但是,后面的兩個(gè)文件用的是其他服務(wù)器上的文件,我們必須給出絕對(duì)地址。其中rtsp是實(shí)時(shí)流傳輸協(xié)議,它保證SMIL播放器正確地從流服務(wù)器abc.mysite.com上的audio文件夾下獲得我的所要的文件test.mp3。554為流服務(wù)器的端口。http是超文本傳輸協(xié)議。它保證SMIL播放器正確地從web服務(wù)器www.5dmedia.com上的image文件夾下獲得我的所要的文件welcome.jpg。< audio src="rtsp:// abc.mysite.com:554/audio/test.mp3"/>說(shuō)明的是該文件不在上面的基地址下,而在rtsp:// abc.mysite.com:554/audio/這個(gè)地方法,所我們必須修改地址。
如果我們用的是本地機(jī)器硬盤上的文件就可以用src="file:/c:audiofirst.rm"進(jìn)行讀取該文件。
大家在調(diào)用文件之前,一定要弄清楚文件的位置!
5、語(yǔ)言選擇和智能流
(1)語(yǔ)言選擇
如果,我們想要擴(kuò)大我們演示的收看人群,那么我們的聽(tīng)眾就會(huì)有中國(guó)人、美國(guó)人、法國(guó)人、俄羅斯等等。那么怎樣才能提供這種多國(guó)語(yǔ)言的支持呢?
Switch屬性是該問(wèn)題的“殺手”!
請(qǐng)看例子:
程序代碼
< smil>
< body>
< switch>
< video src="English.rm" system-language="en-us"/>
< video src="Chinese.rm" system-language="zh-cn"/>
< /switch>
< /body>
< /smil>
在SMIL播放器播放該SMIL文件時(shí),檢測(cè)你的播放器設(shè)置的是什么語(yǔ)言,如果是美國(guó)英語(yǔ)(en-us),那么就從服務(wù)器下載English.rm播放;如果是簡(jiǎn)體中文(zh-cn),那么就從服務(wù)器下載Chinese.rm文件播放。你可以設(shè)置很多的國(guó)家的選項(xiàng)。當(dāng)然你的語(yǔ)言的版本也就很多了。J下面我們給出經(jīng)常使用的一些語(yǔ)言的代碼。
代碼 語(yǔ)言
zh-cn 中文 (中華人民共和國(guó))
en-us 英語(yǔ) (美國(guó))
fr 法語(yǔ) (標(biāo)準(zhǔn)法語(yǔ))
de 德育(標(biāo)準(zhǔn)德語(yǔ))
it 意大利語(yǔ)(標(biāo)準(zhǔn)意大利語(yǔ))
ja 日語(yǔ)
es 西班牙語(yǔ)(西班牙)
2)智能流(surestream)
用戶的聯(lián)網(wǎng)速度是不盡相同的。有的可能只有50K左右,有的可能有幾百K。如果我們滿足了高速用戶的要求,那么低速用戶可能由于速度太慢而不能收看。如果我們滿足了低速用戶的要求,那么高速用戶看到的效果就打了不少的折扣,浪費(fèi)了高速的帶寬。怎么辦?
程序代碼
< smil>
< body>
< switch>
< vedio src="highspeed.rm" system-bitrate="250000"/>
< vedio src="midspeed.rm" system-bitrate="80000"/>
< vedio src="lowspeed.rm" system-bitrate="20000"/>
< /switch>
< /body>
< /smil>
當(dāng)用戶的聯(lián)網(wǎng)速度大于250kbps時(shí),播放器就從服務(wù)器下載highspeed.rm播放;如果用戶的聯(lián)網(wǎng)速度大于80kbps小于250kbps時(shí),播放器就從服務(wù)器下載midspeed.rm播放;如果用戶的聯(lián)網(wǎng)速度大于20kbps小于80kbps時(shí),播放器就從服務(wù)器下載lowspeed.rm播放。所謂的“眾口難調(diào)”在各位的手里就變得如此簡(jiǎn)單!J
上面講的就是智能流(surestream)的本質(zhì)實(shí)現(xiàn)方法!我們下面看一個(gè)復(fù)雜的一點(diǎn)的例子。
程序代碼
< body>
< switch>
< par system-bitrate="225000">
< !--聯(lián)網(wǎng)速度大于250kbps時(shí),播放該組-->
< audio src="audio/music1.rm"/>
< video src="video/video1.rm" region="videoregion"/>
< text src="words/narration.txt" region="textregion"/>
< /par>
< par system-bitrate="80000">
< !--聯(lián)網(wǎng)速度大于80000bps而小于250000bps時(shí),播放該組-->
< audio src="audio/music2.rm"/>
< video src="video/video2.rm" region="videoregion"/>
< textstream src="words/narration.rt" region="textregion"/>
< /par>
< par system-bitrate="20000">
< !--聯(lián)網(wǎng)速度大于20kbps而小于80kbps時(shí),播放該組-->
< audio src="audio/music3.rm"/>
< video src="video/video3.rm" region="videoregion"/>
< text src="words/narration.txt" region="textregion"/>
< /par>
< /switch>
< /body>
(3)語(yǔ)言與速度的同時(shí)檢測(cè)
程序代碼
< body>
< switch> < !—簡(jiǎn)體中文并且速度大于28kbps -->
< text src=" Chinese_14000.txt" system-language="zh-cn" system-bitrate="28000" /> < !--簡(jiǎn)體中文并且速度大于14kbps -->
< text src="Chinese_28000.txt" system-language="zh-cn" system-bitrate="14000" /> < !—美國(guó)英文并且速度大于28kbps -->
< text src="english_14000.txt" system-language="en-us" system-bitrate="28000" /> < !--美國(guó)英文并且速度大于14kbps -->
< text src="english_28000.txt" system-language="en-us" system-bitrate="14000" />
< /switch>
< /body>
(4)演示速度的控制上面我們講的是在演示文件已經(jīng)創(chuàng)建好的條件下進(jìn)行的。那么,我們?cè)鯓又谱骱枚嗝襟w片斷。下面是我們的建議:a、 用Realproducer或者其他的壓縮工具制作流文件時(shí),選擇正確的壓縮比例。為高速用戶準(zhǔn)備的文件的壓縮比可以小一些,對(duì)于低速用戶準(zhǔn)備的文件的壓縮比要大一點(diǎn)。b、 在網(wǎng)絡(luò)傳輸過(guò)程中,視頻占用的帶寬是最多的,音頻次之,接下來(lái)是動(dòng)畫、圖片,文字是最少的。所以,我們充分考慮我們的演示的結(jié)構(gòu)。例如:如果并行播放多個(gè)視頻,這顯然是不合適的。我們可以用圖片來(lái)替代一部分視頻效果。
c、 我們?cè)趥鬏斨胁荒苋空加糜脩舻膸挘仨毩舫鲆徊糠纸o用戶瀏覽網(wǎng)頁(yè)或者是干其它用途的。JJJ我們很多的年輕人當(dāng)然是用于QQ 聊天!下表列出了我們的建議。
用戶速度 建議最大流占用帶寬
14.4 Kbps modem 10 Kbps
28.8 Kbps modem 20 Kbps
56 Kbps modem 34 Kbps
64 Kbps ISDN 45 Kbps
112 Kbps dual ISDN 80 Kbps
Corporate LAN 150 Kbps
256 Kbps DSL/cable modem 225 Kbps
384 Kbps DSL/cable modem 350 Kbps
512 Kbps DSL/cable modem 450 Kbps
在我們以后的制作中。上面的這些知識(shí)是非常實(shí)用的。大家一定要努力掌握!
6、 動(dòng)畫效果
我們前面學(xué)習(xí)的內(nèi)容是SMIL1.0規(guī)定的。在SMIL2.0中添加了不少的內(nèi)容,其中動(dòng)畫就是其中一個(gè)。很多的國(guó)外的教程上把flash文件*.swf歸為這一類。我們不能同意這樣的分類方法。我們認(rèn)為把這樣已經(jīng)做好的動(dòng)畫該歸為視頻一類。真正的動(dòng)畫(從SMIL2.0規(guī)范中可以看出來(lái))是有SMIL規(guī)定的并有SMIL播放器解釋產(chǎn)生的動(dòng)畫。
從實(shí)際情況來(lái)看,動(dòng)畫效果主要是針對(duì)圖片產(chǎn)生的。所以,我們?cè)谶@里用圖片來(lái)做例子。其他的多媒體的制作方法是類似的。有興趣的GG、JJ、DD和MM可以自己做做。
(1) 運(yùn)動(dòng)動(dòng)畫
為先睹為快,請(qǐng)?jiān)赗ealone player中運(yùn)行下面的程序:
程序代碼
< smil xmlns="http://www.w3.org/2000/SMIL20/CR/Language">
< head>
< layout>
< root-layout width="800" height="600"/>
< region id="Images" left="0" width="800" height="600"/>
< /layout>
< /head>
< body>
< img region="Images" src="g03.jpg" dur="6s">
< animateMotion from="0 0" to="600 400" dur="4s"/>
< /img>
< /body>
< /smil>
解釋:a、我們這里用到的是SMIL2.0規(guī)范中的規(guī)定的內(nèi)容的。所以,在第一行里(xmlns="http://www.w3.org/2000/SMIL20/CR/Language")我們必須聲明我們所用的規(guī)范。不然的話,播放器可能不能正確解碼、播放。
b、 animateMotion標(biāo)記聲明的是我們所要的動(dòng)畫類型。注意:這里就是我們所說(shuō)的駱駝寫法,還記得吧!JJ
c、 from="0 0" to="600 400"屬性及其屬性值聲明的是動(dòng)畫從坐標(biāo)點(diǎn)(0,0)運(yùn)動(dòng)到坐標(biāo)點(diǎn)(600,400)。這里我們也可以寫成:< animateMotion from="0,0" to="600,400" dur="4s"/>
d、 dur="4s"屬性及其屬性值聲明的是動(dòng)畫在4秒內(nèi)完成。在我們這個(gè)例子中,圖片的存在時(shí)間是6秒,那么動(dòng)畫完成后,將有2秒鐘的時(shí)間靜止不動(dòng)。如果圖片的存在時(shí)間小于動(dòng)畫存在時(shí)間,那么動(dòng)畫運(yùn)動(dòng)到半路上就的停止,這樣的情況是該避免的。
(2) 縮放動(dòng)畫
下面我們看看另外的一種動(dòng)畫形式:縮放動(dòng)畫。先看效果!J
程序代碼
< smil xmlns="http://www.w3.org/2000/SMIL20/CR/Language">
< head>
< layout>
< root-layout width="800" height="600"/>
< region id="Images" left="0" width="800" height="600" fit="meet"/>
< /layout>
< /head>
< body>
< img region="Images" dur="10s" src="g03.jpg" width="400" height="320">
< animate attributeName="height" from="320" to="160" fill="freeze" dur="10s"/>
< /img>
< /body>
< /smil>
解釋:animate attributeName="height" from="320" to="160"聲明了動(dòng)畫的類型和參數(shù)。大家看了效果以后,在結(jié)合上面的參數(shù)的意義,各參數(shù)是什么意思我們也就不用多講了。J
7、 轉(zhuǎn)場(chǎng)效果 首先解釋一下什么是轉(zhuǎn)場(chǎng)效果。我們的演示中多媒體片斷是很多的,不可避免的會(huì)有兩個(gè)片斷之間的切換。例如:一個(gè)圖片演示完了,該接著演示下一個(gè)圖片,兩圖片中間是有一個(gè)過(guò)渡的。這個(gè)過(guò)渡我們就稱謂轉(zhuǎn)場(chǎng)效果。如果我們不設(shè)置轉(zhuǎn)場(chǎng)效果,那么,過(guò)渡的效果肯定不好。LSMIL中的轉(zhuǎn)場(chǎng)效果大致分為wipe和fade兩類。(1) fade類型從名字就可以看出,這個(gè)是淡入淡出的效果。先睹為快!J 請(qǐng)看例子!
程序代碼
< smil xmlns="http://www.w3.org/2001/SMIL20/Language">
< head>
< transition id="fade1" type="fade" subtype="fadeToColor" dur="4s" />
< transition id="fade2" type="fade" subtype="fadeFromColor" dur="4s" />
< /head>
< body>
< img src="g04.jpg" dur="10s" transIn="fade2" transOut="fade1"/>
< /body>
</smil>
解釋:a、transition聲明我們要設(shè)置轉(zhuǎn)場(chǎng)效果。id="fade1"設(shè)置了該轉(zhuǎn)場(chǎng)效果的id號(hào)。id號(hào)必須設(shè)置。type="fade"設(shè)置了轉(zhuǎn)場(chǎng)效果的基本類型為fade。 subtype="fadeToColor"設(shè)置了轉(zhuǎn)場(chǎng)效果的具體類型(子類型)為fadeToColor(注意這里又是我們提到的駱駝寫法!)。dur="4s"設(shè)置了該場(chǎng)效果完成的時(shí)間。b、transIn="fade2"設(shè)置了圖片g04.jpg顯示時(shí)采用轉(zhuǎn)場(chǎng)效果fade2; transOut="fade1"規(guī)定圖片g04.jpg完成顯示時(shí)采用轉(zhuǎn)場(chǎng)效果fade1。c、fade只有三個(gè)子類型。上面我們用了2個(gè)。還有一個(gè)是crossfade,這個(gè)也是缺省設(shè)置。
(2) wipe類型
wipe為擦去類型。該類型的效果很多很多。我們這里所說(shuō)的wipe只是他們的總稱(注意wipe不能作為type的屬性值,而是它的子類作為type的屬性值,子類的子類作為subtype的屬性值!J誰(shuí)讓它的屬性值這么多!。。>唧w的有barWipe、boxWipe、fourBoxWipe等36大類!!!不管它有多少類,先看看怎么弄。請(qǐng)看例子:
程序代碼
< smil xmlns="http://www.w3.org/2001/SMIL20/Language">
< head>
< transition id="wipe1" type="slideWipe" subtype="fromTop"/>
< transition id="wipe2" type="waterfallWipe"/>
< /head>
< body>
< img src="g03.jpg" transIn="wipe1" transOut="wipe2" dur="5s"/>
< /body>
< /smil>
解釋:a、JJJ和上面的寫法基本上是一致的!
b、type="waterfallWipe"后面沒(méi)有子類型表示使用的是waterfallWipe類型的默認(rèn)子類型。
(3) 綜合應(yīng)用
我們上面都只是用在單個(gè)多媒體片斷上的轉(zhuǎn)場(chǎng)效果。下面看看在多個(gè)多媒體片斷上怎樣設(shè)置轉(zhuǎn)場(chǎng)效果。還得看例子:J
程序代碼
< smil xmlns="http://www.w3.org/2001/SMIL20/Language">
< head>
< layout>
< root-layout width="400" height="300"/>
< /layout>
< transition id="fade" type="fade" subtype="fadeToColor" fadeColor="green" dur="4s"/>
< transition id="fade1" type="fade" subtype="fadeFromColor" fadeColor="red" dur="4s"/>
< transition id="fade2" type="fade" subtype="crossfade" dur="2s"/>
< transition id="push" type="snakeWipe" dur="4" />
< /head>
< body>
< seq>
< img dur="5s" src="g06.jpg" transIn="fade1" fill="transition"/>
< img dur="4s" src="g05.jpg" transIn="fade2" fill="transition"/>
< img dur="4s" src="g06.jpg" transIn="fade2" fill="transition"/>
< img dur="4s" src="g05.jpg" transIn="push" transOut="fade"/>
< /seq>
< /body>
< /smil>