Atlantide Web Island

Salve amici di atlantide . Innanzitutto vorrei spiegare il senso del titolo. Ho deciso per il momento di scrivere una guida su come creare una semplice foto gallery, assumendo che le foto abbiano però dimensioni fisse, perché ho intenzione di scrivere una successiva guida sul posizionamento dinamico di oggetti in flash e sul ridimensionamento dello stage, che ci permetteranno di avere le giuste conoscenze per creare una nuova foto gallery che visualizzi in modo corretto immagini di qualsiasi dimensione. Ma ora mettiamoci al lavoro. La foto gallery in questione comunica con un file xml in cui andiamo ad inserire le informazioni delle foto da caricare. In questo caso nel mio file xml, che chiamo “immagini.xml”, inserisco il seguente codice <?xml version="1.0" encoding="utf-8"?> <immagini> <immagine indirizzo="1.jpg" infos="Questa è la prima immagine"/> <immagine indirizzo="2.jpg" infos="Questa è la seconda immagine"/> <immagine indirizzo="3.jpg" infos="Questa è la terza immagine"/> </immagini> In seguito da flash creo un nuovo file Actionscript che chiamo “Immagine.as” al quale do questo codice class Immagine{ public var indirizzo:String; public var infos:String; public function Immagine(url:String, info:String){ //costruttore indirizzo = url; infos = info; } } Inoltre mi preparo 3 immagini jpeg, che da come si evince dal file immagini.xml, chiamo 1.jpg, 2.jpg e 3.jpg, tutte e tre con dimensioni 512 x 384. Passiamo alla grafica. Creo un nuovo file Flash Actionscript 2.0 che chiamo gallery.fla , e inserisco subito 2 livelli che chiamo content e actions. Nel primo fotogramma del livello content andiamo a disegnare la nostra gallery. Mettiamo un pannello rettangolare un po’ più grande delle immagini, in questo caso 526.3 x 399 , sul quale inseriamo un movie clip, di nome istanza “loader_mc” che sarà così formato: al suo interno avrà un rettangolo di dimensioni 512 x 384, che trasformiamo in oggetto grafico e che nascondiamo subito, portando il suo valore alpha, dal pannello proprietà, a 0. Questo ci permetterà di avere un’anteprima delle dimensioni che avranno le immagini e quindi ci darà la possibilità di posizionarle correttamente. Creiamo in seguito i pulsanti che ci permetteranno di navigare in ambedue le direzioni fra le immagini, ai quali sempre possiamo anche non dare nome istanza e al loro centro posizioniamo un rettangolino sul quale inseriamo un campo di testo dinamico al quale diamo nome istanza qta_txt, che mostrerà il numero dell’immagine corrente rispetto alle immagini totali. Ancora giù inseriamo una barra orizzontale sulla quale posizioniamo un campo di teso dinamico al quale diamo nome istanza info_txt che conterrà le informazioni sull’immagine corrente. Di seguito inseriamo un oggetto button con la scritta “Slide show” ( inizialmente rossa ) al quale diamo il codice on(release){ function scorri(){ if(currPosition==ai.length-1) currPosition=-1; /* se siamo nell’ultima posizione assegno a currPosition -1 */ caricaImmagine(++currPosition); // incremento quest’ultima e carica l’immagine relativa } if(!slide){ //se slide è false, ovvero se la funzione slide show è disabilitata slide=true; //assegna a slide true my_color = new Color(_root.slide_btn); //preparo il colore per il pulsante in questione my_color.setRGB(0x00FF00); //setto il colore verde IntervalNumber = setInterval(scorri, 5000); //creo un intervallo che mi richiama scorri ogni 5 secondi } else{ //altrimenti clearInterval(IntervalNumber); //cancello l’intervallo precedentemente creato slide=false; //setto slide a false my_color = new Color(_root.slide_btn); //preparo il colore per il pulsante in questione my_color.setRGB(0xFF0000); //setto il colore rosso } } Nel centro del “pannello” sul quale ho posizionato il mio loader_mc inserisco un nuovo movie clip con all’interno la dicitura “wait while loading” e subito dopo un campo ti testo dinamico che chiamo perc_txt. Ritorno alla scena principale, seleziono questo movie clip ( al quale possiamo anche dare un nome istanza, ma non è influente ) e gli assegno il codice onClipEvent(enterFrame){ //ad ogni fotogramma if(_root.loader_mc.getBytesLoaded()==_root.loader_mc.getBytesTotal()){ //se la foto è caricata this._alpha=0; //nasconditi this.perc_txt.text=""; //svuota il contenuto di perc_txt } else { //altrimenti this._alpha=100; //mostrati this.perc_txt.text=Math.round((_root.loader_mc.getBytesLoaded()/_root.loader_mc.getBytesTotal())*100)+" %"; /* assegna a perc_txt la percentuale di caricamento, che si ottiene dividendo I byte caricati per quelli totali, moltiplicando per 100 e poi arrotondando il tutto con il metodo round della classe Math */ } } Fino a questo punto il nostro stage dovrebbe apparire più o meno così
Nel primo fotogramma del livello actions inserisco il dodice var ai:Array = new Array(); //mi creo un array di immagini var currPosition:Number=0; //variabile che memorizza la posizione corrente var posizione:String; // var totale:String; // variabile che memorizza il numero totale di immagini var slide:Boolean=false; //variabile che mi dice se l’opzione slide show è attiva var my_color:Color; //un oggetto colore che mi servirà in seguito var xml:XML = new XML(); //Carico il file XML delle immagini xml.ignoreWhite = true; //Ignoro gli spazi vuoti xml.onLoad = function(ok) //quando I dati sono caricati { if(ok){ //se sono stati caricati con successo var nodes:Array = this.firstChild.childNodes; //Creo un array contenente le immagini del file XML for(var i=0;i<nodes.length;i++) { ai.push(new Immagine(nodes[i].attributes.indirizzo, nodes[i].attributes.infos)); /*con il metodo push creo nuovi oggetti immagine, a cui passo le informazioni delle immagini, che ho disponibili nell'array nodes*/ } caricaImmagine(currPosition); } } xml.load("immagini.xml"); //Carico il file immagini.xml function caricaImmagine(currPosition:Number) { loader_mc.loadMovie(ai[currPosition].indirizzo); //carico l’immagine corrente in loader_mc info_txt.text=ai[currPosition].infos; //assegno al campo info_txt le info dell’immagine qta_txt.text=(currPosition+1)+"/"+ai.length; //mostro la foto corrente rispetto a quelle totali } Manca solo il codice per i pulsanti di navigazione. Al pulsante “precedente” assegno il codice on(release){ if(currPosition==0) currPosition=ai.length; /* se siamo in posizione 0 assegno a currPosition l’ultima posizione */ caricaImmagine(--currPosition); //decremento quest’ultima e carico l’immagine relativa } al pulsante “successiva” assegno il codice on(release){ if(currPosition==ai.length-1) currPosition=-1; /* se siamo nell’ultima posizione assegno a currPosition -1 */ caricaImmagine(++currPosition); //incremento quest’ultima e carica l’immagine relativa } Mi rendo conto che la descrizione del tutto non è delle migliori, per cui vi invito a consultare i file sorgente qui e magari vedere un esempio qui. A presto!