Matching Game made with ZIM - demo inside Adobe Animate
Channel: ZIM LEARN
Date: 2023-03-21

Here is a matching game that we made in ZIM (JavaScript Canvas Framework at https://zimjs.com). We brought the code into Adobe Animate and we go through the steps to make a game where you drag objects to their matching object.  Here is the ZIP with the FLA  - https://zimjs.com/animate/matching.zip

We have adjusted the zip example to use MovieClip objects on the stage.  Note the this.stop() to stop the timeline animation from putting the movieclips back at their original location after we tile them.  Also note the zimify(this.square), etc. in the target array.

We also ran into an issue at the end of the video relating to sequencing the alpha in the target tile when we reload.  Well... it was a silly issue!  We had set the alpha to 0 on the whole target container and then were animating the alpha to 1 of each items in the container... see the problem?  We needed to keep the container alpha at 1 and set the alpha of each of the items to 0 and animate them to 1.  So loop through the target tile, get the item and set the alpha to 0.  We did not really need to do that so no big deal.

The tutorial is rather long - so please have a couple cookie breaks!

Please see the other ZIM Tutorials for Adobe Animate at https://zimjs.com/animate and you are welcome to join us at https://zimjs.com/slack or https://zimjs.com/discord to ask any questions.