零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计

原文:零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计

本章将教大家如何把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档案。

?

这里提供现成的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之路

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

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