Falling Snow ActionScript floundering

[Jordan D.]

Hiya,

I'm having problems resizing a specific asset in my Animate project. Download here.

My goal is to control the placement and size of the globe.
I've tried resizing the canvas within Animate in the properties panel, but it always snaps back to the same size.

I followed this community thread: 
https://community.adobe.com/t5/animate-discussions/animated-snow-within-snowglobe-mask-html5-canvas/...
and used a lot of the provided code which you can find here.

Totally scratching my head on this one. 
Any insight or help would be appreciated!
––Cheers

[Jordan D.]

Apologies, the provided code link above is broken. 
Try this one.

[JoãoCésar]

Hi.

I didn't take into account the scale of the stage when I wrote this code.

Please replace the occurrencies of stage.canvas.height by (stage.canvas.height * stage.scaleY).

And it should work.

The complete code is like this:

const SNOW_NUM = 200;

var container = this.globe.container;
var snowTypes = [lib.Star,lib.Snow];
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 * stage.scaleY) * Math.random();
		snow.rot = 2 * Math.round(Math.random()) - 1;
		snow.sp = 1 + Math.random() * 1;
		container.addChild(snow);
		snowA[i] = snow;
	}
}

function animateSnowF()
{
	for (var i = SNOW_NUM - 1; i >= 0; i--)
	{
		var snow = snowA[i];
		
		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) / stage.scaleY + snow.nominalBounds.height)
		{
			snow.x = (stage.canvas.width / stage.scaleX) * Math.random();
			snow.y = -snow.nominalBounds.height;
		}			
	}
}

start();

Please let us know.

Regards,

JC

[Jordan D.]

Thanks for the response JC.
Just so we're clear...

wherever I see (stage.canvas.height * stage.scaleY)
swap with 
stage.canvas.height

Is that correct?

[JoãoCésar]

Hi.

It's the opposite.

You should replace stage.canvas.height by (stage.canvas.height * stage.scaleY).

You can just copy and paste the the whole code I provided in my first comment.

[Jordan D.]

Thanks for your help JC,

I can now change the size and location of the 'globe'.
However, I am now having issues hiding the mask. (see attached screenshot).
My goal is to keep the snow within the 'globe'. 

You can download my working files here

[JoãoCésar · Accepted solution]

Hi.

The easiest solution is to use an actual mask.

Here is:
https://drive.google.com/file/d/1fSpYsi3sGq6X7hN688QhdR0O97VQjMm7/view?usp=sharing

I hope it helps.

Regards,

JC

[Jordan D.]

That did the trick and now it works perfectly.
I might have some follow up questions as I play with it.

Thanks for your help João!

[Jordan D.]

Follow up question: Can the falling snow be time delayed?
My goal is to 'shake' the globe first and then the snow will fall. 

[JoãoCésar · Accepted solution]

Yes.

You can either:

- Extend the main timeline and place the code in another frame;

- Or use the setTimeout method. In this approach instead of just calling the start function directly you would delay its call like this:

setTimeout(start, 3000);

Regards,

JC

[Jordan D.]

You, my good sir, are an animation wizard!
Thanks JC!!

[JoãoCésar]

You're welcome!