Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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