Immerse Creator - Flow Editor

Kellie Lund
|
56 steps

Talespin

Flow Editor Menu Options Overview

**FLOW EDITOR: (Menu Overview - Node Menu &** **Types of Nodes)**\ \ Now let's get started with building a flow!\ \ First, check out the vertical Node Menu bar, with the nodes:\ \ **Dialogue** ★ (Dialogue which the Virtual Human speaks)\ \ **Decision** ★ (Decisions for the user/learner to choose from and speak/click)\ \ **Condition** (Conditional situations can be set and related to Set Variable Nodes)**\ \ Set Variable** (Variable nodes are created to then be used in Conditional nodes)**\ \ Score** ★ (Scoring nodes assign points to Skills being measured)**\ \ Random** (Create Randomization in an aspect of your Flow)\ \ **Pop-up** ★ (Pop-up Text boxes for the user/learner to gain information)**\ \ Compound** (A designer feature, not noticed by a learner, to group nodes into a compound "sub-canvas")**\ \ Exit** (Use to Exit the learner to the main menu or another Flow or Project)\ \ \ **\*Pro Tip -** The nodes with a ★ are the most commonly used nodes, and they are highlighted to mention that it's common to make flows with just these nodes! \ \ You can make a fully functional and impressive experience using just these nodes. Of course there are great use cases for incorporating the other "more advanced" nodes, but for newer users, these starred nodes are a perfect starting place.\ \ For more guidance on Nodes - refer to the lessons of [Level 5 in TSU!](https://talespinuniversity.com/level-5-home-page)

**FLOW EDITOR: (Menu Overview - Right-side Menu)**\ \ Notice that the flow always includes a STA-1, or a "Start Node".\ \ You need to click the node to pop open the right-side menu panel.\ \ Also notice that the menu has two tabs: "Parameters" and "Properties".

**FLOW EDITOR:** **(Menu Overview - Node Map & Zoom)**\ \ Play around with the view of the canvas by changing the zoom. These features become helpful for navigating flows with complex branching.

**FLOW EDITOR: (Menu Overview - Select & Node Search)**\ \ Above the node menu, you'll see that you can change between the "Select" mouse, (to select a node or click to move the canvas) or use the "Search" field, (if you need to locate a node).

Add Pop-Up Node

**FLOW EDITOR: (Adding Nodes to the Canvas - Pop Up Node)**\ \ Let's add a node to the canvas!\ \ For our example, let's start with a Pop Up Node, as it is usually helpful to start with text to inform the learner about the content they are about to experience.\ \ Click on a Pop-up node and then double-click anywhere on the canvas for it to appear.\ \ You may like to add nodes with this double-click method if you don't want to immediately connect the line between nodes. See the next step for another option.

**FLOW EDITOR: (Adding Nodes to the Canvas - Pop Up Node)**\ \ In the previous step, we showed how you can add a node by clicking the node menu and then double clicking the canvas. \ \ Another way that you can add a node is by clicking the triangle on a node and dragging the line and then releasing it. Then choose the node from the menu. \ \ In this method, the nodes are connected, (and to disconnect them, you'll have to click on the line and delete it).

**FLOW EDITOR: (Adding Nodes to the Canvas - Pop Up Node - Properties Menu)**\ \ After you add a node to the canvas, you'll want to click on it so it opens the right-side panel menu where you'll edit it's properties.\ \ Notice the "Properties" and "Parameters" tabs in the right-side menu panel. \ \ The Properties tab will show the properties (or metadata) that you'll want to edit for the Pop-up node.\ \ The "Parameters" tab of the right side menu panel will be present for every node, but doesn't have applicable fields to edit for every node. The Parameter menu only applies to editing Variables, adding Tags (for designer usage), and viewing Skills that are tracked over the Flow.

**FLOW EDITOR: (Adding Nodes to the Canvas - Pop Up Node - Header, Sub-Header & Message)**\ \ In the Properties menu for the Pop-up node, you can edit the Header and Sub-header and body Message - to reflect what you'd like the user to see.

**FLOW EDITOR: (Adding Nodes to the Canvas - Pop Up Node - Cover Image)**\ \ You can also add a cover image on a Pop-up node, if you'd like!

**FLOW EDITOR: (Adding Nodes to the Canvas - Pop Up Node - Cover Image)**\ \ See this example Pop-Up with a photo 😆 . \ \ **\*Pro Tip:** You may also notice that there is Skill and Variable Syntax added in this example Pop-up node. This is a use case which we often use Pop-up Nodes for at Talespin.

Add Dialogue Node

**FLOW EDITOR: (Adding Nodes to the Canvas - Dialogue Node)**\ \ Now let's add another node! It often makes sense to add a Dialogue node first, for the Virtual Human to speak something to welcome the learner.\ \ Click the arrow and drag it to open the Node menu.\ Click to add a "Dialogue" Node.

**FLOW EDITOR: (Adding Nodes to the Canvas - Dialogue Node - Properties Menu)**\ \ Click on the Dialogue Node to open the right-side menu. Click on the Properties tab to edit the properties.

**FLOW EDITOR: (Adding Nodes to the Canvas - Dialogue Node - Speaker)**\ \ Choose the Virtual Human that you want to speak the line.

**FLOW EDITOR: (Adding Nodes to the Canvas - Dialogue Node - Dialogue Text)**\ \ Click the "Write your dialogue line here" field to type your text.

**FLOW EDITOR: (Adding Nodes to the Canvas - Dialogue Node - Notes)**\ \ Click to add Notes, if you'd like. Notes are not seen by the user/learner - Notes are seen in the Performance Editor, and can be useful for the person doing the editing or the voiceover. \ \ To edit the Notes: click to "Add directional notes associated with this voice line".

**FLOW EDITOR: (Adding Nodes to the Canvas - Dialogue Node - Type)**\ \ Next in the Properties menu for the Dialogue node, you'll notice that you have the option to choose a tone Type.

**FLOW EDITOR: (Adding Nodes to the Canvas - Dialogue Node - Type of Dialogue)**\ \ It is optional to use this Type indication, and while we don't use them super commonly in our Talespin content, they can be helpful at times.\ \ If you'd like to add a Type of dialogue, select one from the drop down. These types will display small animations and associated sound effects to the learner to demonstrate the impact their choices have had on the Virtual Human. \ \ This visual and aural feedback is helpful for the learner to understand how they are doing in the middle of a conversation. This feedback is great for confirming that a learner has made the right choice - or for course correction. \ \ A cue like this is different from the Skills that are tracked through the Scoring nodes - but rather, it's just a way to give immediate feedback the learner needs to know, when they need to know it. - ***None -*** This will display no animation to the learner as the virtual human is speaking - ***Good -*** This will display a green check mark and an upbeat noise to the learner to indicate a positive impact - ***Neutral -*** This will display a yellow slash mark and beeping noise to the learner to indicate a neutral impact - ***Bad -*** This will display a red “x” mark and negative tone to the learner to indicate a negative impact - ***Misunderstood -*** This will display a grey question mark and expectant noise to indicate to the user that their response may not have been understood

**FLOW EDITOR: (Adding Nodes to the Canvas - Dialogue Node - Hints)**\ \ Next you'll notice the option to add Hints.\ \ Hints, as the name suggests - is a subtle way to let the learner know something. Hints are also sometimes used as a way to provide closed captioning or subtitles.

**FLOW EDITOR: (Adding Nodes to the Canvas - Dialogue Node - Hints)**\ \ Hints in 3D Preview will be hidden behind the black results box so you may not even see them! But don't worry, they will be visible to learners in the real experience, as that results box is only shown in 3D Preview.

**FLOW EDITOR: (Adding Nodes to the Canvas - Dialogue Node - Hints)**\ \ Hints in the real experience will still appear in the top right corner position and in small text, but will not be blocked from view as in the 3D Preview.

**FLOW EDITOR: (Adding Nodes to the Canvas - Dialogue Node - Hints)**\ \ Hints will also be shown in the Performance Editor.

**FLOW EDITOR: (Adding Nodes to the Canvas - Dialogue Node - Tags)**\ \ In the final section of the Properties Menu of a Dialogue Node, you'll notice "Tags".\ \ Tags are purely an optional feature for designers to see some kind of color-coded notes in the flow builder - tags do not change the experience for a learner in any way.\ \ Therefore, they may be a feature that you do not utilize at all - but they could be helpful if you have a need for them.\ \ Example uses for tags: \ \- Notes to show stakeholders\ \- Track a best path\ \- Comments for designers

**FLOW EDITOR: (Adding Nodes to the Canvas - Dialogue Node - Tags)**\ \ To create a Tag, you have to go into the Parameters Menu and click on the + button of the Tags toggle.\ \ Enter the name for the Tag. For this example, we created a tag named "has been approved".\ \ To edit a Tag's color, click the 3-dot menu button and click "Edit" and select a new color.

**FLOW EDITOR: (Adding Nodes to the Canvas - Dialogue Node - Tags)**\ \ Finally, to add a Tag (which you can do so to any Node), just add the Tag from within the Properties Menu of the Node.\ \ For this example image, we added a Tag to a Variable Node. Once it's added, you'll see the Tag added onto the node.

Add Decision Node

**FLOW EDITOR:** **(Adding Nodes to the Canvas - Decision Node)**\ \ Okay, let's continue and add another new node to our example Flow! \ \ Click the arrow and drag it and release it to open the Node Menu. \ \ Click to add a "Decision" Node.

**FLOW EDITOR: (Adding Nodes to the Canvas - Decision Node - Add Decisions)**\ \ Click on the Decision Node to open the Properties Menu so you can start editing.\ \ Click to type in the decision option text for the Decisions that the user/learner will choose from!

**FLOW EDITOR: (Adding Nodes to the Canvas - Decision Node - Add Decisions)**\ \ There are always 2 Decision options included in a new Decision node - but you can add more!\ \ Click on the + Add Decision Option button at the top of the Properties panel to add another Decision option. \ \ Type in the dialogue text for that decision. You'll notice that you can edit the text from within the Properties Menu or within the Decision node itself.

**FLOW EDITOR: (Adding Nodes to the Canvas - Decision Node - Address To)**\ \ You'll notice the option for who you'd like the user to "Address To". \ \- This means who you'd like the user to turn their head to look at when they speak their Decision - when wearing a headset to complete the experience. \ \- This may also only be important if there is more than 1 Virtual Human in the experience.\ \ If it's not important to require the user to address a certain Virtual Human, you can just keep "Everyone" selected.

**FLOW EDITOR: (Adding Nodes to the Canvas - Decision Node - Screen Copy)**\ \ Also notice that you can add "Screen Copy" which is an optional space that you could share anything you'd like the learner to read before they make their Decision.

**FLOW EDITOR: (Adding Nodes to the Canvas - Decision Node - Screen Copy)**\ \ Here is an example image of what Screen Copy would look like on a Decision Node.

**FLOW EDITOR: (Adding Nodes to the Canvas - Decision Node - Exit Time)**\ \ Click the checkbox to edit the "Exit Time" if you'd like to add an amount of time for the user to be limited to.

**FLOW EDITOR: (Adding Nodes to the Canvas - Decision Node - Visible & Remove after Selection)**\ \ Next in the Properties Menu of the Decision Node, you'll notice 3 options, which are all ways that a Decision could be in effect removed from the decision options.\ \ Visible:\ Remove after Selection:\ Conditional:

**FLOW EDITOR: (Adding Nodes to the Canvas - Decision Node - add Conditional)**\ \ Click the Conditional checkbox to connect a Conditional.

**FLOW EDITOR: (Adding Nodes to the Canvas - Decision Node - Keywords)**\ \ Keywords, which are automatically generated, are the words that Talespin App will use for voice recognition. That means, they are the words that the technology will listen for in order to understand which Decision the user spoke.\ \ You may edit the Keywords if you'd like, but it is usually not necessary! \ \ It is important to keep in mind that for very short Decision text options, it may be more difficult to discern which Decision was spoken by the user. The best method to avoid confusion is to make the decision options a bit longer or clearly different in their word choice!

Add Scoring Node

**FLOW EDITOR: (Adding Nodes to the Canvas - Scoring Node)**\ \ Super! You've already learned about the arguably most important nodes - the Pop-up Node to provide Pop-up text, as well as the node "spoken" by the Virtual Human (the Dialogue Node), and the node spoken by the Learner (the Decision Node). \ \ Now it's time to add the Scoring Node - which is also highly important and used frequently, as much immersive content is scored for skill performance by the learner!\ \ Click the arrow and drag it to open the Node menu.\ Click to add a "Scoring" Node.

**FLOW EDITOR: (Adding Nodes to the Canvas - Scoring Node - Properties Menu)**\ \ Click on a Scoring Node to open the right-side menu and click on the Properties Menu tab.

**FLOW EDITOR: (Adding Nodes to the Canvas - Scoring Node - Select Skill)**\ \ Here you'll select the Skill that you'd like to assign in this Scoring Node.\ \ For this example, let's choose "Effective Communication".\ Click to increase the Points awarded with this Scoring node for demonstrating this skill.

**FLOW EDITOR: (Adding Nodes to the Canvas - Scoring Node - Select Skill)**\ \ You may score for more than one skill within each Scoring Node.\ \ For this example, let's click the "Add Skill/Score" button at the top of the Properties panel to add another skill.\ \ Let's choose "Accountability".

**FLOW EDITOR: (Continue Adding Nodes to the Canvas - more Dialogue Nodes)**\ \ Let's continue to build out this example Flow. We'll add some more Dialogue Nodes to continue the conversation with the Virtual Human - because, so far we just have built in 1 Dialogue Node - then 1 Decision Node - then Scoring Nodes for the Decision Node....so it's time for the Virtual Human to respond again!\ \ Click to add a connected "Dialogue Node" after each of the Scoring Nodes.

**FLOW EDITOR: (Continue Adding Nodes to the Canvas - more Dialogue Nodes)**\ \ As usual after adding a node, click on it to open the right-side menu and choose the "Properties" tab to edit the properties.\ \ Click to write your dialogue lines.

Add Compound Node

**FLOW EDITOR: (Adding Nodes to the Canvas - Compound Node)**\ \ As you can now imagine, you will continue to build out your Flow! The pattern: Dialogue - Decision - Scoring node is very common, but let's continue to explore a few more Node options!\ \ Let's add a Compound Node.

**FLOW EDITOR: (Adding Nodes to the Canvas - Compound Node)**\ \ After you've added a Compound Node to the canvas, you'll want to click the button on it to "Enter Compound".\ \ You'll be taken into the new Compound Node canvas! This is like a sub-canvas of the main Flow canvas! As long as it is connected in the main canvas Flow, the branching in this Compound Node will function just like the branching in the main canvas.\ \ You'll see that there is a Start and an Exit Node already provided for you within the Compound node - so that your user can be exited out of the Compound branch and right back into the main Flow - or into another Flow or Project of your choosing.

**FLOW EDITOR: (Continue Adding Nodes to the Canvas - Building out a Compound Node)**\ \ Just for demonstration sake, let's build out a few nodes within this example Compound Node.\ \ We moved over the Exit node to create some space on the canvas.\ We'll add a Dialogue Node first.

**FLOW EDITOR: (Continue Adding Nodes to the Canvas - Building out a Compound Node)**\ \ Then you can see that we added a Decision Node, and connected it to the Exit Node. Then we made sure that the Exit Node is directing the user back to the "Compound Parent" - or the original main Flow canvas that we began with.

**FLOW EDITOR: (Continue Adding Nodes to the Canvas - Compound Node)**\ \ To navigate back from this Compound Node and go back to the main flow, you may also click on the arrow in the top left corner.

Add an Exit Node

**FLOW EDITOR: (Adding Nodes to the Canvas - Exit Node)**\ \ You just saw an Exit Node in action within the Compound Node in the previous steps - but let's add one here on the main Flow as well!\ \ You may have various Exit nodes set up within your branched narrative, depending on how many paths you have built! For example, maybe one decision branch is so obviously "bad" and you exit a learner quickly on in the conversation, while another "best path" leads a learner through the complete conversation!

Add a Variable Node

**FLOW EDITOR: (Adding Nodes to the Canvas - Set Variable Node)**\ \ Now let's dive into one of the "more advanced" nodes: the Set Variable Node!\ Click to add a "Set Variable".

**FLOW EDITOR: (Adding Nodes to the Canvas - Set Variable Node)**\ \ If you haven't already created the Variable that you'd like to use, then go to the Parameters Menu tab.\ \ Here you'll see the Variables toggle - this is where you can create Variables that you'll then use in your Set Variable Nodes.

**FLOW EDITOR: (Adding Nodes to the Canvas - Set Variable Node)**\ \ Find the "Variables" toggle (and open it if it's not already open).\ \ Here you'll see the place to add either a String, Number or Boolean Variable.\ \ Don't feel overwhelmed by these Variable terms - they're really not that complicated after you understand the different names!\ \ We have another entire Scribe Tutorial dedicated to Variable Nodes! \ \ ➡️ TSU LINK: Check out[ Level 5: Lesson 6 of TSU!](https://talespinuniversity.com/tsu-lessons-db/lesson-6-cpd-editing-set-variable-nodes)

**FLOW EDITOR: (Adding Nodes to the Canvas - Set Variable Node)**\ \ Make sure you see the link to TSU in the previous step to the dedicated Scribe Tutorial for Set Variable Nodes!\ \ There you'll learn about the important difference between Flow, Project or Org level Variables!

Flow Editor 3D Preview

**FLOW EDITOR: (3D Preview)**\ \ Click on the node that you'd like 3D Preview to play from!\ \ For this example, let's click on the Start Node so it plays from the start of the Flow.

**FLOW EDITOR: (3D Preview)**