I Preloading ormai sono fondamentali per le nostre applicazioni Flash, rendono l’attesa del caricamento meno noiosa e non lasciano quei tempi vuoti in cui potremo perdere l’utente.

Oggi voglio farvi vedere come realizzare un preloading simile a Windows Vista

Il preloading è composto da un clip filmato contenente la base con all’interno un successivo clip per la barra
 

  •  Relizziamo la base del Preloading

Base Preloading Vista

  1. Dal pannello Strumenti scegliamo lo Strumento Rettangolo
  2. Dal pannello Strumenti andiamo a dare un raggio.jpg raggio
    rettangolo arrotondato 5
  3. Dal pannello Colore andiamo ad applicare una sfumatura lineare dal basso in alto, da #CACACA a #FBFBFB
  4. Bordo 2 px #A5A4A2
     
     
  •  Relizziamo la base della Barra

Barra Preloading Vista

  1. Dal pannello Strumenti scegliamo lo Strumento Rettangolo
  2. Dal pannello Strumenti andiamo a dare un raggio.jpg raggio
    rettangolo arrotondato 5
  3. Dal pannello Colore andiamo ad applicare una sfumatura lineare dal basso in alto, da #04B123 a #C9FFCD
  4. Inoltre applicheremo alla parte superiore della barra, su un livello superiore, una porzione della sua metà di colore #FFFFFF alpha 50%
     
     
  •  Relizziamo l’effetto scorrevole luminoso
  1. Costruiamoci un rettangolo con una sfumatura  a 4 colori tutti su tonalità di bianco, cambiano il parametro alpha
  2. Inseriamo un interpolazione di movimento sulla barra verde creata in precedenza con il nostro rettangolo sfumato
     
  • Il codice
  1. Inseriamo sul nostro movie clip il seguente codice:

onClipEvent (load) {
total = _root.getBytesTotal();
}
onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
if (loaded == total) {
_root.gotoAndStop(2);
}
}

Scarica il sorgente
Guarda il Tutorial

Author

Sono un Creative Strategist con più di 10 anni di esperienza in strategie digitali. Il mio ruolo di Stratega consiste nell’ideare e sviluppare concept creativi per progetti multicanale, individuando le attivazioni e dinamiche di Marketing da applicare attraverso un approccio strategico.

7 Commenti

  1. ciao
    ho scaricato il tuo tutorial e sto’ cercando di imparare flash (quindi ne capisco ben poco) ho aperto il file sorgente l’ho personalizzato e l’ho inserito in un file html chiamato index.html dopo l’ho caricato sul mio sito tramite ftp dopo riaprendo il mio sito mi sono accorto che non è cambiato niente…allora pensavo non e che serve qualche collegamento alla fine del file flash ?
    in poche parole il mio problema e:
    prima che si entra sul sito deve uscire questo caricamento !
    grazie e scusa dell ingnoranza. ciao!

  2. Se usi i miei preloader senza inserire niente nel secondo frame non vedrei nulla in quanto non c’è niente da caricare

    prova a inserire nel secondo frame un’immagine o altro…

  3. ciao
    senti io questo preload lo vorrei mettere prima di un gioco
    cioè deve partire prima il preload per poi caricarmi il gioco
    puoi aiutarmi????

  4. Se scarichi l’esempio capirai benissimo come intervenire…

    in pratica inserisci tutto il tuo progetto dopo il preloader

  5. Ciao Julius,
    io non riesco proprio ad inserire il preload prima del mio lavoro in flash. Ho creato un’animazione composta da circa 20 livelli. Ho provato ad inserire il preload prima di tutti gli altri frame ma l’unica cosa che riesco a vedere è l’immagine da te inserita. Se elimino l’immagine vedo solo lo sfondo bianco. Potresti darmi una mano? Grazie mille.

  6. Ciao Julius.
    Bello il preload….tutto bello qui. Volevo chiederti solo come aggiungo la percentuale di avanzamento ed eventuali KB caricati.
    Grazie anticipatamente

  7. @angelo ciao angelo

    inserisci un campo di testo dinamico di nome carica_txt

    poi in linea 9 sul clip

    _root.carica_txt.text = "Loaded " + percent + "%";

    Dai anche un’occhiata a questi preloader

Commenti