• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

384

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

Community Expert , 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

Votes

Translate

Translate
Community Expert , 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

Votes

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.

Votes

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 Expert ,
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

Votes

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?

Votes

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 Expert ,
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.

 

 

Votes

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


Votes

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 Expert ,
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

Votes

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!

Votes

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. 

Votes

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 Expert ,
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

Votes

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!!

Votes

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 Expert ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

LATEST

You're welcome!

Votes

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