12 - Make more in Adobe Animate! Scramble Puzzle with ZIM on the Canvas Tutorial

Welcome to ZIM Tutorials for Adobe Animate! ZIM at zimjs.com is a JavaScript Canvas Framework powered by CreateJS which means it works in Adobe Animate to bring you more conveniences, components and controls! See zimjs.com/animate.
Here we make a Scramble Puzzle with the ZIM Scrambler(). Just chop() up a picture and add it to the Scrambler! Wow! Very very useful. Here are some examples:
zimjs.com/cat/scrambler.html
codepen.io/zimjs/pen/PoQdRGW
zimjs.com/zim/index.html
zimjs.com/elearning/quiz.html (a couple times inside)
zimjs.com/cat.html (press the cat and go right)
www.fxhash.xyz/generative/7107

[@bibliotec8020]

Hello,
When I activate the responsive mode in "more setting", I get the parts of the cropped image grouped together at the top right.
is there a solution for this problem?
thank you very well

[@ZIMLEARN]

Hi there, often that is a sign of an x or y setting that is undefined. We have it working in responsive mode... hmm... it may be that the image is not loaded in properly due to path issues. If you preload them then the chopping will work. But if there is a path issue then it might end up lazy loading them and then the chopping might break.
F.loadAssets("head03.png", "heads/");
F.on("complete", ()=>{
const pic = new Pic("head03.png");
const puzzle = new Scrambler(chop(pic, 1, 10))
.center();
puzzle.on("complete", ()=>{
puzzle.scramble(1,2,3);
});
});
Please make sure that the case for the image is correct and that it is in the right path relative to the HTML page. Also, you are welcome to join us at zimjs.com/slack or zimjs.com/discord and we can help you out more! Cheers - and glad you are trying it out!

[@YassirRozaqi]

Is ZIM compatible to Adobe Animate 2019? because chop function is not working for me.

[@ZIMLEARN]

What are you using chop() on? I am not sure about how things work with different versions... And sorry for the delay about the video from Codepen to Animate. That is a great idea... we just were launching something and have a couple big parties this weekend. Would you like to come join us at zimjs.com/slack or zimjs.com/discord and give us a reminder there... we can then track it better than UA-cam comments. We will try and help you out with the chop too. Cheers.

[@user-gp1ov8ow5d]

the zip file says "invalid" when i try to extract it.

[@ZIMLEARN]

We just checked and it seems fine for us. Can you please try downloading again. If there is still a problem, please contact us at zimjs.com/discord or zimjs.com/slack and we can get the ZIP file there to you. Cheers.