Loop Snowflake Animation - Html5 Canvas

Community Beginner ,
Jan 03, 2018 Jan 03, 2018

Copy link to clipboard

Copied

Hi

In Animate CC on an HTML canvas for a web banner I want to animate snowflakes on a landscape.  At the moment I'm using  "Code Snippets" --> "Html5 Canvas" --> " Animation" --> "Animate Horizontally" and animated several snowflake-Movie-Clips falling from top to bottom. 

How can I loop snow infinitely so that it falls endlessly from top to bottom?

I found this article:

https://theblog.adobe.com/html5-canvas-javascript-basics/

But I didn't quite understand how to use the code correctly in a html5-banner without buttons.

Views

2.9K

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 1 Correct Answer

Adobe Community Professional , Jan 03, 2018 Jan 03, 2018
create a snowflake and assign it a class/linkage id = "Snow". you can then use:var snowA = [];var tl = this;var snowNum = 100;var snow;createSnowF();var animateSnowI = setInterval(animateSnowF,100);function createSnowF(){for(var i=0;i<snowNum;i++){snow = new lib.Snow;snow.x = stage.canvas.width*Math.random();snow.y = -stage.canvas.height*Math.random();snow.rot = 2*Math.round(Math.random())-1;snow.sp = 5*Math.round(Math.random())+5;tl.addChild(snow);snowA.push(snow);}}function animateSnowF(){for(...

Likes

Translate

Translate
Adobe Community Professional ,
Jan 03, 2018 Jan 03, 2018

Copy link to clipboard

Copied

create a snowflake and assign it a class/linkage id = "Snow". you can then use:

var snowA = [];

var tl = this;

var snowNum = 100;

var snow;

createSnowF();

var animateSnowI = setInterval(animateSnowF,100);

function createSnowF(){

for(var i=0;i<snowNum;i++){

snow = new lib.Snow;

snow.x = stage.canvas.width*Math.random();

snow.y = -stage.canvas.height*Math.random();

snow.rot = 2*Math.round(Math.random())-1;

snow.sp = 5*Math.round(Math.random())+5;

tl.addChild(snow);

snowA.push(snow);

}

}

function animateSnowF(){

for(var i=0;i<snowNum;i++){

snowA.rotation+=5*snowA.rot;

snowA.y+=snowA.sp;

if(snowA.y>stage.canvas.height+snowA.nominalBounds.height){

snowA.y=-snowA.nominalBounds.height;

}

}

}

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
New Here ,
Dec 02, 2019 Dec 02, 2019

Copy link to clipboard

Copied

LATEST

Hi, has something changed in Adobe Animate?  This code does not currently appear to work.

 

Does anyone have a working version?  Also, what would be the best way to stop the animation after 30 seconds?

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