ciauz !
Ricapitolando, abbiamo visto come assegnare del
testo HTML ad un campo di testo in Flash e come farlo
da un file XML.
Con questo tutorial voglio attirare la vostra attenzione sull' utilizzo dei fogli di stile ( CSS ) con Flash.
Sappiamo che possiamo assegnare un testo html ad un campo di testo, ma se volessimo assegnarli una formattazione tramite un CSS che già disponiamo ?
Bene, la cosa è possibile ma non al 100%.
E' possibile se utilizziamo tags html e proprietà CSS che sono supportati dal Flash Player.
Nel prmio tutorial da me linkato all' inizio di questo tutorial potete vedere quali sono i tags html supportati dal Flash Player.
Per quanto riguarda le proprietà CSS supportate, vi rimando a questo indirizzo del sito Adobe:
proprietà CSS supportate.
In questo esempio, caricherò prima un file HTML esterno pulito (significa senza i tags body, head e title).
Poi caricherò il file CSS, assegnerò il CSS al campo di testo in Flash e visualizzerò il testo del file HTML nel campo di testo di Flash.
Strano eh ?!
Creo un FLA che salvo con nome ' main.fla '.
Al suo interno trascino nella libreria un componente UIScrollBar dal pannello componenti.
Creo un campo di testo dinamico sullo stage che chiamo ' field_txt '.
Creo al Document Class, un file AS che salvo con nome ' Main.as ', implementata in questo modo:
Code:
package
{
import flash.display.MovieClip;
import flash.text.TextField;
import fl.controls.UIScrollBar;
import flash.text.StyleSheet;
import flash.events.Event;
import flash.net.URLRequest;
import flash.net.URLLoader;
public class Main extends MovieClip
{
private var _html:String;
private var _css:StyleSheet;
public function Main()
{
init();
}
private function init():void
{
stage.frameRate=31;
loadHTML();
}
private function loadHTML():void
{
var loader:URLLoader=new URLLoader();
var request:URLRequest=new URLRequest();
request.url='info.html';
loader.addEventListener(Event.COMPLETE,onHTML);
loader.load(request);
}
private function onHTML(evt:Event):void
{
_html=evt.target.data;
loadCSS();
}
private function loadCSS():void
{
var loader:URLLoader=new URLLoader();
var request:URLRequest=new URLRequest();
request.url='style.css';
loader.addEventListener(Event.COMPLETE,onCSS);
loader.load(request);
}
private function onCSS(evt:Event):void
{
_css=new StyleSheet();
_css.parseCSS(evt.target.data);
field_txt.styleSheet=_css;
field_txt.wordWrap=true;
field_txt.htmlText=_html;
var scroller:UIScrollBar=new UIScrollBar();
scroller.setSize(stage.stageWidth-20,300);
scroller.scrollTarget=field_txt;
addChild(scroller);
}
}
}
Il file HTML esterno ( info.html ) è il seguente:
HTML Code:
<p class="title">Lorem ipsum no vix fierent honestatis reformidans.<p></p>
<p class="subtitle">Per timeam aliquip feugiat an, sint mentitum nam in, id solum justo tincidunt mel.<p></p>
<p class="body" >Ex vix sumo simul. Vel expetendis sadipscing in, quem consetetur mel ex, soluta alienum atomorum nam ex. Sed cu iusto nemore splendide, sea eu sadipscing scribentur. Ad vel etiam dictas euripidis, errem graecis intellegat mel te.
An vim accusata rationibus. Duo ex sint duis torquatos, scaevola iracundia mei ea, iusto delectus senserit et pro. Eum in pericula reformidans, has diceret sanctus cu. Atomorum petentium ad eos, munere melius principes vix at, est in omnis rationibus voluptatibus. Stet labore audire nam ea, per et mentitum instructior.
Kasd adolescens nec ut, vim dico lorem eu. Et pri epicuri ocurreret. Ne vitae reprimique his, dolor honestatis an eam, duo iuvaret equidem oportere ne. His eu singulis perpetua, nonumy tractatos eam no. Nihil eruditi qui te, ex eam invidunt facilisi euripidis.
Te sea dictas mediocritatem, ea vide doctus aliquip sea. Est et aperiri aliquando definiebas, no has ancillae invidunt recteque, mea rebum mucius mollis eu. Sumo consul copiosae mel an, sea homero noster animal ea, ei eam meis verterem. Mel ad enim lucilius, eum ad dicant fabellas lobortis. An copiosae cotidieque vel.
Sanctus imperdiet vix eu, te aeterno impedit pri, per et rebum suscipit laboramus. Te ubique ponderum mel. Veniam fabulas accusata vix no, nec facilis ocurreret at. Autem doctus ad his. Eu vidit putent senserit cum, an perfecto euripidis eos. Mel inimicus omittantur eu, his quot malis vitae ei.
Quis percipit voluptatum id sed, putant definitionem vim id, quis verear takimata te eum. Qui sumo suas ut, vel et persius adolescens. Dolorem menandri inciderint cu est, alienum omittam similique sit ei, quaestio maiestatis voluptaria eum ex. Mel augue minim blandit ad.
Cu eum dolores assentior, feugait vulputate vis ne, pri accusam consequuntur ea. Id modo eruditi torquatos ius, harum postea takimata eum ei, eu est iusto tempor eripuit. Ei his mollis officiis, per no dolores aliquyam aliquando, at dicant eloquentiam eos. Exerci numquam in vel, ex duo munere quaeque docendi. No mundi adolescens eos.
Per eu elitr voluptaria comprehensam, eum in meliore mentitum mediocrem. Puto labores intellegebat id mel, at eum insolens recusabo.<p></p>
Il file CSS è il seguente:
HTML Code:
.title {
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
font-weight: bold;
color: #0066FF;
margin-left: 50px;
margin-right: 50px;
}
.subtitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: bold;
color: #0044AA;
margin-left: 50px;
margin-right: 50px;
}
.body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #666666;
margin-left: 50px;
margin-right: 50px;
}
Ed il risultato è questo:
Analizziamo il codice
Proprietà
una variabile di tipo stringa alla quale assegnerò il contenuto del file html esterno che carico
private var _html:String;
una variabile di tipo StyleSheet alla quale assegnerò il CSS esterno che carico
private var _css:StyleSheet;
Funzione Costruttrice
chiamo il metodo int
init();
Metodi
init();
imposto un valore di velocità di frame rate
stage.frameRate=31;
chiamo il metodo loadHTML che caricherà il file html esterno
loadHTML();
loadHTML();
creo un URLLoader
var loader:URLLoader=new URLLoader();
creo una richiesta e gli assegno alla proprietà url, il file info.html
var request:URLRequest=new URLRequest();
request.url='http://www.flepstudio.org/swf/mix/StyleSheet/info.html';
aggiungo il listener necessario in ascolto dell' evento Event.COMPLETE che chiamerà il metodo onHTML a caricamento avvenuto
loader.addEventListener(Event.COMPLETE,onHTML);
carico il file html
loader.load(request);
onHTML();
assegno alla proprietà _html il valore del contenuto del file info.html
_html=evt.target.data;
chiamo il metodo loadCSS che caricherà il file style.css
loadCSS();
loadCSS();
cro un nuovo URLLoader
var loader:URLLoader=new URLLoader();
creo una richiesta e gli assegno alla proprietà url, il file info.html
var request:URLRequest=new URLRequest();
request.url='http://www.flepstudio.org/swf/mix/StyleSheet/style.css';
aggiungo il listener necessario in ascolto dell' evento Event.COMPLETE che chiamerà il metodo onCSS a caricamento avvenuto
loader.addEventListener(Event.COMPLETE,onCSS);
carico il file css
loader.load(request);
onCSS();
creo ( con la proprietà _css di questa classe ) una nuova istanza della classe StyleSheet di Actionscript 3.0
_css=new StyleSheet();
con il metodo parseCSS della classe StyleSheet, faccio un parse del contenuto dell' URLLoader ( arrivandoci con evt.target che è il loader e .data che è il suo contenuto )
_css.parseCSS(evt.target.data);
assegno alla proprietà stylesheet del campo di testo che ho sullo stage, la proprietà _css di questa classe ( quindi gli assegno un nuovo CSS che è appunto quello che ho caricato )
field_txt.styleSheet=_css;
imposto la proprietà wordWrap del campo di testo a true
field_txt.wordWrap=true;
tramite la proprietà htmlText del campo di testo, gli assegno il testo formattato in html del contenuto del file html che ho caricato
field_txt.htmlText=_html;
creo una nuova istanza di UIScrollBar
var scroller:UIScrollBar=new UIScrollBar();
gli assegno le dimensioni appropriate
scroller.setSize(stage.stageWidth,300);
gli dico che deve agire su field_txt tramite la proprietà scrollTarget
scroller.scrollTarget=field_txt;
aggiungo la ScrollBar allo stage
addChild(scroller);
Allego i files sorgente:
17-10-07, 06:45
Linear Mode
