Creating a interactive video

  1. Home
  2. Creating a interactive video

Creating a interactive video

Now that you have familiarized yourself with the basic project controls we are ready to create a project. Follow the first few steps of the previous chapter to get through the initial setup.

  • First thing we are going to ask you to do is to open the media pane. You can do so by pressing the “Show media” button on the far right corner.
    • In this pane you can see all the (video) media you own which you can use in your interactive video. Ownership of a video is set upon creation/upload and is set to the name of the account it was uploaded to. Ownership can be transferred to another user through the video-coordinators.
  • To start our project we would ask you to drag the first video from your media pane onto the “Start” node to set the first video.
  • Secondly we would like to ask you to drag two more video’s onto the canvas. This will create two new nodes, please give them appropriate names which can be done by double clicking the title above the node (or in the Node edit window).
  • The next step would be to link the video’s together so that they create a flow.
    • To link a video to the next please hover your mouse over the right hand side on the middle of the node. You will now see a small arrow icon appear:

    • When you click and drag the arrow icon towards another node the next node will show a semi-circle gap to which you can connect your “path” which will decide what the next video will be (you can connect a video to itself).

    • Repeat the above process at least twice and test out the result (open “My Interactive Video’s” which can be found under the same pull-down menu as “My Media”).
  • As you may have noticed in your test-run a small box with blue background has appeared in the left hand corner of the video with the name you gave the video-node earlier (as shown below).
    • Pressing on that box will lead you to the next video.

  • To change the behavior of that box we will have to open the “Edit note” pane. Either double click the node you wish to edit or click on the pen icon in the “Node tools” on the task-bar.

  • A completely new window opens with the following categories with specific tools in the task-bar:
    • Select:
      • Pointer.
      • Marquee select.
    • Hotspots:
      • Draw hotspot.
      • Duplicate hotspot.
      • Remove hotspot.
    • Rulers & guides
    • Timeline snapping
    • API Timeline
    • Click Through mode

  • Aside from the task-bar a right hand side-bar also appeared with the following options:
    • Node properties:
      • Name.
      • Description.
      • Custom data (API data).
      • Source media.
      • Duration counter.
    • Behavior:
      • End-behavior.
  • Underneath the video preview you find:
    • video controls:
      • Jump to start.
      • Play/Pause.
      • Jump to end.
    • Timeline.
  • On the timeline you can see a red pointer with which you can skip to a specific point in the timeline.
  • Another item on the timeline is the gray bar with the title of the next video. On the farthest left and right hand corners of this bar we have two points with which you can adjust the hotspot length.
  • If you haven’t given your node a proper title yet, please do so now (in the side-menu on the right hand side).
  • Now you can also give the node a description (which at this time only serves a purpose for you).
  • Custom data is a option still under investigation, do not do anything here!
  • With the source media control you can change the node’s video. But assuming you inserted the correct video you don’t have to do anything here. You can also replace the video of the node by dragging another video onto the node.
  • In behavior you can change what happens when the end of the node is reached (you can see where the node ends in the timeline).
    • When set to freeze the video will stop playing.
    • When set to “Default path” the video will automatically continue to the video selected in the “Destination” drop-down. Be careful not to create a infinite loop here by having a video connect to itself!

  • Now we are ready to change the look and behavior of the hotspot, the hotspot is the box on the video which will lead to another video or a URL by clicking on it.
    • Click on the hotspot created by connecting the two video’s together.
    • The side-bar will now change to show the controls for the hotspot. It will allow you to set a size and position for the hotspot, how it behaves and change the look and feel of it.

  • Firstly we will change the position of the hotspot. Having it lean next to the top and left border never really looks good, we recommend changing the position to have a distance of at least 5 to 10 pixels from the edge. Set the X and Y property accordingly.
    • If you want to change the position altogether you can either drag it in place in the video preview screen or type the new coordinates.
  • You can also change the size of the box, by default it is fairly large for short names but the size also lends to its visibility. Play around with the size to see what works for your video.
  • In the behavior part of the controls you can set the hotspot to:
    • Instant jump (instantly go to the next video or visit the given URL).
    • Pause video.
    • No action.
  • With the destination control you can set where the hotspot will take you, by default this is set to whatever node you are connected to.
  • Custom data is under review, please do not do anything here.
  • URL. Enter a URL to lead your viewer to.

The next part is all about styling your hotspot. This is all a matter of taste and what fits with the video’s/presentations you are using.

  • Styles:
    • Skin. With skin you can either create or choose a skin. The skin is a saved setting containing your Text and Background settings. When you have a skin selected and decide to change any of the settings below it will prompt you to either save this new setting or revert to the original state.
  • Text:
    • Color. Change your text color. It is always very important to choose a text color that gives good contrast with its background.
    • Size. Changing text size will help readability of your hotspot.
    • Style. By making the text bold or italic you can give emphasis to the hotspot text.
  • Background:
    • Color. Change the color of the background of your hotspot.
    • Hover color. Change the color of the hotspot background when a user hovers over it.
    • Roundness. Change the radius for the border of the hotspot to make it more (or less) round.
Was this article helpful to you? Yes No

How can we help?