Change color of vector objects on the fly?

cindy.h1986 · February 12, 2013, 10:11am

When I press a button I want three vector shapes to change color to indicate an action has begun, what is the best way to do so?

I create my shapes in a for loop then when button is released this is called

function doSearchAndChangeColors()  
 shapes[1]:setFillColor(14,29,84,255)  
 shapes[2]:setFillColor(14,29,84,255)  
 shapes[3]:setFillColor(14,29,84,255)  
end

But the odd thing is, sometimes the 3rd shape doesn’t change color so I tried this:

function doSearchAndChangeColors()  
 for i = 1, 3 do  
 shapes[i]:setFillColor(14,29,84,255)  
 end  
end

But after a while it stop changing color on the 3rd shape again.
[import]uid: 65840 topic_id: 35849 reply_id: 335849[/import]

bjsorrentino · February 12, 2013, 3:01pm

Hello @cindy.h1986,
Your code looks correct in both instances, so it must be another issue. Can you please post more code where you display the shapes, and the button code which triggers this color change function?

Thanks,
Brent
[import]uid: 200026 topic_id: 35849 reply_id: 142555[/import]

cindy.h1986 · February 13, 2013, 5:13am

False alarm…I had a typo…

But when I found my error I got so happy I wanted to get fancy with my shapes so I decided to flip them ( scale in X -----> change color ------> scale out X ) but the problem is that it flips all three but only change color on the third. Why?

[code]
local shapes = {}
for i = 1, 3 do
shapes[i] = display.newRoundedRect(group, 0, 0, 88, 88, 8)
shapes[i]:setReferencePoint(display.CenterReferencePoint)
shapes[i].x = 62+(i-1)*98
shapes[i].y = 240
shapes[i]:setFillColor(40, 40, 140, 255)
end

function flip(obj, time)

local transTime = time or 500
function scale1()
local one = transition.to(obj, { xScale = 0.001, yScale = 1.0, time = transTime, delay = 0, alpha = 1.0, onComplete = function() obj:setFillColor(14,29,84,255) scale2() end })
end

function scale2()
local two = transition.to(obj, { xScale = 1.0, yScale = 1.0, time = transTime, delay = 0, alpha = 1.0, onComplete = function() end })
end

scale1()
end

function doSearchAndChangeColors()
for i = 1, 3 do
flip(shapes[i], 500)
–shapes[i]:setFillColor(14,29,84,255)
end
end
[/code] [import]uid: 65840 topic_id: 35849 reply_id: 142628[/import]

bjsorrentino · February 13, 2013, 9:00am

Hello @cindy.h1986,
I would simplify this a bit, as such. The easing “outQuad” also gives it, perhaps, a better flipping effect, although you can take that out if you don’t like it.

[code]
local myObject = display.newRect(100,100,100,100) ; myObject:setFillColor(255)

local function flip( obj, time )

local transTime = time or 500

local function changeColor( target )
target:setFillColor(14,29,84,255)
flip( obj,time )
end

if ( obj.xScale < 1 ) then
transition.to( obj, { xScale = 1, time = transTime, transition=easing.outQuad } )
else
transition.to( obj, { xScale = 0.001, time = transTime, transition=easing.outQuad, onComplete=changeColor } )
end

end

flip( myObject,500 )
[/code] [import]uid: 200026 topic_id: 35849 reply_id: 142644[/import]

bjsorrentino · February 12, 2013, 3:01pm