In this video, learn how to create an interactive drag and drop interaction that is ideal for games and for reordering content.
- In this chapter, which I call practical principle projects, try saying that a few times. We're going to take everything we've learned so far in this course and apply it to a variety of little projects. So the first one we're going to do of course is dragging and dropping something into place which is a fairly common project. And that's exactly what we're going to do in this exercise, to get yourself started, open the drag drop file found in your chapter download, and when the file opens you'll see three art boards, one, two, and three and a bunch of images at the bottom. And so what's going to happen here is we're going to take this little image here and we're going to drag it into this box here. So let's get started. So the first thing you want to do to get something to drag of course, is to open the images and art board one, select the image to be dragged and set its horizontal and vertical properties to drag And you're going to do the same thing over on art board two and I've already done it for you, so don't bother. and the final step is we've got the start state right here but we're going to come over to art board three, we're going to open the images, we're going to take the Colosseum image, and we're just going to drag it into the box. And let's see if we've got this thing happening. So it's just clicking and dragging. Yep. There it goes. I kind of got that done, but it's it's okay. So I'm going to to move this off and we're going to add a little bit of user feedback here. The first thing it is, we want to make it interactive. So we're going to select on art board one, the image we're going to give it a touch, begins events. So this is like a mouse down or a touch finger down or press event, and we're just going to direct it to art board two, and then we're going to come to art board two, select the Colosseum image, and we're going to say, look when the touch ends, we're going to come over here. So when you lift your finger or release the mouse Let's see how that works. I'm going to bring the preview in, that's a little better. So you see how it kind of drops into place. Guess we're going to move this out of the way, and we're going to add a little bit of user feedback. So we're going to let the user know that when they've selected this image is going to be visibly selected. So we're going to come over to art board number two. I'm going to select the Colosseum image. We're going to set the angle to - 15 degrees and we'll set the scale to 1.3, and while we're at it let's give it a little bit of a drop shadow and we might want to make the drop shadow a little bit more pronounced. Here we go, and if we test here you go see, and we let, in it goes. You're going to move the preview window out of the way so far so good, but we still got an issue. We'll bring the preview back in. When this is dropped into place, these should slide over. So you can move the preview out of the way and let's go to art board number three. So what we're going to do is just slide the images over. Now, what you don't do is move the group because this image will move as well. So in art board three you're going to select the bottom three images with the shift key held down. Since it'll be flowers, fruit color, and cheese and I'm going to hold down the shift and press the left arrow key and just move them into place. Sort of line up with the word drag and let's see what we've got here. So we'll just bring the preview back, click. Yep. Oh, that works. Okay. Let's add a little bit more feedback for the users. you're going to move the preview out. So how about when the user moves the image into the box? The box changes color. So they know that that's the drop zone and to do that what we're going to do is we're going to create a driver. So open up the driver's panel and I want you to select the box in art board two and we're going to use the Y. So we're going to add a fill key frame on the Y axis and then we're going to come over and as the image moves up and just touches the box we're going to change its color to a light gray so that they know that's where they're to put it. Let's see how that works. So we'll just rewind. And there we go guess going to move this out of the way. So we've got a big image here. Why don't we just scale this image up here just to fit the box. So we're going to select the image and holding down the shift key, which is going to make it a little bit bigger to fit the box. Here we go. Let's see how that works and that's a whole tone better. So there you have it, a simple drag and drop but I've shown you a simple way of doing it. Using only one drop zone. This could be applied to any number of images and drop zones because each box in image would get the exact same treatment as the Colosseum in this exercise.
- Adding content to new artboards
- Creating your first Principle animation
- Managing the Principle timeline
- Animating with keyframes and drivers
- Using assets from Photoshop and Sketch
- Masking and cropping
- Creating an Apple Watch UI
- Creating a video player