Blinking Text Tutorial

In this tutorial, you'll learn how to create a line of blinking text using an interaction loop.

Tip

You can use the basic structure of this interaction loop to create any sort of interaction that you want to occur over and over again indefinitely.

Check out the timer tutorial for another example of an interaction loop.

Note

Click here to download the completed RP file for this tutorial.

1. Widget Setup

1. Open a new RP file and open Page 1 on the canvas.

2. Drag a Heading 1 widget onto the canvas and set it to hidden by clicking the Hidden icon in the Style pane or the style toolbar.

2. The Blinking Interaction

Toggle the Widget's Visibility When the Page Loads

1. Click a blank spot on the canvas to select the page and then click New Interaction in the Interactions pane.

2. Select the Page Loaded event in the list that appears, and then select the Show/Hide action.

3. In the Select Widget dropdown, choose the heading widget.

4. Select Toggle, and then click OK to save the action.

Set the Loop Interval with a Wait Action

5. Click the Insert Action icon at the bottom of the Page Loaded block, and select the Wait action in the list that appears.

6. Enter 500 in the ms field and click OK to save the action.

Create the Loop by Firing the Page Loaded Event Again

7. Click the Insert Action icon at the bottom of the Page Loaded block, and select the Fire Event action in the list that appears.

8. Select Page in the Target dropdown and click Add Event.

9. Select Page Loaded in the event list and click OK to save the action.

4. Preview the Interaction

Preview the page. The heading should be blinking in and out of view continuously.