1
00:00:00,090 --> 00:00:05,970
The previous lesson we saw how we can create clones of our existing elements as soon as we click on

2
00:00:05,970 --> 00:00:11,130
them, so there's a few other things that we want to add in and we want to add the ability that we have

3
00:00:11,160 --> 00:00:13,280
some type of movement on these elements.

4
00:00:13,560 --> 00:00:19,500
So, again, selecting that object, we're going to set a value for moves using math.

5
00:00:19,620 --> 00:00:24,590
We can do math floor and let's do math randoms.

6
00:00:24,600 --> 00:00:28,660
We've got them each randomized the number of movements that we can make.

7
00:00:28,680 --> 00:00:31,320
So up to twenty five movements we're going to allow them to make.

8
00:00:33,070 --> 00:00:38,890
And then after we've given a random number for the moves are going to set up the interval, so we're

9
00:00:38,890 --> 00:00:46,090
going to do a set interval and this interval is going to invoke a function, call it mover, and it's

10
00:00:46,090 --> 00:00:48,470
going to run every twenty five milliseconds.

11
00:00:49,240 --> 00:00:50,590
Now let's create that function.

12
00:00:52,700 --> 00:00:53,820
And I'll make this bigger.

13
00:00:54,280 --> 00:00:55,970
This is going to be a fairly long.

14
00:00:57,200 --> 00:01:07,280
So we'll check to see if the Holder object, so it's always referring to that Holder one moves is less

15
00:01:07,280 --> 00:01:09,070
than or equal to zero.

16
00:01:11,580 --> 00:01:17,460
And if it is, then we want to clear the interval, so that means that it's over and we want to clear

17
00:01:17,460 --> 00:01:19,860
that interval so that holder.

18
00:01:21,730 --> 00:01:22,510
Object.

19
00:01:23,840 --> 00:01:30,650
IMT, so the same one that we created up there, so this gives us a way out of our element, our intervale.

20
00:01:31,760 --> 00:01:40,340
Also, we want to update our holder object moves value and we can decrease that.

21
00:01:41,870 --> 00:01:49,070
So decreasing that and again, selecting that Holder object, we can update so set up some variables

22
00:01:49,370 --> 00:01:51,980
where we've got our start y position.

23
00:01:54,440 --> 00:01:59,830
So update that by 10:00 and sending those positions, we should do that as well up here.

24
00:02:00,660 --> 00:02:07,400
So within our Holder object so that we have a start position to reference, this is where our element

25
00:02:07,400 --> 00:02:07,940
starts.

26
00:02:07,950 --> 00:02:13,370
So the exposition and using the parent, the element offset left.

27
00:02:14,460 --> 00:02:21,750
For our horizontal and then we also need to set a vertical so start y and using that elements we can

28
00:02:21,750 --> 00:02:22,710
use offset.

29
00:02:23,880 --> 00:02:31,500
Top to determine where the offset top position and remember from the last lesson that these are going

30
00:02:31,500 --> 00:02:32,580
to be numeric value.

31
00:02:32,620 --> 00:02:36,900
So we don't have to pass them as integers and we can just use them as numbers.

32
00:02:39,360 --> 00:02:45,510
And we can also update our y position so we can make it go diagonally across, or it could just make

33
00:02:45,900 --> 00:02:48,210
this one a little bit less of an increment.

34
00:02:50,130 --> 00:02:58,050
So taking our holder object to the next step we need to do is update our style properties for that particular

35
00:02:58,050 --> 00:03:06,230
element and we've got our Holder object start X or start Y position.

36
00:03:06,870 --> 00:03:09,860
And don't forget to add the pics, otherwise it's not going to work.

37
00:03:10,620 --> 00:03:15,530
And this one is going to be updating the style left position.

38
00:03:16,920 --> 00:03:20,010
And this is going to be X is going to be moving along the horizontal.

39
00:03:21,580 --> 00:03:23,910
So now let's try that out and see what happens.

40
00:03:23,930 --> 00:03:28,480
So we see we've got these elements that are falling at random.

41
00:03:32,860 --> 00:03:38,710
Places and this way, you can clearly distinguish that you're producing multiple ones.

42
00:03:41,890 --> 00:03:46,710
So that's how you can create some type of animation and movement for the elements that you're cloning,

43
00:03:46,960 --> 00:03:49,510
so it's not all stacking one on top of the other.

44
00:03:49,690 --> 00:03:52,240
So now we've got more of a randomized effect here.

45
00:03:52,810 --> 00:03:57,270
So let's also in the next lesson, we're going to make these elements, Digable.

46
00:03:57,280 --> 00:04:00,940
So whenever we go on top of them will make it so that we can drag them.

47
00:04:01,240 --> 00:04:06,790
So that's coming up in the next lesson, because we already have that cursor where we've updated the

48
00:04:06,790 --> 00:04:10,670
cursor style on top of these elements as we're creating them.

49
00:04:10,930 --> 00:04:15,160
So giving them the fact that we have the ability to drive them.

50
00:04:16,300 --> 00:04:18,180
So let's add that in in the next lesson.

51
00:04:18,190 --> 00:04:24,460
So go ahead and build out your interval and update the position of the elements that are created.