The workflow to make these from scratch needs to go in 7 steps.
Step 1: Planning
Plan it out and write your scripts. You should first make a flowchart of what you want this interactive adventure to look like on paper, then write your scripts from that.
Here are some helpful guides to get started in the right direction:
- Filming Your Own Content
- Editing Interactivity
- Using the IVC Question & Button Overlay option? Download these visual guides to help you better frame the talent, before exporting your video files.
Step 2: Shoot the Video
It is really like shooting any other video, except there are two specific things to remember.
- 1st Fade in and Fade Out – only put a Fade in on the “intro” video, and only put a “fade-out” on the closing video.
- 2nd Leave at least 10 seconds of time for your loops when you have buttons up for the user to select.
Step 3: Upload Your Videos
This is a pretty simple step, just go in and upload them all to the Media Library. Once all the videos have finished encoding, you’re now ready to create your Interactive project.
Step 4: Create Your Interactive Project
There are two ways to create your interactive project:
- Easy: Use the Interactive Video Composer
- Manually build and upload your JSON file – Continue to STEP 5
Step 5: Make the JSON File
This is the most tricky step of the whole part, and still is not that bad.
First you need to gather all of your assets and information that you want to use, which will be:
|Assets and Information|
|Paths||All of the paths to your needed videos, and a name for each one so you can reference it in the JSON file.|
|Loop Time||You want to know the minute & second count of where you want the loop back point to be.|
We cover in more depth below how to make the full JSON file.
Step 6: Upload Your JSON File
Upload it in the Media Library (the Media Library will automatically add it to the correct area), once uploaded click on the “Documents” tab and clipboard the path to your JSON file in the media Library, this is what you will insert in the “Chapter Path” instead of a video.
Step 7: Add Your JSON File to a Chapter
In the Courseware Manager, go and find the Chapter in question, and you will want to manually add the path to this JSON file (as opposed to “Select From Library” like you would a video). Add the path to your JSON file on the “video path” line.
Here is an example of what the full path should look like:
Making the JSON File
- debug – If set to true the player will show the button areas visually, helpful for tweaking button placement etc.
- videos – A listing of video config objects used in this interactive lesson. Note that the object keys are considered the “id” of the associated video configuration.
Video Config Object Properties
- buttons – A listing of button config objects
- loopStart (optional) – An array in the format of [mins,secs] which tells the video player where to seek to once the video reaches it’s end. Used for areas where buttons are presented and an interaction is expected.
- src – An absolute path to the video to be played
- captions – An object listing of absolute paths to caption xml files, note that the the object keys are the actual label that is shown in the ui the associated language.
- next – The id of a video to play upon completion
- ending – A config object that determines what happens once the video completes
Ending Config Object Properties
- video – The id of another video to play once video has ended (works exactly like the next property)
- url – An array where the first item is the url and the second is the target window
- complete (optional*) – If set to false, once the video ends it won’t call the complete callback
Button Config Object Properties
- width – Pixel value for the button area’s width
- height – Pixel value for the button area’s height
- x – Pixel value for the button area’s left position
- y – Pixel value for the button area’s top position
- label – Text to show when debug is set to true
- value – A string value that is sent to any selection callbacks along with the action property
- time – An array in the format of [mins,secs] that tells the player when to activate the button area
- video – The id of a video to play once clicked
- url – An object with the string properties href (the url to be accessed), target (the window in which to open the url) and specs(properties for popup window)