文章导航PC6首页软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

您的位置:首页网页设计经验技巧 → 如何用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)进行跨域请求方法如何用远程桌面连接进行传输文件