Expression Blend制作画卷效果

Expression Blend中可以方便的导入Photoshop或者illustrator的文件来创建我们的WPF或者Silverlight应用程序。

本文将一个具体的实例导入Photoshop文件并制作一个画卷的效果。PSD下载位置为：http://www.lanrentuku.com/psd/sheji/2688.html

1.找到画卷的素材，如下图

2. 我们在画卷中写一首诗或者是什么武林秘籍之类的文字，如下图，我写了“九阴真经”这几个字，如下图

3.下面我们创建我们的应用程序，创建WPF应用程序或者Silverlight应用程序，这里我创建的是WPF应用程序，取名为PaperScroll

选择文件，导入我们的PSD文件，如下图

选择好PSD文件后，会弹出如下的窗体，选择相应的图层，点击ok

4. 导入后我们会发现图片十分的大，将页面撑的十分难看，如下图

此时我们就需要调整我们的图层、窗体的大小了。我们在对象和间线面板中选中导入的图层，更改它的高度和宽度属性

5. 注意到此时的图片是竖排的，而我们想要的效果确是横排的，我们将LayoutRoot和Window的长宽设为图层相反的，如下图

此刻我们可以调整图片为横排了，选择yellow_paper，将Transform面板中的角度设为90，如下图

6. 此刻这些图层的大小都是一样了，但是还是不是十分的对齐，我们可以通过缩小视图，看得十分清楚，如下图

我们需要使用手抓工具将他们拖成对齐

7.调整后，我们选择LayoutRoot，在上面绘制文本，注意要选择LayoutRoot而不是图层或者yellow_paper，因为他们已经被我们旋转了，如果在上面写字的，效果是竖排的，写好字后的效果如下图

8. 至此，我们可以开始制作画卷动画了，跟前面一样，新建一个StoryBoard，在时刻0时，我们将换卷合起来，如下图

9. 然后在每个时刻，做一个关键帧，显示一个字，总共5秒钟，最后的时间线如下图：

10. 至此，画卷效果我们已经做出来了，下面是美化下，因为画布的背景没有设置，是白色，看上去不是很好看，而且还有边框，下面是没有美化之前的效果图

11. 在时刻0时，我们将背景设为透明，如下图

12. 运行程序，效果如下，

13. 此刻我们会发现没有关闭按钮了，我们可以直接添加一个，在时刻0的时候添加一个关闭图片，并写相应的事件

代码十分简单，this.Close();即可

14. 至此，一个简单的画卷应用程序就完成了

小结，我们可以使用PS做好设计以后然后再Blend中将设计赋予动画、数据等，一个漂亮的应用程序就可以很快的完成了。

由于源代码很大，只提供exe文件下载，如附件所示。

附件：http://down.51cto.com/data/2358223

本文转自xshf12345 51CTO博客，原文链接：http://blog.51cto.com/alexis/574565，如需转载请自行联系原作者

Expression Blend制作画卷效果相关推荐

零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上)...
零元学Expression Blend 4 - Chapter 40 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(上) 原文:零元学Expression Blend 4 - ...
Expression Design与Blend制作滚动的小球动画教程
原文:Expression Design与Blend制作滚动的小球动画教程一,开发工具 Microsoft Expression Design & Blend 4.0 (3.0亦可). 这两 ...
Expression Blend 利用 SketchFlow 制作原型
SketchFlow 是 Blend 3 中的新工具,我觉着 SketchFlow是非常重要好用的原型设计及分发工具,把他学习好将会对我们设计和开发起到非常好的效果,建议了解并学好它,下面是官方的简介 ...
零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸)
原文:零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸) 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要 ...
Expression Blend实例动画-大坝水位升高演示
Expression Blend实例动画-大坝水位升高演示原文:Expression Blend实例动画-大坝水位升高演示 Expression Blend是个很强大的东西,用它可以完成很多不好做的 ...
WPF中制作立体效果的文字或LOGO图形
WPF中制作立体效果的文字或LOGO图形原文:WPF中制作立体效果的文字或LOGO图形较久之前,我曾写过一篇:"WPF绘制党徽(立体效果,Cool) "的博文.有感兴趣的朋友来 ...
Windows Phone 7 不温不火学习之《Expression Blend 创建渐变效果和创建Storyboard动画》...
说起Expression Blend ,开发过Silverlight 或者WPF的同学肯定会暗爽一把.微软把这一神器免费提供给我们开发者使用,特别是自从WP7 发布就立刻免费,可以看出微软对WP7的重 ...
Expression Blend学习5控件
Expression Blend ButtonStyle- TextButton 本章以TextButton为例,讲解如何最简单,最快速的制作一个专业的TextButton. 对于这个TextButt ...
html 文本显示蓝底蓝框,零元学Expression Blend 4 - Chapter 27 PathlistBox被Selected时的蓝底蓝框问题...
最近收到网友Cloud的来信,询问我有关放进PathlistBox的物件,被选取後会出现蓝底蓝框的问题经由他的同意,我决定把这个实作上遇到的问题及解决的方式,用一篇文章来跟大家分享 ? 最近收到网友 ...

Expression Blend制作画卷效果

Expression Blend制作画卷效果相关推荐

最新文章

热门文章