A comprehensive overview of the draggable property in Proto.io
- [Narrator] In this exercise,…we're going to explore dragging.…Dragging is a great little interactive experience,…plus at the same time, it can be regarded…as a bit of an animation experience as well.…So, let's take a look at it, and to get yourself started,…open a new project,…pick a smartphone, I'm not too terribly concerned…about what skin you choose,…and then just click create.…And when the editor opens, let's come over to the icons,…and we'll just drag a little gear icon on here,…and grab this little Android guy here,…and I'm going to change his color to green,…so just click the foreground color,…click a green chip, click save, and he's green.…
So what we're going to do, is we're going to drag this cog…around the screen, and to do that,…you just enable the draggable property, right here.…And when you select it, you can see that you get…all kinds of axes that you can move this thing around on,…and it also gives you boundaries.…Now the constrain to parent is the inside dimensions…of the screen, and constrain motion on release…
- Using design patterns
- Using grids and columns
- Using the Proto.io player
- Using the Proto.io smartphone app
- Working with screens
- Using components
- Creating artwork
- Creating and using containers
- Creating animation
- Publishing your prototype
Skill Level Intermediate
Building and Maintaining Your UX Design Portfoliowith Diane Cronenwett15m 54s Appropriate for all
Sketch: Creating Vector Graphicswith John-Paul Ballard1h 30m Intermediate
1. Getting Started with Proto.io
2. Working with Screens
3. Using Components
4. Creating Artwork from Proto.io
5. Creating and Using Containers in Proto.io
6. Creating Animation in Proto.io
7. Publishing Your Prototype
Next steps1m 22s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.