1
00:00:00.05 --> 00:00:01.07
- [Instructor] Of course on websites

2
00:00:01.07 --> 00:00:04.07
we can scroll vertically
but how do we do that

3
00:00:04.07 --> 00:00:06.08
when it comes to

4
00:00:06.08 --> 00:00:07.06
XD?

5
00:00:07.06 --> 00:00:09.05
Because there are actually
more peaks down here

6
00:00:09.05 --> 00:00:10.04
that I need to get to.

7
00:00:10.04 --> 00:00:12.02
So, let's check that out.

8
00:00:12.02 --> 00:00:14.01
That happens to be the peaks page.

9
00:00:14.01 --> 00:00:16.00
I'm going to expand it
down but the first thing

10
00:00:16.00 --> 00:00:18.06
I need to do is zoom out
and give myself more room

11
00:00:18.06 --> 00:00:20.08
by just shift

12
00:00:20.08 --> 00:00:21.08
selecting everything,

13
00:00:21.08 --> 00:00:24.05
let's move all of these art boards down

14
00:00:24.05 --> 00:00:25.08
to give me some room.

15
00:00:25.08 --> 00:00:27.01
Let's zoom in.

16
00:00:27.01 --> 00:00:31.01
And now what I can do with
this peaks page selected,

17
00:00:31.01 --> 00:00:32.09
and this is my art board,

18
00:00:32.09 --> 00:00:36.09
I can grab this bottom
bar and expand it down.

19
00:00:36.09 --> 00:00:40.02
So what I'm doing is I'm
expanding the height.

20
00:00:40.02 --> 00:00:41.03
You can see it right here.

21
00:00:41.03 --> 00:00:45.04
In fact I can make it an
even 1800 if I want to.

22
00:00:45.04 --> 00:00:49.04
And what also it gives me
is the view port height.

23
00:00:49.04 --> 00:00:52.00
Notice how scrolling is set to vertical,

24
00:00:52.00 --> 00:00:53.00
that's perfect.

25
00:00:53.00 --> 00:00:55.03
And that's what this line is right here.

26
00:00:55.03 --> 00:00:56.05
I can see this line.

27
00:00:56.05 --> 00:00:59.00
This is like the fold, if you will.

28
00:00:59.00 --> 00:01:00.04
So I'm going to be able
to see everything here

29
00:01:00.04 --> 00:01:03.08
and then I have to scroll
down to see the rest.

30
00:01:03.08 --> 00:01:04.09
What is the rest?

31
00:01:04.09 --> 00:01:07.08
Well, it's going to be this element,

32
00:01:07.08 --> 00:01:13.01
my repeat grid I can expand
that down accordingly.

33
00:01:13.01 --> 00:01:14.08
Now that I can scroll this page

34
00:01:14.08 --> 00:01:18.03
I can actually give all of
this content even more room.

35
00:01:18.03 --> 00:01:20.09
Because notice how Bierstadt
actually duplicates,

36
00:01:20.09 --> 00:01:22.07
I'm actually just going to double click

37
00:01:22.07 --> 00:01:24.02
and I'm just going to
give all these elements

38
00:01:24.02 --> 00:01:25.07
a little bit more room.

39
00:01:25.07 --> 00:01:29.05
Something like that.

40
00:01:29.05 --> 00:01:32.04
And then center this.

41
00:01:32.04 --> 00:01:34.06
I click on it, let's expand this,

42
00:01:34.06 --> 00:01:36.07
make sure that there is no space

43
00:01:36.07 --> 00:01:38.03
in between each one of those.

44
00:01:38.03 --> 00:01:39.05
That is more like it.

45
00:01:39.05 --> 00:01:42.06
So Torreys actually expands
clear down to the bottom

46
00:01:42.06 --> 00:01:43.06
and I like that.

47
00:01:43.06 --> 00:01:46.05
All of these images have more room,

48
00:01:46.05 --> 00:01:48.03
it's a little bit more exciting,

49
00:01:48.03 --> 00:01:50.04
and if I click on the title I can see

50
00:01:50.04 --> 00:01:52.05
the vertical scrolling is set up.

51
00:01:52.05 --> 00:01:54.04
So, let's take a look.

52
00:01:54.04 --> 00:01:56.00
Clicking play.

53
00:01:56.00 --> 00:01:57.04
Going into peaks.

54
00:01:57.04 --> 00:02:01.01
Scrolling down I can
finally get down to Torreys.

55
00:02:01.01 --> 00:02:02.01
All right.

56
00:02:02.01 --> 00:02:03.05
But the issue is,

57
00:02:03.05 --> 00:02:05.03
if I go into prototype,

58
00:02:05.03 --> 00:02:09.01
I can do a select all and I can see that

59
00:02:09.01 --> 00:02:11.02
most things are set up.

60
00:02:11.02 --> 00:02:14.04
Pikes Peak is linking Quandray Peak

61
00:02:14.04 --> 00:02:19.06
but the thing is I could
finally link Torreys Peak now,

62
00:02:19.06 --> 00:02:21.07
so with that being said,

63
00:02:21.07 --> 00:02:24.00
I know it looks kind of crazy,

64
00:02:24.00 --> 00:02:25.09
but if I just double click inside of here

65
00:02:25.09 --> 00:02:28.01
I can see that I have this little trigger.

66
00:02:28.01 --> 00:02:30.00
It's not attached or pointing to anything,

67
00:02:30.00 --> 00:02:34.04
sure enough let's point it
down here to that Torreys

68
00:02:34.04 --> 00:02:39.09
and let's make sure the
transition is set to slide left.

69
00:02:39.09 --> 00:02:41.09
'Cause that's what I want
for each one of these

70
00:02:41.09 --> 00:02:43.00
as I select this one,

71
00:02:43.00 --> 00:02:44.08
they're all set to slide left.

72
00:02:44.08 --> 00:02:48.03
And I can make sure the
duration is the same,

73
00:02:48.03 --> 00:02:51.00
so .8 just like that.

74
00:02:51.00 --> 00:02:53.06
You could do a command
zero or control zero

75
00:02:53.06 --> 00:02:55.01
to see everything

76
00:02:55.01 --> 00:02:58.03
and again select all you
can see how everything

77
00:02:58.03 --> 00:02:59.07
is being wired up.

78
00:02:59.07 --> 00:03:00.09
Won't worry about these mobile screens

79
00:03:00.09 --> 00:03:03.03
'cause we're just dealing
with desktop right now.

80
00:03:03.03 --> 00:03:06.01
But I can click play and have some fun

81
00:03:06.01 --> 00:03:08.08
diving into the different peaks.

82
00:03:08.08 --> 00:03:09.07
There's Bierstadt,

83
00:03:09.07 --> 00:03:10.09
we can always go back,

84
00:03:10.09 --> 00:03:12.04
you can scroll down.

85
00:03:12.04 --> 00:03:15.09
Quandary, looks fantastic.

86
00:03:15.09 --> 00:03:19.00
And then we'll go to Torreys Peak

87
00:03:19.00 --> 00:03:20.08
and we'll click on peaks.

88
00:03:20.08 --> 00:03:22.09
We have this dissolve for each one

89
00:03:22.09 --> 00:03:25.01
as we go back to peaks as well

90
00:03:25.01 --> 00:03:26.07
and I think that is just fine,

91
00:03:26.07 --> 00:03:27.09
but you could always change that.

92
00:03:27.09 --> 00:03:30.07
Going into hikers you
can see all the elements

93
00:03:30.07 --> 00:03:33.09
are working nicely as I have
this all prototyped out.