In this video, I’ll show you step by step how you can create custom drag and drop interactions in Storyline 360. Are you ready? Then let’s get started.
cta under video
Drag and drop interaction
At the end of this video, we’ve created this drag and drop interaction of the foods that you can drag to the refrigerator on the right in Storyline 360. Now let’s get started to see which steps you need to take to create this drag and drop interaction. I’ve created a new Storyline project and the first thing that I want to do is add a background image of the kitchen in this project on my slide. So to do that, I’ll double click. So I’ll go to Slide View, and now you can see that this slide does not has the same dimensions as the slide that I showed you in the example of my drag and drop interaction. So I know that the background image of the kitchen has a width of 1,600 and height of 889 pixels.
Design tab
Let’s see which dimensions this slide has, and you can see this if you go to the Design tab, go to Story Size, and now you can see the story size. This story size is the dimensions of your slides in Storyline. So you see it’s here 720, the width, and 540 pixels, the height. So we can change this and click here. Go to Custom. Type in 1,600. Uncheck Lock Aspect Ratio, and this will be 889. And now I’ll click on Okay. And you’ll see that the dimensions of the slide are changing right now. So now I can add the background image of the kitchen. So for that, I go to Insert, go to Picture, and here is my kitchen image, and I rename it on the timeline to Kitchen.
Gradient overlay
The next thing I’m going to do is to add the gradient overlay, and I’m doing this by adding a shape in Storyline. So I go to the Insert tab, choose Shape, and choose the rectangle shape. And now I draw a shape on my slide, and I call it Shape on my timeline. If you select the shape, and if you click Control Enter on your keyboard, then Format Shape, a window will open and here you can choose Gradient Fill. We can create the gradient we saw in the example. This gradient has three steps, and we only want two. We want the white one at one end and a transparent one at one end. So I can remove this step. So there are only two steps now, and you’ll see that the gradient is from top to bottom and we want it from left to right, so the angle will be 180 degrees. You see it’s from left to right.
The second step, I’ll choose another color. I’ll choose white. And for the first step, I’ll choose also another color. I choose this also white, and for this I’ll change the transparency. So you will see, we have a gradient from white to transparent, and I want to create it that’s it’s now in the middle. I want it a little bit to the left. So I’ll go to my second step. I’ll direct the position to about 70%. So you’ll see here is the gradient, and here is the white. Now I’m satisfied with it, so I’ll click Close. So now I can add the picture of the open fridge. For this, we will go to the Insert tab, click on Picture. And I have here the picture. It’s a transparent PNG file.
I’ll click on Open and it’s on my slide, and I’ll position it over the refrigerator in the kitchen. So, that’s done. And now I’ll add two text blocks to add the title text and the body text for this assignment. I’ll go again to Insert, choose Text Box, and I draw a text box here. I’ve copied my text and I paste it here. So then I’ll make it bold. This is the title text, and now I will create a new text box for the body text. So I will go to Insert again, Body Text. Draw up my text box. Paste my text in it. Make the font size a little bit smaller. 16 is all right, I think. I make the text box a little bit wider, and I do some formatting. I make this bold and italic.
So now we can add the shelves and the products that we have to draw to the refrigerator. I’ve already added one shelf and I’ll copy this and I paste it again and I draw it to the other shelf. You see there is some white in it and also a drop shadow. So I have to direct this shelf on my timeline beneath the other shelf. Now it looks okay and I have to align them. I can do that here on the Format tab and align them to the left so they’re aligned okay. Let’s save this file for now. And now we can edit the products on the shelves. Now I’m going to add the products on the shelves, and the products are going to be the direct objects that has to be a direct to the right place in the refrigerator.
So I’ll go to the Insert tab again, go to Picture. And now here I can click all the pictures that I want to insert here. So the cheese, raw meat, fish, eggs, soda. Yeah. Then I’ll click Open and our Storyline opens all the images. So now I have to resize these images and I will place them on the shelf. I had to reposition the shelves a little bit to make extra room from my products. I resized all my products in Storyline. So what I did, I pressed my shift key and I corrected so the dimensions of my products remain the same. So now it’s a little bit smaller, a little bit smaller, and I can position it on my slide, so here on the shelf.
Timeline
The next step is to give all the direct items in the timeline a descriptive name. Now, you see picture four, picture five, picture six, et cetera. So I’ll make this Drag Broccoli, and I will do this also for the other drag items. I gave all the drag items a descriptive name. The next step is to create drop items on the shelves in my refrigerator. My drop items will be rectangles. So I’ll go to Insert, to Shape, and I’ll draw a rectangle here on the drawer and I’ll copy this. I’ll place one on the door and one for each shelf in my refrigerator. What I’m going to do, what I did also with the product, is drop items and descriptive names so I know which drop item corresponds with the correct item.
Give a descriptive name
Now I gave all my drop items also a descriptive name, so the next step is to make this slide a drag and drop slide. And I’m going to do this by converting this slide in a free form question slide. And I’m doing this by going to the Insert tab and I click on Convert To Free Form. And now I can choose to which free form question I want to convert this slide. So here, Drag and Drop is all selected so I can click Okay. And you’ll see Storyline has added a form view and a slide view now, so this slide is now a question slide. And at the Form View tab, I can add my direct items and match it with the corresponding drop items.
I’ll choose the Drag Soda, and I know this has to be in the door of the refrigerator, and I’m going to do this also for the other drag items. So I’ll now edit all the direct items and I’ll match them to the corresponding drop items. So now let’s see which thing we have to do to make it a proper drag and drop question. If I click on Slide View, I see that my drop items have a blue color here. I don’t want it, so what I’m going to do is I select all my drag items by clicking Control Enter on my keyboard, and I’ll set the transparency of the drag items to 100.
Now you’ll see that there’s still a blue border, so what I have to do is I’ll go to Format, go to Shape Outline, and I say, “No outline.” So now the [inaudible 00:09:27] are not visible for a learner when he’s going to do this interaction. So now if I click on Form View, we go to the settings of my drag and drop question. You’ll see here that you can choose for feedback by question or no feedback, if you want to shuffle the answers, if you want to attach this interaction to a results slide, if you want to add a score per question or no score for drag and drop, and how many attempts you want to give a user for this interaction.
You have also here the option Drag and Drop Options. And here there are some extra options that you can choose for your drag and drop question. For instance, what you want to do if a drag item is dropped outside a drop target, so you can see any drop target or a correct drop target, what you can do is that you want to review direct items one at a time. We have placed our correct items on the shelves here, so that is necessary, what you want to do with the drag items, how they are snapped on the drop target. And if you want that, if possible, that there’s only one drag item on each drop target.
Now in our refrigerator there are some products that need to be on the same shelf. So this option, we don’t check. And for the feedback, you see here that you want to delay the item drop state until the interaction is submitted, and I will show you now what it means with the drop states. Now let’s preview these slides to see how it works. So I’ll click on Preview The Slide and Storyline will create my preview. Now I can drag, for instance, the broccoli to the drawer, but you see that the broccoli is too big for the drawer. There is a solution for in Storyline. So I’ll click Close Preview and now I select the broccoli. I go to State. So the broccoli has now one state.
But if you click Edit State, then click New, you’ll see that Storyline has specific states for Drag Over An Item, for Drop Correct and Drop Incorrect. So what I’m going to do, I’m going to create the Drag Over states, and I going to change the width and height of my broccoli so it fits in the drawer. Let’s see if it matches right now. Little bit smaller. And now I will set it to the exact dimensions. So now I have set it to the dimension, so it’s in the middle of the larger broccoli. Now I’ll copy this, or I duplicate this state to Drop Correct, and I do this again for the Drop Incorrect. And I add a state for a custom drop state. So what I do is I click on Edit States for broccoli, choose the Direct Over, choose Duplicate, and I call my new state Dropped.
And now I click on Add. You see Storyline automatically creates a new state now. So what I’ve done is I have closed the states and now I’m going to create a trigger. And this trigger says, “Change state of the broccoli to dropped when a user drops their broccoli on,” and now I’ll select all the drop items. So this means that if the user drags the broccoli on one of the shelves or the door of the refrigerator, it will automatically change the state to Dropped, and this is the smaller broccoli. So let’s see under Preview what it does right now. I pick my broccoli and I go to the refrigerator. You see it makes it all smaller, so it fits. And now if I place it, you see it’s still small. I place it here, it’s small, so now the broccoli fits in my refrigerator. I can also do this for all the other drag items. So you can show here a larger image, and in the refrigerator, it’s a smaller image, so it fit in the refrigerator.
Do you want to download the resource file of this custom drag and drop interaction? Then go to upwardonlinelearning/resources and you can download the Storyline file. I’ve also put a link in the description of this video to the downloads. Do you have any questions about custom drag and drop interactions? Then leave a comment below this video, and I’ll promise to answer it. If this video was useful to you, then give this video a like, and don’t forget to hit the subscribe button and the notification icon so you will be informed every time whenever when I release a new video. Thanks for watching and have a great day.
