Question

I have a grid of DisplayObjects that when I put a glow on any of them, the glow overlap the other objects.

I was wondering if I could take the glow created by a DisplayObject and put it another, so I can attach it to a container that’s behind all the objects? If someone can suggest a better idea, that would be much appreciated too.

Answer 1

Kodiak has the right idea here but it sounds like once you add the glow to the object it stays there and you don’t remove it. (For example you don’t do somethings like on mouse hover -> glow, on mouse out -> no glow) You want something like Once I hover over the object it glows and the glow itself is always behind the other display objects.

This seems odd to me but what you could is create a duplicate of the grid and place it underneath of the top level ones and then do somethings like…

public function test() {
            // constructor code

            primaryDisObj:Array() = new Array(primaryDO1, primaryDO2);// an array of the instances of the Display Objects on top
            secondaryDisObj:Array() = new Array(secondDO1, secondDO2);// an array of the instances of the Display Objects underneath the originals

            for(var i:uint = 0; i < primaryDisObj.length; i++){
                primaryDisObj[i].name = i;
                primaryDisObj[i].addEventListener(MouseEvent.MOUSE_OVER, overPrimary);
            }

        }

        private function overPrimary(e:MouseEvent):void{
            secondaryDisObj[e.target.name as uint).filters = [new GlowFilter(0xFF6699, .75, 25, 25, 2, 2, false, false)];//Or however you want you filer to look

        }

Without seeing you code it’s kind of hard to figure out what you’re going for but this is the simplest way I can think of to do this.