LATEST AWESOMNESS

The Curious Case of an Animatron Button

PLEASE NOTE THIS POST IS OBSOLETE AND DOES NOT REFLECT THE CURRENT STATE OF ANIMATRON EDITOR!

WE DO PLAN TO PUBLISH AN UPDATE AS SOON AS IT IS READY!

How to make a Button in Animatron

Overview:

  • Button states
  • The UI
  • Drawing States
  • Writing handlers
  • Library

Overview

In this article we will create a simple button which will have a three different states: initial, hovered and pressed. We will use the Animatron Editor to prepare the button’s UI, then add some scripting to handle mouse events and change the button’s appearance accordingly.

Button states

Our button will have three distinct states:

  • Initial state. This is the default button state. Most of the time, the button enjoys being in this state.

  • Hover state. Sometimes the Mouse cursor will hover over our button - the button will react by changing itself.

  • Pressed state. This is the most rare (but not least important) case; our button goes to this state when a user clicks the mouse while hovering over it.

Tip! For those of you who wish to learn everything in practice, here is an Animatron project with all the visuals and code prepared for you. Feel free to explore and play with it (you should first duplicate it by invoking Menu > Duplicate project in order to make changes).

The UI

Note! We will use the Editor’s Design Mode through all of the tutorial.

Before we begin, we should determine a list of layers we will need:

  • Transparent layer - this is a special layer which we will use for event interception. It’s not visible to the user and will not actually affect button’s UI, but we need it in order to handle all of the scripting events, since the layers beneath it will not be clickable.

  • Text layer - this layer will hold the text written on our button. It could be simple “Yes” or more complicated “No, I’m not sure actually.”

  • Initial (or default) state layer - this is the button’s background that is shown by default.

  • Hover layer - this is the button’s background that is shown when the mouse is moving over the button.

  • Pressed layer - this layer will appear if a user clicks the mouse.

Drawing states

It doesn’t matter what the states of your button actually look like - you may wish to make a flat button or something more interesting, etc. The important part is the order of the layers and grouping them into a Clip. Making our button a Clip will help us to reuse our button with as few changes as possible.

Here are the layers from top to bottom. Note their names (written in black right to the each layer) - we will reference layers from our code by these names. You may name your layers as you wish, but remember to change names in code accordingly.

Note the topmost Transparent element: it’s a transparent (alpha = 0) shape which will be used to handle required mouse events and modify underlaying elements. The transparent element itself is exactly like the background one, but it’s invisible.

Now we need to hide some of the layers. Hover and pressed states aren’t shown by default:

WARNING! Hidden layers aren’t published by default. So you you will need to right click a hidden layer you want to export and select the “Export” option in the Context Menu.

Here’s what the Context Menu for the “Hover” layer looks like:

Now we will organize our layers into a Clip called “button”. To do so you need to select all the layers and choose “Group” from the Context Menu, then rename the group to something meaningful.

You may edit the Clip by pressing the pen icon shown to the left of its name or by pressing Control + E (or Command + E for Mac OS X).

Writing handlers

Event handlers are little pieces of code which will help you to switch button states (read about Scripting in more detail in Scripting Overview). To add handlers, you will first need to select the topmost layer inside our Clip called ‘transparent’ and then click the ‘Scroll’ icon in the Inspector. Panel.

Then you will need to add the following handlers:

“Mouse Enter” will switch our button to the ‘hover’ state “Mouse Leave” will switch our button from ‘hover’ to ‘initial’ state “Mouse Down” will switch to ‘pressed’ state and “Mouse Up” will either switch to ‘initial’ or to ‘hover’ states.

Mouse Enter

Type the following code into the Editor:

_b(this.findByName(‘hover’, this.$.parent)[0]).enable();

This code will show up the ‘hover’ layer. Now lets see how it works:

“_b(element).enable()” will enable (or “.disable()”) an element, i.e. will show the element or hide it.

“this.findByName(‘hover’, this.$.parent)[0]” will find an elements by name. Since there could be many elements with the same name, we will find elements only under given parent which, in our case, is our Clip (this is done to allow cloning of the button), and ‘[0]’ is to take the first element only (even if we’re sure there is only one of them, we have to do it).

Mouse Leave

Mouse leave works as expected:

_b(this.findByName(‘hover’, this.$.parent)[0]).disable();

i.e., we’re hiding the ‘hover’ layer.

Mouse Down

Mouse Down is a little bit complicated since we have to switch three layers:

var p = this.$.parent;

b(this.findByName(‘hover’, p)[0]).disable(); b(this.findByName(‘initial’, p)[0]).disable(); _b(this.findByName(‘pressed’, p)[0]).enable();

First of all we will save the parent Clip in a variable called ‘p’, then hide ‘hover’ and ‘initial’ layers and show the ‘pressed’ one.

Mouse Up

Mouse Up does almost the opposite of Mouse Down:

var p = this.$.parent;

b(this.findByName(‘initial’, p)[0]).enable(); b(this.findByName(‘pressed’, p)[0]).disable();

if (this.$.contains(evt.pos)) { _b(this.findByName(‘hover’, p)[0]).enable(); }

Once again: store the parent Clip, show the ‘initial’ layer, then hide the ‘pressed’ layer. Then the interesting part: the latter ‘if’ statement checks if mouse was released over the button or not, and if it was released over the button we will enable ‘hover’ state (because right before the mouse is pressed our button is in ‘hover’ state).

To preview the button’s actions in the Editor, go to Main Menu > Play > Test in Player. You can also publish it to see how it will work in the final version.

Library

And finally, if you want to be able to easily duplicate this button, you may add it to the Library. Once added to Library, an element can be dragged onto the canvas as many times as you’d like to create copies of the element. To add our button to the Library, you should simply drag it there and now you can create as many buttons as you wish.

So, that’s it! Congrats on the first interactive element you just created in Animatron!