HERE IS A LINK TO THE ACTUAL STORYLINE FILE!
So this particular video is kind of long overdue because I made this project and I posted it to my portfolio a while ago, but I didn’t actually go through and reflect on this at all, or even really post this on LinkedIn. But I really like this project and I figure I might want to talk about it a bit.
So this is a tab interaction project, and I got the inspiration from this by following Jeff Bat’s Unity course. And he has a really cool tab interaction thing at the end of his course that you can kind of build along with, but like the other things in his course, I want to take them a step further. Jeff Bat is really good at laying out these things in ways that anyone can understand. So if you’re looking to sharpen your skills on your storyline game, that’s the place to go. He is the one. So hat’s off to you, Jeff. But I wanted to take this a step further and make this both a little more personal and a little more complex, just to kind of push myself a bit. There’s really no growth without a little bit of pain. And so that’s kind of what I’m patterning these projects on.
So here we are. This is my Teen Titan’s tab interaction. Hopefully when this loads, the audio will also load with it because when you are opening this project for the first time, it should play the Teen Titans theme song. However, I’m not sure if it’s coming through, it might be. If it is, I’ll boost it in post, but if it’s not, it’s going to play that same Teen Titans early OTs song that a lot of us millennials know and love.
So let’s learn about the members of the Teen Titans with tab interactions. So let’s go. Now the tab interaction that I was following along with had five tabs, and I was trying to think to myself, like what can I do? Or what can I build around that has five that’s like near and dear to my heart. You know, I thought of a bunch of things like the Power Rangers or Captain Planet Tears, but then I ultimately settled on the Teen Titans. And so as you go through the idea being that you have to go through each of these tabs before you can advance to finish the course. So you’ll click on Robin, Robin pops on the screen. You can learn about him. I source these from teentitans.fandom.com. And when I’m done, I can just get rid of these. And I’ve turned these visited states to be purple.
So I know not to go back here again, if I don’t have to. I can, if I choose to, but the long and the short of it is I can click on these in pretty much any order I want. Use this X button at the top, but once I am done, once all of these turn into visited states, we have finished the course. Teen Titans theme song plays yet again. You did it. And then we exit the course. Now let’s take a look behind the scenes at the storyline file. It’s actually a pretty simple setup. There’s only three slides that are happening here. So this first slide is pretty straightforward. Let’s just double click into this. Just a few triggers, everything sort of cascades onto the screen fairly normally. The audio has been ducked pretty heavily not to overpower any listeners or anyone jumping into this for the first time.
You may notice that the backgrounds on the first and the last slide are the same as that middle red one, just desaturated. So that’s just kind of a quick graphic design thingy there that I’m implementing is that the desaturated background really brings that Teen Titans title in focus and makes it pop. And like I said, just one button. It introduces the task at hand, gives us the logo, and it gives us a chance to jump in when we are ready. Moving into that, same kind of deal here. We just have five tabs and a tab interaction base layer. Every tab is essentially just the character, the box, and the button to get rid of. There’s a set of object triggers here. That happens when you press that close button, or when you navigate away from this, that sets this to visited.
And that same thing is applied all the way throughout all of these tabs. So that way, no matter in what order you’re in, it’s essentially just changing these variables to be visited rather than unvisited. And that’s really the win condition is making sure at all five are done. So when I head back to the base layer, we have everything important here. We have buttons that are part of a button set, a black overlay in the background in order to help with contrast and things. And that is pretty much the long and the short of it. There’s nothing really too complicated here, just ensuring that the state to move on is everything has been visited. And this is kind of an important thing in e-learning is to ensure that the user has gone through or at least has had the opportunity to go through all of the information that’s presented to them before moving on, whether that be for equity or access or compliance.
So that’s kind of a common interaction or a common scenario for e-learning that I wanted to ensure was on my portfolio front and center and give it kind of a nice Alex Mitts twist at the very end, very similar set up to slide one, just a “You did it!” The theme song, congratulations, and life is good. So that’s my tab interaction. That’s a pretty quick reflection as to what this is, what the justification is for it. I think it’s one of those interactions that’s deceptively simple. I wouldn’t call it easy necessarily, but it’s definitely something that I think an e-learning developer or an instructional designer should have in their tool belt at any time in order to show a prospective employer or a client like, hey, look, this is something that I can do for you. Even though it seems quick and easy, being able to wrap your head around it and understand those variables and triggers is really important to save time and money for your company or client. Anyway, thanks very much for watching, and hopefully I’ll get building soon and see in the next one.