零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I

简介: 原文:零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I 本章将教大家如何运用CheckBox做实作上的变化;教你如何把CheckBox...
原文: 零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I


本章将教大家如何运用CheckBox做实作上的变化;教你如何把CheckBox变藏宝箱!

?

本章将教大家如何运用CheckBox做实作上的变化;看我怎麽把CheckBox变藏宝箱!

?

最近帮公司做了一个互动式的小游戏,运用了CheckBox的功能,就顺便介绍给大家

为了利益回避,以及日後不必要的麻烦,本章范例已经简化了很多东西,只留下与相关的图片及功能

?

01 先简单介绍CheckBox

找到CheckBocx这个控制项

image

?

拉一个放到主要工作区,如下图

通常CheckBox的基本运用,以实例来说:

问卷的勾选、会员基本资料填写..........等等,当然还有很多

主要分别就是选取未选取

image

image

?

02 CheckBox的变化

我们使用CheckBox的基本特性,来达到我们宝箱开关的效果

?

开关宝箱,需要两张图,所以需要事先准备了两张图

(下载宝箱图片)

?

我先在主要工作区放入关闭的宝箱(Adobe PhotoShop如何置入到Blend,之前教学已经有做过介绍了)

接着在宝箱上单击滑鼠右键->Make Into Control->CheckBox

点选CheckBox以及命名完成後点下OK即可

image

?

03 进入样板编辑模式後,请删除ContentPresenter

(因为我们只需要做出宝箱开关的效果,并不需要用到文字区块)

接着,与上一章所介绍的Button一样,我们要来编辑CheckBox的样板

?

请把刚刚就存在於专案里,开启的宝箱图片(OpenBox)放入主要工作区,并且与关闭的宝箱重叠

image

?

记得Normal时OpenBox的Opacity调整为0%

?

?

04 MouseOver时,我希望宝箱会摇晃

所以现在我们来设置宝箱MouseOver时的动画

范例为0.1秒与0.3秒各一个Keyframe

(请使用Rotate调整宝箱的角度:0.1秒为-20度、0.3秒为20度)

(不懂Rotate吗?请看此章)

image

?

动画重复次数设为2x

image

?

?

05 再来是点击宝箱以後的宝箱开启(Checked)

选取Checked後编辑

范例为0.5秒与1.0秒各一个Keyframe

(请使用Opacity调整宝箱的可见度:我们用透明度的变动达到视觉暂留的效果)

关闭的宝箱0.5秒,Opacity0%

开启的宝箱1.0秒,Opacity100%

image

?

完成後,按下F5,看看成果~

?

06 回到一般编辑模式,多贴几个宝箱,要几个有几个

全部都能够直接套用我们刚刚所设置的样板模式

image

?

本篇的教学就到此。

?

?

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

?

一步一步迈向HIE之路

 

喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您

 

 

目录
相关文章
|
C#
用 Expression Blend 创建酷炫的 Button
原文:用 Expression Blend 创建酷炫的 Button 原文:Creating “Cool” Buttons with Expression Blend Author: Alex 在本文中,我们将考虑在Expression Blend用几种方法来创建酷炫的凝胶状按钮。
1137 0
零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果
原文:零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果 又来一篇五分钟做设计啦~ 本篇将教大家如何运用Design内建工具Blend Paths...
1034 0
零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果
原文:零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果 本章将教大家如何活用「Text On Path」,做出文绕图以及...
1043 0
零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II
原文:零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II 延续上一章的CheckBox教学,本章将以实作继续延伸更灵活的运用CheckBox。
1184 0
零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I
原文:零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I 本章将教大家如何更改Button的预设Template,以及如何在Button内设置动画。
1871 0
零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II
原文:零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II 本章将教大家如何制作自己的Button,并以玻璃质感Button为实作案例。
1219 0
|
Web App开发 容器
零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式
原文:零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式 本章将先教大家认识ListBox的基本运用与更改预设样式 ...
1238 0
零元学Expression Blend 4 - Chapter 35 讨厌!!我不想一直重复设定!!『Template Binding』使用前後的差异
原文:零元学Expression Blend 4 - Chapter 35 讨厌!!我不想一直重复设定!!『Template Binding』使用前後的差异 因为先前写到自制Button时需特别注意Tem...
1294 0
|
容器
零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II
原文:零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II 本章将延续上一章的范例,步骤解析。
1310 0
|
容器
零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I
原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布...
1315 0