零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下)
原文:零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下)
抱歉久等了!!!!
终於到了动画MenuBar的最终章罗!
?
?
抱歉久等了!!!!
终於到了动画MenuBar的最终章罗! :)
?
?
由於,本篇动画设定较多,为求步骤清楚,所以文章较为冗长
而小猴子因为篇幅的关系也已经删减了一部分入门观念的解说
(小建议:若是已经对动画等相关制作与设定、Visual State等有相当的了解,再看本篇会比较好懂喔!)
?
?
想观看有关入门动画的介绍,请点选这里~
如果想了解有关Visual State的介绍,请观看Ch32以及Ch33
?
?
?
另外,如果你没看过动画MenuBar的(上)篇、(中)篇
请先回顾前两章:
零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上)
零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中)
?
若是你已经会了前两章,那就开始吧!
?
?
?
?
01 第二层Menu的布局容器(Grid+Border+WrapPanel)
沿用(中)篇完成的MenuBar,我们要来制作第二层Menu
请在MenuBar下方置入一个Grid,命名为SecondMenu
?
?
接着,在Grid置入一个Border,命名为Menu1
?
?
利用Properties->Brushes->Gradient brush来制作第二层选单的背景颜色
?
?
(这里为了图片能清楚的示意,所以我事先放了一个白色的Rectangle在Border底下,色彩调整完後拿掉)
颜色请都选取为黑色#FF000000:
(1)Gradient Stop?? 0%、Alpha 80%
(2)Gradient Stop 30%、 Alpha 70%
(3)Gradient Stop 70% 、Alpha 70%
(4)Gradient Stop 100%、 Alpha 80%
?
?
接着,在命名为Menu1的Broder内,置入一个WrapPanel
?
?
并调整适当大小
?
?
02 运用HyperlinkButton制作Menu选项<
在WrapPanel放入HyperlinkButton,调整文字颜色为白色(Foreground->#FFFFFFFF)
?
?
为了让HyperlinkButton的外观,更合乎我们想要的样子,我们需要编辑它的Template
?
?
进到HyperlinkButton的Edit Template模式後
删掉我们不需要的UnderlineTextBlock、DisabledOverlay以及FocusVisualElement
?
?
并把contentPresenter的HorizontalAlignment以及VerticalAlignmen皆设定为Center使文字置中
?
?
03 丰富Menu选项的视觉效果
为了让选项的效果更丰富,我们来加一点东西:
(如图所示,一样是在Template模式下)
?
?
请置入一个Rectangle,并把颜色请都选取为白色->#FFFFFFFF
接着渐层设定如下:
(1)Gradient Stop 20% Alpha 0%
(2)Gradient Stop 95% Alpha 40%
(3)Gradient Stop 98% Alpha 75%
(4)Gradient Stop 100% Alpha 75%
?
?
完成後,会如下图:
?
?
切换到State,於Base状态下,请把contentPresenter->Appearance->Opacity设为0%
?
?
MouseOver状态下:
选取Rectangle,设定:
(1)於0.0秒时Opacity为0%
(2)於0.4秒时Opacity为100%,并且设定EasingFunction->Bounce Out (Bounces为3、Bounciness为2)
?
?
使contentPresenter:
(1)0.0秒时Properties->Transform->Translate X 设为10
?
?
(2)0.4秒时Translate X 为0,并且设定EasingFunction->Back InOut-> Amplitude为3
?
?
完成後,离开Template编辑模式
?
?
04 善用WrapPanel做选单的排列
复制多个HyperlinkButton
?
?
上图为WrapPanel的Orientatiion为Horizontal(水平)排列
请调整WrapPanel的Orientatiion为Vertical(垂直)排列
对照上下两图,应该可以发现明显的差异喔!
?
?
(WrapPanel是个很好用的布局容器,若有必要,我会再针对WrapPanel专门写一篇文章做介绍~)
?
?
05 第二层选单开阖设定
切到State,Base状态下,选取先前命名为Menu1的Border
把Center Point设定在最左上角,如下图:
?
?
因为於一般状态下,第二层选单是收起的,所以把Menu1的Scale X与 Scale Y由1设为0
?
?
新增一个State->Add state,并且命名为Menu1Open
?
?
展开效果:
於0.5秒,把Menu1的Scale X与 Scale Y还原为0->1,并设定EasingFunction->Exponential InOut 5
?
?
复制多个Menu1,并重新命名为Menu2、Menu3、Menu4.......
并且把Menu2、Menu3、Menu4.......移到对应MenuBar的适当位子下
别忘了State也要对应新增,并用一样的方式设定喔!
?
?
在(中)篇制作好的MenuBar->RadioButton下放入GoToStateAction:设定Menu1Open触发条件为MouseEnter
(其余的GoToStateAction也别忘了设定触发条件喔!)
?
?
当然,有开就要有关,所以我这边Add了一个名为AllMenuClose的State
一并选取Menu1~4後,把Properties->Appearance->Visibility设定为Collapsed
?
?
在Menu1~4下,放入GoToStateAction:设定AllMenuClose触发条件为MouseLeave
?
?
?
?
本篇最後成果:
很抱歉,阁下使用的浏览器并不支援 IFrame,不能正常浏览我的网页
?
?
附上本章范例:
?
?
?
辛苦了!!!看完一整篇,希望你已经学会如何应用了~
看似复杂的设定其实很简单,所有的效果都藏在简单的设定中呢!
善用这些小技巧,就能达到你想要的效果喔!
希望有机会,能分享更多有关Blend也可以做到的Flash动画效果!
?
?
(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)
?
一步一步迈向HIE之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您
零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下)的更多相关文章
- 零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中)
原文:零元学Expression Blend 4 - Chapter 41 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(中) 我们接着进行动画MenuBar的制作 接续着上 ...
- 零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上)
原文:零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上) 一直以来都有人拿Flash的动画问我Blend ...
- 零元学Expression Design 4 - Chapter 1 入门界面简介
原文:零元学Expression Design 4 - Chapter 1 入门界面简介 Expression Design 是Expression系列里面的一员,更是Blend跟Web的好帮手 而在 ...
- 零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果
原文:零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果 又来一篇五分钟做设计啦~ 本篇将教大家如何运用Design内建工具Blend Path ...
- 零元学Expression Design 4 - Chapter 7 使用内建功能「Clone」来达成Path的影分身之术
原文:零元学Expression Design 4 - Chapter 7 使用内建功能「Clone」来达成Path的影分身之术 本章所介绍的是便利且快速的内建工具Clone ? 本章所介绍的是便利且 ...
- 零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果
原文:零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果 本章将教你如何运用笔刷与简单线条,只要5分钟,就能做出设计感效果 ? 本章将教你 ...
- 零元学Expression Design 4 - Chapter 4 教你如何自制超炫笔刷
原文:零元学Expression Design 4 - Chapter 4 教你如何自制超炫笔刷 在Chapter 2 有稍微讲过Design内建笔刷的用法,本章将教大家如何自制独一无二的笔刷,并且重 ...
- 零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果
原文:零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果 本章将教大家如何活用「Text On Path」,做出文绕图 ...
- 零元学Expression Design 4 - Chapter 2 熟悉Design并且快速设计出Silverlight网页
原文:零元学Expression Design 4 - Chapter 2 熟悉Design并且快速设计出Silverlight网页 本章将用带大家熟悉Design 4并制作简易的网页版面,也会让你了 ...
随机推荐
- style.height、offsetHeight、clientHeight、scrollHeight的差别
style.height 包含元素的滚动栏,不包含边框 clientHeight 不包含元素的滚动栏和边框 offsetHeight 包含元素的滚动栏和边框 scrollHeight offsetHe ...
- C语言递归实现二叉树的先序、中序、后序遍历
#include <stdio.h> #include <stdlib.h> //*****二叉树的二叉链表存储表示*****// typedef struct BiNode ...
- 前端切图:一个好看的表格css样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- [Django] Start a new django project
Assume we already have a env created call 'demo-env': cd demo-env . bin/activate pip install django ...
- Oracle数据库零散知识08 -- 逻辑备份和还原(转)
一.介绍逻辑备份是指使用工具export将数据对象的结构和数据导出到文件的过程.逻辑恢复是指当数据库对象被误操作而损坏后使用工具import利用备份的文件把数据对象导入到数据库的过程.物理备份即可在数 ...
- VC和matlab混合开发遇到的问题及其解决办法
作者:朱金灿 来源:http://blog.csdn.net/clever101 1. error C2011: '_INTERFACE_INFO' : 'struct' type redefinit ...
- Linq知识小总结
一.投影操作符 Select Select操作符对单个序列或集合中的值进行投影. 返回 IEnumerable<类名> //查询语法 var query = from e in db.Em ...
- 一个2013届毕业生(踏上IT行业)的迷茫(4)
等了大概三个月,终于到9月份了,以前没有出过远门,这次要去西安上学,一个人父母还是不放心,带了几件衣服就和父亲匆匆去坐火车,这一路有多少个第一次啊,第一次和父亲一块坐车.第一次坐火车.第一次出县城.第 ...
- oracle的number的浅析
author:skate time:2011-02-14 oracle的number的浅析 从例如以下几个方面来认识number 1.表示的数值范围 2.占用的存储空间 3.number的性能 ...
- Qt自定义密码框,先显示后隐藏(继承以后改写slot即可,即与哪个相近就改写哪个)good
现在很多应用在密码输入时,会先显示一段时间,大概几百毫秒,然后再变成星号或者圆点隐藏起来.这样做的好处是,可以让密码输入者看到自己输入的字符,同时又防止密码被偷窥.但是Qt自带的密码输入框,要么输入时 ...