The Button Editor is Eko Studio’s companion tool for creating dynamic, responsive and interactive interface objects for your project. It allows you to create your own buttons from scratch and upload them to Eko Studio, with no code needed!

You can open the Editor from Eko Studio’s side hamburger menu (located in the top-right corner of Eko Studio). Once you’ve made the buttons, you can export .iskn files and upload them to your Eko Studio library.

If you’re familiar with CSS and the box model, this editor will probably be very intuitive! If not, we recommend you read up on CSS Styling to familiarize yourself with the lingo.

Animation States

The Button Editor supports all of a button’s available ‘states’ throughout a choice moment.

Start - How the button appears when it loads.

Base - The default style of the button. Note that editing the Base State first is a good idea, as it will automatically apply certain attributes to the other states as well (unless they’ve also been customized)

Hover - The animation or effect that happens when a viewer hovers their cursor over the button.

Selected - The button’s style if it is selected as a choice.

Not selected – The button’s style if another button is selected.

End - The final style of the button before it disappears.

Screen Shot 2018-06-20 at 5.45.35 PM

All states have editable fields that correspond to the CSS box model. You can edit the size and shape of the clickable area by editing the Button Container properties. You can change the button’s text, style, color, and more by editing the Box Shape with Text properties. Note that each of these properties can be different for every state of the button!

Uploading an image to use as a button

You can use any image as a button skin by uploading an image file in the ‘Image URL’ field in the ‘Box Shape with Text’ properties menu. You can also choose to add a new image in the left-hand menu.

Screen Shot 2018-06-20 at 5.45.51 PM

Copy/paste properties in Button Editor

If you’ve already defined one element within a state or transition and wish to set another with just the same properties, you can now simply copy and paste those properties.

A few notes…

  • This means you can copy and paste properties from any animation to any animation.
  • If you’re in the state you can only copy from text to text, image to image, etc.
  • Keep in mind the that pasting in properties is considered overriding the defaults and severs the link between the element you’re editing and its counterpart in the default state.

Renaming elements in Button Editor

You can now edit element names in the Button Editor, just keep in mind that once renamed you won’t have an indication for the element type and might want to keep it in the name as well.