And can you also change the script so that the snow doesn't have to fill the screen first, but the whole screen is full right from the start, Is that possible? You undersatnd what I mean?
So 2 different snowflakes (can I make movieclip with random?) and screnn should be full from the start.
Hi.
While Clay doesn't give you a proper answer, to fill up the whole screen at the beginning just remove the minus sign when the y position is set.
Instead of this:
snow.y = -stage.canvas.height * Math.random();
Write this:
snow.y = stage.canvas.height * Math.random();
To randomize the snow flakes, create an array with the classes you want (the class name must be set in the linkage column of the Library panel). Then get a random index out of this array. Like this:
var snow;
var snowTypes = [lib.Snow, lib.Square, lib.Star];
...
snow = new snowTypes[Math.floor(Math.random() * snowTypes.length)]();
Anyway, I played with your code a bit. Here is the result (please ignore the GIF speed and other limitations):
JS code:
const SNOW_NUM = 200;
var container = this.globe.container;
var snowTypes = [lib.Snow, lib.Square, lib.Star];
var snowA = [];
function start()
{
createSnowF();
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.addEventListener("tick", animateSnowF);
container.alpha = 0;
createjs.Tween.get(container).to({alpha:1}, 2000);
}
function createSnowF()
{
var snow;
for (var i = 0; i < SNOW_NUM; i++)
{
snow = new snowTypes[Math.floor(Math.random() * snowTypes.length)]();
snow.scaleX = snow.scaleY = 0.5 + Math.random() * 0.5;
snow.alpha = snow.scaleX;
snow.x = stage.canvas.width * Math.random();
snow.baseX = snow.x;
snow.angle = 0;
snow.angleSpeed = Math.random() * 0.05;
snow.rangeX = 15 * Math.random();
snow.y = stage.canvas.height * Math.random();
snow.rot = 2 * Math.round(Math.random()) - 1;
snow.sp = 1 + Math.random() * 1;
container.addChild(snow);
snowA = snow;
}
}
function animateSnowF()
{
for (var i = SNOW_NUM - 1; i >= 0; i--)
{
var snow = snowA;
snow.rotation += 5 * snow.rot;
snow.x = snow.baseX + Math.cos(snow.angle) * snow.rangeX;
snow.y += snow.sp;
snow.angle += snow.angleSpeed;
if (snow.y > stage.canvas.height / stage.scaleY + snow.nominalBounds.height)
{
snow.x = (stage.canvas.width / stage.scaleX) * Math.random();
snow.y = -snow.nominalBounds.height;
}
}
}
start();
FLA download:
animate_cc_html5_snow.zip - Google Drive
Notice that I didn't use an actual mask for performance sake.
Regards,
JC
AdChoices