零元学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档案。
?
?
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之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您
最新文章
- .NET Core RC2/RTM 明确了时间表
- linux下mono,powershell安装教程
- vue-resource
- 使用shiro的SimpleHash来生成常用的摘要串
- PFold.js 折叠纸片
- CSS从大图中抠取小图完整教程(background-position应用)
- VS2005(vs2008,vs2010)使用map文件查找程序崩溃原因
- Nginx高性能服务器安装、配置、运维 (4) —— Nginx服务、架构及其信号
- 基于nginx的rtmp的服务器(nginx-rtmp-module)
- linux下卸载和安装mysql数据库的方法
- Vulkan Tutorial 22 Index buffer
- 虚拟机Oracle VM VirtualBox linux系统如何访问windows共享文件夹
- 【LeetCode】正则表达式匹配(动态规划)
- python之tkinter使用-单级菜单
- mysql无法生成log文件
- linux md5sum命令
- Oracle 12C -- 删除audit policy
- Delphi XE5 for Android (七)
- Mysql常用配置及优化
- windows平台下spark-shell配置
热门文章
- [React] Render Basic SVG Components in React
- git基本原理
- CentOS7 下的mysql安装与配置
- go-wingui 2018 全新 v2.0 版本发布,包含重大更新!
- New in 10.2.2: C++ and Debugger Improvements
- Internet protocol security (ipsec) packet processing for multiple clients sharing a single network address
- iOS开展block说明
- 简明Python3教程 3.介绍
- Expression.Blend.4 Chapter 接口设计
- python win32api 使用小技巧