在上一篇博客里，提出了微软发布了基于Silverlight 技术的新版下载中心，旨在让用户更轻松的找到想要下载的软件。在首页，我们可以看见那个动感十足的Silverlight图标在无穷无尽地变幻着，这是Silverlight技术的表现方式之一，看上一眼我就爱上了它！
我马上想到将这个东东放到博客首页作为Tag图标显示如何？呵呵，说干就干，我立马去探寻silverlight的实现方式，本来我想使用Fraps（我用来制作实况足球游戏视频录像的软件）或者CamtasiaStudio（专业的屏幕录像软件，可生成各类视频）来对这个东东进行录像，再用GIFMovieGear来生成GIF图片。再一想，没那么复杂吧...把微软的首页保存下来，查看源代码研究了一下。发现以下语句：
<DIV id=SL_Base_Host>
<SCRIPT type=text/javascript>
createSilverlight("Swirly.xaml", "SL_Base_Host", "SL_Base_ControlID",
new MSDownloadCenter.Swirly(), {width: "98", height: "110", background: "#00ffffff", isWindowless: "true", enableInstall: true});
</SCRIPT>
</DIV>
里面调用了一个JS函数：createSilverlight，再去网页目录里翻了翻找到这个函数的出处，在DefaultSilverlight.js文件里，它的第一个参数就是silverlight后台xaml文件。将Swirly.xaml文件下载下来，用记事本打开一看，还好，都是类XML的内容。一看不知道，看完吓一跳。本来我以为号称Flash的竞争对手的SilverLight也是生成什么流式媒体文件的，结果出乎我的意料。文件内容如下：
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="rootCanvas"
Width="98" Height="110">
<Canvas.Resources>
<Storyboard x:Name="NextFrame">
<DoubleAnimation Duration="00:00:00.1000000" To="0" Storyboard.TargetName="image0" Storyboard.TargetProperty="(UIElement.Opacity)">
</DoubleAnimation>
<DoubleAnimation Duration="00:00:00.1000000" To="1" Storyboard.TargetName="image1" Storyboard.TargetProperty="(UIElement.Opacity)">
</DoubleAnimation>
</Storyboard>
</Canvas.Resources>
<Image Width="80" Height="80" Source="assets/images/swirly/loader_00000.png" Stretch="Fill" x:Name="image0" Canvas.Left="10" Canvas.Top="1"/>
<Image Width="80" Height="80" Source="assets/images/swirly/loader_00001.png" Stretch="Fill" Opacity="0" x:Name="image1" Canvas.Left="10" Canvas.Top="1"/>
<Image Width="80" Height="80" Source="assets/images/swirly/loader_00002.png" Stretch="Fill" Opacity="0" x:Name="image2" Canvas.Left="10" Canvas.Top="1"/>
<Image Width="80" Height="80" Source="assets/images/swirly/loader_00003.png" Stretch="Fill" Opacity="0" x:Name="image3" Canvas.Left="10" Canvas.Top="1"/>
......
看到没有？这个文件告诉我们，Silverlight在网页相应位置（某个层中）生成一个画布，然后加载一组一共101张图片文件（怪不得我打开首页那么慢，怀疑正在加载这101张图片-_-!），第一张图片正常显示，其它100张透明度（Opacity）为0就是透明显示。然后在Javascript里依次把这些图片循环显示。呵呵，是不是感觉有点那个...白痴
关于Silverlight的技术研究到这里，接下来我继续提取Silverlight中的图片，打开FlashGet批量下载这101张图片保存。准备直接用MovieGear打开它们，结果我突然发现MovieGear居然不支持PNG格式！打开Fireworks，执行文件->批处理->选中这些图片->选择继续->选择导出->在自定义格式选择GIF、256色、Alpha透明度->开始处理。然后你就得到了这101张图片的GIF格式。现在再打开MovieGear，导入它们，直接保存成GIF格式，OK，第一版图片做出来了。因为浏览器对于GIF图片帧时间间隔只支持最小0.1秒，导致图片变幻巨慢，汗...赶紧在GIFMovieGear里执行菜单 帧->剪切帧，在弹出的对话框中选择每隔2帧剪切一帧（隔一帧去掉一帧），确定即可，再保存一下。
这些图片下面本来没有字，微软也是用的PNG，再把它下载下来。用Fireworks打开刚才生成的GIF图片，扩大画布大小，增加一个共享层，将这几个字加进去，本来这些字白色的，需要把颜色反转一下。最后进行导出就得到了下面这个酷炫效果^_^
