flipbook

[Sparrow]

Hi All

wanting to use the flipbook example and reference it in a storyboard as below and have a button above(infront) of the flipbbok pages, i.e. use the pages to flip and have a button to go back.

But it allthough it works in the simulator the on phone the flipbook pages always come to the front even when added to the ‘local screenGroup = self.view’ i need the pages in the back and button in front.

i have tried :toFront() / :toBack() just hangs… seems to all work fine (pages in back that can be fliped and button in front of all so user can press to go back to other scene) works in sim but, only when installing onto phone flipbook fails
 

– Called when the scene’s view does not exist:
function scene:createScene( event )
 local screenGroup = self.view
 
 image = display.newImageRect(“backbutton.png”,50,50)
 image.x = display.viewableContentWidth * 0.5
 image.y = display.viewableContentHeight - 50
 image.touch = onSceneTouch
 screenGroup:insert(image)
 
 text1 = display.newText( “Scene 1”, 0, 0, native.systemFontBold, 24 )
 text1:setTextColor(000)
 text1:setReferencePoint( display.CenterReferencePoint )
 text1.x, text1.y = display.contentWidth * 0.5, 50
 screenGroup:insert( text1 )
 
----------------flipbook----------------

 

 myFirstFlipbook:addPage( “backgroundTextPage1.png” )
 myFirstFlipbook:addPage( “backgroundTextPage2.png” )
 myFirstFlipbook:addPage( “backgroundTextPage3.png” )
 
 --screenGroup:insert(Flipbook.displayGroup)

 

----------------flipbook----------------
 
 print( “\n1: createScene event”)
 
end

--------------------------------------------------------------------------Flipbook module-------------------------------------------

local Flipbook = {
 mask = graphics.newMask( “mask1.png” ),
 currentPage = 1,
 pages = {},
 displayGroup = display.newGroup()
}
Flipbook.__index = Flipbook

 

function Flipbook:newFlipbook(newBackPage, newBackShadow, newBasicShadow, newCurlShadow) --Create a new flipbook
 local tempFlipbook = setmetatable({},self)
  – Adds a shadow for where the curled page overlaps itself
 tempFlipbook.backShadow = display.newImage( newBackShadow )
 tempFlipbook.displayGroup:insert( tempFlipbook.backShadow )
 tempFlipbook.backShadow:setMask( self.mask )
 tempFlipbook.backShadow.y = display.contentHeight / 2
 tempFlipbook.backShadow.isVisible = false
   – Adds a back page
 tempFlipbook.backPage = display.newImage( newBackPage )
 tempFlipbook.displayGroup:insert( tempFlipbook.backPage )
 tempFlipbook.backPage:setMask( self.mask )
 tempFlipbook.backPage.isVisible = false
  – Adds a shadow for where the curled page overlaps the new page
 tempFlipbook.basicShadow = display.newImage( newBasicShadow )
 tempFlipbook.displayGroup:insert( tempFlipbook.basicShadow )
 tempFlipbook.basicShadow.y = display.contentHeight / 2
 tempFlipbook.basicShadow.yScale = 200
 tempFlipbook.basicShadow.xReference = -1 * tempFlipbook.basicShadow.contentWidth / 2
 tempFlipbook.basicShadow.xScale = 0.01
 tempFlipbook.basicShadow.isVisible = false
  – Adds a shadow to give the edge of the curled page a 3d appearance
 tempFlipbook.curlShadow = display.newImage( newCurlShadow )
 tempFlipbook.displayGroup:insert( tempFlipbook.curlShadow )
 tempFlipbook.curlShadow.y = display.contentHeight / 2
 tempFlipbook.curlShadow.yScale = 200
 tempFlipbook.curlShadow.xReference = tempFlipbook.curlShadow.contentWidth / 2
 tempFlipbook.curlShadow.xScale = 0.01
 tempFlipbook.curlShadow.isVisible = false
  – Adds event listener
 tempFlipbook.displayGroup:addEventListener( “touch”, tempFlipbook )
  ----
 return tempFlipbook
end

 

function Flipbook:addPage( newPageImage ) – Add a new page to your flipbook
 local tempPageImage = display.newImage( newPageImage )
 tempPageImage:setMask( self.mask )
 tempPageImage.maskX = display.contentWidth
 tempPageImage.isHitTestMasked = false
 table.insert( self.pages, tempPageImage ) – Adds new page to pages index
 self.displayGroup:insert( 1, tempPageImage ) – Adds new page to display group
end

 

function Flipbook:updateCurlEffect( handleX, handleY, originY ) – Updates the curl effect assets
 local tempX = ( handleX + ( display.contentWidth - handleX ) / 2 )
  local maskRot = math.deg (math.atan2 (originY - handleY, display.contentWidth - tempX))
  
  print( handleX, handleY, originY )
  print( tempX, maskRot )

 

  self.pages[self.currentPage].maskRotation = maskRot / 6
  self.pages[self.currentPage].maskX = tempX - display.contentWidth / 2

 

  self.backPage.xReference = display.contentWidth / 2 - tempX - 2 
  self.backPage.rotation = maskRot / 3
  self.backPage.x = tempX
  self.backPage.maskRotation = maskRot / -6
  self.backPage.maskX = display.contentWidth / 2 - tempX

 

  self.backShadow.xReference =  display.contentWidth / 2 - tempX
  self.backShadow.rotation = maskRot / 3
  self.backShadow.x = tempX + 10 * (handleX / display.contentWidth)
  self.backShadow.maskRotation = maskRot / -6
  self.backShadow.maskX = display.contentWidth / 2 - tempX - 10 * (handleX / display.contentWidth)

 

  self.curlShadow.rotation = maskRot / 6
  self.curlShadow.x = tempX
  self.curlShadow.xScale = 1.01 - handleX / display.contentWidth

 

  self.basicShadow.rotation = maskRot / 6
  self.basicShadow.x = tempX
  self.basicShadow.xScale = 1.01 - handleX / display.contentWidth / 3
end

 

function Flipbook:setAssetsVisible( isVisibleBoolean ) – Curl effect assets visibility switch box
 self.backPage.isVisible = isVisibleBoolean
 self.backShadow.isVisible = isVisibleBoolean
 self.basicShadow.isVisible = isVisibleBoolean
 self.curlShadow.isVisible = isVisibleBoolean
end

 

function Flipbook:touch( event )
 if event.phase == “began” then
  if  event.xStart > 5 * display.contentWidth / 6 and self.currentPage < # self.pages or event.xStart < display.contentWidth / 6 and self.currentPage > 1 then
   if event.xStart < display.contentWidth / 6 then
    self.currentPage = self.currentPage - 1
    self.pages[self.currentPage].isVisible = true
   end
   display.getCurrentStage():setFocus( self.displayGroup )
       self.isFocus = true
   self:setAssetsVisible( true )
  else
   return false
  end
 end
 if self.isFocus then
  self:updateCurlEffect( event.x, event.y, event.yStart )
        if event.phase == “ended” or event.phase == “cancelled” then
         self:updateCurlEffect( display.contentWidth, 0, 0 )
   if math.abs(event.x - event.xStart) > display.contentWidth / 6 then
    if event.xStart > 5 * display.contentWidth / 6 and self.currentPage < # self.pages then
     self.pages[self.currentPage].isVisible = false
     self.currentPage = self.currentPage + 1
    end
    self:setAssetsVisible( false )
    display.getCurrentStage():setFocus( nil )
    self.isFocus = nil
   else
    if event.xStart < display.contentWidth / 6 and self.currentPage > 1 then
     self.pages[self.currentPage].isVisible = false
     self.currentPage = self.currentPage + 1
    end
    self:setAssetsVisible( false )
    display.getCurrentStage():setFocus( nil )
    self.isFocus = nil
   end
        end
 return true
 end
end

 

 --function Flipbook:cleanUp()
      
 --end
 
return Flipbook

[primoz.cerar]

Try creating and adding the back button after you have added the flipbook to the sceneGroup in the createScene.

Calling image:toFront() after you have added the flipbook should work also.

[Sparrow]

Thx Primoz

work in simulator doesnt work on phone (can’t see button)

– Called when the scene’s view does not exist:
function scene:createScene( event )
 local screenGroup = self.view
 

 
----------------flipbook----------------

 

 myFirstFlipbook:addPage( “backgroundTextPage1.png” )
 myFirstFlipbook:addPage( “backgroundTextPage2.png” )
 myFirstFlipbook:addPage( “backgroundTextPage3.png” )
 
 screenGroup:insert(Flipbook.displayGroup)

 

----------------flipbook----------------

 

 image = display.newImageRect(“backbutton.png”,50,50)
 image.x = display.viewableContentWidth * 0.5
 image.y = display.viewableContentHeight - 50
 image.touch = onSceneTouch
 screenGroup:insert(image)
 image:toFront()
 
 text1 = display.newText( “Scene 1”, 0, 0, native.systemFontBold, 24 )
 text1:setTextColor(000)
 text1:setReferencePoint( display.CenterReferencePoint )
 text1.x, text1.y = display.contentWidth * 0.5, 50
 screenGroup:insert( text1 )
 
 print( “\n1: createScene event”)
 
end

[Sparrow]

sending flipbook to the back also works on simulator but doesn’t work on phone, button still not infront!!!

must be something to do with the flipbook module bringing pages to front…

– Called when the scene’s view does not exist:
function scene:createScene( event )
 local screenGroup = self.view
 
----------------flipbook----------------

 

 myFirstFlipbook:addPage( “backgroundTextPage1.png” )
 myFirstFlipbook:addPage( “backgroundTextPage2.png” )
 myFirstFlipbook:addPage( “backgroundTextPage3.png” )
 
 screenGroup:insert(Flipbook.displayGroup)
 Flipbook.displayGroup:toBack()

 

----------------flipbook----------------

 

 image = display.newImageRect(“backbutton.png”,50,50)
 image.x = display.viewableContentWidth * 0.5
 image.y = display.viewableContentHeight - 50
 image.touch = onSceneTouch
 screenGroup:insert(image)
 --image:toFront()
 
 text1 = display.newText( “Scene 1”, 0, 0, native.systemFontBold, 24 )
 text1:setTextColor(000)
 text1:setReferencePoint( display.CenterReferencePoint )
 text1.x, text1.y = display.contentWidth * 0.5, 50
 screenGroup:insert( text1 )
 
 print( “\n1: createScene event”)
 
end

[primoz.cerar]

Ah I see the problem. It’s this line:

image.y = display.viewableContentHeight - 50

viewableContentHeight on the device in letterbox is bigger than contentHeight (in portrait) and the screen actually starts at a negative y coordinate. So you are probably positioning it off screen.

try this:

image.y = display.viewableContentHeight + display.screenOriginY - 50

or just try a 100 to see if you get it  on screen.

[Sparrow]

hi Primoz

thx for the post, this also works in simulator not on phone…

also tried deleting : ‘display.getCurrentStage():setFocus( self.displayGroup )’

from the flipbook module as i read it is a reference for root group for all display objects and groups

this also works in editor/simulator not phone!!!

seems like a pretty easy thing… got the flipbook to work landscape and worked out the storyboard change scenes, but can’t see a button even though it’s added after the flipbook object and told to come to the front toFront()…

[Sparrow]

turned the flipbbok object to alpha:

Flipbook.displayGroup.alpha = 0.2

and no image seen BUT… previous scene can been seen.

[primoz.cerar]

That means that your button is off screen. Try this it should put it in the middle of the screen:

 image = display.newImageRect(“backbutton.png”,50,50)
 image.x = display.contentCenterX
 image.y = display.contentCenterY
 image.touch = onSceneTouch
 screenGroup:insert(image)

image:addEventListener(“touch”, image)

If this doesn’t work it’s different kind of problem with the displaying the image itself. Also when you do this even if you don’t see the button try touching the center of the screen and put a print in the touch listener to see if it fires.

Hold on.

Before you do that I see you are not assigning the listener so add the bold line. And I don’t see onSceneTouch implemented did you leave it out or is it missing?

[Sparrow]

feel like a right plonker…

image names in simulator are not case sensitive…

was using “backbutton.png”, image was called “Backbutton.png”…

[primoz.cerar]

he he good one.

Glad you sorted it.

[primoz.cerar]

Try creating and adding the back button after you have added the flipbook to the sceneGroup in the createScene.

Calling image:toFront() after you have added the flipbook should work also.

[Sparrow]

Thx Primoz

work in simulator doesnt work on phone (can’t see button)

– Called when the scene’s view does not exist:
function scene:createScene( event )
 local screenGroup = self.view
 

 
----------------flipbook----------------

 

 myFirstFlipbook:addPage( “backgroundTextPage1.png” )
 myFirstFlipbook:addPage( “backgroundTextPage2.png” )
 myFirstFlipbook:addPage( “backgroundTextPage3.png” )
 
 screenGroup:insert(Flipbook.displayGroup)

 

----------------flipbook----------------

 

 image = display.newImageRect(“backbutton.png”,50,50)
 image.x = display.viewableContentWidth * 0.5
 image.y = display.viewableContentHeight - 50
 image.touch = onSceneTouch
 screenGroup:insert(image)
 image:toFront()
 
 text1 = display.newText( “Scene 1”, 0, 0, native.systemFontBold, 24 )
 text1:setTextColor(000)
 text1:setReferencePoint( display.CenterReferencePoint )
 text1.x, text1.y = display.contentWidth * 0.5, 50
 screenGroup:insert( text1 )
 
 print( “\n1: createScene event”)
 
end

[Sparrow]

sending flipbook to the back also works on simulator but doesn’t work on phone, button still not infront!!!

must be something to do with the flipbook module bringing pages to front…

– Called when the scene’s view does not exist:
function scene:createScene( event )
 local screenGroup = self.view
 
----------------flipbook----------------

 

 myFirstFlipbook:addPage( “backgroundTextPage1.png” )
 myFirstFlipbook:addPage( “backgroundTextPage2.png” )
 myFirstFlipbook:addPage( “backgroundTextPage3.png” )
 
 screenGroup:insert(Flipbook.displayGroup)
 Flipbook.displayGroup:toBack()

 

----------------flipbook----------------

 

 image = display.newImageRect(“backbutton.png”,50,50)
 image.x = display.viewableContentWidth * 0.5
 image.y = display.viewableContentHeight - 50
 image.touch = onSceneTouch
 screenGroup:insert(image)
 --image:toFront()
 
 text1 = display.newText( “Scene 1”, 0, 0, native.systemFontBold, 24 )
 text1:setTextColor(000)
 text1:setReferencePoint( display.CenterReferencePoint )
 text1.x, text1.y = display.contentWidth * 0.5, 50
 screenGroup:insert( text1 )
 
 print( “\n1: createScene event”)
 
end

[primoz.cerar]

Ah I see the problem. It’s this line:

image.y = display.viewableContentHeight - 50

viewableContentHeight on the device in letterbox is bigger than contentHeight (in portrait) and the screen actually starts at a negative y coordinate. So you are probably positioning it off screen.

try this:

image.y = display.viewableContentHeight + display.screenOriginY - 50

or just try a 100 to see if you get it  on screen.

[Sparrow]

hi Primoz

thx for the post, this also works in simulator not on phone…

also tried deleting : ‘display.getCurrentStage():setFocus( self.displayGroup )’

from the flipbook module as i read it is a reference for root group for all display objects and groups

this also works in editor/simulator not phone!!!

seems like a pretty easy thing… got the flipbook to work landscape and worked out the storyboard change scenes, but can’t see a button even though it’s added after the flipbook object and told to come to the front toFront()…

[Sparrow]

turned the flipbbok object to alpha:

Flipbook.displayGroup.alpha = 0.2

and no image seen BUT… previous scene can been seen.

[primoz.cerar]

That means that your button is off screen. Try this it should put it in the middle of the screen:

 image = display.newImageRect(“backbutton.png”,50,50)
 image.x = display.contentCenterX
 image.y = display.contentCenterY
 image.touch = onSceneTouch
 screenGroup:insert(image)

image:addEventListener(“touch”, image)

If this doesn’t work it’s different kind of problem with the displaying the image itself. Also when you do this even if you don’t see the button try touching the center of the screen and put a print in the touch listener to see if it fires.

Hold on.

Before you do that I see you are not assigning the listener so add the bold line. And I don’t see onSceneTouch implemented did you leave it out or is it missing?

[Sparrow]

feel like a right plonker…

image names in simulator are not case sensitive…

was using “backbutton.png”, image was called “Backbutton.png”…

[primoz.cerar]

he he good one.

Glad you sorted it.