Image Transition Help

Solar2D Composer
#1

Hi, I would like to use a transition for my app but am not sure how to do so. I would like “image 1” go to “image 2” and back to “image 1” upon 1 touch. I would like the transition to occur over about 1/10 of a second also. I would also like “image 1” to be hidden or not showing while “image 2” is showing, vis versa. If anyone can help that would be great. Thanks, Joseph [import]uid: 202772 topic_id: 34043 reply_id: 334043[/import]

#2

Basically what you do is load the two graphics and draw them in the same spot. Set the one you want to start invisible to have an alpha=0 and the one that starts with an alpha of 1.0

obj1 = display.newImageRect("img1.png", 100,100)  
obj1.x = 200  
obj1.y = 200  
obj1.alpha = 0.0  
  
obj2 = display.newImageRect("img2.png", 100,100)  
obj2.x = 200  
obj2.y = 200  
obj2.alpha = 1.0

Then you can use transition.to to fade them in and out.

transition.to(obj1, {time=100,alpha=1.0})  
transition.to(obj2, {time=100,alpha=0.0})

Now if you want them to go back and forth, then you can use the onComplete parameter to call a function that does another set of transition.to’s to change the alpha’s back the other way. You will probably want these in separate functions so the transition.to’s onComplete’s can call each other.

[import]uid: 199310 topic_id: 34043 reply_id: 135378[/import]

#3

Thanks, Rob. How would I set it up to where it doesn’t transition until the object is touched? Also, how would I have it change to a different transition after a certain amount of touches? Thanks, Joseph [import]uid: 202772 topic_id: 34043 reply_id: 135393[/import]

#4

You need to look up “touch” events in the documentation. See:

http://developer.coronalabs.com/content/application-programming-guide-event-handling
[import]uid: 199310 topic_id: 34043 reply_id: 135539[/import]

#5

Basically what you do is load the two graphics and draw them in the same spot. Set the one you want to start invisible to have an alpha=0 and the one that starts with an alpha of 1.0

obj1 = display.newImageRect("img1.png", 100,100)  
obj1.x = 200  
obj1.y = 200  
obj1.alpha = 0.0  
  
obj2 = display.newImageRect("img2.png", 100,100)  
obj2.x = 200  
obj2.y = 200  
obj2.alpha = 1.0

Then you can use transition.to to fade them in and out.

transition.to(obj1, {time=100,alpha=1.0})  
transition.to(obj2, {time=100,alpha=0.0})

Now if you want them to go back and forth, then you can use the onComplete parameter to call a function that does another set of transition.to’s to change the alpha’s back the other way. You will probably want these in separate functions so the transition.to’s onComplete’s can call each other.

[import]uid: 199310 topic_id: 34043 reply_id: 135378[/import]

#6

Thanks, Rob. How would I set it up to where it doesn’t transition until the object is touched? Also, how would I have it change to a different transition after a certain amount of touches? Thanks, Joseph [import]uid: 202772 topic_id: 34043 reply_id: 135393[/import]

#7

You need to look up “touch” events in the documentation. See:

http://developer.coronalabs.com/content/application-programming-guide-event-handling
[import]uid: 199310 topic_id: 34043 reply_id: 135539[/import]