ANIMATE
ANIMATION
ZIM is a JavaScript Canvas Framework with many animation features. ZIM is built on CreateJS which is how Adobe Animate exports to the HTML 5 Canvas. See ZIM SHIM.Animations in ZIM are made with code (not a timeline tool):
- Tween Animation
This includes animating any object property such as position, scale, rotation, color, etc. with 60 parameters such as rewind, loop, custom eases, series, sequence, and shape animations. See Code Samples. - Sprite Animation
Image animations from Spritesheets. See our Interactive Animation page for examples using TexturePacker for packed sprites and more! - Path Animation
ZIM has industry Leading animation (and dragging) along user editable paths. See our ZIM NIO minisite for some examples. - Particle Emitters
The ZIM Emitter easily makes rewards of stars, fire, snowflakes, dust, etc. See our Emitter Configurator and Particles minisite for some examples. - Timeline Visualizer
The ZIM Timeline Visualizer can be used to show and scrub animations. It is not a tool to make animations. - ZIM Pen
The ZIM Pen can be animated for beautiful effects. See the Gen Pen app or the Pen example.
ALSO SEE ANIMATION WITH
ZIM SHIM FOR ADOBE ANIMATE
Get the ZIM SHIM ZIP File for Adobe Animate! See TUTORIAL 01- Code ZIM right in Adobe Animate
- Export to Canvas for Web
- ZIMIFY and control Animate objects
- Add any ZIM object like Blob, Emitter, etc.
- Simple drag, animate and transform tools
- Add countless components and conveniences
- Create with over 100 exciting features!
- If this helps you - you can help us on Patreon ;-)
Updates since the Tutorials:
ZIM 018 ZIM 017 ZIM 016 ZIM 015 ZIM 014
TUTORIALS ZIP of files used
EXTRA
Put an Adobe Animate MovieClip in a Scrollable Window with ZIM
Load CodePen code into Adobe Animate - with ZIM
How to convert Adobe Animate to SVG to ZIM Blob and Squiggle
Dynamically convert an Adobe Animate shape to a ZIM path
Matching Game made with ZIM - demo inside Adobe Animate
Snapping and Matching with ZIM - demo inside Adobe Animate
Adding ML5 Hand Tracking - demo inside Adobe Animate
Put an Adobe Animate MovieClip in a Scrollable Window with ZIM
Load CodePen code into Adobe Animate - with ZIM
How to convert Adobe Animate to SVG to ZIM Blob and Squiggle
Dynamically convert an Adobe Animate shape to a ZIM path
Matching Game made with ZIM - demo inside Adobe Animate
Snapping and Matching with ZIM - demo inside Adobe Animate
Adding ML5 Hand Tracking - demo inside Adobe Animate
INSTRUCTIONS
In Adobe Animate, choose: Publish Settings > More Settings > HTML/JS > Import New and import the zimshim.html template in the ZIP. Then code with ZIM in Animate! Join us on our FORUM or DISCORD for help. Below is all that is added to the regular template:- S = stage = new zim.Stage(canvas);
- S.enableMouseOver();
- createjs.Touch.enable(S);
- S.width = W = stageW = canvas.width;
- S.height = H = stageH = canvas.height;
- S.setBounds(0, 0, W, H);
- F = frame = new zim.Frame({shim:{stage:S, canvas:canvas}});
TIPS
Here are a few things to watch out for when working with ZIM in Animate.- We have loaded the ZIM version of CreateJS to help with touch screens
- Adobe scripts have a loop variable so set loop = zim.loop; to use loop()
- Use F.mouseX and F.mouseY to capture mouse positions (F is our Frame)
This accommodates the scaling of the stage on export to HMTL 5 - drag() will drag parts of a MovieClip unless you drag({all:true})
- See the zim_full.fla for an example using a the ZIM FULL scaling mode
- Use this.stop() to stop the timeline MovieClip to remove its objects
- Use the zimshim_cjs.html template if using the Scrambler or List
- See the ZIM Tips for many modern ways we code in ZIM
- If you are new to ZIM - make sure you use ZIM Docs and ZIM Learn!