组件共享：Flash 大转盘

年底了各种抽奖，各种奖品，各种诱惑啊！

众多拼人品的抽奖环节当中，“大转盘”恐怕也一种很常见的方式吧。

这里特分享一个大转盘的组件：使用非常简单，且可以随意变换UI，相当的方便，如下：

 

为了增加这个“大转盘”组件的通用性，我把数据的接口提到了外面：

　　1）数据接口有外部来获取或设置，比如由js来负责；

　　2）flash只负责展示相应的奖品信息 和 转盘指针的转动。

具体流程是这样的：

　　1. 用户点击了转盘的开始抽奖按钮后：由flash通知js去获取当前抽奖的数据。

　　2. js得到通知后：发送请求到后端，以便得知中奖结果。

　　3. js得到结果后：数据经处理（或不处理）后，将数据传递给flash。

　　4. flash得到中奖信息后，开始转动指针并最终停留在相应的奖品信息位置。

　　5. 指针转动停止后通知js，以便进行后续的产品流程。如，弹出浮层等等。

具体的js和flash交互的API，以及相关的数据结构，在下面附件里有更详细的介绍。

 

下面我们聊下这个转盘的皮肤问题：

　　该大转盘由一个主的逻辑文件(wheel.swf) 和 一个皮肤文件（skin.swf）组成。

　　在使用时，只要在html页面中嵌入wheel.swf，并通过flashvars设置一个key为“skinURL”，值为skin.swf文件的url地址的字段即可。

　　wheel.swf ：负责整个转盘的逻辑和接口处理（不可变）。

　　skin.swf ：负责转盘界面UI的展示，根据需要可以随意修改或更换，该swf分为3个层：

　　　　最底层：底部转盘的样式，如底盘颜色、奖品图片和名称等；

　　　　中间层：转盘指针的样式；

　　　　最上层：抽奖按钮的样式；按钮有三态：默认状态，鼠标over状态以及不可点状态。

　　特殊情况：如果你的转盘指针和抽奖按钮不会经常变动，而你的奖品信息会经常的变更，也就是上面三层当中的最底层会经常变动，

那么你可以把上面的skin.swf的最底层给删除，通过另一个名为bgURL 的 flashvars 参数来设置一张图片，以实现奖品的更换。

且每次更换不需要重新编译skin.swf文件，避免很多麻烦。

　　关于skin.swf 的制作我这里给出了一张图片参考，方便大家修改：

　　在flash pro 中新建一个原件，该原件共包含3层，并在属性面板里设置其 linkage 为 “WheelSkin”，

然后将其每个图层的内容分别设置为上图所示的内容：

　　第一张图：就是底盘的制作，其中1 - 6等奖信息请按逆时针顺序摆放；它根据需要可有可无；且不用在flash的属性面板命名；

　　第二张图：在第一张图的基础上增加了指针，并在flash的属性面板命名为：needle；

　　第三张图：在第二张图的基础上增加了 开始抽奖 按钮，并给该按钮命名为：btn；

保存并发布即可。

 

 

本例的demo地址：http://rich.sinaapp.com/wheel/

本例的demo、使用文档、皮肤源文件等相关文件下载地址：http://vdisk.weibo.com/s/nsemW