分享程序员开发的那些事...
更新时间：2022-09-29 22:52:02
本章将教大家如何把Photoshop档案置入Expression Blend 4，以及设置简单的动画。
只要按照步骤来，就能很容易的做出动画的效果。
?
本章将教大家如何把Photoshop档案置入Expression Blend 4，以及设置简单的动画。
只要按照步骤来，就能很容易的做出动画的效果。
?
就是要让不会的新手都看的懂!
?
----------------------------------------2010/11/11更新------------------------------------------------
本章范例
(请点飞机一下)
很抱歉，阁下使用的浏览器并不支援 IFrame，不能正常浏览我的网页
?
?
?
01 开启新专案，置入Photoshop档案
打开Blend 4 後选择Top Menu的 File->New Project(快捷键Shift+Ctrl+N)。 选择Silverlight Application+ Website为你的项目类型；由於我们要置入的档案背景大小为800*600，所以我们把主要工作区大小改为800*600後，点选File->Import Adobe Photoshop File後选取你要置入的psd档案。
?
?
02 选取我们要的图层
点选Import Adobe Photoshop File後，会出现一个让我们选取图层的视窗，除了最下面的Compatibility image不选之外，其他都打勾。
?
03 独立图层
在Photoshop制作档案时，我把背景、飞机、火焰都分开各自为一图层，所以你可以在Objects and Timeline看到图层是独立且分开的；尔後，如果你想设计动画，你可以使用Photoshop把档案制作好後，放到Blend 4内，当然你也可以使用 Expression Design 4，相容性更高，之後我会针对Expression Design 4设立一个独立的教学专区。
?
04 开始进入动画设置
进入动画设置前，我们必须把主要工作区的工具更该为动画设置；请点选Top Menu的window->Workspaces->Animation。
?
工作区会变为下图你所看到的样子：
>
?
05 新增Storyboard，我们要开始动画噜!
Objects and Timeline右上角有个「+」号，点选它後会出现Create Storyboard Resource的对话视窗，我们用预设的Storyboard1当故事版的命名就好了。
若是想要删除Storyboard，可点选「+」号左边「x」号，可删除。
?
点击OK後，可以看到下方工具列出现时间轴的控制版面，并且会发现我们的主要工作区被红色框线包围住，左上角有个小红点，这样表示你已经可以开始你的动画设定了，若是你点击小红点，可以取消动画录制模式。
?
06 让飞机起飞吧!
时间轴面版上有0-10的数字，这些数字代表秒数，现在拖动黄色的时间指示线，由0移到3的地方。
再来我们选取飞机跟火焰，因为我们要让他们一起移动(你也可以把它们两个群组起来)；把飞机跟火焰拖动到右上角的地方。
?
接着按下Play键，让我们来看看效果。
因为我们设置0-3秒，所以飞机由左至右的飞了三秒到达你所拖曳的位子。
这就是Blend神奇的地方，它不需要像Flash一样，每格秒去设定当格的长相，而且Blend会自动生成动画的路径，自然且方便!
?
07 改变路径动作
若你不是很喜欢Blend预设动画的移动路径，Blend 也很贴心的准备了不少的模式供各位客官套用。
有发现时间轴上有小白圆点吗?点下右边的Properties会出现Easing的工具面版，在Easing Function(缓和渐变)下，有许多模式可套用，这边我选择Quintic InOut。
(如果你的时间轴上没有小白圆点，请点选Play左下方处的Record Key frame新增。)
点选Play再播放一次，你会发现动画的路径移动跟刚刚的不一样了。
有33个内建的Easing Function，找一个你自己喜欢的移动模式吧!
?
08 自创一个属於自己的Easing Function
若是Blend 4 内建的模式你都不满意，让我们来自己设定一个且独一无二的Easing Function。
首先，点选你想要自定动画路径的图层小白圆点(Record Key frame)後，到Properties->Easing->Key Spline，移动黄色节点，进行拖动，就可以生成新的Easing Function效果。
回到Objects and Timeline，按下Play即可看到你自定的Easing Function。
?
09 为动画做一点变化
我们来让飞机的火焰做一点变化，让火焰到第三秒的时候有变长的感觉。
在时间指示线位於第三秒的地方，只点选火焰，并使用Selection(快捷键V)工具，拉动火焰边缘使火焰变长，完成後，我们按下Play播放看看。
火焰从0-3秒的地方，渐渐变长，中间无需再做任何设定就能达成，这是Blend强大的地方!
?
10 设定动画拨放的次数
在Objects and Timeline的Storyboard1上单击左键，右边Properties会出现Common Properties设定工具。
?
若你勾选Auto Reverse，则你的动画播放完後会自动到转带回到原点，你可以试着勾选後按Play试试看。
1x是播放一次，2x是播放两次…以此类推，Forever就是一直播放不停止。
?
11 设定触发动画条件
设定动画触发点，需切换回到一般工作区，点选Top Menu的Window->Workspaces->Design。
我们在Assets的Search键入Control Storyboard Action，直接拖动Control Storyboard Action到飞机上
?
右边Properties会出现触发属性面版Trigger。
?
Event Name为触发条件的设定，这边我们选择Loaded，表示网页一打开就会自动跑动画。
Control Storyboard 我们设定Play、Storyboard则是选取我们刚刚制作的Storyboard1。
?
12 最後阶段
请按F5，等到状态列出现Build Succeed会自动跑出预设浏览器，内容就是我们设定的动画了!
很简单吧!
只要一步一步跟着做，你马上就会使用Blend 4 制作动画噜!
?
要记得举一反三喔~
?
本篇的教学就到此。
?
(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)
一步一步迈向HIE之路
喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您