Share
Deze zelfstudie is ontstaan na het online zoeken naar hulp met hetzelfde onderwerp. Veel mensen lijken dezelfde vraag te stellen, maar het was moeilijk om een nette set van te volgen instructies te vinden.
Dus, zoals elke fatsoenlijke netizen, propageerde ik dit artikel, liet me inspireren door een paar andere blogs en gebruikte ervaringen van wat trial and error in mijn eentje. En nu bied ik het je aan, in de hoop dat dit je eigen zoektocht zal beëindigen.
Deze zelfstudie maakt gebruik van Flash CS4 in combinatie met ActionScript 3.0, maar u kunt deze principes toepassen in Flash CS3. Het veronderstelt dat je al redelijk goed kunt omgaan met het maken van animaties in de tijdlijn en een goed begrip van hoe je ActionScript moet toepassen op de tijdlijn.
Het doel is om een navigatieknop in de vorm van een tabblad te hebben, weggestouwd aan de zijkant, om achteruit door een beeldpresentatie te stappen. Ik wil dat het open schuift, van kleur verandert en het label toont. Wanneer de gebruiker erop klikt, navigeert deze één dia terug. Als de gebruiker een muis uitademt voordat hij erop klikt, schuift deze terug naar de oorspronkelijke positie en kleur.
Opmerking: vergeet niet om vaak op te slaan om te voorkomen dat je vanaf nul begint als er iets misgaat.
Flash geeft je de mogelijkheid om een knopsymbool te maken, maar het is beperkt tot drie toestanden: Boven, voorbij en naar beneden. Er is ook Raken die het interactieve gebied rond de knop definieert. Dit is prima voor de meeste toepassingen van een eenvoudige knop. In feite is dit knopsymbool eigenlijk een lid van de SimpleButton klasse. Maar wat als u het uiterlijk van de knop wilt wijzigen of wilt animeren wanneer de gebruiker zich heen en weer beweegt en dan weg kauwt zonder te klikken? In dat geval heeft u een vierde opgeroepen status nodig Uit.
Het ingebouwde knopsymbool heeft helaas geen uit-status.
Hier is de afhaalmaaltijd: elk symbool, zoals een grafisch symbool of een filmclipsymbool, kan een knop worden. U hoeft alleen het juiste ActionScript toe te passen. In deze zelfstudie wordt een filmclip omgezet in een knop met vier statussen.
Het zal je leven een stuk eenvoudiger maken als je al een duidelijk beeld hebt van hoe jouw knop zich in elk van de vier toestanden gedraagt. Schets het op papier of gebruik Illustrator of Photoshop om de visuele elementen te prototypen die op hun beurt in Flash kunnen worden geïmporteerd. Dit is een beetje werk vooraan, maar het is veel beter dan blind werken en terug moeten gaan om iets te repareren omdat het concept niet logisch werd doordacht.
Maak een nieuw document en kies Flash-bestand (ActionScript 3.0). Stel de stage op met de juiste afmeting en achtergrondkleur.
In plaats van een knopsymbool te maken, maken we een nieuw filmclipsymbool. Druk op Control-F8 (Command-F8 op een Mac) of kies Invoegen> Nieuw symbool in het menu. We noemen het "viertoestandsknop".
Voeg in de filmclip "vier statusknoppen" een nieuwe laag toe en noem deze "acties".
Maak een nieuwe laag en noem het "labels". Voeg vier lege hoofdframes op ongeveer gelijke intervallen toe net genoeg, zodat u voldoende ruimte overlaat om elk label te lezen. Hier heb ik ze met 20 beeldintervallen geplaatst. Geef labelnamen van naar boven, naar beneden en uit in het paneel Properties. Dit zijn uw knoptoestanden.
Voeg keyframes toe in de actielaag die overeenkomt met de vier statussen in de labelslaag.
Voeg toe voor elk leeg hoofdframe in de actielaag this.stop (); in de ActionScript-editor. Dit zorgt ervoor dat de filmclip niet wordt doorgespeeld naar andere knoptoestanden.
Maak een nieuw filmclipsymbool door op Control-F8 (Command-F8 op een Mac) te drukken of kies Insert> New Symbol uit het menu en noem het "up animation".
Teken voor de knop een groen vak in één laag en voeg een witte pijl toe in een bovenstaande laag. Zorg ervoor dat het in de linkerbovenhoek is geregistreerd. Omdat dit statisch is, is er geen reeks frames nodig voor animatie, maar je hebt altijd de flexibiliteit als je besluit om het te animeren, zoals een vak dat vervaagt in beeld.
Maak een nieuwe laag en noem deze "acties". Zorg ervoor dat het bovenaan staat. Selecteer het lege hoofdframe en voeg toe this.stop (); naar de ActionScript-editor. In dit geval is dit niet helemaal noodzakelijk, omdat het gewoon een statisch beeld is, maar het is een goede gewoonte om elke status van een lus te houden.
Het enige wat ontbreekt in de bewerkingsmodus voor het knoppensymbool dat je niet bij filmclips hebt, is een speciaal frame dat is gereserveerd voor het hitgebied. Dit zou de grenzen bepalen waar muisgebeurtenissen voorkomen zoals klikken en zweeftekens. Maak een nieuwe laag en noem deze "hit area".
Teken een vorm op de laag en stel de alpha-waarde in op 0 in het venster Eigenschappen, waardoor deze onzichtbaar wordt. Dit hitgebied is zo groot als de knop wanneer deze volledig is uitgestrekt. Opmerking: als u een geanimeerde reeks hebt, zorg er dan voor dat de hitgebiedframes de volledige lengte van de animatie beslaan.
Maak een nieuwe laag in de viertoestandsknop filmclipsymbool genoemd knop staten. Sleep een instantie van de omhoog animatie symbool van het paneel Bibliotheek en in de viertoestandsknop bewerkingsgebied voor filmclipsymbool in de knop staten laag. Zorg ervoor dat de X- en Y-coördinaten zijn ingesteld op 0. Voeg een kader in frame 20 in.
Druk op Control-F8 (Command-F8 op een Mac) of kies Invoegen> Nieuw symbool in het menu en kies Filmclip. We zullen het "over animatie" noemen.
Keer terug naar de filmclip "Omhoog animatie", klik op de groene knop en kopieer deze. Keer terug naar de filmclip "over animatie" en voeg een nieuwe laag toe met de naam "knop morph". Klik met de rechtermuisknop om de groene knop op zijn plaats in het lege hoofdframe te plakken.
Maak nog een leeg keyframe bij frame 20 en klik met de rechtermuisknop om het opnieuw te plakken. Met deze vorm vergroot u de breedte en verandert u de kleur in oranje. Het moet dezelfde grootte hebben als het hitgebied dat is gemaakt in stap 10. Selecteer het volledige bereik van frames en klik met de rechtermuisknop om een Tween-vorm te maken.
Als u een knoplabel wilt toevoegen, maakt u een nieuwe laag met de naam "tekstweergave" en gebruikt u het tekstgereedschap om een statisch tekstobject te maken, in dit geval PREVIOUS in een leeg hoofdframe.
Klik met de rechtermuisknop om een frame in te voegen bij frame 20. Selecteer een frame in de laag en klik met de rechtermuisknop om een bewegings-tween te maken. Ik wil dat het label begint te vervagen vanaf het midden van de animatie, dus ik ga naar de bewegingseditor en maak keyframes in het midden en aan het einde, en maak drie keyframes. Het eerste keyframe voegt een kleureffect toe met een alpha van 0% en de laatste twee hebben een alpha van 100%.
Voeg een nieuwe laag toe met de naam "hit area". U kunt de langere oranje vorm selecteren aan het einde van de vorm-tween, deze kopiëren en op zijn plaats plakken in een leeg hoofdframe op de laag "hitgebied". Selecteer het en geef het een alpha-waarde van 0% in het paneel Properties. Voeg een frame toe aan frame 20 om ervoor te zorgen dat het hitgebied de volledige animatie beslaat.
Voeg een nieuwe laag toe aan de bovenkant en noem het "acties". Voeg een leeg hoofdframe toe aan frame 20 en voeg een toe this.stop (); actie in het actiescherm. Dit voorkomt dat de animatie in een lus loopt.
Keer terug naar de filmclip met de "vier toestandsknop". Voeg een leeg hoofdframe in frame 21 in de laag met laagtoestanden in en sleep een exemplaar van de over animatie filmclip uit de bibliotheek. Zorg ervoor dat de coördinaten zijn ingesteld op 0. Voeg een kader in bij frame 40.
Maak een nieuw grafisch symbool door op Control-F8 (Command-F8 op een Mac) te drukken of kies Insert> New Symbol uit het menu en noem het "down graphic". Er is geen expliciete animatie vereist, omdat deze alleen onmiddellijk wordt weergegeven wanneer op de muisknop wordt geklikt.
Voor deze status is alles wat nodig is, optioneel, om de kleur van de volledig uitgebreide knop te wijzigen. U kunt het oranje vakje en het PREVIOUS-label van de filmclip "Over animatie" in de respectieve lagen kopiëren en plakken. Verander het oranje vak in rood. Er is slechts één frame vereist, er is geen hitgebied nodig omdat de knop het volledige gebied beslaat. En omdat het een grafisch symbool is, nee hou op(); actie is nodig.
Keer terug naar de filmclip met de "vier toestandsknop". Voeg een leeg hoofdframe in frame 41 in de laag "knopstatussen" in en sleep een instantie van het "down graphic" -symbool uit de bibliotheek. Zorg ervoor dat de coördinaten zijn ingesteld op 0. Voeg een kader in bij frame 60.
Druk op Control-F8 (Command-F8 op een Mac) of kies Invoegen> Nieuw symbool in het menu en kies Filmclip. We noemen het "uit animatie".
De uit-toestand zal in wezen een omgekeerde versie van de over-toestand zijn. Keer terug naar de filmclip "over animatie" en kopieer de vorm-tween-frames, kom vervolgens terug naar de "out-animatie", maak een laag met de naam "button morph" en plak de frames in het lege keyframe. Selecteer vervolgens alle frames in die laag en kies Wijzigen> Tijdlijn> Frames omkeren in het menu.
Keer terug naar de filmclip "over animatie" en kopieer het PREVIOUS-tekstobject, ga vervolgens terug naar de "uit-animatie", maak een nieuwe laag met de naam "tekst verdwijnen" en plak deze op de juiste plaats.
Voeg een frame in frame 20 in, selecteer vervolgens het bereik van frames en maak een bewegings-tween. U voert het omgekeerde uit van de bewegings-tween gemaakt in stap 15 en maakt hoofdframes in het midden en aan het einde in de bewegingseditor, maar de eerste en middelste keyframes krijgen een alpha van 100% terwijl het laatste hoofdframe een alpha van 0%.
Om het uiterlijk van de knop terug te brengen naar de oorspronkelijke op-status, voegt u een laag toe met de naam "arrow" en plaatst u een keyframe in frame 20, waarbij de eerste 19 frames blanco blijven. Kopieer de pijl van de "omhooggaande animatie" en plak hem terug in de "uit-animatie" in dat laatste hoofdframe.
Nogmaals, we moeten een nieuwe laag maken met de naam "hit area" en een box plaatsen die groot genoeg is om de volledige grootte van de uitgebreide knop te dekken. Geef het een alpha van 0 om het onzichtbaar te maken.
Nogmaals, om de "out animation" niet in een lus te laten stoppen, moeten we een laag met de naam "acties" toevoegen, een leeg keyframe in frame 20 plaatsen en een this.stop (); actie in het deelvenster Handelingen.
Keer terug naar de filmclip met de "vier toestandsknop". Voeg een leeg hoofdframe in frame 61 in de laag "knopstatussen" in en sleep een instantie van het "uit animatie" -symbool uit de bibliotheek. Zorg ervoor dat de coördinaten zijn ingesteld op 0. Voeg een kader in frame 80 in.
Nu komt het ActionScript om het allemaal te laten werken. Voor het detecteren van muisgebeurtenissen zoals klikken en zweven, moeten we gebeurtenislisteners toevoegen.
Klik op het eerste hoofdframe van de actieslaag in de filmclip met de "vierst toestandsknop" waar we eerst een stopactie hebben toegevoegd en het deelvenster Handelingen hebt geopend. We zullen gebeurtenislisteners toevoegen zoals hieronder wordt getoond om een muis ROLL_OVER, een MOUSE_UP (wanneer de muisknop wordt losgelaten) en een MOUSE_DOWN (wanneer de muisknop wordt ingedrukt) te detecteren.
We gebruiken de ROLL_OVER -gebeurtenis in plaats van de MOUSE_OVER -gebeurtenis vanwege de manier waarop de onderliggende elementen van de filmclip worden behandeld in een context met de bovenliggende filmclip die meer geschikt is voor deze opstelling. We voegen false, 0, true to the parameters toe als een goede gewoonte om deze luisteraars te markeren voor garbage collection voor wanneer ze niet langer nodig zijn.
this.addEventListener (MouseEvent.ROLL_OVER, onMouseRollover, false, 0, true); this.addEventListener (MouseEvent.MOUSE_UP, onMouseClick, false, 0, true); this.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDownButton, false, 0, true);
Voor elke gebeurtenislistener wordt een functie gebeld. Met elke functie wordt de tijdlijn in wezen doorgeschoven naar de juiste status binnen de filmclip met vier toestandsknoppen en wordt die sectie afgespeeld door te verwijzen naar de labelnaam.
U zult merken dat er geen gebeurtenislistener is gemaakt voor een MOUSE_OUT-gebeurtenis. In plaats van een zelfstandige gebeurtenislistener te maken, gebruiken we eenvoudig de ROLL_OVER-gebeurtenis om een functie op te roepen die op zijn beurt zijn eigen gebeurtenislistener verwijdert en een nieuwe gebeurtenislistener toevoegt voor een ROLL_OUT-gebeurtenis. In deze opstelling werkt een ROLL_OUT-gebeurtenis beter dan een MOUSE_OUT-gebeurtenis.
Hetzelfde geldt voor het tegenovergestelde, waarbij een ROLL_OUT-gebeurtenis zijn eigen luisteraar verwijdert en de gebeurtenislistener voor een ROLL_OVER-evenement opnieuw instelt. Door deze rollovers en rollouts te gebruiken, houden we de code schoon en vrij van potentiële conflicten.
Accentsconagua
function onMouseRollover (e: MouseEvent): void e.target.gotoAndPlay ("over"); this.removeEventListener (MouseEvent.ROLL_OVER, onMouseRollover); this.addEventListener (MouseEvent.ROLL_OUT, onMouseRollout, false, 0, true); function onMouseRollout (e: MouseEvent): void e.target.gotoAndPlay ("out"); this.removeEventListener (MouseEvent.ROLL_OUT, onMouseRollout); this.addEventListener (MouseEvent.ROLL_OVER, onMouseRollover, false, 0, true); Als u de down-status wilt afspelen, maakt u een functie die overeenkomt met de gebeurtenis MOUSE_DOWN die is ingesteld door de gebeurtenislistener.
function onMouseDownButton (e: MouseEvent): void e.target.gotoAndPlay ("down"); Ten slotte moeten we de knop daadwerkelijk vertellen wat te doen wanneer erop wordt geklikt. Voeg een functie toe die overeenkomt met de gebeurtenis MOUSE_UP. Een MOUSE_UP-evenement is in essentie hetzelfde als het laatste deel van een CLICK-evenement (omlaag, daarna omhoog).
Voor testdoeleinden heb ik een webkoppeling gemaakt in een URL-variabele (in dit geval de website van Adobe) en vervolgens de methode navigateToURL () aan de functie toegevoegd, zodat ik kon controleren of deze werkt. U kunt deze methode echter vervangen door een oproep om met een ander framelabel, nummer of scène te navigeren gotoAndPlay of een andere methode die u verkiest.
var linkToAdobe: URLRequest = new URLRequest ("http://www.adobe.com"); function onMouseClick (e: MouseEvent): void e.target.gotoAndPlay ("up"); navigateToURL (linkToAdobe); // u kunt dit vervangen door een andere methode of functie De viertoestandsknop is nu klaar voor gebruik. Keer terug naar de hoofdtijdlijn en sleep het filmknipselsymbool met de vier toestandsknoppen naar het werkgebied op een eigen laag. Een vervangende achtergrond wordt toegevoegd op een andere laag om het effect beter te zien in samenhang met andere elementen in het werkgebied.
Zorg ervoor dat het bestand is opgeslagen en druk op Control-Enter (Command-Enter op een Mac) om de film te testen.
Veel dank gaat uit naar Alex in Sanctified Studios voor het inspireren van het originele idee om een filmclip als knop te gebruiken en voor Dominic Gelineau van Zedia Flash Blog voor het tonen van de beste manier om rollovers en rollouts te maken in ActionScript 3.
