Share
In questo suggerimento rapido imparerai come usare la funzione ExternalInterface di Flash e aggiungi un po 'di jQuery per creare un "interruttore della luce" che offusca la pagina web. Questo è veramente efficace per l'uso con lettori video, presentazioni ecc.
Per creare questo interruttore di luce useremo il comando ExternalInterface in Flash. Creeremo una chiamata a una funzione jQuery che oscura la pagina Web quando si fa clic sul pulsante. Quindi utilizzeremo Dreamweaver (o qualsiasi programma di editing html) per creare una pagina Web per visualizzare l'effetto.
Questo è un effetto molto utile da aggiungere alle applicazioni Flash (come i lettori video) per migliorare l'esperienza dell'utente e aggiungere un po 'di funzionalità extra al tuo sito web.
Crea un nuovo documento Actionscript 3 e impostalo su 120 x 120 pixel. Crea un quadrato di 100 x 100 px con un raggio d'angolo di 10.
Riempilo con un gradiente di #BBBBBB a # 999999. Usa lo strumento di trasformazione del gradiente (tasto di scelta rapida 'F') per ruotare la sfumatura in modo che il #BBBBBB sia in alto invece che a destra.
Quindi seleziona lo sfondo e convertilo in un simbolo (Modifica> Converti in simbolo) e chiamalo 'buttonBackground'.
Vai all'interno del clip filmato in background facendo doppio clic su di esso e seleziona il gradiente. Quindi premi CTRL + C per copiarlo, CTRL + MAIUSC + V per incollarlo nella stessa posizione e poi senza deselezionarlo vai Modifica> Forma> Espandi Riempi e incolla per 2px. Cambia la sfumatura in modo che vada da #CCCCCC a #aaaaaa.
Torna alla timeline principale e seleziona il clip filmato del pulsante, quindi vai a Modifica> Converti in simbolo e scegli Pulsante con il nome luci spente.
Ora vai all'interno del pulsante facendo doppio clic su di esso e crea 2 nuovi livelli sopra il livello Sfondo chiamato Lampadina e Testo. Scrivi "Luci spente" sul livello testo. Ho usato Arial Bold a 20pt e un colore di # 444444. Ho anche creato una semplice lampadina usando un cerchio per la parte superiore e alcuni rettangoli arrotondati per la base. Ho realizzato una lampadina di colore # 5D5D5D.
Vai al prossimo fotogramma chiave per lo stato "sopra" del pulsante, imposta il colore del testo # 353535 e il colore della lampadina # 4C4C4C. Dai allo sfondo un filtro luminoso con queste proprietà:
Per lo stato inattivo basta eliminare il bagliore dallo sfondo e ruotare lo sfondo di 180 °.
Vai nella tua libreria, fai clic con il pulsante destro del mouse sul pulsante lightsOff seleziona "Duplicate" e dai il nome alla nuova copia "lightsOn".
Vai nel luci accese pulsante e cambia il testo in "Luci accese" per tutti gli stati. Inoltre, aggiungi alcuni raggi di luce attorno alla lampadina come mostrato nella foto qui sotto:
Torna al palco principale. Assicurati di avere un'istanza di luci spente sul palco e uno luci accese un filmato. Dare loro nomi di istanza di "lightsOff" e "lightsOn" rispettivamente. Centra entrambi i pulsanti sullo stage usando il pannello di allineamento. Se non riesci a vederlo vai su Finestra> Allinea (o premi CTRL + K). Assicurati di fare clic sul pulsante "allinea alla fase" nella parte inferiore del pannello.
Apri un nuovo file Actionscript e scrivi la classe del documento di base. Se non conosci le lezioni sui documenti, leggi il suggerimento rapido di Michael per aiutarti a iniziare.
Salvare il file Actionscript come "Lights.as" e quindi in flash impostare la classe del documento di .fla su Luci.
Questo può sembrare un sacco di codice, ma una volta letto attraverso i commenti è in realtà abbastanza semplice.
Accentsconagua
package import flash.display.MovieClip; import flash.external.ExternalInterface; // Importa la classe necessaria per chiamare una funzione jQuery import flash.events.MouseEvent; // Importa la classe necessaria per rilevare un clic del mouse sulla classe pubblica Lights estende MovieClip public function Lights () lightsOn.visible = false; // Sposta il pulsante lightsOn invisible lightsOff.addEventListener (MouseEvent.CLICK, turnLightsOff); // Aggiungi un listener per un clic del mouse sul pulsante lightsOff lightsOn.addEventListener (MouseEvent.CLICK, turnLightsOn); // Aggiungi un listener per un clic del mouse sulla funzione del pulsante lightsOn turnLightsOff (e: MouseEvent): void // Spegni le spie di funzione lightsOn.visible = true; // Rendi le luci visibili sul pulsante lightsOff.visible = false; // Rendi invisibile il pulsante LightsOff ExternalInterface.call ("lightsOff"); // Chiama la funzione jQuery 'lightsOff' function turnLightsOn (e: MouseEvent): void // Attiva le luci function lightsOn.visible = false; // Make the lightsOn button lights invisibleOff.visible = true; // Rendi il pulsante LightsOff visibile ExternalInterface.call ("lightsOn"); // Chiama la funzione jQuery 'lightsOn' Apri il tuo editor di testo per la creazione di pagine HTML. Nel mio caso sto usando Adobe Dreamweaver. Creare un documento HTML vuoto e salvarlo come lightswitch.html nella stessa directory del tuo SWF. Quindi imposta il tuo documento con il seguente codice:
Aggiungerò il file flash usando swfobject. Se non sai nulla su swfobject, puoi leggere la Sezione 1 del tutorial di Angel sull'uso di swfobject per inserire i tuoi file SWF nel tuo documento HTML. Una volta che hai preso una mano su swfobject e hai i file necessari, puoi continuare.
Dovrai aggiungere il seguente codice all'interno di tag nella tua pagina HTML. Come puoi vedere, avrai bisogno del swfobject.js e expressInstall.swf file nella stessa directory della pagina swf e html.
Ora tutto ciò che dobbiamo fare è scrivere le funzioni jQuery. Queste sono due semplici funzioni che verranno chiamate dal SWF quando si fa clic sul pulsante.
Anche questi entrano nel tag sotto il codice swfobject. Come puoi vedere, sto recuperando il file jQuery direttamente dal server di Google.
Ora se provi il tuo file HTML dovresti vedere l'interruttore della luce che funziona come nella demo. Questo è un effetto molto utile per i lettori video Flash quando si desidera migliorare l'esperienza dell'utente sul proprio sito. Rende molto più facile per l'utente concentrarsi sul file SWF.
Spero che questo tutorial ti sia piaciuto e grazie per la lettura!
