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 – ‘To Be’ or ‘Not to Be’.
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 - ipre (Presets)
Step 3: Create a Tree
A node containing a video asset will have a little camera icon on the left side of the node. Any node without video will not have the camera icon.
You can always replace the video in any node by dragging another video asset to a node already containing video. We know this sometimes can happen by mistake, so Eko Studio will ask you to confirm the change.
Delete Nodes - In order to delete a node, right click the node and a menu will open. Then choose Delete.
Connect Nodes - Click on a parent node's '+' icon and drag the line to the left of the node you want to connect. This line in now called a connection. When nodes are connected there will be a visible line between them. Click the circle to set the connection to be on node end (full circle) or on-click(empty circle).
Step 4: Editing Nodes
- 1. The layer in the Node Elements list, which shows the button characteristics and settings.
- 2. The actual button on the video monitor. Which is there to help you set the look and position of the element.
The star, eye and lock icons on each of the elements layer represent random selection, visibility and the option to edit buttons:
- 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
- GRAPHIC (NO ACTION) - allows you to include text or a graphic on the screen. These elements will not be clickable.
- SELECT NODE - connects a node to any node in the screen (including previous nodes and itself). You can also choose when the connection will happen (at the end of the current node or right when the button is clicked) and decide if that button has a sound when clicked.
- EXTERNAL LINK - directs the viewer to a URL, especially useful for E-Commerce.
- SHARE - Clicking this button shares this video on Facebook or Twitter.
Style Tab - Choose the style you want for your element from the options in this tab. Additionally, you can create your own button image outside of Eko Studio then upload it to the Library.
In order to use an image as a button's style, highlight a specific button and select 'Image Button' in the Style tab. Drag an asset from the Library onto the button and adjust the size of the button as you wish. At this point the name of your custom asset will appear as the button’s element style. To remove it simply choose a different option from the drop-down menu.
Transform Tab - The transform tab is there for changing the following settings:
- 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.
- ROTATION - Rotate the button.