Carousel

thought i’d share this… converted from AS2 project here
http://flash.lillegutt.com/?p=14

i’ve not included the tooltip, but you can drag the carousel with mouse/touch

get the files here: http://www.sendspace.com/file/98a6ec

note the icons are a little bigger than required, but I didn’t have chance to resize them all

[lua]local NUM_ITEMS=20;
local radiusX= 200;
local radiusY= 40;
local centerX = 240;
local centerY = 160;
local speed = 0.05;
local perspective = 3;

local carousel = display.newGroup()
local icons = {}

local function zSort(myTable, myGroup)

table.sort(myTable,
function(a, b)
return a.depth < b.depth – depth is your custom field
end
)
for i = 1, #myTable do
myGroup:insert(myTable[i].img)
end

end

function Icon(i)
local this = {}
local icon = display.newImage(carousel, “images/icon”…i…".png")
this.angle = (i-1) * math.rad(360/NUM_ITEMS);
this.img = icon
return this
end

function update(event)

local icon
local sin = math.sin
local cos = math.cos

for i=1, NUM_ITEMS, 1 do

icon = icons[i]
local img = icon.img

img.x = cos(icon.angle) * radiusX + centerX
img.y = sin(icon.angle) * radiusY + centerY

local s = (img.y - perspective) / (centerX + radiusY - perspective)
img.xScale = s*0.25
img.yScale = s*0.25

icon.angle = (icon.angle + speed) --%math.rad(360)

icon.depth = s

end

zSort(icons, carousel)

end

for i=1, NUM_ITEMS, 1 do
local icon = Icon(i)
icons[i] = icon
end

function onTouch(event)
if(event.phase==“moved”) then
speed = (event.x - centerX) / 2000;
end
end

Runtime:addEventListener(“enterFrame”,update)
Runtime:addEventListener(“touch”, onTouch)[/lua] [import]uid: 6645 topic_id: 3832 reply_id: 303832[/import]

[import]uid: 6645 topic_id: 3832 reply_id: 11651[/import]

@jmp909

Really nice effect! :slight_smile:

[import]uid: 7356 topic_id: 3832 reply_id: 11652[/import]

credit to the original coder. i just ported it :slight_smile: [import]uid: 6645 topic_id: 3832 reply_id: 11657[/import]

It works right off the bat on an Android device without any modification !!
c [import]uid: 24 topic_id: 3832 reply_id: 11673[/import]

this will give you a reflection, but i have not implemented a fade-off. waiting for those masks! :wink:

[lua]function Icon(i)

local this = display.newGroup()

local reflect = display.newImage(this, “images/icon”…i…".png")
reflect.alpha=0.2
reflect.yScale= -1
reflect.y = reflect.height * 1.2

local icon = display.newImage(this, “images/icon”…i…".png")
this.angle = (i-1) * math.rad(360/NUM_ITEMS);
carousel:insert(this)
this.img = this
return this

end[/lua]

also you can get it to fade in the background, but i don’t know what the formula needs to be exactly. you can play with the numbers though

in the [lua]update[/lua] function
[lua] local a = math.min(1,(s*4)-2)
img.alpha=a[/lua]

updated code here:
http://www.sendspace.com/file/33k3jg [import]uid: 6645 topic_id: 3832 reply_id: 11676[/import]

most xcellent… yes… masks…

c. [import]uid: 24 topic_id: 3832 reply_id: 11716[/import]

Hi Jmp909,
If you increase the RadiusY, the icons kind of disappear into the background.

I was trying to adapt this to something like coverflow, straightening the carousel rather than keeping it circular, but am not sure if we can do any 3D Transforms or can we?

Another option was to increase the RadiusY to create the FrontRow type effect, but unless the icons scale based on their position it does not work.

Any one any ideas??

cheers,

Jayant C Varma [import]uid: 3826 topic_id: 3832 reply_id: 12210[/import]

I am not sure if it is Android 2.2 or the Android device in question, the reflections in the modified sample do not work. Instead you see two images.

Android 2.2 had a lot of issues with Corona SDK, Physics is slow, Alpha is faulty.

cheers,

Jayant C Varma [import]uid: 3826 topic_id: 3832 reply_id: 12218[/import]

Jayant,

just noticed that too. we will look into as to why it is doing it.

carlos
[import]uid: 24 topic_id: 3832 reply_id: 12229[/import]