smil.docx
- 文档编号:11509239
- 上传时间:2023-06-01
- 格式:DOCX
- 页数:31
- 大小:31.59KB
smil.docx
《smil.docx》由会员分享,可在线阅读,更多相关《smil.docx(31页珍藏版)》请在冰点文库上搜索。
smil
程序代码
--layout标记-->
—媒体标记-->
显然,SMIL和HTML语言的语法格式非常相像!
所以,如果大家对HTML熟悉的话,SMIL学习起来就很容易。
但是,二者的差别是很大的,所以如果想学的很好,大家一定要认真地学!
从上面这个例子可以看出:
(1)SMIL程序以
SMIL必须以
这个和HTML好像是一样的。
(2)整个程序由body和head两个部分组成
其中body是必须要有的。
而head部分则看实际情况。
如果需要的话,我们就写。
若是整个SMIL程序非常简单并且没有必要用head部分,那么,我们可以不写。
从个人的经验来看,如果要写出一个效果好的演示,head部分是必不可少的!
(3)属性和标记要求小写
SMIL要求其标记和标记的属性必须小写!
我们在这里不想给出属性和标记的定义。
SMIL语言就是由标记组成的。
每一行都是标记,而标记基本上都有属性。
例如:
注意:
属性值可以大小写都可以。
后面我们会碰到有些属性值要求骆驼写法。
什么是骆驼写法?
像fadeTocolor这样的属性值(看看,中间高,两边低,是不是非常像骆驼的驼峰?
)就是骆驼写法。
(4)有些标记必须有一斜杠作为结束标记
在SMIL中,如果标记不是配对标记(例如:
(5)属性值必须用双引号括起来
例如:
src="image1.jpg"。
注意:
SMIL文件中出现的文件名必须和服务器上的文件名一致,其路径一定要正确。
否则,SMIL播放器找不到该文件。
(6)SMIL文件的拓展名为*.smil或者*.smi
我们必须以*.smil或者*.smi的拓展名来保存SMIL文件。
这样SMIL播放器才能认出SMIL文件,以采用正确的解码方式解码、播放。
为了防止与其它类型文件的拓展名冲突,强烈建议采用*.smil这个拓展名!
注意:
文件名必须是以数字、字母开始的,中间可以有下划线,不可以有空格。
例如:
test_one.smil可以,而testone.smil坚决不行!
如果你喜欢的话,可以用我们上面讲的骆驼写法testOne.smil。
注意:
上面的例子大家可以原版复制,保存为testOne.smil。
并且找一个图片放到testOne.smil同一个文件夹下,并将image1.jpg改成你的图片的名字(后面如果没有特殊说明,都得这么做),就可以用Realoneplayer打开该源程序,看看我们的第一个演示的效果了。
(7)附加信息写在
之间如果我们有些关于源代码的一些说明也就是附加信息,例如版权、作者、标题、基地址等等,我们可以在
中说明。其基本的格式是:
程序代码
L"/> (8)用 --…-->进行注释 这个标记和HTML里面的是一样的。 我们可以对我们的源文件进行注释。 SMIL播放器遇到这个标记后,将跳过去而不予理睬。 例如: 我们可以在写源代码以前,将我们想要实现的效果在 --…-->中写出来,然后在编写源代码,假如我们忘记了删除该段说明,也不会影响演示的执行。 上面简单介绍了SMIL语言的基本知识,接下来要详详细细地学习SMIL! 编辑本段 SMIL详细解析 SMIL语言的内容很多,我们从最常用的开始谈起。 (准备好了吗? 上路了! ) 1、多媒体片断结构组织 (1) 程序代码
请保存(记得要用*.smil这样的文件格式J)并运行该源程序看看效果。
我相信如果大家看到的是这样的效果:
Realoneplayer先显示image1.jpg,然后显示image2.jpg。
这就是我们这里用
在
如下图所示。
(2)标记
接下来瞧瞧这个例子:
程序代码
保存->运行->看效果。
Realoneplayer同时显示image1.jpg和image2.jpg。
这就是我们这里用
在
如下图所示。
(3)
程序代码
这个例子的效果是这样的:
Realoneplayer先显示image1.jpg,接下来同时显示image2.jpg和image3.jpg,然后显示image4.jpg。
为什么会这样?
其中原因我想大家一定非常清楚了。
我就不啰嗦了。
有了
但是,我们上面的这些演示虽说是演示了。
但是,它们的显示时间好像没有受到我们的控制。
接下来着手解决这个问题。
2、时间控制
(1)dur属性
请大家看看下面这段代码的效果。
程序代码
相信大家已经看出门道了!
对了,我们这里对image1.jpg和image2.jpg的持续时间做了规定。
其中image1.jpg持续时间5秒,image2.jpg持续时间10秒。
(2)begin和end属性
上面规定的是播放多长时间,我们也想规定在什么时候开始播放。
请看下面的程序。
程序代码
上面的这段程序规定就是图片image1.jpg在整个演示进行2秒后,开始显示,持续的时间是5秒。
对于图片的控制是这样,而我们常常需要对视频/音频的时间进行控制。
下面这个例子来说明这个问题。
程序代码
test.rm这个视频文件(如果大家手头上没有*.rm格式文件,就用Realoneplayer的firstrun.rm或者找个*.avi的也可以。
但是文件名要写对!
)在整个演示开始5秒后开始播放,在整个演示播放40秒以后,就结束播放。
实际的播放时间是:
40-5=35秒。
但是,一般情形下,我们的视频总在一个组中,这时候,他就的服从组的时间了。
我们那下面的这个例子来解释这问题。
程序代码
image1.jpg所在的组的持续时间为5秒,而image1.jpg自己要求持续10秒,这是不行的。
实际上image1.jpg的显示时间只有5-2=3秒!
大家在以后写程序的时候要注意这个问题。
(3)clip-begin和clip-end属性
考虑这样一种效果:
我们只要test.rm播放这个视频/音频的5~10秒这个时间断,怎么办?
?
?
J有了clip-begin和clip-end,问题就很简单了!
请看:
程序代码
clip-begin和clip-end属性是用内部时间控制的属性。
这里的内部指的就是多媒体片断自己的时间线(timeline)。
前者规定在什么地方开始播放,后者规定放到什么地方结束播放。
为了更清楚的理解这些时间控制,我们看下面的这个例子:
程序代码
看看下面这个示意图:
显然,首先是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秒。
图中灰色(黄色)部分表示播放的部分。
接下来我们对时间的表示方法做个说明(默认的时间是秒,所以"2s"、"2.0s"和"2"都是一样的):
时间标记指代例子说明
h小时1.5h1小时30分钟
min分钟4.75min4分45秒
s秒10.4510秒450毫秒
正确的时间写法是:
hh:
mm:
ss.xy。
hh表示小时;mm表示分钟;ss表示秒;x表示1/10秒;y表示1/100秒。
例如:
begin="01:
40.0"表示的是1分40秒处开始,而begin="01:
40"表示的是1小时40分处开始。
真的注意呀J。
时间控制非常重要,它直接影响我们演示的效果。
而我们上面讲的这部分是最重要的,所以大家一定要理解上面的各个时间概念及其含义。
(4)fill属性
当演示中的某个片断播放完成以后,我们可以用fill属性来规定它的显示状态。
简单的说就是我们是清屏还是冻结屏幕。
看下面这个例子:
程序代码
假设test.rm的长度是20秒,那么我们这里规定的就是:
在test.rm播放终了以后,屏幕上显示的是test.rm的最后一帧(通俗的说就是最后一幅画面),显示的时间是30-20=10秒;如果是图片的话,那么显示就是图片。
Fill属性只有remove和freeze两个,默认的值为remove。
建议大家在演示的最后的一个多媒体片断上用冻结(freeze),以防止屏幕上空空如也!
J
(5)repeat属性
如果我们希望我们演示中的某个片断或者全部的片断重复播放若干次(姑且设为2次)。
那么我们可以后用repeat属性来实现该效果。
分析下面这个例子:
程序代码
上面这个例子就是让test.rm播放两次。
如果我们想让某个片断一直播放下去(网络光广告上可以考虑这个),那么repeat="indefinite"就可以了。
当然,想要它停下来的一种方法是按下播放器stop(停止)键(在网页插件中就是右键菜单中的stop);另外的一种办法(大家都知道的)是关闭计算机!
J
3、布局设计
我们这里所说的布局就是在我们的屏幕上定出各个多媒体片断显示的位置(单纯的声音文件是不需要布局的!
为什么?
J因为我们的耳朵听不出声音在屏幕上的什么地方;而我们的眼睛可以看到图片、动画和文字在什么地方!
),准确地说是在播放器中。
从前面我们并行播放的例子可以看出来,如果我们不对布局进行设计,那么显示的效果一塌糊涂!
这里是SMIL的重点和精华部分之一,打起精神,Let’sgo!
(1)定义基本显示窗口
看下面的代码:
程序代码
说明:
a、布局标记必须以
b、root-layout标记表明的是规定最基本的、最底层的窗口。
其他一切窗口都在它的基础上划分出来。
c、width="300"表明窗口宽为300个像素点;height="200"表明窗口高为200个像素点;background-color="black"表明窗口的背景颜色为黑色。
这里也可以用颜色代码。
例如:
background-color="#000000"。
个人更喜欢代码,因为颜色代码表达颜色众多,但是代码不直观。
(2)定义多媒体片断显示窗口
分析下面这段源程序:
程序代码
说明:
a、
离顶端和左段各有5个像素点的距离(注意:
这里的坐标是相对基本显示窗口而言!
)。
窗口宽为290个像素点;高为260个像素点。
下面的显示窗口的定义和这个是一样的。
b、
该例子布局效果如下图:
上面我们对多媒体片断显示窗口的采用的是绝对定义的方法。
多媒体片断显示窗口也可以用相对定义的方法来定义。
例如:
上面的比例是相对基本显示窗口而言的。
这样的定义方法更为直观。
(3)fit属性
在实际制作演示的时候,我们碰到了这样的问题:
我们定义的显示窗口的大小和我们的多媒体片断的尺寸大小不一致,或大了或小了。
相信大家也会碰到这样的问题。
解决的办法有:
a、修改窗口的大小(但是,很多时候我们没有办法修改。
因为,如果修改的话,那么会影响其他窗口的显示。
相应的其它窗口也得修改。
实际情况是:
我们很多的不同尺寸的多媒体片断都可能在同一个窗口中显示!
)。
b、使用恰当的多媒体片断和窗口的匹配方式。
看小面这段代码:
程序代码
它的意思就是窗口vedio_region以meet方式显示多媒体片断。
fit属性的属性值有hidden、meet、fill、scroll和slice四个。
其中hidden是默认的属性值。
Hidden表示保持多媒体片断的尺寸不变,从窗口的左上角开始显示。
如果多媒体片断尺寸比窗口的尺寸小,那么空白的地方将用背景色填充。
如果多媒体片断尺寸比窗口的尺寸大,那么多媒体片断超出窗口部分被裁去,不被显示。
个人不喜欢这样的方式。
meet表示在保持多媒体片断宽/高比例不变的情况下,对多媒体片断的尺寸进行缩放。
从左上角开始显示,缩放到高度和宽度中的一个尺寸等于窗口的相应的尺寸,而另外的一个小于窗口的相应的尺寸。
空白处用背景色填充。
我喜欢这个!
fill表示缩放多媒体片断使得其大小正好和窗口的大小一致。
如果多媒体片断的宽/高比例和窗口的宽/高比例不等,那么多媒体片断就会变形,非常难看。
强烈建议不要采用这种方式!
scroll表示对多媒体片断的尺寸不做什么修改,它以正常的尺寸大小显示。
但是,如果多媒体片断的尺寸超出了窗口的尺寸,那么将会相应出现水平或者垂直滚动条。
该种发式适合于长时间的多媒体片断的显示。
如果多媒体片断的显示时间很短,建议不要使用!
slice表示在保持多媒体片断宽/高比例不变的情况下,对多媒体片断的尺寸进行缩放。
从左上角开始显示,缩放到高度和宽度中的一个尺寸等于窗口的相应的尺寸,而另外的一个大于窗口的相应的尺寸。
超出的不分被裁去而不显示。
各个匹配的效果请参见下图(省去scroll效果)
(4)z-index属性
先试运行下面的源程序:
程序代码
我想大家已经看出来了:
我们这里想做的就是那种电视的画中画效果。
但是在实际显示的时候,我们的小画面有时候被大画面所覆盖。
我的苦心也白费了。
z-index属性这个时候是我们的救星。
修改
成:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- smil