In this video, Nathan Manousos shows another example of creating a transition. This time it is a 3D flip transition activated by a swipe gesture. He shows how to use the 3D rotation features of Flinto for Mac inside the transition designer. He also shows how to assign this transition to several links that all have multiple gestures.
- [Voiceover] I think it would be really cool if there was a way to swipe from one photo to another when you enter these large photo screens. So, to do that, I'm going to add an additional gesture. Here where I have a single tap link, I'm going to click the Add Gesture button in the inspector and add a Left Swipe gesture. So you can have as many gestures as you want on one link. I'm going to set the target here to cubes photo. And, I'm going to make a new transition. Now, I have an idea for a really cool 3D flip effect.
And to do that, I'm going to start by dragging the screens right on top of one another. When I drag that screen on top, I'm completely obscuring the photo behind it with the background of the end screen. So to fix that, I'm going to select both big photos and drag them up to the top of the layer list on top of both screens. And now if I drag this one out of the way, you can see the other photo behind it. I'm going to use Flinto for Mac's 3D rotation feature to make this 3D flip effect. In the inspector, next to rotation, you can see that there's X, Y, and Z rotation options.
And by clicking and dragging on the label beneath the text input, you can see a live preview of the rotation. And you can see that's a really nice 3D flip effect. I'm going to rotate this all the way to 180 degrees. And then I'll toggle to the end of the transition, select the other big photo, and rotate that one to -180 degrees. Now we'll toggle this back in slow motion so we can see how it looks.
I think that's going to look really cool. One thing we have to deal with now is the caption. I'm going to have the caption slide in from the right side. And I'll just fade that out entirely. Now the other caption is obscured by the background of the end screen. So I can drag that one up to the top, along with the big photos. So now I can see that if I switch to the end state of this transition, I can drag it over to the left and fade it out.
Great. I'm going to give this transition a name. I'll call it Photo Flip. And then I'll save and exit out of the transition designer. Alright, let's open up the preview and see how that works. I'll navigate to that large photo and I'm going to do a swipe left gesture across that photo, and you can see that it placed my 3D flip effect transition. It's really cool. But again I'm stuck here without a way to get back or get anywhere else.
So I'll select the big photo on the next screen, go back to the inspector, add gesture. I'll add another left swipe. This time the target will be dog photo. And once again, I'll use the Photo Flip transition that I already made. And then on dog photo, I want to be able to swipe back to the cubes photo. So I'll add a gesture, right swipe, and the target will be cubes photo. I'll use that same photo flip transition, but this time I'm swiping in the opposite direction, so it should play in reverse.
So I'll click the gear menu and choose Reverse Transition. Now continuing back in this direction, I want to be able to swipe right from the cubes photo to get to glass photo. This already has a left swipe going to dog photo. But I can add a third gesture here, right swipe, target will be glass photo. Transition is photo flip, and that one will also be in reverse. Alright, I think I've got them all set up now. So I'll open up the preview again.
And make sure that I can swipe between all of these photos, in both directions. That's really cool. Now if I click on this photo, I want that to take me back to the watermelon recipe screen. But you can see it actually goes back to the cubed watermelon photo. And that's because I set a back link on these, and the back link goes to whichever screen you came in from. And because I last was on the cubed watermelon photo, it took me back there, rather than back to the watermelon recipe screen.
So let's look at how to fix that. So I'll start on glass photo. When you tap on that photo, the target is Back Link. If I set that directly to watermelon recipe, then I know it will always go to the watermelon recipe screen and never back to the cubes photo. I'll use the Photo Zoom transition and I'll choose Reverse Transition for that one. So this should do the photo zoom, in reverse, back to the watermelon recipe screen. But remember, this photo zoom effect had some issues with the tag application.
So if I click into Edit Transition, we can see there's an unassigned tag. And in a previous video, we saw how to assign these tags. So I'll just quickly go through and assign this to the correct small photo. Test it out. That looks right. So I'll save and exit. And now I'll go to the next one, cubes photo. So I'll set the target of this one to watermelon recipe also. I'm going to make sure that this is set to Reverse Transition.
And then in the Transition menu, I'll choose Photo Zoom, and I'll click right into the transition designer by clicking the Edit shortcut. I've got that same unassigned tag. So I'll assign it to the small version of the cubes photo. Save and exit out of the transition designer, and I've got one more. I'll set the target to watermelon recipe. The transition to Photo Zoom. Make sure to set Reverse Transition, and then I'll click Edit Transition to get into the transition designer and assign that one unassigned tag, this time, to the dog photo.
Looks good, so I'll save and exit and now I think I've got everything set up, so I'll jump back into the preview, swipe through a few of these, I can tap to get back to the watermelon screen. I can tap on any of these to get back to the photo swipe section. And everything seems to be working great.
- What is Flinto?
- Importing designs into Flinto for Mac
- Linking screens
- Designing transitions
- Reusing transitions
- Adding scrolling content
- Previewing and sharing your prototype