Falling Snow ActionScript floundering

Community Beginner ,
Oct 06, 2021 Oct 06, 2021

Copy link to clipboard

Copied

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

Views

125

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Adobe Community Professional , Oct 20, 2021 Oct 20, 2021
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

Likes

Translate

Translate
Adobe Community Professional , Oct 20, 2021 Oct 20, 2021
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

Likes

Translate

Translate
Community Beginner ,
Oct 06, 2021 Oct 06, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 06, 2021 Oct 06, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 06, 2021 Oct 06, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 06, 2021 Oct 06, 2021

Copy link to clipboard

Copied

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.

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

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


Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

LATEST

You're welcome!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines