前言：其实这篇文章早就在酝酿中了，但近期忙于新的工作流程及日常发布，这么晚才发了出来。只写了大概思路，算是对这一作品的总结。大家多多拍砖，有兴趣的同学，可以一起交流。
E-mail:leapoct@gmail.com

公司周年活动项目需要前端技术人员参与，我有幸加入。期间需要制作拉霸，现将心得总结如下，以做讨论、研究之用。

一、素材的配置规划

页面中需要嵌入3个拉霸，每个拉霸中的图片不同，对应的奖品信息不同，不用说了，xml上！！！

二、代码设计思路

1、图片的加载

xml配置好了，那加载图片就相当容易了，用MovieClipLoader对象,通过遍历xml加载图片，爽歪歪！(注：MovieClipLoader是flash中一个功能超强的加载对象，通过自身的方法，很容易快速制作loading)

同时，我们需要设置一个timer(由setInterval设置的定时器)，来监控加载的图片数目，以便程序判断是否可以初使化布局。

2、布局初使化

初期制作时先从奖品滚动开始，当时只做了一列奖品的滚动。后期才发现，其它两列的图片怎么获取呢，难道再用前面的xml遍历方法加载？

NO！There’s a simple method!

BitmapData——位图滤镜,是的，就是它了。感谢as的工程师们！思路是：把图片都加载到一个类似于图库的mc中，用BitmapData自身的draw和attachMovie方法克隆图片mc，好了，接下来直接循环生成所有的mc。

3、让拉霸动起来！

动起来，也就是物体位移就行了。初期想过两种，一种是缓冲式位移，但想到这种计算太不可控，而且用于做拉霸的位移也不合适，所以选择了最简单的匀速位移，也就是让y坐标递减(因为是向上跑嘛)。一定要设置位移的转折点(即到达一列图片底部时要让这组mc的y坐标置为0)，否则，它有可能跑到天上去（疯了！）。

简单的位移还不行，动画不连贯，那就来个视觉欺骗吧。做前端的人应该都用JS做过一些图片或文字的循环滚动吧，我这里用的方法和那个差不多的，都是通过增加一些元素(这里是增加mc)，然后用脚本控制y坐标错位，来达到循环播放的效果。

为了突出动画视觉效果，采用了过渡式的缩放动画，如下图。中间大，两边小，其实3个mc只有两个做了缩放(使用y坐标计算当时mc的缩放值)，也算是个视觉期骗。

4、延时滚动

由于怕数据获取太快，奖品设置的图片又少，这样可能造成按一下按钮动画就结束了。未避免这种情况，使用xxx的方法，就是在拉霸滚动中加入一个timer，以延时滚动。

5、与开发的交互

我和开发的交互是通过JS来建立的，Flash中有ExternalInterface这个类，可以很方便的和JS通讯。

ExternalInterface有addCallback和call两个方法，通过addCallback，JS可以调用flash中注册的函数，通过call,可以使flash调用JS的方法。(注：我用addCallback和JS通讯时，只能用一次，再用一次调用另外的函数就不起作用，不知道是我用错了，还是什么原因，希望有高手可以指点！)

三、总结

作品发布后，发现有一个不太xx的情况。就是有可能三行中每行的三个奖品图片是一样的，这是前期制作中未考虑的（后来做了一个乱序的版本，未发布）。

来支付宝好久了，虽然是做前端，但经常接触的是JS，CSS等，flash的东东就很少做了。这个作品还是蛮有意义的，做的过程中又学到不少东东。不仅是AS上的，也有和开发人员的合作，这些都是非常宝贵的实战经验，这些是{zd0}的收获。