**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).

**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.

**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".

Click the "Add directional notes associated with this voice line" field.

**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

CoPilot Designer - Flow Editor

Flow Editor Menu Options Overview

Add Pop-Up Node

Add Dialogue Node