专利名称：一种微动画编辑器及其编辑方法
技术领域：
本发明涉及动画制作，尤其涉及一种微动画编辑器及其编辑方法。
背景技术：
在网页上我们经常看到绚丽多彩、精美漂亮的Flash、MTV、游戏等动画，这些动画大部分的编辑工作都是使用特定的工具软件进行制作和编辑，比如Adobe flash辅助软件等。虽然这些工具软件已经开发的愈加成熟，但这些软件编辑出来的动画产品模型却不能有效地反映每个动画中各元素的属性及对应的动作关系，尤其是对于微动画产品。动画是经由创作者的安排，使原本不具生命的东西像获得生命一般的活动，所以动画是让整幅图片都活动起来。而所谓的微动画，区别于大型游戏中的大动作的动画产品， 而是在动画中的某个局部位置进行动作的动画产品。当开发人员使用现有的制作软件对微动画进行制作时，所制作出的动画产品不能有效显示局部元素的属性及其对应的动作，从而导致后期编辑人员对其进行编辑时还要重复进行工作，使开发人员与编辑人员的工作穿插比较大，容易因为理解问题产生大的分歧，增加沟通成本。
发明内容
为了解决上述问题，本发明提供一种微动画编辑器及其编辑方法，该微动画编辑器能够简单、方便地对微动画产品中各对象元素进行配置，使得微动画产品的编辑规范化， 有利于设计人员和编辑人员理解及开发人员开发。根据本发明的一个方案，本发明提供了一种微动画编辑器，微动画通过树形结构模块以树形结构显示微动画中各对象的层次关系；通过画布来显示微动画的图像及其编辑过程(例如通过鼠标的拖拉动作，或者通过键盘中的方向键对画布中选中的元素位置进行调整)；以及通过属性框对所述微动画中各对象的属性进行编辑。所述微动画编辑器包括第一转换模块，用于调用数据模型中各对象的属性变量，并将所调用的属性变量通过属性框显示出来，以及在数据模型与在属性框之间进行数据同步，其中所述数据模型用于创建所述微动画中各对象用到的所有常量和变量；第二转换模块，用于将所述配置的数据模型转换为树形结构模块中的树形结构， 并且在数据模型和树形结构模块之间进行数据同步；第三转换模块，用于将所述配置的数据模型中的各对象转换为画布中的图像；序列化模块，用于将所述数据模型转换为XML配置文件，并对其存储；解析模块，用于解析所述XML配置文件，将解析出的各标签的属性值赋给数据模型中与各标签对应的对象的属性变量，以生成相应的数据模型。根据本发明的一个实施例，所述微动画编辑器还包括工具模块，用来对所述XML 配置文件进行上传或下载。根据本发明的一个实施例，所述微动画编辑器还包括配置模块，用于对树形结构中的各对象进行添加或删除。
4
根据本发明的一个实施例，所述第三转换模块还用于在所述配置的数据模型与画布之间进行数据同步。根据本发明的一个实施例，所述微动画的各对象包括游戏、场景、精灵、界面文字、 按钮以及精灵动作其中之一或其组合。根据本发明的一个实施例，所述序列化模块通过使数据模型中各对象之间的继承关系与所述XML配置文件中各标签之间的继承关系相一致的方法将所述数据模型转换为 XML配置文件。根据本发明的另一个方案，本发明还提供一种微动画编辑方法，包括下述步骤Sl 将所述数据模型转换为树形结构模块中的树形结构，并且在数据模型和树形结构模块之间进行数据同步，其中所述数据模型构建了包含有微动画中各对象用到的所有
常量和变量；S2:调用数据模型中各对象的属性变量，并将所调用的属性变量通过属性框显示出来，通过属性框对微动画中各对象的属性进行编辑；S3:对在数据模型中各对象的属性变量与在属性框中该对象的相应属性值进行数据同步；S4 将所述数据模型中的各对象转换为画布中的图像；S5 将经过与属性框、画布以及树形结构同步之后的数据模型转换为XML配置文件，并对其存储；S6 对微动画进行二次编辑时，解析所述微动画的XML配置文件，将解析出的各标签的属性值赋给数据模型中与各标签对应的对象的属性变量，以生成所述相应的数据模型，然后再进行步骤S1-S5。本发明提供的微动画编辑器通过数据模型、树形结构、属性框以及画布之间的同步，有效地反映出微动画产品中的各元素的属性及其对应的动作关系，能够精确定位各元素的坐标，能够对各元素的动作进行个性化配置，还能够对元素复杂动作进行配置。
图1为根据本发明的一个实施例的微动画产品中各元素对象的层次结构示意图；图2为根据本发明的实施例的微动画编辑器的一种示例性界面示意图；图3为根据图2中所示出的微动画编辑器的示例性界面通过画布对图像进行编辑的示意图；图4为根据本发明的一个实施例的微动画编辑器的结构框图；图5为根据本发明的另一个实施例的微动画编辑器的结构框图；图6为根据本发明的再一个实施例的微动画编辑器的结构框图；图7为根据本发明的一个实施例的编辑微动画的流程框图。
具体实施例方式
下面将参照附图对本发明的优选实施例进行阐释。 在详细描述本发明的微动画编辑器之前，将先对微动画产品的整体结构作一下详细说明。
图1为根据本发明的一个实施例的微动画产品中各元素对象的层次结构示意图。在一个微动画产品中，游戏元素作为微动画产品的最外层结构，用于定义整个产品所使用的硬件屏幕、原点位置及同服务器的通信地址、首页配置文件地址等信息，一个游戏可以由若干个场景来构成。场景为游戏中一个属性，在场景中构建了该微动画产品所需要的场景背景图片、背景音乐以及独白等，每个场景通常主要由由精灵、界面文字以及按钮等构成。当然，可以理解到，一个游戏也可由单个场景来完成，这时场景可为微动画产品的最外层结构，如图1所示。精灵为场景中的主体对象，例如场景中的小兔子、小猫，对于微动画产品，场景中的精灵的动作幅度并不是很大，因此针对每个精灵，其动作会被分成默认动作、点击动作、 热区动作以及调用其他精灵的动作等。默认动作为微动画产品中精灵默认在该场景中的动作，例如当打开一森林场景时，小兔子在场景中奔跑的动作。区别于默认动作，点击动作则需要人工对其精灵图像进行点击，而这个点击动作的操作区域一般为精灵图像区域的任意位置，例如，如果小兔子的跳跃动作被预设为点击动作，则点击小兔子的任意部位都可使小兔子进行跳跃。热区动作与点击动作一样，也需要人工进行点击，但是点击的部位只能限定于精灵的局部区域，因而，热区动作与点击动作是精灵为任选其一的动作。默认动作、点击动作以及热区动作里面都包含各自的动作组，每个动作组里面有一个或多个动作，这些动作例如为移动到、移动至、缩放到、缩放至、摇摆、旋转、贝塞尔曲线、跳跃、循环播放等等。场景中还具有界面文字集合，界面文字集合为场景里面的一个集合属性，其显示了场景里面的所需要的各种文字。场景中还需要各种按钮，比如上下翻页按钮等，各种按钮组成按钮集合。根据如上所述的微动画产品可知，微动画产品中需要构建并配置表征这些各元素对象(精灵，界面文字，按钮，精灵动作等等)的属性，因此，在微动画的编辑中，如何简单、 方便地构建并配置各元素的属性是重要的。如图2所示，本发明的微动画编辑器在显示界面上可以通过树形结构来显示微动画的上述各元素对象的层次关系，通过画布来显示各元素对象的图像及其编辑状态，还可通过一属性框来对树形结构中的各对象的属性进行编辑。因此，通过本发明的微动画编辑器可以直接对微动画进行个性化配置，并且通过可视化界面来对编辑情况进行直观了解。图4是根据本发明的一个实施例的微动画编辑器的结构框图。如图4所示，为了可以实现上文描述的微动画编辑功能，根据本发明的一个实施例，本发明所提供的微动画编辑器包括第一转换模块，用于调用一数据模型中各对象的属性变量，并将所调用的属性变量通过属性框显示出来，以及数据模型中各对象的属性变量与在属性框中该对象的相应属性值之间进行数据同步，其中所述数据模型创建了所述微动画中各对象用到的所有常量和
变量；第二转换模块，用于将所述数据模型转换为树形结构，并且在数据模型和树形结构之间进行数据同步；第三转换模块，用于将所述数据模型中的各对象转换为画布中的图像；序列化模块，用于将所述数据模型转换为XML配置文件，并对其存储；解析模块，用于解析所述XML配置文件，将解析出的各标签的属性值赋给数据模型中与各标签对应的对象的属性变量，以使对XML配置文件进行再次编辑。下面将结合具体实施例详细描述上述微动画编辑器的各模块的功能。在本发明中，无论是第一转换模块、第二转换模块或第三转换模块都涉及到了数据模型，因此，首先描述了本发明所用到的数据模型。在本发明的实施例中，数据模型构建了微动画产品各元素对象所涉及的所有常量和变量，例如，创建各对象的属性常量，初始化各对象变量等。由于数据模型适用于微动画产品的各元素对象，因此这些常量和变量在系统中具有初始的默认值或者为空值。下面为数据模型中关于场景层次的数据模型的构建示例(1)
namespace game editor.Model
{ 一
public class MyScene:MyBase
{
string backgrounds ound;
string backgroundPic;
string music;
string prev;
string next;
float delay;
string transitionPrev;
string transitionNext;
float tracsitionDuration;
private List<MyEffec> effecSet;private List<MyMenu> menus—; private List<MyLabel> IabelSet; private List<MySprite> spriteSet; private List<MyStatus> statusSet; private List<MyNewGame> gameSet; int passNums;
public MySceneQ {
Name = "index";
backgrounds ound ="";
backgroundPic ="";
music ="";
prev ="";
next ="";
delay = 0;
transitionPrev = " CCTransitionSlideInL";
transitionNext = "CCTransitionSlideInR"；
tracsitionDuration = 1 .Of;
effecSet = new List<MyEffec>();
menus— = new List<MyMenu>();
IabelSet = new List<MyLabel>();
spriteSet = new List<MySprite>();
Position = new System.Drawing.PointF(0.0f,0.0f);
ObjType = MyObj ectType .AT Scene;
statusSet = new List<MyStatus>()；
gameSet = new List<MyNewGame>()；
passNums = 0;上述示例中的数据模型构建了场景中所涉及的常量和变量，并且对所涉及的变量进行初始化赋值，例如，初始化的场景属性变量backgroundPic (背景图片)和 backgroundSound(背景声音)为空值。由上述示例可以理解到本发明的数据模型是将微动画产品中可能涉及到所有层次的对象及其属性都通过数据结构的方式描述出来，数据模型作为本发明基本的核心以供其它模块后续的属性调用、配置以及显示。数据模型中既构建了微动画产品的层次结构，也配置了微动画产品所涉及对象的数量以及属性，因此，对微动画产品的编辑即体现在对数据模型的变量配置上。在对微动画产品的某个对象进行属性编辑时，第一转换模块调用该对象在数据模型中所涉及的属性变量，通过属性框在界面上显示出来，以便可以通过属性框对这些属性变量进行编辑。图2中的属性框示出了第一转换模块所调用的精灵对象所涉及的属性，例如精灵名称、精灵图片、精灵坐标、精灵大小等等，在属性框中可以对这些精灵对象的各属性进行赋值。赋值之后的精灵属性还可通过第一转换模块将这些属性值返回给数据模型， 也即为适用于所有微动画产品的数据模型进行个性化配置，从而生成针对某个微动画产品的数据模型。也可理解到，第一转换模块在调用数据模型的属性变量时，也可将数据模型中的变化更新的属性变量值同步给属性框，从属性框中直观显示属性值的更新，因此，第一转换模块的主要功能实现了属性框的编辑操作与数据模型的数据同步，无论是在数据模型中对象的属性变量值发生了变化，还是属性框中的属性值得到更新，都可以在另外一方中同步体现或显示出来。在编辑操作上，在编辑人员对某个对象的属性框中的属性值进行了修改后，其相应的数据模型也进行了同样更新，从而同样的变化也同步在下面所描述的画布中的图像。数据模型可以通过第二转换模型以树形结构在显示界面上显示出来。数据模型中构建了微动画产品的各层级结构，因此通过第二转换模型所转换的树形结构直观地显示了微动画产品的各层级结构。一个微动画Play的树形结构的层次结构如图2和3所示，树形结构中的第一层为游戏，游戏包括第二层的多个场景，第二层的场景又可包括第三层的精灵集合、界面文字集合、按钮集合等，第三层的精灵集合又可包括第四层的多个精灵，第四层的精灵可包括第五层的点击动作、默认动作、热区动作等，第五层的默认动作又可包括第六层的动作集合，如此层层嵌套下去，从而将数据模型中的层次结构通过树形结构来展示出来。第二转换模块还用于在数据模型与界面上的树形结构之间同步数据，以使在数据模型或树形结构之间任一方发生变化时将其变化的数据在另一方中体现出来。例如，对某个微动画产品的数据模型中的场景变量数组进行修改，增加了一个场景，通过第二转换模块，树形结构中就会增加一个场景；同样地，如果界面上的树形结构删除了一个精灵，通过第二转换模块，该树形结构对应的数据模型中的相应精灵数组就会减少一个数组成员。由于树形结构各对象的属性值与数据模型的属性变量值同步，数据模型中的属性变量值又与属性框的属性值同步，因此，在对树形结构中的某个对象进行点击操作时，就会在界面上显示出其相应的属性框，从而可以对树形结构中的某对象进行属性编辑操作。进一步地，针对某个微动画产品所配置的数据模型可通过第三转换模块将其涉及的对象通过画布显示出来。例如，图3中的画布显示了某个场景的背景以及场景中的精灵对象，如兔子、啄木鸟、松鼠等。根据本发明的另一个实施例，第三转换模块还可用于在画布和配置的数据模型之间同步数据，例如，通过第三转换模块，可以将鼠标的拖拉动作，或者键盘中的方向键对画布中选中的元素位置进行调整的动作数据同时同步到数据模型的相应变量中。例如，如果数据模型中修改了关于精灵松鼠的“移动到”动作的目的地址的属性值，则在画布中会显示松鼠所移动的目的地蒙版，表明松鼠最终移动的位置。由此，通过第一转换模块、第二转换模块以及第三转换模块将以数据模型为核心将数据模型、树形结构、属性框以及画布之间的数据同步起来，也即，在这四者之间任一方的数据进行了更新或对其进行了操作，都会在其它三方之间产生对应的更新。这里需要说明的是，在本发明的微动画编辑器中，可以通过计算机输入设备对树形结构、属性框以及画布进行操作，操作不限于对树形结构中各对象的添加、删除，对属性框属性值的编辑以及对画布中对象的移动等操作。也可理解到，计算机输入设备与树形结构、属性框以及画布等上述操作可以通过相关的现有的功能模块来实现，因此这里对这些实现上述操作的模块并不作详细描述。还需要理解到的是，本发明的属性框的创建方式、画布形式都可采用现有技术中的常用的方式。在完成针对某个微动画产品所配置的数据模型之后，本发明的微动画编辑器还提供了序列化模块，用来将所配置的数据模型转换成XML格式的配置文件，并将其存储下来。序列化模块按照数据模型与XML配置文件的继承关系将针对某个微动画产品所配置的数据模型转换成XML配置文件，并进行存储，以进行后续的调用。所生成的XML配置文件中的各个属性或标签对应于微动画产品的数据结构的各对象。XML配置文件中各标签的继承关系也一致于该数据模型中各对象之间的继承关系。例如，针对上述示例(1)中的数据结构，经过序列化模块所生成的相应的XML配置
文件如下〈scene id="2" delay="0" name="er" prev="index" next="san" backgroundPic="2changjing768.png" backgroundSound="haininghaoa.mp3" music="vd.mp3" tranTime=" 1" passNums="0"
tranModePre="CCTransitionSlideInL" tranModeNext="CCTransitionSlideInR"> 〈statuses /> <menus /> 〈sprites〉
〈sprite name="men" imagePath="menl @menl .png" position="{178,570}" scale=" 1" zlndex="l" tag=" 10" opacity="255"> <actions>
〈group type="sequence" repeatCount=" 1" touchScreenlazyTime="0" actionName="default" groupsCount="0">
〈action type="cycle" time="4" delay="4" repeatCount=" 1"> <images>
<image path="men 1 @men 1 .png" /> <image path="men2@men2.png" /> <image path="men3 @men3 .png" /> <image path="men4@men4.png" /> </images> </action> </group> 〈/actions〉 〈/sprite〉
〈sprite name="songshu" imagePath="songshu 1 @songshu 1 .png" position="{196,588}" scale=" 1" zlndex="0" tag="ll" opacity="255"> 〈touch moveToPoint="">
〈group type="spawn" repeatCount=" 1" touchScreenlazyTime="0" actionName="default" groupsCount="0">
〈action type="effect" time=" 10" repeatCount=" 1" labelName="xiaosongshu" isMusic="Y" music="xiaosongshu.mp3" />
〈action type="cycle" time="2" delay="2" repeatCount="5"> <images>
〈image path=" songshul@songshul .png" /> 〈image path=" songshu2@songshu2 .png" /><image path="songshul @songshu1 png" /> 〈image path=" songshu2@songshu2 .png" /> 〈image path="songshul @songshul .png" /> 〈image path=" songshu2@songshu2 .png" /> 〈/images〉 〈/action〉
〈action type="moveto" time=" 10" duration=" 10" targetPosition="{379,600}" repeatCount=" 1" /> </group> 〈/touch > 〈/sprite〉
〈sprite name="zhuomuniao" imagePath="zhuomuniaol@zhuomuniaol.png" position="{160,321}“ scale=" 1" zlndex="0" tag=" 12" opacity="255"> 〈touch moveToPoint='"' >
〈group type=" spawn" repeatCount=" 1" touchScreenlazyTime="0" actionName="default" groupsCount="0">
〈action type="cycle" time="0.6" delay="0.6" repeatCount=" 17 ">
<images>
〈image path="zhuomuniaol @zhuomuniaol .png" /> <image path="zhuomuniao2@zhuomuniao2.png" /> 〈/images〉 〈/action〉
〈action type="effect" time=" 10" repeatCount=" 1" labelName="zhuomuniao" isMusic="Y" music="zhuomuniao.mp3“ /> </group> </touch> 〈/sprite〉
〈sprite name="mao2" imagePath="mao21 @mao21 .png" position="{948,589}" scale=" 1" zlndex="0" tag="13" opacity="255"> 〈touch moveToPoint='"' >
〈group type=" spawn" repeatCount=" 1" touchScreenlazyTime="0" actionName="default" groupsCount="0">
〈action type="cycle" time=" 1.5" delay=" 1.5" repeatCount=" 10">
<images>
〈image path="mao21 @mao21 .png" /> <image path="mao22@mao22.png" /> <image path="mao23@mao23.png" /> 〈image path="mao21 @mao21 .png" /> </images> </action>
12</group> </touch> <actions>
〈group type="spawn" repeatCount=" 1 “ touchScreenlazyTime=nO" actionName="default" groupsCount="0">
〈action type="cycle" time=" 1.5" delay=" 1.5" repeatCount="7"> <images>
〈image path="mao21 @mao21 .png" /> 〈image path="mao22@mao22.png" /> 〈image path="mao23@mao23.png" /> 〈image path="mao21 @mao21 .png" /> 〈/images〉 </action>
<action type="moveto" time=" 10" duration=" 10" targetPosition="{828,492}" repeatCount=" 1" /> </group> 〈/actions〉 〈/sprite〉
〈sprite name="tuzi" imagePath="tuzil @tuzil .png" position="{811,152}" scale=" 1" zlndex="0" tag=" 14" opacity="255"> 〈touch moveToPoint="">
〈group type="spawn" repeatCount=" 1" touchScreenlazyTime=nO" actionName="default" groupsCount="0">
〈action type="cycle" time="2" delay="2" repeatCount="5"> <images>
〈image path="tuzil@tuzil .png" /> 〈image path="tuzi2@tuzi2 .png" /> 〈image path="tuzi3@tuzi3 .png" /> 〈image path="tuzi4@tuzi4 .png" /> 〈image path="tuzi5@tuzi5 .png" /> 〈image path="tuzil@tuzil .png" /> 〈/images〉 </action>
〈action type="effect" time=” 10" repeatCount="!" labelName="xiaobaitu" isMusic="Y" music="xiaobait.mp3" /> </group> </touch> 〈/sprite〉 </sprites> 〈labels〉
〈label type="LRC" name="xiaosongshu" position="{512,80}" color="{255,0,0,255}" fontSize="25" font="JQZhongYuanJT" alignment="center" demension="{ 1024,25}" opacity="255" tag=" 1000"zlndex="10" content="karaoke := CreateKaraokeObj ect; 
 ；
karaoke .rows =
2;
karaoke.clear;

karaoke.add(O0:00.697', '00:12.969',’小松鼠，尾巴大，轻轻跳上又跳下，我帮你，你帮我，釆到松果
送回家。’，
'215,322,319,640,374,321,313,704,224,344,287,626,295,311,401,656,231,265,31 2,432,360,303,328,697,488,344,342,618,311,344,336,209’);
&#χΑ;" />
〈label type="LRC" name="zhuomuniao" position=" {478,14}" color=" {255,0,0,255}" fontSize="25" font="JQZhongYuanJT" alignment=Mright" demension=" {800,25}" opacity="255" tag=" 1001" zlndex="10" content="karaoke := CreateKaraokeObject;
karaoke.rows := 2;
karaoke.clear;

karaoke.add(O0:00.669', '00:09.103',’啄木鸟，会听诊，会开刀，治病不要钱，只收虫一条。’， '168,248,272,792,248,263,314,678,233,264,273,599,223,368,257,273,280,582,30 5,511,352,280,336,315');
"/>
〈label type="LRC" name="xiaobaitu" position=" {508,47}" color=" {255,0,0,255}" fontSize="25" font="JQZhongYuanJT" alignment="center" demension=" {1024,100}" opacity="255" tag=" 1002" zlndex="10" content="karaoke := CreateKaraokeObj ect; 
 ；
karaoke .rows :=
2;
karaoke.clear;

karaoke.add(O0:00.749', '00:12.253',’小白兔，白又白，两只耳朵竖起来，爱吃萝卜和青菜，蹦蹦跳跳
O ,
'207,234,223,624,232,272,264,839,263,242,279,681,319,280,240,785,408,279,28 0,529,319,265,247,696,216,248,248,561,288,328,336,272’);
&#χΑ;" /> 〈/labels〉 〈games /> </scene>为了更易理解上述XML配置文件，下面详细介绍XML配置文件中各标签及其属性。 其中XML配置文件中各个标签的设置也遵循上述微动画产品组织结构的元素层次。1、〈play> 标签<play>标签可以是XML配置文件中最外层大标签。<play>标签的属性可以包 括name、width、height、configFilepath、picPath、musicPath、sceneHome、url 禾口 originType。属性含义mame——微动画名称；width——微动画屏幕的宽度；height——微动画屏幕的高度；configFil印ath——场景配置文件文件夹名；picPath——图片保存文件夹名；musicPath——音乐保存文件夹名；sceneHome——首页场景名称；url——网络资源下载路径；originType——微动画屏幕的原点位置；<play>标签可以包括一个或多个子标签 <scene>,〈scene〉为场景标签，属性包含name，该属性的含义是指场景名称，即存储的针对每个场景的XML配置文件的文件名。2、<scene>|^
<play>标签可以作为最外层大标签，设定微动画应用软件需要的系统条件。也可以将针对单个微动画场景中各元素的属性进行设置的〈scene〉标签作为最外层大标签。该 <scene>标签不同于上述<play>标签的子标签〈scene〉。在XML配置文件中允许有名称相同的标签，名称相同的标签可以有不同的属性。每个场景都有自己的场景图片、场景声音、场景音乐、翻页方式、进入时间、停留时间等。这些属性可以进行个性化配置，以满足不同场景的展示效果。<scene> 标签的属个生可以包括id、delay> name、prev> next、backgroundPic> backgroundSound> music> tranTime> tranModePre 禾口 tranModeNext。属性含义id——场景序号；delay——场景停留时间；name——场景名称；prev——上一场景名称；next——下一场景名称；backgroundPic——背景图片；
backgroundSound-背景声音；music-背景音乐；tranTime-场景切换执行时间；
tranModePre——向上一场景切换的方式；tranModeNext——向下一场景切换的方式。3、〈sprites〉标签每个场景中可以有一个或多个精灵，每个精灵都可以有位置、精灵图片、精灵大小等属性，这些属性可以进行个性化配置。此外，每个精灵还可以包含动作类的子标签，从而使得精灵动作也可以根据需要进行配置以完成相应的效果。〈sprite〉标签是〈sprites〉标签的子标签。〈sprites〉标签是<scene>标签的子标签，表示一个精灵集合。〈sprites〉标签可以包括多个〈sprite〉标签。〈sprite〉标签的属性可以包括name、imagePath、position、 scale、zlndex、tag 禾口 opacity。属性含义mame——精灵名称JmageI^th——精灵图片名称；position——精灵坐标；scale——精灵图片相对原始图片的大小；Zhdex——精灵显示索引；tag——精灵标签；opacity——精灵透明度。下面介绍〈sprite〉标签中包含的子标签——动作配置标签。动作配置标签可以包括四种并列的子标签默认动作标签〈actions〉；点击动作标签〈touch〉；热区集合标签 <miniTouchSet> ；调用其他精灵动作标签<touchTrigger>。3. 1、<touchTrigger> 标签<touchTrigger> 标签可以包括属性:actionSprite 禾口 actionName。属性含义aCti0nSprite——调用的动作精灵名；actionName——调用的动作名。3. 2、<miniTouchSet> 标签〈minil^ouct^et〉标签可以包括属性rect。属性含义rect——第一个花括号内的坐标表示与精灵中心点位置的相对位置χ坐标和y坐标，第二个花括号内的坐标表示热区区域的宽和高。4、动作组标签<group>〈actions〉、<miniTouchSet>及<touch>标签下面都可以包括动作组来完成相应动作的配置。<group> 标签可以包括属性type、repeatCount、actionName、 touchScreenlazyTime。属性含义type——动作组类型，分为sequence (顺序执行)和spawn (同时执行)两种；I^peatCount——动作组重复执行的次数；actionName——组动作名称，默认为default，如被其他精灵调用则修改为相应的名称(可以只是作为〈touch〉标签的子标签时〈group〉中才配置该属性，如果作为非〈touch〉标签的子标签时，〈group〉标签中的 actionName可以为默认值)；touchkreenlazyTime——场景加载后，默认动作等待运行时间(只有在默认动作中设定才起作用，如果不是默认动作，则touchScreenlazyTime取值为 0)。下面将分别介绍〈group〉标签包含的各种类型的动作子标签的属性及含义。4. U moveto/moveby 类型的 <action> 标签moveto/moveby g M 白勺〈action〉fe ^ nj 1M :type> time、 duration、 targetPosition> repeatCount 禾口 reverse。属性含义type——动作类型；time——动作执行总时间；duration——动作执行时间；targetPosition——动作之后的目标位置(moveby类型的〈action〉标签中指相对位置)；I^peatCount——动作重复执行的次数；reverse——是否反向执行(只在moveby 类型的〈action〉标签中设置此属性)。4. 2、scaleto/scaleby 类型的 <action> 标签scaleto/scaleby ^IMW <action> fe^ nj ^,^ Mft :type、 time、 duration、 scale、repeatCount 禾口 reverse。属性含义type——动作类型；time——动作执行总时间；duration——动作执行时间；scale——放大/缩小的比例，1为不缩放；r印eatCoimt——动作重复执行的次数； reverse——是否反向执行(只在scaleby类型的〈action〉标签中设置该属性)。4. 3、wag 类型的〈action〉标签wag gM白勺 <action> fe^nT^^SMft :type、time、IeftDuration、leftAngle、 rightDuration> rightAngle 禾口 repeatCount。属性含义type——动作类型；time——动作执行总时间；IeftDuration——向左摇摆的时间；IeftAngle——向左摇摆的角度，一般应该填负数；rightDuration——向右摇摆的时间；rightAngle——向右摇摆的角度(与左摆角度成相反关系，即一个为正，一个为负)；I^peatCount——动作重复执行的次数。4. 4、whirl 类型的〈action〉标签whirl 类型的〈action〉标签可以包括属性type、time、duration 禾口 repeatCountο属性含义type——动作类型；time——动作执行总时间；duration——动作执行时间；I^peatCount——动作重复执行的次数。4. 5、blink 类型的〈action〉标签blink 类型的〈action〉标签可以包括属性type、time、duration 禾口 repeatCountο属性含义type——动作类型；time——动作执行总时间；duration——动作执行时间；I^peatCount——动作重复执行的次数。4. 6、jumpby 类型的〈action〉标签jumpby 类型的〈action〉标签可以包括属性type、time、duration、targetPosition>height、jumps 禾口 repeatCount。属性含义type——动作类型；time——动作执行总时间；duration——动作执行时间；targetPosition——目标位置(相对位置)；height——每次跳跃的高度； jumps——到达目标点，所需跳跃的次数；I^peatCoimt——动作重复执行的次数。4. 7、贝赛尔曲线(bezierby)类型的〈action〉标签bezierby g M 白勺 <action> fe ^ nj 1M :type、 time、 duration、 targetPosition、controlPointl、controlPoint2 禾口 repeatCount。属性含义type——动作类型；time——动作执行总时间；duration——动作执行时间；targetPosition——动作后的目标位置(相对位置)；controlPointl——控制点1 的坐标(相对位置)；c0ntr0lP0int2——控制点2的坐标(相对位置)；r印eatCount—— 动作重复执行的次数。4. 8、cycle 类型的〈action〉标签cycle 类型的 <action> 标签可以包括属性type、time、delay 禾口 r印eatCount。属性含义type——动作类型；time——动作执行总时间；delay——图片播放的总时间；I^peatCount——动作重复执行的次数。4. 9、effect 类型的〈action〉标签effect gM 白勺 <action> fe^ nj ^,^ Mft :type、 time、music、repeatCount> IabelName 禾口 isMusic。属性含义type——动作类型；music——音乐名称；IabelName——配合音乐显示的界面文字名称；isMusic——是否为音乐(Y表示音乐，N表示音效)。4. 10、event 类型的〈action〉标签event类型的〈action〉标签可以包括属性type、time和tag。属性含义type——动作类型；time——动作执行的时间；tag——事件执行动作类型，例如，“100”表示向前一页翻页模式；“101”表示向后翻页模式；“102”表示向主页翻页模式。event类型的〈action〉标签的属性配置的例子如下〈action type = 〃 event" time =" 10〃 tag=" 101〃 />5、<menus> 标签每个场景中都可以有按钮(menu)，每个按钮里面又可以有一组按钮项。按钮项的排列顺序由按钮的基本属性来确定，每个按钮项会对应有自己的处理事件等基本属性。这些属性都可以进行个性化配置，以满足不同场景对按钮需要完成的效果的配置。<menu>标签是<menus>标签的子标签。<menu>标签可以包括属性zhdex、tag、 fontSize、position 禾口 showStyle。属性含义zlndex——显示索引，数字越大越靠上显示；tag——标签，调用按钮时使用，不同的按钮要有不同的标签值；fontSize——如果按钮选用的是文字的话，设置按钮中的字体的大小；position——按钮位于场景中的坐标，即按钮中心点的位置；showStyle——按钮项的排列方式，即一个按钮中的各个按钮项的排列方式horizontally(水平排列)或者vertically (垂直排列)。<item>标签即按钮项标签，是&enu>标签的子标签。<item>标签可以包括属性 normalImage>selectedlmage>disabIeImage>isEnable>target、selector 禾口 tag。属性含义normal Image——按钮项显示的默认图片；selectedlmage——按钮项选择后显示的图片；disablelmage——按钮项不可用时显示的图片；isEnable——按钮项是否可用； target——默认值为self ；selector——预留操作字段；tag——menu按钮的按钮项的标签值，调用时使用，不同的按钮项要有不同的tag值，用于触发不同的事件。6、〈labels〉标签每个场景都可能有默认显示的界面文字，或者某些精灵发声时需要对应显示相应的文字。这些文字有字体、字号、颜色、位置、对齐方式等相关的基本属性。这些属性都可以进行个性化配置，以满足不同的场景的界面文字需要完成的效果。<label>标签是〈labels〉标签的子标签。<label>标签可以包括属性type、 name、position、color、fontSize、font、alignment、demension、opacity> tag、zlndex 禾口 content。属性含义type——文字界面类型，可以包括普通text和LRC两种类型；name——文字界面名称，默认为default ；position——文字界面坐标位置，文字界面中心点的坐标； color——文字界面中文字的颜色；fontSize——文字界面中文字的字号；font——文字界面中文字的字体；alignment——文字界面中文字的对齐方式居中对齐方式、左对齐方式、 右对齐方式；demension——文字界面区域范围；opacity——文字界面中文字的透明度； tag——文字界面的标签；dndeX——文字界面在场景中的显示索引；content——文字界面中显示的内容。上文中描述了 XML配置文件中的各标签及其属性，可以明显看出其对应数据模型的各标签的含义。经过序列化模块生成的XML配置文件可以根据需求适用在不同操作系统中对该XML配置文件的微动画产品进行查看。但是在微动画编辑中，一个微动画产品并不是一次就可完成编辑工作，而是需要根据需求对微动画产品进行反复编辑修改，因此，为了对已经生成XML配置文件的微动画产品进行二次编辑，本发明的微动画编辑器还包括解析模块，用于解析所生成的XML配置文件，将解析出的各标签的属性值赋给数据模型中与各标签对应的对象的变量，从而生成相应于XML配置文件的数据模型。因此，在编辑人员对某个XML配置文件进行二次编辑时，通过解析模块将XML配置文件再生成相应的数据模型，然后再基于与该XML配置文件相应的数据模型进行编辑。根据本发明的另一个实施例，如图5所示，本发明的微动画编辑器还可包括工具模块，工具模块具有上传或下载XML配置文件等功能。如果在生成一个微动画产品过程中， 需要将所生成的XML配置文件都存放在远端服务器上，则需要工具模块来进行XML配置文件的上传或下载。进一步地，一个微动画产品中涉及到大量的XML配置文件，则所述工具模块还用于XML配置文件的打包上传、下载等功能。根据本发明的再一个实施例，如图6所示，本发明的微动画编辑器还可包括配置模块，用于对树形结构中各对象的添加和删除，以使可以在树形结构中进行微动画数据模型的配置。本发明提供的微动画编辑器通过数据模型、树形结构、属性框以及画布之间的同步，有效地反映出微动画产品中的各元素的属性及其对应的动作关系，能够精确定位各元素的坐标，能够对各元素的动作进行量化配置，还能够对元素复杂动作进行配置。为此，本发明还提供一种微动画编辑方法，所述方法包括Sl 将一数据模型转换为树形结构模块中的树形结构，并且在数据模型和树形结构模块之间进行数据同步，其中所述数据模型构建了包含有微动画中各对象用到的所有常量和变量；S2:调用数据模型中各对象的属性变量，并将所调用的属性变量通过属性框显示出来，所述属性框用来对微动画中各对象的属性进行编辑；S3:对在数据模型中各对象的属性变量与在属性框中该对象的相应属性值进行数据同步；S4 将所述数据模型中的各对象转换为画布中的图像；S5 将经过与所述属性框、所述树形结构同步之后的数据模型转换为XML配置文件，并对其存储；所述微动画编辑方法在对微动画进行二次编辑时还包括解析所述微动画的XML 配置文件，将解析出的各标签的属性值赋给数据模型中与各标签对应的对象的属性变量， 以生成所述相应的数据模型，然后再进行步骤S1-S5。根据本发明的一个实施例，所述步骤S4中还包括在所述数据模型与所述画布之间进行数据同步的步骤，从而所述步骤S5中还包括下述步骤将经过与所述属性框、所述画布以及所述树形结构同步之后的数据模型转换为XML配置文件，并对其存储。根据本发明的一个实施例，在所述步骤S5中，通过使数据模型中各对象之间的继承关系与所述XML配置文件中各标签之间的继承关系相一致的方法将所述数据模型转换为XML配置文件。根据本发明的一个实施例，在所述步骤Si、S3或S4之后，还包括对所述树形结构中的各对象进行添加或删除的步骤。上述步骤S1-S4中的顺序部不限于上文中描述的顺序，而是可以各种顺序来进行。例如，步骤S2-S3与S4之间的顺序可以进行交换，因而本发明的微动画编辑方法可以步骤S1-S4-S2-S3-S5-S6的顺序实施。本领域普通技术人员可以理解到数据模型与树形结构模块、画布以及属性框之间的数据同步可以是任意顺序，只要能够实现本发明即可。本发明提供的微动画编辑器中各模块及微动画编辑方法中的各步骤，可以由具有数据处理能力的一个或多个处理设备，例如一个或多个计算机运行计算机可执行的指令来实现。存储介质中可以存储各种用于执行本申请提供的微动画编辑方法的各个步骤的指令。本申请的微动画编辑器可以由运行计算机可执行指令的一个或多个处理设备实现。微动画编辑器中的模块可以为该处理设备运行计算机可执行指令时具有相应功能的设备组件。虽然已参照典型实施例描述了本发明，但应当理解，所用的术语是说明和示例性、 而非限制性的术语。由于本发明能够以多种具体形式实施而不脱离发明的精神或实质，所以应当理解，上述实施例不限于任何前述的细节，而应在随附权利要求所限定的精神和范围内广泛地解释，因此落入权利要求或其等效范围内的全部变化和改型都应为随附权利要求所涵盖。
权利要求
1.一种微动画编辑器，其特征在于，微动画通过树形结构模块以树形结构显示微动画中各对象的层次关系，通过画布来显示微动画的图像及其编辑过程，以及通过属性框对所述微动画中各对象的属性进行编辑，所述编辑器包括第一转换模块，用于调用一数据模型中各对象的属性变量，并将所调用的属性变量通过属性框显示出来，以及用于在数据模型与属性框之间进行数据同步，其中所述数据模型用于创建所述微动画中各对象用到的所有常量和变量；第二转换模块，用于将所述数据模型转换为树形结构模块中的树形结构，并且在数据模型和树形结构模块之间进行数据同步；第三转换模块，用于将所述数据模型中的各对象转换为画布中的图像； 序列化模块，用于将所述数据模型转换为XML配置文件，并对其存储； 解析模块，用于解析所述XML配置文件，将解析出的各标签的属性值赋给数据模型中与各标签对应的对象的属性变量，以生成相应的数据模型。
2.根据权利要求1所述的微动画编辑器，其特征在于，所述微动画编辑器还包括工具模块，用于对所述XML配置文件进行上传或下载。
3.根据权利要求1所述的微动画编辑器，其特征在于，所述微动画编辑器还包括配置模块，用于对树形结构中的各对象进行添加或删除。
4.根据权利要求1所述的微动画编辑器，其特征在于，所述第三转换模块还用于在所述数据模型与画布之间进行数据同步。
5.根据权利要求1-4任一项所述的微动画编辑器，其特征在于，所述微动画的各对象包括游戏、场景、精灵、界面文字、按钮以及精灵动作其中之一或其组合。
6.根据权利要求1-4任一项所述的微动画编辑器，其特征在于，所述序列化模块通过使数据模型中各对象之间的继承关系与所述XML配置文件中各标签之间的继承关系相一致的方法将所述数据模型转换为XML配置文件。
7.一种微动画编辑方法，其特征在于，所述方法包括下述步骤51将一数据模型转换为树形结构模块中的树形结构，并且在数据模型和树形结构模块之间进行数据同步，其中所述数据模型构建了包含有微动画中各对象用到的所有常量和变量；52调用数据模型中各对象的属性变量，并将所调用的属性变量通过属性框显示出来， 所述属性框用来对微动画中各对象的属性进行编辑；53对在数据模型中各对象的属性变量与在属性框中该对象的相应属性值进行数据同步；54将所述数据模型中的各对象转换为画布中的图像；55将经过与所述属性框、所述树形结构同步之后的数据模型转换为XML配置文件，并对其存储；56在对微动画进行二次编辑时，解析所述微动画的XML配置文件，将解析出的各标签的属性值赋给数据模型中与各标签对应的对象的属性变量，以生成所述相应的数据模型， 然后再进行步骤S1-S5。
8.根据权利要求7所述的微动画编辑方法，其特征在于，所述步骤S4中还包括在所述数据模型与所述画布之间进行数据同步的步骤；所述步骤S5还包括将将经过与所述属性框、所述画布以及所述树形结构同步之后的数据模型转换为XML配置文件，并对其存储。
9.根据权利要求7或8所述的微动画编辑方法，其特征在于，在所述步骤S5中，通过使数据模型中各对象之间的继承关系与所述XML配置文件中各标签之间的继承关系相一致的方法将所述数据模型转换为XML配置文件。
10.根据权利要求7或8所述的微动画编辑方法，其特征在于，在所述步骤S1、S3或S4 之后，还包括对所述树形结构中的各对象进行添加或删除的步骤。
全文摘要
本发明涉及一种微动画编辑器及其编辑方法，其中微动画编辑器包括第一转换模块，用于调用一数据模型中各对象的属性变量并通过属性框显示出来，以及在数据模型与属性框之间进行数据同步，其中数据模型创建微动画中各对象用到的所有常量和变量；第二转换模块，用于将数据模型转换为树形结构模块中的树形结构，并且在其之间进行数据同步；第三转换模块，用于将数据模型中的各对象转换为画布中的图像；序列化模块，用于将数据模型转换为XML配置文件，并对其存储；解析模块，用于解析XML配置文件，将解析出的各标签的属性值赋给数据模型中与各标签对应的对象的属性变量。本发明简单、方便地对微动画产品中各对象元素进行配置。
文档编号G06T13/00GK102289834SQ20111025336
公开日2011年12月21日 申请日期2011年8月30日 优先权日2011年8月30日
发明者吕子茹 申请人:北京瑞信在线系统技术有限公司