本章将教大家如何运用CheckBox做实作上的变化;教你如何把CheckBox变藏宝箱!
?
本章将教大家如何运用CheckBox做实作上的变化;看我怎麽把CheckBox变藏宝箱!
?
最近帮公司做了一个互动式的小游戏,运用了CheckBox的功能,就顺便介绍给大家
为了利益回避,以及日後不必要的麻烦,本章范例已经简化了很多东西,只留下与相关的图片及功能
?
01 先简单介绍CheckBox
找到CheckBocx这个控制项
?
拉一个放到主要工作区,如下图
通常CheckBox的基本运用,以实例来说:
问卷的勾选、会员基本资料填写..........等等,当然还有很多
主要分别就是选取与未选取
?
02 CheckBox的变化
我们使用CheckBox的基本特性,来达到我们宝箱开关的效果
?
开关宝箱,需要开跟关两张图,所以需要事先准备了两张图
(下载宝箱图片)
?
我先在主要工作区放入关闭的宝箱(Adobe PhotoShop如何置入到Blend,之前教学已经有做过介绍了)
接着在宝箱上单击滑鼠右键->Make Into Control->CheckBox
点选CheckBox以及命名完成後点下OK即可
?
03 进入样板编辑模式後,请删除ContentPresenter
(因为我们只需要做出宝箱开关的效果,并不需要用到文字区块)
接着,与上一章所介绍的Button一样,我们要来编辑CheckBox的样板
?
请把刚刚就存在於专案里,开启的宝箱图片(OpenBox)放入主要工作区,并且与关闭的宝箱重叠
?
记得把Normal时OpenBox的Opacity调整为0%
?
?
04 MouseOver时,我希望宝箱会摇晃
所以现在我们来设置宝箱MouseOver时的动画
范例为0.1秒与0.3秒各一个Keyframe
(请使用Rotate调整宝箱的角度:0.1秒为-20度、0.3秒为20度)
(不懂Rotate吗?请看此章)
?
动画重复次数设为2x
?
?
05 再来是点击宝箱以後的宝箱开启(Checked)
选取Checked後编辑
范例为0.5秒与1.0秒各一个Keyframe
(请使用Opacity调整宝箱的可见度:我们用透明度的变动,达到视觉暂留的效果)
关闭的宝箱0.5秒,Opacity0%
开启的宝箱1.0秒,Opacity100%
?
完成後,按下F5,看看成果~
?
06 回到一般编辑模式,多贴几个宝箱,要几个有几个
全部都能够直接套用我们刚刚所设置的样板模式
?
本篇的教学就到此。
?
?
(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)
?
一步一步迈向HIE之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您