Learn how to create and manage transitions between states.
- [Voiceover] You know that you can do transitions…between screens, but you can also do transitions…between states.…But there's a bit of a problem with screen state transitions…and let me show you what I'm talking about.…What I've got here is a state 1, which is a black shirt,…state 2, big blue shirt down at the bottom.…So the black shirt is going to change into…a big blue shirt at the bottom.…And if I save it and preview,…all I have to do is click on the black shirt…and it will change into the blue shirt.…But the problem is, what I wanted it to do…was to move down here, not pop in here.…
And you can do that using state transitions.…So I'm going to close the player…and let's take a look at how all that happens.…To transition between states,…what you do is you click on state transitions,…so you choose the state you want to move from…and you add a state transition.…So we're going to add a new state transition here…from state 1 to state 2.…If I had four states, I could get this little pop-down menu…and choose the state I want to go to.…
- 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.