Quick Tips: dempe lysene ved hjelp av Flash og jQuery
Del
Del
en
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne hurtig Tips vil du lære å bruke Flash er ExternalInterface funksjon og legge litt jQuery for å lage en "lysbryter" som demper nettsiden. Dette er virkelig effektive for bruk med videospillere, lysbildeserier etc.
Innledning
For å lage denne lysbryteren vi skal bruke ExternalInterface kommandoen i Flash. Vi vil opprette en samtale til en jQuery funksjon som dimmer websiden når knappen klikkes. Vi vil da bruke Dreamweaver (eller noen html redigering program) for å lage en webside for å vise effekten.
Dette er en veldig nyttig effekt for å legge til Flash-applikasjoner (for eksempel videospillere) for å forbedre brukeropplevelsen og legge litt ekstra funksjonalitet til ditt nettsted
Trinn 1:. Opprett Button Bakgrunn
Opprett en ny Actionscript 3 dokument og sett den til 120 x 120 piksler. Opprett en 100 x 100 piksler torget med et hjørne radius på 10.
Fyll den med en stigning på #BBBBBB til # 999999. Bruk gradient transform tool (hurtigtast 'F') for å rotere gradient så #BBBBBB er på toppen i stedet for høyre
Velg deretter bakgrunnen og konvertere den til et symbol (Endre >. Konverter til Symbol) og navn det buttonBackground '
Trinn 2:. Forbedre Button Bakgrunn
Gå inn på knappen bakgrunnen MovieClip ved å dobbeltklikke på den og velg gradient. Deretter trykker du CTRL + C for å kopiere den, til CTRL + SHIFT + V for å lime det på samme sted, og da uten deaktivere det gå Modify > Shape > Utvid Fill og innfelt det ved 2px. Endre gradient så det går fra #CCCCCC til #AAAAAA
Trinn 3:. Lag resten av Button
Gå tilbake til hovedtidslinjen og velge knappen MovieClip deretter gå Endre > Konverter til Symbol og velg Knapp med navnet lightsOff.
Nå går inne knappen ved å dobbeltklikke på den og opprette 2 nye lag over bakgrunnslaget kalt Bulb og tekst. Skriv "Lights Off" på tekstlaget. Jeg brukte Arial Bold på 20 pkt og en farge # 444444. Jeg har også laget en enkel lyspære bruker en sirkel for toppen og noen avrundede rektangler for basen. Jeg har gjort en pære en farge av # 5D5D5D.
Gå til neste keyframe for "over" state of the knappen, gjøre teksten farge # 353535 og pære farge # 4C4C4C. Gi bakgrunnen en glød filter med disse egenskapene:
X og Y Blur: 10px
Styrke: 100%
Kvalitet: Høy
color: # 666666
For den ned staten bare slette gløden fra bakgrunnen og roter bakgrunns 180 °
Trinn 4:. Create "Lights On" knapp
Gå inn i biblioteket ditt, høyreklikk på lightsOff knappen velg "Kopier" og navngi den nye kopien "lightsOn."
Gå inn i lightsOn knappen og endre teksten til "Lights On" for alle statene. Også legge til noen lysstråler rundt pære som vist på bilde nedenfor:
Trinn 5: Skriv Action
Gå tilbake til hovedscenen. Kontroller at du har en forekomst av lightsOff på scenen og en lightsOn MovieClip. Gi dem eksempel navnene "lightsOff" og "lightsOn" hhv. Sentrer begge knappene til scenen ved hjelp av sluttar panel. Hvis du ikke kan se den gå til Vindu > Rett inn (eller trykker CTRL + K). Pass på at du klikker på "align å iscenesette" -knappen nede i bunnen av panelet.
Åpne en ny Actionscript-fil og skrive ut grunnlagsdokumentet klasse. Hvis du ikke vet om dokument klasser lese Michael Quick Tips for å hjelpe deg med å komme i gang.
Lagre Actionscript-fil som "Lights.as" og deretter i flash satt dokumentet klassen til FLA å lyset.
Det kan se ut som mye kode, men når du leser gjennom kommentarene det er faktisk ganske enkelt
pakke {import flash.display.MovieClip.; import flash.external.ExternalInterface; //Import klassen måtte ringe en jQuery funksjon import flash.events.MouseEvent; //Import klassen nødvendig for å oppdage et museklikk offentlige klasse Lights strekker MovieClip {public funksjons Lights () {lightsOn.visible = false; //Gjør lightsOn knappen usynlig lightsOff.addEventListener (MouseEvent.CLICK, turnLightsOff); //Legg en lytter for et museklikk på lightsOff knappen lightsOn.addEventListener (MouseEvent.CLICK, turnLightsOn); //Legg en lytter for et museklikk på lightsOn knappen funksjon turnLightsOff (e: MouseEvent): void {//Slå av lys fungere lightsOn.visible = true; //Gjør lightsOn knappen synlig lightsOff.visible = false; //Gjør lightsOff knappen usynlig ExternalInterface.call ("lightsOff"); //Ring jQuery funksjonen 'lightsOff'} funksjon turnLightsOn (e: MouseEvent): void {//Slå på lysene fungere lightsOn.visible = false; //Gjør lightsOn knappen usynlig lightsOff.visible = true; //Gjør lightsOff knappen synlig ExternalInterface.call ("lightsOn"); //Ring jQuery funksjonen 'lightsOn'}}}}
Trinn 6: Lag Basic HTML-mal
Åpne opp din tekst editor for å lage HTML-sider. I mitt tilfelle bruker jeg Adobe Dreamweaver. Lag en blank HTML-dokument og lagre det som lightswitch.html i samme katalog som SWF. Deretter sette opp dokumentet med følgende kode:
< html > < head > < style type = "text /css" > body {/* Dette er hoveddelen tag * /text-align: center; /* Senter alt innholdet inne på siden * /margin: 40px 0; /* Gi en margin på toppen og bunnen av dokumentet slik at innholdet ikke er helt på toppen eller bunnen * /} #lights {/* Dette er beholderen som holder lysbryteren * /stilling: relative; /* Sett posisjonen for lys som ønskes i forhold slik at den kan plasseres over "dimming" lag * /z-index: 500; /* Still inn høyden på Z-aksen til 500 som er over "nedtonet" lag * /} objekt {/* Objektet tag er hva SWF-filer blir holdt i * /disposisjon: none; /* Sett omrisset av swf objekter til ingen så når du klikker på det du ikke får en ramme rundt swf * /} #fade {/* Dette er "nedtonet" lag som blekner i når lysene slukkes * /display: none; /* Sett skjermen stykke som skjuler lag * /bakgrunn: # 000; /* Sett farge til svart * /stilling: fast; venstre: 0; top: 0; /* Sett stilling til fast slik at når brukeren ruller det holder med dem * /width: 100%; høyde: 100%; /* Sett bredden og høyden til 100% av nettleservinduet * /opacity: 0,90; /* Sett lagets opacity til 0,90 som er 90% * /z-index: 100; /* Still inn høyden på Z-aksen til 100 som er under "lysbryter" lag * /} < /style > < /head > < body > < div id = "lys" > < /div > <! - Dette er beholderen som inneholder Flash-fil - > < /body > < /html >
Trinn 7 : Legg SWF til dokument med SWFObject
Jeg skal legge i flash-filen ved hjelp SWFObject. Hvis du ikke vet om SWFObject så kan du lese del 1 av Angel tutorial om bruk SWFObject å sette inn SWF-filer til HTML-dokumentet. Når du har et grep om SWFObject og har de nødvendige filene du kan fortsette på
Du må legge til følgende kode inne i. ≪ head > tagger i HTML-siden. Som du kan se, trenger du swfobject.js og expressInstall.swf filer i samme katalog som SWF og html side
. ≪ script type = "text /javascript" src = "swfobject.js" > < /script > < script type = "text /javascript" > Var FlashVars = false; Var params = {filmen: "Lights.swf", kvalitet: "høy", allowScriptAccess: "always", wmode: "transparent"}; Var attributter = false; swfobject.embedSWF (, "lyser" "Lights.swf", "100", "100", "9.0.0", "expressInstall.swf", FlashVars, params, attributter); < /script >
< h2> Trinn 8: Skriv jQuery funksjoner
Nå er alt vi trenger å gjøre er å skrive jQuery funksjoner. Dette er to enkle funksjoner som vil bli kalt fra SWF når du klikker på knappen
Disse også gå inn i. ≪ head > tags under SWFObject kode. Som du kan se jeg får jQuery fil rett fra google serveren
. ≪ script type = "text /javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4. 1 /jquery.min.js "> < /script > < script type =" text /javascript "> funksjon lightsOn () {//Når du slår av lysene tilbake på fade ut "dim" lag over 500 millisekunder, og deretter fjerne den $ ('# fade'). fadeout (500, function () {$ ("# fade" ) .Fjern ();}); }; fungere lightsOff () {$ ('body') føyer. ('< div id = "fade" > < /div >'); //Når du slår av lysene legge til "nedtonet" laget til side $ ('# fade') fadeIn (250).; //Fade i "dim" lag over 250 millisekunder}; < /script >
Konklusjon
Hvis du nå teste HTML-fil du bør se lysbryteren arbeider som i demoen . Dette er en veldig nyttig effekter for Flash-video-spillere når du ønsker å forbedre brukeropplevelsen på nettstedet ditt. Det gjør det mye enklere for brukeren å fokusere på SWF.
Jeg håper du likte denne opplæringen, og takk for lesing! Anmeldelser