Formattare un testo con Actionscript 3.0 e CSS

Oggi vi parlerò dell'interazione tra Actionscript 3.0 e il CSS. Alla fine di questo articolo sarete capaci di customizzare tramite CSS un testo esterno.
Formattare un testo con Actionscript 3.0 e CSS

flash

la proprietà di TextField “html”

Flash permette, tramite la proprietà di TextField “html”, settata su “true”, di riempire il testo con stringhe complete del codice HTML, che però, risulta obsoleto nei tag, come per esempio . Il metodo però più efficace e pulito è includere il CSS nell’actionscript e scrivere il testo con una struttura HTML vera e propria, con tag e classi.

La struttura dei file:

  • Classe in Actionscript 3.0 “CssText.as”
  • File flash “index.fla”
  • File di Testo “testo.txt”
  • File CSS “esempio.css”
  • Classe actionscript ‘CssText’

    Come prima cosa creiamo una classe actionscript che ci permetta di creare una variabile e applicargli un file css e la chiameremo CssText:

    package
    {
    	import flash.display.Sprite;
    	import flash.events.Event;
    	import flash.net.URLLoader;
    	import flash.net.URLRequest;
    	import flash.text.StyleSheet;
    	import flash.text.TextField;
    	import flash.text.TextFieldAutoSize;
    	public class CssText extends Sprite
    	{
    		var loader:URLLoader;
    		var field:TextField;
    		var exampleText:String;
    		public function CssText(_txt, _cssUrl:String):void
    		{
    			exampleText = _txt;
    			field = new TextField();
    			field.width = 300;
    			field.autoSize = TextFieldAutoSize.LEFT;
    			field.wordWrap = true;
    			addChild(field);
    			var req:URLRequest = new URLRequest(_cssUrl);
    			loader = new URLLoader();
    			loader.addEventListener(Event.COMPLETE, onCSSFileLoaded);
    			loader.load(req);
    		}
    		private function onCSSFileLoaded(event:Event):void
    		{
    			var sheet:StyleSheet = new StyleSheet();
    			sheet.parseCSS(loader.data);
    			field.styleSheet = sheet;
    			field.htmlText = exampleText;
    		}
    	}
    }
    

    Dopodiché lo importeremo nel nostro file fla, caricando un file di testo esterno, e creando una variabile CssText al suo completamento. Segue il Codice nel file “index.fla”

    import CssText;
    var urTesto:URLRequest = new URLRequest("testo.txt");
    var ulTesto:URLLoader = new URLLoader();
    ulTesto.load(urTesto);
    ulTesto.addEventListener(Event.COMPLETE,fnTesto);
    
    function fnTesto(event:Event):void
    {
    	var testoCss:CssText = new CssText(event.target.data, "esempio.css");
    	addChild(testoCss);
    }

    Adesso creiamo il nostro file testo.txt, che, avendo una struttura html, sarà:

    </pre>
    <h1>Titolo di pagina</h1>
    <pre>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam <a href="http://www.alessandrocanessa.it">link</a></pre>
    <ul class="lista">
    	<li class="css">CSS</li>
    	<li class="html">Html</li>
    	<li class="actionscript">Actionscript</li>
    	<li class="javascript">Javascript</li>
    </ul>
    <pre>
    

    Infine creiamo un nuovo file esempio.css e incolliamo il seguente codice:

    h1 {
        font-family:Arial, Helvetica, sans-serif;
        font-size: 20;
        font-weight: bold;
        color:#FFCC00;
    }
    p{
    	font-family:Arial, Helvetica, sans-serif;
        font-size: 14;
        color:#666666;
    }
    a{
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
        color:#FFCC00;
    	text-decoration:underline;
    }
    a:hover{
        color:#000;
    	text-decoration:underline;
    }
    li{
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:14px;
    	list-style:none;
    }
    .css {
        color:#FF33CC;
    }
    .html{
    	color:#0000FF;
    }
    .actionscript{
    	color:#CC0000;
    }
    .javascript{
    	color:#FFCC00;
    }

    Riepilogo finale

    In conclusione abbiamo un file flash, in cui importiamo una classe actionscript, che applica un file css ad un txt esterno. Il tutto scaricabile a questo link. Come già detto all’inizio dell’articolo adesso riuscirete a modificare la formattazione di un testo flash, senza dover ricorrere a tag obsoleti o mezzi statci, bensì con il vostro amato CSS.

    Un saluto a tutti da Alessandro Canessa, per qualsiasi dubbio o perplessità sarò pronto a rispondere.

    Search
    Tags
    Seleziona rubrica
    Seleziona rubrica
    Codice Github