1 00:00:01,920 --> 00:00:04,520 So will come back again in this exercise. 2 00:00:04,510 --> 00:00:11,090 You have to develop an application very user can draw one animation pad and then an object gets animated. 3 00:00:11,090 --> 00:00:16,050 True that pass let me show you the final product because I've actually already developed it. 4 00:00:16,120 --> 00:00:18,100 So this is the application that they have. 5 00:00:18,160 --> 00:00:22,150 And in it I have a record unpause unplausible and an animator by then. 6 00:00:22,210 --> 00:00:26,380 So if I want a record I can actually draw upon it whichever way I want. 7 00:00:26,380 --> 00:00:27,870 Let's say this one. 8 00:00:28,300 --> 00:00:30,250 And then I can stop the recording. 9 00:00:30,310 --> 00:00:38,090 I can say animate and the ball gets animated Trudeau's points because I have recorded locations. 10 00:00:38,230 --> 00:00:39,940 So that's kind of what you have to do. 11 00:00:40,120 --> 00:00:48,420 An animation recorder based on where your user taps or their touch move is in a more technical term. 12 00:00:48,550 --> 00:00:49,810 So good luck with it. 13 00:00:49,810 --> 00:00:54,520 Pause the video now give it a shot on your own and then have a look at my solution as well. 14 00:00:54,520 --> 00:00:56,630 I'm going to pause here for just a few seconds 15 00:00:59,870 --> 00:01:00,420 OK. 16 00:01:00,510 --> 00:01:02,660 Let's go ahead and start the next call. 17 00:01:02,730 --> 00:01:11,410 I'm going to going here on a start a new project I'm going to call it the role that animation and it 18 00:01:11,400 --> 00:01:12,930 might do all parts animation. 19 00:01:12,930 --> 00:01:19,230 The first thing I have to do is I have to head to a storyboard and design the basics of the interfacing 20 00:01:19,250 --> 00:01:19,850 here. 21 00:01:19,890 --> 00:01:21,020 So the basics are this. 22 00:01:21,060 --> 00:01:26,750 I have a view that's going to be the animating canvas essentially. 23 00:01:26,760 --> 00:01:32,430 So I'm going to place it here maybe make the background a little bit of a different color such as a 24 00:01:32,430 --> 00:01:35,230 light gray so you can see things easier. 25 00:01:35,400 --> 00:01:42,490 Then I have another view here which I'm going to make it red that's going to be the ball. 26 00:01:42,510 --> 00:01:46,200 Of course you have to change his corner radius in the court. 27 00:01:46,350 --> 00:01:51,400 You could very well may can I be desirable view but I'm not going to bother with that. 28 00:01:51,420 --> 00:01:57,300 So we have the ball in here and then we have to Baden's one by then we'll be 29 00:02:02,230 --> 00:02:11,080 this is essentially my brother then that of course animation is so cool and I'm going to make it black 30 00:02:11,200 --> 00:02:13,500 and I defend Bangon color. 31 00:02:13,630 --> 00:02:20,950 Maybe if it is not recording maybe leave it orange and then I'll have another by then. 32 00:02:21,130 --> 00:02:25,220 And this why that essentially animates based on whatever we have. 33 00:02:25,450 --> 00:02:30,760 So this is called Me and that's all I have to do for my story. 34 00:02:30,880 --> 00:02:34,970 So let's go ahead to assist on the window on all of the outlets here. 35 00:02:35,260 --> 00:02:41,130 So this is going to be combis and that's the new eye view cameras. 36 00:02:41,170 --> 00:02:46,830 This one I'm going to call it the ball or just ball. 37 00:02:46,880 --> 00:02:55,270 This one will be my record by them right by then and then I will have two actions. 38 00:02:55,310 --> 00:03:01,640 The reason I need it to have an outlet for this is because they want to change its color as the animation 39 00:03:01,670 --> 00:03:02,990 as they use their taps on it. 40 00:03:02,990 --> 00:03:06,600 And it's a recording I want it to be read showing that it's a recording. 41 00:03:06,770 --> 00:03:10,130 And if it is not recording I want it to be this color orange. 42 00:03:10,410 --> 00:03:11,960 So I need two actions. 43 00:03:11,960 --> 00:03:18,740 One of them is called Record action and the other one is of course animate action. 44 00:03:18,740 --> 00:03:24,000 And this is probably the last thing that we have to do animate action. 45 00:03:24,410 --> 00:03:25,970 So that's all we had to do. 46 00:03:26,090 --> 00:03:31,820 Let's go back in here and I'm going to fix a few things real quick so we can test their application 47 00:03:31,820 --> 00:03:36,590 at least once I know that everything is kind of working the way we wanted it. 48 00:03:36,980 --> 00:03:42,960 So that's that's now before a test and it's the application for the first time. 49 00:03:42,980 --> 00:03:48,020 Let me write a little bit of code in here and that little bit of code is this the moment the viewer 50 00:03:48,020 --> 00:03:50,980 wants to appear view will appear. 51 00:03:51,200 --> 00:04:01,610 I'm going to say super that the view will appear to do this say Ball dot layer corner radius becomes 52 00:04:01,990 --> 00:04:07,020 32 and then number 32 I got it from being half the size of the board. 53 00:04:07,190 --> 00:04:10,820 Or if you wanted to you could actually say get it from the ball itself. 54 00:04:10,820 --> 00:04:17,410 Ball dot bounds dot size dot divided by two. 55 00:04:17,660 --> 00:04:23,340 So the moment the view will appear we will get some radius on the ball and that's going to help us of 56 00:04:23,440 --> 00:04:32,570 visually recognizing the you eye view which is usually by default a rectangular shape into a a round 57 00:04:32,570 --> 00:04:33,880 circular shape. 58 00:04:33,890 --> 00:04:38,590 So now we have the ball and now we have to worry about the record and animate and everything else. 59 00:04:38,600 --> 00:04:43,140 So the first thing I'm going to have to add some new variables one line is this. 60 00:04:43,140 --> 00:04:50,300 And when I call it recording and that's going to be a boolean which is false by default. 61 00:04:50,300 --> 00:04:55,720 So that's the one that's going to tell us we your current recording or not. 62 00:04:55,910 --> 00:05:03,450 And if we are recording we have to remember the locations that we we went to and for that I'm going 63 00:05:03,460 --> 00:05:11,820 to say I have another volume on this call it looks array and that's going to be an array of. 64 00:05:11,830 --> 00:05:15,080 Points is an empty one by default. 65 00:05:15,110 --> 00:05:19,560 So right the moment the uploads will have a recording and locations. 66 00:05:19,870 --> 00:05:26,180 And now let's go to our record action and in here depending on whether we are recording or not we want 67 00:05:26,180 --> 00:05:29,170 to change the look of the record button. 68 00:05:29,210 --> 00:05:36,950 So I'm going to go ahead and say if re-occurring do something else do something else. 69 00:05:36,960 --> 00:05:42,470 The the thing is that we want to do and we know for a fact if we want to do if we are recording we want 70 00:05:42,470 --> 00:05:44,890 to switch out to be false. 71 00:05:44,930 --> 00:05:46,990 So we don't want to be recording any more. 72 00:05:47,300 --> 00:05:50,970 And if it is on the else you obviously have to change that too. 73 00:05:51,530 --> 00:05:54,380 So that's one part of what we have to do. 74 00:05:54,380 --> 00:05:58,000 The other thing is the look of this Bollen directed by then. 75 00:05:58,130 --> 00:06:04,860 So if we are recording currently and we're going to get it false then I'm going to say this one dark 76 00:06:04,970 --> 00:06:10,140 background color goes to your eye color that orange again. 77 00:06:10,430 --> 00:06:16,640 And if we were not recording and now we're going to be recording I'm going to make this one record. 78 00:06:16,760 --> 00:06:23,390 So we know that we are recording finally in year when we are about to start a new recording. 79 00:06:23,390 --> 00:06:27,500 I'm going to say this array might already have some values in it. 80 00:06:27,590 --> 00:06:31,080 So I'm going to have to set this to and empty it. 81 00:06:31,310 --> 00:06:34,760 So every time the person record then we should get this. 82 00:06:34,760 --> 00:06:39,250 Let's go ahead and see if that's happening the way we're hoping in here. 83 00:06:41,730 --> 00:06:47,930 Record that becomes a red rocket that becomes orange again not the same color but that's OK for now. 84 00:06:47,930 --> 00:06:55,120 So once again I'm saying now we have to think about what happens if we are recording. 85 00:06:55,250 --> 00:07:02,950 If you are recording the idea was that as the user draws over this combis we get iPads and witer memorize 86 00:07:02,960 --> 00:07:07,620 the locations where user has tabs and we use that for animation. 87 00:07:07,640 --> 00:07:14,130 So apparently that has to do with Touch has moved or you could use you eye tap gesture recognizer. 88 00:07:14,270 --> 00:07:21,550 So for here I'm going to go ahead and say I'm going to use the touches move touches move and in touches 89 00:07:21,620 --> 00:07:24,020 move you have to check for two things. 90 00:07:24,170 --> 00:07:26,490 One of them is Arvi reporting. 91 00:07:26,780 --> 00:07:29,970 And the second one is Arvie on this combis view. 92 00:07:30,110 --> 00:07:39,970 So I'm going to go ahead and say let's get the touch first let my touch be touches the heart first and 93 00:07:39,970 --> 00:07:56,920 then I'm going to say if my touch to view is not Chamas floor or if you're not recording then you just 94 00:07:56,920 --> 00:08:03,850 have to return don't need to do anything in here anymore because if one of these two options is not 95 00:08:03,850 --> 00:08:06,580 met it means you are not recording. 96 00:08:06,670 --> 00:08:12,250 We have to be in the recording mode and we have to be touching the cameras anywhere else. 97 00:08:12,250 --> 00:08:13,950 We shouldn't be doing anything. 98 00:08:14,080 --> 00:08:20,270 So once that is taken care of and we know this is not happening we end up here in the next line of the 99 00:08:20,360 --> 00:08:27,130 code the next line of the code is actually rather simple and well go ahead and say this array locations 100 00:08:27,130 --> 00:08:39,640 array Penn street South Koreans vocation which is my touch that location interview can last. 101 00:08:39,640 --> 00:08:45,790 So we're going to say if this didn't happen it means all of those conditions are properly met. 102 00:08:45,790 --> 00:08:52,300 Go ahead and append the new locations into the looks array and is telling me this value is an optional 103 00:08:52,300 --> 00:08:52,600 one. 104 00:08:52,600 --> 00:08:53,920 Are you sure you want to use it. 105 00:08:53,920 --> 00:09:00,070 I'm going to say yes absolutely because I know this is happening and that's actually all we really have 106 00:09:00,070 --> 00:09:00,540 to do. 107 00:09:00,550 --> 00:09:06,730 But if you wanted to could actually offer your users some sort of a visual feedback as to where they 108 00:09:06,730 --> 00:09:08,140 have tapped as well. 109 00:09:08,140 --> 00:09:17,110 And I'm going to do that by drawing some views and when I say let guide you I view which is made in 110 00:09:17,110 --> 00:09:25,420 this cjra Act and the record is going to be 0 0 and I'm going to give it a bit of six and a height of 111 00:09:25,420 --> 00:09:26,280 six. 112 00:09:26,470 --> 00:09:28,170 I'm going to say Guy. 113 00:09:28,480 --> 00:09:36,610 Background color becomes your eye color that maybe yellow and then guy that dot laser dot the corner 114 00:09:36,610 --> 00:09:44,890 radius make it three and then I'm going to have to place it somewhere and that place is where we have 115 00:09:44,900 --> 00:09:45,410 tapped. 116 00:09:45,430 --> 00:09:54,660 So I'm going to say Guy the Dart Center becomes my touch dart location in view compass. 117 00:09:54,970 --> 00:10:01,110 And again we have to do the same thing making sure that this location actually forced our act. 118 00:10:01,690 --> 00:10:08,080 And then I'm going to have to obviously add it to the compass they can muster at some view guide. 119 00:10:08,800 --> 00:10:11,520 So this is completely unnecessary. 120 00:10:11,530 --> 00:10:17,610 It really helps to give your users some sort of a visual feedback so let's see what we have. 121 00:10:19,410 --> 00:10:22,640 So now in here if I try to draw nothing happens. 122 00:10:22,890 --> 00:10:29,700 If I go to record Mart and I try to draw we see those little dots happening in there maybe yellow wasn't 123 00:10:29,700 --> 00:10:32,180 really the best either to be honest. 124 00:10:32,340 --> 00:10:35,840 I want to change real soon but we can see that it's actually working. 125 00:10:36,030 --> 00:10:42,090 And then when we stop we should be able to press the animate button and then we record again I kind 126 00:10:42,090 --> 00:10:48,830 of want to get rid of all of these guys and be able to add new ones a new path essentially. 127 00:10:48,840 --> 00:10:52,070 So let's go ahead and fix both of these in one go. 128 00:10:52,460 --> 00:10:56,280 In here and say first of all that yellow was a terrible choice. 129 00:10:56,490 --> 00:10:58,480 So purple would be a lot better. 130 00:10:58,740 --> 00:11:05,300 And the second thing is this if our cameras already has some guides on it gets rid of them. 131 00:11:05,310 --> 00:11:06,900 Now there are two ways of doing that. 132 00:11:06,900 --> 00:11:12,260 One of them would be to put all of the guides inside an array and remote remove them. 133 00:11:12,270 --> 00:11:14,990 The other one would be a solution such as this one. 134 00:11:15,150 --> 00:11:23,040 So every time that we go to our record in here record action and we're going to begin recording I'm 135 00:11:23,040 --> 00:11:28,550 going to have to clear the camera so as to do that. 136 00:11:28,560 --> 00:11:40,530 I'm going to say Do this for any view any view in Chamas dot Suppe views or any view that is a sub view 137 00:11:40,530 --> 00:11:48,660 of cameras say any view that remove from superheavy or not there is a little bit of a problem with this 138 00:11:48,750 --> 00:11:56,310 and that's something that I'm hoping you guys know this is the red ball is also a soft view of the of 139 00:11:56,310 --> 00:11:58,700 the cameras and we have to account for it. 140 00:11:58,740 --> 00:12:10,800 So I'm going to say if any view is not the ball to this so remove everyone unless they are the ball 141 00:12:10,830 --> 00:12:12,390 which don't remove them. 142 00:12:12,600 --> 00:12:17,940 So let's see where we ended up by all of these by making sure we remove everything every time we begin 143 00:12:17,940 --> 00:12:18,660 the record. 144 00:12:18,900 --> 00:12:26,370 And by making sure that we have a purple color guides that record I'm going to go ahead and that's the 145 00:12:26,370 --> 00:12:30,800 direction like an S stop the record record again. 146 00:12:30,960 --> 00:12:34,170 Everything disappears and we can do everything that we wanted. 147 00:12:34,170 --> 00:12:38,290 Once again except that the ball stays there at all times. 148 00:12:38,580 --> 00:12:45,120 And now if all has gone well and we have drawn this locations properly we should also have them between 149 00:12:45,120 --> 00:12:51,290 the locations array so that locations should be now ready for the animation as well. 150 00:12:51,450 --> 00:12:55,440 So let's go ahead and write the handmade part of this application. 151 00:12:55,460 --> 00:13:01,020 We're coming here and this is actually rather simple I'm going to say let him just like the last time 152 00:13:01,020 --> 00:13:08,190 see a key animation th frame animation the keyframe animation I'm going to give it with a key part and 153 00:13:08,190 --> 00:13:14,120 the key part is he powers of the see a dot position. 154 00:13:14,160 --> 00:13:16,320 So that's really simple. 155 00:13:16,320 --> 00:13:24,900 Then I'm going to go ahead and say animation the values are my locations so they are called locks array 156 00:13:25,200 --> 00:13:26,520 locations. 157 00:13:26,550 --> 00:13:32,400 Now you could choose to have animation that time as well but if you don't give it that time it's going 158 00:13:32,400 --> 00:13:36,810 to evenly distributed which is what they want to happen at this point. 159 00:13:36,900 --> 00:13:38,970 I'm going to say animation the duration. 160 00:13:38,970 --> 00:13:41,070 Make it maybe three seconds. 161 00:13:41,120 --> 00:13:50,280 So we have not taken care of the ball dot dot dot animation tweet and the animation isn't going to be 162 00:13:50,340 --> 00:13:54,320 this one for a kid that doesn't really matter at this point. 163 00:13:54,350 --> 00:13:59,920 And once they had a key or anything to that effect it doesn't really matter. 164 00:14:00,000 --> 00:14:04,910 There are a few things that I want to be careful about before I run this one. 165 00:14:04,950 --> 00:14:13,500 One of them is this If user hasn't chosen sufficient number of locations let's say the bare minimum 166 00:14:13,500 --> 00:14:14,440 is obviously too. 167 00:14:14,460 --> 00:14:17,520 If you have less than two that there's no animation to be made. 168 00:14:17,700 --> 00:14:19,330 And you can actually expand on that. 169 00:14:19,350 --> 00:14:23,400 You can say that your user has to choose at least four locations. 170 00:14:23,530 --> 00:14:25,980 But I'm going to stick to the bare minimum now. 171 00:14:26,140 --> 00:14:29,150 I'm going to see if it looks great. 172 00:14:29,150 --> 00:14:34,350 That count is a smaller than two which means one or zero return. 173 00:14:34,440 --> 00:14:35,940 Don't do anything in here. 174 00:14:36,150 --> 00:14:45,120 Or better you have to give user an indication that something is wrong and you have to choose more locations 175 00:14:45,420 --> 00:14:46,640 or something to that effect. 176 00:14:46,860 --> 00:14:48,300 That's part one of the things. 177 00:14:48,360 --> 00:14:55,080 And the other one is I'm going to say you shouldn't be able to tap the animate if the record is on. 178 00:14:55,080 --> 00:14:59,880 So because of that I'm going to go ahead and say we could do this in two different ways. 179 00:14:59,880 --> 00:15:03,730 One is that we could disable this for then while you're recording. 180 00:15:03,900 --> 00:15:11,520 Or two could actually go in here and say or if we are recording return don't do anything because we 181 00:15:11,520 --> 00:15:13,020 are still recording. 182 00:15:13,290 --> 00:15:18,220 So that's I think all we had to do in here is go ahead and run this application. 183 00:15:18,330 --> 00:15:23,970 If it all works as I drove for the cameras with the touches moved we remember the locations and then 184 00:15:23,970 --> 00:15:34,950 we can animated Reichelt go do this like a you know more record animates and that's not it works exactly 185 00:15:34,950 --> 00:15:38,820 the way we want it record again and this time right. 186 00:15:38,850 --> 00:15:47,370 Number three and stop and animate over number three very funky animation you're using can do whatever 187 00:15:47,370 --> 00:15:48,470 they want to do with it. 188 00:15:48,780 --> 00:15:50,580 And I think that's about that. 189 00:15:50,580 --> 00:15:52,300 I will see you in the next lesson.