Share
În acest sfat rapid veți învăța cum să utilizați funcția ExternalInterface a Flash și adăugați un pic de jQuery pentru a crea un "comutator de lumină" care diminuează pagina web. Acest lucru este cu adevărat eficient pentru utilizarea cu playere video, slideshow-uri etc..
Pentru a crea acest comutator de lumină, vom folosi comanda ExternalInterface din Flash. Vom crea un apel la o funcție jQuery care diminuează pagina web atunci când se face clic pe buton. Apoi vom folosi Dreamweaver (sau orice program de editare html) pentru a crea o pagină web pentru a afișa efectul.
Acesta este un efect foarte util pentru a adăuga aplicații Flash (cum ar fi playere video) pentru a îmbunătăți experiența utilizatorului și a adăuga un pic de funcționalitate suplimentară pe site-ul dvs..
Creați un nou document Actionscript 3 și setați-l la 120 x 120 pixeli. Creați un pătrat de 100 x 100 pixeli cu o rază de colț de 10.
Umpleți-l cu un gradient de #BBBBBB la # 999999. Utilizați instrumentul de transformare a gradientului (tasta de comenzi rapide 'F') pentru a roti gradientul, astfel că #BBBBBB este în partea de sus în loc de dreapta.
Apoi selectați fundalul și convertiți-l la un simbol (Modify> Convert to Symbol) și denumiți-l "buttonBackground".
Du-te în interiorul butonului fundal cu buton dublu-clic pe el și selectați gradientul. Apoi apăsați CTRL + C pentru ao copia, CTRL + SHIFT + V pentru ao lipi în aceeași locație și apoi fără a o deselecta. Modificați> Shape> Expand Fill și inserați-l cu 2px. Schimbați gradientul din care trece #CCCCCC la #aaaaaa.
Reveniți la linia de timp principală și selectați butonul movieclip apoi mergeți la Modificare> Conversie la simbol și alegeți Buton cu denumirea luminile stinse.
Acum du-te în interiorul butonului făcând dublu clic pe el și creați 2 straturi noi deasupra stratului de fundal numit Bec și Text. Scrieți "Lights Off" pe stratul de text. Am folosit Arial Bold la 20pt și o culoare de # 444444. De asemenea, am creat un bec simplu, folosind un cerc pentru partea de sus și niște dreptunghiuri rotunjite pentru bază. Am făcut bulb o culoare de # 5D5D5D.
Mergeți la următoarea cheie cheie pentru starea "peste" a butonului, faceți culoarea textului # 353535 și culoarea becului # 4C4C4C. Dați fundalului un filtru strălucitor cu aceste proprietăți:
Pentru starea de jos, ștergeți strălucirea din fundal și rotiți fundalul la 180 °.
Intrați în bibliotecă, faceți clic dreapta pe butonul lightsOff selectați "Duplicate" și denumiți noua copie "lightsOn".
Du-te în lumini aprinse și schimbați textul în "Lights On" pentru toate stările. De asemenea, adăugați niște raze de lumină în jurul becului, după cum se arată în imaginea de mai jos:
Du-te înapoi la scena principală. Asigurați-vă că aveți o instanță de luminile stinse pe scenă și pe una lumini aprinse MovieClip. Dați-le numele instanțelor "lightsOff" și, respectiv, "lightsOn". Centurați ambele butoane în stadiu utilizând panoul de aliniere. Dacă nu vedeți, mergeți la Fereastra> Aliniere (sau apăsați CTRL + K). Asigurați-vă că faceți clic pe butonul "Aliniere la etapă" din partea inferioară a panoului.
Deschideți un nou fișier Actionscript și scrieți clasa de documente de bază. Dacă nu știți despre clasele de documente citiți Sfatul rapid al lui Michael pentru a vă ajuta să începeți.
Salvați fișierul Actionscript sub forma "Lights.as" și apoi în flash setați clasa de documente a fișierului .fla la Lumini.
Acest lucru ar putea părea ca o mulțime de cod, dar odată ce ați citit prin comentarii este de fapt destul de simplu.
Accentsconagua
pachet import flash.display.MovieClip; import flash.external.ExternalInterface; // Importul clasei necesare pentru a apela o functie jQuery import flash.events.MouseEvent; // Importul clasei necesare pentru a detecta o clase publice de tip mouse-ul Lights extinde MovieClip function public function Lights () lightsOn.visible = false; // Faceți butonul lightsOn invizibil lightsOff.addEventListener (MouseEvent.CLICK, turnLightsOff); // Adăugați un ascultător pentru un click de mouse pe butoanele lightsOff luminileOn.addEventListener (MouseEvent.CLICK, turnLightsOn); // Adăugați un ascultător printr-un clic pe butonul lightsOn funcția butonului turnLightsOff (e: MouseEvent): void // Opriți funcția luminilor lightsOn.visible = true; // Faceți butonul lightsOn luminile vizibileOff.visible = false; // Faceți butonul lightsOff invizibil ExternalInterface.call ("lightsOff"); // Apelați funcția jQuery 'lightsOff' funcția turnLightsOn (e: MouseEvent): void // Porniți luminile funcției luminilorOn.visible = false; // Faceți butonul lightsOn invizibil lightsOff.visible = true; // Faceti butonul lightsOff vizibil ExternalInterface.call ("lightsOn"); // Apelați funcția jQuery 'lightsOn' Deschideți editorul de text pentru a crea pagini HTML. În cazul meu, folosesc Adobe Dreamweaver. Creați un document HTML gol și salvați-l ca lightswitch.html în același director ca SWF-ul dvs. Apoi, configurați documentul cu următorul cod:
Voi fi adăugarea în fișierul flash folosind swfobject. Dacă nu știți despre swfobject, puteți citi secțiunea 1 din tutorialul lui Angel despre utilizarea lui swfobject pentru a introduce fișierele SWF în documentul dvs. HTML. Odată ce aveți o prindere pe swfobject și aveți fișierele necesare puteți continua.
Va trebui să adăugați următorul cod în interiorul tag-uri în pagina HTML. După cum puteți vedea, veți avea nevoie de swfobject.js și expressInstall.swf fișiere în același director ca pagina dvs. swf și html.
Acum trebuie doar să scriem funcțiile jQuery. Acestea sunt două funcții simple care vor fi apelate din SWF când faceți clic pe buton.
Acestea intră, de asemenea, în interiorul tag-uri sub codul swfobject. După cum puteți vedea, primesc fișierul jQuery direct de pe serverul google.
Acum, dacă testați fișierul HTML, ar trebui să vedeți ca întrerupătorul de lumină să funcționeze ca în demo. Acesta este un efect foarte util pentru playerele video Flash atunci când doriți să îmbunătățiți experiența utilizatorului pe site-ul dvs. Acesta face mult mai ușor pentru utilizator să se concentreze pe SWF.
Sper că ți-a plăcut acest tutorial și mulțumesc pentru lectură!
