In Part Two of this Flinto Tutorial we’ll look at completing the last few screens of our Movie App, and I’ll be showing some more great features you can find inside of this invaluable Prototyping tool.
Let’s get to it…
On this screen we’ll be enabling the user to swipe horizontally through the video previews, and also to select some of the movies to add to their collection, and Behaviours will be showing their usefulness once more as we do this.
First things first, let’s create a link from the Home to the Video screen.
Press (D) to draw a link around the Index/Videos icon, giving yourself a sizeable tap area.
Then drag the Link Line across to the Videos screen, choose the Fade In Transition from the pop-up window, and click Done.
Keep things organised in the Layer List, by dragging the Link layer you just created next to the icon itself.
Select the Video Scroll group in the Layer List, and then press the Scroll Group icon in the Toolbar or use the shortcut (Option + Cmd + G) to wrap this in a new scroll group.
Flinto is a smart little cookie and takes note of the direction of the design element you have in place and sets the correct axis to scroll on, which in our case is Horizontal. There’s a clever little Flinto!
Of course if you hit (Cmd + P) you will see our scroll group is getting cut off on the left edge, and does not have enough breathing room on the right edge, so let’s fix that up quickly.
Grab the Scroll Handles on the left of the group, and pull them to the left until they snap to the edge of the screen.
And then for the right of the group, pull the Scroll Handles out to the right, or simply increase the Width to 870 in the Group Options settings.
A quick Preview (Cmd + P) will reveal that our scroll group is in a much happier place now.
One quick thing before we move on. Grab the Scroll Handles at the top of the group and pull them up by about 15pts. You’ll understand why this is necessary when we move onto the next step.
Ok. Let’s give those thumbnails a little bit of movement, and interactivity shall we.
From the Layer List, select the first Video Preview group, and then click the Behaviour button in the Toolbar, or use the shortcut (Cmd + B).
Hello once again Behaviour Designer!
What we’re going to do here is that when the user taps on one of the thumbnails it will expand in size, and in turn give the effect of raising from the screen slightly to give an obvious indication that it’s been selected.
Let’s make that happen.
Firstly click the Plus (+) icon next to the Initial State to create a new State, and (Double-Click) on its title to rename.
Then with the new State selected, select the Title layer in the Layer Panel, and reduce its Opacity down to 0%.
Then adjust its Timing slightly in the Inspector, using the following settings –
- Damping: 1
- Velocity: 0
- Duration: 350ms
Next, select the Thumbnail layer, and with the Padlock icon closed (to constrain proportions), increase its Width just marginally to around 135.
You will see the Thumbnail is now slightly off-centre, so just pull it the left a touch until you see the red guideline appear to show it has snapped back into line.
With the Thumbnail still selected, enter 10 into the Y position field just to nudge it down a little.
Hit (Space) to see the simple animation. Hmm. Looks a little, well, erm, bland.
Let’s tweak the Timing on this to give it a little more punch!
With the Thumbnail layer selected select Spring(UIKit) from the Timing Panel, and then adjust the following settings –
- Damping: 0.5
- Velocity: 0
- Duration: 350ms
Ok. Time to link this these States up.
With the the Thumbnail on the Initial State selected, press (F) to create a Link, drag the Link Line across to the new State we created earlier, choose the Tap option, and click Done.
Then switch to the new State, press (F) again, and drag this Link Line across to the Initial State, choosing the Tap option once more.
Choose a name for your new Behaviour. I simply called mine Thumb Enlarge, and then click Save & Exit.
Now the Behaviour we just created we want to use on each of the Video Preview groups, as the interaction will be one of selecting the movies you want to add to your collection, so let’s attach this new Behaviour to all of those groups now.
(Cmd + Click) to select the other Video Preview groups in the Layer List, and from the Inspector click on Add Behaviour, then choose the Behaviour you created earlier. Boom!
From the Layer List you will now see that the Behaviour has now been applied to each of those groups. How easy was that?
Hit that trusty (Cmd + P) to give things a quick try out. Looking rather fine!
Ok. Let’s move on to the final screen.
Oh. Quickly, before we do. Press (D) to draw a link around the Profile icon, drag the Link Line across to the Profile screen, choose Fade In, and click Done.
On this final screen we’ll be creating some simple animations that occur when the content is scrolled, as well as creating some interactive Toggle Switches just to add that final bit of polish.
Let’s get to it.
Grab the Tab Bar and pull it up until it snaps to the bottom of the screen area.
Then from the Content group, select Profile Details, Separator, and Toggle Settings…
…and press (Option + Cmd + G) to create a Scroll Group around these groups/layers.
Drag the Scroll Handles at the top, and bottom until you have something like the following…
The select both the Tab Bar, and Content groups, and (Cmd + B) to create a new Behaviour.
In the Behaviour Designer, click on the Plus (+) icon to create a new State, and rename it.
With the new State selected, grab the Tab Bar and pull it down, and out of the screen area.
Then select the Profile Background layer, and from the Inspector, reduce its Height to 90.
Next, select the Profile Avatar, and reduce its Width, and Height to 70. Then holding (Shift) drag the Avatar up until it sits aligned on the Background layer.
With the Initial State selected, select the Scroll Group in the Layer List, and press (F) to draw a link. Take the Link Line across to the new State, and choose Scroll.
Let’s also, like we did previously, define a range of how far the user needs to scroll before the new State is activated.
With the Scroll Group still selected, drag the purple range arrow down, until you have something like the following…
(Cmd + P) to fire up that Preview.
The animations may be looking a little too snappy, so select the Tab Bar, Profile Avatar, and Profile Background elements with (Cmd + Click) and tweak the Timing settings as follows –
- Damping: 0.5
- Velocity: 0
- Duration: 700ms
- Delay: 100ms
Please feel free to have a play around with these Timings until you find something you’re happy with. The same goes for any of the other Timing settings used throughout this chapter. Tweak away until you’re happy with the results.
Ok. Give your new Behaviour a name, and click Save & Exit.
Now to those Toggle Switches.
From the Layer List, select the first Toggle Switch (You may have to drill down through a few groups to find it).
Then press (Cmd + B) to create a new Behaviour.
In the Behaviour Designer, click (+) to add a new State, and rename.
With the new State selected, choose the Switch layer from the Layer List, and then holding (Shift) drag the layer across to the left.
Try tweaking the Timing settings to something like the following –
- Spring (UIKit)
- Damping: 0.5
- Velocity: 0
- Duration: 500ms
- Delay: 0
From the Layer List, choose the On layer from the Background group, and reduce its Opacity down to 0%.
Let’s link these States up shall we?
With the Switch layer selected, select the Initial State, and press (F). Drag the Link Line across to the new State, and choose Tap.
Then select the new State, create a new link, and drag the Link Line back across to the Initial State.
Give the Behaviour a name, and click Save & Exit.
Of course we want to apply this new Behaviour to all of our Toggle Switches, so like the steps I showed you previously, select the rest of the Toggle Switch groups in the Layer List (Cmd + Click), and then add the new Behaviour to them.
And we’re nearly done here folks.
Quickly though. There are a few links missing on the Tab Bar that need creating, otherwise you’re not going to be able to navigate too great through your prototype.
Draw out links (D), and connect your screens up correctly, using the Fade In Transition that we used earlier, until you have something like the following…
And that’s a wrap for this Tutorial. Nice work there!
Hopefully you can now see how powerful the Behaviours feature in Flinto really is, and how they make an already great Prototyping tool even better.
Thanks for reading the article,