本文深入探讨了SMIL（Synchronized Multimedia Integration Language）的基本知识和应用，包括SMIL的语法、多媒体片断结构组织、时间控制、布局设计以及实例演示。通过详细解析SMIL语言的各组成部分，读者能够轻松掌握如何创建交互式多媒体演示。
一：SMIL 简介
SMIL 是同步多媒体集成语言（Synchronized Multimedia Integration Language）的缩写,它是由3W(World Wide Web Consortium)组织规定的多媒体操纵语言，类似于HTML
二、 SMIL 基本知识
下面我们看一个实际的SMIL 的例子
（用记事本编写就可以，注意：在英文状态下编辑。也就是不要打开中文输入法。因为SMIL 不认识中文的标点符号！）：
<smil>
<head>
<meta name="copyright" content="Your Name" />
<layout>
<!-- layout 标记 -->
</layout>
</head>
<body>
<!?媒体标记 -->
<img src="image1.jpg"/>
</body>
</smil>
显然，SMIL 和HTML 语言的语法格式非常相像！所以，如果大家对HTML 熟悉的话，SMIL 学习起来就很容易。但是，二者的差别是很大的
从上面这个例子可以看出：
（1）SMIL 程序以<smil>开始，以</smil>结束。
SMIL 必须以<smil>开始，以</smil>结束，其他的一切标记都在这二者之间。这个和HTML 好像是一样的。
（2）整个程序由body 和head 两个部分组成
其中body 是必须要有的。而head 部分则看实际情况。如果需要的话，我们就写。若是整个SMIL 程序非常简单并且没有必要用head 部分，那么，我们可以不写。从个人的经验来看，如果要写出一个效果好的演示，head 部分是必不可少的！
（3）属性和标记要求小写
SMIL 要求其标记和标记的属性必须小写！
我们在这里不想给出属性和标记的定义。SMIL 语言就是由标记组成的。每一行都是标记，而标记基本上都有属性。例如：<img src="image1.jpg"/>中，img 是标记，而src 是属性，image1.jpg 是src 的属性值。注意：属性值可以大小写都可以。后面
我们会碰到有些属性值要求骆驼写法。什么是骆驼写法？像fadeTocolor 这样的属性值（看看，中间高，两边低，是不是非常像骆驼的驼峰？）就是骆驼写法。
（4）有些标记必须有一斜杠作为结束标记
在SMIL 中，如果标记不是配对标记（例如：<smil></smil>、<head></head>、<body></body>等），那么，必须有一斜杠作为结束标记（例如：<img src="image1.jpg"/>）。
（5）属性值必须用双引号括起来
例如：src="image1.jpg"。注意：SMIL 文件中出现的文件名必须和服务器上的文件名一致，其路径一定要正确。否则，SMIL播放器找不到该文件。
（6）SMIL 文件的拓展名为*.smil 或者*.smi
我们必须以*.smil 或者*.smi 的拓展名来保存SMIL 文件。这样SMIL 播放器才能认出SMIL 文件，以采用正确的解码方式解码播放。为了防止与其它类型文件的拓展名冲突，强烈建议采用*.smil 这个拓展名！注意：文件名必须是以数字、字母开始的，中间可以有下划线，不可以有空格。例如：test_one.smil 可以，而test one.smil 坚决不行！如果你喜欢的话，可以用我们上面讲的骆驼写法testOne.smil。注意：上面的例子大家可以原版复制，保存为testOne.smil。并且找一个图片放到testOne.smil 同一个文件夹下，并将image1.jpg 改成你的图片的名字（后面如果没有特殊说明，都得这么做），就可以用Realone player 打开该源程序，看看我们的第一个演示的效果了。
（7）附加信息写在<head></head>之间
如果我们有些关于源代码的一些说明也就是附加信息，例如版权、作者、标题、基地址等等，我们可以在<head></head>中说明。其基本的格式是：<meta name=" " content=" " />，例如：<meta name="author " content="litterone " /> <meta name="title " content="I want to learn SMI:L " />。
（8）用<!-- … -->进行注释
这个标记和HTML 里面的是一扬的。我们可以对我们的源文件进行注释。SMIL 播放器遇到这个标记后，将跳过去而不予理睬。
例如：我们可以在写源代码以前，将我们想要实现的效果在<!-- … -->中写出来，然后在编写源代码，假如我们忘记了删除该段说明，也不会影响演示的执行。
上面简单介绍了SMIL 语言的基本知识，接下来要详详细细地学习SMIL！
三、 SMIL 详细解析
SMIL 语言的内容很多，下面仅介绍一些常用的语言
1、 多媒体片断结构组织
（1）<seq></seq>标记
我们首先看下面这个例子：
<smil>
<head>
</head>
<body>
<seq>
<img src="image1.jpg"/>
<img src="image2.jpg"/>
</seq>
</body>
</smil>
请保存（记得要用*.smil 这样的文件格式）并运行该源程序看看效果。我相信如果大家看到的是这样的效果：Realone player先显示image1.jpg，然后显示image2.jpg。这就是我们这里用<seq></seq>这对顺序播放标记规定的结果。<seq></seq>规定的是：在<seq></seq>中间的多媒体片断顺序播放。 如下图所示。
（2）<par></par>标记
接下来瞧瞧这个例子：
<smil>
<head>
</head>
<body>
<par>
<img src="image1.jpg"/>
<img src="image2.jpg"/>
</par>
</body>
</smil>
保存->运行->看效果。Realone player 同时显示image1.jpg 和image2.jpg。这就是我们这里用<par></par>这对并行播放标记所得到的结果。<par></par>规定的是：在<par></par>中间的多媒体片断并行播放。
如下图所示。
（3）<seq></seq>和<par></par>标记协同使用
分析下面这个例子：
<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>
这个例子的效果是这样的：Realone player 先显示image1.jpg，接下来同时显示image2.jpg 和image3.jpg, 然后显示image4.jpg。
有了<seq></seq>和<par></par>这样两对标记后，我们对多媒体片断播放的先后顺序的控制就变得非常方便了。但是，我们上面的这些演示虽说是演示了。但是，它们的显示时间好像没有受到我们的控制。接下来着手解决这个问题。
2、 时间控制
（1）dur 属性
请大家看看下面这段代码的效果。
<smil>
<head>
</head>
<body>
<seq>
<img src="image1.jpg" dur="5s"/>
<img src="image2.jpg" dur="10s"/ >
</seq>
</body>
</smil>
相信大家已经看出门道了！对了，我们这里对image1.jpg 和image2.jpg 的持续时间做了规定。其中image1.jpg 持续时间5秒，image2.jpg 持续时间10 秒。
（2）repeat 属性
如果我们希望我们演示中的某个片断或者全部的片断重复播放若干次（姑且设为2 次）。那么我们可以后用repeat 属性来实现该效果。分析下面这个例子：
<smil>
<body>
<vedio src="test.rm" dur="1min" repeat="2"/>
</body>
</smil>
上面这个例子就是让test.rm 播放两次。如果我们想让某个片断一直播放下去那么repeat="indefinite"就可以了。
3、 布局设计
我们这里所说的布局就是在我们的屏幕上定出各个多媒体片断显示的位置（单纯的声音文件是不需要布局的！为什么？因为我们的耳朵听不出声音在屏幕上的什么地方；而我们的眼睛可以看到图片、动画和文字在什么地方！），准确地说是在播放器中。从前面我们并行播放的例子可以看出来，如果我们不对布局进行设计，那么显示的效果一塌糊涂！这里是SMIL 的重点和精华部分
（1）定义基本显示窗口
看下面的代码：
<smil>
<head>
<layout>
<root-layout width="300" height="200" background-color="white" />
</layout>
</head>
<body>
</body>
</smil>
说明：
a、 布局标记必须以<layout>开头，以</layout>结束，其他具体的标记都在这中间。<layout></layout>必须放在<head></head>之间。
b、 root-layout 标记表明的是规定最基本的、最底层的窗口。其他一切窗口都在它的基础上划分出来。
c、 width="300" 表明窗口宽为300 个像素点；height="200"表明窗口高为200 个像素点；background-color="black"表明窗口的背景颜色为黑色。这里也可以用颜色代码。例如：background-color="#000000"。个人更喜欢代码，因为颜色代码表达颜色众多，但是代码不直观。
（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>
说明：
a、<region id="vedio_region" left="5" top="5" width="290" height="260" />定义多媒体片断显示窗口，它的id是vedio_region，这个id 是必须要的（在SMIL 中，有的id 号是可以省略的，但是我们建议大家都写上，这样很容易把整个SMIL 文件的脉络弄清楚）！离顶端和左段各有5 个像素点的距离（注意：这里的坐标是相对基本显示窗口而言！）。窗口宽为290 个像素点；高为260 个像素点。下面的显示窗口的定义和这个是一样的。
b、<vedio src="test.rm" region="vedio_region" />声明了多媒体片断test.rm 在vedio_region 这个区域播放； <text src="test.txt" region="text_region"/>声明了文本文件test.txt 在vedio_region 这个区域显示。
该例子布局效果如下图：
上面我们对多媒体片断显示窗口的采用的是绝对定义的方法。多媒体片断显示窗口也可以用相对定义的方法来定义。例如：
<region id="vedio_region" top="10%" left="10%" width="80%" height="80%"/>
上面的比例是相对基本显示窗口而言的。这样的定义方法更为直观。
（3）fit 属性
在实际制作演示的时候，我们碰到了这样的问题：我们定义的显示窗口的大小和我们的多媒体片断的尺寸大小不一致，或大了或小了。相信大家也会碰到这样的问题。解决的办法有：
a、 修改窗口的大小（但是，很多时候我们没有办法修改。因为，如果修改的话，那么会影响其他窗口的显示。相应的其它窗口也得修改。实际情况是：我们很多的不同尺寸的多媒体片断都可能在同一个窗口中显示！）。
b、 使用恰当的多媒体片断和窗口的匹配方式。
看小面这段代码：
<region id="vedio_region" width="80%" height="80%" fit="meet"/>
它的意思就是窗口vedio_region 以meet 方式显示多媒体片断。
fit 属性的属性值有hidden、meet、fill、scroll 和slice 四个。其中hidden 是默认的属性值。
Hidden 表示保持多媒体片断的尺寸不变，从窗口的左上角开始显示。如果多媒体片断尺寸比窗口的尺寸小，那么空白的地方将用背景色填充。如果多媒体片断尺寸比窗口的尺寸大，那么多媒体片断超出窗口部分被裁去，不被显示。个人不喜欢这样的方式。
meet 表示在保持多媒体片断宽/高比例不变的情况下，对多媒体片断的尺寸进行缩放。从左上角开始显示，缩放到高度和宽度中的一个尺寸等于窗口的相应的尺寸，而另外的一个小于窗口的相应的尺寸。空白处用背景色填充。我喜欢这个！
fill 表示缩放多媒体片断使得其大小正好和窗口的大小一致。如果多媒体片断的宽/高比例和窗口的宽/高比例不等，那么多媒体片断就会变形，非常难看。强烈建议不要采用这种方式！
scroll 表示对多媒体片断的尺寸不做什么修改，它以正常的尺寸大小显示。但是，如果多媒体片断的尺寸超出了窗口的尺寸，那么将会相应出现水平或者垂直滚动条。该种发式适合于长时间的多媒体片断的显示。如果多媒体片断的显示时间很短，建<议不要使用！
slice 表示在保持多媒体片断宽/高比例不变的情况下，对多媒体片断的尺寸进行缩放。从左上角开始显示，缩放到高度和宽度中的一个尺寸等于窗口的相应的尺寸，而另外的一个大于窗口的相应的尺寸。超出的不分被裁去而不显示。 各个匹配的效果请参见下图（省去scroll 效果）
SMIL 的使用及注意事项
1. 将编写好的SMIL 文件及其它素材文件复制到同一个文件夹内
2. 不要出现中文文件名
3. 文本文件应该使用UTF-8 编码，否则收到的文本会乱码
4. SMIL 文件应该放在所有素材的最前
5. 为了保证彩信的兼容性，不要设计太复杂的SMIL 格式，这样会导致手机终端无法识别。
6. 尽量避免将<seq>、<par>标签嵌套使用
7. Audio 通常放在各种素材的最后
8. 推荐采用下面的代码进行整体布局
<layout>
<root-layout width="160" height="120"/>
<region id="Image" width="100%" height="100%" left="0%" top="0%" fit="meet"/>
<region id="Text" width="100%" height="100%" left="0%" top="0%" fit="scroll"/>
</layout>
9. dur 标签采用ms 为单位（1 秒=1000 毫秒）例如dur="5000ms"
SMIL 实例：
实例一：国际自由水岸
<smil>
<head>
<meta name="title" content="smil"/>
<layout>
<root-layout width="160" height="120"/>
<region id="Image" width="100%" height="100%" left="0%" top="0%" fit="meet"/>
<region id="Text" width="100%" height="100%" left="0%" top="0%" fit="scroll"/>
</layout>
</head>
<body>
<par dur="3000ms">
<img src="1.gif" region="Image"/>
</par>
<par dur="3000ms">
<img src="2.gif" region="Image"/>
</par>
<par dur="3000ms">
<img src="3.gif" region="Image"/>
</par>
<par dur="3000ms">
<img src="4.gif" region="Image"/>
</par>
<par dur="8000ms">
<img src="5.gif" region="Image"/>
</par>
</body>
</smil>
实例二：教授花园
<smil>
<head>
<meta name="title" content="smil"/>
<layout>
<root-layout width="160" height="120"/>
<region id="Image" width="100%" height="75%" left="0%" top="0%" fit="meet"/>
<region id="Text" width="100%" height="25%" left="0%" top="75%" fit="scroll"/>
</layout>
</head>
<body>
<par dur="30000ms">
<img src="1.gif" region="Image"/>
<text src="1.txt" region="Text"/>
<audio src="music.mid"/>
</par>
</body>
</smil>
//blackbap.org
SMIL 是同步多媒体集成语言（Synchronized Multimedia Integration Language）的缩写,它是由3W(World Wide Web Consortium)组织规定的多媒体操纵语言，类似于HTML
二、 SMIL 基本知识
下面我们看一个实际的SMIL 的例子
（用记事本编写就可以，注意：在英文状态下编辑。也就是不要打开中文输入法。因为SMIL 不认识中文的标点符号！）：
<smil>
<head>
<meta name="copyright" content="Your Name" />
<layout>
<!-- layout 标记 -->
</layout>
</head>
<body>
<!?媒体标记 -->
<img src="image1.jpg"/>
</body>
</smil>
显然，SMIL 和HTML 语言的语法格式非常相像！所以，如果大家对HTML 熟悉的话，SMIL 学习起来就很容易。但是，二者的差别是很大的
从上面这个例子可以看出：
（1）SMIL 程序以<smil>开始，以</smil>结束。
SMIL 必须以<smil>开始，以</smil>结束，其他的一切标记都在这二者之间。这个和HTML 好像是一样的。
（2）整个程序由body 和head 两个部分组成
其中body 是必须要有的。而head 部分则看实际情况。如果需要的话，我们就写。若是整个SMIL 程序非常简单并且没有必要用head 部分，那么，我们可以不写。从个人的经验来看，如果要写出一个效果好的演示，head 部分是必不可少的！
（3）属性和标记要求小写
SMIL 要求其标记和标记的属性必须小写！
我们在这里不想给出属性和标记的定义。SMIL 语言就是由标记组成的。每一行都是标记，而标记基本上都有属性。例如：<img src="image1.jpg"/>中，img 是标记，而src 是属性，image1.jpg 是src 的属性值。注意：属性值可以大小写都可以。后面
我们会碰到有些属性值要求骆驼写法。什么是骆驼写法？像fadeTocolor 这样的属性值（看看，中间高，两边低，是不是非常像骆驼的驼峰？）就是骆驼写法。
（4）有些标记必须有一斜杠作为结束标记
在SMIL 中，如果标记不是配对标记（例如：<smil></smil>、<head></head>、<body></body>等），那么，必须有一斜杠作为结束标记（例如：<img src="image1.jpg"/>）。
（5）属性值必须用双引号括起来
例如：src="image1.jpg"。注意：SMIL 文件中出现的文件名必须和服务器上的文件名一致，其路径一定要正确。否则，SMIL播放器找不到该文件。
（6）SMIL 文件的拓展名为*.smil 或者*.smi
我们必须以*.smil 或者*.smi 的拓展名来保存SMIL 文件。这样SMIL 播放器才能认出SMIL 文件，以采用正确的解码方式解码播放。为了防止与其它类型文件的拓展名冲突，强烈建议采用*.smil 这个拓展名！注意：文件名必须是以数字、字母开始的，中间可以有下划线，不可以有空格。例如：test_one.smil 可以，而test one.smil 坚决不行！如果你喜欢的话，可以用我们上面讲的骆驼写法testOne.smil。注意：上面的例子大家可以原版复制，保存为testOne.smil。并且找一个图片放到testOne.smil 同一个文件夹下，并将image1.jpg 改成你的图片的名字（后面如果没有特殊说明，都得这么做），就可以用Realone player 打开该源程序，看看我们的第一个演示的效果了。
（7）附加信息写在<head></head>之间
如果我们有些关于源代码的一些说明也就是附加信息，例如版权、作者、标题、基地址等等，我们可以在<head></head>中说明。其基本的格式是：<meta name=" " content=" " />，例如：<meta name="author " content="litterone " /> <meta name="title " content="I want to learn SMI:L " />。
（8）用<!-- … -->进行注释
这个标记和HTML 里面的是一扬的。我们可以对我们的源文件进行注释。SMIL 播放器遇到这个标记后，将跳过去而不予理睬。
例如：我们可以在写源代码以前，将我们想要实现的效果在<!-- … -->中写出来，然后在编写源代码，假如我们忘记了删除该段说明，也不会影响演示的执行。
上面简单介绍了SMIL 语言的基本知识，接下来要详详细细地学习SMIL！
三、 SMIL 详细解析
SMIL 语言的内容很多，下面仅介绍一些常用的语言
1、 多媒体片断结构组织
（1）<seq></seq>标记
我们首先看下面这个例子：
<smil>
<head>
</head>
<body>
<seq>
<img src="image1.jpg"/>
<img src="image2.jpg"/>
</seq>
</body>
</smil>
请保存（记得要用*.smil 这样的文件格式）并运行该源程序看看效果。我相信如果大家看到的是这样的效果：Realone player先显示image1.jpg，然后显示image2.jpg。这就是我们这里用<seq></seq>这对顺序播放标记规定的结果。<seq></seq>规定的是：在<seq></seq>中间的多媒体片断顺序播放。 如下图所示。
（2）<par></par>标记
接下来瞧瞧这个例子：
<smil>
<head>
</head>
<body>
<par>
<img src="image1.jpg"/>
<img src="image2.jpg"/>
</par>
</body>
</smil>
保存->运行->看效果。Realone player 同时显示image1.jpg 和image2.jpg。这就是我们这里用<par></par>这对并行播放标记所得到的结果。<par></par>规定的是：在<par></par>中间的多媒体片断并行播放。
如下图所示。
（3）<seq></seq>和<par></par>标记协同使用
分析下面这个例子：
<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>
这个例子的效果是这样的：Realone player 先显示image1.jpg，接下来同时显示image2.jpg 和image3.jpg, 然后显示image4.jpg。
有了<seq></seq>和<par></par>这样两对标记后，我们对多媒体片断播放的先后顺序的控制就变得非常方便了。但是，我们上面的这些演示虽说是演示了。但是，它们的显示时间好像没有受到我们的控制。接下来着手解决这个问题。
2、 时间控制
（1）dur 属性
请大家看看下面这段代码的效果。
<smil>
<head>
</head>
<body>
<seq>
<img src="image1.jpg" dur="5s"/>
<img src="image2.jpg" dur="10s"/ >
</seq>
</body>
</smil>
相信大家已经看出门道了！对了，我们这里对image1.jpg 和image2.jpg 的持续时间做了规定。其中image1.jpg 持续时间5秒，image2.jpg 持续时间10 秒。
（2）repeat 属性
如果我们希望我们演示中的某个片断或者全部的片断重复播放若干次（姑且设为2 次）。那么我们可以后用repeat 属性来实现该效果。分析下面这个例子：
<smil>
<body>
<vedio src="test.rm" dur="1min" repeat="2"/>
</body>
</smil>
上面这个例子就是让test.rm 播放两次。如果我们想让某个片断一直播放下去那么repeat="indefinite"就可以了。
3、 布局设计
我们这里所说的布局就是在我们的屏幕上定出各个多媒体片断显示的位置（单纯的声音文件是不需要布局的！为什么？因为我们的耳朵听不出声音在屏幕上的什么地方；而我们的眼睛可以看到图片、动画和文字在什么地方！），准确地说是在播放器中。从前面我们并行播放的例子可以看出来，如果我们不对布局进行设计，那么显示的效果一塌糊涂！这里是SMIL 的重点和精华部分
（1）定义基本显示窗口
看下面的代码：
<smil>
<head>
<layout>
<root-layout width="300" height="200" background-color="white" />
</layout>
</head>
<body>
</body>
</smil>
说明：
a、 布局标记必须以<layout>开头，以</layout>结束，其他具体的标记都在这中间。<layout></layout>必须放在<head></head>之间。
b、 root-layout 标记表明的是规定最基本的、最底层的窗口。其他一切窗口都在它的基础上划分出来。
c、 width="300" 表明窗口宽为300 个像素点；height="200"表明窗口高为200 个像素点；background-color="black"表明窗口的背景颜色为黑色。这里也可以用颜色代码。例如：background-color="#000000"。个人更喜欢代码，因为颜色代码表达颜色众多，但是代码不直观。
（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>
说明：
a、<region id="vedio_region" left="5" top="5" width="290" height="260" />定义多媒体片断显示窗口，它的id是vedio_region，这个id 是必须要的（在SMIL 中，有的id 号是可以省略的，但是我们建议大家都写上，这样很容易把整个SMIL 文件的脉络弄清楚）！离顶端和左段各有5 个像素点的距离（注意：这里的坐标是相对基本显示窗口而言！）。窗口宽为290 个像素点；高为260 个像素点。下面的显示窗口的定义和这个是一样的。
b、<vedio src="test.rm" region="vedio_region" />声明了多媒体片断test.rm 在vedio_region 这个区域播放； <text src="test.txt" region="text_region"/>声明了文本文件test.txt 在vedio_region 这个区域显示。
该例子布局效果如下图：
上面我们对多媒体片断显示窗口的采用的是绝对定义的方法。多媒体片断显示窗口也可以用相对定义的方法来定义。例如：
<region id="vedio_region" top="10%" left="10%" width="80%" height="80%"/>
上面的比例是相对基本显示窗口而言的。这样的定义方法更为直观。
（3）fit 属性
在实际制作演示的时候，我们碰到了这样的问题：我们定义的显示窗口的大小和我们的多媒体片断的尺寸大小不一致，或大了或小了。相信大家也会碰到这样的问题。解决的办法有：
a、 修改窗口的大小（但是，很多时候我们没有办法修改。因为，如果修改的话，那么会影响其他窗口的显示。相应的其它窗口也得修改。实际情况是：我们很多的不同尺寸的多媒体片断都可能在同一个窗口中显示！）。
b、 使用恰当的多媒体片断和窗口的匹配方式。
看小面这段代码：
<region id="vedio_region" width="80%" height="80%" fit="meet"/>
它的意思就是窗口vedio_region 以meet 方式显示多媒体片断。
fit 属性的属性值有hidden、meet、fill、scroll 和slice 四个。其中hidden 是默认的属性值。
Hidden 表示保持多媒体片断的尺寸不变，从窗口的左上角开始显示。如果多媒体片断尺寸比窗口的尺寸小，那么空白的地方将用背景色填充。如果多媒体片断尺寸比窗口的尺寸大，那么多媒体片断超出窗口部分被裁去，不被显示。个人不喜欢这样的方式。
meet 表示在保持多媒体片断宽/高比例不变的情况下，对多媒体片断的尺寸进行缩放。从左上角开始显示，缩放到高度和宽度中的一个尺寸等于窗口的相应的尺寸，而另外的一个小于窗口的相应的尺寸。空白处用背景色填充。我喜欢这个！
fill 表示缩放多媒体片断使得其大小正好和窗口的大小一致。如果多媒体片断的宽/高比例和窗口的宽/高比例不等，那么多媒体片断就会变形，非常难看。强烈建议不要采用这种方式！
scroll 表示对多媒体片断的尺寸不做什么修改，它以正常的尺寸大小显示。但是，如果多媒体片断的尺寸超出了窗口的尺寸，那么将会相应出现水平或者垂直滚动条。该种发式适合于长时间的多媒体片断的显示。如果多媒体片断的显示时间很短，建<议不要使用！
slice 表示在保持多媒体片断宽/高比例不变的情况下，对多媒体片断的尺寸进行缩放。从左上角开始显示，缩放到高度和宽度中的一个尺寸等于窗口的相应的尺寸，而另外的一个大于窗口的相应的尺寸。超出的不分被裁去而不显示。 各个匹配的效果请参见下图（省去scroll 效果）
SMIL 的使用及注意事项
1. 将编写好的SMIL 文件及其它素材文件复制到同一个文件夹内
2. 不要出现中文文件名
3. 文本文件应该使用UTF-8 编码，否则收到的文本会乱码
4. SMIL 文件应该放在所有素材的最前
5. 为了保证彩信的兼容性，不要设计太复杂的SMIL 格式，这样会导致手机终端无法识别。
6. 尽量避免将<seq>、<par>标签嵌套使用
7. Audio 通常放在各种素材的最后
8. 推荐采用下面的代码进行整体布局
<layout>
<root-layout width="160" height="120"/>
<region id="Image" width="100%" height="100%" left="0%" top="0%" fit="meet"/>
<region id="Text" width="100%" height="100%" left="0%" top="0%" fit="scroll"/>
</layout>
9. dur 标签采用ms 为单位（1 秒=1000 毫秒）例如dur="5000ms"
SMIL 实例：
实例一：国际自由水岸
<smil>
<head>
<meta name="title" content="smil"/>
<layout>
<root-layout width="160" height="120"/>
<region id="Image" width="100%" height="100%" left="0%" top="0%" fit="meet"/>
<region id="Text" width="100%" height="100%" left="0%" top="0%" fit="scroll"/>
</layout>
</head>
<body>
<par dur="3000ms">
<img src="1.gif" region="Image"/>
</par>
<par dur="3000ms">
<img src="2.gif" region="Image"/>
</par>
<par dur="3000ms">
<img src="3.gif" region="Image"/>
</par>
<par dur="3000ms">
<img src="4.gif" region="Image"/>
</par>
<par dur="8000ms">
<img src="5.gif" region="Image"/>
</par>
</body>
</smil>
实例二：教授花园
<smil>
<head>
<meta name="title" content="smil"/>
<layout>
<root-layout width="160" height="120"/>
<region id="Image" width="100%" height="75%" left="0%" top="0%" fit="meet"/>
<region id="Text" width="100%" height="25%" left="0%" top="75%" fit="scroll"/>
</layout>
</head>
<body>
<par dur="30000ms">
<img src="1.gif" region="Image"/>
<text src="1.txt" region="Text"/>
<audio src="music.mid"/>
</par>
</body>
</smil>
//blackbap.org
扫一扫
590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
