Create my first interactive video with arketiks motion
Hello, in this tutorial we will learn how to create an interactive video with Arketiks Motion.
The goal of our video will be to present songs of birds by adding sound to clickable images on the video. We will also include an MCQ during the video and will finish with the appearance of explanatory text at the click of an element.
The files for the realization of this tutorial are available by clicking here.
The files for the realization of this tutorial are available in the description of this video.
Creating the project and importing the video
Recall that arketiks motion is not intended to make video editing but rather to add interactivity to your videos. Thus, when you create your own video, you will need to edit on an editing tool. We have compiled a list of free tools available here.
We will start by creating the project that will contain the videos of the arketiks motion tutorial. Let’s call this project “Tutorials” (…) Once the project is created, we can add our tutorial videos. Let’s name our first video “Birds” (…) then click on it to access the editing section.
When we are in the editing part, the first thing to do is to upload the basic video in the tool (…) For that, click on “integrate video” and go look for the file. Attention, you must have a video in the format MP4 or MOV (…) The video appears now in the central part of our application.
Adding chapters
We will divide our video into several chapters. This is not essential, but in some cases it may be useful to tell your audience what part of the video they are in. Your audience will be able to see the table of contents by clicking on the button at the bottom right of the video. Like this.
In the left margin, just click on “add a chapter” to start. In our example, we will add 3 chapters to the video, which we will call “bird songs”, “QCM”, and “swan song”.
So I create my first chapter that starts at zero seconds. Here is.
Since I do not know when chapter two begins, we will check on the video at which second starts the video sequence with the owl, which is the subject of our second chapter. To work accurately, we can use the seconds selector.
We obtain in our example 33 seconds, a number that we will introduce in the chapter field, with the title, before validating by clicking save.
Repeat the operation for the third chapter, at the second 51 this time.
Creation of the first interactivity
Now that chapters are added to our video, let’s start with adding interactivity!
For the first interactivity, we will add images, which will trigger a bird song when we click on one of the images.
We will position ourselves somewhere in the first chapter of the video, say in the tenth second. Now let’s click on the “create an element” button. We see that a block appears on the video. This is the container of the item we are going to add. Note also that the right margin has changed to the element’s editing panel.
The first thing to do is to name our element. The nomenclature of elements is important in motion, because it is a question of being able to quickly find your various elements later. This is especially true if you have many interactive elements in your video. In our example, we will call this item “Parrot Button” because it will be in charge of triggering the sound of the parrot sound.
In the “content” section, we will select “Image”, then pick up our image by clicking on “integrate a new image”. We notice that the thumbnail appears in the content space. Now just click on the thumbnail to embed the image in the container, the image turns green. We will note that clicking on the thumbnail again removes the image from the container. Well, here we will click again because we will use this image.
Then we will resize the element. We can do it in two ways. Either manually, directly on the video, using the “handles” on the edges of the container, either by going to the Visual part and clicking on Size / Position, then introducing the distances separating each side of the edges of the video. This second way of doing things allows you to be more precise.
Once the image is positioned and sized according to our wishes, we can save the item by clicking save at the bottom of the edit panel.
You notice on the right panel that “Parrot Button” appeared at 10 seconds. Here is the list of elements, which are grouped by the moment T or they appear. So, if I move in the video …, I can go back directly to where I am the element of my choice.
Adding an audio
Now that we have our button, we will have to add our audio file.
Our audio will be able to integrate in the same elements as the image. Indeed, on our element, we will add an audio file in addition to the image. One click will automatically trigger the sound.
We will import an audio file. For this, you have to go to the audio tab, click on “integrate an audio file”, in our example we will open the file “audio parrot.mp3”. Once loaded, do not forget to click on it so that the title of the audio appears in green. This means that the sound file is operational selected. Then save the item.
You can now test the rendering by returning to our video, just before the second 10 on the playbar. Like this. By clicking on play, we see that the video stops and that we can listen to the parrot’s cries by clicking on the button.
Element displayed for a certain duration of the video
If you want the basic video to continue with the element we have just integrated visible, this is possible. Let’s look at how. We must already open the “Parrot Button” element, and in the timing section, simply check “keep the element for a certain duration”.
We notice that a second text field appears, it allows us to define the moment at which the element will disappear. This option allows you to display your item over your basic video for a while.
Attention, if you add several elements, and that you wish that they remain all visible on a certain duration, you must check this box on each one otherwise the main video will stop at the appearance of the element whose box n ‘ has not been checked.
This precision made, repeat twice the operation with the elements images and sounds of the robin and the raven to get a list of buttons and discover your audience the song of these beautiful birds.
Creation of a multiple choice
Now, we will learn how to integrate a multiple choice in the video. MCQ motions offer a great opportunity to interact with your audience, they are mostly used for training but can be used for other purposes.
To integrate an MCQ, go to chapter II, on the video of the owl, towards the middle of the video. Once again, we will create an element. Let’s name it this time “Question” or something to find it.
We just have to select QCM in the content section, and to write the statement of our question, here we chose “from which bird does this song come from?”.
Now that the statement of the question is written, click on the button “Add an answer” which is under the statement of the question to propose a first answer to the question. In our example, we will give 3 answers to your choice: Owl, Owls, Raven. Do not forget to uncheck “This answer is right” on the answers raven and owls, because it is the sound of cry of an owl that we will introduce!
When all the possible answers have been entered, we can still modify, if we wish, the “Verification” field. This is actually the title of the button your audience will have to click to check if it has given the correct answer.
Let’s save our element, that we can already test it!
Here, we notice that the text is a little big, so we will return to the editing of the element, and in the text tab, reduce the size of the characters. In addition, we will reduce the size of the container, directly with the handles of the container on the video.
You’ve probably guessed it, we will have to reproduce the steps we covered in the first chapter to add a button related to an audio! Without this, your audience will not find the right answer!
We will create an element with the image “Bouton audio.png” and the sound “chant owl.mp3” at the same timing as our QCM, ie the second 39. Let’s put the button next to our quiz and delight our audience!
Appearance of a text
For the third chapter, let’s try something a little more advanced. Let’s have an explanatory text on the bird of the lakes, the swan. This text should appear and disappear at the click of a button.
Let’s go to the beginning of chapter 3, the second 57. We will first create the element that will serve as information button. This should not have any secrets for you anymore. First, create an element, and import an image into the container. Select the image “information.png button” and name the element “Swan information button”.
To make this button appear until the end of the video, we need to “Keep the item for a certain duration” in the timing section. Save the element.
Now, let’s add a text element, in the same way as the button we just created. Do not forget to return to the second 57, in order to have possible interactions with the information button. Let’s call the swan text element and copy the text made available in the swan.txt information file into the text box of the content section. We find that on a dark video like our example, the default text is not very readable.
It will be necessary to customize the background of the text for a more pleasant result. So we’ll put a darker background to the element and a blank text. By clicking Colors, 2 frames appear. One for the background and one for the text. Keep in mind that you can control the opacity of the elements with the opacity bar.
The result is already more readable, but let’s try to reduce the size of the text by modifying this parameter. We can also add margins to peel the text off the sides. For that, we have to modify this parameter.
Save the element. So we have our two elements that appear at the same time on the video.
Because the 2 elements appear at the same time 2 options appeared in the “Actions” section. These two options allow you to show or hide the item when you click on another item. This is what we will use to display our element containing the text by clicking on the “information button” element that we created earlier.
By clicking on “show item by clicking on”, a drop-down list appears. It contains only one element for now, it is the “Swan Information Button” that we created. Just click on this item to select it.
Below, the option “The item is hidden initially” appears
We can test. The text is displayed well by clicking on the information button.
Export video
Once satisfied with our video, it’s time to export it.
Arketiks motion allows elearning trainers to export video in SCORM format, it is a recognized standard in the e-learning industry that records the progress of participants in e-learning training.
If you do not need the SCORM format, but just want to share it on the internet, Click Generate link for the video, then 2 options open to you:
- copy the url link of the video
- copy the iframe code that will allow you to integrate it directly into a web page of your choice
