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
Step 2: Upload Assets
When you preparing videos in NLE (Non Linear Editing Software) for Treehouse 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 the seamless transitions between the tree nodes).
To learn more about editing for seamless, watch this tutorial.
Drag and drop all the files into the Treehouse 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, swf, iskin, ipre
Your files will now be uploaded and encoded to use in Treehouse. If you feel the upload takes too long, please consider using the Uploader.
After the files are in your library, you can arrange them by folders, change their names, filter, etc.
Step 3: Create a Tree
After the video assets have been uploaded to Treehouse drag and drop them into their respective nodes. A new node will be created with that specific video asset and with the same names as the video file. This is also a great way to create identical nodes (or alternative nodes).
A node with a video 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 Treehouse will ask you to confirm the change.
Connect Nodes - Click on 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, anywhere before or after the interface elements will not appear.
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, randomization, 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.
- 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: EditInterface
In order to edit the interface click a button on the monitor (when selected it will have a frame).
The same element’s layer will also be highlighted will automatically open element setting window. Which is combined of three tabs: Action, Style, and Transform.
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, if that buttons has a sound when clicked, and set a keyboard key that will function a click in addition to the mouse click/mobile tap.
EXTERNAL LINK - directs the viewer to a URL, especially useful for E-Commerce.
SHARE - shares this video on Facebook or Twitter.
Choose the style you want for your element from the options in this tab.
Or, you can create your own button image outside of Treehouse then upload it to the Library.
In order to turn a button style to an image 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.
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).
Step 6: Publish the Project
From there the road should be clear.
Once your project is published you'll be able to click a direct link to view and share your interactive video.
Note that the mobile version of the project will be published a little after the desktop version. Keep track of the indication to see when they become available.