Inserire un Video come Sfondo in un sito Flash AS2

- Letture: 5.369

Tempo fa avevamo visto come adattare un sito Flash a tutte le risoluzioni del monitor con un’immagine di sfondo.

Oggi vediamo come inserire un video di sfondo all’intero di un sito flash su tutte le risoluzioni del monitor.

Per inserire un video in sfondo di una pagina flash utilizzeremo un video esterno FLV e un oggetto Video creato in ActionScript 2.

Come al solito andiamo a vedere il codice e i files da scaricare.

Prima di tutto dobbiamo creare un oggetto video dalla Libreria > Nuovo Video

Una volta creato l’oggetto andiamo a  inserirlo sullo stage in coordinate 0,0 e diamo come nome istanza my_video.

A questo punto entriamo nel codice, tasto rapido F9 e inseriamo il seguente codice Actionscript.

Stage.align = "TL";
Stage.scaleMode = "noScale";
var f:Object = {};
f.onResize = function() {
my_video._width = Stage.width;
my_video._height = Stage.height;
};
Stage.addListener(f);
f.onResize();

Andiamo a impostare l’allineamento dello stage TL e noScale e creiamo un oggetto onResize che servirà per aggiornare le dimensioni in tempo reale dell’oggetto video.

var my_nc:NetConnection = new NetConnection();
my_nc.connect(null);
var my_ns:NetStream = new NetStream(my_nc);
my_video.attachVideo(my_ns);
my_video.smoothing = true;
my_ns.setBufferTime(5);
my_ns.play("QUI IL TUO VIDEO FLV");

Infine andiamo a creare un oggetto video e impostiamo la sorgente inserendo la URL del nostro video FLV esterno.

Da notare il parametro smoothing=true che ci aiuterà a migliorare la qualità del video qualora le dimensioni vengano distorte.

Nelle prossime versioni andremo a vedere come ridimensionare il video in proporzione e mettere in pausa.

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

55 Commenti

  1. Una persona che si affaccia a Flash per la prima volta non capisce che si tratta di AS 2.0.. lo avrei specificato più chiaramente.
    Reputo che l’articolo sia buono anche se avrei inserito fin da subito la parte relativa al ridimensionamento.

  2. Bel tutorial julius!.
    Una domanda: ho visto dei siti dove avevano il video di sfondo in flash e i contenuti scritti in html e css. Come si può fare?

  3. @Pino: il video è di prova e ha una risoluzione bassa, ovviamente serve un video con un formato minimo di 1024 x 768 o ancora meglio in HD.

  4. @Federico

    il video è in un div con classe “background_flash” con position:fixed, dimensioni al 100% (rispetto alla pagina)…
    il div “contenitore” del sito (menu, contenuti bla bla bla…) è un position relative…
    Poi se ho ciccato qualcosa ti chiedo scusa… ma ho buttato solo un occhio veloce… ;) ma credo che se gli dai una bella occhiata capisci tutto… sembra molto semplice… simpatico cmq… :)

  5. Julius ha scritto:

    @Bene: forse ho capito, utilizzo un FLV su un altro dominio che è bloccato e non capisco ancora il motivo, ora sposto il video e dovresti vedere il tutto

    Adesso si Ju…sei un grande, ti adoro! xxx
    …e adesso sotto a provare di impararlo! ;)

  6. @ Julius:
    Grande Julius! :) Meglio non esagerare ne con le dimensioni del video, ne con lo smoothness. Lo so per esperienza. Ne ho già fatti anni fa siti così. Il risultato è un sito poco responsive.

    Texas138 ha scritto:

    position:fixed, dimensi

    Giocare con le position è l’unico modo per ottenere il video di sfondo o meglio div sovrapposti!
    Passo e chiudo! :D

  7. Ciao Julius, sai per caso dirmi come fare per far si che il video una volta concluto riparta automaticamente, tipo loop?

  8. @ Davide:

    var my_videoListener:Object = new Object();
    my_videoListener.complete = function(my_video:Object):Void {
    my_video.seek(0);
    my_video.play();
    };
    my_video.addEventListener("complete", my_videoListener);

    attenzione alle virgolette tipografiche…!

  9. francesco

    ciao è possibile caricare random piu di un flv? cioè avere tipo in libreria 3 flv e alla connessione al sito avere sempre un video diverso? se si come?
    grazie!

  10. @francesco: ciao puoi creare una semplice sequenza random in questo modo:

    mettiamo caso che esternamente tu abbia 1.flv 2.flv e 3.flv

    nel tuo codice andrai a modificare

    my_ns.play("1.fv");

    in

    ran_video = random(3)+1;
    my_ns.play(ran_video + ".flv");

  11. Inserendo questo, nel codice non dovrebbe stretchare più.
    Il video dovrebbe ridimensionarsi proporzionalmente.

    //Adatto il video
    var rapp = my_video._width/my_video._height;
    var ecout = new Object();
    ecout.onResize = function() {
    bouge();
    };
    Stage.addListener(ecout);
    bouge = function () {
    my_video._x = 0;
    my_video._y = 0;
    my_video._width = Stage.width;
    my_video._height = Stage.width/rapp;
    if (my_video._height<Stage.height) {
    my_video._height = Stage.height;
    my_video._width = Stage.height*rapp;
    }
    // end if
    };
    bouge();
    /////////////////

  12. Carissimi Julius e tutti voi del blog
    innanzi tutto grazie a tutti dei tutorial e delle indicazioni che sono davvero preziose.
    Vorrei chiedervi aiuto per risolvere un problema
    Ho utilizzato il codice di questo tutorial per il mio sito
    http://www.gegiadesign.it/kk
    come potrete costatare alla risoluzione 1920 funziona perfettamente
    a risoluzioni inferiori il mc del menu che dovrebbe posizionarsi in alto a sinistra esce dalla pagina e il contenuto nn si adatta più allo schermo
    perchè quì funziona perfettamente e a me no?
    :(
    help!
    grazie!

  13. PakoWORLD

    @ Pino:
    qualkuno può aiutarmi a inserire il codice di pino correttamente…perkè il filmato nn mi va in loop…grazie

  14. Emanuele

    Ciao a tutti, volevo cortesemente sapere un paio di cose… Come mai il video si blocca e va a scatti? La velocità di streaming per vedere un video fluido dipende dal server o dalla programmazione?
    Inoltre volevo sapere anch’io come loopare un video. Grazie

  15. @Emanuele: ciao il sorgente rilasciato ha il loop integrato e comunque lo leggi dal commento di shade

    Per il video a scatti dipende sia dalla programmazione e quindi come è impostato il tipo di scaricamento e buffering che la connessione vera e propria…

  16. ciao a tutti,
    1° compliments siete grandiosi!
    2° perchè non mi funza il loop!?
    ci son o impostazioni particolari del video flv da settare quando lo creo?

    :/

    grazie della’iuto

  17. Neanche me funziona il loop cioe quando finisce il video schermata nera!!! qualche suggerimento? :)

  18. Perfavore qualcuno mi puo aiutare non lo trovo da nessuna parte!!! grazie mille in anticipo!!

  19. var my_videoListener:Object = new Object();
    my_videoListener.complete = function(my_video:Object):Void {
    my_video.seek(0);
    my_video.play();
    };
    my_video.addEventListener(“complete”, my_videoListener);

    ho inserito questo codice ma il video non va comunque in loop…dove posso intervenire?!?!

  20. @ nich:
    Se lo scopri facci sapere :) anche perche un video che si blocca come sfondo non serve!!

  21. Cristian

    Ciao, ottimo tutoral, ma se io volessi inserire un bottone (tipo entra) alla fine del video (a cui dovrò dare uno stop), come posso fare ???

  22. salve,
    io non riesco a far funzionare il loop, ho inserito questo codice:

    var my_videoListener:Object = new Object();
    my_videoListener.complete = function(my_video:Object):Void {
    my_video.seek(0);
    my_video.play();
    };
    my_video.addEventListener(“complete”, my_videoListener);

    ma non funziona… come posso fare?

  23. WebMastro

    Sono entusiasta non solo per l’impatto visivo: uno dei requisiti richiesti dal nuovo algoritmo di Google (Caffeine), sono pienamente rispettati, in primis il ‘peso’ della pagina (websiteoptimization).

    Mancherebbe solo la validazione W3C che attualmente segnala alcuni errori ( W3C ), ma che ho corretto così (la pagina è stata poi testata positivamente su IE, Firefox, Opera, Chroma e Safari):

    Line 6, Column 110: end tag for “meta” omitted, but OMITTAG NO was specified
    ComboBox , combo, Julius, JuliusDesign, Blog, video, Action Script, dinamico
    modificare in …dinamico” />

    Line 18, Column 20: there is no attribute “marginheight”
    body marginheight="0px" marginwidth="0px"
    ho semplicemente eliminato marginheight=”0px” marginwidth=”0px” lasciando

    …ad.cgi?P1_Prod_Version=ShockwaveFlash&promoid=BIOW"><font size="1" face="Tahom…
    corretto inserendo amp; dopo &.

    La pagina è stata testata positivamente su IE, Firefox, Opera, Chroma e Safari.

    Purtroppo di Action Script ne mastico poco, dunque vorrei cortesemente sapere se la stessa tecnica può essere utilizzata ridimensionando i video. In particolare, nella creazione di ‘banneroni’ a inizio pagina.

    Grazie e scusate se mi sono dilungato oltre misura.

    P.s.: anche a me non funziona il loop.

  24. Francesco

    Ciao Julius, grazie mille, volevo solo sapere perchè il video si vede su firefox ma non altrettanto su explorer e safari?
    Ciao.

  25. Non funziona sto benedetto loop.
    Julius novità inmerito??

    p.s. complimenti davvero!!

  26. Io capisco cmq postare qualcosa che poi non funziona…. Sto benedetto loop nn va proprio!!! Cmq grazie!!

  27. Julius, ti prego risolvimi il problema del loop, non dormo da due giorni, non ne vengo a capo… sarò anche un ciuccio ma non ci riesco…te ne sarò eternamente grato.

  28. Scusate, ma perchè quando lo metto online, o cerco di visualizzarlo nella pagina html, lo sfondo con il video non si vede????!!!!! la pagina rimane biancha!
    Lo vedo solo con flash SWF!!
    Il filmato FLV io l’ho messo nella stessa cartella dove ci sono tutti gli altri file!! come mai????

    Qualcuno mi aiuti, Grazie!

  29. Antonio ha scritto:

    Julius, ti prego risolvimi il problema del loop, non dormo da due giorni, non ne vengo a capo… sarò anche un ciuccio ma non ci riesco…te ne sarò eternamente grato.

    Ricacate il file Download, ora il video andrà in LOOP

    Ho aggiunto questo codice:

    // Controlla quando avviene la Fine del Video
    my_ns.onStatus = function(infoObject)
    {
    if (infoObject.code == "NetStream.Play.Stop")
    {
    // Riproduco il Video
    my_ns.play("iltuovideo.flv");
    }
    };

Commenti