您的位置:首页网页设计经验技巧 → 如何用Silverlight Tools实现3D动画

如何用Silverlight Tools实现3D动画

时间:2010/1/19 14:21:00来源:本站整理作者:我要评论(0)

1.用Visual Studio和Silverlight 3 Tools开发环境设置图片

  启动Visual Studio,并创建新的Silverlight工程

  (1)在Start菜单,指向并单击Visual Studio 2008

  注意:如果是首次启动需要设置开发环境,我们选择C#开发环境

  (2)点击File->New->Project…

  (3)在New Project对话框中Project types列表中点击Silverlight

  (4)在Templates中选择Silverlight Application

  (5)Name项目填写:HOL

  (6)Solution Name:HOL

  (7)其余为默认

  接下来的过程,你会看到在项目中添加一个图片和按钮

  向工程中添加图片并编辑产生3D特效和模糊滤镜,阴影滤镜特效

  (1)右击HOL工程项目,选择Rebuild

  (2)右击ClintBin 添加桌面图片:LAB1->Add-Pic-Silverlight Tools->Cartoon.jpg

  (3)在MainPage.xaml文件中添加代码:

<Canvas Width=”1000”,Height=”1000”Background=”Black”>
<Image Source=”Cartoon.jpg”Height=”500”Width=”500”Canvas.Left=”210”Canvas.Top=”0”>
<Image.Protection>
<PlaneProjection Retation X=”50”></PlaneProjection>
</Image.Projection>
</Image>
</Canvas>

  (4)Ctrl+F5,您可以看到3D效果的图片

  (5)删除<Image.Protection>

<PlaneProjection Retation X=”50”></PlaneProjection>
</Image.Projection>
添加
<Image.Effect> <BlurEffect x:Name="blurEffect" Radius="100"></BlurEffect>
</Image.Effect>          
</Image>
<Slider x:Name="blur" Canvas.Top="10" Canvas.Left="210" Width="500" Minimum="0" Maximum="10" Value="{Binding Radius,Mode=TwoWay,ElementName=blurEffect}"></Slider>

  注意: Slider是和Image并列的控件,Slider在Image控件外定义

  (6)修改Image属性:Canvas.Left=”250” Canvas.Top=”0”Height=”400”Width=”400”删除BlurEffect控件和Slider控件,添加:

<DropShadowEffect x:Name="dropShadowEffect" BlurRadius="5" Color="Blue" Direction="315" Opacity="1" ShadowDepth="5"/>
添加Slider控件:
<Slider Canvas.Top="20"  Canvas.Left="250" Width="400" Minimum="0" Maximum="10" Value="{Binding BlurRadius,Mode=TwoWay,ElementName=dropShadowEffect}"></Slider>
<Slider Canvas.Top="30" Canvas.Left="250" Width="400" Minimum="0" Maximum="360" Value="{Binding Direction,Mode=TwoWay,ElementName=dropShadowEffect}"></Slider>
<Slider Canvas.Top="40" Canvas.Left="250" Width="400" Minimum="0" Maximum="1" Value="{Binding Opacity,Mode=TwoWay,ElementName=dropShadowEffect}"></Slider>
<Slider Canvas.Top="10" Canvas.Left="250" Width="400" Minimum="0" Maximum="100" Value="{Binding ShadowDepth,Mode=TwoWay,ElementName=dropShadowEffect}"></Slider>

  注意:这里用不同的Slider绑定不同DropShadow特性 2.用Deep Zoom Composer工具制作特效

  在以下步骤,你将创建新的Deep Zoom工程,并完成Deep Zoom特效设计

  创建新的Deep Zoom项目并添加和导出图片

  (1)在主机程序列表中选中Deep Zoom Composer,打开并选择New Project…

  (2)在New Project对话框中Name填入HOL,默认路径

  (3)点击Add Image…

  注意: Add Image…按钮在右上方

  (4)在Add Image对话框中,选择路径到桌面->LAB1->Add-Pic-DZcomposer文件夹下,选中其中所有的图片,点击“打开”,此时所有的图片被导入到工程项目中

  (5)点击上方的Compose按钮

  (6)将下方Image栏中的图片任意拖拽至编辑区域

  注意: 您可以选中需要的图片,再用左侧工具对齐

  (7)选中Export,您可以在左侧看到预览

  (8)选择右侧导航栏的Custom,在Output Type中选择Silverlight Deep Zoom,之后选择Preview

  (9)看到预览之后效果,您可以滑动鼠标滚轮和拖拽图片

  注意:您可以选择不同的导出方式(Export as a Composition 或者 Export as a Collection),导出后到导出文件目录查看有什么不同

  在下面的步骤中,将为图片添加链接和通过DeepZoomPix发布

  为Deep Zoom效果的图片添加链接和将其发布

  (1)在上面的第6步中选中任意图片,点击右键,选择Add External Link

  (2)在External Links Management 对话框中Name栏填写Silverlight. URL栏填写:http://www.silverlight.net

  (3)点击”save”

  (4)点击Export,在右侧选择Custom标签,选择Preview现在点击图片即可跳到相应的链接

  (5)回到Export,选择DeepZoomPix标签,用Windows Live ID登陆

  (6)选择Create new album, 选择Select album cover,再点击Publish

  (7)登陆http://deepzoompix.com/ 查看

  3.用Mosaic Maniac工具制作马赛克效果的Deep Zoom特效

  在下面的步骤中,将创造马赛克效果的Deep Zoom特效

  利用Mosaic Maniac工具制作马赛克效果的Deep Zoom特效

  (1)在虚拟机启动菜单中选择Mosaic Maniac打开Mosaic Maniac程序

  (2)点击 File->Load Master Image, 在桌面的LAB1->Add-Pic-MosaicManiac文件夹中选择(1).jpg作为母板图片

  (3)点击File->Image Library->Load Image Directories

  (4)将桌面->LAB1->Add-Pic-MosaicManiac文件夹中的图片导入

  (5)点击Render->Photo Mosaic

  (6)在Build Options 对话框中,我们将number of tiles设置为10*10,点击OK

  (7)选择File->Save As->HTML

  (8)在Save as Html Options对话框中选择Silverlight Deep Zoom

  (9)文件名称为:DeepZoom 点击保存至桌面-〉LAB1文件夹

  (10)运行

  注意:您将number of tiles改成30*30再看看效果有什么不同

  比较Silverlight的Deep Zoom与Flash的Open Zoom

  (1)在上一任务的Save as Html Options对话框中选择Flash Open Zoom

  (2)点保存至桌面-〉LAB1文件夹,文件名称为OpenZoom

  (3)点击保存

  (4)比较DeepZoom与OpenZoom效果的差异

 

相关视频

    没有数据

相关阅读 vs.netIDE报"以下文件中的行尾不一致,要将行尾标准化吗?"的解决ie6下面asp.net mvc3 部署应用程序.NET 3.5 安装错误的四个原因及解决方法支持无限制历史记录的Paint.NET 3.5.8 Final,你用了吗?.NET Framework环境安装错误怎么办?JVM和.NET CLR和哪个会被彻底击败在asp.net mvc中实现右键菜单和简单的分页教程VB.NET如何得到调用当前过程的方法名称和类名称

文章评论
发表评论

热门文章 Wordpress本地安装教程dx1.5如何设置二级域名

最新文章 hbuilder有哪些快捷键Wordpress本地安装教程 Wordpress本地安装教程expression web 4文档乱码解决方法dz 2.5“收藏本版”关闭小对话框无法关闭解在制作安装软件之前,您必须先将易语言存盘,

人气排行 如何使用multipart/form-data格式上传文件Photoshop PS图层混合模式详解(非常详细)ISAPI_Rewrite3使用教程网站里添加收藏和设为首页代码桌面快捷方式图标不见了C#获取执行程序所在的当前路径的方法详解(XMLHttpRequest)进行跨域请求方法如何用远程桌面连接进行传输文件