Runtime touch listener

Audio and Graphics
#1

Hi, i’m displaying a full screen video in my app. I want the user goes to next or previous scene depending on where the user touches the video object. Can i do that?

 [lua]local function goForward( … )

    composer.gotoScene (“pages.scene24”, {effect=“fromRight”, time=400})

end

local function goBack( … )

    composer.gotoScene (“pages.scene22”, {effect=“fromRight”, time=400})

end

– Scene event functions

video_040 = native.newVideo( Scenegroup, common.centerX, common.bottom, common.w, 1820*common.w/1080 )

video_040.anchorY = 1

  

video_040:load( “assets/videos/Animation_dontpanic.mp4” )

video_040:play()

local function videoListener(event)

        if event.phase == “ended” then

                      video_040:seek(0)  --rewind video after play

                      video_040:play()

          end

      end

video_040:addEventListener( “video”, videoListener) [/lua]

#2

I would have an invisible object over the top of your video with a touch listener attached.  Then, depending on the x-position of where the object is touched it will either go forwards or backwards.

Here’s a slightly modified version of your code (variables renamed and composer functions commented out so it can easily be run stand alone).

local function goForward( ... ) print("---- GOING FORWARDS ----") --composer.gotoScene ("pages.scene24", {effect="fromRight", time=400}) end local function goBack( ... ) print("---- GOING BACKWARDS ----") --composer.gotoScene ("pages.scene22", {effect="fromRight", time=400}) end local function touchListener( event ) if event.phase == "began" then if event.x \> display.contentWidth/2 then goForward() else goBack() end end end -- Scene event functions video\_040 = native.newVideo( display.contentWidth/2, display.contentHeight/2, display.contentWidth, display.contentHeight) --video\_040.anchorY = 1 video\_040:load( "lom.mp4" ) video\_040:play() toucher = display.newRect(0,0,display.contentWidth, display.contentHeight) toucher.x, toucher.y = display.contentWidth/2, display.contentHeight/2 toucher:addEventListener("touch", touchListener) local function videoListener(event) if event.phase == "ended" then video\_040:seek(0) --rewind video after play video\_040:play() end end video\_040:addEventListener( "video", videoListener)

Hope this helps.

#3

That worked perfectly!!  Thank you so much!!

#4

How can this work when native objects render above openGL (i.e. all your Corona objects)?

#5

Dunno, but it does :slight_smile:

#6

Native objects render on top, but user events still bubble to the lower layers.

Check out the sample code for the stop() function of our custom camera preview plugin - https://corona.qweb.co.uk/plugin-android-custom-camera-preview#stop

When the preview is started, the plugin renders a native camera preview in full screen, but the sample code then draws a standard display object to capture tap events and subsequently fire a stop() call to the plugin. It’s a pretty nifty trick really.

#7

Everyday is a school day!

#8

I would have an invisible object over the top of your video with a touch listener attached.  Then, depending on the x-position of where the object is touched it will either go forwards or backwards.

Here’s a slightly modified version of your code (variables renamed and composer functions commented out so it can easily be run stand alone).

local function goForward( ... ) print("---- GOING FORWARDS ----") --composer.gotoScene ("pages.scene24", {effect="fromRight", time=400}) end local function goBack( ... ) print("---- GOING BACKWARDS ----") --composer.gotoScene ("pages.scene22", {effect="fromRight", time=400}) end local function touchListener( event ) if event.phase == "began" then if event.x \> display.contentWidth/2 then goForward() else goBack() end end end -- Scene event functions video\_040 = native.newVideo( display.contentWidth/2, display.contentHeight/2, display.contentWidth, display.contentHeight) --video\_040.anchorY = 1 video\_040:load( "lom.mp4" ) video\_040:play() toucher = display.newRect(0,0,display.contentWidth, display.contentHeight) toucher.x, toucher.y = display.contentWidth/2, display.contentHeight/2 toucher:addEventListener("touch", touchListener) local function videoListener(event) if event.phase == "ended" then video\_040:seek(0) --rewind video after play video\_040:play() end end video\_040:addEventListener( "video", videoListener)

Hope this helps.

#9

That worked perfectly!!  Thank you so much!!

#10

How can this work when native objects render above openGL (i.e. all your Corona objects)?

#11

Dunno, but it does :slight_smile:

#12

Native objects render on top, but user events still bubble to the lower layers.

Check out the sample code for the stop() function of our custom camera preview plugin - https://corona.qweb.co.uk/plugin-android-custom-camera-preview#stop

When the preview is started, the plugin renders a native camera preview in full screen, but the sample code then draws a standard display object to capture tap events and subsequently fire a stop() call to the plugin. It’s a pretty nifty trick really.

#13

Everyday is a school day!