Learn how to use the scroll properties to make a a container scrollable.
- [Narrator] I'm willing to bet we've all…had this experience.…You open a Gooogle Map, you open a Apple Map,…or a big image on a smart phone or a tablet or whatever,…and to see the content inside you have to drag…that image around, and it moves around inside…the viewport of that image.…Yeah, you look at that and you go,…wow, that's pretty interesting,…well, I'll tell ya something,…it's really easy to do in Proto.…That's what we're going to do in this exercise.…So to get yourself started,…open up a new project, we're going to go with an…Android device, so we'll just go with the Android mobile,…click create, and when the editor opens,…head over to your chapter download and drag the…map image into the assets area.…
Now, we know that to make things scrollable,…or to make things move up and down using the mouse,…we have to put it in a container.…So we're going to create a brand new container,…right here, so you click container,…new container, then type the word map.…And the width and height of this container will…be the width and height of the map.…
Author
Released
2/3/2017- 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
Duration
Views
Related Courses
-
Adobe XD First Look
with Tom Green1h 1m Beginner -
Building and Maintaining Your UX Design Portfolio
with Diane Cronenwett15m 54s Appropriate for all -
Sketch: Creating Vector Graphics
with John-Paul Ballard1h 30m Intermediate
-
Introduction
-
Welcome58s
-
A word from the author2m 19s
-
-
1. Getting Started with Proto.io
-
Proto.io dashboard overview2m 59s
-
Review of Proto.io interface3m 18s
-
Use design patterns5m 33s
-
Use grids and columns2m 32s
-
Import assets5m 33s
-
Using the Proto.io player4m 50s
-
Use Proto.io smartphone app2m 30s
-
-
2. Working with Screens
-
Understand screens5m 11s
-
Add screen transitions9m 1s
-
Use the basic library11m 26s
-
Fonts and color in Proto6m 20s
-
-
3. Using Components
-
Add components6m 37s
-
Edit components2m 52s
-
Add external links3m 43s
-
Adding navigation6m 18s
-
Use video5m 32s
-
Create an Android interface8m 18s
-
-
4. Creating Artwork from Proto.io
-
Create assets in Photoshop6m 32s
-
Create assets in Sketch 36m 35s
-
Work with vectors3m 7s
-
-
5. Creating and Using Containers in Proto.io
-
Container overview8m 14s
-
Nest containers3m 14s
-
Create a carousel7m 51s
-
-
6. Creating Animation in Proto.io
-
States3m 22s
-
Create state transition3m 8s
-
Create rotation4m 17s
-
Create a draggable rotation5m 22s
-
Create a sliding menu6m 34s
-
Media control7m 19s
-
-
7. Publishing Your Prototype
-
Create a fluid design2m 50s
-
Adapt to different devices1m 18s
-
Use comments5m 48s
-
-
Conclusion
-
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?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake 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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Create a draggable Google map