Share
In deze Quick Tip leer je hoe je de functie ExternalInterface van Flash gebruikt en een beetje jQuery toevoegt om een "lichtschakelaar" te maken die de webpagina dimt. Dit is echt effectief voor gebruik met videospelers, diavoorstellingen enz.
Als u deze lichtschakelaar wilt maken, gebruiken we de opdracht ExternalInterface in Flash. We zullen een oproep maken naar een jQuery-functie die de webpagina dimt wanneer op de knop wordt geklikt. Vervolgens gebruiken we Dreamweaver (of een html-bewerkingsprogramma) om een webpagina te maken om het effect weer te geven.
Dit is een zeer nuttig effect om toe te voegen aan Flash-toepassingen (zoals videospelers) om de gebruikerservaring te verbeteren en een beetje extra functionaliteit aan uw website toe te voegen.
Maak een nieuw Actionscript 3-document en stel het in op 120 x 120 px. Maak een vierkant van 100 x 100px met een hoekradius van 10.
Vul het met een verloop van #BBBBBB naar # 999999. Gebruik het gereedschap Verlooptransformatie (sneltoets 'F') om het verloop te roteren, zodat de #BBBBBB bovenaan staat in plaats van rechts.
Selecteer vervolgens de achtergrond en converteer deze naar een symbool (Wijzigen> Converteren naar symbool) en noem deze 'knopachtergrond'.
Ga naar de achtergrondclip van de knop door erop te dubbelklikken en het verloop te selecteren. Druk vervolgens op CTRL + C om het te kopiëren, CTRL + SHIFT + V om het op dezelfde locatie te plakken en zonder het te deselecteren ga naar Modify> Shape> Expand Fill en voeg het toe door 2px. Verander het verloop zodat het van gaat #CCCCCC naar #aaaaaa.
Ga terug naar de hoofdtijdlijn en selecteer de knop filmclip en kies vervolgens Wijzigen> Converteren naar symbool en kies Knop met de naam lichten uit.
Ga nu naar binnen door erop te dubbelklikken en maak 2 nieuwe lagen boven de geroepen achtergrondlaag Lamp en Tekst. Schrijf "Lights Off" op de tekstlaag. Ik heb Arial Bold gebruikt bij 20pt en een kleur van # 444444. Ik heb ook een eenvoudige gloeilamp gemaakt met een cirkel voor de bovenkant en enkele afgeronde rechthoeken voor de basis. Ik heb de lamp een kleur van # 5D5D5D gemaakt.
Ga naar het volgende keyframe voor de "over" -status van de knop, maak de tekstkleur # 353535 en de lampkleur # 4C4C4C. Geef de achtergrond een gloeifilter met deze eigenschappen:
Voor de down-status verwijdert u gewoon de gloed van de achtergrond en draait u de achtergrond 180 °.
Ga naar je bibliotheek, klik met de rechtermuisknop op de lichten Uit knop selecteer "Dupliceren" en noem de nieuwe kopie "lightsOn".
Ga naar de lichten aan knoop en verander de tekst in "Lichten aan" voor alle staten. Voeg ook wat lichtstralen toe rond de lamp, zoals op de onderstaande foto:
Ga terug naar het hoofdpodium. Zorg ervoor dat je er één hebt lichten uit op het podium en één lichten aan filmclip. Geef ze respectievelijk namen van "lightsOff" en "lightsOn". Centreer beide knoppen op het podium met behulp van het uitlijningspaneel. Als u het niet kunt zien, ga dan naar Venster> Uitlijnen (of druk op CTRL + K). Zorg ervoor dat u op de knop "align to stage" onderaan op het paneel klikt.
Open een nieuw Actionscript-bestand en noteer de standaard documentklasse. Als je de documentlessen niet kent, lees dan Michael's Quick Tip om je op weg te helpen.
Sla het Actionscript-bestand op als "Lights.as" en stel vervolgens in de flits de documentklasse van de .fla in Lichten.
Dit lijkt op veel code, maar als je de opmerkingen hebt gelezen, is het eigenlijk vrij eenvoudig.
Accentsconagua
pakket import flash.display.MovieClip; import flash.external.ExternalInterface; // Importeer de klasse die nodig is om een jQuery-functie aan te roepen import flash.events.MouseEvent; // Importeer de klasse die nodig is om een muisklik te detecteren public class Lights extends MovieClip public function Lights () lightsOn.visible = false; // Maak de lightsOn-knop onzichtbare lightsOff.addEventListener (MouseEvent.CLICK, turnLightsOff); // Voeg een luisteraar toe voor een muisklik op de lichten Off knop lightsOn.addEventListener (MouseEvent.CLICK, turnLightsOn); // Voeg een luisteraar toe voor een muisklik op de lightsOn-knopfunctie turnLightsOff (e: MouseEvent): void // Schakel lichten uit functie lichten on.visible = true; // Maak de lightsOn-knop zichtbaar lightsOff.visible = false; // Maak de lightsOff-knop onzichtbaar ExternalInterface.call ("lightsOff"); // Roep de jQuery-functie 'lightsOff' aan turnLightsOn (e: MouseEvent): void // Lichten inschakelen functie lightsOn.visible = false; // Maak de lightsOn-knop onzichtbare lightsOff.visible = true; // Maak de lichten Uit knop zichtbaar ExternalInterface.call ("lightsOn"); // Bel de jQuery-functie 'lightsOn' Open uw teksteditor voor het maken van HTML-pagina's. In mijn geval gebruik ik Adobe Dreamweaver. Maak een leeg HTML-document en sla het op als lightswitch.html in dezelfde map als uw SWF. Stel vervolgens uw document in met de volgende code:
Ik zal het flash-bestand toevoegen met swfobject. Als je niets weet over swfobject, dan kun je hoofdstuk 1 van Angel's tutorial lezen over het gebruik van swfobject om je SWF-bestanden in je HTML-document in te voegen. Zodra je grip hebt op swfobject en de nodige bestanden hebt, kun je verder gaan.
U moet de volgende code toevoegen binnen de tags in uw HTML-pagina. Zoals je kunt zien, heb je de swfobject.js en expressInstall.swf bestanden in dezelfde map als uw swf- en html-pagina.
Nu hoeven we alleen maar de jQuery-functies te schrijven. Dit zijn twee eenvoudige functies die door de SWF worden aangeroepen wanneer u op de knop klikt.
Deze gaan ook naar binnen tags onder de swfobjectcode. Zoals je ziet, krijg ik het jQuery-bestand rechtstreeks van de google-server.
Als je nu je HTML-bestand test, zou je de lichtschakelaar moeten zien werken zoals in de demo. Dit is een zeer nuttig effect voor Flash-videospelers als u de gebruikerservaring op uw site wilt verbeteren. Het maakt het veel gemakkelijker voor de gebruiker om zich te concentreren op de SWF.
Ik hoop dat je deze tutorial leuk vond en bedankt voor het lezen!
