如何用Silverlight Tools实现3D动画 -pc6资讯

您的位置：首页 → 网页设计 → 经验技巧 → 如何用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文件中添加代码：

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

　　(5)删除<Image.Protection>

　　注意: 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效果的差异

相关视频

没有数据

文章评论

查看所有0条评论>>