Displaying image with delay /w fading

Getting Started Newbie Questions
#1

Ok, so I am having some trouble with handling that particular fading/timer event
How do I make this following action?

  1. When the app starts, on the screen you can see some image displayed, for exampe black square
  2. The square remains on screen for like 3 seconds, then it starts to fade quickly from its original color (black here) to transparent so you can see original background clear (// or fades to transparent and just disappears) .
    As I get it, if the fading to transparent is out there, the delay is not really needed. Am i right? Overlooking <this line just look at these 2 points mentioned below - thats all I need to have done.
    Are there any ways to do that? (Code ideas?) Thanks!
#2

If I understand your question correctly, I think this will answer it.

local bg = display.newImageRect("Textures/Corona-Icon.png",300,300) local cover = display.newRect(0,0,300,300) cover:setFillColor(0) bg.x = display.contentCenterX bg.y = display.contentCenterY cover.x = bg.x cover.y = bg.y local function killCover() display.remove(cover) cover = nil print("cover removed") end -- you can delay first if you want - but do not have to. It depends what you want it to look like. -- try both of these transitons... rem out '--' one then the other to see the different looks. -- these both take a total of 3 seconds.. but each will look differently transition.to(cover, {delay = 2000, time = 1000, alpha = 0, onComplete=killCover}) --transition.to(cover, {time = 3000, alpha = 0, onComplete=killCover})luck!

Hope it helps.

Bob

#3

of course you could do this as well…  looks the same.

local bg = display.newImageRect("Textures/Corona-Icon.png",300,300) bg.x = display.contentCenterX bg.y = display.contentCenterY bg.alpha = 0 --transition.to(bg, {delay = 2000, time = 1000, alpha = 1}) transition.to(bg, {time = 3000, alpha = 1})

Changes here are:

there is no cover

bg is set to an alpha of ‘0’

the transitions now have ‘bg’, not ‘cover’ that is being transitioned to an alpha of 1.

#4

I tried it and the code I have used works correctly by itself, but when it comes together with rest of my main.lua some problems appear. The code ‘floors’ were placed in appropriate order (I have tried all combinations), however there is some conflict between displays. The point here is: The image fades to clear, so it is no longer visible on the screen, so you can see the button and use it. Before the image has faded, the button had been covered by it.

This is my code; just copy it and try it.

[lua]-------------------------------background-----------------
local background = display.newImage(“background.png”)

background.width = display.actualContentWidth
background.height = display.actualContentHeight

-------------------------------covering image------------
local bg = display.newImage(“mannelig1.png”)

bg.x = display.contentCenterX
bg.y = display.contentCenterY
bg.alpha = 0

transition.to(bg, {delay = 2300, time = 1000, alpha = 1})

------------------------------------------sound playing button--------------
local widget = require(“widget”)

local BEEP = media.newEventSound(“BEEP.mp3”)

local button_BEEP_Press = function(event)
media.playEventSound(BEEP,button_BEEP_Press)
end

local button_BEEP = widget.newButton
{
defaultFile = “buttondefault.png”,
overFile = “buttonpressed.png”,
onPress = button_BEEP_Press,
}
button_BEEP.x = display.contentCenterX; button_BEEP.y = display.contentCenterY

–when the ‘sound playing button’ was located between ‘background’ and ‘covering image’ it still wasn’t working correctly with rest of the code.

[/lua]

 

#5

I am not real sure what the issue is, but I guess it is the button showing to soon?  So ‘maybe’ this is what you are trying to do…

** you will need to replace the audio and textures, including for the button to test this…  I had use my own audio and textures to test it.

local widget = require("widget") local BEEP = media.newEventSound("Audio/click.mp3") local background = display.newImage("Textures/background.png") background.width = display.actualContentWidth background.height = display.actualContentHeight background.x = display.contentCenterX background.yx = display.contentCenterY local bg = display.newImage("Textures/oddHeart.png") bg.x = display.contentCenterX bg.y = display.contentCenterY bg.alpha = 0 local button\_BEEP = widget.newButton { defaultFile = "Textures/bar.png", overFile = "Textures/bar\_dn.png", onPress = button\_BEEP\_Press, } button\_BEEP.x = display.contentCenterX; button\_BEEP.y = display.contentCenterY button\_BEEP.isVisible = false local button\_BEEP\_Press = function(event) media.playEventSound(BEEP,button\_BEEP\_Press) end local function showButton() button\_BEEP.isVisible = true end transition.to(bg, {delay = 2300, time = 1000, alpha = 1, onComplete=showButton})

hope I understood your question. 

Good luck.

Bob

#6

If I understand your question correctly, I think this will answer it.

local bg = display.newImageRect("Textures/Corona-Icon.png",300,300) local cover = display.newRect(0,0,300,300) cover:setFillColor(0) bg.x = display.contentCenterX bg.y = display.contentCenterY cover.x = bg.x cover.y = bg.y local function killCover() display.remove(cover) cover = nil print("cover removed") end -- you can delay first if you want - but do not have to. It depends what you want it to look like. -- try both of these transitons... rem out '--' one then the other to see the different looks. -- these both take a total of 3 seconds.. but each will look differently transition.to(cover, {delay = 2000, time = 1000, alpha = 0, onComplete=killCover}) --transition.to(cover, {time = 3000, alpha = 0, onComplete=killCover})luck!

Hope it helps.

Bob

#7

of course you could do this as well…  looks the same.

local bg = display.newImageRect("Textures/Corona-Icon.png",300,300) bg.x = display.contentCenterX bg.y = display.contentCenterY bg.alpha = 0 --transition.to(bg, {delay = 2000, time = 1000, alpha = 1}) transition.to(bg, {time = 3000, alpha = 1})

Changes here are:

there is no cover

bg is set to an alpha of ‘0’

the transitions now have ‘bg’, not ‘cover’ that is being transitioned to an alpha of 1.

#8

I tried it and the code I have used works correctly by itself, but when it comes together with rest of my main.lua some problems appear. The code ‘floors’ were placed in appropriate order (I have tried all combinations), however there is some conflict between displays. The point here is: The image fades to clear, so it is no longer visible on the screen, so you can see the button and use it. Before the image has faded, the button had been covered by it.

This is my code; just copy it and try it.

[lua]-------------------------------background-----------------
local background = display.newImage(“background.png”)

background.width = display.actualContentWidth
background.height = display.actualContentHeight

-------------------------------covering image------------
local bg = display.newImage(“mannelig1.png”)

bg.x = display.contentCenterX
bg.y = display.contentCenterY
bg.alpha = 0

transition.to(bg, {delay = 2300, time = 1000, alpha = 1})

------------------------------------------sound playing button--------------
local widget = require(“widget”)

local BEEP = media.newEventSound(“BEEP.mp3”)

local button_BEEP_Press = function(event)
media.playEventSound(BEEP,button_BEEP_Press)
end

local button_BEEP = widget.newButton
{
defaultFile = “buttondefault.png”,
overFile = “buttonpressed.png”,
onPress = button_BEEP_Press,
}
button_BEEP.x = display.contentCenterX; button_BEEP.y = display.contentCenterY

–when the ‘sound playing button’ was located between ‘background’ and ‘covering image’ it still wasn’t working correctly with rest of the code.

[/lua]

 

#9

I am not real sure what the issue is, but I guess it is the button showing to soon?  So ‘maybe’ this is what you are trying to do…

** you will need to replace the audio and textures, including for the button to test this…  I had use my own audio and textures to test it.

local widget = require("widget") local BEEP = media.newEventSound("Audio/click.mp3") local background = display.newImage("Textures/background.png") background.width = display.actualContentWidth background.height = display.actualContentHeight background.x = display.contentCenterX background.yx = display.contentCenterY local bg = display.newImage("Textures/oddHeart.png") bg.x = display.contentCenterX bg.y = display.contentCenterY bg.alpha = 0 local button\_BEEP = widget.newButton { defaultFile = "Textures/bar.png", overFile = "Textures/bar\_dn.png", onPress = button\_BEEP\_Press, } button\_BEEP.x = display.contentCenterX; button\_BEEP.y = display.contentCenterY button\_BEEP.isVisible = false local button\_BEEP\_Press = function(event) media.playEventSound(BEEP,button\_BEEP\_Press) end local function showButton() button\_BEEP.isVisible = true end transition.to(bg, {delay = 2300, time = 1000, alpha = 1, onComplete=showButton})

hope I understood your question. 

Good luck.

Bob