What’s up everyone, Matt again with the Maya Learning Channel.
A little while ago I did a couple of videos detailing my beloved Maya pet project –
interactive tutorials.
These are a great way to teach users about new features or techniques
right in the UI in a fun, gamified way.
If you don’t believe me, you can try for yourself in any of the examples I’ve linked to
in the description below.
But while USING interactive tutorials is a breeze,
actually building them was quite the hassle since it involved laboriously copying,
connecting, and editing nodes in the Node Editor.
Even as one of the feature’s main developers,
I found myself constantly annoyed by this process.
Well not anymore!
You see, I’ve been secretly working on an add-on for the interactive tutorials
to make this process way easier: the Interactive Tutorial Creator App!
Uncreative naming aside, this little app features a UI-based approach to creating tutorials
that’s much more user-friendly than the old node diving method.
You can find it as part of Maya’s bonus tools, which I’ve linked to in the description below.
For now though, let me walk you through some of its features by building a quick tutorial!
So with my Bonus Tools installed, I can now go to Bonus Tools > Create > Interactive Tutorial.
This opens the app which, on an empty scene like this one, has just a single button.
And by clicking it, Maya automatically lays the foundation for my tutorial!
Now in my app you can see my intro step,
along with the individual components that determine the order of what happens.
First, we initialize the way we want the UI to look as the tutorial begins…
…then we display the welcome dialog box.
And as you can see, we can just edit the text or change behavior
via the appropriate fields in the creator app.
I should note that, behind the scenes, this foundation is actually exactly same
as the node graph that I showed in my previous video about creating tutorials.
However, the contents of these template nodes are a bit different from back then,
so unfortunately the tutorial creator won’t work with any tutorials you created
in that previous system – sorry about that!
The last thing I’ll add to my welcome screen is good ol’ trusty Mayabot,
who I can find here in the Content Browser.
I’ll just set up an inviting pose…
…and then duplicate the geometry as “stage0_mayabot”.
That does it for the welcome screen.
Next, to add a new step, just click the button in the top-left here.
In here, you’ll find options to add components and choose where to add the step.
But, for now, I'll leave all these alone and just hit Add.
And now you can see my new step along with its components neatly indented underneath.
This time I’ll change my text – both on-screen…
…and controller.
And that’s it for step 1!
Then I’ll just make step 2 the same way.
However, unlike the previous two stages, this is a step where I want the user to do something –
specifically, to change to a different tool in the toolbox.
That means that I want this textbox next to the toolbox,
which I can do by either using these screen coordinate values here to re-position it…
…or my preferred method, to use the Placement Helper button
to move it beside the toolbox, and size it appropriately.
I also want to change the little pointer so it points left.
Awesome!
Now, to register if my student did the right thing, I need to add something called a trigger.
This will, by default, literally trigger the next step when a specific condition is met.
To add a new component to an existing stage,
I can just select that stage and then add it using this button.
To use a trigger, I first need to specify a trigger type.
In this case, a tool change is an event so I can just leave this as is.
For the Event ID, I can scroll to ToolChanged.
And that’s it!
If you ever wonder what other trigger events are available,
I’ve added a little help button that takes you to documentation on what they all do.
Finally, I’ll add my last step...
…which just congratulates the user once successful.
Now to give it a test drive, all I need to do is hit this button up here.
And when I reach step 2, I’ll just change the current tool…
…and you can see the tutorial continues on successfully!
Now we just have a few small cleanup things to do…
First I’ll disable the ‘Reset Step’ button for all my steps since I don’t really need it…
…and I’ll also disable the ‘Next’ button on my second step,
so that a student can only proceed by changing the tool like I ask them.
Now, for a little bit of optional cosmetic flare,
how about I add a couple more poses for Mayabot?
One where it gestures towards the tools we want changed…
…and another after the student successfully changes it.
Like the first Mayabot, I duplicated just the geometry for each of these
and named them “stage2-mayabot” and “stage3-mayabot” respectively.
The question now is, how do I get them to show up on their respective step?
To do that, I’m going to use keyframes to set “when” each one becomes visible.
Then use Time Slider Bookmarks to jump to that time on the respective step!
So I’ll click on Stage 0 and create a new bookmark.
I’ll call it “stage0_bm” and set the frame range from 1-10.
We could just use 1-2, but I like leaving a bit of a buffer just in case.
You can see the bookmark down here.
Now I’ll go back to frame 1 and hide the other two Mayabots…
…then keyframe all three.
Now I just repeat for the other stages.
So on stage2, I’ll add another bookmark…
This time I’ll set the range from 20-30 – again, just leaving a bit of buffer
in case I need to insert steps later.
And then one more time for stage 3.
And if I test again...
...you’ll see Mayabot change poses between steps.
And if I wanted to go the extra mile, I could even animate Mayabot,
then use this “Autoplay” feature to play the animation on each step
instead of using still transitions. More work sure, but more fun for your students too!
And not totally superfluous either: our research shows students retain information better
when they have some kind of mentor – even a virtual one!
So now we’ve gone through how to create steps, modify text, add triggers,
and connect bookmarks. That’s plenty to make some simple tutorials.
But to get really fancy, we need to cover one last thing: Python scripting.
Recall back in Step 2, you briefly saw a Python field here –
controlling the trigger's push to the next step.
By default, the trigger automatically pushes
any time the monitored event occurs.
But say that, instead of simply monitoring for any tool switch,
I want the user to select the Move Tool specifically.
To figure out how to do that, I’ll just click the little helper button here…
Which brings up a custom webpage I created with a bunch of the most useful
Python snippets I could think of, along with examples of how to use them.
Snippets like “currentCtx”, which tell me what tool is currently active.
So I’ll just copy this example…
…paste it into my if statement…
And change the example from scale to move.
So now what this says is that even after a “toolChanged” event occurs,
we still check if that tool is the Move Tool. Only if it is do we move on.
Lastly, I’ll change the step's text to give more specific instruction.
You even have the ability to place text relative to UI components,
so they’ll “stick” to them even if the UI is reconfigured!
And sure enough if I test the tutorial again,
the next step won’t trigger until I select the Move Tool!
As you can see, Python scripts are very powerful.
They allow you to do almost anything!
And triggers aren’t the only spot where you can use them, either.
You can also use them to set up steps too.
So to bring everything together, I’ll add one more step…
…including a setup and trigger component right from the get-go…
…and this time insert it between step 2 and 3.
Now in the setup for this new step, I’ll use the “cmds.polyCube” command
to create a cube as soon as the step begins.
Then I’ll have Mayabot instruct the user to move it using the Move Tool.
And then use my trigger in “Attribute Change” mode…
…to monitor when pCube1.translate is changed.
And one last time I’ll test my tutorial…
…and you'll see on my new step that the cube is created…
…and the tutorial proceeds when I move it!
And that’s all there is to it. Using what I’ve shown in this video,
you’re ready to create any gamified tutorial you want.
Just remember to design your content thoughtfully.
A good tutorial is as much about the content as it is the execution!
And don’t forget, I’ve got plenty of existing interactive tutorials over on the AREA
for your curriculums or just as a starting point for modifying into your own tutorials too.
Just note that only the ones I’ve highlighted are currently compatible
with the Interactive Tutorial Creator App (mainly because they’re newer).
Hopefully with this new tool, you find the creation process itself as fun and
well, creative – as I do!
And if you have any questions about how to use it, or suggestions on how to make it better,
be sure to leave a comment below!
See you next time!