Axure Docs
  • Axure RP Reference
  • Axure RP Tutorials
  • Axure Cloud Reference
  • Axure Support
  • Download

›Complex Interactions

The Basics

  • Interactive Button
  • Hiding and Showing Widgets
  • Pass Text to Next Page
  • Anchor Link
  • Embedding Media
  • Full Width Image or Banner
  • Scrolling Region
  • Rotating Carousel / Slideshow
  • Navigation Menu
  • Tooltips
  • Tab Menu
  • Accordion Menu
  • Drag and Drop

Complex Interactions

  • Account Login
  • Auto Tab Fields
  • Blinking Text
  • Dynamically Set Droplist Options
  • Set Text with Droplist
  • Required Fields
  • Scroll Activated Sticky Header
  • Set Dynamic Panel State on Next Page
  • Slider Control
  • Terms and Conditions
  • Timer

Mobile Patterns

  • Swiping Slideshow
  • Toggle Switch

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

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

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

Create the Loop by Firing the Page Loaded Event Again

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

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

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

← Auto Tab FieldsDynamically Set Droplist Options →
  • 1. Widget Setup
  • 2. The Blinking Interaction
    • Toggle the Widget's Visibility When the Page Loads
    • Set the Loop Interval with a Wait Action
    • Create the Loop by Firing the Page Loaded Event Again
  • 4. Preview the Interaction
Axure Docs
Stay Connected

Sign up to receive Axure tutorials and news. You can unsubscribe at any time.

Axure
TourEnterpriseCompanyDownloadPurchase
Legal
Customer AgreementPrivacy PolicyGDPRSecurityPatents
Resources
BlogForumLicense PortalAxure Cloud
Support
Learn and SupportGetting StartedReferenceWidget LibrariesAxure RP 8 Documentation and Tutorials
Copyright © 2002–2021 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.