Flip image animation

Getting Started Newbie Questions
#1

I have this display group, full of stuff like images and buttons.

When a use clicks a button, I would like this display group to do a flip like animation and turn into another display group or image. Kind of like when flipping a card.

I have been beating my head here for way to long on this one and I really need some help.

I would be more than ok with just 1 image flipping into another. [import]uid: 61610 topic_id: 15405 reply_id: 315405[/import]

#2

have you seen the fx in director class for flip.

it involves changing the scale on x axis to a very small number practically to a pixel, then starting from a pixel, stretch the second picture to 100% width that will give you the illusion of flipping a card over sideways.

cheers,

?:slight_smile: [import]uid: 3826 topic_id: 15405 reply_id: 56910[/import]

#3

That effect is also available in Scene Manager [import]uid: 84637 topic_id: 15405 reply_id: 56917[/import]

#4

Sorry Danny,
haven’t used Scene Manager so I forgot to mention that, I will keep that in mind.

cheers,

?:slight_smile: [import]uid: 3826 topic_id: 15405 reply_id: 56922[/import]

#5

I need this to happen in the foreground, not sure how I would use director. [import]uid: 61610 topic_id: 15405 reply_id: 56929[/import]

#6

The idea is *not* to use director or any other library, but to get the idea on how to use it for your object FX inspired by Director.

cheers,

?:slight_smile: [import]uid: 3826 topic_id: 15405 reply_id: 56932[/import]

#7

Is this any good for you

display.setStatusBar( display.HiddenStatusBar )

local groupOne = display.newGroup()

local rectOne = display.newRect(0, 0, 300, 300)
rectOne:setFillColor(140, 140, 140)

groupOne:insert(rectOne)

groupOne:setReferencePoint(display.CenterReferencePoint)
groupOne.x = display.contentWidth/2
groupOne.y = display.contentHeight/2

function rotationPartTwo()

local rectTwo = display.newRect(0, 0, 300, 300)
rectTwo:setFillColor(255, 0, 0)
groupOne:insert(rectTwo)

local function go( event )
transition.to( groupOne, { xScale = 1, time=300} )
end

timer.performWithDelay(0, go )

end

function rotationPartOne()
transition.to( groupOne, { xScale = -0.01, time=300, onComplete=rotationPartTwo } )
end

groupOne:addEventListener(“touch”, rotationPartOne) [import]uid: 88119 topic_id: 15405 reply_id: 57092[/import]