Action Stack

Once you have selected an action it gets added to the action stack and the corresponding line of code (animation instructions) added to the code viewer. Using the action stack you can drag to rearrange the order in which your actions will occur.

e.g SpongBob jumps up then moves left

or

SpongeBob moves left then jumps up.

Don’t like a specific action? Then simply drag it into the trash to remove it, it’s as simple as that!

Finally, you can change each action by clicking the action in the action stack. This will open up a module editor, in which you can change the following options:

  • the amount your object moves left and right
  • the amount your object moves up and down
  • the direction, speed and amount your object rotates
  • the visibility of your object
  • the amount your animation repeats itself
  • the time of day an animation happens

Action Tree

The action tree is where all of the actions / animations that belong to your object (character, arm, leg etc…) can be found. Simply click on an object in the object menu and the action tree will pop up. This is mission control for all of your creations within Code-It, have fun!

Remember the action tree and its actions belong to the object that you have selected in the object menu.

Action

An action is a specific animation that your object (character, arm, leg) can perform. These range from simple things such as ‘rotate’ or ‘grow’, through to more complicated actions such as ‘wait’ or ‘broadcast’.

Have fun and add as many actions as you like to your objects, it’s up to you how complicated you make your animations.

When you select an action it will get added to the action stack and the corresponding line of code added to the code viewer. By dragging and dropping the actions in the action stack, you can re-order or delete your actions / animations.

Characters

A character is actually several objects that is built up of a lot of little objects all stuck together to make your character. You can control the parts of a character (like their arms and legs) and you can also control the whole character. To control a character’s limb or face, look for it in the object menu. To control the whole character look for the black outline of the character in the object menu. and then view the menu tree for that item.

Code

Each action contains a set of instructions which will animate your characters, these instructions are called code, which you can see in the code viewer. When you first use Code-It, these lines of code may look really complicated, but don’t be afraid; they won’t bite!

The more you use Code-It, the more you will understand what these lines of code mean.

Here is an example of a ‘rotate’ code-snippet, using SpongeBob as an example.

Spongebob.Play() {

Spongebob.rotate(30, 1);

}

In the above example, SpongeBob will rotate 30 degrees and it will take 1 second to complete the animation.

When you get really good at using ‘Code-It’, you can have a go at amending the code using the advanced editor.

Code Viewer

The code viewer is where you can see the code that brings your animations to life. Each action and control flow that you create has a line of code which contains a set of animation instructions. We call these instructions ‘code-snippets’.

If you want to learn about a specific action and how it works, then simply hover over the action in the action stack to see the relevant code-snippet.

Here is an example of a ‘rotate’ code-snippet, using SpongeBob as an example.

Spongebob.Play() {

Spongebob.rotate(30, 1);

}

In the above example, SpongeBob will rotate 30 degrees and it will take 1 second to complete the animation.

When you get really good at using ‘Code-It’, you can have a go at amending the code using the advanced editor.

Control Flows

If you want to repeat an animation multiple times e.g. make SpongeBob jump 10 times or create an animation that occurs at a specific time of day e.g. make SpongeBob spin in the afternoon, then use a control flow.

The Code-It controls flows are:

IF

e.g. if it is the morning then make SpongeBob move left

IF ELSE

e.g. if it is the morning then make SpongeBob move left otherwise move right

LOOP

e.g. make SpongeBob jump up and down 10 times.

Flip

This is an action that can be found in the action tree under ‘rotate’. By flipping your character vertically, you can make them stand on their head. By flipping your character horizontally you can display the mirror image of your character.

All objects can be flipped both vertically and horizontally, including the arms and legs.

Ghost

This is an action that can be found in the action tree under ‘visible’. Make your object fade in and out like a ghost, perhaps whilst other animations are occuring. e.g. SpongeBob could be jumping, and SquidWard could be hiding by making himself fade out of view.

IF ELSE

Use IF ELSE to specifiy an action to play if a condition is true; and an action to play if false. In Code-It you can use IF ELSE to trigger actions based on the time of day.

eg. make Spongbob move left IF it is the morning, ELSE move right.

The IF ELSE statement is called a conditional statement because it controls what happens to your animation based on a specific condition. It also allows you to specify what happens to your animation if the condition is not met:

In Code-It these conditions are:

  • morning (7am - 12pm)
  • afternoon (12pm - 4pm)
  • evening (4pm - 8pm )
  • night (8pm - 7am)

Use an IF ELSE statement to keep your friends on their toes. If you are still not sure what an IF ELSE statement does then check out the video above.

IF

Use an IF statement to specify an action to play if a condition is true. In Code-It you can use IF to trigger animations based around the time of day.

e.g. make Spongbob move left IF it is the morning.

The IF statement is called a conditional statement because it controls what happens to your animation based on a specific condition. In Code-It the these conditions are:

  • morning (7am - 12pm)
  • afternoon (12pm - 4pm)
  • evening (4pm - 8pm )
  • night (8pm - 7am)

Use an IF statement to keep your friends on their toes. If you are still not sure what an IF statement does then check out the video above.

Invisible

This is an action that can be found in the action tree under ‘visible’. You can have some fun with this action, try hiding SpongeBob’s body, but leaving his arms, legs and face in view . . . what would we call him then . . . just Bob?

Listen & Broadcast

This is advanced stuff, if you are reading this then you must be a wizard!

Use broadcast to send a signal to the objects on the stage. Broadcast makes objects take action if you’ve given them a listen command. You choose whether sprites are listening, and different sprites can perform different actions (from their action stack) after you broadcast.

e.g. SpongeBob jumps up and down and then broadcasts ‘dance’. Patrick is on stage and is still, but secretly he is listening for SpongeBob to broadcast ‘dance’. As soon as ‘dance’ is broadcast, you can animate Patrick to dance (or do whatever action you like).

Think of ‘broadcast and listen’ like a conversation, you listen to your friend speaking and then your response. It’s the same principle here. SpongeBob speaks and Patrick listens and responds with an animation.

If you are still not sure what Listen & Broadcast do, then check out the video above.

Loop

Use a LOOP statement to make your action repeat itself over and over again. You can specify how many times you want to LOOP your action.

e.g. make SpongeBob bounce up and down 10 times.

If you are still not sure what an LOOP statement does then check out the video above.

Module Editor

The module editor is where you can really begin to have fun with your animations. Changing the height of your characters jump, the speed of a movement and the direction of a spin are just some of the fun things that you can do!

You access the module editor by clicking an action in the action stack.

In coding terms we refer to the things we can change as ‘variables’ e.g. speed, height, time. Using the module editor you can change these variables to create unique animations and impress your friends.

The following actions can be customised in the module editor:

Move

Make SpongeBob zoom across the stage or jump really high. Control the vertical and horizontal distance your object moves and the speed of the animation.

Rotate

Spin SpongeBob around as fast as you can or make his arms twirl. Control the direction and speed that your objects spins around.

Size

Give SpongeBob an enormous arm or shrink his face so that you can barely see it. Control the size of the object and the speed in which it grows or shrinks.

Visibility

Confuse your friends by making SpongeBob disappear and then re-appear. Control the visibility of your objects.

Move

This is an action that can be found in the action tree under ‘motion’. You can animate your objects up, down and side to side. Want to change the distance or speed that they move? No problem, you can change this in the module editor once you have added the action to the action stack. How high, how fast, it’s up to you!

Object Menu

The object menu shows all objects that can be animated. From within the object menu you can animate any part of your selected character, simply click on the object (character, arm, leg etc…) and the action tree will appear. What gets animated is up to you!

Object

An Object is a character, part of a character or a prop. In ‘Code-It’ you animate your object or objects to create your animations. You will find all of your objects in the object menu.

Props

A prop is a simple object that has only one part, unlike a character that has many parts. To control a prop, select it in the object menu, and choose actions from the action tree.

Size

This is an action that can be found in the action tree. You can make your object grow massive or shrink really small. You can also stretch your object so that they are really wide or squish your object so that they are really thin.

Specials

You can’t control a special, but wow they are fun! Select one, add it to the stage and see what happens.

Spin

This is an action that can be found in the action tree under ‘rotate’. Spinning your character allows you to spin it around in a clockwise or anticlockwise direction.

All objects can be spun around (arms, legs, face) in either direction as fast as you like! Hold on tight!

Stage

The stage is where your actions / animations take place. You drag your character onto the stage and you animate your characters on the stage. Think of your characters as actors in your own show, and they are performing for you on their very own stage.

Teleport

This is an action that can be found in the action tree under ‘motion’. You can use the teleport feature to make your character completely disappear, then reappear somewhere else entirely. Wow your friends with this magic trick!

Visibility

Confuse your friends by making SpongeBob disappear and then re-appear. Control the visibility of your objects.

Wait

Use wait to pause the animation for a period of time, it’s up to you how many seconds to wait. This is a great way to link your animations together and have fun doing it.

e.g. make SpongeBob jump up, then wait 3 seconds before bringing him down. Simply select the wait command from the ‘clever’ menu, then drag the wait control in the action stack in between the actions you want to separate.

An introduction to the editor interface

If you are new to Code-It then this is the place to start. This walk through video introduces you to the different parts of the Code-It editor and how to use them.

Making a simple animation with the object menu

Once you are familiar with the Code-It editor, this step by step guide will help you create your first animation and send you on your way to becoming a coding wizard.

Animating multiple characters

Code-It allows you to add and animate multiple characters and props creating interesting stories and longer animations.

How to loop your animation

Using a LOOP statement, you can make an action repeat itself over and over again, which can help you quickly and easily extend your animations.

Using the IF or IF ELSE statement to time animations

The IF and IF ELSE statements are advanced functionality that allow you to surprise your friends by showing different animations at different times of the day.

Clever animations (listen and broadcast)

This is advanced stuff, if you are reading this then you must be a wizard! This video shows you how to create a Broadcast event and a Listen event to make your characters react to each other.