La tecnica Flash Overlay, ovvero disporre sopra, viene usata spesso per realizzare banner pubblicitari espandibili, al fine di attirare l’attezione del visitatore, oppure per creare popup visualizzabili da tutti i browser senza aver paura di eventuali blocchi.
Nell’esempio sopra (l’immagine è stata scelta per puri scopi teorici) possiamo vedere come inserire un filmato flash al 100% sopra del testo in html.
In questo caso è stata inserita un’immagine trasparente formato .png
Con questa tecninca possiamo realizzare banner molto accattivanti, oppure popup visualizzabili su tutti i browser
Nella pagina Html dovremo inserire una funzione JavaScript al fine di poter rendere invisibile il filmato flash, in quanto quando è attivo non possiamo selezionare il testo al di sotto.
Ecco la funzione:
<script language="JavaScript" type="text/JavaScript">
function hideDiv() {
document.getElementById("flashcontent").style.display = "none";
</script>
Il suo scopo è quello di rendere invisibile il div flashcontent ovvero il div che contiente il filmato flash.
Richiameremo questa funzione da flash, tramite un pulsante o un frame, a nostro piacimento
chiudi.onRelease = function() {
getURL('javascript:hideDiv();');
};
48 Commenti
Fantastico Julius… lo userò di sicuro… se mai avessi problemi nell’implementarlo, ti faccio sapere… ciao
Mi ero sempre chiesto come facessero a fare sti pop up scassamaroni che ti si piantano davanti a quello che stai leggendo… ecco svelato il segreto. THX
cercavo un tutorial di questo tipo da tempo…..
ma se io invece di farlo chiudere al click lo volessi usare cm link per un sito esterno?
ciao julius e grazie ;)
Puoi farlo inserendo un link al pulsante flash
chiudi.onRelease = function() {getURL("https://miosito.it","_blank");
};
Ho inserito nel file .ZIP altri 2 esempi, uno semplice e uno con link
ciao
ehm…
a pensarci un po’ potevo evitare sta domanda… hihi..
cmq grazie1000
Per puri scopi teorici?
julius 6 un grande!
=P
=0
ho un problemino… tutto ok… mi viene caricata la pagina con il filmato flash… ho aggiunto dei parametri per posizionare il DIV a sinistra e sopra, altrimenti mi spostava la pagina sotto:
però il filmato è 500×500 ma si vede credo 100 x 100 o giù di li… ho modificato pure
var fo = new FlashObject(“spot.swf”, “Spot”, “500%”, “500%”, “7”);
bo ? aiuto !
ops scusa ma mi sono sbagliato… non è 500& ma 100%
Domanda.. e se l’utente ha javascript disabilitato che succede?
Ok, ho provato, semplicemente non vede l’animazione.. ottimo approccio ;-)
ma su ie non funziona ?
ok Julius… sono un cretino…
allora dimentica tutto… adesso va una bellezza !!!!
(non avevo incluso lo stile css)…
funziona pure su ie !!!!
ma ho un piccolo problemuccio (questo sembra serio), praticamente la pagina html contiene già un filmato… e l banner mi appare dietro al filmato…. sarà una cretinata ma non mi viene nulla in mente !
grazie in anticipo ;) e scusa se ti ho occupato una pagina intera con i miei interventi ;)
Gabriele ha accennato al problema del javascript disabilitato, julius s può implementare un modo per verificare la presenza di javascript è in caso negativo chiedere all’utente di attivarlo!!!
certo, basta scrivere:
alert("ehi ciccio/a, guarda che hai javascript disabilitato, attivalo per piacere!");cavolo Julius, i tuoi articoli sono puntuali come le bollette! praticamente stai scalando la mia pagina dei feed alla velocita’ della luce, complimenti!
Ciao Julius…
ma ce l’hai con me ? forse ho esagerato con le domande ? di solito sei una scheggia nel rispondere… cmq… la rifaccio un’ ultima volta:
praticamente volevo inserire il tuo esempio in una pagina che però contiene già un filmato flash. il banner che viene fuori però mi appare dietro al filmato esistente. c’è modo di controllare che il filmato appaia dopo che la pagina è stata caricata ? quindi in primo piano come normalmente accada su una pagina html ?
spero di essermi spiegato decentemente…
ciao e grazie in anticipo.
@Sickboy figurati mica c’è l’ho con te…non so se hai notato quanti commenti ci sono…c’è solo un essere umano a gestire il blog quindi con un pò di pazienza accontento tutti.
Per quanto riguarda il tuo problema posso assicurarti che ho fatto una prova ad inserire un altro filmato trasparente e non ho visto nessun problema…
Ovvero il flash overlay sta davanti…
lo so, lo so… e di questo ti ringrazio (di esistere), come ho detto in post passati: c’è ne fossero come te !!!
allora riproverò… ti faccio sapere…
grazie ancora ;)
ho risolto… visto mi è bastata una tua risposta ad illuminare la mia mente pigra !!!
Per quanto riguarda il tuo problema posso assicurarti che ho fatto una prova ad inserire un altro filmato TRASPARENTE e non ho visto nessun problema…
il mio filmato non era trasparente !!!!!
:)
Ciao Julius.
Non sarebbe interessante implementare anche il contrario, cioè un bottone (flash oppure html) che fa comparire un swf sopra una pagina html?
Ciao ciao.
Basta richiamare una funzione in javascript come è stato fatto per rendere invisibile il contenuto flash, ma in questo caso renderà visibile il contenuto flash
nel file HTML vi è un JS questa parte rende invisibile
.style.display = “none”;questa rende visibile
.style.display = “block”;Ciao Julius!
Ho notato che il mio flash in overlay su IE, mantiene i link dell’html sottostante, ma su firefox tutti i link dell’html vengono coperti…questo senza disattivare il flash sopra… hai una soluzione?
mittico!
ciao
Penso siano due modi differentiche usano i browser per gestire questa cosa, vedo cosa riesco a trovare..
ciao
Ciao Julius, grazie per i consigli e per i file…la mia necessità è quella di far apparire su un html non una immagine png, ma un video .fla.
Come devo procedere, considerando la mia poca esperienza in flash?
Grazie
Ciao marco nell esempio che ho messo a disposizione non è una png a comparire bensì un SWF
Puoi usare la stessa tecnina anche tu, ovvero al posto di insere un swf con un’immagine inserisci un video FLV importandolo da flash
Ciao Julius! Complimenti ancora per questo tutorial. Eppure sono così giu perchè non riesco a comporre il tutto. Dunque, ricapitolando ho semplicemente scambiato l’immagine della tipa con quella che volevo, pubblicato l’swf… e poi sono andato a creare il div nella pagina html, che è composta da diverse tabelle. Il risultato è che il div mostra al livello superiore l’immagine, il cui fondo però non è trasparente..e quando clicco scompare e ritorna come al primo frame senza che nulla accada. Cosa puo essere? Grazie :(
Controlla di avere pubblicato l’swf con sfondo trasparente, controlla il codice confrontandolo con il mio.
Julius semplicemente fantastico!!…..ma purtroppo su IE, M$ mi mette l’avviso di abilitare il contenuto ritenuto potezialmente dannoso.
Ci si può fare qualcosa?
Grazie
Dovrebbe chiedertelo sono in locale…
Ciao ho scaricato l’esempio e mi accade una cosa strana con IE7, in pratica nell’esempio online tutto bene clicco sul flash e scompare, nell’html in locale se lo apro, sempre con IE7, una volta cliccato il flash scompare per poi riapparire subito.
Non ho fatto modifiche ne al flash ne al codice della pagina di esempio.
Con opera, ff, safari e chrome funziona bene.
Quindi hai problemi solo in locale?
Potrebbe essere un bug nell’utilizzo di applicazioni flash in locale…
Il tuo “scompare per poi riapparire subito” cosa intendi esattamente?
scusate, la domanda che sto per fare non è molto pertinente però ho un grande problema e sicuramente voi ne capite più di me….praticamente voglio inserire un banner pubblicitario nel mio blog ma non so come inserire il codice html del banner nel blog…Mi potete aiutare?
@coleman: ciao
leggi questo articolo Come posso inserire un filmato Flash in una pagina HTML?
diego ha scritto:
Ciao Julius, innanzitutto complimenti per i tuoi tutorial, sei molto bravo.
Ma vorrei riproporre il quesito postato da diego.
Dopo aver lavorato tanto alla grafica di un sito (tuttora ancora in costruzione) dove uso un menu verticale con sottomenu a comparsa costituito da un unico swf, mi ritrovo col problema grave che su Firefox e Google Chrome gli elementi che si trovano nel corpo centrale della pagina (testo con link, moduli, ecc.), essendo sottostanti al livello del menu-swf (infatti, ho settato lo z-index in modo che, alla comparsa dei sottomenu, essi ovviamente si vedano sopra gli elementi della pagina e non sotto), non funzionano…
Non c’è proprio una soluzione?
Sto sbattendo la testa da giorni, e se tu riuscissi a trovarla te ne sarei infinitamente riconoscente.
Grazie in ogni caso. ;)
Io sono un po confusa, magari faccio una domanda idiota, ma ci provo lo stesso :)
Io vorrei sia poter far aprire il link, sia permettere la chiusura se uno non vuole andare al link. ma non ci riesco.. help?
Ovviamente grazie :-P
Ciao julius, bel’esempio, io però volevo chiederti se è possibile con la stessa tecmica fare in modo che avviene l’animazione in flash cliccando ad esempio su un’immagine html, cioè clicchi e si avvia la “popup ” fatta in flas.
Scusa tanto .. ho inserito il codoce in un file php di un cms
..nella pagina che index….
me lo fa vedere sempre come posso fare per fare si che l’animazione si veda solo sulla home….
Grazie ………….
Stage.scaleMode = "noScale";Stage.align = "LT";
chiudi.onRelease = function() {
getURL("https://juliusdesign.wordpress.com/2007/09/26/flash-overlay-scrivere-sullhtml/","_self");
};
stop();
l’equivalente per as3 ?
Ciao Julius,
il tuo lavoro è perfetto e mi è stato molto utile.
Volevo però chiederti come ottenere la chiusura della finestra con il video mantenendo la funzionalità link.
In altre parole si tratterebbe di unire le funzionalità delle due versioni: quella che si chiude al click del mouse e quella che al click del mouse rimanda ad un link.
Questo perchè altrimenti, utilizzando la versione linkata, una volta chiusa la finestra aperta cliccando sul video, non è possibile chiudere il video stesso.
Ciao
@Marco: basta che richiami da flash una funziona javascript gia preconfezionata da te nell’HTML.
@Unonessuno: non ho capito bene cosa ti serve…
Ciao Julius, grazie mille, utilissimo. Sei un grande con ottimi scopi teorici!
Però volevo farti due domande:
_se voglio fare in modo che all’apertura della pagina lo script o il file flash scelga a random tra diverse immagini che gli fornisco, come devo fare (scusa se è ovvio, ma uso flash solo per hobby non da pro)?
_perchè firefox mi taglia la parte finale del filmato caricato?
Ciao e ancora grazie!
ciao julius…sto facendo il primo anno di un ITIS e faccio l’informatico..siccome stavo lavorando in html,volevo aggiungere un overlay alla mia pagina..ho letto il tutorial..ma nn c’ho capito quasi nulla…nn é che mi potresti preparare una pagina semplice cosi da aiutarmi???..GRAZIE MILLE!
Ciao, grazie che esisti!!!
Il tuo articolo è un po’ datato quindi magari nel tempo alcune cose sono cambiate ed è per questo che non mi raccapezzo. Il problema è il seguente: Vorrei mettere il flash su un altro flash. Ci ho provato ma si ottiene il banner nella posizione voluta e il resto lo sposta più sotto ma non sovrapposto. Mi chiedo come si possa fare. Grazie in anticipo.
Buona sera a tutti mi potete aiutare a inserirlo su blogspot di blogger ( se si puo ) grazie e buona pasqua a tutti