Flipboard Effect on Corona SDK using Lua

1.6k views Asked by At

.

Hi, everybody,

This is not a question, is just to show the code if someone's interested on it.

I used the FLIPBOOK project presented in the Corona Share Your Code site, and changed it a little bit. (http://developer.coronalabs.com/code/flipbook-module-realistic-page-curling-effect).

The main.lua file:

-----------------------------------------------------------------------------------------
--
-- main.lua
--
-----------------------------------------------------------------------------------------

local Flipbook = require 'flipbook'

local nrPages = 6

local myFirstFlipbook = Flipbook:newFlipbook(nrPages, "mainshadow2.png" )

for x=1,nrPages do

    local grp1 = display.newGroup()
    --grp1:setReferencePoint( display.TopLeftReferencePoint )
    local rct1 = display.newRect( 0, 0, display.contentWidth, display.contentHeight )
    --grp1.isVisible = false
    local txt1 = display.newText("Meu texto "..x.." ...", 2, display.contentHeight - 20, native.systemFont, 16)
    txt1:setTextColor(0, 0, 0)
    local img1 = display.newImageRect( "background"..x..".png",display.contentWidth/5*4,display.contentHeight/5*4 )
    img1.x = display.contentWidth/2
    img1.y = display.contentHeight/2
    grp1:insert(rct1)
    grp1:insert(img1)
    grp1:insert(txt1)

    local grp2 = display.newGroup()
    --grp4:setReferencePoint( display.TopLeftReferencePoint )
    local rct2 = display.newRect( 0, 0, display.contentWidth, display.contentHeight )
    --grp1.isVisible = false
    local txt2 = display.newText("Meu texto "..x.." ...", 2, display.contentHeight - 20, native.systemFont, 16)
    txt2:setTextColor(0, 0, 0)
    local img2 = display.newImageRect( "background"..x..".png",display.contentWidth/5*4,display.contentHeight/5*4 )
    img2.x = display.contentWidth/2
    img2.y = display.contentHeight/2
    grp2:insert(rct2)
    grp2:insert(img2)
    grp2:insert(txt2)

    myFirstFlipbook:addPage( grp1 )
    myFirstFlipbook:addMirror( nrPages, grp2 )

end

And flipbook.lua file:

-----------------------------------------------------------------------------------------
--
-- flipbook.lua
--
-----------------------------------------------------------------------------------------


local Flipbook = {
    mask = graphics.newMask( "mask1.png" ),
    mask2 = graphics.newMask( "mask2.png" ),
    currentPage = 1,
    pages = {},
    backPages = {},
    displayGroup = display.newGroup(),
    control = 2
}
Flipbook.__index = Flipbook

function Flipbook:newFlipbook(nrPages, 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.backShadow.isHitTestMasked = false
    tempFlipbook.backShadow.y = display.contentHeight / 2
    tempFlipbook.backShadow.isVisible = false
    tempFlipbook.displayGroup:insert( nrPages + 1, tempFlipbook.backShadow )
    -- Adds event listener
    tempFlipbook.displayGroup:addEventListener( "touch", tempFlipbook )
    ----
    return tempFlipbook
end

function Flipbook:addPage( newPageGroup ) -- Add a new page to your flipbook

    local tempPageImage = newPageGroup
    tempPageImage:setMask( self.mask )
    tempPageImage.maskX = display.contentWidth
    tempPageImage.isHitTestMasked = false
    tempPageImage:setReferencePoint( display.CenterReferencePoint )
    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:addMirror( nrPages, newPageGroup )

    local tempPageImageMirror = newPageGroup
    tempPageImageMirror.isVisible = false
    tempPageImageMirror:setMask( self.mask2 )
    tempPageImageMirror:setReferencePoint( display.CenterReferencePoint )
    table.insert( self.backPages, tempPageImageMirror ) -- Adds new page to pages index
    self.displayGroup:insert( nrPages + 1, tempPageImageMirror )

end

function Flipbook:updateCurlEffect( handleX, handleY, originY ) -- Updates the curl effect assets

    local hX = 0
    if (handleX > display.contentWidth) then
        hX = display.contentWidth
    elseif (handleX < 0) then
        hX = 0
    else
        hX = handleX
    end

    local controlX = 0
    if (hX > display.contentWidth / 2) then
        controlX = (( hX - display.contentWidth / 2) / (display.contentWidth / 2))
    else
        controlX = (( display.contentWidth / 2 - hX ) / (display.contentWidth / 2))
    end
    if controlX < 0.0001 then
        controlX = 0.0001
    end
    if controlX > 0.9999 then
        controlX = 0.9999
    end
    --print(alphaX)

    self.pages[self.currentPage].maskX = hX



    if (hX > display.contentWidth / 2) then
        self.backPages[self.currentPage+1].isVisible = false
        self.backPages[self.currentPage]:setMask(self.mask2)
        self.backPages[self.currentPage].isVisible = true
        self.backPages[self.currentPage].xReference = 0
        self.backPages[self.currentPage].x = (display.contentWidth - hX)
        self.backPages[self.currentPage].maskX = display.contentWidth / 2
        self.backPages[self.currentPage].xScale = controlX

        if (self.control > 1) then
            self.backShadow:scale(-1,1)
            self.control = 1
            --self.backShadow.xReference = display.contentWidth / 2
            self.backShadow.x = display.contentWidth + 21
            self.backShadow.maskX = 0
        end
    else
        self.backPages[self.currentPage].isVisible = false
        self.backPages[self.currentPage+1].isVisible = true
        self.backPages[self.currentPage+1]:setMask(self.mask)
        self.backPages[self.currentPage+1]:toFront()
        self.backPages[self.currentPage+1].xReference = 0
        self.backPages[self.currentPage+1].x = hX
        self.backPages[self.currentPage+1].maskX = display.contentWidth / 2
        self.backPages[self.currentPage+1].xScale = controlX

        if (self.control < 2) then
            self.backShadow:scale(-1,1)
            self.control = 2
            --self.backShadow.xReference = display.contentWidth / 2
            self.backShadow.x = -21
            self.backShadow.maskX = 0
        end
    end
    self.backShadow.alpha = controlX
    --self.backShadow.sizeX = display.contentWidth

end

function Flipbook:setAssetsVisible( isVisibleBoolean ) -- Curl effect assets visibility switch box
    if isVisibleBoolean then
        self.backPages[self.currentPage].isVisible = isVisibleBoolean
        self.backShadow.isVisible = isVisibleBoolean
        self.backShadow:toFront()
        self.backPages[self.currentPage]:toFront()
    else
        --for k,v in pairs(self.backPages) do
        for k=1, #self.backPages do
            self.backPages[k].isVisible = isVisibleBoolean
        end
        self.backShadow.isVisible = isVisibleBoolean
    end
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

return Flipbook

For the files backgroundX.png I used the files from FLIPBOOK project.

And for the mainshadow2.jpg, I used a hole black image with a 75% alpha, based on the mainshadow.jpg size from the FLIPBOOK project.

Hope it helps.

Best regards.

Alexandre Flores de Almeida

1

There are 1 answers

1
Alexandre Almeida On

It's already answered. It's not a question, but code for the community.