How would I go about fading a button out and in with Corona?

Getting Started Newbie Questions
#1

I’m simply wondering how I would go about making a button fade out and fade in properly in Corona considering composer, here’s what I have:

local function fadePlayButtonIn( button, event ) print( "in" ) transition.fadeIn( button, { time=500, onComplete=fadePlayButtonOut } ) end local function fadePlayButtonOut( button, event ) print( "out" ) transition.fadeOut( button, { time=500, onComplete=fadePlayButtonIn } ) end fadePlayButtonOut( playButton )

With this code, it fades the button out and back in but it doesn’t repeat it once it has been faded back in. I have this code in the “function scene:show( event ) {}” composer function too…

#2

nvm, I managed to solve it using this code:

local function fadeInOut( button ) transition.to( button, { time=700, alpha=0 } ) transition.to( button, { time=700, delay=600, alpha=1, onComplete=fadeInOut } ) end fadeInOut( playButton )
#3

okay, now this code does the same thing… flickers the fade of the button once the scene is reloaded a couple of times… PLZ HELP

#4

Hi @mykhpl,

How did you construct the button?

As for the flickering, that may be that you’re stacking up “opposing” transitions, or not timing consecutive transitions properly. In your code, I can even see that you start the “fade out” after 600 ms, but your “fade in” is 700 ms, so you have 100 ms where the transitions are fighting against each other, one trying to pull it to alpha=0 while the other tries to pull it to alpha=1.

Best regards,

Brent

#5

I’d code it like this (assuming you’re using a basic rectangle and a touch listener an not a widget button):

local function fadeIn( self ) print( "in" ) transition.cancel( self ) transition.to( self, { delay = 100, time=500 } ) end local function fadeOut( self ) print( "out" ) transition.cancel( self ) transition.to( self, { time=500, onComplete = self } ) end -- Create the button here playButton = ... -- Attach the fade out method to the button playButton.fadeOut = fadeOut -- Attach the fade in method to the button as 'onComplete' playButton.onComplete = fadeIn -- Now you can test it: playButton:fadeOut() -- will fade out, wait, then fade back in -- A basic touch listener for this would be: function playButton.touch( self, event ) if( event.phase == "ended" ) then self:fadeOut() end end playButton:addEventListener("touch")
#6

nvm, I managed to solve it using this code:

local function fadeInOut( button ) transition.to( button, { time=700, alpha=0 } ) transition.to( button, { time=700, delay=600, alpha=1, onComplete=fadeInOut } ) end fadeInOut( playButton )
#7

okay, now this code does the same thing… flickers the fade of the button once the scene is reloaded a couple of times… PLZ HELP

#8

Hi @mykhpl,

How did you construct the button?

As for the flickering, that may be that you’re stacking up “opposing” transitions, or not timing consecutive transitions properly. In your code, I can even see that you start the “fade out” after 600 ms, but your “fade in” is 700 ms, so you have 100 ms where the transitions are fighting against each other, one trying to pull it to alpha=0 while the other tries to pull it to alpha=1.

Best regards,

Brent

#9

I’d code it like this (assuming you’re using a basic rectangle and a touch listener an not a widget button):

local function fadeIn( self ) print( "in" ) transition.cancel( self ) transition.to( self, { delay = 100, time=500 } ) end local function fadeOut( self ) print( "out" ) transition.cancel( self ) transition.to( self, { time=500, onComplete = self } ) end -- Create the button here playButton = ... -- Attach the fade out method to the button playButton.fadeOut = fadeOut -- Attach the fade in method to the button as 'onComplete' playButton.onComplete = fadeIn -- Now you can test it: playButton:fadeOut() -- will fade out, wait, then fade back in -- A basic touch listener for this would be: function playButton.touch( self, event ) if( event.phase == "ended" ) then self:fadeOut() end end playButton:addEventListener("touch")