Share
Navigatie is een cruciaal onderdeel van uw website, maar vaak een vervelende taak om te bouwen en te onderhouden. In deze tutorial beschrijf ik een snelle en degelijke manier om basis-ActionScript-vaardigheden te gebruiken, gecombineerd met een beetje creativiteit, om intuïtieve en gebruiksvriendelijke navigatiesystemen te bouwen. Oké, tijd om onze handen vuil te maken, nou ... zweterig misschien ...
Deze tut toont hoe je dubbelklikken op items in het menu kunt voorkomen, een item dat over het hoofd wordt gezien en dat je online ervaring verbetert. U leert ook hoe u meerdere arrays met gemak kunt maken en combineren. Eerst zullen we de scène opmaken, keyframes en labels plaatsen en aan het einde zullen we wat ActionScript toevoegen om het tot leven te brengen. We zullen ook leren hoe u pagina-overgangen maakt die een leuk extraatje toevoegen aan uw website.
Achteraf bezien is deze tutorial erg eenvoudig, maar deze heeft betrekking op een heleboel verborgen edelstenen. Wees creatief, koppel de gegevens met xml, verander de maskervormen, verander de knop rollOver-statussen en geniet ervan.
Maak een nieuw ActionScript 3-document: 600px X 400px, 30 frames per seconde en gebruik wit als achtergrond. Eerste dingen eerst, laten we de knop maken. Teken een tekstvak op het podium en geef het een instantienaam van "txt". Ga hiervoor naar uw eigenschappenvenster (CTRL F3 / Venster> eigenschappen> eigenschappen). Verberg het nu in een symbool (F8 / Wijzigen> Omzetten in symbool), kies een filmclip en zorg ervoor dat het registratiepunt zich links bovenaan bevindt. Geef de instantie een naam "button_text_mc".
Maak op een nieuwe laag een rechthoek die past bij de grenzen van je tekstfilmclip. Dit zal functioneren als een hitgebied voor je knop. Zet het om in een symbool.
Selecteer nu beide lagen en converteer ze naar een symbool. Geef deze instantie de naam "hitarea_mc". Zorg ervoor dat u de alpha-waarde van "hitarea_mc" op nul zet in het eigenschappenvenster.
Laten we nu een houder voor onze knoppen maken. Natuurlijk kun je dit geavanceerder maken door dit een volledige dynamische navigatie met xml of php te maken, maar in het belang van deze tutorial zullen we gebruiken
wat ActionScript om onze menu-items een naam te geven en de functionaliteit in te vullen.
Sleep een instantie van de filmclip "button_movieclip" op het podium voor elk item dat je wilt gebruiken voor je navigatie. We gebruiken in dit geval 6. Geef nu elke instantie een unieke naam; Ik koos voor b1, b2, ... tot b6. Vervolgens gaan we dit alles verpakken in een nieuwe filmclip genaamd "menu_totaal".
Het goede hieraan is dat, als we het later willen gebruiken, we de "menu_total" clip uit de bibliotheek kunnen slepen en deze direct kunnen gebruiken. Je zou nu een enkele filmclip op het podium moeten hebben met zes knoppen die we omzetten in onze navigatie.
Aah het leuke gedeelte. Een beetje animatie en bedrog. Zoals u in het voorbeeld ziet, wordt het menu alleen zichtbaar wanneer de muiscursor in de buurt van het menuvak en de regel beweegt. Om dit te bereiken, hebben we een onzichtbaar hitarea en enkele keyframes nodig om naar een andere staat van weergave te gaan.
Zorg ervoor dat je in de filmclip "menu_totaal" bent en maak 2 nieuwe lagen helemaal boven aan je lagen: de ene met de naam "code", de andere met de naam "labels". Selecteer de laag 'labels' en voeg een leeg keyframe toe aan frame 1, 2, 10, 24, 25, 37. Geef nu het tweede framelabel 'GESLOTEN', het 10e framelabel 'OVER' en het 25ste framelabel 'OUT'.
Maak een nieuwe laag onder de knoppenlaag en noem deze "hit_area", neem vervolgens de filmclip "hitarea_mc" uit je bibliotheek en plaats deze links van de knoppen. Tenslotte, herschaal het zodat de gebruiker wat ruimte heeft om de muis te bewegen. Zorg ervoor dat de hoofdframes voor "HOVER" alleen naar frame 10 reiken.
Maak nog een andere laag en noem deze "menu_out", ga dan naar frame 10 en plaats een andere kopie van de "hit_area_mc" op het podium. Geef het een instantienaam van "HOVEROUT_MC" en zorg ervoor dat beide filmclips een alpha-waarde van 0 hebben. Ook moeten deze filmclips met twee hitgebieden een beetje overlappen. Anders verliest Flash de druktest wanneer u de muis naar de knoppen beweegt.
OK, met dat alles, zouden je frames en labels er nu als volgt uit moeten zien:
Dit is hoe de hitgebieden voor de muis eruit moeten zien:
Dit is hoe het tweede hitarea eruit zou moeten zien: het begint op het keyframe van de over-status.
Laten we nu eens naar de maskering kijken.
Over de hele lengte van uw animatie voor de rollOver / rollOut-status, maak een lege filmclip en geef deze de instantienaam 'loaderclip'.
Dit bit is helemaal aan jou en je verbeeldingskracht, maar hier is een basis waarmee je moet beginnen. Maak een nieuw ActionScript 3.0-bestand met dezelfde afmetingen als uw hoofdbestand. Bouw je pagina in / uit animatie. Zorg ervoor dat je een stop plaatst (); commando bij de eindstatus van je animatie (de plaats waar de daadwerkelijke inhoud zal komen). Sla uw bestanden op als page1.swf, page2, ... tot het aantal knoppen dat u hebt gemaakt, in dit geval 6.
In mijn volkomen eenvoudige voorbeeld ben ik begonnen met een kleine doos die tweens langs de tijdlijn loopt van alpha 0 tot 100 terwijl het tot zijn uiteindelijke hoogte groeit.
Goed, nu wat ActionScript-tijd. Allereerst kun je wat je met het menu wilt doen oppeuzelen zoals je wilt. U kunt bijvoorbeeld meer geavanceerde rollOver / rollOut-animaties gebruiken.
In het belang van deze tutorial heb ik een heel eenvoudig effect gekozen.
U moet de opensource-klasse van Grant Skinner genaamd "tweenmax" downloaden en importeren. Zorg ervoor dat u de AS3-versie downloadt. We zullen ook de ingebouwde klassen gebruiken voor de overgangen.
Met je codelaag geselecteerd in frame één, voer je de code in de volgende stappen in (ik zal elke regel in de reacties uitleggen).
Opmerking: vanaf dit punt is het heel eenvoudig om een nieuwe array te maken met al uw acties en deze te koppelen aan de onRelease-handler, op dezelfde manier als u de knopnamen koppelt aan de daadwerkelijke filmclips. Met minimale inspanningen kunt u een zeer sterk navigatiesysteem bouwen dat in een mum van tijd opnieuw en opnieuw kan worden gebruikt. Je zou hier een klasse voor kunnen bouwen, maar dat is niet het doel van deze tutorial.
importeer gs.TweenMax; import fl.motion.easing. *; import fl.transitions. *; import fl.transitions.easing. *;
// variabelen voor de button rollover, out, hit state var speed: Number = 0.3; var motion: Function = Sine.easeOut; var colourOver: String = "0x9BE07C"; var colourOut: String = "0x000000"; var colourRelease: String = "0xFF0000"; // sla de knoppen op als een object voor later gebruik of referentie. var btn: Object; var disabledBtn: Object; // De currentPage, nextPage-variabele bevat de filmclips die we zullen laden. var currentPage: MovieClip = null; var nextPage: MovieClip = null; // de loader var loader: Loader; // welke filmclip om te laden var urlRequest: URLRequest; // de naam voor ons menu movieclip.MENUNAME.txt.text = "MENU>";
Accentsconagua
// eerst verwijzen we naar alle knoppen op het werkgebied var-knoppen: Array = new Array (b1, b2, b3, b4, b5, b6); // deze array bevat alle namen die we voor onze knoppen willen gebruiken var button_name: Array = new Array ("Home", "Over ons", "Selected Work", "References", "Jobs", "Contact"); // deze array slaat op welke swf we willen laden var swf_array: Array = new Array ("swf1.swf", "swf2.swf", "swf3.swf", "swf4.swf", "swf5.swf", " swf6.swf "); for (var i: String in buttons) // wijs de array button_name toe aan de tekstclip van onze knoppen [i] .button_txt.txt.text = knopnaam [i]; // wijs toe welke swf we laden voor elk van de knoppen knoppen [i] .currentPage = swf_array [i]; // verklaar dat we de filmclip gebruiken als een knopknop [i] .buttonMode = true; // zorg ervoor dat de clip button_txt niet reageert op de muisknoppen [i] .button_txt.mouseChildren = false; // voeg de luisteraars toe voor onze knoppen [i] .addEventListener (MouseEvent.CLICK, onCLICK); knoppen [i] .addEventListener (MouseEvent.MOUSE_OVER, onOVER); knoppen [i] .addEventListener (MouseEvent.MOUSE_OUT, onOUT);
function onCLICK (event: MouseEvent): void // zorg ervoor dat de variabele van ons huidige doel is opgeslagen, we zullen het later aan de functie toewijzen om zijn status uit te schakelen btn = event.currentTarget; disableBtn (btn);; function onOVER (event: MouseEvent): void btn = event.currentTarget; // hier tween we naar de overkleur die we eerder hebben toegewezen met de variabelen. TweenMax.to (btn, speed, tint: colorOver, ease: motion);; function onOUT (event: MouseEvent): void btn = event.currentTarget; TweenMax.to (btn, speed, tint: colorOut, ease: motion);;
Dit is de belangrijkste kern van ons project. Elke belangrijke stap wordt becommentarieerd in de code.
function disableBtn (btn: Object): void // als de knop is uitgeschakeld, zorgen we ervoor dat elke gebeurtenis weer op zijn plaats staat, zodat we deze opnieuw kunnen gebruiken als (disabledBtn) disabledBtn.buttonMode = true; disabledBtn.mouseEnabled = true; TweenMax.to (uitgeschakeldBtn, snelheid, tint: kleuruit, gemak: beweging); disabledBtn.addEventListener (MouseEvent.CLICK, onCLICK); disabledBtn.addEventListener (MouseEvent.MOUSE_OUT, onOUT); disabledBtn.addEventListener (MouseEvent.MOUSE_OVER, onOVER); TweenMax.to (btn, snelheid, tint: kleurRelease, gemak: beweging); // uitschakelen betekent niet meer kunnen gebruiken, dus hier verwijderen we alle functionaliteit btn.buttonMode = false; btn.mouseEnabled = false; btn.removeEventListener (MouseEvent.CLICK, onCLICK); btn.removeEventListener (MouseEvent.MOUSE_OUT, onOUT); btn.removeEventListener (MouseEvent.MOUSE_OVER, onOVER); // zorg dat de huidige geselecteerde knop is gemarkeerd als uitgeschakeldBtn. disabledBtn = btn; // Maak een nieuwe laderinstantie loader = new Loader (); // voeg de currentPage-variabele toe aan de url-aanvraag urlRequest = new URLRequest (btn.currentPage); // laad het url-verzoek loader.load (urlRequest); // Zodra het bestand is geladen, activeren we de functie FileLoaded loader.contentLoaderInfo.addEventListener (Event.COMPLETE, isLoaded); function isLoaded (event: Event): void // De loader bevat nu de pagina die we later zullen weergeven NextPage = event.target.content; // controleer of er een currentPage is als (currentPage! = null) // tween de alpha naar nul // dus wacht ... waarom gebruiken we 2 verschillende tweenclasses? nou, gewoon om u de voor- en nadelen van beide te laten zien. Bepaal zelf welke u het meest geschikt vindt voor uw projecten. var tweenAlpha: Tween = nieuwe Tween (currentPage, "alpha", Regular.easeOut, 1, 0, .7, true); // Bovendien kunt u de currentPage een extra uitgaande animatie laten uitvoeren. Zorg ervoor dat je speelt met de lengte van je alpha, zodat deze niet verdwijnt voordat de animatie is voltooid. currentPage.gotoAndPlay (31); // currentPageGone wordt aangeroepen wanneer de tween is voltooid tweenAlpha.addEventListener (TweenEvent.MOTION_FINISH, currentPageOut); else // als er geen currentPage is, activeren we de functie showNextPage. doNextPage (); functie doNextPage (): void // position the loaderclip as nextPage nextPage.x = 238.0; nextPage.y = 0; // Tween de alfa van 0 tot 1 var tweenAlpha: Tween = nieuwe Tween (nextPage, "alpha", Regular.easeOut, 0, 1, .3, true); // Voeg de volgende pagina toe aan de fase addChild (nextPage); // Volgende pagina is nu onze huidige pagina - verwarrend? Dat is het niet. We vervangen de volgende pagina door onze huidige pagina. currentPage = nextPage; // Nadat de animatie is voltooid, activeren we deze functie currentPageOut (event: Event): void // Verwijder de huidige pagina volledig uit de fase removeChild (currentPage); // Laten we de volgende pagina tonen doNextPage (); // plaats geen stopopdracht omdat we direct op frame 2 landen.
Ten slotte gaan we een frame omhoog. Zorg ervoor dat je bij frame 2 van de filmclip menu_total staat.
// voeg een eventlistener toe voor de mousemove HOVER.addEventListener (MouseEvent.MOUSE_MOVE, openmenu); function openmenu (e: Event): void // wanneer de x & y-waarden van de muis zich in de clip van de filmclip met de naam "HOVER" bevinden, is de meest voorkomende true HOVER.hitTestPoint (parent.mouseX, parent.mouseY, true) gotoAndPlay ( "OVER"); // zorg ervoor dat we de luisteraar verwijderen, zodat we dit niet per ongeluk kunnen activeren. HOVER.removeEventListener (MouseEvent.MOUSE_MOVE, openmenu); hou op();
Ga nu naar frame 24 van de filmclip menu_total.
// voeg een eventlistener toe voor de mousemove HOVER_OUT.addEventListener (MouseEvent.MOUSE_MOVE, menuout); function menuout (e: Event): void // wanneer de x & y-waarden van de muis zich in de clip van de filmclip met de naam "HOVER_OUT" bevinden, is de meestgeest true HOVER_OUT.hitTestPoint (parent.mouseX, parent.mouseY, true) gotoAndPlay ( "UIT"); // zorg ervoor dat we de luisteraar verwijderen, zodat we dit niet per ongeluk kunnen activeren. HOVER_OUT.removeEventListener (MouseEvent.MOUSE_MOVE, menuout); hou op();
Stel in het laatste frame van je animatie de volgende regel code in. De reden is dat we frame 1 overslaan, zodat het menu niet opnieuw wordt geladen en dus de actieve / uitgeschakelde status verliest.
gotoAndStop ( "gesloten")
Dus daar zijn we! U hebt geleerd hoe u aangeklikte knoppen in een array met gecombineerde gegevens kunt in- / uitschakelen, maskeringstechnieken kunt gebruiken en eenvoudige maar effectieve menusystemen kunt maken die met minimale inspanning opnieuw kunnen worden gebruikt. Dit alles met een eenvoudige maar effectieve pagina-overgang. Ik hoop dat je deze hebt genoten en een praktische manier hebt gevonden om je workflow in Flash te versnellen.
