Solution6:19 with Megan Amendola
Walkthrough how to create the interactivity to create the prototype.
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 up