Share
I den här Snabbtipset lär du dig hur du använder Flashs ExternalInterface-funktion och lägg till lite jQuery för att skapa en "ljusbrytare" som dämpar webbsidan. Detta är verkligen effektivt för användning med videospelare, bildspel mm.
För att skapa denna ljusbrytare använder vi kommandot ExternalInterface i Flash. Vi ringer till en jQuery-funktion som dämpar webbsidan när knappen klickas. Vi använder då Dreamweaver (eller ett html-redigeringsprogram) för att skapa en webbsida för att visa effekten.
Det här är en mycket användbar effekt för att lägga till Flash-applikationer (t.ex. videospelare) för att förbättra användarens upplevelse och lägga till lite extrafunktionalitet på din webbplats.
Skapa ett nytt Actionscript 3-dokument och ställ in det till 120 x 120px. Skapa en 100 x 100 px kvadrat med en hörnradio på 10.
Fyll den med en gradient av #BBBBBB till # 999999. Använd lutningstransformeringsverktyget (genvägsknapp 'F') för att rotera lutningen så att #BBBBBB är högst upp i stället för höger.
Välj sedan bakgrunden och konvertera den till en symbol (Modify> Convert to Symbol) och namnge den 'buttonBackground'.
Gå in i bakgrundsbildet movieclip genom att dubbelklicka på den och välj gradienten. Tryck sedan på CTRL + C för att kopiera den, CTRL + SHIFT + V för att klistra in den på samma plats och sedan utan att avmarkera den, gå Modify> Shape> Expand Fill och sätt in den med 2px. Ändra lutningen så att den går från #CCCCCC till #AAAAAA.
Gå tillbaka till huvudtidslinjen och välj knappen Movieclip och gå sedan Ändra> Convert to Symbol och välj Knapp med namnet lightsOff.
Gå nu in i knappen genom att dubbelklicka på den och skapa 2 nya lager ovanför bakgrundsskiktet som heter Glödlampa och Text. Skriv "Ljus av" på textlagret. Jag använde Arial Bold vid 20pt och en färg på # 444444. Jag skapade också en enkel glödlampa med en cirkel för toppen och några rundade rektanglar för basen. Jag gjorde glödlampan en färg på # 5D5D5D.
Gå till nästa keyframe för knappen "över", gör textfärgen # 353535 och lampans färg # 4C4C4C. Ge bakgrunden ett glödfilter med dessa egenskaper:
För nedtillståndet tar du bara bort glöd från bakgrunden och roterar bakgrunden 180 °.
Gå in i ditt bibliotek, högerklicka på lightsOff knappen välj "Duplicate" och namnge den nya kopian "lightsOn."
Gå in i lightsOn knappen och ändra texten till "Lights On" för alla stater. Lägg också till lite ljusstrålar runt lampan enligt bilden nedan:
Gå tillbaka till huvudfasen. Se till att du har en förekomst av lightsOff på scenen och en lightsOn filmklipp. Ge dem exempel på namn på "lightsOff" respektive "lightsOn". Centrera båda knapparna till scenen med hjälp av justeringspanelen. Om du inte kan se det går du till Fönster> Justera (eller tryck CTRL + K). Se till att du klickar på "justera till scen" -knappen längst ned på panelen.
Öppna en ny Actionscript-fil och skriv ut den grundläggande dokumentklassen. Om du inte vet om dokumentklasser, läs Mikaels snabbspets för att hjälpa dig att komma igång.
Spara ActionScript-filen som "Lights.as" och sedan i flash-inställd dokumentklassen för .fla till Lights.
Det kan se ut som en massa kod, men när du läser igenom kommentarerna är det faktiskt ganska enkelt.
Accentsconagua
paket import flash.display.MovieClip; importera flash.external.ExternalInterface; // Importera klassen som behövs för att ringa en jQuery-funktion importera flash.events.MouseEvent; // Importera klassen som behövs för att upptäcka ett musklick public class Lights utökar MovieClip public function Lights () lightsOn.visible = false; // Gör lampornaOn knapp osynliga lightsOff.addEventListener (MouseEvent.CLICK, turnLightsOff); // Lägg till en lyssnare för ett musklick på lightsOff knappen lightsOn.addEventListener (MouseEvent.CLICK, turnLightsOn); // Lägg till en lyssnare för ett musklick på lampornaOn knappen funktion turnLightsOff (e: MouseEvent): void // Slå av lampor funktion lightsOn.visible = true; // Gör lamporna på knappen synliga lightsOff.visible = false; // Gör lightOff knappen osynlig ExternalInterface.call ("lightsOff"); // Ring till jQuery-funktionen 'lightsOff' funktionen turnLightsOn (e: MouseEvent): void // Slå på lampans funktion lightsOn.visible = false; // Gör lampornaOn knapp osynliga lightsOff.visible = true; // Gör lightsOff knappen synlig ExternalInterface.call ("lightsOn"); // Ring till jQuery-funktionen 'lightsOn' Öppna din textredigerare för att skapa HTML-sidor. I mitt fall använder jag Adobe Dreamweaver. Skapa ett tomt HTML-dokument och spara det som lightswitch.html i samma katalog som din SWF. Sätt sedan upp ditt dokument med följande kod:
Jag lägger till i flashfilen med swfobject. Om du inte vet om swfobject kan du läsa avsnitt 1 av ängels handledning om att använda swfobject för att infoga dina SWF-filer i ditt HTML-dokument. När du har tagit ett grepp på swfobject och har de nödvändiga filerna kan du fortsätta.
Du måste lägga till följande kod inuti taggar i din HTML-sida. Som du kan se behöver du swfobject.js och expressInstall.swf filer i samma katalog som din swf och html-sida.
Nu behöver vi bara skriva jQuery-funktionerna. Det här är två enkla funktioner som kommer att ringas från SWF när du klickar på knappen.
Dessa går också in i taggar under swfobject-koden. Som du kan se får jag jQuery-filen direkt från google-servern.
Nu om du testar din HTML-fil bör du se att ljusbrytaren fungerar som i demo. Det här är en mycket användbar effekt för Flash-videospelare när du vill förbättra användarens upplevelse på din webbplats. Det gör det mycket lättare för användaren att fokusera på SWF.
Jag hoppas att du gillade den här handledningen och tack för att du läste!
