How to add a tween to every single item in a tile list?

[FJO]

Hi everybody,

 

I have a tile list that I filled with images using a data provider.

 

What I would like to do is to add a listener for roll over and a listener for roll out:

 

//Listen for RollOver
tiles.addEventListener(ListEvent.ITEM_ROLL_OVER, tile_Over);
//Listen for RollOut
tiles.addEventListener(ListEvent.ITEM_ROLL_OUT, tile_Out);

 

and then, every time I roll over/out a single item I would like to have a glowing effect:

 

private function tile_Over(e:ListEvent):void {

TweenMax.to(e.index, 0.5, {glowFilter:{color:0x24ee37, alpha:1, blurX:30, blurY:30}});

}

private function tile_Out(e:ListEvent):void {

TweenMax.to(e.index, 0.5, {glowFilter:{color:0x24ee37, alpha:0, blurX:30, blurY:30}});

}

 

The problem (I guess) is that using e.index doesn't work because it returns a number so I get and error:

ReferenceError: Error #1069: Property filters not found on Number and there is no default value.

 

but if I use e.currentTarget or e.target what it glows is not the items but the TileList container and the slide bar :S

 

Is there any way to reference each single item and make them glow?

 

Any help is appreciated. Thank you in advance.

[GreenSock]

That's more of a Flex question and unfortunately I'm not a Flex guy but maybe look into indexToItemRenderer() or something. There must be a way to get the data you want from the TileList.

[FJO]

Thank you for trying to help me.

 

Actually this TileList is not a Flex component but a Flash one.

When you pointed me to indexToItemRenderer() I searched in the Adobe AS3 documentation for figuring out how to use it but after trying some examples and get undefined property errors, I realized that what I'm using is the flash TileList. This is the import that I have in the head of my .as file:

 

import fl.controls.TileList;

 

Anyway, I'm still stuck.

I'm a newbie in flash and I don't see a clear way (or method) to get a single item from the tile list in order to use the Tween.

Any idea?

[FJO]

Finally I solved it

 

This is what I used to get a single item from the tile list:

 

event.target.itemToCellRenderer(event.item)

(is inside a function to handle the roll over/out event)

 

But the results are not the best, the glow just appears on the left side of the item

Maybe is because when you fill a tile list the deepest layers,in this case every item one layer, are always on your left. Therefore you can see the glow when your layer is over (in this case over the left layer) but not when your layer has one layer over it (in this case on the right).

 

Now I'm sure I don't know how to make it works.

[GreenSock]

Normally in AS3, you can make a DisplayObject rise to the top of its parent's display list using the setChildIndex() method like:

object.parent.setChildIndex(object, object.parent.numChildren - 1);

[FJO]

Sorry I didn't reply earlier but I didn't touch the project till today.

 

I discovered another way to rise a DisplayObject to the top:

 

this.addChild(event.target as DisplayObject);

 

in my case, on a Tile List:

 

this.addChild(event.target.itemToCellRenderer(event.item) as DisplayObject);

 

but it makes the items move to the top (position) of the screen, not just the to the top (layer) within the Tile List

 

However using your code it works

 

Thank you very much for your help.