In this short guide we’ll be going over Eko Studio and creating a basic video.
In this simple example, the viewer needs to choose between two options (Katy Perry or Taylor Swift, and isn’t that a question for the ages).
Step 1: Start Your Project
First of all, sign up with your email and password.
What you'll see now is your Welcome Screen. Here you can open one of your past projects, create a new project, and view a list of the most recent projects you’ve worked on.
Click and choose New Project to begin creating your first interactive video. Give your project a name and click Start. Eko Studio will launch after you give your project a name.
When the project launches this is how it will look:
Step 2: Upload Assets
- Video - avi, mov, flv, mp4, wmv, 3gp, mpeg2, rm, divx, 3g2, dv, f4v, mpg, mpe, mpeg, m1v, m2v, m4v, m2ts, webm
- Audio (Soundtrack) - wav, mp3
- Images (buttons, graphics, screens) - png, jpg, jpeg, gif
- Eko Studio Custom Extensions - iskn (Button Editor skins), ipre (Presets)
Step 3: Create a Tree
Step 4: Editing Nodes
- The layer in the Node Elements list, which shows the button characteristics and settings.
- The actual button on the video monitor. Which is there to help you set the look and position of the element.
- The star icon allows you to choose which options will be included in the random choice if nothing is selected. When the icon is grey the node can only be reached by choosing it, when blue it’s included in the group from which a node is chosen at random. If there is only one starred option, it will be auto-selected if the viewer doesn't make a choice.
- The eye icon is used to change a button or timer visibility (blue – visible, grey- hidden). Please note then when a button is hidden it’s not only invisible but also becomes un-clickable. Despite that, it can still be chosen from the auto-select choice.
- The lock icon is something you can use when you want to lock a certain button into place and make sure no matter what changes you make around it, its action, style and transform settings stay in place.
Step 5: Edit the Interface
- POSITION SIZE (To keep the height to width ratio click the link icon between the two before resizing.)
- OPACITY (Turning the opacity all the way to zero will create an invisible button, which is handy for people and things as buttons).