看flash 的as的教程,然后用Annie2x实现一遍。
首先建个anni2x的flash的fla文件,保存文件名:snowAnnie2x
然后设置舞台大小750*1464,帧数默认24不变,设置舞台默认颜色为黑色。
然后把默认的图层改名为背景图,喜欢的同学可以自己放个背景图上去,这里就不添加了。
接着新建图层,改名为雪花层,然后在此图层画一个矩形,记得不要边框的矩形,右键转成影片剪辑。双击影片剪辑去掉里面的默认颜色。之后双击空白区域退出编辑。
之所以新建这个影片剪辑是想用这个影片剪辑来装载雪花粒子。然后给这个影片剪辑起个名字叫:snowFloor,程序里需要用到的 基本都要起名。
锁定背景图,然后用画个圆,去边框,然后用白色,选择渐变,radial gradient ,如果嫌这里啰嗦,直接画个白点 更直接。
然后把画的雪花右键转成影片剪辑,之后会看到库里面创建此雪花的影片剪辑,然后删除舞台的 雪花,雪花要通过程序动态添加进来嘛,所以这里直接删除舞台的雪花。
需要给雪花绑定个类,在库里面找到雪花的影片剪辑,在双击链接这一栏,然后输入类名:snow
ok,素材准备好了。准备使用Annie2x的强大导出功能。
导出之后,可以看到已经生成好了snow类,还有我们的snowAnnie2x类。
打开snow.js,添加两个公共变量,
var vx = 0;
var vy = 0;
用来计算雪花的位移,在创建雪花的时候需要给vx vy赋值。
然后打开snowAnnie2x.js来创建我们的雪花。
不停的创建雪花我们可以使用Timer也可以使用ENTER_FRAME 帧监听时间,ok不多说直接上代码:
AnnieRoot.snowAnnie2x=AnnieRoot.snowAnnie2x||{};
snowAnnie2x.SnowAnnie2x= function(){
var s=this;
annie.Sprite.call(s);
/*_a2x_need_start*/s.snowFloor=null;/*_a2x_need_end*/
annie.initRes(s,"snowAnnie2x","SnowAnnie2x");
var snowNum = 3;//每次创建雪花的个数
s.addEventListener(annie.Event.ENTER_FRAME,function (e) {
// ADD_TO_STAGE
makeSnow();
render();
})
//渲染雪花与对象回收
function render() {
// trace(s.snowFloor.children.length);
for (var i = 0; i < s.snowFloor.children.length; i++) {
var mc = s.snowFloor.getChildAt(i);
if (mc.y > 1480 || mc.x < 0 || mc.x > 750) {
//回收粒子
s.snowFloor.removeChild(mc);
i--;
} else {
mc.y += mc.vy;
mc.x += mc.vx;
}
}
}
//创建学会
function makeSnow() {
for (var i = 0; i < snowNum; i++) {
var snowMC = new snowAnnie2x.snow();
//s.snowFloor.addChild(snowMC);
snowMC.alpha = Math.random();
snowMC.width = snowMC.height = Math.random() * 6 + 2; //[2-8]
snowMC.vx = (Math.random() - .5) * 5; //[-2.5~2.5]
snowMC.vy = Math.random() * 5 + 4; //[2-7]
snowMC.x = Math.random() * 750;
//snowMC.y = -30;
snowMC.y=Math.random() * 1464;
s.snowFloor.addChild(snowMC);
//xtrace(snowMC.height);
}
}
};
A2xExtend(snowAnnie2x.SnowAnnie2x,annie.Sprite);
打包发布就不操作自己看视频,预览地址: http://net.020zile.com/Annie2x/snowAnnie2x/index.html 。源码与素材下载:http://net.020zile.com/Annie2x/snowAnnie2x.zip
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!