The Text Crawler element allows you to easily add scrolling texts to your Overlays. This is useful for creating news tickers, calls to action, showing weather info, displaying audience comments, and more.
Supported Data
The Text Crawler can be built using static texts, or binding it to data from a Data Provider to make it dynamic.
Supported data sources are:
A Google Spreadsheet: using a Google Sheets Provider.
A Collection: using a Collection Provider.
Other sources: using an External Connector. In this case, the data source can be a JSON, XML or RSS.
In case of using a JSON connector, it is necessary that the data is an array, otherwise it will not allow to bind it.
Creating a Text Crawler
You need to add a Text Crawler element to your Tree. An Overlay will be created automatically if you did not add it to Tree before adding the element.
To learn how to add Elements to your Graphics Editor, click here.
1. Using a static text
Use it as a call to action, or add any text you want to show.
(1) Select the Text Crawler element added to your Tree.
(2) Edit the text you want to display. Each line of text (up until a line break or "enter" character) will be displayed as a different item on the Crawler, divided by customizable separators (see Properties section below).
2. Connected to a Google Spreadsheet
Use a spreadsheet as your texts rundown for news or messages.
(1) Create a Google Sheets Provider and connect a Spreadsheet.
(2) Select the Text Crawler element.
(3) Input the cell range that contains the data you want to display. Each row will be mapped to a Crawler item.
(4) Use the Texts Concatenation control to compose the text for each Crawler item. You can mix custom text with data from the Spreadsheet, specifying the columns from which you want to get the strings. You can reorder these texts by dragging them around.
3. Connected to a Collection
Show messages from your audience through a comments ticker.
(1) Create a Collection Provider and pick a Collection.
(2) Select the Text Crawler element.
(3) Connect the list of posts you want to display. Each post will be mapped to a Crawler item.
(4) Compose the text for each Crawler item by using the Text Concatenation control. You will be able to bind to data from each Post, such as handle, username, and post content, and also add custom characters like @, /, :, to display social content.
4. Connected to an External Connector
Display data from an external source such as JSON, XML, or RSS.
(1) Create an External Connector and connect a source. In the example above we are using an Atom/RSS Feed.
(2) Select the Text Crawler element.
(3) Bind it to the entries array. Each object of the array will be mapped to a Crawler item.
(4) Use the Text Concatenation control to compose the Crawler items. You will be able to bind to strings of each binded object, such as title, description, numbers, and dates.
Properties
Selecting the "Text Crawler" in the Tree, you will be able to edit its properties from the Inspector.
Speed: How quickly the words move across the screen.
Delay: In seconds, before the text starts to scroll.
Reverse: If active, the text will scroll from left to right.
Separator: The element displayed between each Crawler item to visually differentiate them.
Text: Any characters combination, like ///, or even emojis.
Image: Upload a jpeg, gif, or SVG image. It will be sized according to the height of the text.
Animation Type: As long as the Text Crawler is visible, it will loop through the items. That animation can behave in two ways:
Batch: The entire group of chained Crawler items will scroll all the way until they last one exits, before the first one appears again.
Continuous: Crawler items will loop continuously. The last one will be immediately followed by the first one, without space between them.
Right To Left
Bear in mind enabling RTL text will affect the following elements throughout the graphic: Text block, Text Crawler, and Post Content.
Go to the Graphics Package general settings, by clicking on an empty space on the Canvas. Then enable the RTL support by clicking on the toggle.
By enabling this option, the text direction on these elements will be right to left, both on the Canvas and the editable inputs on the Inspector panel.
