How to create a blinking effect with Corona SDK

Screen Shot 2013-03-31 at 10.53.15 AM

Today’s post is a quick one, but I’ve seen some developers ask how to create a blinking effect with Corona SDK. Creating a blink effect is as simple as modifying the alpha attribute on a display object (text, image or otherwise). Let’s take a look at the source code on how to make our text blink.

The first step is to hide the display bar and set some global variables.

--Hide status bar from the beginning
display.setStatusBar( display.HiddenStatusBar ) 

-- Set Variables
_W = display.contentWidth; -- Get the width of the screen
_H = display.contentHeight; -- Get the height of the screen

Next, we will add a text display object to the screen. We will be making this object blink in our example, but you can use an image here as well.

local txt_taptobegin = display.newText("This is Blinking Text", 100, 100, "Arial", 22)
    txt_taptobegin.x = _W/2
    txt_taptobegin.y = _H/2

Then, we will create the blink function. In this function, we are running a simple if-then-else statement. If the alpha (transparency) of the object is below 1, then set the transition to alpha 1. Otherwise, set the transition to alpha 0.1.

function blink()
    if(txt_taptobegin.alpha < 1) then txt_taptobegin, {time=490, alpha=1})
    else txt_taptobegin, {time=490, alpha=0.1})

After the function, we will create a timer that will be called every 500ms. The key part to making the blink effect work is the timing. In the, I’ve set the time to 490ms and the timer has been set to 500ms. The must be completed before the timer. Otherwise, you setting your app up for some weird effects.

txt_blink = timer.performWithDelay(500, blink, 0)

And that’s it to make a display object ‘blink’! Thank you for reading another post by That’s So Panda!

  1. This code is broken.

    • Hello, what’s broken about this code? Can you provide some debugging information instead of just ‘broken’?

      • “& lt ” should be <

        • Thanks for the heads up. Somehow, my code widget converted all of my < to <

  2. This tutorial is not clear, please give example of the display when it is applied

    • I’m not entirely sure what you mean, but you could use blinking text in a lot of different scenarios. One scenarios is if the score goes up, you could make the text blink. Or, you could make the text blink as a warning sign for low health. Or, you can use blinking text to put emphasis on something (there’s better ways to do this than blinking text, but you get the idea).

Leave a Reply