Prototype behavior

Now, it's time to define the functionality of our prototype. Adding interactivity to the different elements of our design will allow the user to interact with it as if it were a real application. Let's go screen by screen, defining the different actionable elements and how our prototype reacts when the user interacts with them through a gesture:

# WELCOME BEHAVIOUR
# Step 1 Functionality
sketch.CTA_1.on Events.Tap, ->
sketch.Step_2_Artboard.animate("in")
sketch.Step_1_Artboard.on Events.SwipeLeft, (event) ->
sketch.Step_2_Artboard.animate("in")
# Step 2 Functionality
sketch.CTA_2.on Events.Tap, ->
sketch.Step_3_Artboard.animate("in")
sketch.Step_2_Artboard.on Events.SwipeLeft, (event) ->
sketch.Step_3_Artboard.animate("in")
sketch.Step_2_Artboard.on Events.SwipeRight, (event) ->
sketch.Step_2_Artboard.animate("out")
# Step 3 Functionality
sketch.Step_3_Artboard.on Events.SwipeRight, (event) ->
sketch.Step_3_Artboard.animate("out")
sketch.CTA_3.on Events.Tap, ->
sketch.Feed_Activities_Artboard.animate("in")

In the first screen of our prototype, we will take two gestures into account. We will go to the Step 2 Artboard screen when the user taps on the NEXT button and when the user swipes left. To control the Tap event on the NEXT button, we will associate the action with the sketch.CTA_1 layer using the following lines of code. We can reference each of the three buttons of our screens, the two NEXT buttons that appear in the first and the second screens, and the START NOW button of the third screen by accessing sketch.CTA_1, sketch.CTA_2, and sketch.CTA_3, according to the names we gave to their layer groups in Sketch:

sketch.CTA_1.on Events.Tap, ->
sketch.Step_2_Artboard.animate ("in")

The SwipeLeft event will be associated with the sketch.Step_1_Artboard layer since we want the whole screen to react to the swipe gesture of our user:

sketch.Step_1_Artboard.on Events.SwipeLeft, (event) ->
sketch.Step_2_Artboard.animate ("in")

We will do the same for the second screen, but we will add a behavior associated with the event when the user swipes right, since we want to allow the user to navigate back to our welcome tour. We will add a sketch.Step_2_Artboard.on Events.SwipeRight, (event) -> listener to our prototype and the sketch.Step_2_Artboard.animate("out") associated action that will take the sketch.Step_2_Artboard layer to its out state. This will position the artboard outside the screen and make the sketch.Step_1_Artboard visible again:

# Step 2 Functionality
sketch.CTA_2.on Events.Tap, ->
sketch.Step_3_Artboard.animate("in")
sketch.Step_2_Artboard.on Events.SwipeLeft, (event) ->
sketch.Step_3_Artboard.animate("in")
sketch.Step_2_Artboard.on Events.SwipeRight, (event) ->
sketch.Step_2_Artboard.animate("out")

In the sketch.Step_3_Artboard screen, we will add only two listeners: one for when the user swipes right, to go back, and another for when the user taps the START NOW button, because we will make the Feed Activities Artboard screen appear from below the screen at this moment, simply changing the status of this new layer to in:

# Step 3 Functionality
sketch.Step_3_Artboard.on Events.SwipeRight, (event) ->
sketch.Step_3_Artboard.animate("out")
sketch.CTA_3.on Events.Tap, ->
sketch.Feed_Activities_Artboard.animate("in")

As you can see, adding functionality to your prototype is very simple. With the code added up until now, your welcome tour should be working. The user is able to move through the screens of the welcome tour. At the end of the tour, the user will be able to access the feed of your application.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.119.11.28