SLIDE NEWS CON FLASH-PHP-MYSQL 1. Introduzione Ciao a tutti, in questo tutorial tenterò di spiegare come far comunicare Flash e PHP per prendere ed utilizzare dei dati che risiedono in un database MySQL. Più precisamente realizzeremo un filmatino Flash che visualizzerà lo stralcio (data, titolo e un tot di caratteri del testo) delle news che sono presenti nel nostro database MySQL, quindi ricapitolando avremo: • un database MySQL dove memorizzeremo i dati. • una pagina PHP che si collegherà al database, prenderà i dati e li restituirà a Flash in un formato a lui leggibile (vedremo dopo). • un filmato Flash che caricherà e visualizzerà i dati restituiti dalla pagina PHP. » visualizza un esempio dell'applicazione. » scarica i file sorgenti Per iniziare ci occorrono: • un server web(remoto o locale), Apache. • la presenza del modulo PHP. • il database MySQL. Consiglio inoltre, l'utilizzo di PhpMyAdmin che faciliterà di molto la creazione e la gestione del nostro database MySQL. 2. Parte MySQL Come prima cosa dobbiamo creare il nostro database e la nostra tabellina, chiamerò il database Tutorial, mentre la tabella news. La tabella, sarà formata da soli 4 campi: un campo id (AUTO_INCREMENT e PRIMARY KEY), data di tipo DATE, titolo di tipo VARCHAR(limite fino ad un massimo di 255 caratteri) e testo di tipo LONGTEXT(senza limiti di caratteri). Ecco il codice SQL per la creazione della nostra tabella news:
# # Struttura della tabella `news` # CREATE TABLE news ( id int(11) NOT NULL auto_increment, data date NOT NULL default '0000-00-00', titolo varchar(255) NOT NULL default '', testo longtext NOT NULL, PRIMARY KEY (id) ) TYPE=MyISAM; Una volta creata la tabella, inseriamo alcune news o comunque anche del testo a caso, tanto per avere qualcosa da poter prendere e visualizzare. #
# Inserimento di dati nella tabella `news` # INSERT INTO `news` VALUES (1, '2005-02-24', 'Slide News con FLash-PHP-MySQL', 'Tutorial sulla comunicazione tra Flash e PHP per realizzare una o slide di news che risiedono in un database MySQL.'); INSERT INTO `news` VALUES (2, '2005-02-23', 'Macromedia Flash player 8', 'Viene presentato per la prima volta a Tokyo il Flash Player 8, dal sito di Colin Mook è possibile scaricare il video in diversi formati.'); INSERT INTO `news` VALUES (3, '2005-02-22', 'Nuova sezione sul mobile', 'Macromedia apre una nuova sezione dedicata al mondo delle periferiche come cellulari e pda e l''integrazione con flash tramite flashcast'); INSERT INTO `news` VALUES (4, '2005-02-21', '8balls beta tester!', 'Scrivete a Macromedia per diventare betatester della prossima release di Flash'); INSERT INTO `news` VALUES (5, '2005-02-20', 'In arrivo Macromedia Captive', 'Macromedia Captivate è l''evoluzione del prodotto Macromedia RoboDemo, nuove funzionalità rivolte al mondo dell''e-learning.'); Bene, ora che abbiamo la nostra fonte di dati, passiamo alla parte di script Server Side con PHP. 3. Parte PHP Quello che segue, è il nostro codice semplice semplice che ci permetterà di prendere i dati da MySQL e di restituirli in un formato leggibile a Flash. <?php $host = 'localhost'; # l'host in cui risiede il database (IP) $user = 'username'; # la username per accedere al database $pass = 'password'; # la password per accedere al database $db = 'Tutorials'; # il nome del database mysql_connect($host,$user,$pass); #connessione al database mysql_select_db($db); #selezione del database $tot = 5; # il numero di news da visualizzare $i = 0; # variabile che servirà da indice $query = "SELECT id,DATE_FORMAT(data, '%d.%m.%Y') as newData,titolo,testo FROM news ORDER by data desc LIMIT 0,$tot"; $result = mysql_query($query); $output = 'totNews='.mysql_num_rows($result); while($news = mysql_fetch_array($result)){ $output .= '&data'.$i.'='.$news['newData']; $output .= '&titolo'.$i.'='.urlencode($news['titolo']); $output .= '&testo'.$i.'='.urlencode(substr($news['testo'],0,200)); $i++; } echo $output; ?> Ora passiamo ad analizzare il codice, come potete vedere è molto semplice. Iniziamo con il dire che tutto quello che sta tra il tag di apertura <?php ed il tag di chiusura ?> viene interpretato come codice PHP. Non ci soffermeremo nella prima parte di codice, che oltre ad aver commentato riga per riga di codice, è molto semplice ed intuitiva. Dopo quindi esserci collegati al database, creiamo alcune variabile: $tot = 5; $i = 0; La prima $tot serve a regolare il numero delle news che vogliamo far visualizzare nel nostro filmato Flash (quindi a vostra scelta), mentre la seconda $i verrà utilizzata come indice che incrementeremo per "numerare" le news. Analizziamo ora la parte riguardante alla query al database: $query = "SELECT id,DATE_FORMAT(data, '%d.%m.%Y') as newData,titolo,testo FROM news ORDER by data desc LIMIT 0,$tot"; $result = mysql_query($query); Seleziona (SELECT) i campi id, data, titolo, testo dalla (FROM) tabella news ordinandoli (ORDER) per data decrescente (desc) prendendo solo (LIMIT) i primi cinque risultati (da 0 a 5). La parte con DATE_FORMAT() serve per formattare la data che è nel database, infatti la data viene inserita nel database in formato americano, cioè: aaaa-mm-gg (es: 2005.01.03); noi quindi prendiamo il campo data e lo formattiamo così: gg.mm.aaaa (03-01-2005) assegnandolo a newData. Come ben sappiamo Flash riesce a leggere un output di questo tipo: variabile=valore&variabile1=valore1&variabile3=valore3...e così via... il carattere & funziona da separatore tra coppie variabile=valore. Cosa possiamo fare per far restituire un output del genere dalla nostra pagina PHP? Al momento abbiamo assegnato alla var $result i risultati della query al database ($query), ma non sono ancora disponibili... che significa? Significa che il risultato della query c'è, ma non è disponibile a PHP. Per rendere i dati disponibili a PHP utilizzeremo la funzione mysql_fetch_array, che restituirà una riga di risultato come un array associativo (questo ci permetterà di fare riferimento agli output per il nome del campo del database) e "sfoglieremo" le righe di risultati grazie ad un ciclo while. Grazie a questo ciclo while concateneremo i dati (numerati grazie alla variabile $i) nella variabile $output, che alla fine stamperemo a video, pronta per essere letta da Flash. $output = 'totNews='.mysql_num_rows($result); Come prima cosa dobbiamo dire a Flash quante sono le news, quindi assegnamo alla variabile $output la variabile totNews che sarà uguale al numero di risultati (mysql_num_rows) della nostra query... vi chiederete, perchè utilizzare questa funzione se già usiamo il limite della variabile $tot? Utilizziamo questa funzione nel caso ci siano meno news del valore massimo da visualizzare (in questo caso 5), immaginate di avere solo tre news (quindi tre righe nel database) se noi utilizassimo la variabile $tot diremo a Flash che ci sono 5 news, anche se in realtà sono 3, quindi ci troveremo 2 news inesistenti che Flash, non trovando, visualizzerebbe come undefined. while($news = mysql_fetch_array($result)){ $output .= '&data'.$i.'='.$news['newData']; $output .= '&titolo'.$i.'='.urlencode($news['titolo']); $output .= '&testo'.$i.'='.urlencode(substr($news['testo'],0,200)); $i++; } echo $output; Grazie al simbolo .= (concatenamento) aggiungeremo ai dati già presenti all'interno della variabile $output (al momento solo totNews) i dati relativi alle news. il ciclo while viene eseguito fino a quando la condizione dentro alle parentesi tonde è vera (quindi tante volte quante sono le righe di risultati), vediamo con un esempio pratico che succede: totNews=numero risultati ciclo while(prima news) aggiungiamo data0=data prima news aggiungiamo titolo0=titolo prima news agguingiamo testo=testo prima news incrementiamo di uno la variabile $i ciclo while(seconda news) aggiungiamo data1=data seconda news aggiungiamo titolo1=titolo seconda news aggiungiamo testo1=testo seconda news incrementiamo di uno la variabile $i ...e così via (spero sia chiaro il concetto) in modo che alla fine stamperemo a video con: echo $output; un output del genere: totNews=5&data0=03.01.2005&titolo0=titolo news&testo0=testo news&data1=20.02.2005&titolo1=titolo news&testo1=testo news...e così via. ATTENZIONE!
Per i campi titolo e testo ho applicato la funzione urlencode in quanto ci potrebbero essere all'interno dei rispettivi testi il carattere & che come detto detto in precedenza funziona da separatore tra variabili, quindi ci stroncherebbe il testo e sballerebbe le news; grazie a questa funzione, il testo viene urlencodato. Inoltre con campo testo, essendo di tipo LONGTEXT ho usato anche la funzione substr che permette di prendere solo un certo numero di caratteri, nel nostro caso i primi 200. Una volta scritto il codice, salvate il file con il nome news.php se provate ad aprirlo da browser dovreste visualizzare questo. 4. Parte Flash Apriamo ora Flash e create un nuovo filmato con le dimensioni che meglio si addicono alle vostre esigenze, io utilizzero una larghezza di 300 px per un'altezza di 200 px. Nella seguente immagine potete visualizzare la struttura della timeline principale. Fig. 1 ![]() Creiamo quattro livelli: • AS, dove inseriremo il codice actionscript • grafica, dove posizioneremo una semplice "cornice" per delimitare lo spazio di visualizzazione delle news • mask, dove utilizzeremo un clipfilmato come maschera del testo • news, dove avremo visualizzeremo le news Creiamo la "cornice" nel livello grafica, selezionando lo strumento rettangolo, e dando 5, come valore come valore a raggio rettangolo arrotondato. Tracciamo un rettangolo grigio (#CCCCCC) di 280*180 px centrandolo rispetto allo stage, quindi con coordinate x e y uguali a 10. Selezioniamo e cancelliamo il tratto (contorno del rettangolo). Selezioniamo il rettangolo, andiamo nel menu in alto: Elabora => Forma => Sfuma bordi e riempimento... , si aprirà una tabellina come nella seguente immagine: ![]() mettiamo 8px di distanza, numero di passaggi 40 e come direzione verso l'interno. Si creerà un lieve effetto di sfumatura nei bordi, ora basterà cliccare nella parte centrale grigia e cancellare per avere la nostra "cornice" sfumata. Nel livello mask tracciamo un rettangolo bianco che copra tutta l'area del filmato, quindi 300*200 px. Selezioniamo il rettangolo e andiamo nel menu in alto: Elabora => Converti in simbolo (o premiamo il tasto F8) , si aprirà una finestra come nella seguente immagine: ![]() assegnamogli il nome mask, selezioniamo come comportamento Clip filmato e clicchiamo su OK. Ora che il rettangolo è un clip filmato selezioniamolo e nelle proprietà gli diamo come nome istanza mask. ![]() Nel primo frame del livello news ho messo una semplice animazione in loop della scritta "loading dati", che si visualizzerà nell'attesa che si siano caricati i dati che caricheremo dalla pagina PHP. Nel secondo frame del livello news inseriamo un campo di testo dinamico al quale daremo come nome istanza txtNews. E' imporatente selezionare la voce Multiriga e Rendi il testo come HTML. ![]() 5. Parte Actionscript Eccoci arrivati all'ultima parte del tutorial... come abbiamo visto nella prima immagine, nella timeline abbiamo 3 frame con codice actionscript: 1, 2, 30. Codice del 1° frame: stop(); Stage.showMenu = false; Stage.scaleMode = 'noScale'; System.useCodepage = true; file = 'http://www.dominio.it/news.php'; news = new LoadVars(); news.onLoad = function(success){ if(success){ play(); } } news.load(file); alpha = 100; i = 0; function time(a){ fade = setInterval(a, 20); } function fadeIn(){ if(alpha == 0){ clearInterval(fade); play(); } else{ alpha -= 1; mask._alpha = alpha; } } function fadeOut(){ if(alpha == 100){ clearInterval(fade); gotoAndPlay(2); } else{ alpha += 1; mask._alpha = alpha; } } Come potete vedere, anche qui il codice non è complicato. Fermiamo l'esecuzione del filmato con => stop(); Nascondiamo le voci di default del menu di scelta rapida del Flash player con => Stage.showMenu = false; Blocchiamo il ridimensionamento in scala del filmato nello stage con => Stage.scaleMode = 'noScale'; Come da guida, con System.useCodepage = true; facciamo interpretare al Flash player i file esterni utilizzando la tabella codici tradizionale del sistema operativo in cui è in esecuzione il lettore. Ora viene la parte più importante, il caricamento della pagina PHP o meglio dell'output della pagina PHP. Assegnamo alla varibile file il percorso della pagina PHP: file = 'http://www.dominio.it/news.php'; Creiamo un oggetto LoadVars che denomineremo news: news = new LoadVars(); Scarichiamo i dati dalla pagina PHP e li inseriamo nell'oggetto news grazie al metodo load della classe LoadVars: news.load(file); Con l'evento onLoad della classe LoadVars controlliamo che il caricamento dei dati sia avvenuto correttamente, il parametro success restituisce infatti true se l'operazione load è stata eseguita correttamente, altrimenti restituisce false, quindi se tutto è andato a buon fine facciamo avanzare il filmato con play(); news.onLoad = function(success){ if(success){ play(); } } Ora passiamo ad analizzare le funzioncine che useremo per avere un effetto di fade-in e fade-out sul testo. Inizializziamo la variabile alpha con valore 100 (sarebbe l'attuale alpha del clip filmato mask e la variabile i a 0 che useremo come indice: alpha = 100; i = 0; La funzione time utilizza setInterval(), cioè richiamerà la funzione passatagli come parametro (a) con un intervallo di tempo che stabiliremo, nel nostro caso 20 (1000 = a 1000 millisecondi = 1 secondo): function time(a){ fade = setInterval(a, 20); } Le due funzioni fadeIn() e fadeOut() sono praticamente uguali, la differenza è che la prima (fadeIn) controlla che alpha sia uguale a 0, quindi se la variabile alpha è diversa da 0 la decrementerà di 1 ad ogni richiamo della funzione, mentre la seconda (fadeOut) controlla se la variabile alpha è uguale a 100, quindi se la variabile alpha è diversa da 100 l'incrementerà, così da ottenere un'effetto d'entrata e di uscita per il testo, perchè al momento dell'incremento o decremento il valore di alpha viene applicato alla proprietà _alpha del clip filmato mask. In entrambe, quando la condizione viene raggiunta (restituisce true) cancelliamo la chiamata a setInterval() con clerInterval(). In fadeIn, quando alpha è uguale a 0 facciamo avanzare il filmato nella timeline, mentre in fadeOut, quando alpha è uguale a 100 facciamo ritornare il filmato al secondo frame della timeline, così da ottenere un loop. Codice del 2 ° frame: stop(); Siamo quasi giunti alla fine... nel 2° frame fermiamo il filmato e richiamiamo le funzioni News() e time(fadeIn). La funzione News() controlla se la variabile i è uguale al valore della variabile tot passata dal file PHP (questo xchè a fine funzione la variabile i viene incrementato di 1), se lo è, gli riassegna il valore 0; questo per fare in modo che, visualizzata la prima, seconda, terza, ..., ultima news, rinizi con la prima. Assegnamo quindi i dati relativi ad ogni singola news al nostro campo di testo txtNews, così da visualizzare: la data, il titolo ed il testo formattandoli con i tag HTML <i></i>(italic) <b></b>(bold) e <br/>(a capo). txtNews.htmlText = '<i>'+news["data"+i]+'</i><br />'; txtNews.htmlText += '<b>'+news["titolo"+i]+'</b><br />'; txtNews.htmlText += news["testo"+i]; risultato: data titolo testo Per finire nel 30° frame fermiamo il filmato ( stop() ) e richiamiamo la funzione time(fadeOut); stop(); time(fadeOut); 6. Conclusioni Bene, il tutorial è finito, ora che abbiamo capito come poter realizzare dei filmati in Flash dinamici grazie alla comunicazione tra Flash e PHP (MySQL), sicuramente vi verranno in mente moltissime idee di come sfruttare quest'interazione (gallery, guestbook, from mail, ... e tantissimo altro). Ad esempio questo semplice filmatino appena realizzato che visualizza brevi news lo si può implementare utilizzando dei link ad un eventuale pagina di news, per un tipo di news che necessita di molto testo, in modo da avere uno stralcio della news che da nota all'utente dell'argomento e che direziona verso quella completa. Per problemi o dubbi, discutene nel FORUM. » visualizza un esempio dell'applicazione. » scarica i file sorgenti A cura di coach, inserito il 22.02.2005 ------------------------------------------------------------ Copyright by coachdesign - © 2003-2025 ------------------------------------------------------------ |