SWFAddress is een Javascript / ActionScript-bibliotheek die u de mogelijkheid geeft om de URL van de browser te wijzigen, items aan zijn geschiedenislijst toe te voegen en ActionScript-gebeurtenissen af te vuren wanneer de URL verandert. Het staat ook zoekmachines toe om specifieke inhoud op uw site te vinden. Dit is allemaal functionaliteit die volgens de makers ontbreekt in de rijke webtechnologieën van vandaag.
Laten we kijken…
Achtergrond
Voordat we direct in de code springen, zullen we onderzoeken wat SWFAddress is en hoe we onze werkstroom moeten aanpassen om het te gebruiken. In wezen is SWFAddress een javascript / ActionScript-bibliotheek die u de mogelijkheid geeft de URL van de browser te wijzigen, items aan zijn geschiedenislijst toe te voegen en ActionScript-gebeurtenissen af te vuren wanneer de browser de URL wijzigt. SWFAddress luistert naar specifieke browsergebeurtenissen (URL-wijzigingen) en signaleert de ActionScript-tegenhanger om bepaalde gebeurtenissen te activeren. De ActionScript-klasse biedt ons ook een eenvoudig te gebruiken API voor het beheren van verschillende browseracties (dwz het wijzigen van de URL, het wijzigen van de paginatitel).
SWFAddress-sites verschillen van sommige traditionele sites omdat de navigatielogica gebaseerd moet zijn op tekenreeksen en een centrale kruising moet hebben. Het is gebruikelijk dat op veel op Flash gebaseerde sites een unieke functie is gekoppeld aan elk navigatie-element. De eerste knop kan bijvoorbeeld een functie showPage1 () activeren en de tweede kan een functie showPage2 () activeren. In een SWFadres-pagina zal elk navigatie-element dezelfde functie activeren, namelijk degene die SWFAddress opdraagt de URL te wijzigen.
SWFAddress activeert tegelijkertijd ook zijn wijzigingsgebeurtenis, waarna u de huidige URL moet evalueren en moet beslissen welke actie moet worden ondernomen. Zodra u zich op uw gemak voelt met dit verschil, merkt u dat SWFAddress weinig weerstand biedt tegen uw normale workflow. Veel ontwikkelaars gebruiken al een vergelijkbare navigatiearchitectuur op hun niet-SWFAddress-sites.
Deze tutorial begint met het bouwen van een basispagina met 4 navigatie-elementen. We introduceren vervolgens SWFAddress in de mix om ons wat ondersteuning voor deeplinking te geven. Ten slotte, voor de gevorderde gebruikers, zullen we ons statische menu / tekst vervangen en een extern XML-bestand gebruiken om de inhoud te leveren.
Stap 1: De werkruimte instellen
Onze SWFAddress-website zal bestaan uit een paar sleutelbestanden. We hebben onze hoofd-FLA nodig, de SWF die het compileert, een HTML-pagina, de SWFAddress .als bibliotheken, de SWFAddress. Js-bibliotheken en de SWFObject-bibliotheken (de javascript-bibliotheken bevinden zich in de swfadres en swfobjectmappen).
Stap 2: Het HTML-bestand
Onze HTML-pagina is een standaard SWFObject-dynamische insluiting met een regel voor SWFAddress. We gaan er niet te diep op ingaan, aangezien HTML en js buiten het bestek van deze tutorial vallen. Het is voldoende om te zeggen dat de enige verschillen tussen een typische SWFObject HTML-sjabloon en dit de HTML op regel # 7 is (zie de lijn gemarkeerd in blauw).
Stap 3: Eenvoudige FLA-instellingen
Nu de bronbestanden aanwezig zijn, beginnen we met het maken van onze FLA. Maak een nieuw AS3-document, stel de afmetingen in op 600 x 400 px en sla het op in de projectdirectory als "tutorial.fla". We zullen ook de achtergrondkleur instellen op # 999999, zodat het er minder saai uitziet.
Stap 4: Menu-items Array
Voor deze zelfstudie maken we een array om onze menu-items vast te houden. Dit maakt het gemakkelijker om een op XML gebaseerd menu op een later tijdstip op te nemen als u dat wilt. We beginnen met het maken van een nieuwe laag op de tijdlijn die we "acties" zullen noemen. We zullen dan het actiescherm tevoorschijn halen (met die laag geselecteerd) en de volgende code gebruiken:
var menuArray: Array = new Array ("Home", "Over ons", "Services", "Contact");
Het zou er ongeveer zo uit moeten zien:
Stap 5: De menushouder tekenen
Nu gaan we het menu maken. We zullen een nieuwe laag maken (noem het "menu") en beginnen met het tekenen van een eenvoudige rechthoek van 400 x 50px met een 2px hoekradius op de nieuwe laag. De kleur is niet belangrijk omdat we hem later zullen aanpassen.
Stap 6: Het menu converteren naar een filmclip
Nu zullen we het menu selecteren en op F8 drukken om het naar een filmclip te converteren. We geven het een bibliotheek-ID van "menu" en een instantienaam van "menuHolder".
Stap 7: De achtergrond van het menu maken
Dubbelklik op de nieuw gemaakte menufilmclip om de bewerkingsmodus te openen. We zullen de vorm binnenin selecteren en deze opnieuw converteren naar een filmclip (F8). Deze keer zullen we er echter een 9-delig schaalrooster op toepassen. We doen dit zodat we een achtergrond kunnen hebben voor het menu dat we netjes kunnen schalen zonder het menu zelf te hoeven schalen. We geven het een bibliotheek en een instantienaam van "menubg".
Ik heb ook een subtiele blauwe gloed aan het menu toegevoegd met een gloeifilter waarvan blurx en blury zijn ingesteld op 6, sterkte ingesteld op 50% en de kleur ingesteld op # 32CCFF.
Stap 8: De menu-items tekenen
Nu gaan we terug naar het hoofddocument en beginnen we de eigenlijke menu-items te maken (dwz de "links" die het menu zullen vullen). Hoewel we deze op het hoofddocument tekenen, kunnen we ze overal tekenen, omdat ze later dynamisch aan de fase worden toegevoegd. We zullen eerst een tekstveld maken en dit op dynamisch zetten en het een instantienaam van "txt" geven. We zullen het lettertype instellen op Arial, de grootte op 22pts en de kleur op wit #ffffff. Zorg ervoor dat het tekstveld niet kan worden geselecteerd (de eerste knop onder het dropdown-menu anti-alias). Ten slotte zullen we het lettertype insluiten. U kunt elk lettertype gebruiken dat u wilt, maar u moet onthouden om de lettergrootte aan te passen zodat het qua hoogte in het menu past.
Stap 9: Menu-items exporteren voor ActionScript
We zullen nu de menu-items converteren naar filmclips, maar we moeten een extra stap nemen omdat we deze filmclip opnieuw zullen gebruiken in onze ActionScript-code. Selecteer het tekstveld en druk op F8 om het filmclip-dialoogvenster te openen, voer "menuItem" in het veld naam in en selecteer het selectievakje "Exporteren voor ActionScript". Als u klaar bent, klikt u op OK en vervolgens nogmaals op OK in het volgende bevestigingsvenster (mogelijk verschijnt dit niet afhankelijk van uw instellingen).
Stap 10: De menu-items maken (ActionScript)
We gebruiken de volgende code om het menu te vullen met de juiste menu-items:
var xval = 20; for (var i: int = 0; i
Kortom, we doorlopen de elementen van onze array en voor elk element een nieuw exemplaar van menuItem. Vervolgens stellen we het tekstveld in het menu-item in op "autoSize = left", zodat het wordt uitgevouwen zodat het past in de tekst die erin is geplaatst. De volgende regel stelt de tekst in het tekstveld in op basis van het arrayelement dat overeenkomt met de huidige iteratie van de lus. xval is een variabele die we gebruiken en die de positie van het menu-item opslaat, zodat we ze naast elkaar kunnen plaatsen. Vervolgens centreren we het menu-item in het menu en tenslotte voegen we de breedte van het menu-item en de opvulwaarde toe aan xval. Vervolgens voegen we het menu-item toe aan het menuHolder. De laatste 2 regels code zorgen ervoor dat de achtergrond van het menuHolder wordt uitgerekt om de menushouder te vullen (we voegen 20px toe voor opvulling) en centreren het menu op het podium.
Stap 11: Het inhoudsgebied creëren
Voordat we verdergaan met het toewijzen van acties aan de menu-items en het instellen van SWFAddress, moeten we een aantal inhoud maken om weer te geven. Voor de eenvoud zullen we de standaard flash-tweening-engine gebruiken. Maak een nieuwe laag met de naam content. Maak op deze laag een rechthoek van 500 x 250 px en converteer deze naar een filmclip met een instantienaam van "inhoud".
Stap 12: Tekstveld toevoegen aan inhoudsgebied
Nu we het inhoudsgebied hebben gemaakt, dubbelklikken we erop om de bewerkingsmodus te openen en er een dynamisch tekstveld op te plaatsen. Dit tekstveld zou bijna net zo groot moeten zijn als de filmclip "content". We gebruiken dezelfde tekstinstellingen als het menu (arial 22pt, wit) met ingesloten lettertypen. We geven het een instantienaam van txt en veranderen het gedrag (onder alinearegelingen) in multi-lijn.
Stap 13: De inhoud maken
Laten we nu een deel van de inhoud maken waarin we het inhoudsgebied kunnen vullen met menu-items die zijn geselecteerd. Voor de eenvoud zullen we gewoon 4 verschillende stringvariabelen maken, maar in een meer geavanceerde site zou je dit waarschijnlijk vervangen door een externe gegevensbron. Voeg de volgende 4 variabelen toe aan onze ActionScript-code:
var text1: String = "Dit is de tekst voor de startpagina" var text2: String = "Dit is de tekst die u zou zien op de pagina About Us" var text3: String = "Deze pagina bevat de verschillende services die wij bieden "var text4: String =" Dit zijn de verschillende methoden die u kunt gebruiken om contact met ons op te nemen. U vindt hier ook een kaart "
Je kunt deze bovenaan de code plaatsen.
Stap 14: De wijzigingsfunctie van de Textfield maken
We zullen nu een eenvoudige functie maken die de inhoud van het tekstveld wijzigt en de overgang animeert. Plak in de volgende code, dan onderzoeken we het regel voor regel:
import fl.transitions.Tween; import fl.transitions.easing. *; var cTween: Tween = nieuwe Tween (inhoud, "x", Regular.easeOut, 50, 50, .1, waar); var mainText: String-functie textChange () cTween.continueTo (-800, .4); cTween.addEventListener ("motionFinish", setText) function setText (e: Event) content.txt.text = mainText cTween.continueTo (50, .4)
De eerste twee regels importeren eenvoudigweg de tween-klasse en de versnelheidsfuncties. De volgende regel initialiseert de tween zodat we deze gemakkelijker kunnen manipuleren met de functie continueTo. De vierde regel maakt een variabele die de huidige string bevat, deze variabele wordt ingesteld door SWFAddress en het inhoudsgebied laadt deze variabele in zijn tekstveld wanneer het terugkeert naar de positie. De functie textChange tweens het inhoudsgebied opzij en stelt een gebeurtenislistener in om de setText-functie te activeren wanneer deze klaar is. De setText-functie tweens het inhoudsgebied terug op het podium en stelt het tekstveld in op wat mainText is ingesteld op SWFAddress.
Stap 15: SWFAddress initialiseren
Om SWFAddress te initialiseren, hoeven we alleen maar de CHANGE-gebeurtenis toe te voegen en de handler van die gebeurtenis te maken. Deze paar regels code doen het;
SWFAddress.addEventListener (SWFAddressEvent.CHANGE, addressChange) functie addressChange (e: Event) // dingen om te doen wanneer adreswijzigingen
De functie "adreswijziging" wordt uitgevoerd elke keer dat de browser de URL wijzigt (via de knoppen achteruit / vooruit, de adresbalk-URL of een andere methode opnieuw schrijft) of u de URL wijzigt (via de functie SWFAddress.setValue).
Stap 16: Acties aan de menu-items toevoegen
Onze volgende stap is om wat gedrag toe te voegen aan de menuknoppen die we eerder hebben gemaakt. We doen dit door de menu-creatierus opnieuw te bekijken die we eerder hebben gebouwd.
var xval = 20 voor (var i: int = 0; i
De laatste regel vóór de sluitende haak is degene die we moeten toevoegen. Hiermee wordt een gebeurtenis gemaakt voor de menu-items die worden geactiveerd wanneer op een menu-item wordt geklikt. We moeten nu de bijbehorende gebeurtenishandler toevoegen.
var xval = 20; for (var i: int = 0; i
De laatste drie coderegels die we hebben toegevoegd, worden telkens uitgevoerd als op een menu-item wordt geklikt. Hiermee wordt SWFAddress opgedragen de setValue-functie uit te voeren die de pagina wijzigt en de VERANDEREN-gebeurtenishandler vuurt. De parameter die we doorgeven aan de functie setValue is de tekst van het menu-item waarop de gebruiker heeft geklikt.
Als we nu de bestanden naar onze webserver zouden uploaden en het HTML-bestand zouden testen, zouden we de adres-URL wijzigen terwijl we op de knoppen klikken, maar het bestand zou niets doen, omdat we SWFAddress niet hebben verteld wat te doen wanneer het adres verandert.
Stap 17: SWFadres Acties
We hebben nu het menu ingesteld en de menuknoppen activeren juist SWFAddress. Het laatste deel van de vergelijking is om SWFAddress te vertellen wat te doen als het wordt geactiveerd. Eerder in de zelfstudie (stap 15) hebben we de gebeurtenislistener en -handler voor SWFAddress gemaakt. We gaan dat codeblok opnieuw bekijken en voegen het volgende toe:
SWFAddress.addEventListener (SWFAddressEvent.CHANGE, addressChange) functie addressChange (e: Event) if (SWFAddress.getValue () == "/ Home") mainText = text1 textChange () if (SWFAddress.getValue () == " / About Us ") mainText = text2 textChange () if (SWFAddress.getValue () ==" / Services ") mainText = text3 textChange () if (SWFAddress.getValue () ==" / Contact Us ") mainText = text4 textChange () SWFAddress.setTitle (SWFAddress.getValue ());
Het belangrijkste verschil is alle code in de functie "addressChange". We hebben verschillende voorwaardelijke instructies gemaakt die controleren wat de huidige pagina is, "mainText" instellen op de juiste tekst en vervolgens de functie "textChange" starten die verantwoordelijk is voor het animeren van de overgang en het instellen van de tekst van het inhoudsgebied. De laatste regel stelt de HTML-titel van de pagina in op de huidige pagina. Deze functie kan worden opgeschoond met een schakelkast, maar omwille van de eenvoud zullen we het laten zoals het is.
Stap 18: Alles gedaan
Uw bestanden moeten nu overeenkomen met die in de bronbestanden. Publiceer de FLA, upload de bestanden naar uw server en u hebt nu een volledig functionele pagina.
Conclusie
We hebben nu onze eenvoudige door SWFAddress aangedreven pagina voltooid. Dit bestand moet dienen als een geschikte basis voor elke SWFAddress-site en kan eenvoudig worden uitgebreid met dynamische inhoud met minimale extra code. Ik hoop dat je het leuk vond om mee te volgen!
Share
Accentsconagua
