Part 6: Creating Interactive Flows
Introduction
What is an Interactive Flow?
Interactive Flows are frontline.io's way to present instruction to users in a structured, step-by-step format using both 2D and 3D content. They enable the support of any form of visual guidance, including training, assembly procedures, maintenance tasks, troubleshooting, and many more.
Interactive Flows are created through a node-based diagram that allows linear or branching paths, making it possible to build simple sequences or more complex decision-driven processes with minimal setup effort.
Once created, an Interactive Flow can be viewed on any device supported by frontline.io without requiring separate versions or platform-specific adjustments.
How to create a new Interactive Flow?
The Interactive Flow Builder is available on frontline.io's Web platform.
To create a new Interactive Flow:
- Open the relevant Project on the Web.
- Select the '+ Create New Item' Button on the right side of the screen.
- Choose Interactive Flow from the drop down menu.
- Enter a clear, identifiable title for the new flow (for example, Changing a [Machine] Gas Valve or Assembling the [Machine] Scaffold).
- Select 'Create' to create the Interactive Flow and mover to the new flow's info page.
Role visibility can be set during creation. These settings can be adjusted later, so they do not need to be finalised at this stage.
The 'Import' tool can also be found here, enabling the creation of Interactive Flows off of Microsoft Guides files.
More information on this feature can be found here: Importing Microsoft Guides
Interactive Flow Setup
Once an Interactive Flow has been created, its information page will open. This page displays the publishing status, publishing history, editing history, and provides access to flow settings through Edit Settings, as well as access to the Interactive Flow Builder through Edit Flow.
The first action after creating a new flow should be to review and update its settings. Selecting Edit Settings opens a window containing the flow title and description, optional AI instructions used for search and summarization, player attribute controls, role-based visibility, cover image options, and the ability to assign the flow to a Digital Twin.
You can also choose whether the flow is available to run in 2D (only displaying uploaded pictures, videos and documents), 3D (displaying animations of the Digital Twin along with any 2D elements), or both (enabling a selection option on first opening the flow).
At this stage, the key requirement is to assign the flow to the correct Digital Twin. In the Connect to a 3D Model section, select the appropriate Digital Twin by clicking its name and confirming that a checkmark appears beside it.
For more details on the available settings in this window, primarily the Player Attributes, more information can be found here: Interactive Flows - Player Attributes
Once selected, simply click outside of the popup to close the window.
Interactive Flow Builder
With the Interactive Flow settings assigned, it's time to start building the flow. Click on the 'Edit Flow' button to open the Interactive Flow Builder.
Once open, a page with the tools to start building a new flow will be displayed.
- Flow Diagram & Start Node - This is the primary workspace. The Start Node is the required entry point for the flow. All nodes intended to be visible during playback must branch from it.
- Language Settings - The flow defaults to English. Additional languages can be added using the right-side language icon and selecting Add Languages. When a language is added, all text-based nodes can be auto-translated, allowing the flow to switch between multiple languages.
- Save Button - Saves the current state of the flow.
- Node Creator - A panel listing all available node types available to build a flow.
- Controls List - A set of additional tools that support the flow-building process.
Building an Interactive Flow
An Interactive Flow is built by connecting nodes containing information into a structure that forms a step-by-step guide. Nodes can contain text, images, PDFs, videos, and frontline.io 3D interactions.
Each node represents a step of a process being displayed, such as individual steps taken while performing a procedure, training module, or troubleshooting document.
When planning the flow, it is important to consider factors such as the target audience, the purpose of the content, and how content will be accessed. These questions can have a significant impact on the structure of the Interactive Flow.
Starting from the 'Start' node, a flow can built into a branching path that guides users. Each node contains a number of input and output points that can be connected by clicking and dragging between them.
Alternatively, a node can be created by clicking and dragging on a connection output to an empty space, and releasing the mouse to prompt a drop down menu of creatable nodes to connect to.
In doing so, a flow can very quickly be assembled and be ready for information population.
It is highly recommended that a flow is fully planned out before animation begins, and for each node to only require simple animations, as this allows for animation re-use across multiple flows.
Understanding Nodes
frontline.io uses a number of different nodes to give users control over how a flow progresses.
All nodes will have a properties panel appear on the right hand side when selected, which (other than the Start node) will contain a Header, Description, Warning pop-ups, Media Elements, and 3D Interactions.
Additional functionality may appear depending on the function of the node selected.
There are 9 different nodes available to use. They are:
Step
Question
Multi Choice
Warning
Input
Go-to Procedure
Switch Platform
Object Target
Start
Step
The Step node is the standard node.
It will display any input text, and will display any media or interactions assigned to it.
Question
The Question node has two connections, Yes and No.
This node can be used to create a branching path in the flow depending on the user selection.
The Yes and No text can be edited to other values as required, and a default option can be selected in the properties panel.
Multi Choice
The Multi Choice node acts as an advanced Question node, allowing for multiple branching connections.
The number and title of these connections is defined under the 'Connections' header in the properties panel, along with the default selection (if any).
The connection labels can be toggled via the On/Off button in the Controls List.
Warning
The Warning node creates a node with a customisable colour designed to highlight attention to an important step.
This is NOT the warning pop-up that interrupts the flow for essential information, available in all nodes.
Input
The Input node includes an input field that can be filled in by the user during the training module or procedure.
Inputs can be set to numbers, text, images or barcodes by the drop down in the properties panel.
The input value is viewable in the analytics after the completion of the flow.
Go-to Procedure
The Go-to Procedure node allows for the nesting of published flows.
Selecting a different published flow will redirect the user to complete the selected flow inside the current flow, before returning for the next step.
This allows for the re-use of standard flows, such as for safety checks or common disassembly procedures.
Switch Platform
The Switch Platform node is designed to provide a dynamic, platform-specific experience in the interactive flow. It acts as a conditional question:
“Is this relevant for this platform?”
This means flows can be customized so that different devices receive different instructions, ensuring a smooth and intuitive user experience.
How It Works:
- The node determines the user’s platform (e.g., PC, AR, or MR devices).
- Based on the platform, it controls what steps are displayed and how they are executed.
Example Use Case:
- For MR/AR Devices: The step might instruct users to physically look at a real machine, guiding them through an interactive process.
- For PC Users: Since they are viewing the content on a monitor, they don’t need to move. Instead, the next step can play automatically without requiring physical actions.
This ensures that users on different platforms receive the most relevant instructions for their environment, improving usability and engagement.
Object Target
The Object Target node allows the flow to switch which Object Target is being used during AR sessions, selecting a new target from the available options set up within the Digital Twin Editor.
When the flow reaches this step, the user will be prompted to anchor to the corresponding real component part before proceeding.
Start
The Start node is where your flow begins.
Nodes that are not connected to the start node will not be visible to the user when playing the flow.
The Start node has inbuilt functionality to first run any 'Pre-required Procedure' before the flow starts, controllable via the properties panel on the right hand side. This allows additional flows to be run before this flow begins (similar to the Go-to Procedure node), meaning that standard processes can be created once and reused across multiple flows.
Adding Content
Each node within the Interactive Flow is able to hold a variety of content to help give a user the information needed to complete their task.
This can be handled from the properties panel that will appear on the right hand side of the screen when a node is selected.
Within this panel, a node can have descriptive text, media and 3D interactions added to it.
Adding Text
Each node contains a Header and Description input that will appear when the Interactive Flow is run in both 2D and 3D modes.
Selecting the 'Edit' icon next to the Header will prompt a pop-up window to appear where text can be input to describe the step the current node represents in detail.
Any text input at this location will be displayed to the user when this node is reached, providing context for their next action.
In addition, if enabled, the text-to-speech system will read the contents of this box as set up in the 'Player Attributes' section of the Interactive Flow settings.
Alternatively, if the text-to-speech needs to say something other than what is written in the description (common for when using abbreviations or the like), the text-to-speech can be set to read a custom input instead using the radio buttons below.
Finally, be aware of the current language the Interactive Flow is set to. If an additional language is wanted, existing text within nodes can be translated into the new language using frontline.io's AI functionality.
To do so:
- Open the Language Management tool.
- Select Add languages.
- Select the languages wanted from the list of those available.
- (Optional) Select Copy text from current default language.
- Select Add.
- Select Translate with AI.
All nodes will have the text within converted to the language options selected, and can be switched between using the language settings drop down menu.
Adding Warning Pop-Ups
Most nodes include the ability to set up a Warning pop-up that interrupts the flow. The warning can be edited to contain information in the same way as a regular node, but will appear center screen when triggered to ensure the user is aware of the flagged information.
This can be used to ensure essential steps are not brushed over or skipped.
Adding Media
Media can be added to any node, including pictures, videos and PDF documents. Any media added to a node will be displayed along with the text, and will appear when the Interactive Flow is run in both 2D and 3D modes.
If multiple languages are in use within the flow, the media will by default use the same media across all languages. If different media is needed to be language specific, it is possible to override the media on non-default languages.
To add media to a node:
- Select the '+' icon next to Media Elements.
- The Project Media Manager will appear.
- (Optional) Upload media using the '+ Upload Media' button in the top right corner.
- Select an uploaded piece of media from the media manager.
- Click 'Save Selection' to assign the media to the node.
Once selected, the media name will be visible under the Media Elements header. To remove any media, click the '-' icon next to its name.
Adding Interactions
Interactions are 3D elements in a Interactive Flow where the Digital Twin is used to demonstrate the details of a node.
Any interaction or animation created for a Digital Twin will be stored within the Animation Manager tied to that twin, and can be reused in other flows referencing the same Digital Twin.
Permission to view the relevant Digital Twin is required.
To add an interaction to a node:
- Select the '+' icon next to Interactions.
- The Animation Manager will appear.
- (Optional) Create a new animation using the '+ New Animation' button in the top left corner.
- (Optional) Preview an animation by hovering the mouse over the 'Play' icon on the left hand side of the menu.
- Assign an animation from the animation manager to the node by selecting the '+' icon to the right of the animation name.
If the Interactive Flow is not linked to a Digital Twin model, no animations will be visible. To establish a connection with a Digital Twin, please check the Interactive Flow setup step of this article.
Once selected, the animation will appear under the Interactions header. To remove any animations, click the '-' icon next to its name.
Each animation will have two selectable buttons that can be toggled on or off underneath its name: 'Is Reverse' & 'Interact'.
Is Reverse: Will play the selected animation backwards. This allows a single animation to be used for both assembly and disassembly, meaning that fewer overall animations need to be created. To make good use of this functionality, it is recommended that animations be broken down into smaller individual nodes for greater reusability.
Interact: Will stop the animation from playing immediately when a user reaches the node. Instead, the animated components will be highlighted, and the animation will play once the highlighted object is interacted with. This is designed to give an additional sense of immersion when progressing through the node to improve user engagement.
Editing & Publishing
Make sure the Interactive Flow is regularly saved during creation using the save button in the top left corner of the screen.
Multiple people can work simultaneously on a single flow, as the Interactive Flow Builder will display all persons editing the flow in the top right corner of the screen.
Any node currently being worked on by one user will be locked to other users until the node is left.
Any changes made to the Interactive Flow will only be viewable to others when the flow is published, which can be done from the Interactive Flow info page by using the 'Publish' button.
Viewing Across Multiple Devices
When an Interactive Flow is created, the content only needs to be created once for it to be immediately available across all devices supported by frontline.io without individual customisation requirements. This includes any PC, mobile devices, Meta Quest devices, HoloLens 2 and Magic Leap 2.
However, please be aware of the hardware limitations of the devices the Interactive Flow is intended to run on. Considerations such aspect ratios must be accounted for when designing camera positioning during animation, and large blocks of text may be harder for users to access during interactive steps.
Related Articles
Part 7: Creating Animations
Introduction frontline.io gives content creators the ability to animate the Digital Twin that are uploaded to the platform, enabling a richer experience within the Interactive Flows by creating dynamic, interactable experiences. Opening the Animation ...Part 2: Setting up your workspace
Introduction What is a Workspace? A Workspace in frontline.io is a dedicated secure domain for your company. It is the environment in which you will be able to access your projects, allowing you to organise your users, Digital Twins, Interactive ...Interactive Flows - Player Attributes
frontline.io provides a variety of options for the (Advanced) Content Creator to customize how the viewer will perceive the Interactive Flows. There are different Modes options and Nodes available within the flow. Now, we will delve into the ...1.1: Creating an Account
Introduction frontline.io's Platforms frontline.io works across multiple platforms, including the web application, PC application, and extended reality environments such as VR, AR, XR, and mobile apps. Your single frontline.io account gives you ...Part 4: Editing a Digital Twin
The Digital Twin Editor The Digital Twin Editor is a PC application, accessible to both regular and advanced content creators on the frontline.io platform. It enables users to structure model hierarchies, define metadata, apply materials, and ...