Make Objects behave like Radio Buttons in AS3

Question

I would like to implement a very simple way to store a variable containing the last specific "CustomObject" I clicked. I'd like clicks on other objects to be ignored. Take the following sample code for example, given CustomObject extends MovieClip:

//Code within the Document Class:
var square1:CustomObject = new CustomObject();
var square2:CustomObject = new CustomObject();
var square3:CustomObject = new CustomObject();
var triangle1:DifferentObject= new DifferentObject();
square1.x=100; square2.x=200; square3.x=300;
addChild(square1);
addChild(square2);
addChild(square3);
addChild(triangle1);

//Code within the CustomObject Class:
this.addEventListener(MouseEvent.CLICK,radioButtonGlow);
public function radioButtonGlow(e:MouseEvent):void
{
    var myGlow:GlowFilter = new GlowFilter();
    myGlow.color = 0xFF0000;
    myGlow.blurX = 25;
    myGlow.blurY = 25;
    this.filters = [myGlow];
}

This works great for whenever I click on squares- they light up exactly as expected. However, I'd like to implement a functionality that: 1) Stores the last square I clicked into a variable in the document class 2) Removes the glow from all other squares when I click on another one

Any feedback is greatly appreciated!

Answer 1

I suggest creating a class that acts as a collection of CustomObject instances and manages them in that manner (i.e. ensuring only one of that collection can be selected, etc).

Sample:

public class CustomCollection
{

    // Properties.
    private var _selected:CustomObject;
    private var _items:Array = [];

    // Filters.
    private const GLOW:GlowFilter = new GlowFilter(0xFF0000, 25, 25);


    // Constructor.
    // @param amt The amount of CustomObjects that should belong to this collection.
    // @param container The container to add the CustomObjects to.
    public function CustomCollection(amt:int, container:Sprite)
    {
        for(var i:int = 0; i < amt; i++)
        {
            var rb:CustomObject = new CustomObject();
            rb.x = i * 100;

            _items.push(rb);
            container.addChild(rb);
        }
    }


    // Selects a CustomObject at the specified index.
    // @param index The index of the CustomObject to select.
    public function select(index:int):void
    {
        for(var i:int = 0; i < _items.length; i++)
        {
            if(i == index)
            {
                _selected = _items[i];
                _selected.filters = [GLOW];

                continue;
            }

            _items[i].filters = [];
        }
    }


    // The currently selected CustomObject.
    public function get selected():CustomObject
    {
        return _selected;
    }


    // A copy of the array of CustomObjects associated with this collection.
    public function get items():Array
    {
        return _items.slice();
    }
}

Then you can revise your code in the document class to something like:

var collection:CustomCollection = new CustomCollection(3, this);
collection.select(1);

You will need to add your own logic for the click event that deals with selecting the buttons. I suggest adding an index property to each CustomObject as well as a reference to the collection it was added to. That way, you can simply add the click event into the CustomObject class and have the handler function something like:

private function _click(e:MouseEvent):void
{
    _collection.select(index);
}