Crea una scatola HTML ActionScript 3.0 con supporto XML e CSS

In questa pagina (per la prima pagina) non ci sarà una pagina precedente. Quindi il link precedente dovrebbe essere passivo e il suo "href" deve essere vuoto.

A proposito, per vedere "<", "&" etc. symbols in htmlbox we should use their codes shown below.

< : < (less than) > :> (maggiore di) &: & (e commerciale) ":" (virgolette) ' : '(apostrofo, virgoletta singola)

Passaggio 6: aggiunta dei numeri di pagina alle pagine

Quando si aggiungono numeri di pagina, è sufficiente utilizzare la classe "page" per "span". Il modello dei numeri di pagina dipende da te. Li ho scritti così: "(pagina 1/3)".

... (pagina 1/3) 

Ed ecco il mio file XML con una pagina.

A proposito, puoi aggiungere immagini alle tue pagine come mostrato di seguito:

Passaggio 7: File script di azioni (classi esterne)

Abbiamo creato la cartella "keremk" e useremo questa cartella per le nostre classi "XMLLoader" e "CSS".

Pertanto, dobbiamo iniziare le nostre lezioni con:

 pacchetto keremk 

Passaggio 8: creazione della classe CSS

Inizieremo la nostra classe CSS con "pacchetto keremk ". Il suo nome di classe sarà uguale al nome del file "CSS". Nota: ActionScript fa distinzione tra maiuscole e minuscole. Poiché invieremo eventi con questa classe, verrà esteso "EventDispatcher".

 pacchetto keremk // CSS è nella cartella keremk public class CSS estende EventDispatcher // CSS invierà eventi public function CSS (): void loader = new URLLoader; // quando viene creato un CSS, verrà definito un nuovo loader 

Passaggio 9: CSS: importazione di classi Flash

 import flash.net.URLLoader; // Caricheremo il file css con urlloader import flash.net.URLRequest; // e dovrebbe esserci una richiesta da caricare. import flash.text.StyleSheet; // Analizzeremo il file css come StyleSheet. import flash.events.SecurityErrorEvent; // Spediremo eventi, quindi dobbiamo anche importare classi correlate. import flash.events.IOErrorEvent; import flash.events.Event; import flash.events.EventDispatcher;

È inoltre possibile importare tali classi all'interno di 3 righe utilizzando "*" per importare tutte le classi "events" e "net", ma preferisco importarle una per una. Non abbiamo bisogno di tutte le classi "eventi" e "rete". Se preferisci scrivere meno codice, ecco l'equivalente abbreviato.

import flash.events. *; importa flash.net. *; import flash.text.StyleSheet;

Passaggio 10 - CSS: variabili

Avremo bisogno solo di due variabili in questa classe, un URLLoader e un StyleSheet.

loader var privato: URLLoader; foglio var pubblico: StyleSheet;

A proposito, le variabili private non sono raggiungibili dalle loro classi. Userò "loader" solo nella classe CSS, quindi posso crearlo come privato. Userò "sheet" dalla classe principale, quindi ho bisogno di crearlo come "pubblico" (raggiungibile).

Passaggio 11 - CSS: Carica funzione

Useremo questa funzione di caricamento dalla nostra classe principale, quindi dobbiamo crearla come pubblica. Richiede una stringa da caricare, che sarà "_req: String"

funzione pubblica load (_req: String): void // function caricherà il file a cui è assegnato il percorso. loader.load (new URLRequest (_req)); // percorso deve essere trasformato in un URLRequest per caricare il file. loader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, secError); // Ascolteremo 3 eventi da trasferire alla classe principale. loader.addEventListener (IOErrorEvent.IO_ERROR, ioError); loader.addEventListener (Event.COMPLETE, caricata); 

Passaggio 12: CSS: gestori di eventi e dispatcher

Nel passaggio 11, abbiamo aggiunto 3 listener di eventi al caricatore, Errore di sicurezza, Errore IO e Completato. Uno di questi verrà inviato alla fine. Quando è successo, dobbiamo trasferirlo alla classe principale ascoltando e spedendo. Dovremmo anche controllare se c'è qualche problema durante l'analisi del file CSS dopo l'evento "Completa". Verificheremo utilizzando "try catch".

funzione privata ioError (e: IOErrorEvent): void // Quando si verifica un errore IO, dispatchEvent (new Event ("CSS_IOError")); // questa riga invia "CSS_IOError".  private function secError (e: SecurityErrorEvent): void // Quando c'è un problema di sicurezza, dispatchEvent (new Event ("CSS_SecurityError")); // questa riga invia il "CSS_SecurityError".  funzione privata caricata (e: Event): void // Se il caricamento del file è terminato, prova // prova ad analizzarlo. foglio = new StyleSheet (); sheet.parseCSS (loader.data); dispatchEvent (new Event ("CSS_Loaded")); // Se l'analisi è OK, questa riga invia "CSS_Loaded".  catch (e: Error) dispatchEvent (new Event ("CSS_ParseError")); // Se l'analisi non è OK, questa riga invia "CSS_ParseError"

Con i gestori di eventi e i dispatcher, la nostra classe CSS è completa. Ecco il file CSS.as completo:

 pacchetto keremk import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.StyleSheet; import flash.events.SecurityErrorEvent; import flash.events.IOErrorEvent; import flash.events.Event; import flash.events.EventDispatcher; la classe pubblica CSS estende EventDispatcher private var loader: URLLoader; foglio var pubblico: StyleSheet; funzione pubblica CSS (): void loader = new URLLoader;  public function load (_req: String): void loader.load (new URLRequest (_req)); loader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, secError); loader.addEventListener (IOErrorEvent.IO_ERROR, ioError); loader.addEventListener (Event.COMPLETE, caricata);  Funzione privata ioError (e: IOErrorEvent): void dispatchEvent (new Event ("CSS_IOError"));  private function secError (e: SecurityErrorEvent): void dispatchEvent (new Event ("CSS_SecurityError"));  funzione privata caricata (e: Event): void try sheet = new StyleSheet (); sheet.parseCSS (loader.data); dispatchEvent (new Event ("CSS_Loaded"));  catch (e: Error) dispatchEvent (new Event ("CSS_ParseError")); 

Passaggio 13: creazione di XMLLoader

Inizieremo la nostra classe XMLLoader con "pacchetto keremk " e estenderemo anche "EventDispatcher".

 pacchetto keremk // XMLLoader si trova nella cartella keremk. public class XMLLoader estende EventDispatcher public function XMLLoader () loader = new URLLoader; // quando viene creato un XMLLoader, verrà definito un nuovo loader. 

Passaggio 14: XMLLoader: importazione di classi Flash

Avremo bisogno delle stesse classi come abbiamo fatto per il nostro CSS senza la classe "StyleSheet". Sono come segue:

 import flash.events.SecurityErrorEvent; // Classi di eventi da ascoltare e inviare. import flash.events.IOErrorEvent; import flash.events.Event; import flash.events.EventDispatcher; importare flash.net.URLLoader; // classi net per caricare file xml. import flash.net.URLRequest;

Passaggio 15: XMLLoader: variabili

Ora avremo bisogno di 5 variabili:

 loader var privato: URLLoader; // per caricare i dati var privati ​​dei file XML: XML; // per contenere i dati del file XML per analizzarli. private var i: uint; // counter da utilizzare nell'analisi. private var lenXML: uint; // per verificare quante pagine ci sono in XML. public var pages: Array = []; // per contenere le pagine dopo aver analizzato l'XML.

Passaggio 16: XMLLoader: carica la funzione

La funzione "carica" ​​sarà la stessa di "CSS.load". Lo useremo dalla classe principale e dovrebbe essere pubblico.

carico della funzione pubblica (_req: String): void // function caricherà il file per il quale viene fornito il percorso. loader.load (new URLRequest (_req)); // percorso deve essere trasformato in un URLRequest per caricare il file. loader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, secError); // Ascolteremo 3 eventi da trasferire alla classe principale. loader.addEventListener (IOErrorEvent.IO_ERROR, ioError); loader.addEventListener (Event.COMPLETE, caricata); 

Passaggio 17: XMLLoader: gestori di eventi e dispatcher

Abbiamo aggiunto 3 listener di eventi al caricatore, Errore di sicurezza, Errore IO e Completato. Uno di questi verrà inviato alla fine. Quando è successo, dobbiamo trasferirlo alla classe principale ascoltando e spedendo. Dovremmo anche controllare se c'è qualche problema durante l'analisi del file XML dopo l'evento "Completa". Ci possono essere due diversi eventi da inviare: "XML_Loaded" o "XML_ParseError". Verificheremo utilizzando "try catch".

 funzione privata ioError (e: IOErrorEvent): void // Quando si verifica un errore IO, dispatchEvent (new Event ("XML_IOError")); // questa riga invia "XML_IOError".  private function secError (e: SecurityErrorEvent): void // Quando c'è un problema di sicurezza, dispatchEvent (new Event ("XML_SecurityError")); // questa riga invia "XML_SecurityError".  funzione privata caricata (e: Event): void // Se il caricamento del file è terminato, prova // prova ad analizzarlo. data = new XML (loader.data); // porta i dati XML in "data" lenXML = data.children (). length (); // controlla il numero delle pagine per (i = 0; i < lenXML; i++) //parses XML data to array pages.push(data.children()[i]);  dispatchEvent(new Event("XML_Loaded"));//if parsing the XML is OK, dispatch "XML_Loaded".  catch (e:Error)  dispatchEvent(new Event("XML_ParseError"));//if something is wrong with XML data, this line dispatches "XML_ParseError".  

Con i gestori e i dispatcher, la nostra classe XMLLoader è terminata. Ecco l'XMLLoader finito:

pacchetto keremk import flash.events.SecurityErrorEvent; import flash.events.IOErrorEvent; import flash.events.Event; import flash.events.EventDispatcher; import flash.net.URLLoader; import flash.net.URLRequest; public class XMLLoader estende EventDispatcher private var loader: URLLoader; dati var privati: XML; private var i: uint; private var lenXML: uint; public var pages: Array = []; funzione pubblica XMLLoader () loader = new URLLoader;  public function load (_req: String): void loader.load (new URLRequest (_req)); loader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, secError); loader.addEventListener (IOErrorEvent.IO_ERROR, ioError); loader.addEventListener (Event.COMPLETE, caricata);  Funzione privata ioError (e: Event): void dispatchEvent (new Event ("XML_IOError"));  private function secError (e: Event): void dispatchEvent (new Event ("XML_SecurityError"));  funzione privata caricata (e: Event): void try data = new XML (loader.data); lenXML = data.children (). length (); per (i = 0; i < lenXML; i++)  pages.push(data.children()[i]);  dispatchEvent(new Event("XML_Loaded"));  catch (e:Error)  dispatchEvent(new Event("XML_ParseError"));    

Passaggio 18: creazione della classe principale

Poiché la classe Main sarà nella cartella root del nostro progetto, inizieremo a scriverla con "pacchetto ". Estenderà "sprite" e inizieremo il nostro codice nella funzione "Main":

 pacchetto // entry point per le importazioni. public class Main estende Sprite // entry point per vars. funzione pubblica Main (): void // entry point per i codici.  // punto di ingresso per funzioni aggiuntive. 

Passaggio 19 - Principale: importazione di classi Flash

 import flash.display.Sprite; // La classe principale estenderà "Sprite". Quindi, avremo bisogno della classe "Sprite". import flash.display.StageAlign; // Avremo bisogno di "StageAlign" per allineare lo stage. import flash.display.StageScaleMode; // Avremo bisogno di "StageScaleMode" per gestire la modalità di scala dello stage. import flash.events.Event; // Avremo bisogno della classe "Event" per usare gli eventi che abbiamo creato nelle classi "XMLLoader" e "CSS". import flash.events.TextEvent; // Avremo bisogno di "TextEvent" per utilizzare i collegamenti alle pagine in "htmlText". import flash.text.TextField; // Creeremo un "TextField" per mostrare le pagine html e aggiungeremo il nostro css ad esso con "TextFormat" import flash.text.TextFormat; import keremk.CSS; // E in quella classe "Main", useremo le nostre classi "CSS" e "XMLloader" che abbiamo creato in precedenza. import keremk.XMLLoader;

Passaggio 20 - Principale: variabili

 private var xml: XMLLoader; // questo conserverà i nostri dati XML private var css: CSS; // questo manterrà il nostro campo var di dati StyleSheet private: TextField; // lo useremo per mostrare le nostre pagine html private var cssBool: Boolean = false; // questi due booleani ci diranno se i nostri file CSS e XML sono caricati private var xmlBool: Boolean = false; private var stgW: Number = stage.stageWidth; // questi due controlleranno l'altezza e la larghezza dello stage. private var stgH: Number = stage.stageHeight; // in questo modo possiamo modificare la larghezza e l'altezza della nostra HtmlBox dal file html. private var pageNum: int = 0; // questo definirà la pagina che mostreremo in HtmlBox. (Poiché l'indice dell'array inizia da 0, pageNum è 0) private var boxBorder: Sprite; // questo sarà il bordo del nostro HtmlBox. Possiamo abilitare il bordo di TextField ma in questo modo possiamo gestire i margini.

Passo 21 - Principale: funzione principale

La funzione principale verrà eseguita automaticamente all'avvio di HtmlBox. Pertanto, abbiamo bisogno di scrivere i nostri codici di avviamento in questa funzione.

funzione pubblica Main (): void stage.align = StageAlign.TOP_LEFT; // Queste due righe sono facoltative. Preferirei mantenere lo stage allineato in alto a sinistra e non scalato. stage.scaleMode = StageScaleMode.NO_SCALE; boxBorder = new Sprite (); // Questo è il nostro bordo di htmlbox. Fondamentalmente, è un rettangolo vuoto. E creeremo un nuovo Sprite per disegnarlo. boxBorder.graphics.lineStyle (2, 0xC0C0C0, 1); // thicknes = 2px, colore = 0xC0C0C0 (grigio), alfa = 1 (100%). Puoi cambiare questi valori come preferisci. boxBorder.graphics.drawRect (5, 5, stgW - 10, stgH - 10); // margin = 5. E 'la distanza tra confine e livello stadio. addChild (boxBorder); // dopo aver creato e disegnato il nostro bordo, dobbiamo aggiungerlo allo stage. field = new TextField (); // Creeremo un nuovo TextField per mostrare le pagine html. addChild (campo); // poiché ci sono molte proprietà da definire, prima aggiungeremo il campo allo stage. con (campo) // dopo aver aggiunto il "campo" allo stage, possiamo usare "con" per definirne le proprietà. x = 10; // Ho definito x e y come 10 per creare uno spazio di 5px tra il campo e il bordo. y = 10; width = stgW-20; // And width dovrebbe essere stgW-20. Perché, se vogliamo fare una distanza di 10px tra il campo e lo stage, la larghezza del campo deve essere 20px (10px da sinistra + 10px da destra) più corta della larghezza dello stage. height = stgH-20; // E dovremmo calcolare l'altezza come la larghezza. multiline = true; // Field deve essere multilinea. Perché i nostri testi html sono multilinea. selectable = false; // Se vuoi rendere il testo selezionabile, puoi cambiarlo in "true". wordWrap = true; // Senza "wordWrap" i nostri paragrafi saranno linee singole. condenseWhite = true; // Questa è una proprietà importante che rende il nostro testo un aspetto migliore. Senza questo, ci saranno più spazi in tutto il htmltext.  // Dopo aver creato il nostro confine e il nostro campo di testo, possiamo caricare i nostri file. xml = new XMLLoader (); // Creeremo un nuovo XMLLoader xml.load ("source.xml"); // e caricheranno il nostro file XML. // Abbiamo bisogno di ascoltare gli eventi per sapere cosa fare dopo. xml.addEventListener ("XML_Loaded", xmlDone); // Se acquisiamo "XML_Loaded", continueremo a creare HtmlBox. xml.addEventListener ("XML_IOError", errore); // Creerò solo una funzione per tutti gli errori. xml.addEventListener ("XML_SecurityError", error); // Quindi, tutti gli eventi di errore andranno a questa funzione "error" xml.addEventListener ("XML_ParseError", error); css = new CSS (); // Creeremo un nuovo CSS css.load ("styles.css"); // e caricheremo il nostro file CSS. // gli eventi css sono praticamente gli stessi con gli eventi xml. css.addEventListener ("CSS_Loaded", cssDone); // Se acquisiamo "CSS_Loaded", continueremo a creare HtmlBox. css.addEventListener ("CSS_IOError", error); // Anche tutti gli eventi di errore passano alla funzione "error". css.addEventListener ("CSS_SecurityError", errore); css.addEventListener ("CSS_ParseError", errore); 

Passo 22 - Principale: funzione "errore"

Dal momento che tutti gli errori passano alla funzione "errore", dobbiamo organizzarli con "switch case". Controlleremo quale errore si è verificato e scriviamo il testo richiesto su "campo". In questo passaggio, mostrerò solo due errori. Vedrai tutti gli errori nella classe principale finita al punto 25

 errore di funzione privata (e: Event): void switch (e.type) // Verificheremo il tipo di errore che si è verificato nel caso "XML_IOError": // Se l'errore è "XML_IOError", scriveremo il testo richiesto su "XML_IOError" su "campo". field.htmlText = '

 ERRORE XML IO
Per favore controlla il tuo percorso XML!
'break; // Se l'errore è "XML_IOError", interromperà l'operazione e interromperà il "caso switch". caso "XML_SecurityError": field.htmlText = '

 XML SECURITY ERROR
Si prega di controllare i file delle politiche!
' rompere; 

Passo 23 - Principale: Funzioni "Fatto"

Creeremo tre funzioni "Fatto". "xmlDone", "cssDone" e "allDone". "xmlDone" e "cssDone" verranno eseguiti dopo che i nostri file sono stati caricati correttamente e informeranno "allDone". Quando i file css e xml vengono caricati correttamente, "allDone" aggiunge lo StyleSheet al "campo" e scrive la prima pagina.

 funzione privata cssDone (e: Event): void cssBool = true; // Creeremo cssBool "true". Perché il file CSS è stato caricato con successo. allDone (); // Ed esegue allDone.  private function xmlDone (e: Event): void xmlBool = true; // Creeremo xmlBool "true". Perché il file XML è stato caricato correttamente. allDone (); // Ed esegue allDone.  funzione privata allDone (): void if (cssBool && xmlBool) // se i file css e xml vengono caricati correttamente, field.styleSheet = css.sheet; // imposteremo i nostri stili su "field". field.htmlText = xml.pages [pageNum]; // scriveremo la prima pagina sul campo. addEventListener (TextEvent.LINK, textEvent); // E aggiungeremo listener di eventi per eventi di collegamento che verranno inviati da htmlText. 

Passo 24 - Main: funzione "textEvent"

In questa funzione, controlleremo i testi degli eventi "next" e "prev".

 funzione privata textEvent (e: TextEvent): void if (e.text == "next") // Se viene cliccato il link "next", ++ pageNum; // aumenteremo la paginaNum field.htmlText = xml .pages [pageNum]; // e scrive la nuova pagina in "campo".  if (e.text == "prev") // Se si fa clic sul collegamento "prev", --pageNum; // si riduce la paginaNum field.htmlText = xml.pages [pageNum]; // e scrivi la nuova pagina a "campo". 

Passo 25 - Principale: finito

Ecco la classe principale finita:

 pacchetto import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.TextEvent; import flash.text.TextField; import flash.text.TextFormat; import keremk.CSS; import keremk.XMLLoader; public class Main estende Sprite private var xml: XMLLoader; private var css: CSS; campo var privato: TextField; private var cssBool: Boolean = false; private var xmlBool: Boolean = false; private var stgW: Number = stage.stageWidth; private var stgH: Number = stage.stageHeight; private var pageNum: int = 0; private var boxBorder: Sprite; funzione pubblica Main (): void stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; boxBorder = new Sprite (); boxBorder.graphics.lineStyle (2, 0xC0C0C0, 1); boxBorder.graphics.drawRect (5, 5, stgW - 10, stgH - 10); addChild (boxBorder); field = new TextField (); addChild (campo); con (campo) x = 10; y = 10; larghezza = stgW-20; altezza = stgH-20; multiline = true; selezionabile = falso; wordWrap = true; condenseWhite = true;  xml = new XMLLoader (); XML.load ( "source.xml"); xml.addEventListener ("XML_Loaded", xmlDone); xml.addEventListener ("XML_IOError", errore); xml.addEventListener ("XML_SecurityError", errore); xml.addEventListener ("XML_ParseError", errore); css = new CSS (); css.load ( "styles.css"); css.addEventListener ("CSS_Loaded", cssDone); css.addEventListener ("CSS_IOError", errore); css.addEventListener ("CSS_SecurityError", errore); css.addEventListener ("CSS_ParseError", errore);  errore di funzione privata (e: Event): void switch (e.type) case "XML_IOError": field.htmlText = '

 ERRORE XML IO
Per favore controlla il tuo percorso XML!
' rompere; caso "XML_SecurityError": field.htmlText = '

 XML SECURITY ERROR
Si prega di controllare i file delle politiche!
' rompere; case "XML_ParseError": field.htmlText = '

 XML ERRORE PARSE
Si prega di eseguire il debug del file XML!
' rompere; case "CSS_IOError": field.htmlTextText = '

 ERRORE CSS IO
Per favore controlla il tuo percorso CSS!
' rompere; case "CSS_SecurityError": field.htmlText = '

 ERRORE DI SICUREZZA CSS
Si prega di controllare i file delle politiche!
' rompere; case "CSS_ParseError": field.htmlText = '

 Errore CSS PARSE
Si prega di eseguire il debug del file CSS!
' rompere;  funzione privata cssDone (e: Event): void cssBool = true; tutto fatto();  private function xmlDone (e: Event): void xmlBool = true; tutto fatto();  funzione privata allDone (): void if (cssBool && xmlBool) field.styleSheet = css.sheet; field.htmlText = xml.pages [pageNum]; addEventListener (TextEvent.LINK, textEvent);  funzione privata textEvent (e: TextEvent): void if (e.text == "next") ++ pageNum; field.htmlText = xml.pages [pageNum];  if (e.text == "prev") --pageNum; field.htmlText = xml.pages [pageNum]; 

Passaggio 26: compilazione in FlashDevelop

Abbiamo finito di scrivere il nostro codice, ora è il momento di compilarlo. Se hai creato il tuo progetto in FlashDevelop, devi solo premere "F5" per controllarlo e "F8" per costruire il progetto. Prima di ciò, potresti voler modificare le impostazioni di output. Per farlo, vai su Progetto> Proprietà ...

Nel pannello delle proprietà, puoi modificare:

• "Target" -> Versione di Flash Player
• "File di output" -> Nome e percorso del file di output (il percorso del file di output è "bin /")
• "Dimensioni" -> Larghezza e altezza del file di output
• "Colore di sfondo" -> Colore di sfondo del file di output (ho usato il nero "# 000000")
• "Framerate" -> Framerate del file di output (Dato che non ci sono frame nel nostro progetto, ho usato 30fps come default.)
• "Test Movie" -> Come riprodurre un film di prova premendo "F5"

Dopo l'operazione "Crea progetto", puoi usare htmlBox dalla cartella bin. Se stai pianificando di spostarlo in un'altra cartella, devi spostare i file "htmlBox.swf", "source.xml" e "styles.css" nella stessa cartella. Se stai pianificando di usare "index.html" avrai bisogno dell'intera directory "bin". Per impostazione predefinita, le dimensioni di htmlBox saranno al 100% in "index.html". Puoi cambiarlo in "swfobject.embedSWF ();" funzione in "index.html".

Passaggio 27 - Compilazione in Flash IDE

Se si utilizza Flash CS3 o CS4, aprire il file "htmlBox.fla". Nella finestra delle proprietà, scrivi "Main" nella casella "Class". Puoi anche cambiare "Frame rate", "Size" e "Background color" di htmlBox nella finestra delle proprietà.

Dopo aver definito la "Document class", puoi testarla premendo "Ctrl + Invio" e pubblicandola premendo "Ctrl + F12". Se desideri modificare le impostazioni di pubblicazione (come la versione), puoi aprire le impostazioni di pubblicazione premendo "Ctrl + Maiusc + F12" o andando su File> Impostazioni pubblicazione ...

Di nuovo, se stai pianificando di spostarlo in un'altra cartella, devi spostare i file "htmlBox.swf", "source.xml" e "styles.css" nella stessa cartella. Se stai pianificand