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之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您