R – Simplifying Flex/AS3 code

actionscript-3apache-flexflex3oop

I was programming in php for a while but it was all procedural-oriented. Now I have a project in Flex 3 and I made a simple script which animates (moves) few objects but I think that I am missing the point of object-oriented programming here because I am repeating some stuff over and over… Maybe it is mixed together with all of confusions I still have regarding AS3, so please tell me is there any 'smarter' way of writing this code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%" height="100%"
    paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
    horizontalScrollPolicy="off" verticalScrollPolicy="off"
    creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.events.EffectEvent;

            public var opened1:Boolean;
            public var opened2:Boolean;
            public var opened3:Boolean;
            public var opened4:Boolean;

            [Bindable] public var pgW:Number;

            private function init():void{
                pgW = this.width;

                opened1 = false;
                opened2 = false;
                opened3 = false;
                opened4 = false;

                addListeners();
            }

            private function mouseOver1(event:MouseEvent):void{
                removeListeners();

                if (opened2){
                    moveOut.target = txt2;
                }
                if (opened3){
                    moveOut.target = txt3;
                }
                if (opened4){
                    moveOut.target = txt4;
                }

                moveOut.play();
                setOpened(1);
                moveIn.target = txt1;
                moveIn.play();
            }

            private function mouseOver2(event:MouseEvent):void{
                removeListeners();

                if (opened1){
                    moveOut.target = txt1;
                }
                if (opened3){
                    moveOut.target = txt3;
                }
                if (opened4){
                    moveOut.target = txt4;
                }

                moveOut.play();
                setOpened(2);
                moveIn.target = txt2;
                moveIn.play();
            }

            private function mouseOver3(event:MouseEvent):void{
                removeListeners();

                if (opened1){
                    moveOut.target = txt1;
                }
                if (opened2){
                    moveOut.target = txt2;
                }
                if (opened4){
                    moveOut.target = txt4;
                }

                moveOut.play();
                setOpened(3);
                moveIn.target = txt3;
                moveIn.play();
            }

            private function mouseOver4(event:MouseEvent):void{
                removeListeners();

                if (opened1){
                    moveOut.target = txt1;
                }
                if (opened2){
                    moveOut.target = txt2;
                }
                if (opened3){
                    moveOut.target = txt3;
                }

                moveOut.play();
                setOpened(4);
                moveIn.target = txt4;
                moveIn.play();
            }




            private function addListeners():void{
                btn1.addEventListener(MouseEvent.MOUSE_DOWN, mouseOver1);
                btn2.addEventListener(MouseEvent.MOUSE_DOWN, mouseOver2);
                btn3.addEventListener(MouseEvent.MOUSE_DOWN, mouseOver3);
                btn4.addEventListener(MouseEvent.MOUSE_DOWN, mouseOver4);
            }

            private function removeListeners():void{
                btn1.removeEventListener(MouseEvent.MOUSE_DOWN, mouseOver1);
                btn2.removeEventListener(MouseEvent.MOUSE_DOWN, mouseOver2);
                btn3.removeEventListener(MouseEvent.MOUSE_DOWN, mouseOver3);
                btn4.removeEventListener(MouseEvent.MOUSE_DOWN, mouseOver4);
            }

            private function setOpened(nr:int):void{
                if (nr == 1){
                    opened1 = true;
                    opened2 = false;
                    opened3 = false;
                    opened4 = false;
                }
                if (nr == 2){
                    opened1 = false;
                    opened2 = true;
                    opened3 = false;
                    opened4 = false;
                }
                if (nr == 3){
                    opened1 = false;
                    opened2 = false;
                    opened3 = true;
                    opened4 = false;
                }
                if (nr == 4){
                    opened1 = false;
                    opened2 = false;
                    opened3 = false;
                    opened4 = true;
                }
                trace("opened" + nr);
            }

            private function setPositions(event:EffectEvent):void{
                event.effectInstance.target.x = -(pgW);
            }

            private function klik(event:MouseEvent):void {
                event.stopPropagation();
            }
        ]]>
    </mx:Script>

    <mx:Move id="moveIn"
        xFrom="{-pgW}" xTo="0"
        yFrom="0" yTo="0"
        duration="1000"
        effectEnd="addListeners();"/>

    <mx:Move id="moveOut"
        xFrom="0" xTo="0"
        yFrom="0" yTo="250"
        duration="1000"/>


    <mx:Image id="btn1" source="assets/img/32/32-btn1.swf"
            x="0" y="0"
            width="100%"
            click="klik(event)"/>

    <mx:Image id="btn2" source="assets/img/32/32-btn2.swf"
            x="0" y="0"
            width="100%"
            click="klik(event)"/>

    <mx:Image id="btn3" source="assets/img/32/32-btn3.swf"
            x="0" y="0"
            width="100%"
            click="klik(event)"/>

    <mx:Image id="btn4" source="assets/img/32/32-btn4.swf"
            x="0" y="0"
            width="100%"
            click="klik(event)"/>



    <mx:Image id="txt1" source="assets/img/32/32-txt1.swf"
            x="{-pgW}" y="0"
            width="100%"/>

    <mx:Image id="txt2" source="assets/img/32/32-txt2.swf"
            x="{-pgW}" y="0"
            width="100%"/>

    <mx:Image id="txt3" source="assets/img/32/32-txt3.swf"
            x="{-pgW}" y="0"
            width="100%"/>

    <mx:Image id="txt4" source="assets/img/32/32-txt4.swf"
            x="{-pgW}" y="0"
            width="100%"/>
</mx:Canvas>

Thank you very much for your time!

m.

Best Answer

Rather do something like. In pseudocode:

init()
  btn[] = create array of buttons
  txt[] = create array of txt
  opened[] = create array of boolean
  opened[] = false
  for each btn
           btn.mouseover = mouseover
           add listeners

mouseover
  remove listeners
  i = find source btn index from event
  moveout.target = movein.target
  moveout.play
  opened[] = false
  opened[i] = true
  movein.target = txt[i]
  movein.play

Probably you won't need the opened variables.

Related Topic