Tip:
Highlight text to annotate it
X
Hi there... feels really nice to have you back on the Articulate Storyline Tutorials. We had
started an interesting discussion on navigation. The reason why I say this is interesting
is because, everything that we see on the screen is created by us... the color scheme, the background,
the navigation panel and the navigation buttons. Alright?? This is what
we did in our last discussion... we brought in the navigation buttons, but, it's just that
I have tweaked up the screen a little bit... I have changed the navigation buttons
to make them look more presentable... and, I have also brought in these elements... that is,
the navigation panel and the buttons on to the first screen. Right?? Otherwise, the... the
storyboard is where or how we left it in the... in the first discussion. Okay?? Now,
what we are going to do in this discussion is to, 1. See the significance of the CC text
box and also to see how we are going to make a... the better use of the navigation panel here...
and, 2. We are going to activate these navigation buttons. So, this is what we are
going to do in this session.
Alright? Now, before we proceed, let's save this file in its designated place, as Navigation Part
2. Once we save this file, we will be set to go. Alright! Here we go. Now, we'll start
our discussion with the CC text. The reason why we have this CC text here is because, the
learner should be able to track the voiceover text if they want. They may like to do so
in two situations... one, when they don't have the headphones, in which case, they will
not be able to listen to the voiceover text as it happens, because, the on-screen-text,
for all practical purposes... it's going to be just the gist of the voiceover text and
therefore, that explanatory part of whatever that happens on the screen... if the user
wants to track, they should be able to do so, right?? And, second reason why they may
like to track the voiceover text is when they find the diction or the accent of the voiceover
artist a bit difficult to follow.
Alright? So, for these two reasons, it becomes really, really critical that we have this feature
on, on the screen. Right?? More so, when we go the customized route, all these things
become really critical, because, we have to create all these. So, that's the reason why
we are spending this... this kind of a time and effort on understanding the significance
of the CC text box, alright?? But, one thing we are not going to discuss in this
discussion...one thing that we are not going to look into is, how we are going to generate the CC text. That is
slightly out of scope, because it's quite advanced and we will discuss that when the
right time comes, okay?? And, by the same reason, we are also not going to enable or activate this
icon... which is the Transcript icon for the CC text, because, once again, that
comes into the technical route and we will also keep this in abeyance for the moment,
alright?? Okay...
So, now... now that we have discussed the significance of the CC text box, we are going
to see the kind of provision we are going to make for this, alright?? So, I am going
to insert Shape, okay??... and, if you remember, whatever that we did in our first discussion
on Navigation, I am going to repeat those steps. Now, I am going to set the height of this
box to 27. You may like to know why. The height of the navigation panel here is
30, as you can see here. So, I am setting it to 27, so that it can compactly sit itself
in this area... you are going to see how that is going to work, alright?? Now, I am going
to set the width to 550... it is done... and, I would like to do a few more things on this.
One, I would not like to have any fill and Outline seems a bit weightier... so, I'm
going to make it look thin... okay??... and, I am also going to change the color to a more
harmonious one to sync with the rest of the screen. Okay?? So, now I am going to bring
this in here... into the navigation panel, as you can see. Okay?? Now, you see that the
outline is visible but at the same time, the box is not glaringly conspicuous. You see
that, right?
Now, I am going to align this to the left and I am going to ensure that it is aligned
to the middle of the navigation panel. Yes! Perfect! It looks neat. I am also going to
populate this box on to the first screen... I am just copy-pasting it. it is also done. Alright!
So now, this is where the CC text will happen... this is the area, when the
user clicks this, okay??... when... when the user would like to track the voiceover text,
they click this and the CC text happens here, in sync with the voiceover. They click this
once again, it gets switched off. Alright?? So, the discussion on the CC text box is done.
Now, we are going to get on to the exciting part of this... activating these navigation buttons...
for all practical purposes, the buttons are here, but they have to function.
That's what we are going to see.
Now, before we get into this, a macro view of where we stand. Now, we have just two screens.
The... the miniature context that we are discussing here has only two screens and it's going to make
the understanding part of the whole thing much easier, alright?? Now, as far as the
first screen is concerned, this second screen is the next screen... and, for the next screen...
that is, for the second screen, the first screen is the previous screen. So, we are
going to activate the Next and the Previous navigation buttons now. And, we are going
to see how that is going to work.
And, one more thing we have is the Home button, alright?? Now, for the second screen, the
first screen happens to be the Home screen. Alright?? So, when you get to have more number of
screens, you will see how the whole thing works. Alright?? Now, for the... for the Home screen
also we have this Home button. So, we are going to see how we are going to relate
and understand the functioning of this as we go along.
So, let's start with activating this Next button. We are on the first screen now...
we should be able to go to the next screen... the second screen. And, this navigation icon is
what is going to do that job for us. Okay?? So, let's activate it. Now, I am taking my
mouse to the extreme of this screen... I am dragging it. So, my Trigger panel is taken
off the shelf... it is open for me to handle it... okay??... to make use of it.
I am going to click this... okay??... this is selected. Now, I am going to create a new
trigger for this one, as you can see here... the description. Okay?? I am clicking this
and the Trigger Wizard window opens for me. Now, it gives me all these options. One, it wants
me to select the kind of action that I want, on this trigger... and, it wants me to
select the slide where I want to go to... okay??... and, it also wants me to select
when I want this action to happen. Okay?? So, now let's see the options here... Wow!... this
is quite overwhelming, don't you think? I mean, we really think it is as simple as that...
but, it is not... it is quite complex...we can create so many... we have so many actions
to choose from... but, now, we are not going to look at all of these... because, it's
going to really... really, really weigh us down. Okay?? So, we are going to look for the
one that we want. We have two slides here. So, we want to be able to jump to the slide
that we want and therefore, we are choosing this option. Okay?? Now, which slide do I
want to be able to jump to from the first screen? Is this the previous slide or the
next slide? I want to be able to go the next slide, because, I am on the first screen, alright??...
so, I am picking up this... now, for the moment, I am not choosing these...
choosing any of this... okay?? Now, I'll tell you why I am not... you know... settling myself
on this one... I am going to tell you that shortly. So, for the moment, I am picking up
next slide. Okay? Now, when? I want to be able to go to the next screen, when I click
this... okay?... when my user click this... clicks this... I want the action to happen. So,
this is perfectly in place. So, I am going to say Ok.
Alright! So, we are done, as you can see here. Right? The navigation has been enabled on
this button and you see this highlighted by this blue band. You see this... it is not
highlighted and therefore, no action on this, as yet! So, this one is on... and, we are perfectly okay.
Now, let's go to the second screen. From the second screen, I want to be able to go to
the first screen and therefore, I want this Previous button to be enabled at the moment,
alright?? So, I am going to repeat this process of creating a new trigger, okay?? Action...
Jump to slide, yes! Slide... next slide... no... it is going to be the previous slide. Right??
And, Action... when... does this have to happen?... when the user clicks. Perfect!
So, we are done.
Now, the next thing that we are going to do, is to activate this Home button. Now, as far
as our miniature context is concerned, for us the Home button points to the first screen,
and we are going to create a new trigger for this one. I am going here... jump to slide... yes...
which slide?... now, you see... I am not going to look at this, though, for all practical purposes,
the Home screen happens to be the previous slide, I am not going to
look at this... I am going to pick this one up. The reason why I am going here is because,
if you are going to have, say 20 screens, from the 20th screen, if you want to activate
the Home screen, this is the area that you will make use of. From the 20th screen down
below, you will come up to this screen and you will activate this... which is exactly
what I am doing here. Alright?? So, I have picked up Module Objectives as my Home screen...
I am going to say Okay. Alright! So, we are done. Now,
here is an interesting situation. There is a Home button on the Home screen itself.
So, what I am going to do? I am going to, for all practical purposes, have this on.
Okay?? I am going to create the trigger... jump to slide... which slide?... the same slide...
Module Objectives slide... and, I am going to say Okay. So, even if I am going
to be on the Home screen, if I am going to press this, I will be landing back on the
same screen. Okay?? So now, this is quite interesting... and, I have... I have something
more to tell you on this one... I will tell you that shortly. Alright?? Okay!
So... we are done. We have three navigation buttons enabled. Okay?? The Previous button
on the second screen, okay??, and the Next button on the first screen, and the Home button
on both the screens. Now, here is another interesting situation. This is quite interesting, isnt' it?
I mean... the way we are going about contemplating that the understanding of the whole thing
is pretty interesting here. Now, on the first screen, we have enabled the Next
button. We are yet to do anything on the Previous screen... Previous button. It's because, this
is the first screen, and we don't have any previous screen. Alright! That is quite obvious...
so, we don't need any specific mention on that, but the question is, why do we have to
have this? We don't need this, right? So, we have two options... one, to knock it off...
that means, the user will not even see this icon... this button... and, therefore, it makes
it easier for them to... you know... do the necessary
navigation. But, then, there is a... there is a... there is a chance... it's... it's not that there is a chance...
the thing is... the... the consistency on the way the navigation buttons are set will be lost.
Right?? This screen will have this button, the next screen will not have another button,
and therefore, it will be chaos. So, we don't want that to happen... we want to
maintain the consistency. That said, the option that we have here is, not to enable this...
not to activate this. So, which means, even if the user is trying to click this, nothing will
happen. So, that way, we are safe. Alright?? So, that's the reason why we are not going
to activate this one.
And, same is the case on this screen. We are just on a miniature scenario as I said and
therefore, for all practical purposes, we are on the last screen and therefore, when
the user clicks this Next button, they would not able to go anywhere. Because, this is the
last screen. Therefore, as we discussed... the same reasoning that we discussed on the
first screen is going to apply here. We are not going to knock this off... we are going
to maintain this... but, we are not going to activate it... alright?? So, we are going
to leave it as it is.
Alright! So we are done with enabling the navigation buttons... and, now... we are going to see
how this is going to work. Alright?? So, I am going to go, have a preview of these two
screens... but, before that, I have to check one more thing. I just have to ensure that
the default navigation buttons are not enabled. As you can see here, in the second screen,
they are not enabled. But, in the first screen, they are. Which means, if I am going to publish
my course this way, I will be seeing both the default navigation buttons and the ones
that I created... both being populated and we don't want that scene. Just for
our understanding, we are going to see how it's going to look like. Alright??
So, I am going to preview this scene... not the slide... okay?? If I am going to preview
this slide, I will not... the navigation will be locked. I will not be able to go
outside the screen and therefore, I am picking this up. Therefore, all the screens that are in
this scene will be populated and therefore the navigation becomes possible for me. So,
here... we have both the screens... okay??... so, we are on the Home screen... you see this??...
the default navigation buttons are enabled... and, we also have our customized buttons here.
So, duplication, right?? We don't want this. So, I am going to close the preview for the moment,
and I am going to uncheck the default controls here. And, now... when we preview
the scene, we will not see these buttons... alright??... as you can see now. This is gone
and we are perfectly safe.
Now, we are going to see how the navigation buttons are going to work... alright?? I am
going to press the navigation button... the... the Next navigation button now and we are
going to land on the second screen. Here we go!
The ability to communicate effectively is the bottom-line of any business endeavor.
Wow! This is beautiful. Right?? So, whatever that we have enabled... the action we have
enabled, on the trigger that we have enabled on the navigation buttons seems to be working
perfectly fine for us. Perfect! Now, we are going to see how the Previous button on this screen
is going to work... mind you, there is no action enabled here... right??... so
you can see the difference... right!... this is not enabled but, this one is. So, we are
going to check out the Previous button now. I am going to click this.
Perfect! So, the Home screen... the previous screen is back on. Now, I am going back to
the second screen once again. The ability to communicate effectively is the bottom-line
of any business endeavor. Right! So now we are going to see whether the Home navigation
button is going to do its job for us. I am going to click this... Wow!... I am back on
the Home screen. Now, I am going to check the Home screen on the Home screen itself.
Now, if I am going to click this, I am going to land back here. And, you will see how the
action happens on this Seekbar. Right?? You see... the screen is getting loaded... you
may not see any action here, but, you see that it is getting loaded the way the Seekbar
reacts to our action. Alright?? So,
we are done with the navigation buttons... and, I feel all the more powerful, because,
I am creating everything the way I want it... and, it's all working perfectly fine for me.
This is brilliant stuff! I am really excited about it. So, this is what is going to happen
for you as well... alright?? So, what you are going to do is to go back to your storyboard,
play around with activating the navigation buttons on lines of whatever that we discussed here.
And, once you also get as excited as me, you will come back to the next part of
our discussion on navigation... and, when we get back together, we are going to discuss
another exciting feature of this beautiful tool, Articulate Storyline... I just love
it... for... for the kind of flexibility and freedom that it gives me to... to mould the screens
the way I want. This is something really spectacular for me... alright??...
spectacular in the literal sense of the term, because, we are seeing things happening on
the screen. And, that is fantastic for us, Right?
So now... as I was telling you, when we get back on the third part of this discussion
on the navigation, we are going to discuss another interesting feature, States! You remember,
I made a mention of this States... this... this function and I also told you that we
were not going to discuss that and now... the right time has come. So, we are going
to discuss the... the beautiful function of this feature of Articulate Storyline when
we get back in our next discussion.
Alright?? So, you go back to your storyboard as I said... have great fun with activating
the navigation buttons and we will catch up in the Part 3 of the discussion very soon.
Alright?? Till such time that we catch up, it is a big Tata from me. You take very good
care of yourselves. Bye-Bye!