Highlighted

Loop Snowflake Animation - Html5 Canvas

Community Beginner ,
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.

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

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;

}

}

}

Views

2.4K

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

Loop Snowflake Animation - Html5 Canvas

Community Beginner ,
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.

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

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;

}

}

}

Views

2.4K

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
Jan 03, 2018 0
Adobe Community Professional ,
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
Reply
Loading...
Jan 03, 2018 1
jojobee1 LATEST
New Here ,
Dec 02, 2019

Copy link to clipboard

Copied

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
Reply
Loading...
Dec 02, 2019 0