简化Flex / AS3代码

时间:2009-10-19 10:42:49

标签: flex actionscript-3 oop flex3

我在php中编程了一段时间,但它都是面向程序的。现在我在Flex 3中有一个项目,我制作了一个简单的脚本来动画(移动)几个对象,但我认为我在这里忽略了面向对象编程的重点,因为我反复重复一些东西......也许吧混淆了我仍然对AS3的所有困惑,所以请告诉我有没有“更聪明”的方式来编写这段代码:

<?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>

非常感谢你的时间!

米。

4 个答案:

答案 0 :(得分:3)

您的示例代码是完美的OO(面向对象)。

您有四件事(您将使用一个类定义),它包含对Button,文本,打开状态等的引用。因此,您将一个类定义为MXML组件,其中包含一个按钮,一个文本,以及任何其他状态,你把方法放在THAT COMPONENT(在<mx:Script>块)。另外,您可以使用creationComplete方法初始化组件,以便在完成初始绘图时open变量为false。即使您的mouseOver方法也很完美:您可以让对象决定是否需要执行某些操作(MXML组件将自动进行事件处理)。基本上,这就是我们要做的事情:MXML组件处理其自己的内部状态,而不是具有必须管理列表状态的外部对象。

由于MouseOver方法将放在您的MXML组件中,因此每个方法都必须保存对其他组件的引用。有很多方法可以做到这一点,包括在早些时候传递引用并存储它,或者使用static var来保存其他x个对象的列表。

希望有所帮助。

答案 1 :(得分:3)

而是做类似的事情。在伪代码中:

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

可能你不需要打开的变量。

答案 2 :(得分:0)

事实上,如果moveOut.targettxt3,则执行以下代码段后opened3的值始终为true(与{的值无关) {1}})。这是设计还是opened2/3相互排斥(一次只能有一个)或者您是否缺少opened1/2/3/4语句或......?

else

答案 3 :(得分:-2)

关注构建应用程序的一些教程,使用一些模式,尝试MVC或MVP,结帐Smartypants IOC