码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-12-24 11:11:44      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:size   好的   use   button   方式   设计师   样式   isa   部分   

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


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

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

?

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

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

?

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

通常会出现的三种基本状态:NormalMouseOverPressed可能就需要三张不同的图片来组成

?

但是在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的状态列表:

分为CommonFocus两种

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之路

 

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

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

 

 

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

标签:size   好的   use   button   方式   设计师   样式   isa   部分   

原文地址:http://www.cnblogs.com/lonelyxmas/p/8095215.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!