Flipping images or a better way?

Getting Started Newbie Questions
#1

I am creating a burn calculator for an EMS app for my hospital.  It will allow the EMS techs and first responders to bring up an image of a person and then tap the affected areas (arms, legs, head, neck, etc) and it will calculate the burn percentages and the necessary drips, etc.

I’ve come up with the front of the calculator, it has 16 different pieces (head, neck, etc) that toggle on/off when clicked and add up the burn percentage to the front.  I need to do the same for the back but I need the images to be flipped.  

At the moment, I have the images added to a group.  Can a group be flipped?  Can images be flipped?  Or do I need to create separate images for the back?

Thanks for any help or suggestions?

John

#2

You can flip a display object ( image, group, shape etc ) by settings its xScale or yScale property to -1, is this what you’re after?

#3

That might be exactly what I’m after!  Can that be done with a transition.  I’d love to do a transition where it looks like it’s flipping over… but I don’t even know if that exists.

Thank you!

#4

You can transition an items xScale from 1 to -1 but it would probably just look like it’s shrinking to nothing and then stretching out again flipped. Maybe if you changed the anchor point of the object first it might work better. Or you could possibly do some flip effect using the image path however I’ve never done much with that so not sure.

#5

Thanks!  That did the trick!  I’m able to use transitions to make it appear to flip as well!

#6

If anyone else needed this functionality, here’s the code I used:

To flip

transition.to( FrontGroup, { time=500, x=320,onComplete=FlipAfter } ) transition.to( FrontGroup, { time=500, xScale=-1 } )

And to flip back

transition.to( FrontGroup, { time=500, x=0 ,onComplete=FlipAfter } ) transition.to( FrontGroup, { time=500, xScale=1} )

Notice that I’m transitioning the x at the same time as the scale.  That gives it a nice even flip at the center access.

#7

You can make a flip effect by modifying the path of an object. Take a look in the graphics 2.0 guide in the documentation.

#8

Specifically, the Graphics-Premium/Fishies2.5D sample.

#9

I’ll take a look.  I’m actually having to do this with two different groups… a front and a back of a person.

#10

You can flip a display object ( image, group, shape etc ) by settings its xScale or yScale property to -1, is this what you’re after?

#11

That might be exactly what I’m after!  Can that be done with a transition.  I’d love to do a transition where it looks like it’s flipping over… but I don’t even know if that exists.

Thank you!

#12

You can transition an items xScale from 1 to -1 but it would probably just look like it’s shrinking to nothing and then stretching out again flipped. Maybe if you changed the anchor point of the object first it might work better. Or you could possibly do some flip effect using the image path however I’ve never done much with that so not sure.

#13

Thanks!  That did the trick!  I’m able to use transitions to make it appear to flip as well!

#14

If anyone else needed this functionality, here’s the code I used:

To flip

transition.to( FrontGroup, { time=500, x=320,onComplete=FlipAfter } ) transition.to( FrontGroup, { time=500, xScale=-1 } )

And to flip back

transition.to( FrontGroup, { time=500, x=0 ,onComplete=FlipAfter } ) transition.to( FrontGroup, { time=500, xScale=1} )

Notice that I’m transitioning the x at the same time as the scale.  That gives it a nice even flip at the center access.

#15

You can make a flip effect by modifying the path of an object. Take a look in the graphics 2.0 guide in the documentation.

#16

Specifically, the Graphics-Premium/Fishies2.5D sample.

#17

I’ll take a look.  I’m actually having to do this with two different groups… a front and a back of a person.