Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,100 --> 00:00:09,010
Now we're going to be starting on the first row with our animations for this page there will be a slight
2
00:00:09,010 --> 00:00:15,790
change to the design that we had went over in the overview and that's actually because of the animation
3
00:00:15,820 --> 00:00:21,480
that I had made for the scale section in the design file.
4
00:00:21,480 --> 00:00:24,040
It looks like I have a pie chart.
5
00:00:24,150 --> 00:00:29,370
And that was animated so that the sections of the pie chart it would get bigger and it would take up
6
00:00:29,370 --> 00:00:34,680
the full circle and then that would circle around with another section and that would continue in a
7
00:00:34,680 --> 00:00:35,090
loop.
8
00:00:35,340 --> 00:00:42,180
But for some reason I've noticed now on my actual deployed Web site as well as when I was testing building
9
00:00:42,180 --> 00:00:49,620
the page for this course that that animation is now flickering whenever it runs and I'm not sure why
10
00:00:49,620 --> 00:00:50,340
this is.
11
00:00:50,420 --> 00:00:57,720
I'm not an After Effects expert and I'm sure it's just a problem with the way that I was creating that
12
00:00:57,720 --> 00:00:58,480
effect.
13
00:00:58,590 --> 00:01:00,810
I believe using an expression.
14
00:01:00,810 --> 00:01:07,470
So something must have updated I think since I made that and possibly caused some compatibility issues
15
00:01:07,680 --> 00:01:13,860
but I just went ahead and made a new animation entirely for it and I think that this actually does a
16
00:01:13,860 --> 00:01:16,420
better job of getting the message across.
17
00:01:16,500 --> 00:01:19,110
And I think it's a bit of a core animation too.
18
00:01:19,260 --> 00:01:27,860
So we're kind of worked out anyways let's begin by coming down and under the grid wrapping our entire
19
00:01:28,130 --> 00:01:29,310
row here.
20
00:01:29,330 --> 00:01:30,550
Let's find.
21
00:01:30,550 --> 00:01:34,670
See this is for our heading this is for the arrow.
22
00:01:34,880 --> 00:01:39,920
So this row here wrapping our entire middle icons.
23
00:01:39,920 --> 00:01:49,250
So underneath that with just one grid tag underneath let's add an adjacent grid item container direction
24
00:01:49,550 --> 00:01:52,320
row open that up.
25
00:01:52,490 --> 00:01:57,980
The first item in this row is going to be for the digital documents and data section.
26
00:01:57,980 --> 00:02:02,550
So let's add a grid item container.
27
00:02:02,750 --> 00:02:12,250
And this is going to have itself a grid item container but with a direction of column we can open that
28
00:02:12,330 --> 00:02:19,780
up and this will have a grid item wrapping a typography variant.
29
00:02:19,800 --> 00:02:31,170
Age 4 and this will say digital documents and data and then we'll come down and add a grid item underneath
30
00:02:31,260 --> 00:02:39,760
that one and this will be for a typography variant of body one that we had now set up actually.
31
00:02:39,810 --> 00:02:43,920
And then we can open this up and let's go ahead and copy that.
32
00:02:43,940 --> 00:02:50,130
So I know we'll need a couple of these and let's open up our design file again and we'll scroll down
33
00:02:50,130 --> 00:02:55,130
here to the digital documents and data section see with three paragraphs.
34
00:02:55,150 --> 00:03:02,400
So let's go ahead paste that two more times and then we can copy in all of this text.
35
00:03:02,400 --> 00:03:07,980
So we'll get that first paragraph in our first body one second paragraph.
36
00:03:07,980 --> 00:03:17,860
The second typography and the third paragraph in the third so it's clean up and then we can get rid
37
00:03:17,860 --> 00:03:19,420
of the design file for a little bit.
38
00:03:19,420 --> 00:03:22,470
We'll just hide that away and save the page.
39
00:03:22,470 --> 00:03:24,820
Now see this refresh.
40
00:03:24,820 --> 00:03:31,770
And underneath we now have our little paragraph let's clean this up a bit though.
41
00:03:31,770 --> 00:03:33,990
And on the grid item containers.
42
00:03:34,060 --> 00:03:35,720
So just this regular container.
43
00:03:35,720 --> 00:03:39,150
Right underneath the direction of a row.
44
00:03:39,160 --> 00:03:47,200
Let's add a class name of classes dot item container.
45
00:03:47,200 --> 00:03:52,030
And this will be the container for all of the texts in each of these sections.
46
00:03:52,210 --> 00:04:03,530
And it will come up to set the item container style to a max width of forty M. So let's save them a
47
00:04:03,530 --> 00:04:04,970
page or refresh.
48
00:04:05,030 --> 00:04:11,060
And now all of our paragraphs are much tighter next to each other although we actually did forget to
49
00:04:11,060 --> 00:04:18,730
put on the paragraph property onto all of these onto all of these body one typography is.
50
00:04:18,890 --> 00:04:27,500
So make sure we add the paragraph prop to all three of these and that we'll just make sure that we get
51
00:04:27,560 --> 00:04:29,940
that spacing.
52
00:04:29,960 --> 00:04:32,130
Now let's open up our landing page.
53
00:04:32,180 --> 00:04:38,830
J.S. real quick because we need to come down and at the top where we have the default options constant.
54
00:04:38,870 --> 00:04:43,540
Let's go ahead and copy that over and into our custom software.
55
00:04:43,540 --> 00:04:50,540
Dot J Yes we will come up to the top and under our classes constant Let's paste in that default options
56
00:04:50,900 --> 00:04:59,510
and then change it to documents documents options we then need to grab our document animation.
57
00:04:59,520 --> 00:05:00,800
So what's come up here.
58
00:05:00,810 --> 00:05:11,580
And underneath those imports will import the documents animation from animations documents animation
59
00:05:11,940 --> 00:05:19,500
data dodgy yes and then we'll change the animation data here to our documents animation that we had
60
00:05:19,500 --> 00:05:29,300
just imported now let's scroll down in inside of our latest grid item container of row and then inside
61
00:05:29,300 --> 00:05:36,950
of that container for the digital documents and data section next to our grid item container direction
62
00:05:36,950 --> 00:05:40,040
of column adjacent to this grid item.
63
00:05:40,040 --> 00:05:50,750
Let's add a grid item and this will contain our lady components with the options of documents options
64
00:05:50,870 --> 00:05:55,100
we had just created and then we can go ahead and close that off.
65
00:05:55,130 --> 00:05:57,080
So let's save this real quick.
66
00:05:57,080 --> 00:05:58,660
We'll see the page refresh.
67
00:05:58,820 --> 00:06:04,200
And underneath we now have a very large nice animation.
68
00:06:04,410 --> 00:06:10,980
I'm going to go ahead and stop this animation real quick and for some reason I've noticed that the auto
69
00:06:10,980 --> 00:06:16,180
play is set to false here but it is still continuing to play these animations.
70
00:06:16,260 --> 00:06:21,020
And if I have these just playing non-stop that's going to mess up the editing for these videos.
71
00:06:21,030 --> 00:06:27,240
So what I'm going to do is I'm going to come down to our lady component and I'm going to add manually
72
00:06:27,300 --> 00:06:34,400
the is stopped property of true and I'm going to save that so that the page will refresh.
73
00:06:34,500 --> 00:06:39,960
And now the animation is not going to play it will just sit here although I can click it and it still
74
00:06:39,960 --> 00:06:40,860
should play.
75
00:06:40,860 --> 00:06:47,240
So you can still see the animation is working but I am just going to go ahead and leave it at stopped.
76
00:06:47,250 --> 00:06:53,430
So that way I don't have any editing issues but you can go ahead and keep yours playing if you want
77
00:06:53,430 --> 00:07:02,820
to see the animation now to get these components to be sharing this space available up here instead
78
00:07:02,820 --> 00:07:06,320
of forcing the animation down onto a new line.
79
00:07:06,360 --> 00:07:13,460
Let's go ahead and we'll add it onto this grid item wrapping the lady component the medium property.
80
00:07:13,590 --> 00:07:18,310
And that means on our grid item container with a direction of column.
81
00:07:18,450 --> 00:07:22,210
We will add the medium prop as well and we can save them.
82
00:07:22,230 --> 00:07:23,720
See the page refresh.
83
00:07:23,850 --> 00:07:26,310
And now they're sitting right next to each other.
84
00:07:26,400 --> 00:07:32,520
But our animation is definitely being cut off that is not really the work that we are wanting it to
85
00:07:32,520 --> 00:07:33,630
have of course.
86
00:07:33,630 --> 00:07:43,170
So it's come down to the Loni component here and let's go ahead and add a style prop set to an object
87
00:07:43,350 --> 00:07:57,180
with a max height of three twenty five a max width of two seventy five and eight men height of two seventy
88
00:07:57,180 --> 00:07:58,860
five as well.
89
00:07:58,950 --> 00:08:05,970
So let's save that and we'll see the page refresh and you can see the part of the animation is still
90
00:08:05,970 --> 00:08:07,760
being cut off here.
91
00:08:08,040 --> 00:08:13,950
And I think that that's probably because we haven't added this other item and that will change the spacing
92
00:08:13,950 --> 00:08:15,000
here a little bit.
93
00:08:15,000 --> 00:08:19,410
So these numbers might not be perfect yet until we get the rest of the content in.
94
00:08:19,410 --> 00:08:25,530
But the way that I am coming up with these numbers and the max height and the max width and the men
95
00:08:25,530 --> 00:08:33,300
height that I've said these are from going through and trying out different Max heights and seeing how
96
00:08:33,300 --> 00:08:40,890
that affects the animation and seeing how that affects which parts of it are being cut off as I increment
97
00:08:40,920 --> 00:08:42,720
or decrement that number.
98
00:08:42,840 --> 00:08:50,850
And then by setting the width for that as well the max width that allows me to control the aspect ratio
99
00:08:50,880 --> 00:08:56,820
from the width and the height to make sure that the animation never grows to a size that it will be
100
00:08:56,820 --> 00:08:58,290
getting cut off at.
101
00:08:58,350 --> 00:09:04,290
So you just have to go through and play around with those numbers to see which ones are the golden ratio
102
00:09:04,290 --> 00:09:10,650
for your animations to make sure that they're rendered correctly without any cut offs but let's just
103
00:09:10,650 --> 00:09:13,960
ignore that for now and we'll fix it in a second if we have to.
104
00:09:14,040 --> 00:09:21,600
But what I want to do is go ahead and take this entire item container the entire item container and
105
00:09:21,600 --> 00:09:30,030
we are going to copy that and then go ahead and we will paste it directly underneath then let's start
106
00:09:30,030 --> 00:09:33,990
and we'll come and change the title up here to scale.
107
00:09:33,990 --> 00:09:39,980
And if you remember for the scale section we actually have our animation in front of the text.
108
00:09:39,990 --> 00:09:41,460
It is on the left of it.
109
00:09:41,520 --> 00:09:49,290
So let's take our grid item wrapping the lady component and cut that out and underneath the item container
110
00:09:49,350 --> 00:09:51,300
for this Let's paste that in.
111
00:09:51,330 --> 00:09:57,420
So now our animation will be on top of or to the left of the text.
112
00:09:57,420 --> 00:10:03,700
This means we need to scroll up and we'll need to copy the documents options.
113
00:10:03,870 --> 00:10:08,540
Paste this and change that to our scale options now.
114
00:10:08,650 --> 00:10:20,170
But let's come up and import the scale animation from animations scale animation the data dot Jason.
115
00:10:20,190 --> 00:10:26,750
And then it will come down and in the scale options let's set to our scale animation.
116
00:10:26,850 --> 00:10:29,030
And now we can scroll all the way back down.
117
00:10:29,160 --> 00:10:34,350
And in this Lodhi component that we had moved up on top of the scale text.
118
00:10:34,470 --> 00:10:42,690
Let's change the documents options to now scale options and then we can actually get rid of the men
119
00:10:42,690 --> 00:10:51,690
height property for this one didn't need to use that and set the max width to two eighty and a max height
120
00:10:51,930 --> 00:11:01,000
of two sixty before we save let's open up our Adobe SD design file come over to this scale section and
121
00:11:01,000 --> 00:11:06,880
there's just one paragraph that we have to copy so we can get rid of these other typography components
122
00:11:06,890 --> 00:11:14,350
and the code editor and we'll just paste in that one paragraph go ahead let's minimize the design file
123
00:11:14,650 --> 00:11:22,390
and let's save the code so we can see this refresh and now we've got these scale section popping up
124
00:11:22,780 --> 00:11:30,890
although we are not seeing these scale animation this is actually because these scale animation starts
125
00:11:30,890 --> 00:11:37,570
out with nothing being there and since I have it set to automatically be stopped it's not continuing.
126
00:11:37,580 --> 00:11:44,510
So if I were to get rid of this and then save the page we can see the page refresh and now the scale
127
00:11:44,510 --> 00:11:46,550
animation has appeared.
128
00:11:46,550 --> 00:11:52,390
So the little people animation popping up I think that does a pretty good job of showing scale you know
129
00:11:52,460 --> 00:12:02,300
showing growth but I'm gonna go ahead and turn the is stopped of true back to being on and in that way
130
00:12:02,300 --> 00:12:08,350
the animation will be stopped so you won't be able to actually tell but it is right there.
131
00:12:08,380 --> 00:12:14,360
I'd just have to click on it and I can make it show up but wait for it to go away and we'll go ahead
132
00:12:14,390 --> 00:12:21,340
and stop that before we take a break real quick look over at the text here and you'll see how it's all
133
00:12:21,340 --> 00:12:28,030
left aligned because we copied it from this section which is left aligned but for our section over here
134
00:12:28,030 --> 00:12:35,500
on the right we want all of this text to be right aligned so on our typography variant H four for the
135
00:12:35,530 --> 00:12:44,080
scale title let's add a a line property of rights and we can go ahead and only paragraph here we can
136
00:12:44,080 --> 00:12:53,080
add the A line equals write property as well we can save that and now our text has jumped over to the
137
00:12:53,080 --> 00:13:00,090
right side this is a decent place for us to stop though so we'll take a break here and we'll keep working
138
00:13:00,090 --> 00:13:06,630
on the next part of this page and I'll see if I need to fix this little bug right here with the animation
139
00:13:06,630 --> 00:13:11,460
or not but I'll figure out the right numbers for that and make sure that we have it all set up in the
140
00:13:11,460 --> 00:13:12,510
next video.
15790
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.