图4-12 精灵图的外观 图4-13 右键菜单 第二步:建立精灵图的属性、变量:
我们要考虑好精灵图在使用中需要暴露出那些属性需要在使用中进行修改以及精灵图具备那些功能。在我们这个精灵图中我们可以考虑暴露到外面的属性包括:整体的背景颜色、需要动态显示的液位的颜色、液位高度的最大值、最小值。需要关联液位高度的变量。
属性定义:单击右侧“内容”选项卡,选中“属性”点击右键在弹出的右键菜单中执行“添加属性”
命令,弹出图4-14所示属性定义对话框,我们先定义背景颜色,属性名称:BackColor,属性类型:Brush。点击“默认”
后面的弹出调色板,通过调色板设置默认的画刷类型与图4-11我们设置的画刷类型一致。
图4-14 属性定义
按照这种方式我们再定义液位颜色:fluidcolor,类型:Brush。 液位高度最大值:Max,最小值Min,类型:float。 如图4-15所示,四个参数定义完成。
图4-15 参数定义
变量定义:在这里建立的变量是局部变量,只能应用在精灵图中,不能用在工程的其它地方。参数定义完成后我们定义关联液位高度的变量。如图4-16所示:选中“变量”,点击右键增加变量, 弹出图4-17所示的变量定义对话框。
图4-16 增加变量
图4-17 变量定义
变量名称为:fluidValue,变量类型:float,初始值:0。
精灵图的属性、变量定义完成。下面我们定义精灵图的动画关联。 第三步:建立精灵图的动画关联:
精灵图的动画关联主要是将我们前面定义的属性、变量与精灵图的具体图素关联起来。
首先我们关联液位指示精灵图的面板(图素A)的背景颜色,选中作为背景的圆角矩形,设置Brush属性,点击Brush
属性后面的按钮,弹出如图4-18所示对话框,选择我们前面定义的BackColor属性, 点击“确定”完成此属性的关联。
图4-18 Brush属性设置
同样的方法,我们设置液位(图素D)的颜色属性,选中作为液位的圆角矩形,设置Brush属性,点击Brush
属性后面的按钮,弹出如图4-18所示对话框,选择我们前面定义的fluidColor属性,点击“确认”完成此属性的关联。
其次再设置液位(图素D)的缩放的动画连接,选中作为液位的圆角矩形,选择“连接”,点击“增加连接”增加动画连接,如图4-19所示,选择缩放的动画连接。弹出如图4-20所示的对话框。然后进行相关设置:
图 4-19 动画连接
选择关联的变量:fluidValue,此处只能够选择定义的精灵图的内部变量。 选择缩放比例为:线性缩放。选择缩放的参考点:下。
图 4-20 动画连接
设置最小时对应的数值:点击弹出如图4-18所示的对话框,选择属性Min,然后确
定。
设置最大时对应的数值:点击弹出如图4-18所示的对话框,选择属性Max,然后确定。
设置完成后如图4-21所示。点击确定完成设置。
图4-21 缩放动画连接定义 第四步:保存精灵图:
至此所有的动画连接完成了,精灵图的开发也就完成了。单击“文件”菜单中的“保存”命令,弹出精灵图库对话框如图4-22所示:我们选中最上面的“Genius Graphy Folders”,点击右键弹出菜单,选择创建一个新的文件夹,给文件夹命名,例如:my genius。然后给这个精灵图命名,例如:genius1。这样一个精灵图就完成了。保存之后再打开,如图4-23
精灵图的制作不仅仅是用基本作图工具来绘制,我们也可以利用现有的精灵图通过修改来生成新的精灵图。
我们在后面的工程画面的制作中也会用到此精灵图的。