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

Preload di immagini JPG in ActionScript 2.0

Caricare immagini JPG esterne utilizzando gli eventi e i Listener di ActionScript 2.0
Caricare immagini JPG esterne utilizzando gli eventi e i Listener di ActionScript 2.0
Link copiato negli appunti

Come è noto, nei filmati flash possiamo caricare dati esterni come audio, video, ma soprattutto immagini JPG. In questo tutorial vediamo come risolvere elegantemente il caricamento delle immagini sfruttando il meccanismo degli eventi e dei listener messo a disposizione da ActionScript 2.

Per prima cosa abbiamo bisogno di un contenitore, ovvero un MovieClip che accolga (e posizioni) l'immagine che dobbiamo caricare. Una volta creato il contenitore possiamo pensare al caricamento del file. Per questo ci serviamo della classe MovieClipLoader. Questa classe ci permette di tenere sotto controllo il caricamento, grazie agli eventi che espone:

  • onLoadStart - viene scatenato quando parte il caricamento
  • onLoadProgress - viene scatenato ad ogni avanzamento del caricamento
  • onLoadComplete - viene scatenato a caricamento concluso

Non dobbiamo far altro che definire un oggetto che resti in ascolto di questi eventi (listener appunto) e che stabilisca le operazioni da svolgere a seconda dei casi.

Creare il contenitore

Iniziamo creando un documento nuovo di dimensioni 550x600 e disegniamo un quadrato, proprio nel centro dello stage della grandezza a noi preferita, per l'esempio la impostiamo a 513x507.

Figura 1. Il disegno preliminare
Il disegno preliminare

Convertiamo il quadrato in clip filmato cliccandoci su con il tasto destro e selezionando converti in simbolo" (oppure col tastoF8). Impostiamo il Pivot angolare in alto a sinistra, e rinominiamo l'istanza del movieclip come target_mc:

Figura 2. Conversione del filmato
Conversione del filmato
Figura 3. Dare un nome all'istanza del MovieClip
Dare un nome all'istanza

Ora entriamo nel movie appena creato e duplichiamo il quadrato su un'altro layer. Il layer del quadrato superiore fungerà da maschera, quindi trasformiamo il livello con l'apposito pulsante (o tasto destro + mask).

Figura 4. Creazione della maschera
Creazione della maschera

Il quadrato sottostante, dopo essere stato convertito a sua volta in MovieClip, fungerà da contenitore per l'immagine da caricare. Chiamiamo questa istanza image_mc.

Figura 5. Conversione in MovieClip
Conversione in MovieClip

Prima di andare avanti è importante soffermarci su due definizioni che spesso non sono chiare:

  • Il nome del MovieClip definisce una classe di oggetti simili e possiamo considerarlo ciò che ci consente di identificare il tipo di MovieClip che ci serve all'interno della libreria.
  • Il nome di istanza invece serve ad individuare un particolare filmato

Precisato questo, per evitare che le immagini siano troppo grandi, ed escano dalla nostra area utile, creiamo una maschera per evitare che l'immagine caricata strabordi. Fatto questo il nostro contenitore è stato creato. Torniamo alla root del filmato.

Non ci rimane che creare il nostro contatore della percentuale di preload. Per farlo piazziamo una casella di testo su un nuovo livello che chiameremo Preloader. Impostiamo la casella dinamica di colore nero, e la posizioniamo dove più ci piace, infine la selezioniamo ed assegnamo anche ad essa un nome istanza, per esempio percentual_txt.

Figura 6. Creazione del preloader
Creazione del preloader

Per organizzare meglio il nostro movie, selezioniamo il testo dinamico e creiamo un nuovo movieclip che lo conterrà nominando l'istanza preloader_mc. Ora il percorso per intercettare la nostra istanza di campo testo dinamico sarà: preloader_mc.percentual_txt.

Figura 7. Movieclip del preloader
Movieclip del preloader

Lo script

Finalmente iniziamo a lavorare allo script per caricare JPG esterne con i listener. Come abbiamo detto, i listener sono oggetti che "stanno in ascolto", servono a registrare gli eventi scatenati nel filmato e a mettere in campo le azioni necessarie alla loro gestione.

Nel nostro esempio, ipotizziamo che il nostro filmato venga caricato da un'altro e che le variabili esterne vengano prese dal filmato principale (livello0). Queste variabili ci permettono di capire quale immagine caricare e dove cercarla.

Cominciamo con suddividere il caricamento dell'immagine tra la presentazione e le immagini successive, quindi analizziamo questo script che scriveremo in un nuovo layer che chiameremo per convenzione AS:Script

// verifica se si tratta dell'immagine di presentazione
if (_level0.fileNumber == 0)
{
  // crea il percorso completo per il file da caricare
  fileToLoad = _level0.folderPath + "/" + "presentazione.jpg";
} 
else 
{
  // crea il percorso del file da caricare in base alla scelta di Main
  var fileToLoad:String;
  fileToLoad = _level0.folderPath + "/" + _level0.fileNumber.toString() + ".jpg";
}

Se fileNumber del nostro filmato principale è pari a 0 (immagine di default) allora il file da caricare sarà presentazione.jpg, contenuta nella cartella specificata nel filmato principale come folderPath. Grazie al numero dell'immagine e alla percorso di base, possiamo definire il percorso relativo di ogni file, nella variabile fileToLoad.

Una volta stabilito il percorso del file, iniziamo il caricamento:

// istanzia un loader
var loader:MovieClipLoader = new MovieClipLoader();

// crea un listener
var loadListener:Object = new Object();

// definisce il gestore per l'evento onLoadStart
loadListener.onLoadStart = function(loadTarget)
{
  target_mc.image_mc._visible = false;
}

// definisce il gestore per l'evento onLoadProgress
loadListener.onLoadProgress = function(loadTarget, bytesLoaded, bytesTotal)
{
  // calcola la percentuale di avanzamento
  var percentLoaded = Math.round (bytesLoaded/bytesTotal * 100);
  // aggiunge il simbolo % 
  percentuale = percentLoaded.toString() + "%";
  // Segna nel movie lo stato della percentuale
  loader_mc.percentual_txt.text = percentuale;
}

// definisce il gestore per l'evento onLoadStart
loadListener.onLoadComplete = function(loadTarget) 
{
  gotoAndStop("out");
}

// associa il listener all'oggetto loader
loader.addListener(loadListener);

// carica il filmato nel MovieClip
loader.loadClip(fileToLoad, target_mc.image_mc);
stop(); 

Come si vede abbiamo assegnato ad ogni evento una funzione, dichiarata implicitamente, che viene richiamata come gestore dall'evento stesso.

All'inizio del caricamento, nascondiamo provvisoriamente il nostro contenitore di immagini target_mc.image_mc._visible = false;.

Durante il caricamento dei dati passiamo il valore della percentuale di caricamento al nostro campo di testo dinamico. Quando il caricamento sarà completato, ci spostiamo nel frame 2, etichettato come OUT, dove inseriremo dei comandi per rendere nuovamente visibile il filmato precedentemente nascosto e per chiudere il listener.

Una volta definiti tutti gli gestori (handler) per gli eventi, possiamo assegnare l'oggetto ascoltatore al MovieClipLoader. Infine siamo pronti per lanciare il nostro caricamento con il metodo loadClip, passandogli il percorso dell'immagine.

Figura 8. Gestione del listener
Gestione del listener

Il filmato è quasi pronto, non ci resta che etichettare come "out" il fotogramma 2 della scena, dove poi inseriamo lo script che cancellerà il listener e mostrerà l'immagine caricata. Questa azione è molto importante perché evita di utilizzare cicli macchina per tenere in ascolto l'oggetto.

// rimuove il listener
loader.removeListener(loadListener);
// rende di nuovo visibile il filmato che contiene l'immagine
target_mc.image_mc._visible = true;
stop(); 
Figura 9. Inserimento dello script
Inserimento dello script

Possiamo salvare il filmato come visualizer.fla, ed esportare l'swf con lo stesso nome.

Il contenitore

Come abbiamo detto prevediamo che il nostro filmato sia contenuto all'interno di un filmato principale. Creiamo un nuovo file con le stesse dimensioni del precedente. Scriviamo 6 caselle di testo, presentazione, immagine1, e via di seguito.

Figura 10. Creazione dei tasti
Creazione dei tasti

Ora creiamo delle aree sensibili che posizioneremo sulle nostre scritte e che utilizzeremo poi per lanciare la funzione che scriveremo tra poco.

Figura 11. Creazione delel aree sensibili
Creazione delel aree sensibili

Ora andiamo nella root, creiamo sempre il nostro layer convenzionale chimandolo AS:Script dove inseriremo il codice per fare funzionare il filmato di prima. Digitiamo le seguenti righe ed analizziamole insieme

// il numero dell'immagine
var fileNumber:Number;
// il percorso di base delle immagini
var folderPath:String;

// definisce le immagini da aprire e il loro path
openImage = function (path:String, imageNo:Number)
{
  fileNumber = imageNo;
  folderPath = path;
  // apre  il filmato delle visualizzazioni 
  // per visualizzare l'immagine sul livello 10
  loadMovieNum("visualizer.swf", 10);
}

// lancia la funzione una volta per aprire 
// il file di presentazione 
openImage("image", 0);

Creiamo prima le variabili per generare il percorso dei file, poi costruiamo una funzione che prenda due valori: il percorso dell'immagine e il il numero dell'immagine da caricare.

Supponendo di avere una cartella image, con i 6 file, presentazione.jpg, 1.jpg, 2.jpg, etc., lanciamo la funzione, alla fine dello script, passando il valore di percorso(image) e il numero dell'immagine da aprire (nel primo caso, lo 0 indica la presentazione).

Non rimane che assegnare le azioni ai 6 pulsanti, ognuno sulla sua istanza di area sensibile.

Selezioniamo l'area sensibile di ciascun pulsante (0 = presentazione) ed inseriamo il seguente codice, sostituendo ogni volta alla X il numero dell'immagine:

on(release) { openImage("image", X); }

Salviamo il file con un nome a piacere, mettiamolo online per provarlo assieme alla cartella image, e l'album è pronto.

Da tenere in considerazione:

  1. file come le immagini su Internet, vengono caricate una sola volta e poi salvate in cache, quindi se non vedete più il caricamento sulle immagini gia viste, è normale. Se volete riprovare svuotate la cache.
  2. file Jpg non devono essere salvati come Progressive, perché questo formato di salvataggio non viene caricato in Flash.


Ti consigliamo anche