转QQ场景编辑器

1、转 QQ场景编辑器QQ场景编辑器界面亲切、友好，所见即所得编辑环境，轻松完成QQ场景的整个制作过程，包括背景图片的导入、设置以及场景动作的设计、实现等。此外还提供了动作预览，可以很方便的随时查看动作效果。为了便于我们使用场景编辑器更顺利的制作场景，建议大家下载参考如下文档：1、场景制作常用操作一、场景制作常用操作在这部分，主要为大家介绍场景编辑器中：新建、打开场景，场景生成及查看，场景打包等操作的具体方法。一、场景制作常用操作.1 1.1新建场景.1 1.2打开场景.1 1.3场景生成及查看.2 1.4场景打包.5 1.1新建场景下载安装QQ场景编辑器后，桌面会出现这个快捷方式，双击打开、选择

2、创建新的场景工程，就可以看到QQ场景编辑器的主界面，如图1：图1QQ场景编辑器的主界面1.2打开场景已经开始制作，但还未全部完成的场景可以通过以下方式打开：1、场景保存后将生成一个以场景名命名的qse类型的文件，如之前我们制作的场景，直接双击这个文件，就可以打开该场景。2、双击桌面快捷方式，在提示中选择打开已经存在的场景工程；或者在打开的QQ场景编辑器的主界面中选择打开，然后找到之前保存的qse类型的场景文件即可。图2打开场景1.3场景生成及查看在QQ场景编辑器中提供了预览功能，但这个预览仅限在场景编辑器中观看，如果想将该场景最终应用到QQ上，就需要用到场景生成这个功能。在选择生成以后，还需要

3、启动QQ，如图3在IM窗口中选择更新场景列表，这样，之前生成的场景才会出现在场景列表中。进而在场景列表中就可以看到春天这个场景并选定，如图4。图3更新场景列表图4选择场景春天图4.1选择场景春天的动作飘1.4场景打包为了方便大家把自己制作好的场景作品上传到网页上和其他Q友分享，场景编辑器还提供了场景打包的功能，如下图5，可以自动生成.cip格式的安装包，包含了场景安装时所需要的全部文件，无须另外压缩，可以直接上传，同时，所有.cip格式的场景可以通过双击直接安装，安装完成后，该场景直接出现IM窗口的场景列表中，可以直接选取，无须再次更新场景列表，非常方便！如下图5打包场景后，生成安装包。图5打

4、包场景2、场景背景制作二、场景背景制作背景部分的制作，主要包括背景属性设置，各场景组成图片的导入、添加及属性设置，以及图片属性设置的具体举例和图层及相关操作介绍等。二、场景背景制作.1 2.1背景属性设置.1 2.2图片.2 2.2.1图片导入.3 2.2.2图片添加.3 2.2.3图片属性设置.4 2.2.4图片属性设置举例.7 2.2.5图层及相关操作.10 2.1背景属性设置在背景属性设置中包括：声音、尺寸大小和在该场景的IM窗口中各部分文字颜色的设置等，此外针对文字颜色的设置，还提供了预览功能，可以随时查看修改了颜色之后的效果！图6背景属性设置声音：指该场景的背景音乐，可以通过选择把文

5、件添加进来，同时还可以进行试听，所有添加的声音文件都会出现在下拉列表中和界面左下角的元件图库中，如图6中的绿色区域。说明：元件图库中的各个文件可以通过鼠标左键双击进行选中最小大小：指设计区可以拉伸的最小限制大小当前大小：指设计区目前实际的大小尺寸，这个尺寸至少要大于等于最小大小的数值。颜色：这里的包括对背静、消息窗口背景、对方和自己发言标识、聊天消息、系统消息的文字和链接等场景中元素的颜色设置。说明：颜色设置部分还提供了预览功能，为便于随时查看颜色设置的效果，大家可以选中预览功能。这样，当改变各部分颜色后，即可随时在背景中看到修改后的效果。2.2图片在背景属性中仅可以设置背景的颜色等，为了场景

6、更生动丰富，我们还可以在背景上添加一张或者多张图片。2.2.1图片导入通过导入图片可以将切好的各种用来制作场景的图片导入到场景编辑器界面中左下的元件图库中，供需要时使用。当需要对某个图片进行属性设置时，可以通过鼠标左键双击元件图库中该图片就可以把它添加到背景上(或者可以通过鼠标左键选中图片把它拖拽添加到背景上)，同时这个图片也出现在场景编辑器界面中左上角的场景元件的列表中，进而就可以对该图片进行属性设置了。图7导入图片2.2.2图片添加图片添加实际上是将导入图片和添加到背景中这个两个功能的合成。可以通过以下两种方式添加图片到场景编辑器的背景，同时这个图片也出现在场景编辑器界面中左上角的场景元件

7、的列表中，进而就可以对该图片进行属性设置了：1、在背景区域中选择右键菜单中的添加图片2、在菜单中选择编辑-添加图片，如图8：图8图片添加2.2.3图片属性设置由于在QQ中，场景是可随IM窗口拉伸的，所以为了更好保证场景的效果，背景中各图片在拉伸情况下的位置、拉伸方式等都需要进行设置。图片属性设置包括名称、位置大小、拉伸方式等。图9图片属性设置界面名称和大小：图片添加到背景中时，该图片的默认名称和大小就已经被自动显示出来，大家还可以根据需要自行修改。如图9，可以通过鼠标拉动图片各个方向上的9个红点直接调整图片尺寸，也可以输入图片的宽和高的具体数值(如图9中的绿色区域)，还可以设定图片为原始大小等

8、。窗口拉伸：具体又分为左右、上下位移方式和填充方式的设置说明：左右拉伸：如果希望图片随窗口左右均匀拉伸，即可选择宽度随着窗口变化而变化，一般说来水平方向上均匀的图片更适合左右拉伸，如图9中的图片：如果图片左右拉伸会变型失去原来效果，或者希望图片在IM窗口拉伸过程中左右长度不变，则可以选择保持相对位置，并进一步在下拉列表中设置该图片为左或者右对齐。左对齐：该图片在在IM窗口拉伸过程中相对左边框的位置是不变的。填充方式：分为直接拉伸和平铺两种。直接拉伸：就是对图片进行均匀拉伸的一种效果，如下图9.1为将图片左右方向直接拉伸后的效果，图9.2为将图片上下方向直接拉伸后的效果：图9.1将图片左右方向直

9、接拉伸后的效果图9.2将图片上下方向直接拉伸后的效果平铺：就是在拉伸时对图片进行重复的拼接，以此来填充指定的该图片显示区域的一种效果，如下图9.3为将图片左右方向平铺后的效果，图9.4为将图片上下方向平铺后的效果：图9.3将图片所有方向平铺后的效果图9.4将图片上下方向平铺后的效果坐标视图：帮助大家确定当前图片的四边相对于背景四边的位置，如图9所示：2.2.4图片属性设置举例以场景春天为例来对图片的属性设置进一步说明：1、如图9中的，天空图片在水平方向是均匀的，所以可以将图片属性设置中设置如下图10，设成宽度随窗口变化而变化、保持上端对齐和设定图片为直接拉伸方式。图10图片天空的属性设置2、田

10、野图片属性设置中设置如下图11，设成宽度随窗口变化而变化、保持下端对齐和设定图片为直接平铺方式，平铺可以更好的体现田野的绵延。图11图片田野的属性设置3、场景中的其他元素如山峦、云朵、新枝等图片在IM窗口尺寸变化时，大小都被我们设置为不变的，我们只需要设置他们在IM窗口尺寸变化时的相对位置即可。新枝：设成保持右端上端对齐和设定图片为直接平铺或者拉伸方式都可以。图12图片新枝的属性设置2.2.5图层及相关操作在上面2.1.2.4图片属性设置举例中，大家可能已经发现，背景中各图片之间可能存在彼此重叠的情况，比如图12中的云和天空等，当图片出现彼此重叠，就涉及到谁覆盖谁的问题，为了更好的标识这种关系

11、，我们可以将不同的图片看作不同的图层。在场景编辑器的背景部分，提供各个图层间的操作上移、下移、最上层、最下层等，如下图13，为将新枝图层设置到天空图层之下的效果，可以看到天空图层和新枝图层重叠的部分中，天空覆盖了新枝。说明：在场景元件列表中可以看到各个图层之间的上下关系，如下图13绿色的区域中可以看到，新枝图层已经移到天空图层下。图13将新枝图层设置到天空图层之下的效果3、场景动作制作三、场景动作制作大家在QQ中会发现，场景除了包括背景之外，还可以添加动作。一般来说动作主要是指在场景中我们为部分图片制作的运动轨迹，或者将动态图片添加到场景中显示出来等。三、场景动作制作.1 3.1添加动作.1

12、3.2动作属性设置.2 3.3图片属性设置.3 3.4时间轴区域设置及动作实现原理.4 3.5动作实现具体操作步骤.5 3.1添加动作可以在下图14中，选择添加动作。图14添加动作如图15所示，成功添加了动作01，在场景编辑器中可以添加多个动作。图15成功添加动作3.2动作属性设置如上图15中的红色区域所示，动作的属性设置主要包括：名称：该动作的名称，场景制作并安装到QQ后，也将出现在QQ中的动作下拉列表中声音：在场景中做动作时的背景音乐，可以设置循环播放动画：指场景中的动作，可以设置循环播放时间轴单位设置：指时间轴中一个格表示的时间长短。说明：场景中的动作是有一定时间长短的，这个时间长短就是

13、依靠对时间轴单位时间的设定，外加在时间轴上为各图片的每部分直线轨迹设置包括几个时间单位，从而来最终确定的。举例：在图片的每部分直线轨迹设置包括几个时间单位固定的情况下，时间轴单位时间设定的越大，则图片完成该动作轨迹的时间就越长。即，如果想该图片移动的较快，则需要将时间轴单位时间设定的小些预览动作：在完成动作的设置后，可以在场景编辑器中通过预览功能来观看动作在背景中完成的实际效果图16动作属性设置3.3图片属性设置动作主要是指在场景中为图片制作的运动轨迹，或者将动态图片添加到场景中显示出来等。在动作中添加图片的方法可以参考2.1.2.2图片添加，一个动作可以由多个图片的移动来完成。下面我们主要来

14、看如何完成动作中图片属性设置。如下图17所示，红色区域中的属性设置的方法可以参考2.1.2.3图片属性设置，下面主要介绍图17绿色区域中的操作。图17图片属性设置3.4时间轴区域设置及动作实现原理图17中的绿色区域中叫做时间轴区域，在这里将控制该图片如何实现在场景中的动作，即在这里可以通过各种设置来实现该图片在场景中的各种运动轨迹。下面我们来说明完成动作轨迹设置的原理：1、在时间轴上控制动作时间长短：当在动作属性中完成时间轴单位时间大小的设定以后，整个时间轴点点之间就已经确定了具体的时间大小。当在动作属性中完成时间轴单位时间大小的设定以后，整个时间轴点点之间就已经确定了具体的时间大小。如：时间

15、轴单位时间设定为100毫秒后，那么当两个点间包括了1个点，等同两个点间包括了两个时间单位，则这两个点间的时间长短就是200毫秒。2、完成图片初步移动：前面我们已经知道如何控制动作时间长短，接下来看如何完成图片的初步移动，其实只要我们为图片在场景上，相应的确定两个位置，进而让这两个位置和时间轴上代表一定时间长度的两个点对应起来(比如象上面的两个点间的时间长短就是200毫秒)，这样就已经完成了这个图片的初步移动。即，当时间轴移动到第一个点时，图片就在场景中的第一个位置，而当时200毫秒之后(时间轴移动到指定的第二个点时)，该图片就立即移动到场景中之前设定的第二个位置，并且这段轨迹就是图片在场景中两

16、点间的直线。习惯上我们将在时间轴上设定时间点，同时指定该点时间图片在场景中的位置这种对应关系，叫做添加一个关键帧(如图18中，在时间轴区域中鼠标的右键盘菜单中就可以提供这些功能)。关键帧是定义在动画中的变化的帧。可能大家想问，我希望的是图片在场景中均匀的完成这段移动，而不是在200毫秒中都是一个位置，200毫秒后突然改变位置，其实很简单，只要在图18中的时间轴两点间选择创建补间动画，场景编辑器就会自动完成内插帧。这样，选择预览动作就可以看到，现在图片是在200毫秒延直线从一个点均匀的移动到另外一个点。图18时间轴区域鼠标的右键菜单相关操作3、切分图片运动轨迹：图片在场景中的运动轨迹可能是不规则

17、的任何图线，移动的快慢也可能在轨迹中各段有所不同，前面我们已经知道如何控图片在一段时间中完成直线和均匀移动，接下来，要想更好的让图片在场景中完成自己设计的轨迹，就需要将轨迹按照直线段进行切分，如果在一段直线中图片移动的快慢有所不同，则还需要进行进一步切分。完成切分后，就可以为切分好的每一小段轨迹来在时间轴上设置时间以及各时间点上图片在背景中的位置，从而最终完成图片的整个移动轨迹。4、动作组成：场景中的一个动作可以由多副图片的移动来完成，如在春天场景中的动作除了可以有落花之外，还可以有燕子飞过等。原理是一样的，只需进一步添加图片，并设置属性和完成动画即可。3.5动作实现具体操作步骤在上面2.2.

18、4动作实现原理章节中已经介绍了设置图片移动的原理，以及按照需要对图片运动轨迹进行切分的原则，下面来介绍动作实现具体的操作：1、按照场景中各图片运动的大致快慢在动作属性中来设置时间轴单位，比如各个图片普遍运动较快，就可以把时间轴单位的数值设置的小些，反之，则将时间轴单位的数值设置的大些。说明：如果场景中的两个图片的运动速度存在很大差别，无法在统一的时间轴单位下实现设计的效果，这种情况下，可以再添加一个动作，将图片运动速度差别大的图片放在新动作中，新动作中的时间轴单位可以按照需要进行设置2、对图片运动轨迹进行切分，可以参考2.2.4动作实现原理中介绍的切分原则。3、图片移动具体实现，比如下面我们要完成场景中落花的一个右下飘落的过程，已经设定时间轴单位为200毫秒：A、首先选定该图片开始动作的原始位置，对应时间轴上起点的关键帧，如图19，兰色区域为用鼠标选定的图片动作中的初始位置，对应时间轴区域中红色区域中处起始位置的关键帧。图19选定图片初始位置B、如果希望在1000毫秒后，图片被移动到场景下偏右方，则可以在时间轴5的位置选择鼠标右键菜单中的添加关键帧，然后再用鼠标在场景中把图片移动到设想中500毫秒后希望图片所处的位置