Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Esercizio pratico (sezione Flash 1°-2° fotogramma)

Realizziamo l'applicazione Flash e gli script
Realizziamo l'applicazione Flash e gli script
Link copiato negli appunti

Andiamo ora a realizzare l'applicazione Flash per visualizzare i nostri dati. Se avete letto con attenzione la prima parte della
guida questo passo non dovrebbe risultare difficile.

Pensiamo un po' a come deve funzionare l'applicazione per capire come dobbiamo progettarla.

Nel primo fotogramma possiamo implementare la parte che visualizza la lista dei nostri canali preferiti (visualizzare quindi l'XML creato con i dati presi dal Data Base).

Nel secondo fotogramma invece mostriamo l'elenco di news estrapolate dall'RSS prelevato dal sito selezionato.

Nel terzo fotogramma possiamo invece gestire i nostri canali (aggiungere, modificare o eliminare).

1° fotogramma 

Il codice Action Script sul primo fotogramma deve leggere l'XML creato dal nostro script ASP "rss_listdb.asp" che abbiamo appena visto. 

In questo caso utilizziamo la paginazione dei risultati e quindi la gestione dell'infinito per quanto riguarda il numero delle pagine.

Codice Action Script:

// Configurazione
// Modificare SOLO questo url inserendo quello dove risiedono i files ASP
urlASPfiles = "http://www.enricolai.com/rss/"
//-----------------------------------------------------------------------
// Parametri di inizializzazione dell'applicazione
newchannel="no"
   fscommand ("allowscale", "false");
filexml = urlASPfiles + "rss_listdb.asp";
   if (paginainiziale == undefined){
 paginainiziale = "01";
        }
   //-----------------------------------------------
   
   ApriXML();
   
   // Funzione principale che carica il documento XML creato dallo script ASP con i dati
// prelevati dal Data Base
   function ApriXML () {
  _root.loading = "Connessione al Data Base per ottenere il documento XML...";
 mioxml = new XML();
 myarray = new Array();
 myarray2 = new Array();
 myarray3 = new Array();
 mioxml.load(filexml+"?PageNumber="+PageNumber);
 mioxml.onLoad = ElaboraXML;
   
 function ElaboraXML (success) {
  //   in cui il documento XML è stato caricato correttamente
  if (mioxml.loaded) {
   myarray = mioxml.childNodes;
   // Richiamo funzioni che elaborano i dati XML e creano i vari clip
   Dati();
   MenuPag();
   CreaTabelle();
   // Elimino i vari array utilizzati per le operazioni in modo da liberare risorse
   delete myarray;
   delete myarray2;
   delete myarray3;
   delete mioxml;
       }else {
   // Caso in cui il documento XML NON è stato caricato correttamente
    _root.loading = "Errore nell'apertura del file XML.";
   }; 
 };
};
   
   // Funzione che prende i dati XML e li mette in degli Array
   function Dati () {
  // Array che contengono i Dati -----------------------
 id = new Array();
 url = new Array();
 title = new Array();
  // ---------------------------------------------------
   
 // Cicli for per scorrere l'albero XML e prelevare i dati
  for (k=0; k<=myarray.length; k++) {
  if (myarray[k].nodeName == "list") {
    myarray2 = myarray[k].childNodes;
    for (j=0; j<=myarray2.length; j++) {
      if (myarray2[j].nodeName == "canale") {
       myarray3 = myarray2[j].childNodes;
       for (i=0; i<=myarray3.length; i++) {
        if (myarray3[i].nodeName == "id") {
         id.push(myarray3[i].childNodes.toString());
        } else if (myarray3[i].nodeName == "url") {
         url.push(myarray3[i].childNodes.toString());
        } else if (myarray3[i].nodeName == "title") {
         title.push(myarray3[i].childNodes.toString());
                   } 
                } 
               }
      else if (myarray2[j].nodeName == "totrec") { 
       _root.totrec = myarray2[j].childNodes.toString();
                } 
           } 
          }
 };
};
   
   // Funzione che crea il menù delle pagine con gestione dell'infinito
   function MenuPag () {
 numero = Math.floor((totrec-0.5)/8+1);
 nmaxpag = numero;
  for (i=0; i<numero; i++) {
  barranav.attachMovie("page", "pagine"+i, i+100);
  barranav["pagine"+i]._x = 10+i*25;
  barranav["pagine"+i]._y = 10;
  k = i+1;
  if (k<=9) {
   app = "0"+k;
  } else {
   app = k;
  };
  barranav["pagine"+i].pagina = app;
  barranav["pagine"+i].PageNumber = k;
  if (k<=9) {
   nmaxpag = "0"+k;
  } else {
   nmaxpag = k;
  };
  _root.loading = "Pagina: "+ paginainiziale+"/"+nmaxpag+" - TOT Canali RSS memorizzati: "+totrec;
 };
};
   
   // Funzione che Crea i clip
   // e li posiziona sullo stage del filmato
   function CreaTabelle () {
 Rimuovi();
  for (i=0; i<id.length; i++) {
  attachMovie("clipmsg", "clipmsg"+i, i);
  // Attribuisco la coordinata X e Y
  _root["clipmsg"+i]._x = 15;
  _root["clipmsg"+i]._y = 41+i*35;
  // Passo al clip le variabili che ho preso dall'XML e messo negli Array
  _root["clipmsg"+i].idchannel = id[i];
  _root["clipmsg"+i].title = title[i];
  _root["clipmsg"+i].url = url[i];
 };
  delete id;
  delete url;
  delete title;
};
   
   // Funzione che rimuove tutti i Clip dalla scena prima di posizionare nuovamente i clip della nuova pagina
   function Rimuovi () {
  for (a=0; a<10; a++) {
  _root["clipmsg"+a].removeMovieClip();
 };
};
   
   // Funzione che permette di andare al 2 fotogramma e aprire un RSS
   function open (url) {
 filexml = url;
  gotoAndPlay (2);
}

// Funzione che carica i dati relativi ad un canale dal Data Base per modificarli
   function modifica (idchannel) {
  _root.idchannel = idchannel;
 from = urlASPfiles +"readchannel.asp?id="+idchannel;
  loadVariablesNum (from, 0, "POST");
  gotoAndPlay (3);
}
   
   //Funzione che richiama lo script ASP per eliminare un canale dal Data Base
   function DeleteRSS(idchannel){
  _root.idchannel = idchannel;
  _root.loading = "Connessione al Data Base... ";
  _root.controlla = "vai";
  loadVariablesNum (urlASPfiles +"del_rss.asp", "0", "POST");
}

Vediamo uno screenshot del risultato:

Vediamo il codice associato ai vari MovieClip che vengono disposti sulla scena attraverso il metodo attachMovie.

"clipmsg" : clip principali che indicano ciascuno un canale RSS memorizzato sul Data Base (demo on line: http://www.enricolai.com/guidaflash/rss_demo/clipmsg.htm )

All'interno del "clipmsg" abbiamo dei campi di testo dinamico per la visualizzazione del titolo del canale RSS, un pulsante che permette di aprire l'XML RSS di quel canale e leggere l'elenco nelle new e un pulsante modifica che permette invece di modificare i dati relativi al canale memorizzati nel nostro Data Base. 

Vediamo il codice Action Script associato ai due pulsanti:

//Pulsante che apre le news del canale RSS
 on (release) {
  _root.open(this.url);
  _root.Rimuovi();
}
   
   //Pulsante Modifica
 on (release) {
  _root.modifica(this.idchannel);
  _root.filexml = this.url
  _root.Rimuovi();
   }

Nel primo fotogramma abbiamo anche il pulsante Add New che serve per aggiungere un nuovo canale RSS al nostro archivio. Il codice Action Script associato è il seguente:

on (release) {
  _root.Rimuovi();
  _root.titlechannel=""
  _root.urlchannel=""
  _root.newchannel="yes"
  gotoAndPlay (3);
}

2° fotogramma 

Il codice Action Script sul secondo fotogramma permette di aprire un documento RSS (o RDF) remoto e visualizzare le ultime news fino ad un massimo di dieci. Sostanzialmente il codice Action Script avrà una struttura simile agli altri, con l'unica complicazione che in questo caso verifica se il documento è conforme allo standard RSS o RDF che sono leggermente differenti. 

Il funzionamento globale è comunque simile a quello che avviene nel fotogramma 1, ovvero lo script esegue una serie di cicli for all'interno dell'albero XML ed estrappola i dati che vengono messi in degli array per poi creare dei movieclipcon i vari dati.

stop();
   // Funzione che permette di visualizzare le news di un RSS remoto
   // La funzione supporta lo standard RSS dalla versione 0.91 alla 2.0 e la RDF 1.0
   
ApriXMLitem();
   
   function ApriXMLitem () {
  _root.loading = "Caricamento dell'XML...";
 mioxml = new XML();
 myarray = new Array();
 myarray2 = new Array();
 myarray3 = new Array();
 myarray4 = new Array();
 titleitem = new Array();
 description = new Array();
 link = new Array();
   
 mioxml.load(filexml);
 mioxml.onLoad = ElaboraXML;
   
  function ElaboraXML (success) {
  if (mioxml.loaded) {
   myarray = mioxml.childNodes;
  // Cicli for per scorrere l'albero XML e prelevare i dati
   for (j=0;j<=myarray.length;j++){
    if (myarray[j].nodeName == "rss" || myarray[j].nodeName == "rdf:RDF"){
    myarray2 = myarray[j].childNodes;
   for (i=0;i<=myarray2.length;i++){
    if (myarray2[i].nodeName == "item"){
    myarray3 = myarray2[i].childNodes; 
    for (k=0;k<=myarray3.length;k++){
     if (myarray3[k].nodeName == "title"){ 
      _root.titleitem.push(myarray3[k].childNodes.toString());
              }
     if (myarray3[k].nodeName == "description"){ 
      _root.description.push(myarray3[k].childNodes.toString());
              }
     if (myarray3[k].nodeName == "link"){ 
      _root.link.push(myarray3[k].childNodes.toString());
              }
            }
             }
   
   if (myarray2[i].nodeName == "channel"){
    myarray3 = myarray2[i].childNodes; 
    for (k=0;k<=myarray3.length;k++){
     if (myarray3[k].nodeName == "title"){ 
      _root.loading = myarray3[k].childNodes.toString();
              }
     if (myarray3[k].nodeName == "description"){ 
      _root.loading = _root.loading + " - " + myarray3[k].childNodes.toString();
              }
     if (myarray3[k].nodeName == "item"){
      myarray4 = myarray3[k].childNodes; 
        for (n=0;n<=myarray4.length;n++){
         if (myarray4[n].nodeName == "title"){
          _root.titleitem.push(myarray4[n].childNodes.toString());
                  }
        if (myarray4[n].nodeName == "description"){
          _root.description.push(myarray4[n].childNodes.toString());
                   }
        else if (myarray4[n].nodeName == "link"){
          _root.link.push(myarray4[n].childNodes.toString());
                   }
                }
               }
            }
           }
            }
           }
            }
  } else {
   _root.loading = "Errore nell'apertura del file XML.";
   };
   
   // Libero risorse
  delete myarray;
  delete myarray2;
  delete myarray3;
  delete myarray4;
  delete mioxml;
   
  TableItem();
   
   // Libero risorse
   delete link;
   delete titleitem;
   delete description;
 };
};
   
   // Funzione che Crea i clip 
// e li posiziona sullo stage del filmato
   function TableItem () {
 Rimuovi()
  for (i=0; i<titleitem.length; i++) {
   if (i<10) {
   attachMovie("clipitem", "clipmsg"+i, i);
   // Attribuisco la coordinata X e Y
   _root["clipmsg"+i]._x = 15
   _root["clipmsg"+i]._y = 40+i*28;
   // Passo al clip le variabili che ho preso dall'XML e messo negli Array
   _root["clipmsg"+i].link = link[i];
   _root["clipmsg"+i].title = "<b>"+titleitem[i]+"</b>";
   _root["clipmsg"+i].description = description[i];
      }
 };
};

Ecco uno screenshot del risultato:

Vediamo il codice associato ai vari MovieClip che vengono disposti sulla scena attraverso il metodo attachMovie.

Nella libreria del filmato abbiamo il "clipitem" (demo on line: http://www.enricolai.com/guidaflash/rss_demo/clipitem.htm ) che viene posizionato sulla scena per indicare ciascuno una news visualizzandone il titolo, la descrizione e grazie ad un pulsante ogni notizia porta al relativo URL sul browser tramite collegamento ipertestuale. In questo modo possiamo scorrere le news col cursore del mouse per leggere la descrizione e cliccare su quella che più ci interessa per arrivare direttamente alla sua pagina web.

Si sarebbero potute visualizzare anche altre informazioni relative alla notizia come ad esempio l'autore, la data etc etc.

//Pulsante che apre la pagina web collegata alla news e visualizza in basso la descrizione
   on (release) {
  getURL (this.link, "_blank");
}
   on (rollOver) {
  _root.txtdesc = this.description
}
   on (rollOut) {
  _root.txtdesc = ""
}


Ti consigliamo anche