Hi, I was looking at jonathan’s tutorial on how to create a page curl effect on images. So, I thought that this is gone be easy to convert to groups - but I bit my self in the back there.
Is it even possible to add a mask and create a page curl for groups? I definitive need groups, since I want to place objects with handlers on them. I can’t use storyboard or director so thats not an option.
This is so far I came…but when running this code, the second page just pops out when all animations is done. I want it to be present below, before the animation is done…
galleryGroup = display.newGroup()
galleryGroup.isVisible = false
-- create example pages
page1 = display.newGroup()
local bg = display.newImageRect( "page1.png", display.contentWidth, display.contentHeight )
bg:setReferencePoint( display.TopleftReferencePoint )
bg.x, bg.y = display.contentWidth\*0.5, display.contentHeight\*0.5
page1.isVisible = false
page1.alpha=0
page1:insert(bg)
--galleryGroup:remove(1)
page2 = display.newGroup()
local bg = display.newImageRect( "page2.png", display.contentWidth, display.contentHeight )
bg.x, bg.y = display.contentWidth\*0.5, display.contentHeight\*0.5
page2:insert(bg)
page2.alpha = 0
galleryGroup:insert(page2)
galleryGroup:insert(page1)
local curlPage = display.newImageRect( "assets/pageturn-big.png", display.contentWidth, display.contentHeight )
curlPage.x, curlPage.y = display.contentWidth\*0.5, display.contentHeight\*0.5
curlPage.isVisible = false
-- Lite knappar
local btn\_next = display.newImage("assets/Gfx\_GUI\_Sign\_Next.png",0,0)
btn\_next.x = 800
btn\_next.y = 660
galleryGroup:insert(btn\_next)
local action1 = function()
local curlMask = graphics.newMask( "assets/mask\_1024x768.png" ) -- iPhone portrait
galleryGroup:setMask( curlMask )
galleryGroup:insert(curlPage)
galleryGroup:remove(page1)
page2.isVisible = true
-- set initial mask position
galleryGroup.maskX = display.contentWidth \* 0.5+100
galleryGroup.maskY = display.contentHeight \* 0.5
-- prepare the page-to-be-turned and the curl image
page2:setReferencePoint( display.BottomLeftReferencePoint )
curlPage:setReferencePoint( display.BottomRightReferencePoint )
curlPage.rotation = 45
curlPage.x = display.contentWidth+(display.contentWidth\*0.10)
curlPage.y = display.contentHeight + (display.contentHeight\*0.25)
curlPage.isVisible = true
-- show pagecurl animation and transition away (next page should already be in position)
local time = time or 500
local function finish()
galleryGroup:setMask( nil )
galleryGroup:insert(page2)
--transition.to( page2 ,{alpha=1,time=1000})
end
transition.to( page2 ,{alpha=1,time=time+100})
transition.to( galleryGroup, { maskX=-display.contentWidth\*0.75, time=time } )
transition.to( curlPage, { rotation=0, x=0, y=display.contentHeight+20, time=time,onComplete=finish} )
curlPage.yScale = curlPage.y \* 0.2
end
btn\_next:addEventListener("tap",action1) Regards, Joakim [import]uid: 81188 topic_id: 21950 reply_id: 321950[/import]