Button class

Primul post cu cod propriu zis, contine o clasa destul de simpla, dar pe care o sa o folosesc in continuare pentru a contura un principiu al scrierii codului pe clase, si anume principiul reutilizarii codului. Am un prieten care m-a batut la cap o perioada buna cu reutilizarea codului, si sunt sigur ca era bine intentionat.

Pentru un buton avem nevoie de patru imagini, pentru starile butonului (normal, hover si press) si pentru iconita de pe buton. Clasa pentru butoane se va numi ImageButton.as si va sta in fd\display\. Continutul fisierului ImageButton.as este urmatorul:

package fd.display {
   import flash.display.Sprite;
   import flash.events.MouseEvent;
   import fd.display.Image;
 
   public class ImageButton extends Sprite {
 
      private var btnImg:Image
      private var btnHoverImg:Image
      private var btnPressImg:Image
      private var btnIconImg:Image
      private var pressFlag:Boolean;
 
      public function ImageButton(imgNormal:String,
                                  imgHover:String,
                                  imgPress:String,
                                  imgIcon:String):void
      {
         btnImg = new Image(imgNormal)
         btnHoverImg = new Image(imgHover)
         btnPressImg = new Image(imgPress)
         btnIconImg = new Image(imgIcon)
 
         addChild(btnImg)
         addChild(btnHoverImg)
         addChild(btnPressImg)
         addChild(btnIconImg)
 
         btnHoverImg.visible = false
         btnPressImg.visible = false
 
         pressFlag = false
 
         addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler)
         addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler)
         addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler)
         addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler)
      }
 
      private function mouseOverHandler(event:MouseEvent):void{
         if(!pressFlag) btnHoverImg.visible = true
      }
 
      private function mouseOutHandler(event:MouseEvent):void{
         if(!pressFlag)btnHoverImg.visible = false
      }
 
      private function mouseDownHandler(event:MouseEvent):void{
         stage.addEventListener(MouseEvent.MOUSE_UP, upHandler)
         pressFlag = true
         btnPressImg.visible = true
      }
 
      private function mouseUpHandler(event:MouseEvent):void{
         stage.removeEventListener(MouseEvent.MOUSE_UP, upHandler)
         pressFlag = false
         btnPressImg.visible = false
      }
 
      private function upHandler(event:MouseEvent):void{
         stage.removeEventListener(MouseEvent.MOUSE_UP, upHandler)
         pressFlag = false
         btnPressImg.visible = false
         btnHoverImg.visible = false
      }
   }
}

La prima vedere clasa pentru butoane, este destul de stufoasa si pare greu de inteles, dar daca te uiti mai atent si incerci sa o intelegi o sa devina simpla. Clasa primeste ca parametri, 4 stringuri (calea catre imaginile care vor fi incarcate). Imaginile sunt incarcate cu ajutorul clasei Image, apoi se afiseaza imaginile pe ecran cu ajutorul functiei addChild, si se adauga listeneri pentru buton.

Pentru a vedea si rezultatul scriem o noua clasa in directorul parinte al directorului fd , Main.as:

package{
   import flash.display.Sprite;
   import fd.display.ImageButton;
 
   [SWF(width="100", height="100", backgroundColor="#FFFFFF")]
 
   public class Main extends Sprite{
      public function Main(){
         var button:ImageButton =
                        new ImageButton('img/but_normal.png',
                                        'img/but_hover.png',
                                        'img/but_press.png',
                                        'img/icon_resize.png')
         addChild(button)
         button.x = stage.stageWidth / 2
         button.y = stage.stageHeight / 2
      }
   }
}

Imaginile vor fi stocate intr-un folder img, care se va afla in acelasi director cu fisierul Main.as. Poti sa folosesti imaginile de mai jos pentru acest exemplu:

Buton normal imageButon hover imageButon press imageButon icon rotate image

Clasa ImageButton creaza butoane din imagini, dar se poate extinde pentru a pune un text (label) in locul iconitei.

Leave a Reply

Your email address will not be published. Required fields are marked *