彩信设计制作——SMIL语言

来源：互联网发布：淘宝上的潮牌男装店编辑：程序博客网时间：2024/06/06 03:19

彩信设计制作——SMIL语言

2010年09月13日星期一 04:53

彩信设计制作——SMIL语言

制作前的准备工作

将彩信的所有素材（包括图片、声音、文字）复制到一个文件夹内，将文件名取为英语文件名
对文本文件的编码进行调整，将文本文件另存为UTF-8格式，具体操作如下
- 打开文本文件
- 选择菜单中的另存为，在编码下拉列表中选择UTF-8，然后保存
对图片格式进行调整，一般手机均支持JPG及GIF格式的图片。并且图片不要过大。
对彩信的声音格式进行调整，确保声音格式可被手机识别。
确认所有文件总的大小不超过50K

SMIL语言

一：SMIL简介

SMIL是同步多媒体集成语言（Synchronized Multimedia Integration Language）的缩写,它是由3W(World Wide Web Consortium)组织规定的多媒体操纵语言，类似于HTML

二、 SMIL基本知识

下面我们看一个实际的SMIL的例子
（用记事本编写就可以，注意：在英文状态下编辑。也就是不要打开中文输入法。因为SMIL不认识中文的标点符号！）：

<!—媒体标记 -->
<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的使用及注意事项

将编写好的SMIL文件及其它素材文件复制到同一个文件夹内
不要出现中文文件名
文本文件应该使用UTF-8编码，否则收到的文本会乱码
SMIL文件应该放在所有素材的最前
为了保证彩信的兼容性，不要设计太复杂的SMIL格式，这样会导致手机终端无法识别。
尽量避免将<seq>、<par>标签嵌套使用
Audio通常放在各种素材的最后
推荐采用下面的代码进行整体布局
<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>
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>

demo下载