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
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
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
Copy link to clipboard
Copied
Apologies, the provided code link above is broken.
Try this one.
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
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?
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.
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
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
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!
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.
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
Copy link to clipboard
Copied
You, my good sir, are an animation wizard!
Thanks JC!!
Copy link to clipboard
Copied
You're welcome!