[转载]大家快来玩转盘抽奖游戏(走在网页游戏开发的路上(七))
抽奖转盘
0. 前言
每逢过年过节各大游戏都会搞些小活动来刺激、吸引、黏住玩家,比如转盘抽奖活动,有的公司年底也喜欢搞抽奖活动。本文介绍如何设计一个flash转盘抽奖程序。先上效果,看如下Flash抽奖转盘:
注:转盘看上去比较丑,使出了吃奶劲才弄出这效果,毕竟不是专业美工人员,大家凑合着看。觉得还行鼓鼓掌,按按推荐;觉得不行,也不要拍砖,无视就行了☺。
预备知识:事件机制(可以参考走在网页游戏开发的路上(五))、flash动画原理(可以参考走在网页游戏开发的路上(六))、AS3文档类等。
1. 抽奖流程
其实我们的Flash只是一个显示作用,要转到哪个位置(中哪个奖品)是后台来完成的。而且每个奖品的概率是不同的,不是等概率的,我想没有转盘抽奖游戏是等概率的。从玩家点击“抽奖”开始到结束,与后台的交互如下:
转盘抽奖的大致流程是这样的:
F 玩家点击Flash中的“抽奖”按钮;
F Flash调用web页面中的Javascript函数,告诉它玩家开始抽奖了。当然Flash调用JS的时候是带了参数的,比如是谁在抽奖等详细信息; web页面中的JavaScript函数,通知后台(可以是C++、Python、PHP、Java、C#等等)玩家开始抽奖了。这里也是带了参数的!
F 后台返回结果,JavaScript函数通过调用Flash提供的接口,告诉抽奖结果;
F Flash拿到结果之后,就开始转到,最终转到指定位置。抽奖介绍!
JavaScript在flash和后台之间充当着桥梁的作用。Flash仅作展示的作用,概率和抽奖结果由后台控制。
2. AS3和JavaScript之间通信
ExternalInterface 类是外部 PI,在ActionScript和Flash Player的容器之间实现直接通讯的应用程序编程接口,例如:含有JavaScript的HTML页。推荐对所有JavaScript与ActionScript之间的通信使用ExternalInterface。
在HTML页中使用JavaScript,可以调用Flash Player中的ActionScript函数。ActionScript函数可以返回一个值,JavaScript会立即接收它作为该调用的返回值,反之亦然。此功能替代了较旧的fscommand()方法。
利用ActionScript,可以在HTML页上执行以下操作:
F 调用任何JavaScript 函数。
F 传递任意数量、具有任意名称的参数。
F 传递各种数据类型(Boolean、Number、String 等等)。
F 接收来自JavaScript 函数的返回值。
通过在HTML页上使用JavaScript,可以:
F 调用ActionScript函数。
F 使用标准的函数调用表示法传递参数。
F 将值返回给JavaScript函数。
2.1. ExternalInterface.available属性
ExternalInterface.available属性指示当前的Flash Player是否位于提供外部接口的容器中。如果外部接口可用,则此属性为true;否则,为false。在使用ExternalInterface类中的任何其它功能之前,应始终进行检查以确保当前容器支持外部接口通信,如下所示:
if (ExternalInterface.available)
{
// 在此执行 ExternalInterface 方法调用。
}
注意ExternalInterface.available属性报告当前容器是否为支持ExternalInterface连接的容器类型。它不会报告当前浏览器中是否启用了JavaScript。
通过使用ExternalInterface.objectID属性,您可以确定Flash Player实例的唯一标识符(具体来说,是指Internet Explorer中object标签的id属性,或者是指使用NPRuntime接口的浏览器中embed标签的name 属性)。这个唯一的ID代表浏览器中的当前SWF文档,并可用于对SWF文档进行引用,例如:在容器HTML页中调用JavaScript函数时进行引用。当Flash Player容器不是Web浏览器时,此属性为null。
2.2. 从ActionScript中调用外部代码
ExternalInterface.call()方法执行容器应用程序中的代码。它至少需要一个参数,即包含容器应用程序中要调用函数的名称的字符串。传递给ExternalInterface.call()方法的其它任何参数均作为函数调用的参数传递给容器。
//调用外部函数"addNumbers"
//传递两个参数并将该函数的结果
//赋给变量"result"
var param1:uint = 3;
var param2:uint = 7;
var result:uint = ExternalInterface.call("addNumbers", param1, param2);
如果容器为HTML页,此方法将调用具有指定名称的JavaScript函数,必须在包含HTML页中的script元素中定义该函数。JavaScript函数的返回值被传递回ActionScript。
<script language="JavaScript">
//加上两个数字,然后将结果发送回ActionScript
function addNumbers(num1, num2)
{
return (num1 + num2);
}
</script>
如果容器为其它的ActiveX容器,此方法将导致Flash PlayerActiveX 控件调度它的FlashCall事件。Flash Player将指定的函数名及所有参数序列化为一个XML字符串。容器可以在事件对象的request属性中访问该信息,并用它来确定如何执行它自己的代码。为了将值返回ActionScript,容器代码调用ActiveX对象的SetReturnValue()方法,并将结果(序列化为一个XML字符串)作为该方法的参数进行传递。
无论容器为Web浏览器还是为其它ActiveX容器,只要调用失败或容器方法没有指定返回值,都将返回null。如果包含环境属于调用代码无权访问的安全沙箱,ExternalInterface.call()方法将引发SecurityError 异常。可以通过在包含环境中为allowScriptAccess设置合适的值来解决此问题。例如,要在HTML页中更改allowScriptAccess 的值,请编辑object和embed标签中的相应属性。
2.3. 从容器中调用ActionScript代码
容器只能调用函数中的ActionScript代码,而不能调用任何其它ActionScript代码。要从容器应用程序调用ActionScript函数,必须执行两项操作:向ExternalInterface类注册函数,然后从容器的代码调用它。
首先,必须注册ActionScript函数,指示其应能够为容器所用。使用ExternalInterface.addCallback()方法,如下所示:
function callMe(name:String):String
{
return "busy signal";
}
ExternalInterface.addCallback("myFunction", callMe);
addCallback()方法采用两个参数。第一个参数为String类型的函数名,容器将籍此名称得知要调用的函数。第二个参数为容器调用定义的函数名时要执行的实际ActionScript函数。由于这些名称是截然不同的,因此可以指定将由容器使用的函数名,即使实际的ActionScript 函数具有不同的名称。这在函数名未知的情况下特别有用,例如:指定了匿名函数或需要在运行时确定要调用的函数。
一旦向ExternalInterface类注册了ActionScript函数,容器就可以实际调用该函数。完成该操作的具体方法依容器的类型而定。例如,在Web浏览器的JavaScript代码中,使用已注册的函数名调用ActionScript函数,就像它是Flash Player浏览器对象的方法(即,一个表示object或embed标签的JavaScript对象的方法)。也就是说,将传递参数并返回结果,就如同调用本地函数一样。
<script language="JavaScript">
// callResult gets the value "busy signal"
var callResult = flashObject.myFunction("my name");
</script>
...
<object id="flashObject"...>
...
<embed name="flashObject".../>
</object>
或者,在运行于计算机应用程序中的SWF文件中调用ActionScript函数时,必须将已注册的函数名及所有参数序列化为一个XML格式的字符串。然后,将该XML字符串作为一个参数来调用ActiveX控件的CallFunction()方法,以实际执行该调用。
不管是哪种情况,ActionScript函数的返回值都被传递回容器代码,当调用方为浏览器中的JavaScript代码时直接作为值返回,而当调用方为ActiveX容器时则会序列化为XML格式字符串。
3. 转盘旋转原理与实现
转盘旋转的设计和实现才是本文的重点,与服务器的交互将不再介绍,而且与服务器的交互也不止通过JavaScript的方法,还可以通过cgi的方式。接下来的内容,假设已经经历了Flash(AS3)àJavaScript(cgi等)à后台à JavaScript(cgi等),即Flash已经告诉后台玩家已经开始了抽奖,并且后台返回了结果——中奖物品(指针停止位置)。我们要做的工作就是,让指针旋转起来,并最终停留在指定位置。
3.1. 数学知识
这里可以说是用上了高中的数学知识了,指针从一个位置旋转到另一个位置,相当箭头的顶点绕着中心做圆周运动,运动过程中顶点的坐标变化公式如下:
F x += radius * sin ᶱ
F y += radius * cos ᶱ
其中radius为半径(即指针长度)、ᶱ为指针旋转的角度。
我们要做的就是不断的改变旋转角度,直到达到指定的位置,将旋转位置连续起来达到运动的效果(使用Event.ENTER_FRAME或TimerEvent.TIMER,参见走在网页游戏开发的路上(六))。
3.2. 指针运动
以开始给出的转盘为例,转盘中有8个物品,指针角度为0时指向物品1,角度为45时指向物品2…,以360/8=45为间隔。现在假设指针其实为值为物品1,中奖结果为物品5,即指针要旋转180度。为了设计动画效果,我们监听Event.ENTER_FRAME事件,每帧使指针旋转一个小角度,比如5,直到角度为180度停止,这样就可以达到旋转的效果。
那我们现在是每帧根据上面的公式,改变指针顶点的位置吗?不是,在ActionScript中,显示对象有个rotation属性,顾名思义旋转角度的意思。这样每帧改变这个属性值就可以,在Event.ENTER_FRAME事件处理函数中,使指针的rotation += 45,直到rotation等于180。(rotation的取值范围是:(-180, 180])
说明:如果是一个小球绕着某个点,做圆周运动,改变rotation属性显然是不行的,这时必须得通过上面介绍的公式改变小球的x、y坐标达到运动的效果,这也是介绍上面公式的原因。
似乎这样做已经满足了基本要求,但是为了让用户感觉更真实,往往会要求指针至少转几圈,不会在一圈之内就到达指定位置停止了。那么这时指针的指针需要旋转度数:旋转圈数 * 360 + (指针当前位置与指定位置的偏差值)。
实现效果如下:
3.3. 缓动效果
很显然,上面实现的动画效果比较生硬,需要加入缓动效果。现实实际效果也是如此,高速转到的指针不可能突然停止,其中有个减速的效果,当速度减到0时,指针才会停止。这其实也好办,我们在Event.ENTER_FRAME事件处理函数中,调整指针rotation的增加值从大到小变动,直到这个增量为0停止,这里我就不实现了。下面我要介绍一个非常有用的缓动效果库——TweenMax,如果做flash webgame开发的话,肯定会用用到这个库☺。
3.3.1TweenMax库简介
TweenMax库包含了很多缓动效果,它是建立在TweenLite核心类及TweenFilterLite基础之上(它们同样包含了一些缓动效果)。但是TweenMax新增功能:
F 进行贝塞尔缓动
F 连续的缓动(序列化的缓动)
F 对对象数组中的对象进行同意的缓动使用allTo()或allFrom()
F 缓动中的暂停/继续功能,使用pause()和resume()方法,或“paused”属性
F 跳转至缓动的任何时段,使用“progress”属性。输入一个0~1之间的数值
F 对16进制的颜色进行缓动,使用hexColors属性
F 获取缓动效果的实例数组,该数组中包括了加在一个指定目标对象上的所有的缓动效果的实例,TweenMax.getTweensOf(mc);如果该mc应用了多个缓动效果,则返回一个数组,数组中是不同的缓动效果的实例
F 获取TweenMax、TweenLite和TweenFilterLite的实例数组,使用静态函数getAllTweens()
F 终止所有的缓动
F 暂停/继续全部的缓动
3.3.2常用方法
l 构造函数:public function TweenMax(target:Object, duration:Number, vars:Object)
l target:目标对象,即需要缓动效果的对象,我们的例子中就是转盘的指针
l duration:持续的时间(单位:秒);
l vars:包含想要缓动的的属性值,缓动的常用属性包括
n alpha:Number:目标对象在缓动结束时的alpha
n delay:Number:延迟缓动
n ease:Function:缓动函数
n easeParames:Array:缓动函数中的参数
n autoAlpha:Number:用来代替alpha属性,可获得一些附加小伙,实现透明度缓动效果
n volume:Number:改变MovieClip或者SoundChannel的音量,将缓动结束时的音量值调整为指定的值
n tint:Number:改变可显示对象的色调/颜色
n frame:Number:将MovieClip缓动到指定的帧频
n bezier:Array:Bezier缓动,允许你以非线醒的方式进行缓动
n bezierThrough:Array:贝赛尔曲线要经过的位置点
n orientToBezier:Array:使MovieClip自动调整自身的方向,使之符合贝塞尔路径[x,y,rotation,ang](rotation:旋转属性,ang:旋转的度数
n hexColors:Object:缓动指定对象中相应颜色属性的值(TweenMax.to(my_obj,{hexColors:{mycolor:0Xff0000}}))
n onStart:Function:在缓动开始时想要执行的某个函数
n onStartParams:Array:缓动开始时要执行函数的参数
n onUpdate:Function:缓动过程中,每次更新属性值时,要执行的函数
n onUpdateParams:Array:同上
n onComplete:Function:缓动结束时要执行的函数
n onCompleteParams:Array:同上
n renderOnStart:Boolean:阻止缓动的渲染效果直到缓动真正开始
n overwrite:Boolean:缓动效果是否可以被覆盖
n blurFilter:Object:应用模糊滤镜,需要传递一个具有下列属性的对象作为参数:blurX(横向的模糊度),blurY(纵向的模糊度),quality(品质,默认值为2)
n glowFilter:Object:应用发光滤镜,需要传递一个带有以下属性的对象:alpha,blurX,blurY,color,strength(强度),quality,inner(内侧发光),knockout(挖空)
n colorMatrixFilter:Object:应用颜色矩阵滤镜,需要传递一个带有以下属性的对象:colorize(色调),amount(总量),contrast(对比度),brightness(亮度),saturation(饱和度),hue(色相),threshold(阀值),relative(相关性),matrix(颜色矩阵)
n dropShadowFilter:Object:应用阴影滤镜,需要传递一个带有以下属性的对象:alpha,angle(角度),blurX,blurY,color,distance(距离),strength,quality
n bevelFilter:Object:应用斜角滤镜,需要传递一个带有以下属性的对象:angle,blurX,blurY,distance,hightlightAlpha(高亮区的透明度),highlightColor(高亮区的颜色),shadowAlpha(阴影区的透明度),shadowColor(阴影区的颜色),strength(强度),quality
n progress:Number:缓动进程0~1
n paused:Boolean:是否停止缓动
l 函数:allTo(targets:Array, duration:Number, vars:Object):Array
返回的是一个数组保存了创建的所有TweenMax Object。
l 函数:allFrom(targets:Array, duration:Number, vars:Object):Array
跟allTo一样,只是定义的是运动对象的初始状态,运动到当前状态。
l 函数:complete(skipRender:Boolean = false, suppressEvents:Boolean = false):void
强制TweenMax到最后结束部分。如果第一个参数设为true,则不会渲染,TweenMax将停在调用那一刻。如果第二个参数设为true则不会触发onCompelte,onUpdate等事件。
l 函数:delayedCall(delay:Number, onComplete:Function, onCompleteParams:Array = null, useFrames:Boolean = false):TweenMax
延迟执行函数
l 函数:getTweensOf(target:Object):Array
返回运动物体正在运行的的TweenMax Object
l 函数:isTweening(target:Object):Boolean
判断是否正在缓动
l 函数:updateTo(vars:Object, resetDuration:Boolean = false):void
可以在运行中新增或改变原有的属性变化值。第二个参数设为false时将不重播缓动,而继续缓动到新的值;设为true将中断并重播缓动。
4. 最终代码实现
前面介绍了转盘的原理和TweenMax库,下面看最终实现的代码。不废话,上关键代码:
package
{
import flash.display.Sprite;
import com.greensock.TweenMax;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.utils.getDefinitionByName;
/**
* ...
* @author ...
*/
public class DialUI extends Sprite
{
private var _tween:TweenMax;
private var _view:*;
//物品个数;
private var _count:int = 8;
//角度;
private var _angle:Number = 360/_count;
//最少旋转圈数;
private var _rotateNum:int = 2;
public function DialUI()
{
initView();
}
private function initView():void
{
var cls:Class = getDefinitionByName("Dial") as Class;
if (cls != null)
{
_view = new cls();
_view.pointer.rotation = 0;
_view.btnStart.addEventListener(MouseEvent.CLICK, onClickHandler);
addChild(_view);
_tween = new TweenMax(_view.pointer, 2, {onComplete: onCompleteHandler});
}
}
private function onClickHandler(evt:MouseEvent):void
{
_view.btnStart.mouseEnabled = false;
var temp:uint = Math.floor(8 * Math.random());
trace(temp);
var rt = _angle * temp + (360 * _rotateNum);
_tween.updateTo({rotation: rt}, true)
}
private function onCompleteHandler():void
{
_view.btnStart.mouseEnabled = true;
}
}
}
写在最后
不知直觉,写到这么晚了,效率啊!最后大概浏览了一下,还是有很多传达的东西没有表现出来,只有大家意会了。声明:本文是我在公司半个月前所做东西的总结,但并不涉及泄漏公司机密。感觉heaton导师的指导!要休息了,明天还要上班,不然明天要挂了。如果大家觉得还不错,就请推荐。
参考文献:
- FLASH抽奖程序中的细节问题[上]、[下]
- TweenMax官方文档
- Flash帮助文档
作者:吴秦
出处:http://www.cnblogs.com/skynet/
本文基于署名 2.5
中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名吴秦(包含链接).