Example 2 - Clickable Buttons + Text Boxes [First Way]

22 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€65.14
List Price:  €93.07
You save:  €27.92
£55.73
List Price:  £79.62
You save:  £23.88
CA$95.61
List Price:  CA$136.60
You save:  CA$40.98
A$106.30
List Price:  A$151.87
You save:  A$45.56
S$94.64
List Price:  S$135.20
You save:  S$40.56
HK$546.91
List Price:  HK$781.33
You save:  HK$234.42
CHF 63.50
List Price:  CHF 90.72
You save:  CHF 27.21
NOK kr764.69
List Price:  NOK kr1,092.46
You save:  NOK kr327.77
DKK kr485.92
List Price:  DKK kr694.20
You save:  DKK kr208.28
NZ$117
List Price:  NZ$167.15
You save:  NZ$50.15
د.إ257.06
List Price:  د.إ367.25
You save:  د.إ110.18
৳7,661.98
List Price:  ৳10,946.16
You save:  ৳3,284.17
₹5,839.65
List Price:  ₹8,342.71
You save:  ₹2,503.06
RM331.75
List Price:  RM473.95
You save:  RM142.20
₦86,437.65
List Price:  ₦123,487.65
You save:  ₦37,050
₨19,492.21
List Price:  ₨27,847.21
You save:  ₨8,355
฿2,575.56
List Price:  ฿3,679.53
You save:  ฿1,103.97
₺2,262.43
List Price:  ₺3,232.18
You save:  ₺969.75
B$357.76
List Price:  B$511.10
You save:  B$153.34
R1,296.01
List Price:  R1,851.52
You save:  R555.51
Лв127.38
List Price:  Лв181.98
You save:  Лв54.60
₩95,113.23
List Price:  ₩135,881.87
You save:  ₩40,768.63
₪260.11
List Price:  ₪371.60
You save:  ₪111.49
₱3,999.61
List Price:  ₱5,713.97
You save:  ₱1,714.36
¥10,715.43
List Price:  ¥15,308.41
You save:  ¥4,592.98
MX$1,185.45
List Price:  MX$1,693.57
You save:  MX$508.12
QR254.79
List Price:  QR364.01
You save:  QR109.21
P955.69
List Price:  P1,365.33
You save:  P409.64
KSh9,427.65
List Price:  KSh13,468.65
You save:  KSh4,041
E£3,355.67
List Price:  E£4,794.02
You save:  E£1,438.35
ብር3,989.43
List Price:  ብር5,699.43
You save:  ብር1,710
Kz58,616.62
List Price:  Kz83,741.62
You save:  Kz25,125
CLP$66,326.02
List Price:  CLP$94,755.52
You save:  CLP$28,429.50
CN¥506.51
List Price:  CN¥723.62
You save:  CN¥217.11
RD$4,049.59
List Price:  RD$5,785.38
You save:  RD$1,735.78
DA9,420.19
List Price:  DA13,457.99
You save:  DA4,037.80
FJ$157.70
List Price:  FJ$225.30
You save:  FJ$67.59
Q542.62
List Price:  Q775.21
You save:  Q232.58
GY$14,613.08
List Price:  GY$20,876.73
You save:  GY$6,263.64
ISK kr9,792.30
List Price:  ISK kr13,989.60
You save:  ISK kr4,197.30
DH706.05
List Price:  DH1,008.69
You save:  DH302.63
L1,239.86
List Price:  L1,771.31
You save:  L531.44
ден4,010.92
List Price:  ден5,730.13
You save:  ден1,719.21
MOP$562.15
List Price:  MOP$803.11
You save:  MOP$240.95
N$1,302.54
List Price:  N$1,860.85
You save:  N$558.31
C$2,571.43
List Price:  C$3,673.63
You save:  C$1,102.20
रु9,317.58
List Price:  रु13,311.40
You save:  रु3,993.82
S/262.81
List Price:  S/375.46
You save:  S/112.65
K268.53
List Price:  K383.63
You save:  K115.10
SAR262.51
List Price:  SAR375.03
You save:  SAR112.52
ZK1,879.71
List Price:  ZK2,685.42
You save:  ZK805.70
L324.19
List Price:  L463.14
You save:  L138.95
Kč1,629.65
List Price:  Kč2,328.17
You save:  Kč698.52
Ft25,373.17
List Price:  Ft36,248.95
You save:  Ft10,875.77
SEK kr758.75
List Price:  SEK kr1,083.98
You save:  SEK kr325.22
ARS$61,468.94
List Price:  ARS$87,816.53
You save:  ARS$26,347.59
Bs482.36
List Price:  Bs689.12
You save:  Bs206.75
COP$272,946.91
List Price:  COP$389,940.87
You save:  COP$116,993.96
₡35,623.88
List Price:  ₡50,893.45
You save:  ₡15,269.56
L1,732.95
List Price:  L2,475.75
You save:  L742.80
₲523,151.84
List Price:  ₲747,391.81
You save:  ₲224,239.96
$U2,683.09
List Price:  $U3,833.15
You save:  $U1,150.06
zł281.85
List Price:  zł402.67
You save:  zł120.81
Already have an account? Log In

Transcript

In this second example, we will create clickable buttons in PowerPoint and layer in text boxes to go with each button. I'm going to show you two ways to do this in PowerPoint. The first way is using animations. And the second way is by adding additional slides to your presentation. First, this is what the outcome will look like if you create this interaction using animations. So here's our site right here, and we have three buttons.

And you can see the little hand pop up, meaning that I can click on these to show different things. So when I click on button one, we're going to we see text one, so this will be some text that you wanted to show and button one changes color. And when I click on button to button, two changes color and we showed we see text two here. And when I click on button, three, button three changes color and text three shows. And you notice too when these buttons change color, the other ones change back to blue. So that's another thing We have to do as well.

All right, so this is how you do this. Let's go to this slide. Here's a blank slide so I can show you in real time. So first, you should start by creating your, your buttons. So go to insert up here and go to shapes. I chose this rounded rectangle, but you can choose whatever you want.

So I'm just going to make that a certain size, let's say like that. And then I'm going to label it. Button one. Okay, so there we go. And then I'm gonna copy this for button two, and three. And I'm just gonna leave it at that default blue color, but you can change it to whatever color you want.

And you can also We'll change the button put different styles on it and things but just for this example, I'm just going to keep everything the same as the defaults. Okay, so now I'm just going to line these up a little bit better. Okay, that looks pretty good. Alright, so there we have the three buttons. Okay, so now let's create the text boxes that are going to appear beside it. So go up to insert again, and then go to text box and just type text one.

And then I just enter down a bit just because I wanted to make it bigger so it can be seen. And let's also just add a border around this as well. We don't really need to line it up right now, because I'll show you. We'll do that at the end. Let's see, let's go up to formats. And just add any border here.

I'm sure we could make it white, I guess. But let's just go to shape outline. And I'll just make a black border there. There we go. Like that. Now I'm going to copy this to make text two and text three.

And I'm just going to separate these out of it and change the numbers just so that we can see them so we're when we do the final thing. We'll we will place them on top of each other, but just so you can see them for building the animation. It's much easier to do it this way. Okay, so now let's go to the animation tab. And just make sure animation panes there. Yep, it was already there from the last time.

So here it is. And let's add on button one, an emphasis animation. So go up here to add animation and go to the yellow ones. And we're going to pick fill color. And you can see here, it's already doing something that's already defaulted, but we're going to change that. So go over to the animation pane and go to Effect options.

And in this dialog box, select a different color. Like I didn't want to select orange, it was just me but I like this purple. So I'm gonna like that. But if you want to stick with the orange, that's fine. And then in the style here, we don't want it to kind of fade through like a rainbow color as well. For this, we just want it to kind of just change like right away.

So select the top one here, whatever color you chose, so it's just going to be this purple and then for timing Make sure that this happens on click. And we then go down to the triggers here. And you want it to start on the click of it was a little hard to read sometimes because they don't actually, sometimes it cuts off but if you know you had three buttons here, it's going to be your rounded rectangle or whatever button number, this third one here and then this fourth one is the second one, and this is a third. So we'll choose this and then click OK. So that's the one that's going to be affected. So now let's just go preview that just you can see the button change color.

So when we click on it, it turns to purple. Alright, so let's repeat this emphasis animation for button two and three. So I'm just going to do the same thing. Fill color. And it's up here right here, the one that's highlighted And then go to Effect options and change this to the purple and then go to timing. And this time, we want to make sure it starts on the click of the second one, which is going to be this second rectangle here.

It shows you a little preview there. And then for button three, do the same thing. Change that to purple, or whatever color you want. Go to timing and then go to triggers start on click of the third one. Okay, now let's just go preview that make sure that's correct. And if you mess it up, like just go back and pick another tray.

If you click the wrong one, it's a lot of like trial and error, you have to kind of try it out and then preview, try it preview. So button one Changes button to button three. But now as you can see they all change purple. And we, we don't really want that we want once you click the second one, this one to go back to blue. So I'm going to show you how to do that. So this is a little tricky sometimes to think in your mind.

But the way I do it is I say, Okay, I'm focusing on here, clicking button one. And when button one changes to purple, I want button two and three to be blue. Now, since this is the first one, you might not, you don't really have to do it. But I just do it just because I want to keep everything kind of the same. And it is. The one drawback of this example this way is that it's not easy to kind of make these buttons make it so that you can click on these in any order.

So that's why I'm showing you a second way that We'll do after, so that you can see that you can jump around to the buttons. So let's just get back here. So when I, when this button changes to purple, I want button two and three to stay blue. So we have to add animations to button two and three. Now we can't just go up to this, kind of this, this area here, just select it because this would mean we wanted to change this animation, this one here that's already highlighted, and you can see it over here to a different one. So you actually have to make sure you go over to the Add animation drop down here because then it will add a second animation on to that.

So I'm going to go to fill color. And then I'm going to change that, open the effect options and change that to the blue. So stay with the blue color. And this is where it might get a little tricky in your head but the timing of this so if you look at the time The trigger is going to be on click of button one though, which is this, this rectangle rounded corners three here in PowerPoint labeling. So we're going to click that. So that's actually button one.

So when button one is clicked, this will remain blue. That's what this makes sure. And then so then you see it moved underneath that trigger, we want to make sure it will start with previous because we want it to start when button one is clicked. So we're not clicking to make this happen. On button two, we're clicking on button one to make these remain blue. Okay, so we're going to repeat that for button three.

So in button three, we go to add animation, go to fill color and then go to Effect options and change that to blue. And then go to timing and make sure your trigger is button one right here. See, yours may be labeled a little different than mine, PowerPoint, labels it depending what you have already created in your presentation. So just make sure you know which one is your button one. Okay, and you can also see over here, it'll show you how many animations are on each object. So right now we have one animation on here to change it to purple.

And then we have a purple one on that for later when we click on it. And also blue, a blue animation as well. So I'm not going to preview that right now because you won't really see the effects because these are already blue for that one. But when we do the button to one I'll show you what happens when you do both of those. So now we go to button two. And when when we click button two we want this is going to change to purple.

And so we want button one We just clicked to change back to blue. So we're going to add an animation to button one like we just did with the others. So go to add animation, go to fill color and change that. Go to effect options and change that to blue. Then go to timing. And so the trigger for this one is going to be one button two is clicked, button one changes back to blue.

So that's my number four here. And then the last step, make sure it starts with previous and I think I just forgot to do that on this one here. The third one. Let's go fix that. Okay, there so now we have button one is clicked button two and three stay blue. At the same time start with previous and when button two is clicked.

Button one changes back to blue. So let's put another animation on button three. Now to make sure it stays blue one button two is clicked. So the same thing at animation, go to fill color. Go to effect options. Choose blue to solid blue timing.

So this again is one button two is clicked. And then make sure it starts with previous pair I'm going to save so don't lose this. Okay, and then I'm going to go preview this so you can see button one and two. So when I click button one, it goes purple. When I click the button to it goes purple and those went back to blue. Now let's repeat this for button three.

So when button three is clicked. OK, button two, we want to change back to blue and button one we want to remain blue. So I'm going to add an animation to button one here. And I'm going to make that blue. A lot of repetitive actions once you get the hang of what you're doing and this is when button three is clicked. So that's my number five here, PowerPoint labeling.

Okay, and then just make sure over here that it starts with previous and then button two, we're going to add another animation fill color Go to effect options, make sure that's blue. Go to timing and the trigger is button three and then start with previous. Alright, just save that. And let's preview those buttons and see how they work. So when button one is clicked, changes the purple button two is clicked, change the purple, those go to blue and button three is clicked, changes purple and those go back to blue. So we're almost done.

Now we got to make these text boxes appear at the same time. So to do that, we're going to select text one here and I'm going to I'm just going to have it fade so I'm going to choose one of these ones appear just because it's quicker for this alright so that fades in. Now When do we want it to fade in? Well, now we go over to the effect options. Right? So we want it to fade in, what when button one is clicked, so we have to go to triggers here and go to number three right there.

And then we have to so now it's underneath this group here. But because there's a number here, it means that it's going to start on click, but we don't want that. We want to start with previous. Okay? And then, but next, sorry, and then text to we want it to be here when button two is clicked. So let's do the same thing.

We'll have it fade in. Go over to effect options. So we want to have it happen when button two is clicked. And then text 301 more thing just make sure it's starting with previous here there we go so under that rectangle group when that button is clicked text to appears and those change back to blue and this changes to purple and then text three have it fade in and then for timing to trigger will be button three which is my number five and then make sure it starts with previous Okay, so let's just go preview that we're not quite done but to see button one text one button to text to button three texts are so now you can see that all texts are appearing and they're just Kind of overlapping each other, but we don't really want that because normally we might have like, some bullet points or a paragraph.

So we don't want that to happen. So let's go back here. And what we're going to have to do is something similar what we did here with the buttons, when to when text one appears, that's okay, we don't really need anything else there because there's nothing else before that. When text two appears, we want text one to disappear. So we need to add an exit animation to text one. Alright, so we'll just go up to here to add animation, go to the red ones here and have it fade out.

And when do we want to fade out so then we go over here to the animation pane, go to Effect options. We want text one to fade out when button two is clicked. So we go to triggers and then here to this is button two, right there. So let's just go preview that. So button one text one button to text to, oh, something didn't work that happened. So let's go see what happened.

Oh, C, we had it not starting with previous so because there's a number there and it's it's starting on click so we gotta say start with previous. Alright, let's go re preview that button one, text one, button two, text two and their text one disappeared. So now we do a similar thing with text three. So when text three appears we want text to to disappear. So make sure you're selecting text to go to add animation. Go to fade out, go to your effect options.

And then triggers. So when. So text two is going to disappear when text three comes in with button three. So your triggers can be button three. And you can also change the how it starts up here. So you see it says on click, we can change that right here with previous so we don't have to do what I did.

It's probably easier. There. Alright, let's preview this. So button one, text one, button two, text two, and the button text one disappears. Button three, text three and text two disappears to almost done. So now we want them to start on top of each other, just so that they you know, they look like they appear on the same spot.

I just like I think it looks nicer. And it also, I don't know, I just think it looks better that way. But it's up to you. If you want to have it do this. That's fine because they're just Appearing now, so it's not on top of each other. So the way I do this is I go and right click on this first text box or whichever one that I like the position of, and I go to Format shape.

And then I go over here to position. And then you can see the horizontal position and vertical position and either write these down or memorize them. So it's 4.12 and 2.37 4.1 to 2.37. And then I go to text to here, and I make it the thing. What was the other one now I gotta go back to 137. Okay, so then I go to text to change it to 2.3.

And then we do the same thing for text 3.1 too, and 2.37 so they should be all exactly on top of each other. I find this as a little bit easier than trying to just kind of move it around with the mouse. And I'm just going to save. And now let's preview that. Button one text one changes color to text, two changes color and button three, type three changes color. All right, so excellent.

Now you can see that they appear at the same location for each click of the mouse. So the only drawback of this method is that you can't easily set it up so that you can click back and forth on each button. You can only do the sequence once unless you reset the slide by exiting out of the presentation. But I still do like using this method to create clickable buttons when I'm when I'm the one presenting the slide to the audience. So our next example is the same example as this one. But I'm going to show you how to do this using extra slides in your presentation, which makes it so that you can click on any button and show the text multiple times you'd be able to move back and forth here and show the text again.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.