Caricare immagini in modo dinamico con Flash

Caricare in modo dinamico immagini sul nostro sito è un buon trucco per mantenerlo più leggero, riducendone così i tempi di caricamento. In cosa consiste? Anzichè caricare in contemporanea alla pagina tutte le immagini presenti in essa, le si fanno caricare ad una ad una. Ciò farà sì che i visitatori caricheranno solamente le immagini che effettivamente vorranno vedere (ecco un esempio di caricamento dinamico). Vediamo in 4 semplici passi come farlo.

Passo 1:

Innanzitutto, controlliamo di avere sul nostro PC tutte le immagini di cui vogliamo servirci (magari ragruppandole in un' unica cartella "immagini") e che abbiamo grossomodo la stessa dimensione. Nel nostro esempio andremo ad usare sue fotografie di chitarre. Apriamo Flash, cambiamo il nome del livello1 da "Layer1" a "Images". Se non è presente alcun livello con molta probabilità avremo impostato di non mostrare il Component Manager; semplicemente clickando Ctrl + F7 lo faremo riapparire. A questo punto apriamo l' interfaccia relativa ai Componenti, clickando sulla relativa freccettina verso il basso. Tra gli elementi che appariranno selezioniamo "Loader" e trasciniamolo nello stage.

 

 Passo 2:

Una volta trascinato viene creato, nel punto della pagina in cui abbiamo inserito il Loader, un piccolo rettangolo bianco contenente un tratto blu, contenente la scritta: "mx.control.Loader". Dobbiamo ora ridimensionarlo, facendolo grande quanto tutto lo stage; per far ciò selezioniamolo, clickiamoci sopra con il tasto destro, e poi click su "Properties"; ora siamo in grado di modificare l' estensione dell' elemento tanto in altezza quanto in larghezza, in modo da sovrapporlo all' intero stage. Fatto ciò impostiamo le posizioni X e Y entrambe a 0, il che allineerà il Loader allo stage.

Dobbiamo ora dare un nome al Loader, chiamandolo, con grande fantasia, "loader". Salviamo il tutto, creando un FLA da posizionare nella stessa cartella nella quale si trovano le fotografie; il caricamento dinamico infatti per funzionare richiede che l' SWF e le immagini si trovino nella stessa directory.

Passo 3:

Ora creiamo 2 bottoni, il primo dei quali caricherà, al click, la prima immagine, mentre il secondo richiamerà la seconda. Per fare tutto ciò creiamo un nuovo livello da chiamare "Buttons" ed accertarsi che esso si trovi sopra quello chiamato "Images". Disegnamo nel livello "Buttons" il primo bottone, rendendolo tale clickandovi sopra con il tasto destro e scegliando "Converto to a button" (o più semplicemente selezionandolo e premendo F8). Il primo lo chiameremo "button1" e lo collocheremo a sinistra

 

Stessa procedura seguiremo per creare il secondo bottone, da chiamare "button2" e da posizionare sulla destra, alla stessa altezza del primo.

 

Passo 4:

Dobbiamo ora dire cosa fare, tramite codice, ai bottoni. Selezioniamo il primo bottone, e premendo F9 ci verrà aperto il pannello "Actions" , nel quale inseriremo il codice:

    on (release){
    loader.contentPath = "guitar1.jpg";
}

Il codice è piuttosto elementare, ma comunque la prima riga dice a Flash di eseguire l' operazione solamente quando il bottone viene clickato; Il codice successivo invece è quello necessario per far caricare all' applicazione una immagine e mostrarla nell' oggetto "loader"; naturalmente al posto di "guitar1.jpg" andrà messo il nome dell' immagine che si vuole caricare. A questo punto chiudiamo il pannello "Actions" e selezioniamo il secondo bottone. Come per il primo, clickiamo su F9 ed inseriamovi il codice:

    on (release){
    loader.contentPath = "guitar2.jpg";
}

Chiuso il pannello "Actions" , possiamo testare quanto appena creato: inizialmente vedremo solamente la pagina bianca con i due bottoni; clickando su cascuno di essi ci verrà mostrata o l' immagine guitar1.jpg o guitar2.jpg, a seconda del bottone premuto.

 



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Redazione
Condividi le tue opinioni su questo articolo!