零元学Expression Blend 4 - Chapter 32 简单轻松的学会如何使用Visual States(上)

原文:零元学Expression Blend 4 - Chapter 32 简单轻松的学会如何使用Visual States(上)

Visual State Manager中文翻译为视觉状态管理器，这是Blend的强大功能之一



这项功能赋与了视觉设计师更大的空间

?

Visual State Manager中文翻译为视觉状态管理器，这是Blend的强大功能之一

这项功能赋与了视觉设计师更大的空间

?

以一般制作Html网页所使用到的Button举例来说：

通常会出现的三种基本状态：Normal、MouseOver、Pressed可能就需要三张不同的图片来组成

?

但是在Blend内却是完全不同的设计方法：

你只需要修改预设Button的基本样式，或是使用一张图片甚至是用内建工具拖拉出的图型，就能转化成Button，直接能拥有Button的基本属性

若是你看过我之前的文章介绍，很多都有使用到Visual State这项功能：自制玻璃质感的Button就是一个很好的例子

?

这次不一样的是我们从Create Empty开始!

?

01

拉出一个Button後，在Button上单击右键Edit Template->Create Empty，命名完成点击OK

?

会看到Objects and Timeline下存在一个空白的Gird，并且取代了原本的Button

?

切换到State，这边显示了Button提供的所有Visual States（视觉状态）

(如果找不到State这个Tab，请到TopMenu->Window勾选)

?

在上面，目前被选中的是Base(基本)，这里列出了所有允许我们定义Button的状态列表：

分为Common与Focus两种

CommonStates包含了Normal、MouseOver、pressed以及Disabled

FocusStates包含了Unfocused与Focused

?

02

然後，我们在Base状态中，加入一些图型把我们的Button外观制作好

你可以跟着范例做，或是放入图片

?

范例使用Eliipse拖拉出两个圆形两个颜色为渐层的椭圆型，使用渐层以及图层堆叠的方式做出类反光效果

深蓝色码：#FF333E93

浅蓝色码：#FFB0C3E3

(想看更详细的图形工具介绍，请到这里)

?

拖拉一个椭圆至於圆形下方，形成此圆的阴影部分，直接调整ZIndex为-1就可以把阴影置於圆形後方

(不了解ZIndex吗?这里有更详细介绍)

?

使用两个椭圆型制作出一个爱心的形状

Translate->Flip->Flip X axis翻转其中一个椭圆再使之交叠就可以达成

?

接着把两个椭圆选起来，单击右键->Combine->Unite

?

到此前置作业大致完成

?

你可以按下F5预览看看，你会发现自订的Button完全没有任何反应，得不到任何操作时视觉上的反馈

?

如果是以其他的工作或是以传统的合作方式，视觉设计师的工作就到这边了，但是有了Visual State这项功能，设计师就可以继续发挥

想知道更多吗?看下篇就知道。

?

?

本篇的教学就到此。

?

?

?

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

一步一步迈向HIE之路

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

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