Skip to main content
Participating Frequently
October 6, 2021
Answered

Falling Snow ActionScript floundering

  • October 6, 2021
  • 2 replies
  • 940 views

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/td-p/10096137
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

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

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


    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

    2 replies

    JoãoCésar17023019
    Community Expert
    Community Expert
    October 6, 2021

    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.Author
    Participating Frequently
    October 6, 2021

    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ésar17023019
    Community Expert
    Community Expert
    October 6, 2021

    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.Author
    Participating Frequently
    October 6, 2021

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