ZIM KIDS - SLATE
Phone   Portrait   Physics

SPELLS

Here is a list of spells mentioned in the demo and help examples and a few extras!

OBJECTS Page Images Sounds Colors Container Label Pane Toggle Button
METHODS addTo center centerReg loc pos mov sca scaleTo
drag animate wiggle clone on tap makeIcon
POPULAR alp rot top bot loop removeFrom
timeout interval Ticker Tile Pages
Rectangle Circle Triangle Blob Squiggle Poly Line

HELP

1. Use the ASSETS buttons at the top to go to add images and sounds.
2. The names of the picked assets will be listed in the code comments.
3. Use the picked assets in your code with asset("name"). SEE VIDEO
4. Press the colored wands below to see helpful examples!

1. ADDING A BACKGROUND COLOR

SHOW ▼︎

To change the background color you can use the color property of the frame

background colors and gradients for example of what we can make with SLATE and assets in ZIM!

01
// use the color property of the frame for the stage color
frame.color = yellow;

// use the outerColor property for the color outside the stage
frame.outerColor = blue;

// use a Page to make a gradient 
new Page(stageW, stageH, green, pink).addTo();

2. ADDING A BACKGROUND IMAGE

SHOW ▼︎

We will add a picture of a BEACH for a background image.

picture of a beach for example of what we can make with SLATE and assets in ZIM!

steps to add picture

  1. Press the Backings button at the top of the page
  2. Select and save the "beach01" image
  3. You should see "Backings: beach01" in the comments
  4. Use the code below to put the asset on the stage

02
// ** DO THE STEPS ABOVE FIRST **
// A background image can be scaled to the stage
// then center() and mov(x, y) or loc(x, y) can be used
asset("beach01")
    .scaleTo()
    .center();

3. ADDING IMAGES

SHOW ▼︎

Let's add a picture of a BUTTERFLY and make it draggable!

picture of a butterfly on a beach for example of what we can make with SLATE and assets in ZIM!

steps to add picture

  1. Press the Nature button at the top of the page
  2. Select and save the "bug01" image
  3. You should see "Nature: bug01" in the comments
  4. Use the code below to put the asset on the stage

03
// Images can be scaled with sca() if you want
// sca(.5) is half as big, sca(2) is twice as big
// You can use center() and mov(x, y) or
// loc(x,y) or pos(x,y,RIGHT,BOTTOM), etc. 
// Store the bug in a variable to use later with sounds
var bug = asset("bug01")
    .sca(.5)
    .center()
    .drag(); 

4. USING CONTAINERS

SHOW ▼︎

Sometimes we want to group our objects so they move together.
Let's put "gem01" and "cartoon02" in a Container and drag them.

gem with face in container for example of what we can make with SLATE and assets in ZIM!

steps to add pictures

  1. Select and save the "gem01" image from Nature assets
  2. Select and save the "cartoon02" image from People assets
  3. You should see the images listed in the comments
  4. Use the code below to put the images in a Container

04
// make a Container (an invisible holder)
var holder = new Container();

// add the gem 
asset("gem01").addTo(holder);

// scale the cartoon face to FIT in 60% the holder width 
// and center it in the container 
asset("cartoon02")
    .scaleTo(holder,60)
    .center(holder);

// position the container and drag all of it together 
holder
    .pos(100,50,RIGHT,BOTTOM)
    .drag({all:true});

5. ADDING SOUNDS

SHOW ▼︎

Here we play a POWERUP sound when we press the butterfly!

steps to add sound

  1. Press the Sounds button at the top of the page
  2. Select and save the "powerup" image
  3. You should see "Sounds: powerup" in the comments
  4. Use the code below play the sound when pressing the butterfly

05
// To play a sound when pressing the bug (from above)
// use an event and play the sound in the event function
bug.on("mousedown", function() {
    asset("powerup").play();
}); 

6. ADDING A BACKGROUND SOUND

SHOW ▼︎

Let's play some BACKING music. We show three ways to play a background sound because sounds can only be played after the first mousedown.

steps to add sound

  1. Press the Sounds button at the top of the page
  2. Select and save the "backing" image
  3. You should see "Sounds: backing, powerup" in the comments
  4. Use ONE of the examples below to play the background sound

06
// ** OPTION ONE - BASIC **
// This code works when we TEST to play a backing sound
// but will not work when we use FULL and SAVE - boo!
// Here we lower the volume and loop the backing sound.  
asset("backing").play(.1, true);

07
// ** OPTION TWO - PANE **
// This code works in TEST, FULL and SAVE. Yay!
// Here we play the backing sound once a Pane() is closed.
var intro = new Pane(400, 250, "START", yellow).show();
intro.on("close", function() {
    asset("backing").play(.1, true);
});

A start Pane so sound plays when in FULL or SAVE modes


08
// ** OPTION THREE - TOGGLE **
// This code lets people turn on and off the sound.
// Do not worry if this is complicated looking 
// it will just help you pause or play the sound.
var backingSound;
var toggle = new Toggle({
    label:"music",
    startToggled:false
})
    .sca(.7)
    .pos(40,40,LEFT,BOTTOM)
    .change(function() {
        if (!backingSound) {
            backingSound = asset("backing").play(.1, true);
        }
        backingSound.paused = !toggle.toggled;
    }); 
    
a pause button for sound that will work everywhere


09
// ** OPTION FOUR - BUTTON **
// This code uses a Button to toggle sound.
// We use pizzazz to make sound icons 
// or you could use label:"play" and toggle:"mute"
// We use the tap() method which is like on("click", function).
var backingSound;
var button = new Button({
    width:60,
    height:60,
    corner:0,
    backgroundColor:purple,
    rollBackgroundColor:pink,
    icon:pizzazz.makeIcon("sound", white),
    toggleIcon:pizzazz.makeIcon("mute", white)
}).pos(50,50,LEFT,BOTTOM).tap(function(){
    if (!backingSound) {
        backingSound = asset("backing").play(.1, true);
    }
    backingSound.paused = !button.toggled;
});
    
a toggle button for sound that will work everywhere




Do you want to clear your code?

YES NO
Store current code or restore stored code?

STORE RESTORE X