[Stuff] Stylesheet-Klasse

[readme.txt]

Heya ... Im Verlauf eines Projektes bei dem ich was die Farben/Textformatierungen angeht alles möglichst Dynamisch halten möchte ist diese "ColorManager"-Klasse entstanden, und ich dachte vielleicht ist die ja auch für jemand anderen nützlich:

Die Grundidee ist das ich Stylesheet-Klassen in 4 Untergruppen aufteile, die erste sind ganz reguläre Textformate:

PHP-Code:

.fliesstext {
  color: #FF0000;
  font-size: 8;
  font-family: unibody_8;
} 


Die 2te Gruppe hat den Präfix "input" und ist für Text-Formate für Eingabetextfelder gedacht (die sich ja nicht per CSS/HTML-Text formatieren lassen):

PHP-Code:

.inputRegular {
  color: #FF00FF;
  font-size: 8;
  font-family: unibody_8;
} 


Die 3te Gruppe sind einfache Farbwerte die man z.B. für dynamisch gezeichnete Elemente benutzen kann:

PHP-Code:

.colFarbe{
  color: #0000FF;
} 


Wenn man jetzt die Klasse Initialisiert werden alle Elemente die mit "input" gekennzeichnet sind in einem eigenen assoziativen Array gespeichert und vorher in ein Flash-Textformat umgewandelt, und alle mit "col" gekennzeichneten Elemente werden auch in einem eigenen Array gespeichert und entsprechend umgewandelt (#000000 in 0x000000). In Flash selbst lässt sich dann über die jeweilige Get-Funktion drauf zugreifen, bsp:

PHP-Code:

stop();

import ColorManager;

var cssLink:String  = "stylesheet.css";
var cm:ColorManager = new ColorManager(cssLink);

cm.onCm = function(success:Boolean):Void {
  if(success) {
    // -> Dynamisches Textfeld
    var dynTxt:TextField  = _root.createTextField("dynTxt",0,10,10,0,0);
        dynTxt.embedFonts = true;
        dynTxt.autoSize   = true;
        dynTxt.multiline  = true;
        dynTxt.html       = true;
        dynTxt.border     = false;
        dynTxt.styleSheet = cm.getStyleSheet;
        
    dynTxt.htmlText = "<span class=\"fliesstext\">Ich bin ein HTML Text!</span>";
    // <- Dynamisches Textfeld
    
    // -> Eingabetextfeld
    var inputTxt:TextField  = _root.createTextField("inputTxt",1,10,40,0,0);
        inputTxt.embedFonts = true;
        inputTxt.autoSize   = true;
        inputTxt.multiline  = true;
        inputTxt.html       = true;
        inputTxt.border     = true;
        inputTxt.type       = "input";
    
    inputTxt.setNewTextFormat(cm.getInputStyles["Regular"]);
    
    inputTxt.text = "Ich bin ein Eingabetextfeld";
    // <- Eingabetextfeld
    
    // -> Farbiges Quadrat
    var quad:MovieClip = _root.createEmptyMovieClip("mcQuad",2);
    
    quad.lineStyle(1,cm.getColors["Farbe"],100);
    quad.beginFill(cm.getColors["Farbe"],100);
    quad.moveTo(0,0);
    quad.lineTo(100,0);
    quad.lineTo(100,100);
    quad.lineTo(0,100);
    quad.lineTo(0,0);
    quad.endFill();
    
    quad._x = 10;
    quad._y = 80;
    // <- Farbiges Quadrat
  } else {
    trace("Fehler beim Laden");
  }
} 


und das entsprechende StyleSheet:

PHP-Code:

.sharpness {
  font-size: 0;
}

.fliesstext {
  color: #FF0000;
  font-size: 8;
  font-family: unibody_8;
}

.inputRegular {
  color: #FF00FF;
  font-size: 8;
  font-family: unibody_8;
}

.colFarbe{
  color: #0000FF;
} 


Die 4te Geschichte "sharpness" ist etwas Spezieller ... wenn man keine Pixelfont benutzt macht es ja unter Umständen Sinn die Textfeldeigenschaft "meinTextfeld.sharpness" zu benutzen um den Text etwas knackiger aussehen zu lassen, dafür habe ich den Wert extra in die Klasse mit reingenommen (das der WErt über "font-size" gesteuert wird ist halt etwas getrickst ).

Runterladen könnt ihr im Anhang ... hier auch nochmal das komplette Script der Klasse:

PHP-Code:

import TextField.StyleSheet
  
  public function ColorManager(link:String) {
    var classScope:ColorManager = this;
     
    classScope.base                = _root;
    
    classScope.styleLink           = link;
     
    classScope.colors              = new Array();
    classScope.inputStyles         = new Array();
    classScope.sharpnessValue      = 0;
    
    classScope.styles              = new StyleSheet();
    
    AsBroadcaster.initialize(this);
    
    var cmReturn:Object = this;
    
    // -> loadStyles(): Läd das in "styleLink" definierte Stylesheet
    styles.onLoad = function(success:Boolean):Void {
      var succ:Boolean;
      
      if(success) {
        for(var x in this["_styles"]) {
          // -> Farben in ein assoziatives Array verpacken
          if(x.indexOf(".col") != -1) {
            classScope.colors[(x.split(".col").join(""))] = Number(this.getStyle(x)["color"].split("#").join("0x"));
          }
          
          if(x.indexOf(".sharpness") != -1) {
            classScope.sharpnessValue = this.getStyle(x)["fontSize"];
          }
          // <- Farben in ein assoziatives Array verpacken
          
          // -> Styles für Eingabefelder in Textformat umwandeln
          if(x.indexOf(".input") != -1) {
            classScope.inputStyles[(x.split(".input").join(""))] = new TextFormat();
            
            if(this.getStyle(x)["color"])      classScope.inputStyles[(x.split(".input").join(""))].color = Number(this.getStyle(x)["color"].split("#").join("0x"));  
            if(this.getStyle(x)["fontSize"])   classScope.inputStyles[(x.split(".input").join(""))].size  = Number(this.getStyle(x)["fontSize"]);
            if(this.getStyle(x)["fontFamily"]) classScope.inputStyles[(x.split(".input").join(""))].font  = String(this.getStyle(x)["fontFamily"]);
            if(this.getStyle(x)["textAlign"])  classScope.inputStyles[(x.split(".input").join(""))].align = String(this.getStyle(x)["textAlign"]);
          }
          // <- Styles für Eingabefelder in Textformat umwandeln
          
          succ = true;
        }
      } else {
        succ = false;
      }
      
      trace(succ);
      
      cmReturn.addListener(cmReturn);
      cmReturn.broadcastMessage("onCm",succ);
    }
     
    styles.load(classScope.styleLink);
    // <- loadStyles()
  }
  
  public function onCm() { }
  
  // -> get css(): Gibt das CSS-Object zurück
  public function get getStyleSheet():StyleSheet {
    var classScope:ColorManager = this;
    
    return classScope.styles;
  }
  // <- get css()
  
  // -> get colors(): Gibt das Array das alle Farben enthält zurück
  public function get getColors():Array {
    var classScope:ColorManager = this;
    
    return classScope.colors;
  }
  // <- get colors()
  
  // -> get inputStyles(): Gibt das Array das alle Textformate für Eingabefelder enthält zurück
  public function get getInputStyles():Array {
    var classScope:ColorManager = this;
    
    return classScope.inputStyles;
  }
  // <- get inputStyles()
  

  public function get getSharpness():Number {
    var classScope:ColorManager = this;
    
    return classScope.sharpnessValue;
  }
} 


[readme.txt]

Als kleinen Anhang:



Alles was innerhalb des Fensterchens ist, ist von den Farben über die CM-Klasse formatiert.

[readme.txt]

*buhuu* ... keiner hat was zu sagen, nichtmal was schlechtes *g*

[readme.txt]

Ich hab die Klasse um eine Minifunktion erweitert die das Formatieren von HTML-Texten etwas komfortabler macht:

PHP-Code:

dynTxt.htmlText = cm.formatTxt("Ich bin ein HTML Text!","fliesstext"); 


Neue Funktion in der Klasse:

PHP-Code:

public function formatTxt(msg:String,format:String):String {
  return "<span class=\""+format+"\">"+msg+"</span>";    
} 


Upgedateter DL im Anhang.

[Blax_ed]

geilo..

sowas kann ich nächste woche für ein projekt gut brauchen.. danach dann genaueres feedback

[readme.txt]

Oh, cool ... Ich hoffe es ist etwas nützlich. Für mich funktioniert die Klasse gut, aber ich bin bei dieser Klassengeschichte noch relativ neu, also ist da sicher noch Raum für Verbesserung

[DeDani]

wie geil! genau sowas hab ich gesucht - dankeeeeeeeee!

[readme.txt]

Ohhh cool *freu* ... Wie oben geschrieben: Ich benutz die Klasse selber eigentlich fast in jedem Projekt. Ich wollte die aber schon immer mal neu Schreiben, also wenns Vorschläge für Verbesserungen gibt immer her damit.

[burki]

Ein dickes Bussi!

[stiffmeister]

hi leute,

ich hab auch grad sowas benötigt. bei mir wird der text über xml geladen. im anhang das zip mit

- css
- xml
- fla cs3

lg