Switching between the Tabs
Now that the “For You” screen is also ready, we can make it possible to switch between the two screens.
So when we tap on the “Library” tab this screen should be visible, while the “For You” screen should be hidden.
$.Tab_Library.onTap -> scroll_library.visible = yes scroll_for_you.visible = no
And the reverse should happen when tapping the “For You” tab.
$.Tab_For_You.onTap -> scroll_for_you.visible = yes scroll_library.visible = no
By the way, here’s how you can quickly add an event to any imported layer:
But the correct tab should also be made active. We do that by adding these lines to both event handlers:
# Make all tabs gray for tab in $.Tabs.children tab.saturate = 0 tab.opacity = .6 # Except this one @saturate = 100 @opacity = 1
for…in loop makes all the tabs gray, just like we did earlier, and the two last lines make the current tab red again.
In those last two lines we’re actually writing this:
this.saturate = 100 this.opacity = 1
this’ being the tab that received the event, the one that was tapped. But instead of ‘
this.’ you can also write ‘
We add one more line underneath these
onTap handlers because when the prototype starts, the “For You” screen should be hidden:
# Initially hide the “For You” screen scroll_for_you.visible = no