1
00:00:00,600 --> 00:00:01,920
Hey, everyone, and welcome back.

2
00:00:02,070 --> 00:00:09,180
Last time we talked about just the different types of properties that famous smart enemy actually supports,

3
00:00:09,210 --> 00:00:13,380
that being scale, position, capacity, rotation.

4
00:00:13,380 --> 00:00:20,010
And Phil, now I'm going to show you a couple of different prototype examples of that actually being

5
00:00:20,010 --> 00:00:23,370
used, I guess you could say in real life examples.

6
00:00:24,120 --> 00:00:28,970
Let me show you the different types of ways you can basically use smart enemy.

7
00:00:30,150 --> 00:00:33,090
So over here we have a little transition built.

8
00:00:33,090 --> 00:00:42,570
And the goal here is to when you click on this card, it will show this option and then we can click

9
00:00:42,570 --> 00:00:43,730
that to delete it.

10
00:00:43,920 --> 00:00:48,090
And then this portion will kind of enemy upwards.

11
00:00:48,750 --> 00:00:56,220
Think about if you had maybe like a mailbox and you wanted to delete one of your mail items or like

12
00:00:56,310 --> 00:00:57,150
one of those cards.

13
00:00:57,150 --> 00:01:01,810
And once you do that, the rest of the cards kind of just push upwards.

14
00:01:02,130 --> 00:01:04,230
That's essentially what we're building here right now.

15
00:01:04,240 --> 00:01:10,570
So the way to do that is you need to create three different screens for this type of animation.

16
00:01:10,590 --> 00:01:12,150
That's what I've gone ahead and done.

17
00:01:13,470 --> 00:01:17,870
And if we just click on our prototype time that we have here, so we've already done that.

18
00:01:18,120 --> 00:01:21,480
I'm just going to click the screen just to show you what I've done.

19
00:01:21,480 --> 00:01:23,130
So I've selected this object.

20
00:01:23,130 --> 00:01:25,650
So this called Rectangle 17 over here.

21
00:01:25,650 --> 00:01:28,050
And it's going to match this one here.

22
00:01:28,050 --> 00:01:30,470
That's also called rectangle 17.

23
00:01:30,480 --> 00:01:36,540
So naming conventions are very important with smart made because if this was named something else,

24
00:01:36,990 --> 00:01:38,640
nothing would necessarily happen.

25
00:01:38,640 --> 00:01:44,460
So we wouldn't get like a fill animation when that changes and we wouldn't also get it to disappear.

26
00:01:44,730 --> 00:01:47,220
It removes itself from this screen as well.

27
00:01:47,250 --> 00:01:55,740
So what I've done here is I've just taken this prototype node and connected it to this screen and I've

28
00:01:55,740 --> 00:01:59,370
selected on top navigate to this screen.

29
00:01:59,370 --> 00:02:00,780
So it's just called transition.

30
00:02:00,780 --> 00:02:08,220
I know poor naming by it's just for the sake of an example and out of my animation menu, you can select

31
00:02:08,220 --> 00:02:09,750
instant, you can select dissolve.

32
00:02:09,760 --> 00:02:14,730
But what we want to do is we want to select smart animate and that's what we've done.

33
00:02:15,510 --> 00:02:21,360
So we have smart animation selected over here and you can select the easy thing you can do.

34
00:02:21,360 --> 00:02:23,760
EASO is and you can do linear.

35
00:02:23,760 --> 00:02:31,320
I find linear looks kind of fake when we actually design animations and just different type of motion

36
00:02:31,320 --> 00:02:32,160
in general.

37
00:02:32,520 --> 00:02:34,890
Gravity also kind of applies.

38
00:02:35,820 --> 00:02:42,630
You need to think about how things kind of gently kind of ease in or how gently they ease out.

39
00:02:43,110 --> 00:02:46,500
And if things are way too linear, it kind of looks fake.

40
00:02:46,710 --> 00:02:49,140
I like to kind of just apply one of these to it.

41
00:02:49,590 --> 00:02:50,520
See what works for you.

42
00:02:50,520 --> 00:02:55,050
I have is out in this instance, so that's what I have applied.

43
00:02:55,050 --> 00:02:57,780
And then you can apply the animation duration over here.

44
00:02:57,780 --> 00:03:00,420
So I have a set of five hundred milliseconds.

45
00:03:00,690 --> 00:03:02,310
I feel like that's pretty good.

46
00:03:02,910 --> 00:03:04,320
Just a time in general.

47
00:03:04,560 --> 00:03:08,970
You don't want to have something that is too quick or something that's too slow.

48
00:03:08,970 --> 00:03:14,910
I think the optimal speed is in around like two hundred to five hundred milliseconds stay within that

49
00:03:14,910 --> 00:03:17,610
kind of limit for these types of animations.

50
00:03:17,970 --> 00:03:19,710
Just don't want to keep your users waiting.

51
00:03:19,710 --> 00:03:21,030
So let's see what this looks like.

52
00:03:22,900 --> 00:03:25,150
Let's go right to our prototyp.

53
00:03:27,920 --> 00:03:32,840
So we're just going to restart so I can see my hotspot right there and this is what's going to happen.

54
00:03:33,200 --> 00:03:34,080
So we just have a film.

55
00:03:34,550 --> 00:03:34,870
That's it.

56
00:03:35,000 --> 00:03:38,580
So I've clicked this and that card has been highlighted in some way.

57
00:03:38,810 --> 00:03:39,590
Let's jump back.

58
00:03:39,770 --> 00:03:47,060
And the next animation is I'm going to click that same object and I'm going to attach it to this screen.

59
00:03:47,240 --> 00:03:49,070
And now it's the same thing that I have here.

60
00:03:49,070 --> 00:03:51,680
I have anime, smart anime as the animation.

61
00:03:51,920 --> 00:03:56,300
I have the Ezo and I have five hundred milliseconds as my duration.

62
00:03:56,300 --> 00:04:00,530
And this actually will not appear on this screen at all.

63
00:04:00,890 --> 00:04:03,530
So I don't have a rectangle 17, as you can see.

64
00:04:05,000 --> 00:04:07,110
So let's see what that all looks like together.

65
00:04:07,160 --> 00:04:08,150
So I'm going to click.

66
00:04:09,630 --> 00:04:10,350
To click it again.

67
00:04:11,930 --> 00:04:18,240
And there you go, simple transition, if you provide enough content for something like this, it will

68
00:04:18,260 --> 00:04:19,510
look really nice.

69
00:04:19,790 --> 00:04:24,200
So if you actually create cards that have content, that's relative to what you're doing, not just

70
00:04:24,200 --> 00:04:31,250
black box like I have, but that's just the easiest way to make this type of animation.

71
00:04:31,970 --> 00:04:32,780
Now, let's go back.

72
00:04:34,660 --> 00:04:38,320
Well, I'm going to do is I'm just going to drag this over here.

73
00:04:39,690 --> 00:04:49,020
So I have this now another thing that you can do is instead of actually just using smart anime, you

74
00:04:49,020 --> 00:04:51,990
can use a different type of animation like APUSH.

75
00:04:53,560 --> 00:04:59,110
I mean, just click that, so let me show you what this looks like so you can have a push animation.

76
00:05:00,530 --> 00:05:01,140
That's nice.

77
00:05:01,160 --> 00:05:07,070
I mean, we're already thinking about screen transitions, but the problem is that you see the navigation

78
00:05:07,550 --> 00:05:15,620
moves and everything kind of moves like even the title and that kind of stuff shouldn't necessarily

79
00:05:15,620 --> 00:05:16,630
move in our instance.

80
00:05:16,640 --> 00:05:19,280
I mean, the title may move in another application or.

81
00:05:19,310 --> 00:05:23,060
Yeah, another example, but the navigation always stay the same.

82
00:05:23,090 --> 00:05:29,970
So this is how we keep the navigation in its place or any other layers in their place.

83
00:05:30,320 --> 00:05:35,650
So what I'm gonna do is I'm going to select that same animation I have that also selected here.

84
00:05:36,170 --> 00:05:38,030
So I'm going to do is I'm just going to.

85
00:05:40,660 --> 00:05:41,770
Let me remove this.

86
00:05:42,860 --> 00:05:45,710
We're going to actually start from scratch.

87
00:05:47,270 --> 00:05:53,900
So I'm going to actually just select this navigation item and I'm just going to attach it to the screen.

88
00:05:55,160 --> 00:05:59,030
And I'm going to not click smart animate, but I'm going to click push.

89
00:06:00,100 --> 00:06:04,540
I'm going to leave the the easing the same way, I'm going to leave the duration the same way, and

90
00:06:04,540 --> 00:06:08,580
I can see a little kind of preview of what that animation looks like.

91
00:06:08,890 --> 00:06:12,580
So I have my second screen is be coming in and pushing out screen.

92
00:06:13,060 --> 00:06:14,050
If I wanted to.

93
00:06:14,410 --> 00:06:17,500
I can add something similar like that where it just kind of overlays.

94
00:06:17,500 --> 00:06:19,720
But let's just stick to push for now.

95
00:06:20,290 --> 00:06:21,610
And you'll notice this option here.

96
00:06:21,610 --> 00:06:23,740
That's a smart animation, matching layers.

97
00:06:23,740 --> 00:06:32,200
And what that means is all the layers with the same name will be animated within this entire animation

98
00:06:32,320 --> 00:06:33,490
that we're building out here.

99
00:06:34,530 --> 00:06:40,380
So let me show you what that means, so I've clicked that so you can see animate layers with the same

100
00:06:40,380 --> 00:06:46,620
name instead of using the transition above, instead of having the navigation being pushed out of the

101
00:06:46,620 --> 00:06:49,770
frame, it will just animate to whatever is over here.

102
00:06:49,780 --> 00:06:50,730
So let's see.

103
00:06:50,730 --> 00:06:52,190
We have a couple of things going on.

104
00:06:53,220 --> 00:06:54,330
So we have this.

105
00:06:54,330 --> 00:06:56,100
It's called rectangle 15.

106
00:06:56,100 --> 00:06:57,700
We have this ellipse for you.

107
00:06:57,870 --> 00:06:59,450
And this is Ellipse four as well.

108
00:06:59,670 --> 00:07:01,680
So we're going to see these different things animate.

109
00:07:01,680 --> 00:07:05,460
And I even think I made this square over here the same as well.

110
00:07:05,460 --> 00:07:07,360
So rectangle 16, rectangle 16.

111
00:07:07,710 --> 00:07:13,910
So let's take a look at what that animation looks like after we just connect this third screen.

112
00:07:13,920 --> 00:07:15,050
So I'm going to do the same thing.

113
00:07:15,060 --> 00:07:16,740
We're just going to push it over there.

114
00:07:17,340 --> 00:07:18,450
Let's match our ezine.

115
00:07:18,450 --> 00:07:25,770
So I have five hundred milliseconds and on this one I'm going to have five hundred milliseconds.

116
00:07:25,770 --> 00:07:26,760
Perfect.

117
00:07:27,970 --> 00:07:34,870
And this will link back there and see now it's starting to just kind of grab the exact same animations

118
00:07:34,870 --> 00:07:39,310
that I have applied earlier, so that makes things so easy.

119
00:07:39,880 --> 00:07:41,020
I love that figure.

120
00:07:41,020 --> 00:07:41,620
Does this.

121
00:07:42,310 --> 00:07:44,930
This looks pretty complicated, but this is our flow.

122
00:07:44,950 --> 00:07:46,040
Let's take a look at what it looks like.

123
00:07:46,570 --> 00:07:48,040
So we're going to just go play that.

124
00:07:53,780 --> 00:07:59,300
So we'll see right now we don't have a push in or push out, but we have things animating, you'll even

125
00:07:59,300 --> 00:08:04,010
notice the little kind of micro interactions and we're going to get into that in more detail later.

126
00:08:04,430 --> 00:08:09,020
But we can see that things are staying put where we want them.

127
00:08:09,030 --> 00:08:11,210
So let's take another look.

128
00:08:11,420 --> 00:08:15,050
And we're going to do here is we're actually going to rename this to

129
00:08:17,930 --> 00:08:22,670
we'll call it square two and we'll call this circle three.

130
00:08:24,240 --> 00:08:33,600
And what's caused everyone so that way we will actually get some sort of animation, so we'll just call

131
00:08:33,600 --> 00:08:43,430
this square, we'll call this rounded square and we'll call this a circle.

132
00:08:44,400 --> 00:08:47,580
And what we're going to do is we're going to name these and it's like them all.

133
00:08:47,580 --> 00:08:53,400
I'm going to select command are to rename and I'm just going to say text and a number.

134
00:08:53,730 --> 00:08:58,470
So that way they'll all be different and perfect.

135
00:08:58,480 --> 00:08:59,660
Actually, that looks good.

136
00:08:59,670 --> 00:09:01,340
And let's see what that animation looks like now.

137
00:09:01,350 --> 00:09:03,090
So it should update within there.

138
00:09:04,330 --> 00:09:05,250
Let's just restart.

139
00:09:05,370 --> 00:09:10,020
So now we actually get actual, like animation of the screen changing.

140
00:09:11,170 --> 00:09:13,330
While we keep our navigation the same.

141
00:09:17,600 --> 00:09:24,250
Little animation we got here so we can actually go in and make these changes where we need to.

142
00:09:25,580 --> 00:09:32,300
In terms of how that animation looks, I'm talking more so about the little details of how things slide

143
00:09:32,300 --> 00:09:36,650
in in Slidell, we just want to keep that kind of stuff consistent because everything constantly sweeps

144
00:09:36,650 --> 00:09:37,430
in from the right.

145
00:09:38,330 --> 00:09:42,260
And when you're switching between navigation items, it gets a little confusing.

146
00:09:42,260 --> 00:09:49,930
But that is essentially how you keep things in place while you are actually switching items on a screen.

147
00:09:50,630 --> 00:09:55,040
So let's go even further down and we're going to kind of put these two examples together.

148
00:09:56,370 --> 00:09:58,410
So we have a screen here.

149
00:09:59,160 --> 00:10:01,650
Let's actually just delete the.

150
00:10:05,650 --> 00:10:06,560
What do we have here?

151
00:10:06,580 --> 00:10:11,030
So this is going to be OK.

152
00:10:11,050 --> 00:10:12,250
That's that's good.

153
00:10:12,950 --> 00:10:14,560
So that's just going to smart enemy.

154
00:10:14,560 --> 00:10:18,400
And what we're going to have is we're going have the navigation stay in place, but we're going to have

155
00:10:18,400 --> 00:10:21,470
that same kind of card and we're going to actually have a drag.

156
00:10:21,730 --> 00:10:23,440
So what happens here is.

157
00:10:24,660 --> 00:10:32,310
After a delay, so this is to mimic like a mailbox once again, so I'm going to proceed to the screen

158
00:10:32,310 --> 00:10:36,620
and I've selected over here and I've selected after DeLay as my interaction.

159
00:10:36,840 --> 00:10:41,930
So after one second or a thousand milliseconds, we're going to navigate to the screen.

160
00:10:42,180 --> 00:10:45,060
So that means we're going to have an item pop up at the top.

161
00:10:46,470 --> 00:10:50,610
And everything is going to animate down, so we have a selected and a smart animation.

162
00:10:51,710 --> 00:11:00,950
So kind of like what's happening here and then what we're going to do is we are going to drag so on

163
00:11:00,950 --> 00:11:03,730
drag to left, we're going to smart animals as well.

164
00:11:04,550 --> 00:11:08,660
We are going to drag this delete button in from the right.

165
00:11:09,510 --> 00:11:10,470
And once we do that.

166
00:11:11,830 --> 00:11:19,320
After a delay, after we've deleted, we will remove this item and the rest of the cards will jump up.

167
00:11:19,870 --> 00:11:22,140
So let's see what this all looks like together.

168
00:11:23,160 --> 00:11:24,660
So I'm going to play.

169
00:11:26,300 --> 00:11:29,300
So I'm going to do is click this.

170
00:11:30,770 --> 00:11:35,930
There's our item, so if you can catch that, let's do one more time, so in a click and let's wait

171
00:11:35,930 --> 00:11:38,270
for that delay and then items should pop up from the top.

172
00:11:40,030 --> 00:11:43,090
There it is, and I can see that I can click this item.

173
00:11:44,200 --> 00:11:48,540
And the great thing about stigma is it kind of notices when you're like 50 percent of the way.

174
00:11:48,550 --> 00:11:51,640
So if I release over here, that delete will just slide.

175
00:11:51,670 --> 00:11:57,670
If I release over here, they'll just go back so we can make some really nice micro interactions and

176
00:11:57,670 --> 00:11:58,570
animations like this.

177
00:11:59,230 --> 00:12:02,890
I'm just going to swipe it and then we're going to wait for the other delay, which will actually delete

178
00:12:03,010 --> 00:12:03,160
them.

179
00:12:03,160 --> 00:12:04,210
So I'm going to swipe delete.

180
00:12:05,810 --> 00:12:14,420
And it's gone now we can go in and say, OK, that that took a little too long for our actual animation.

181
00:12:15,910 --> 00:12:17,770
So let's go back.

182
00:12:22,400 --> 00:12:25,480
So we have our SWIP and it should be much quicker.

183
00:12:26,730 --> 00:12:28,950
So we can even go even further.

184
00:12:29,580 --> 00:12:35,930
Let's do that again and let's go to two hundred milliseconds, because I think once you delete, something

185
00:12:35,940 --> 00:12:37,860
should be pretty instantaneous.

186
00:12:38,550 --> 00:12:40,440
So let's go through that animation.

187
00:12:41,420 --> 00:12:42,050
Boom.

188
00:12:42,080 --> 00:12:43,280
That's beautiful.

189
00:12:43,310 --> 00:12:48,280
I'm going to delete that and it's gone, so, I mean, we could probably even trim that down a bit more,

190
00:12:48,290 --> 00:12:50,600
but let's do it one more time and see what it looks like.

191
00:12:51,800 --> 00:12:56,370
Nice slide, delete and everything kind of pushes its way back up.

192
00:12:56,690 --> 00:13:02,420
So this is a great way for you to prototype different types of animations in the application that you

193
00:13:02,420 --> 00:13:05,000
may have with smart enemy.

194
00:13:05,020 --> 00:13:06,700
You don't even need to leave Fatemah.

195
00:13:06,710 --> 00:13:10,200
You can just create pages of different types of interactions.

196
00:13:10,220 --> 00:13:15,290
I mean, I wouldn't necessarily go ahead and create one massive prototype with all these different,

197
00:13:15,290 --> 00:13:18,410
like animations and micro interactions.

198
00:13:18,410 --> 00:13:19,450
Don't go ahead and do that.

199
00:13:19,460 --> 00:13:22,880
It's going to take you so long to just put together.

200
00:13:22,880 --> 00:13:26,150
And I mean, if you change one thing, then you may have to go back and rework.

201
00:13:26,510 --> 00:13:31,220
What I typically do is if I have a like an interaction just like this, they want to showcase, I'll

202
00:13:31,220 --> 00:13:36,410
make a new page for it and I'll just stick to this one page and I'll have whatever screens I need in

203
00:13:36,410 --> 00:13:42,710
different variations of those screens in order for me to actually go ahead and present that to whoever

204
00:13:42,710 --> 00:13:49,910
I'm presenting to, whether that be the product team alone, whether that be clients, keep things separate

205
00:13:49,910 --> 00:13:50,770
to keep them clean.

206
00:13:50,780 --> 00:13:53,420
Don't go making crazy animations like that.

207
00:13:53,420 --> 00:13:59,150
In our next video, I'm going to show you how I applied Smart Enemy to that that other app I built over

208
00:13:59,150 --> 00:13:59,510
here.

209
00:13:59,840 --> 00:14:04,670
So I'll show you all the different things that I did to kind of put this together and make things look

210
00:14:04,670 --> 00:14:07,550
really realistic in terms of motion and animation.

211
00:14:07,550 --> 00:14:09,150
So stay tuned.

212
00:14:09,170 --> 00:14:12,470
Let's jump into our next video and I'll show you how I did that.