ZIM Editor - Start Here!  JavaScript Canvas Framework
Channel: ZIM LEARN
Date: 28/03/2023

ZIM is a JavaScript Canvas Framework that everyone from beginner to professional can use to code creativity!  https://zimjs.com and the editor is at https://zimjs.com/editor.  This is our first demo - the start demo!  https://zimjs.com/editor/view/Z_9B2FV

00:00 start https://zimjs.com/editor
00:39 banner to go to start template https://zimjs.com/editor/code/Z_9B2FV
00:40 you can open also in SLATE https://zimjs.org/slate/code/Z_9B2FV
01:16 copy over the code with the yellow arrow/triangle
02:09 new Label() can be removed with delete button
02:19 deleted label, click button TEST to see result
02:48 extra options with checkboxes at the top of editor
03:39 explaining F S W H was in early ZIM versions Frame Stage stageW stageH
04:02 ZIM is javascript commands to make coding simple
04:07 open https://zimjs.com/docs to see all commands
04:28 learn more at https://zimjs.com/learn or use the help of https://zimjs.org/kids/help_editor.html
04:40 uncomment // or comment out many lines with ctrl/cmd + /
05:14 see what the app looks like when make code uncommented
05:59 uncomment extra code from start F.color = blue //backgroundcolor
06:20 F.color and F.outerColor changing color of the Frame and Stage
07:20 explaining the TRASH square to remove items onto the stage
07:50 explaining .pos( x,y ,RIGHT, BOTTOM) to LEFT, BOTTOM
08:24 ZIM is created on https://createjs.com what is also used in Adobe Animate
08:35 ZIM proved the .on(method) docs and spells https://zimjs.org/spells.html?item=on
09:27 HITTEST Circle Rect https://zimjs.org/spells.html?item=hitTestCircleRect
10:31 resetting the circle when pressing the square TRASH
11:10 updating the code trash.cur("default")
11:47 add an icon to the trash to refresh = "rotate" icon
12:34 SAVE a file with ZIM_pizzazz module checked on
12:55 PIZZAZZ makeIcon() https://zimjs.org/spells.html?item=makeIcon
12:59 PIZZAZZ makeShape() backing https://zimjs.org/spells.html?item=makeShape
13:00 PIZZAZZ makePattern() https://zimjs.org/spells.html?item=makePattern
13:44 alpha .alp(.1) setting
14:06 info ZIM at BASIC TUTURIALS at https://www.youtube.com/@ZIMLEARN/playlists
14:33 welcome to beginners to code ZIM javascript, test out https://zimjs.com/kids/slate
14:50 makePattern() centering onto the stage at the bottom .bot()
15:59 makeIcon("rotate", white) into a container (rectangle)
17:20 trash.cur("default") again coding on correct place
17:38 make a new Label("") text
17:50 STYLE to style components https://zimjs.org/spells.html?item=STYLE
18:27 skew into the docs METHODS https://zimjs.org/spells.html?item=ske
19:14 .loc(x,y).outline() positions from registration point, use new Grid()
19:45 .pos(x,y) is always from the LEFT,TOP unless you change the zero-point
22:44 .animate() animation can be styled with STYLE for example with SIZE
23:27 animation code uses ZIM DUO technique
25:25 ease settings can also be made with https://zimjs.com/ease
25:56 docs of animate https://zimjs.org/spells.html?item=animate
26:40 animate along path examples at https://zimjs.com/nio
26:53 time and ease setting
27:17 ZIM can do effects like Greensock.io
27:34 the rest of the ZAPPS
28:10 sorts of buttons https://zimjs.com/editor/view/E_F73EB
28:23 LOGIN is needed to save on ZIM, or DOWNLOAD the code on your computer
28:36 you can share files and teach people ZIM for free that is the idea
29:05 Dr. Abstract Greeting
29:08 join on https://forum.zimjs.com and https://zimjs.com/discord