Hi
Simple thing… Maybe You know… How to put few images on one image that I’am making transition to the screen.
I want to make transition a big Image with small item’s in one move from the bottom of the screen for example
Thanks for help… [import]uid: 13156 topic_id: 5596 reply_id: 305596[/import]
I made something like this :
local menuBar = function(event)
if event.phase == "ended" and menuRect.isVisible == false then
menuRect.isVisible = true
menuRect.alpha = 1
menuRect:toFront()
transition.to(menuRect, {time = 400, x = 239, y = 162 , alpha = 1})
menuItem2.isVisible = true
menuItem2:toFront()
elseif menuRect.isVisible then
transition.to(menuRect, {time = 400, x = 730, y = 162, alpha = 1, onComplete = function() menuRect.isVisible = false; end })
end
end but I have to make delay for the menuItem or it’s show up on game screen 
I thing it’s wrong [import]uid: 13156 topic_id: 5596 reply_id: 19036[/import]
The solution maybe is to make identical transition for the items but I’am not sure is a good way to do this… [import]uid: 13156 topic_id: 5596 reply_id: 19052[/import]
Hi Piotr,
Sorry, I don’t understand what you’re trying to do. But if I have guessed correctly:
Are you aware of the delay paramater in transition.to which will cause a transition to fire after a specified time?
[lua]img = display.newRect( 100,100,100,100 )
transition.to( img, { time=1000, y=img.y+100 } ) – Moves object up by 100 pixels
transition.to( img, { time=500, delay=1000, alpha=0.0 } ) – Waits until previous transition is finished before disappearing[/lua]
You can write two transition events in sequence and by using the delay parameter make it seem like they are firing one after the other.
Hope that helps.
[import]uid: 11393 topic_id: 5596 reply_id: 19085[/import]
Hi thanks for an answer.
I would like to make something like drawer with different items that you can pick up.
Something like popup menu with items that you can drag. I almost done this with this code above. I’am doing this with the same transition for a “drawer” and for the items when a drawer goes in the middle of the screen . I’don’t know is it ok or not but is working. The problem is right now with touching object. When I touch one object whole object are staying on the screen when closing a drawer. Or when opening text time object from the screen going to the drawer because of transition echhh
I made couple if’s
local menuBar = function(event)
if event.phase == "ended" and menuRect.isVisible == false then
menuRect.isVisible = true
menuRect.alpha = 1
menuRect:toFront()
menuItem2.isVisible = true
menuItem1.isVisible = true
menuItem1:toFront()
menuItem2:toFront()
transition.to(menuRect, {time = 400, x = 239, y = 162 , alpha = 1})
if menuItem2.isActive == false then
transition.to(menuItem2, {time = 400, x= 140, y = 155, alpha = 1})
end
if menuItem1.isActive == false then
transition.to(menuItem1, {time = 400, x =220, y = 155, alpha = 1 })
end
elseif menuRect.isVisible then
transition.to(menuRect, {time = 400, x = 730, y = 162, alpha = 1, onComplete = function() menuRect.isVisible = false; end })
if menuItem2.isActive == false then
transition.to(menuItem2, {time = 400, x= 730, y = 155, alpha = 1})
end
if menuItem1.isActive == false then
transition.to(menuItem1, {time = 400, x =730, y = 155, alpha = 1 })
end
end
end Anyone can help me ? maybe a link or any trace Thank You 
[import]uid: 13156 topic_id: 5596 reply_id: 19102[/import]
Hi Piotr,
If I understand you correctly from what I’ve read in your code, you should be using display groups.
From what I can see in your code you are making the “menu” and the “items” transition and become visible separately. If you’ve dragged an item out of the menu, you will want to remove it from the display group so that it does not disappear when you make the menu display group disappear.
I hope the code below simulates what you need:
[lua]function tapHandler( event )
– Since the event.target.id is stored in local variable “button” we can use that to reference the button inside display group “box”
– button is the same as box.B1 or box.B2 or box[“B1”] or box[“B2”] depending on which button was clicked
local buttonID = event.target.id – Assign the clicked button ID to a local variable
local button = event.target
if button.inbox then
print( “You tapped " … buttonID … " which is inside the box” )
button.inbox = false – Set the button to now be out of the box
– Remove the selected item from box and put it in out of box
outofbox:insert( button )
– Make the button bigger within 250ms timeframe
transition.to( button, {time=250, xScale = 1.2 } )
transition.to( button, {time=250, yScale = 1.2 } )
– Make the button smaller AFTER 250ms
transition.to( button, {time=250, xScale = 1.0, delay=250 } )
transition.to( button, {time=250, yScale = 1.0, delay=250 } )
– Move the button down after 500ms
transition.to( button, {time=250, y = button.y + 200, delay=500 } )
– Make the parent box and it’s button children disappear AFTER 500ms
transition.to( box, {time=250, alpha=0.0, delay=750 } )
else
print( “You tapped " … buttonID … " which is outside the box” )
– Move the button back up to join the box
transition.to( button, {time=250, y = button.y - 200 } )
– Make the box reappear
transition.to( box, {time=250, alpha=1 } )
box:insert( button )
button.inbox = true
end
end
box = display.newGroup() – Create a display group called box which contains the items
outofbox = display.newGroup() – Create a display group called outofbox which will contain removed items
img = display.newRect( box, 90, 90, 250, 130 ) – Create a background for the display group
img = display.newRect( box, 105, 105, 105, 105 ) – Draw a rectangle as a button and add it to display group “box”
img:setFillColor( 255,0,0 ) – Fill it with colour red
img.id = “B1” – Give it an ID so we can reference it later when it is clicked
img.inbox = true – Add a variable to tell us if button is inside box
img:addEventListener( “tap”, tapHandler ) – Add a tap event handler, so that function taphandler is called
box[“B1”] = img – Give the button a name “B2” so we can reference it later
img = display.newRect( box, 225, 105, 105, 105 ) – Draw a rectangle as a button and add it to display group “box”
img:setFillColor( 0,0,255 ) – Fill it with colour blue
img.id = “B2” – Give it an ID so we can reference it later so we know what is clicked
img.inbox = true – Add a variable to tell us if button is inside box
img:addEventListener( “tap”, tapHandler ) – Add a tap event handler, so that function taphandler is called
box[“B2”] = button – Give the button an index name “B2” so we can manipulate it later[/lua]
[EDIT]: Changed the code so that button now returns to parent box after second press which is more likely what you want to do. [import]uid: 11393 topic_id: 5596 reply_id: 19190[/import]
Thanks , I did not know that I can add id to the event… sorry still learning…
This menu must show up when the user touch the button.
How you will do this ? Make the same transition with the background and with the items on touch button event ? or maybe I can make transition with whole groups ?
Thank you for your time … [import]uid: 13156 topic_id: 5596 reply_id: 19214[/import]
You can transition whole groups. In fact anything you do to an image object you can do to a group. What you do to the parent will affect the child. The only objects which do not inherit from their parents are native UI objects like text input fields.
[lua]box = display.newGroup() – Box is a display group
transition.to( box, {time=250, alpha=1 } – Perform transition on group[/lua]
- Create a display group called menu
- Put all of your menu items into the menu display group as children
- When user taps the button perform transition.alpha or apply isVisible to the menu display group [import]uid: 11393 topic_id: 5596 reply_id: 19216[/import]
cooool thank you very much I just made another step forward : :) [import]uid: 13156 topic_id: 5596 reply_id: 19217[/import]
No worries. Glad it helped.
Just to clarify: Thanks , I did not know that I can add id to the event…
You’re not adding anything to the event. You’re adding a variable to your img object which is a table. The event doesn’t return an id variable it returns the entire lua table (including your image object) referenced via [lua]event.target[/lua].
[lua]event.target[/lua] IS your object that was fired by the event. So if you had assigned:
[lua]img.name = “My button”
img.visible = “true”
img.color=“red”[/lua]
You would be able to reference them all inside the event handler as:
[lua]event.target.name
event.target.visible
event.target.color[/lua]
or
[lua]local myobject = event.target
myobject.name[/lua]
[import]uid: 11393 topic_id: 5596 reply_id: 19220[/import]
Hi
Once more thank you …
One question more the last one I promise
When I click a object i removing it from box group ( adding to outbox) the background Visible false but when I open a menu once more the background do not cover this item.so… is there a opposite of toFront() or can I manage , witch object is going to front inside the group ? [import]uid: 13156 topic_id: 5596 reply_id: 19223[/import]
box:toFront() that’s al !!!
THANK YOU VERY MUCH !!! [import]uid: 13156 topic_id: 5596 reply_id: 19225[/import]
The opposite of toFront() is toBack()
http://developer.anscamobile.com/reference/index/objecttoback [import]uid: 11393 topic_id: 5596 reply_id: 19226[/import]