Spine Audio

when the "animation" starts, onStart event is called back. So let's play audio.
touching the rocket set the "launch" animation and onStop of the "animation" and onStart of the "launch" is called back
during "launch" animation, "landOff" event is dispatched.

Here is the sample project to download

Lua

custom/components/page01/rocket_image_.lua has addEventListner and onXXX functions.

local spine = require("extlib.spine").new("rocket")

function _M:localPos(UI)
  local sceneGroup  = UI.scene.view
  local layer       = UI.layer

    layer.rocket = spine:newImageRect( _K.imgDir..imagePath, imageWidth, imageHeight)

    layer.rocket.imagePath = imagePath
    layer.rocket.x = mX
    layer.rocket.y = mY
    layer.rocket.alpha = oriAlpha
    layer.rocket.oldAlpha = oriAlpha
    layer.rocket.blendMode = ""
    layer.rocket.oriX = layer.rocket.x
    layer.rocket.oriY = layer.rocket.y
    layer.rocket.oriXs = layer.rocket.xScale
    layer.rocket.oriYs = layer.rocket.yScale
    layer.rocket.name = "rocket"

    layer.rocket:addEventListener("touch", function (event)
        if event.phase ~= "ended" and event.phase ~= "cancelled" then return end
        local state = layer.rocket.state
        local name = state:getCurrent(0).animation.name
        if name == "animation" then
        state:setAnimationByName(0, "launch", false)
        elseif name == "launch" then
        state:setAnimationByName(0, "animation", true)
        end
    end)

    layer.rocket.state.onStart = function(entry)
        UI.animName  = entry.animation.name
        UI.scene:dispatchEvent({name = "action_state_start", entry=entry })
    end

    layer.rocket.state.onInterrupt = function(entry)
        UI.animName  = entry.animation.name
        UI.scene:dispatchEvent({name = "action_state_interrupt", entry=entry })
    end

    layer.rocket.state.onEnd = function (entry)
        UI.animName  = entry.animation.name
        UI.scene:dispatchEvent({name = "action_state_end", entry=entry })
    end

    layer.rocket.state.onComplete = function (entry)
        UI.animName  = entry.animation.name
        UI.scene:dispatchEvent({name = "action_state_complete", entry=entry })
    end

    layer.rocket.state.onDispose = function (entry)
        UI.animName  = entry.animation.name
        UI.scene:dispatchEvent({name = "action_state_dispose", entry=entry })
    end

    layer.rocket.state.onEvent = function (entry, event)
        UI.animName  = entry.animation.name
        UI.eventName = event.data.name
        UI.scene:dispatchEvent({name = "action_state_event", entry=entry })
    end

    sceneGroup.rocket = layer.rocket
    sceneGroup:insert( layer.rocket)

end