Share
I denne Quick Tip lærer du hvordan du bruker Flashs ExternalInterface-funksjon og legger til litt jQuery for å opprette en "lysbryter" som dimmer nettsiden. Dette er virkelig effektivt for bruk med videospillere, lysbilder osv.
For å lage denne lysbryteren bruker vi kommandoen ExternalInterface i Flash. Vi lager et anrop til en jQuery-funksjon som dimmer nettsiden når knappen klikkes. Vi bruker Dreamweaver (eller et HTML-redigeringsprogram) for å lage en nettside for å vise effekten.
Dette er en svært nyttig effekt for å legge til Flash-applikasjoner (for eksempel videospillere) for å forbedre brukerens opplevelse og legge til litt ekstra funksjonalitet på nettstedet ditt.
Opprett et nytt Actionscript 3-dokument og sett det til 120 x 120px. Lag et 100 x 100 px firkant med en hjørner radius på 10.
Fyll den med en gradient av #BBBBBB til # 999999. Bruk verktøyet for gradienttransformasjon (hurtigtast 'F') for å rotere graden slik at #BBBBBB er øverst i stedet for høyre.
Deretter velger du bakgrunnen og konverterer den til et symbol (Endre> Konverter til symbol) og navngi det 'buttonBackground'.
Gå inn i knappen bakgrunnsfilmclip ved å dobbeltklikke på den og velg gradienten. Trykk deretter CTRL + C for å kopiere den, CTRL + SHIFT + V for å lime den inn på samme sted og deretter uten å velge bort den, gå Modify> Shape> Expand Fill og sett inn det ved å 2 piksler. Endre gradienten slik at den går fra #CCCCCC til #AAAAAA.
Gå tilbake til hoved tidslinjen og velg knappen movieclip og deretter gå Modify> Convert to Symbol og velg Knapp med navnet lysene av.
Gå nå inn i knappen ved å dobbeltklikke på den og opprett 2 nye lag over det opprinnelige bakgrunnslaget pære og Tekst. Skriv "Lights Off" på tekstlaget. Jeg brukte Arial Bold på 20pt og en farge på # 444444. Jeg opprettet også en enkel lyspære med en sirkel for toppen og noen avrundede rektangler for basen. Jeg gjorde pæren en farge på # 5D5D5D.
Gå til neste keyframe for "over" -tilstanden til knappen, gjør tekstfargen # 353535 og pærefarge # 4C4C4C. Gi bakgrunnen et lysfilter med disse egenskapene:
For nedstanden sletter du bare gløden fra bakgrunnen og roterer bakgrunnen 180 °.
Gå inn i biblioteket ditt, høyreklikk på lightsOff-knappen velg "Kopier" og navnet på den nye kopien "lightsOn."
Gå inn i lys på knappen og endre teksten til "Lyser på" for alle statene. Legg også til noen lysstråler rundt pæren som vist i bildet nedenfor:
Gå tilbake til hovedstadiet. Pass på at du har en forekomst av lysene av på scenen og en lys på filmklipp. Gi dem eksempler på "lightsOff" og "lightsOn" henholdsvis. Senter begge knappene til scenen ved hjelp av justeringspanelet. Hvis du ikke kan se det, gå til Vindu> Juster (eller trykk CTRL + K). Pass på at du klikker på "juster til scene" -knappen nede nederst på panelet.
Åpne en ny Actionscript-fil og skriv ut den grunnleggende dokumentklassen. Hvis du ikke vet om dokumentklasser, les Michael's Quick Tip for å hjelpe deg med å komme i gang.
Lag ActionScript-filen som "Lights.as", og deretter i flash sett dokumentklassen til .fla til Lights.
Dette kan se ut som mye kode, men når du leser gjennom kommentarene, er det faktisk ganske enkelt.
Accentsconagua
pakke import flash.display.MovieClip; importer flash.external.ExternalInterface; // Importer klassen som trengs for å ringe en jQuery-funksjon import flash.events.MouseEvent; // Importer klassen som trengs for å oppdage et museklikk offentlig klasse Lights utvider MovieClip public function Lights () lightsOn.visible = false; // Gjør lysene på knappen usynlige lightsOff.addEventListener (MouseEvent.CLICK, turnLightsOff); // Legg til en lytter for et museklikk på lightsOff knappen lightsOn.addEventListener (MouseEvent.CLICK, turnLightsOn); // Legg til en lytter for et museklikk på lightsOn knappen funksjon turnLightsOff (e: MouseEvent): void // Slå av lysfunksjon lightsOn.visible = true; // Gjøre lightsOn knappen synlige lightsOff.visible = false; // Gjør lightsOff knappen usynlig ExternalInterface.call ("lightsOff"); // Ring til jQuery-funksjonen 'lightsOff' funksjonen turnLightsOn (e: MouseEvent): void // Slå på lysfunksjonene lightsOn.visible = false; // Gjør lysene på knappen usynlige lightsOff.visible = true; // Gjør lightsOff knappen synlig ExternalInterface.call ("lightsOn"); // Ring til jQuery-funksjonen 'lightsOn' Åpne tekstredigering for å lage HTML-sider. I mitt tilfelle bruker jeg Adobe Dreamweaver. Lag et tomt HTML-dokument og lagre det som lightswitch.html i samme katalog som din SWF. Sett deretter opp dokumentet ditt med følgende kode:
Jeg legger til i flashfilen ved hjelp av swfobject. Hvis du ikke vet om swfobject, kan du lese del 1 av Engles opplæring om bruk av swfobject for å sette inn SWF-filene i HTML-dokumentet. Når du har grep på swfobject og har de nødvendige filene du kan fortsette på.
Du må legge til følgende kode inne i koder i HTML-siden din. Som du kan se, trenger du swfobject.js og expressInstall.swf filer i samme katalog som din swf og html side.
Nå er alt vi trenger å gjøre, skrive jQuery-funksjonene. Dette er to enkle funksjoner som blir kalt fra SWF når du klikker på knappen.
Disse går også inn i koder under swfobject-koden. Som du kan se, får jeg jQuery-filen direkte fra google-serveren.
Nå, hvis du tester HTML-filen, bør du se lysbryteren som fungerer i demoen. Dette er en svært nyttig effekt for Flash-videospillere når du vil forbedre brukerens opplevelse på nettstedet ditt. Det gjør det mye lettere for brukeren å fokusere på SWF.
Jeg håper du likte denne opplæringen og takk for å lese!
