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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计相关的知识,希望对你有一定的参考价值。

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



本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画。

只要按照步骤来,就能很容易的做出动画的效果。

?

本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画。

只要按照步骤来,就能很容易的做出动画的效果。

?

就是要让不会的新手都看的懂!

?

----------------------------------------2010/11/11更新------------------------------------------------

本章范例

(请点飞机一下)

?

?

?

01 开启新专案,置入Photoshop档案

打开Blend 4 後选择Top MenuFile->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

我们在AssetsSearch键入Control Storyboard Action,直接拖动Control Storyboard Action到飞机上

技术分享图片

?

右边Properties会出现触发属性面版Trigger

技术分享图片

?

Event Name为触发条件的设定,这边我们选择Loaded,表示网页一打开就会自动跑动画。

Control Storyboard 我们设定PlayStoryboard则是选取我们刚刚制作的Storyboard1

?

12 最後阶段

请按F5,等到状态列出现Build Succeed会自动跑出预设浏览器,内容就是我们设定的动画了!

很简单吧!

只要一步一步跟着做,你马上就会使用Blend 4 制作动画噜!

?

要记得举一反三喔~

?

本篇的教学就到此。

?

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

一步一步迈向HIE之路

 

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

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

 

 







以上是关于零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计的主要内容,如果未能解决你的问题,请参考以下文章

零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」

零元学Expression Blend 4 - Chapter 19 如何让做好的Blend专案变Silverlight网页

零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」

零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」

零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」

零元学Expression Blend 4 – Chapter 21 以实作案例学习MouseDragElementBehavior