AS2: Come Creare un Preload in Flash


Oggi in questo tutorial, parleremo di un argomento molto ricercato per chi è agli inizi con Flash ed ActionScript, e cioè: Come Creare un preload del Filmato creato!

Parliamo di ActionScript 2, anche perchè il 3 non è molto usato e chi lo usa, siccome è un linguaggio a classi, si presume sappia già fare un preload… ma comunque farò il tutorial nei prossimi giorni! 😉

Inizio col dirvi che ci sono 2 modi per fare il preload:

1. Creare tutto dinamicamente applicando il codice sul fotogramma

2. Creare un movieclip di 100 fotogrammi da eseguire in base alla percentuale di avanzamento


Premessa: per mio vizio (ho la BUONA abitudine di mettere tutto il codice sui frame e mai sui movieclip).

1° Metodo:

Apriamo il nostro filmato flash, creiamo una nuova Scena che rinomineremo “Preload” e trasciniamola sopra a quella del filmato.

Ora Entriamo in questa Scena, clicchiamo sul primo fotogramma e apriamo il pannello Azioni (basta premere F9).

Ora scriviamo il codice, che commenterò passo passo:

stop(); // ferma sul fotogramma corrente

var tot:Number = _root.getBytesTotal(); // dimensione totale

Creiamo una casella di Testo Dinamico nello stage e diamo il nome di istanza “testo“.

Creiamo anche un movieclip con dentro disegnato un rettangolo con larghezza di 1px e diamo come nome di istanza “barra“.

Ora proseguiamo a scrivere il codice:


<p style="text-align: left;"><span style="color: #ff99cc;">onEnterFrame = function()</span> <span style="color: #ffcc99;">// ad ogni ciclo di frame</span>
<span style="color: #ff99cc;">{</span>
<span style="color: #ff99cc;">var car:Number = _root.getBytesLoaded();</span> <span style="color: #ffcc99;">// dimensione del filmato attualmente caricata</span></p>
<span style="color: #ff99cc;">var perc:Number = int((car/tot) * 100);</span> <span style="color: #ffcc99;">// parziale diviso totale per 100, ci da la percentuale caricata</span>

<span style="color: #ff99cc;"> testo.text = perc + " %";</span> <span style="color: #ffcc99;">// scrive nella casella di testo, la percentuale</span>
<p style="text-align: left;"><span style="color: #ff99cc;">barra._width = perc;</span> <span style="color: #ffcc99;">// diamo come larghezza della barra, la percentuale caricata (20% = barra di 20px)</span></p>
<span style="color: #ff99cc;"> if(car &gt;= tot) <span style="color: #ffcc99;">// se car è maggiore o uguale a tot</span>
{
play(); <span style="color: #ffcc99;">// il filmato va avanti, quindi riproduce la scena successiva col filmato</span>
}
}</span>

Ok, questo era il 1° Metodo!

Passiamo al 2° in cui metteremo un’animazione:

Eseguiamo le stesse cose del 1° Metodo fino al punto in cui creiamo la casella di testo dinamica.

Ora creiamo un Movieclip (Inserisci-nuovo simbolo-movieclip) e create un animazione formata da 100 fotogrammi (ad esempio una barra che al fotogramma 1 è solo una linea, e tramite interpolazione di forma al fotogramma 100 diventa una barra lunga).

Sempre in questo movieclip, create un nuovo livello e prolungate il fotogramma 1 di questo livello (che è vuoto) fino al fotogramma 100 (col pulsante F5)… cliccate su un fotogramma di questo livello e aprite il pannello azioni, e scrivete il codice:

stop();

Uscite dal movieclip tornando allo stage, e mettiamo nella scena il movieclip appena creato, e diamogli nome di istanza “caricamento“.

Ora andate al primo fotogramma e scrivete i codici:


<p style="text-align: left;"><span style="color: #ff99cc;">onEnterFrame = function()</span> <span style="color: #ffcc99;">// ad ogni ciclo di frame</span>
<span style="color: #ff99cc;">{</span>
<span style="color: #ff99cc;">var car:Number = _root.getBytesLoaded();</span> <span style="color: #ffcc99;">// dimensione del filmato attualmente caricata</span></p>
<span style="color: #ff99cc;">var perc:Number = int((car/tot) * 100);</span> <span style="color: #ffcc99;">// parziale diviso totale per 100, ci da la percentuale caricata</span>

<span style="color: #ff99cc;"> testo.text = perc + " %";</span> <span style="color: #ffcc99;">// scrive nella casella di testo, la percentuale</span>
<p style="text-align: left;"><span style="color: #ff99cc;">caricamento.gotoAndStop(perc);</span> <span style="color: #ffcc99;">// carica il fotogramma del movieclip corrispondente alla percentuale caricata</span></p>
<span style="color: #ff99cc;"> if(car &gt;= tot) <span style="color: #ffcc99;">// se car è maggiore o uguale a tot</span>
{
play(); <span style="color: #ffcc99;">// il filmato va avanti, quindi riproduce la scena successiva col filmato</span>
}
}</span>

Ok, Abbiamo Finito! Il nostro Preload è Pronto!!

P.S: Il codice l’ho scritto al volo senza provarlo. Se trovate qualche errore, segnalatemelo nei commenti! 😉



Commenti

  1. paolo ha detto:

    mi accade una cosa davvero singolare; sembra f unzionare tutto alla perfezione, ma quando vado on line – anche se ho cancellato la cache – il preload è rapidissimo e poi si carica subito il filmato, ovviamente con lentezza… dove ho sbagliato?

  2. Alessandro P ha detto:

    Il mio sito presenta dei clip in flash che ho modificato e riadattato alle mie esigenze.
    Ora, per un amico, sto realizzando una sola pagina in flash con alla base un progetto in AS2.
    Una volta iniziato, non è possibile cambiare AS per motivi che il resto del programma non sarebbe copatibile con gli script in AS3, causando evidenti di arrabbiature mai viste…

    Sono gia bene col “programma a scatole cinesi”, come lo chiamo io, carico di livelli sopra livelli.

    La pagina tratta poco di meno che la mappa dell’Africa.

    Non è ancora online e non sarà online sul mio sito ma su HB Viaggi, safari in Africa, Namibia ecc…
    Sto scoprendo che le scene vanno usate !!! Vorrei leggere su come posso inserire uno scroller in un’altra scena, o un foto album in un’altra scena, sapendo che la scena principale sono gli sfondi a 2 o 3 livelli + delle scritte.

    Considerando che ogni stato avrà almeno 5 livelli per ogni stato. Parlo di livelli nel senso che ci sarà un clip generale con tutti gli stati;

    per ogni singolo stato: 1 Clip; 1 button; 1 immagine symbol; eventuale symbol con button inseriti o clip a scatole cinesi.

    Secondo me utilizzare le scene per sgomberare lo stage da tutta sta robba servirebbe veramente !!!
    Più che 1 pagina di un sito mi sembra una casa in costruzione.
    Il preload sarebbe di troppo ??
    Di quante scene necessita una simile pagina totalmente in flash ????

    Secondo me il cabio di scena aiuta alla programmazione ordinata, secondo voi ?

  3. StefanoV ha detto:

    Ciao Maria Concetta,
    se inserisci il codice direttamente nel pulsante ad esempio all’evento release questo è il codice:

    on(release)
    {
    _parent.gotoAndPlay(“nomescena”, 1);
    }

    …da notare che nomescena è il nome della scena a cui deve andare, 1 è il fotogramma al quale puntare, se vuoi puntare ad un fotogramma con etichetta avresti potuto mettere direttamente l’etichetta tra doppi apici anzichè il numero del fotogramma.

    Fammi sapere se ti funziona 😉

  4. Maria Concetta ha detto:

    Ciao, avrei bisogno di un aiuto 🙁

    sto cercando di creare (e mi aiuto cercandolo ovunque) il codice per collegare un pulsante di una prima scena al fotogramma della scena successiva.

    la prima scena contiene preload+intro e questo blocco si ferma continuando con la musica (tutto bene). solo quando si preme HOME dovrebbe partire il primo fotogramma della scena 2 contenente tutta l'elaborazione della Home Page.

    Non so veramente come fare! mi puoi dire tu il codice da inserire nel pulsante HOME della prima scena che poi apre la HOMEPAGE nella seconda scena?

    spero di essere stata chiara! grazie 🙂

  5. Killa ha detto:

    Grazie di cuore, m'hai salvato la vita 🙂

  6. stefano ha detto:

    Grazie mille StefanoV!

    Quindi tu mi consigli di creare tutte le pagine del menu: Home etc., come swf esterne con il preload e caricarle una per volta chiudendo la pagina caricata precedentemente con unLoadMovie?

    Provo a seguire quello che mi consigli e vediamo cosa esce fuori 😉

    Ti faccio sapere.

    S.

  7. StefanoV ha detto:

    Ciao Stefano,

    rispondo subito al tuo quesito dicendoti che non si può (che io sappia) pre-caricare determinati fotogrammi di un documento…

    Esistono 2 metodi:

    1. concatenare i movieclip tramite actionscript (attachMovie è il comando) e fare il preload del movieclip con lo stesso codice per cui si fa il preload del filmato, ma al posto di _root userai il nome del MovieClio ( _root.getBytesLoaded(); diventa nomeMovieClip.getBytesLoaded(); )

    2. Sistema che ti consiglio: dividere il lavoro in più file, quindi una scena generale che farà da contenitore di pochi KB, e poi i vari swf home, chi siamo, ecc… e li carichi tramite la classe MovieClipLoader (oppure usi il comando LoadMovie) creando un preload per ogni sezione…

    Con Flash basta avere fantasia e conoscere un pò di documentazione 😉

    Ti consiglio il secondo metodo, è quello che uso sempre io…

  8. stefano ha detto:

    Ciao StefanoV,

    vista l'ultima cosa che ha scritto Paolo, sui filmati multiscena, come faccio ad inserire il preload che carica non tutta l'animazione sulla timeline ma solo una parte di esso e poi quando voglio caricare a partire da un altro fotogramma della stessa timeline ripassando per il preload?

    Esempio:

    1) preload —–> dal fotogramma 2 al 40 "Home"

    2) cliccando un tasto ——> preload —-> a partire dal fotogramma 41 al 80 "Chi Siamo"

    e cosi via…..

    Secondo te si può fare o devo inserire più scene, e se devo inserire più scene come si potrebbe fare.

    Ringraziandoti anticipatamente, resto in attesa.

    S.

  9. StefanoV ha detto:

    Hai ragione, me lo sono dimenticato 🙂 😉

  10. Paolo ha detto:

    ciao, forse ti manca un delete(onEnterFrame); prima del play.

    così com'è potrebbe dare dei problemi su filmati multiscena.

    Ciao ciao

  11. augusto ha detto:

    Grazie mille per l'aiuto e per la pronta risposta, adesso funziona tutto a meraviglia.

    Ecco il risultato:
    http://www.friedrosenstock.com/
    Ancora grazie !!!

    a++

  12. StefanoV ha detto:

    Dopo il play(); vai a capo e metti delete onEnterFrame;

  13. augusto ha detto:

    funziona tutto a meraviglia, soltanto che una volta inserito il preload nel file flash, non mi “sente” piu’ gli stop che sono alla fine di ognuna delle scene successive al preload (che ovviamente e’ la prima)…perche’? Grazie in anticipo

  14. michele ha detto:

    Stefano ti ringrazio tantissimo perchè mi stai aiutando moltissimo, ho trovato tutti i tasti per simulare il download .. e fa la simulazione, solo che mentre carica non fa vedere la barra di caricamento .. 🙁 non riesco proprio a capire dove sbaglio .. mi sa che lo rifarò da zero e poi se mai ti romperò ancora un po' le scatole per chiederti consiglio. grazie mille 🙂 ..forse devo semplicemente fare del 3D e lasciare flash a chi come te ne sa tanto 🙂

  15. StefanoV ha detto:

    La scena deve partire!! Tra i pulsanti del flash player che si apre per riprodurre il filmato trovi la simulazione del download…

    Cmq la scena si ripete velocemente perchè alla fine sull’ultimo fotogramma devi impostare un stop();

  16. michele ha detto:

    ho provato, ma anche con ctrl invio parte in automatico la scena. ho provato a pubblicare e a trasferire tutto sul server del dominio ma non funziona .. il preload non si vede e quando poi ha caricato tutto fa un gran casino .. si alternano alla velocità della luce le due scene .. mi sa che mi ci devo picchiare ancora un po' prima di rompere le scatole .. eheh .. 🙂

  17. StefanoV ha detto:

    Semplicemente avvii l'anteprima del documento con CTRL + INVIO, poi vedrai ke nel menu c'è impostazione bandwidth (ti fa scegliere la banda da simulare) e sotto il pulsante simula scarimento… 😉

  18. michele ha detto:

    ok grazie, mi ha tolto l'errore eheh .. sarà che faccio grafica 3D e sto facendomi il book da mettere online .. quindi asciuttissimo di flash .. tanto da non vedere errorini del genere 😀 una domandina fuori tutorial.. se puoi rispondermi.. ho la cs3 manon trovo in flash la voce che serve per far simulare i dowload con la connessione lenta .. 🙁

  19. StefanoV ha detto:

    Il blog mi mette delle virgolette ke flash non prende come puoi vedere:

    testo.text = perc + ” %”;

    Sostituisci i doppi apici curvati con l'apice singolo (quello sul numero 2 della tastiera), e assicurati di aver impostato ActionScript 2.

    😉

  20. michele ha detto:

    il primo metodo non mi funziona, mi da un errore alla riga "testo.text = perc + ” %”;" …ho copiato così com'era il tutto senza ovviamente i commenti .. non riesco a capire dove sbaglio 🙁

  21. StefanoV ha detto:

    Non so se ho capito bene, ma comunque basta che inserisci le 2 immagini nel movieclip caricamento (con i frame da 1 a 100). 😉

  22. guido ha detto:

    ciao ho letto il tuo tutorial, ma se io volessi realizzare un immagine che carica sull’altra come faccio?

%d blogger hanno fatto clic su Mi Piace per questo: