Sign upSign InSign upSign InMember-only storyDr AbstractFollowLevel Up Coding--ListenShareZIM at https://zimjs.com is a Javascript Canvas Framework that is powered by CreateJS and adds many conveniences, components and controls. Adobe Animate exports to CreateJS in Web mode so we can use ZIM in Animate!We would recommend that you go into each of the ZIM site banners and press the MORE button. See the About, Examples and Learn sections as there are many features that will help you in Animate. The ◎ Your Guide to Coding Creativity on the Canvas article is very complete resource as well.The ZIM Tutorials for Adobe Animate can be found on YouTube. We list summaries of the first set of tutorials below including reference links and screenshots. All the FLA files, etc. for all the tutorials are included in the TUTORIAL ZIP.We would love to help out on the Adobe Animate Community or ZIM Slack or ZIM Discord. On Slack, we have an #animate channel — so ask to be added!Here, we take you on a quick tour of the ZIM site. We show how to use ZIM SHIM by downloading the ZIP and use the zimshim.html as the template for your Adobe Animate Web project.We also add a ZIM Circle with radius, color, backgroundColor and backgroundWidth, center it on the stage and set to draggable:In this tutorial we show how to make a new file from the profile we saved last time — see the first tutorial!We then made a MovieClip on the stage by making a shape, selecting it and right clicking and creating a symbol (or F8). We then named the clip for the library and set the instance name in the properties panel.We then turned this into a ZIM object by using zimify():zimify(this.rectangle).center().drag();We explained several issues that we might experience that will affect how the movieClip might interact with other ZIM objects we place on stage:The resulting code looks like this:It really depends on how you want to treat your movieClip — all of the above is optional but if you want ZIM methods then you need to at least zimify().Here we show how to position objects using the following methods. All will add to a container or the stage if no container is provided. All have a layer (level) parameter at the end:Below is an example of the code to position the right/bottom side of a Button 100 x 100 pixels from the right/bottom of the stage. This is NOT necessarily positioning based on the registration point — you would use loc() for that but rather setting the spacing between the object and the edge to 100 and 100 pixels. It is like LEFT, RIGHT, TOP, BOTTOM in CSS — but we also have CENTER:new Button().pos(100,100,RIGHT,BOTTOM);We also discuss using properties versus short chainable methods for transformations:In this tutorial we see how to use ZIM animate() a very powerful and simple Tween engine like TweenJS or GSAP or the Tween in ActionScript. Here is some code to animate the scale of a Rectangle twice as big in 2 seconds:Here is some code to animate the scale of a Rectangle twice as big and to a color of yellow in 1 second and rewind and loop:We also show how ZIM can use either regular parameters or a single parameter that is a configuration object {} with properties that match the parameter names. This was invented for ZIM DUO (version two of ZIM).We also have industry leading animation/dragging along a user-editable path that we will show in future tutorials.Here we make a Tile() and handle interaction in several ways to drag, mousedown, mouseover, click, tap, etc. Basic Tile code for 5x4 red circles spaced 20 pixels horizontally and vertically would look like:ZIM has dynamic parameters which allow our classes and methods to pick from the parameters. For instance, if we wanted to tile random colored circles we would pass in an array and the Tile would pick randomly:If we wanted those colors to be in order then we would pass in a series:If we wanted different radii within a range we use a min/max object:Here is a Tile with a ZIM VEE parameter of an array with a circle and rectangle:We also made a ZIM Emitter show up when we mousedown on a shape. The Emitter can also use ZIM VEE values to emit different particles.These are the first five tutorials in the series. There are many more that you can see in future parts or visit the Tutorials on YouTube.There is also a large ZIM Learn section on the ZIM Site that shows many more examples of what you can add to your Adobe Animate projects.If you have any questions or would like to chat, please join us on on Discord or Slack — we have an #animate channel on Slack so ask to be added!Dr AbstractFollow us on Twitter at ZIM Learn and here is ZIM Learn on YouTube!Thanks for being a part of our community! Before you go:🚀👉 Join the Level Up talent collective and find an amazing job----Level Up CodingInventor, Founder of ZIM JavaScript Canvas Framework and Nodism, Professor of Interactive Media at Sheridan, Canadian New Media Awards Programmer and EducatorHelpStatusWritersBlogCareersPrivacyTermsAboutText to speechTeams