Eksport av grafisk klasse i Flash

Innhold:

Hva vi skal lage. (Et lyssignal som kan skifte til rødt, gult og grønt.)
Hvordan vi lager klassen
Hvordan vi eksporterer klassen til en .swc-fil
Hvordan vi bruker klassen i en annen applikasjon

Hva vi skal lage

Objekter vi lager med denne klassen skal se omtrent slik ut:

og ha grensesnittet (det brukeren av klassen trenger å vite):
Lyssignal
 setRod()
 setRodogGul()  
 setGul()
 setGronn()

Hvordan vi lager klassen

Ting vi må passe på!

Lag klassen med Insert, New Symbol...

Gi klassen navnet Lyssignal både øverst i Name-feltet og i Actionscript Linkage der du haker av for Export for ActionScript.

Lag grafisk del, det vil si grønn, gul og rød sirkel, konverter dem til symboler og gi dem instance-navnene gron, gul og rod.

(Pass på å være inne i Lyssignal, ikke på øverste Scene-lag!)

I Library ser det slik ut:

Høyreklikker vi på Lyssignal i Library og velger Edit Class, kan vi legge inn denne koden, som havner i filen Lyssignal.as:

package  {

   import flash.display.MovieClip;
   import fl.motion.Color;
   import flash.geom.ColorTransform;

   public class Lyssignal extends MovieClip {

      public function Lyssignal() {
         // constructor code
      }

      public function setRod() {  
         rod.transform.colorTransform = new ColorTransform(1.0,0,0);    
         gul.transform.colorTransform = new ColorTransform(0,0,0);
         gron.transform.colorTransform = new ColorTransform(0,0,0);
      }

      public function setGul() {
         rod.transform.colorTransform = new ColorTransform(0,0,0);
         gul.transform.colorTransform = new ColorTransform(1.0,1.0,0);
         gron.transform.colorTransform = new ColorTransform(0,0,0);
      }

      public function setGronn() {
         rod.transform.colorTransform = new ColorTransform(0,0,0);
         gul.transform.colorTransform = new ColorTransform(0,0,0);
         gron.transform.colorTransform = new ColorTransform(0,1.0,0);
      }

      public function setRodogGul() {
         rod.transform.colorTransform = new ColorTransform(1.0,0,0);
         gul.transform.colorTransform = new ColorTransform(1.0,1.0,0);
         gron.transform.colorTransform = new ColorTransform(0,0,0);
      }

   }//class

}//package

Denne koden kan også legges direkte inn i symbolet Lyssignal i .fla-filen vi bruker når vi lager klassen.
(Forenkler det litt å slippe å redigere Lyssignal.as i tillegg til grafikken i .fla-filen!)

Hvordan vi eksporterer klassen til en .swc - fil

Eksporten gjør vi ved å høyreklikke på klassen Lyssignal i Library og velger Export SWC file...
og lagrer Lyssignal.swc på et passende sted.

Filen LysSignal.swc kan du nå gi til andre.

Hvordan vi bruker klassen i en annen applikasjon

Andre som skal bruke klassen legger LysSignal.swc i en passende katalog, gjerne i samme katalog som de skal lage en ny applikasjon i.

Men, den nye applikasjonen finner ikke .swc-filen uten at du forteller hvor den er, selv om den er i samme katalog!

For å finne LysSignal.swc, må du gå i properties for selve applikasjonen, velge skiftenøkkelen og legge inn lenke til LysSignal.swc
med +-knappen først og deretter Browse to SWC file - knappen, slik som vist her:

Da kan vi teste Lyssignal-klassen med noe a la:

der jeg har lagt inn radioknapper for å teste om lyssignalet skifter farver slik det skal:

/*
   Lyssignal klasse i LysSignal.swc

   Radioknapper:
      rodRb, ...
*/

/// Lager nytt lyssignal, tar inn på scenen og plasserer:

var ls: Lyssignal = new Lyssignal();

addChild(ls);

ls.x=250;
ls.y=150;

/// Tester med en lytterfunksjon koblet til radioknappene:

rodRb.group.addEventListener(MouseEvent.CLICK, test);

function test(evt: Event):void {
   var valg= int(rodRb.group.selection.value);
   if(valg==0) {
      ls.setRod();
   } else if(valg==1) {
      ls.setRodogGul();
   }else if(valg==2) {
      ls.setGul(); 
   }else {
      ls.setGronn();
   }//if
}//test