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

When you're preparing videos for Eko Studio, we recommend uploading QT (.mov) files with H264 or ProRes video tracks and uncompressed audio tracks (keeping the audio track of your video file uncompressed is especially important to create seamless transitions between the tree nodes). Drag and drop all the files you'll want to use into the Eko Studio library. We support the following file types:    
  • 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)
Your files will now be uploaded and encoded to use in Eko Studio. After the files are in your library, you can arrange them by folders, change their names, filter, etc.  

Step 3: Create a Tree

Screen Shot 2015-07-21 at 5.49.47 PMAfter the video assets have been uploaded to Eko Studio, drag and drop them into their respective nodes. You can also drag a video asset directly into the tree area, a new node will be created and it will have the same name as the video asset. This is also a great way to create identical nodes (or alternative nodes).   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. Screen Shot 2015-07-21 at 5.59.07 PM   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

In order to edit a node, double click the node and it will open the Node Editor. You can always click the 'X' to close it. In our example, the 3 available elements are the ‘Taylor’ button , ‘Katy’ button, and the timer. These elements can be moved anywhere on the screen. You can choose at what point and for how long your interface elements will be visible and clickable. Set an in-point and out -point for the button visibility duration by moving the flags under the video monitor. Remember ,elements will not appear anywhere before or after this interval.   The connection to 'Katy' is represented twice in the Node Editor:
  • 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, 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

In order to edit the interface, click a button on the monitor (when selected it will have a frame). This will open an element setting window with three tabs: Action, Style, and Transform. Action Tab  Screen Shot 2015-07-22 at 1.56.54 PMGRAPHIC (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. Screen Shot 2015-07-22 at 1.55.41 PM 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

Step 6: Publish the Project

Screen Shot 2015-07-27 at 5.08.05 PMWhen your project is ready to publish, go to the yellow Publish Manager button at the top right of your Eko Studio window and click it. Once your project is published, you'll be able to click a direct link to view and share your interactive video. You'll also find a handy <iframe> code to embed your project on a webpage.    

CONGRATS, YOU'VE JUST CREATED YOUR FIRST INTERACTIVE VIDEO!

LEARNED ENOUGH FOR ONE DAY? CONTINUE YOUR PROJECT!
EKO STUDIO