How do you make a sliding menu?

Hi guys,

I’m trying to create a picker that when you slide your finger to the left or right, it will move the images to the left or right. Does anyone know how to do this? Here is a screen shot of my picker so you can see what I’m trying to accomplish.

http://www.box.net/shared/mqct1il80n5f8038rqgf

Regards,
Jordan Schuetz
Ninja Pig Studios
[import]uid: 29181 topic_id: 13201 reply_id: 313201[/import]

Create a new display group and insert all of the images you want to scroll into it, then they will move together. (The parallax scrolling demo shows how to do this on a larger scale.) [import]uid: 52491 topic_id: 13201 reply_id: 48572[/import]

I think this is what your looking for http://developer.anscamobile.com/forum/2011/07/15/slide-menu

[import]uid: 38820 topic_id: 13201 reply_id: 48580[/import]

None of these examples work. Idk, I have 3 different images, and I need to add them to the group with the different class. Idk I keep getting errors. Btw thanks for your help :slight_smile:

Regards,
Jordan Schuetz
Ninja Pig Studios [import]uid: 29181 topic_id: 13201 reply_id: 48709[/import]

[code]

local topgraphics = display.newGroup()

local edutitle = display.newImage( “edutitle.png”, true )
edutitle.x = 320
edutitle.y = 150
topgraphics:insert( edutitle )

local edutext = display.newImage( “edutext.png”, true )
edutext.x = 320
edutext.y = 525
topgraphics:insert( edutext )

topgraphics.y = 1440
transition.to( topgraphics, { timer = 2500, y = 0 } )

[/code] [import]uid: 10903 topic_id: 13201 reply_id: 48712[/import]

Guys could you see if you could help? I have made another group, so now I’m trying to move the group. The code is listed down below, but the problem is, it’s not moving all the objects in the group. Why not?

[lua]module(…, package.seeall)

_W = display.contentWidth;
_H = display.contentHeight;
require “sprite”
require “ui”

function new()
local localGroup = display.newGroup();
local localGroup2 = display.newGroup()

sky = display.newImage(“sky.jpg”)
sky.x = _W/2; sky.y = _H/2;

local button1 = ui.newButton{
default = “stupidpigbutton.png”,
–over = “playbuttonin.png”,
onRelease = tmr1,
}
button1.x = _W/4.5; button1.y = _H/2
button1.xScale = 1; button1.yScale = 1
button1.scene = “pigselect”

local button2 = ui.newButton{
default = “flyingpigbutton.png”,
–over = “playbuttonin.png”,
onRelease = tmr1,
}
button2.x = _W/1.5; button2.y = _H/2
button2.xScale = 1; button2.yScale = 1
button2.scene = “pigselect”

local button3 = ui.newButton{
default = “ninjapigbutton.png”,
–over = “playbuttonin.png”,
onRelease = tmr1,
}
button3.x = _W/1 + 55; button3.y = _H/2
button3.xScale = 1; button3.yScale = 1
button3.scene = “pigselect”

local button4 = ui.newButton{
default = “selectpigbutton.png”,
over = “selectpigbuttonin.png”,
onRelease = changeScene,
}
button4.x = _W/1.9; button4.y = _H/1.1
button4.xScale = 1; button4.yScale = 1
button4.scene = “game”

pig = display.newImage(“annoyingpig.png”)
pig.x = _W/4.8; pig.y = _H/1.9
pig.xScale = .35; pig.yScale = .35;

localGroup2:insert(button1)
localGroup2:insert(button2)
localGroup2:insert(button3)

local pig1anim = function (event)
transition.to( pig, { time=200, xScale = .5, yScale = .5 } )
transition.to( pig, { time=200, delay = 200, xScale = .4, yScale = .4 } )
end

local function onTouch( event )
local t = event.target
local phase = event.phase
if “began” == phase then

local parent = t.parent
parent:insert( t )
display.getCurrentStage():setFocus( t )
t.isFocus = true
t.x0 = event.x - t.x
elseif t.isFocus then
if “moved” == phase then
t.x = event.x - t.x0
elseif “ended” == phase or “cancelled” == phase then
display.getCurrentStage():setFocus( nil )
t.isFocus = false
end
end

return true
end

local function tmr1(e)
local tmr1 = timer.performWithDelay(400, pig1anim, 0 )
end
localGroup:insert(sky)
localGroup:insert(button4)
localGroup:insert(pig)
localGroup.x = _W/1 - 200
transition.to( localGroup, { timer = 2500, y = 0, x = _W/6 - 70} )

function changeScene(e)
if(e.phase == “ended”) then
director:changeScene(e.target.scene, “crossfade”);
end
end

localGroup2:addEventListener(“touch”, onTouch)
button1:addEventListener(“tap”, tmr1)
button4:addEventListener(“touch”, changeScene)

return localGroup

end[/lua]

Thanks for all your help.

Regards,
Jordan Schuetz
Ninja Pig Studios [import]uid: 29181 topic_id: 13201 reply_id: 48713[/import]

This is a quick sample I wrote using images I had handy that is not going to just fit into your project but will show you a working, sliding group and let you modify it to suit your project.

[lua]display.setStatusBar ( display.HiddenStatusBar )

local myGroup = display.newGroup()

pig1 = display.newImage (“pig1.png”)
pig1.x = 160
pig1.y = 100
myGroup:insert(pig1)

pig2 = display.newImage (“pig2.png”)
pig2.x = 160
pig2.y = 200
myGroup:insert(pig2)
local function onTouch( event )
local t = event.target
local phase = event.phase
if “began” == phase then

local parent = t.parent
parent:insert( t )
display.getCurrentStage():setFocus( t )
t.isFocus = true
t.x0 = event.x - t.x
elseif t.isFocus then
if “moved” == phase then
t.x = event.x - t.x0
elseif “ended” == phase or “cancelled” == phase then
display.getCurrentStage():setFocus( nil )
t.isFocus = false
end
end

return true
end

myGroup:addEventListener(“touch”, onTouch)[/lua]

Try that on it’s own (with two images of yours, obviously.)

It might help you understand how to move a group of objects, then work it into your menu :slight_smile: [import]uid: 52491 topic_id: 13201 reply_id: 48754[/import]

Thanks for you sample code. It somewhat works…how do you add another group to the director class without it coming up with an error?

Regards,
Jordan Schuetz
Ninja Pig Studios [import]uid: 29181 topic_id: 13201 reply_id: 48842[/import]

You shouldn’t get any errors at all. If you want to add it to your director group, though, you CAN use localGroup:insert(myGroup)

Peach :slight_smile: [import]uid: 52491 topic_id: 13201 reply_id: 48981[/import]