Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Prototyping!
You have completed Practice Prototyping!
Preview
Walkthrough how to create the interactivity to create the prototype.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
How did creating the connections go?
0:00
Were you able to figure out
how to get drag, tap and
0:02
slide show connections working?
0:05
If not, follow along with me, as I walk
through how to recreate the prototype.
0:08
First, make sure you've selected
Prototype at the top of the screen in XT.
0:12
Now, let's start at the top.
0:19
On the on-boarding screens I
have two interactions each.
0:21
The first is to create the drag animations
and the second is the tap interactions.
0:25
First, let's create the drag animations.
0:31
In order for the drag animation work, I
need to select the large repeat grId area.
0:34
And drag the connection
to the next screen.
0:41
Make sure the trigger is drag and
the action is auto animate.
0:46
The destination should be
the screen I dragged my arrow to.
0:52
And the last option is called easing.
0:56
This is the way to control how
the animation looks when being drag.
0:59
Feel free to play around with easing and
1:04
read more about it in
the teacher's notes below.
1:06
Now that I have the first
screen connected to the second,
1:09
I will do the same thing
on the second screen.
1:13
So the drag animation allows you to
scroll sideways, back and forth.
1:16
Let's check it with the play button.
1:25
Awesome, the drag animation is working.
1:33
Let's tackle the tap interactions next.
1:37
These will be located on
buttons on each screen.
1:40
The next button will take
us to the next screen and
1:43
the start button will take
us to the home screen.
1:46
Since the buttons are part of a group,
I'll need to double click into the group,
1:49
so I can select the button and
connect it to the next screen.
1:55
I will make sure the trigger is tap for
both interactions.
2:00
Let's check them again.
2:09
Nice, they're working great.
2:17
Now the onboarding screens are complete.
2:20
Let's move on to the next section.
2:23
The homepage screens have
a fun sideshow effect,
2:27
that changes the background of the app
to show off travel destinations.
2:31
To create these connections,
I need to select the artboard and
2:36
connect it to the next.
2:40
Now I can add a time trigger to
automatically change the screen after
2:45
a few seconds.
2:50
Again, feel free to play around with the
settings, to see how it affects the app.
2:56
A nice perk with creating similar
interactions, is not that I've created
3:03
one, when I create the rest, they will
all have the same settings as my first.
3:08
Which can save me a lot
of time in the long run.
3:14
I'm going to go ahead and
connect the rest of the screens together
3:17
with the time trigger and send the last
screen back to the first screen.
3:21
So it creates a loop.
3:26
Let's open up the prototype to make sure
our slideshow animations are working.
3:41
Cool, still with me?
3:53
Feel free to pause the video
if you need a break.
3:57
If not, let's power through
the next set of interactions.
3:59
The last set of interactions for
4:02
the home screens is to connect
them to the next set of screens.
4:04
The search button on each page needs
to link to the search results page.
4:09
Like the buttons on
the onboarding screens,
4:14
I will need to click into the group here
until I only have the button selected.
4:16
Then I can connect the button
to the search results screen and
4:22
set the trigger as tap.
4:27
Repeat this for
each of the search results buttons.
4:31
A quick check to make sure it's working.
4:40
And yeah, they're working.
4:46
Now that we've made it to
the search results page,
4:49
we have a few final connections to make.
4:52
Let's tackle the drag animation.
4:54
Click on the repeat grid and
connect it to the next screen.
4:57
Set the trigger as Drag and Auto-Animate.
5:03
Repeat the steps with the second results
page, to complete the drag animation.
5:08
Lastly, I connected the search
icons to the first home page,
5:16
with a tap interaction.
5:20
The page will automatically go back
into the background change loop.
5:22
So I only need to connect
it to one screen.
5:26
Now let's view the entire prototype.
5:38
Drag, drag, tap.
5:40
Tap, slideshow.
5:46
Tap, drag and tap.
5:55
You made it to the end.
6:02
Nice work.
6:04
In the teachers notes below, you'll find
the solution file to play around with.
6:05
Try creating your own animations,
or even adding your own screens.
6:10
Nice work designers.
6:16
See you next time.
6:17
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up