ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM Bits +64 tutorial examples of Interactive Media on the HTML Canvas with JavaScript and CreateJS


ZIM BITS at http://zimjs.com/code/bits.html has reached the goal of 64 tutorial examples of interactive media techniques for the HTML Canvas with JavaScript and CreateJS.  The goal was reached with a couple months to spare!  The last two bits were added just today – working with video and animating lines.

All the Bits have been updated to ZIM 4.3.0 to use the ZIM 4TH methods.


We have added a Bits Filter bar that expands open to show all of the commands used in the ZIM Bits and the number of Bits where the commands are used.  You can press on any command to see a list of the relevant Bits.

You can also press the colored module buttons above to highlight the commands that are in that module.  Code can be used without CreateJS.  Create holds the functions / ZIM 4TH methods, Build holds the ZIM objects that receive the Create methods.  Pages relate to overall organization classes.  Wrap holds the shortcuts that do not need the zim namespace and of course, Frame is the ZIM Frame template class.



When paging through the related ZIM Bits in the Filter window there is a DOCS link up top left that links to the Documentation for the specific command.  In the Documentation when you open up a specific command, there is a link at the bottom by the close and view that links to the ZIM Bits Filter window for that command.  You can quickly go back and forth between the Docs and the Bits – in a Julien relationship.



Here are links and titles to the 64 Bits.  As you can see, ZIM covers a wide variety of interactive media requirements.  The Bits were purposely made in random order of no particular difficulty.  It should be noted that the little square icon on the main Bits menu or the Filter Related Bits window opens up pictures of the Bits which are often more memorable.

Drawing ZIM ShapesRandom from ArrayQuick Log to ConsoleInline CanvasResponsive DesignAnimate PropertiesPreload Images and SoundsMake a Pop Up WindowDrag and Drag CopyGrids GUI for CanvasParallax 3DParameters or ObjectsSwipes and SwipingSnapping Multiple ObjectsDamping and EasingButtons, Radio Buttons, Check BoxesDrag, Slide and Surround!Mobile TestTabs and Button RowsSequencing AnimationGUI Editor – PlaceHotSpots!Dials and Indicators!Scaling Content to FitDynamic Drawing with EasingScrollbars with SlidersAdding a URLRegistration Points and CenteringTiles and PadsInput and Asyncronous DataMasks and MaskingSound ManipulationDrawing with BlittingAre Objects Hitting?Scrubbing an AnimationUsing Two CanvasesCookies and CSS SelectorsGradient and Gloss!Swipeable Scroll WindowFalling, Catching and DodgingMake a Maze with ZIMPhysics with Box2DBuoyancy with Physics!Scroll Parallax Effect!Chaining MethodsPages and HotspotsMinify Only Code You UseBlend ModesZIM 4TH MethodsTicker EngineCustom FontsZIM Pizzazz!Sprites and SpriteSheetsSaving Data and JSONSide Scroller Animated BackgroundColor Picker for Propeller!Path Finding Level Editor!3D with ThreeJSIcon and Toggle Buttons!Skew for EffectAnimate Circles and SpiralsZIM loop()Play and Control VideoDraw and Animate Lines




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s



%d bloggers like this: