Blog | Eggroll Games

I’ve been asked by a few developers about the code behind our child-proof buttons in Touch To Color Farm. We use Corona SDK and the Lua programming language for development but this technique can work in any language with a little tweaking.

How it works

The user touches a button and a “Hold For 3 Seconds” message appears.
If the user continues holding the button down for 3 seconds the action executes.
If at any time the user releases the button or their finger slides off before 3 seconds have passed then the action is not executed.

The flow

A button listener is added to my button image.
When the button is pressed the “Hold For 3 Seconds” message appears on the screen and a timer listener is added that starts counting.
If the timer hits three seconds then execute the action.
If the button is released or the user’s finger slides off the timer listener is removed.

The code

--button listener function
function moreButtonListener(event) 
    local t = event.target
    --if button is being held show hold 3 sec message 
    --and start 3 sec timer
    if event.phase == “began” then
        threeSeconds.alpha = 1
        t.active = true
        Runtime:addEventListener( “enterFrame”, moreButtonCount )
    --if finger moves while holding button check to see if finger
     --is inside button bounds
    elseif event.phase == “moved” and t.active then
        --very specific bounds for my button, these bounds will 
        --vary with different shaped and sized buttons
        if event.x > moreButton.x – moreButton.width/2 + 6 and 
           event.x < moreButton.width + 22 and 
           event.y > moreButton.y – 22 and 
           event.y < moreButton.y + moreButton.height/2 – 6 then
        --do nothing because the user is still within button bounds
        else
        --remove 3 sec timer, hide hold 3 sec message
        --and reset timer count to 0
        Runtime:removeEventListener( “enterFrame”, moreButtonCount )
        threeSeconds.alpha = 0
        moreHoldTimer = 0
        end
    end 
    --if button is released or interrupted remove 3 sec timer,
    --hide hold 3 sec message and reset timer count to 0
    if event.phase == “ended” or event.phase == “cancelled” and t.active then
        t.active = false
        Runtime:removeEventListener( “enterFrame”, moreButtonCount )
        threeSeconds.alpha = 0
        moreHoldTimer = 0
    end
end

-- 3 sec timer
function moreButtonCount(event)
    --count up by 1 every frame 
    moreHoldTimer = moreHoldTimer + 1
    --if you have counted to 100 (roughly 3 seconds) without interruption
    --then you can perform the action
    if moreHoldTimer > 100 then
        --going to eggroll page, hide hold 3 sec message and reset timer
        system.openURL( “itms-apps://itunes.com/apps/eggrollgames” )
        threeSeconds.alpha = 0
        moreHoldTimer = 0
    end
end

--button listener function

function moreButtonListener(event)

local t = event.target

--if button is being held show hold 3 sec message

--and start 3 sec timer

if event.phase == “began” then

threeSeconds.alpha = 1

t.active = true

Runtime:addEventListener( “enterFrame”, moreButtonCount )

--if finger moves while holding button check to see if finger

--is inside button bounds

elseif event.phase == “moved” and t.active then

--very specific bounds for my button, these bounds will

--vary with different shaped and sized buttons

if event.x > moreButton.x – moreButton.width/2 + 6 and

event.x < moreButton.width + 22 and

event.y > moreButton.y – 22 and

event.y < moreButton.y + moreButton.height/2 – 6 then

--do nothing because the user is still within button bounds

else

--remove 3 sec timer, hide hold 3 sec message

--and reset timer count to 0

Runtime:removeEventListener( “enterFrame”, moreButtonCount )

threeSeconds.alpha = 0

moreHoldTimer = 0

end

--if button is released or interrupted remove 3 sec timer,

--hide hold 3 sec message and reset timer count to 0

if event.phase == “ended” or event.phase == “cancelled” and t.active then

t.active = false

Runtime:removeEventListener( “enterFrame”, moreButtonCount )

threeSeconds.alpha = 0

moreHoldTimer = 0

end

-- 3 sec timer

function moreButtonCount(event)

--count up by 1 every frame

moreHoldTimer = moreHoldTimer + 1

--if you have counted to 100 (roughly 3 seconds) without interruption

--then you can perform the action

if moreHoldTimer > 100 then

--going to eggroll page, hide hold 3 sec message and reset timer

system.openURL( “itms-apps://itunes.com/apps/eggrollgames” )

threeSeconds.alpha = 0

moreHoldTimer = 0

end

By the way

The code listed above assumes you have already displayed a button on screen and added a listener to it that calls the function “moreButtonListener”
In Lua there is no button release listener. You must check the button listener event.phase for either “began” (touched) or “ended” (released)
The long condtional statement (if event.x > moreButton.x – moreButton.width/2 + 6 and event.x < moreButton.width + 22 and event.y > moreButton.y – 22 and event.y < moreButton.y + moreButton.height/2 – 6 then) is tracking the finger inside the button area. This is adjusted to the pixel to my liking for my button. Your number values could be completely different.
Use system.openURL( “itms-apps://itunes.com/apps/eggrollgames” ) to go straight to your developer page on the App Store with no redirects.

Resources

You can see this code in action by downloading the free Touch To Color Farm on the App Store here: http://itunes.apple.com/us/app/touch-to-color-farm-activity/id517339696?mt=8 While you’re at it, why not rate the app?

I hope this information is helpful. We love the development community and want to share and help wherever we can. Thanks for reading!

Jungle Jam Featured as one of the Top 50 Apps For Kids by Babble!

Child-Proof Button Coding Technique: Wait Three Seconds

Recent Posts

Archives

Categories

Meta

Find Us Online

Our Apps

Contact Us