用Silverlight Tools实现3D动画及特效


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文件中添加代码:


Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><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>


Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><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控件,添加:


Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

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



相关阅读:
用Java实现Web服务器 HTTP协议
PHP开发中常用的字符串操作函数
PHP生成excel时单元格内换行问题的解决方法
在Linux异构网络中备份MYSQL数据库(图)
批处理的高级运用技巧
javascript 连连看代码出炉
XP安装IIS,找不到zClientm.exe的解决办法
Prototype Enumerable对象 学习
JSP操作用以提高数据库访问效率
PHP获取网卡地址的代码
浅谈在Windows环境下Kill掉Oracle的线程
php 8小时时间差的解决方法小结
Sql server2005 优化查询速度50个方法小结
js 文本框里粘贴一个图片url并显示
快速导航

Copyright © 2016 phpStudy |