1
00:00:00,550 --> 00:00:01,020
All right.

2
00:00:01,060 --> 00:00:06,250
Next up, we're going to learn about animation directions, and you can see we can not only enemy something

3
00:00:06,250 --> 00:00:10,750
changes color, but it could also animate its direction, which direction the animation is going to

4
00:00:10,750 --> 00:00:11,370
take place.

5
00:00:12,460 --> 00:00:18,250
Now, then, the only direction property specifies what an animation should be performed forwards and

6
00:00:18,280 --> 00:00:20,740
so, you know, example for forwards.

7
00:00:23,040 --> 00:00:32,100
Or backwards then or in alternate circles, so let's jump to access us again and step in here, comment

8
00:00:32,100 --> 00:00:33,720
of animation direction.

9
00:00:37,950 --> 00:00:45,060
OK, now let's get started by creating a keyframe again, so at Keyframe, going to name this animation

10
00:00:45,060 --> 00:00:45,690
Direxion.

11
00:00:49,790 --> 00:00:51,900
And we don't need our.

12
00:00:55,730 --> 00:01:01,340
Point the market now is going to start with zero percent.

13
00:01:05,360 --> 00:01:09,100
And we're going to start with the background color of red.

14
00:01:09,590 --> 00:01:13,440
And let's actually use hash hexadecimal number.

15
00:01:13,510 --> 00:01:16,730
So what would be a red flag?

16
00:01:17,110 --> 00:01:20,060
I have no idea as to a red and.

17
00:01:20,060 --> 00:01:22,220
Oh, it was so right.

18
00:01:24,000 --> 00:01:28,030
It's actually F, F and four zeros, good to know F.

19
00:01:28,770 --> 00:01:36,810
F, F and four zeros just in order to show you that also working with hexadecimal numbers and is going

20
00:01:36,810 --> 00:01:43,230
to go from in the zero position at zero percent is going to be at zero pixels.

21
00:01:43,410 --> 00:01:48,690
The left and the top is going to be also zero pixels.

22
00:01:50,000 --> 00:01:57,430
OK, now at 25 percent, because we're going to have wait a second, we're going to have one at 24.

23
00:01:57,440 --> 00:02:00,980
Let me actually take them all out to 25.

24
00:02:02,120 --> 00:02:04,190
Then we're going to have one at 50.

25
00:02:07,460 --> 00:02:09,170
They wanted 75.

26
00:02:10,780 --> 00:02:13,090
And one at 100.

27
00:02:15,090 --> 00:02:17,020
OK, well, there we go.

28
00:02:17,790 --> 00:02:26,060
So next up, 25, this is going and just going to take this and change them.

29
00:02:26,070 --> 00:02:33,400
So let's see what kind of hexadecimal is a yellow F four times F and zero zero.

30
00:02:34,050 --> 00:02:35,850
So hash F F.

31
00:02:37,310 --> 00:02:46,320
And zero zero and zero, but the position now will be two hundred pixels, just a two hundred one hundred

32
00:02:46,790 --> 00:02:47,090
eleven.

33
00:02:47,450 --> 00:02:57,200
So 200 to the left key less to the 50 percent, which is going to be a blue color, some blue.

34
00:02:59,140 --> 00:02:59,980
Zero zero zero.

35
00:03:00,910 --> 00:03:12,970
OK, so zero four times zero and if the minutes of Togo and a 50 percent is also going to be to the

36
00:03:12,970 --> 00:03:16,270
top 200 pixels or 200 pixel from the left and 200 pixels.

37
00:03:17,350 --> 00:03:18,190
From the top.

38
00:03:19,310 --> 00:03:29,600
Then we have two more with a green collar and 75 percent green, zero zero eight thousand.

39
00:03:31,810 --> 00:03:39,910
Yes, zero zero a thousand obviously don't have to know them, we do not have to know them.

40
00:03:41,560 --> 00:03:45,790
Obviously, you do not have to know the hexadecimal numbers from memory.

41
00:03:45,940 --> 00:03:51,790
Just look them up and that are now going to change this 75 percent.

42
00:03:51,790 --> 00:03:52,910
So it's going to go something.

43
00:03:52,920 --> 00:03:59,530
I think probably you can see my mom said this is going to zero, then it's going to go down that a 50

44
00:03:59,560 --> 00:04:01,540
percent is going to go to.

45
00:04:01,540 --> 00:04:02,050
Right.

46
00:04:02,170 --> 00:04:05,500
And still be 200 from the top and call it for the right.

47
00:04:06,130 --> 00:04:11,650
Then at 75, which is zero 25 down then.

48
00:04:11,650 --> 00:04:12,190
So.

49
00:04:12,280 --> 00:04:13,540
And so I exactly.

50
00:04:14,020 --> 00:04:16,650
It's going to up to 75 and to 100.

51
00:04:17,230 --> 00:04:21,760
So 75 it needs to go left.

52
00:04:21,760 --> 00:04:23,140
Needs to be at zero.

53
00:04:24,430 --> 00:04:34,000
And at 100 percent, it's going to go back to its initial position that's going to be and I actually

54
00:04:34,000 --> 00:04:35,520
just think this Capitán.

55
00:04:38,700 --> 00:04:40,110
And we're missing something.

56
00:04:40,140 --> 00:04:42,150
What, up percent, percent?

57
00:04:43,820 --> 00:04:44,380
There we go.

58
00:04:45,380 --> 00:04:47,810
OK, now we got our keyframe ready.

59
00:04:48,320 --> 00:04:56,930
Let's also take a class from here, animation direction this time that's targeted within our CNN.

60
00:04:59,320 --> 00:05:04,450
Scroll down a bit, so class animation direction, and we're going to, again, give it the width of

61
00:05:04,450 --> 00:05:10,660
one hundred percent, the height of 100 percent percent pixels.

62
00:05:10,680 --> 00:05:11,410
Sorry about that.

63
00:05:12,490 --> 00:05:23,470
Pixels that in too many percentages, percentages, pixels, background, color, red and all you need

64
00:05:23,470 --> 00:05:26,410
now to position it relative.

65
00:05:27,510 --> 00:05:34,710
OK, so it needs to have a position in the universe before if you don't declare the position, it doesn't

66
00:05:34,710 --> 00:05:40,800
know where it is, it can either position something relative, absolute fixed or sticky.

67
00:05:41,280 --> 00:05:45,180
OK, now let's give this the animation name.

68
00:05:47,020 --> 00:05:52,590
Animation name, and I'm going to call it animation one, but the name this animation direction.

69
00:05:52,630 --> 00:05:54,310
OK, this confusing.

70
00:05:57,540 --> 00:06:05,040
But nevertheless, animation direction is the animation name and the animation, the duration, it's

71
00:06:05,040 --> 00:06:07,020
going to be four seconds.

72
00:06:07,260 --> 00:06:07,710
OK.

73
00:06:08,950 --> 00:06:15,670
Now, the animation, the action property can have the following values and step in animation direction,

74
00:06:15,670 --> 00:06:18,820
not direction, direction they go.

75
00:06:19,660 --> 00:06:26,050
And if it let it at normal, which is actually the default value, it will play as no loss of force.

76
00:06:26,380 --> 00:06:27,880
So let's hit save.

77
00:06:28,350 --> 00:06:29,560
Let's take a look at this.

78
00:06:29,560 --> 00:06:30,490
We are.

79
00:06:32,610 --> 00:06:39,990
Here, animation, actually, let's refresh, so it's going to go jump up and pump, OK, one time.

80
00:06:42,230 --> 00:06:45,780
Now, let's do a reverse of this, so let's check it out again.

81
00:06:45,830 --> 00:06:49,400
This is the normal right, down, left and up.

82
00:06:50,150 --> 00:06:51,530
I think this is now obvious.

83
00:06:51,560 --> 00:06:54,760
Now, let's do the same thing, but in the reverse direction.

84
00:06:55,160 --> 00:06:57,580
So I'm just going to change this certainly within.

85
00:06:57,800 --> 00:06:58,150
Yeah.

86
00:06:58,620 --> 00:07:01,100
And to it in and change it to reverse.

87
00:07:01,250 --> 00:07:05,470
And obviously the animation is played out in the reverse direction.

88
00:07:05,480 --> 00:07:07,070
So let's take a look at this.

89
00:07:08,060 --> 00:07:09,320
Didn't I save?

90
00:07:14,150 --> 00:07:15,260
This is going down.

91
00:07:16,330 --> 00:07:23,410
Right up and left, instead of going right down, left up is going now.

92
00:07:24,280 --> 00:07:27,220
Down, right, up, left.

93
00:07:28,380 --> 00:07:35,400
OK, now we could also type in alternate properties and changes to alternate.

94
00:07:40,210 --> 00:07:47,440
And what this will do is that it will play the animation for us first and then backwards, but I need

95
00:07:47,440 --> 00:07:49,690
to have something that counts.

96
00:07:49,990 --> 00:07:53,110
Animation iteration counts.

97
00:07:53,170 --> 00:07:54,850
How often should this happen?

98
00:07:55,070 --> 00:07:58,960
Let's do a two and let's refresh.

99
00:07:58,990 --> 00:08:06,330
It's going to go so and so in the right direction that it's going to go back in another direction.

100
00:08:06,580 --> 00:08:09,580
If I would only leave it at count one.

101
00:08:10,800 --> 00:08:19,710
The alternate, uh, iteration count, let's refresh, it's going to go right down, left up, that's

102
00:08:19,710 --> 00:08:20,400
going to stay there.

103
00:08:21,150 --> 00:08:24,390
This is why we need the, uh, the animation iteration count.

104
00:08:24,720 --> 00:08:30,000
If I do three, for example, and see what happens now should go.

105
00:08:30,450 --> 00:08:31,880
It should take the normal route.

106
00:08:31,920 --> 00:08:32,250
So.

107
00:08:32,250 --> 00:08:32,790
Right.

108
00:08:33,710 --> 00:08:37,670
Down, left up the reversal route.

109
00:08:39,590 --> 00:08:41,510
And then it's normal growth again.

110
00:08:42,530 --> 00:08:42,980
OK.

111
00:08:45,300 --> 00:08:53,490
All right, the next one is actually we had alternate, but we also have alternate universe.

112
00:08:54,740 --> 00:09:01,580
Which is well, it's pretty obvious what this will do to come in here, alternate and reverse.

113
00:09:03,370 --> 00:09:09,550
And just for the heck of it, I'm going to change this to two and you get to start opposites, so we

114
00:09:09,550 --> 00:09:14,050
had the normal, so and it should start so and don't go back.

115
00:09:18,050 --> 00:09:19,310
So it's starting opposite.

116
00:09:19,400 --> 00:09:21,680
Is this normal direction?

117
00:09:24,660 --> 00:09:27,270
OK, so that's pretty much it about animation directions.