Share
In deze, mijn eerste tutorial voor Flashtuts +, zal ik snel uitleggen hoe je een objectgericht vervolgkeuzemenu maakt. We zullen ActionScript 3.0 gebruiken en alle benodigde gegevens uit een xml-bestand halen.
Het resulterende menu kan in elk flash-bestand worden gebruikt zonder hercodering.
Eerst stellen we een klassenpad in. Als u er nog geen heeft, is dit een handige plek om ActionScript-bestanden te plaatsen die u in elk project gebruikt. Op deze manier hoeft u de ActionScript-bestanden niet telkens naar een map van het fla-document te kopiëren wanneer u een nieuwe website of toepassing maakt.
Maak een map voor ActionScript-bestanden in c :. Ik maak de map c: / myActionScripts, maar je kunt overal waar je wilt een map maken met elke gewenste naam.
Ga voor Flash CS3 naar Bewerken> Voorkeuren. Selecteer "ActionScript" in het categoriemenu van het voorkeurenpaneel. Klik aan de rechterkant van het paneel op de knop "ActionsScript 3.0-instellingen ...".
Dit opent een ander paneel (Actionscript 3.0 instellingenpaneel). Klik op de plusknop (+) en typ "c: / myActionScripts", of wat uw directorylocatie ook is. Klik vervolgens op OK in alle open panelen, nu hebben we een klassenpad.
Ga voor Flash CS4 naar Bewerken> Voorkeuren. Selecteer "ActionScript" in het categoriemenu van het voorkeurenpaneel. Klik aan de rechterkant van het paneel op de knop "ActionsScript 3.0-instellingen ...".
Dit opent een paneel genaamd "Actionscript 3.0 geavanceerde instellingen". Klik in het gebied "Bronpad" op de plusknop (+) en typ c: / myActionScripts, of wat uw directorylocatie ook is. Klik vervolgens op OK in alle open panelen, nu hebben we een klassenpad.
Ga naar http://blog.greensock.com/tweenliteas3/ en download de TweenLite ActionScript 3.0-klasse, met dank aan Jack Doyle. Deze klasse is veel beter dan de klasse Tween ingebouwd flits CS3 en flits CS4.
Wanneer het downloaden is voltooid, decomprimeert u gewoon de inhoud van "gs" in het .zip-bestand naar c: / myActionScripts / gs om de TweenLite-klasse beschikbaar te maken voor gebruik wanneer u maar wilt, zonder dat u de map gs naar een equivalente map hoeft te kopiëren van uw project.
Maak ook de map c: / myActionScripts / vervolgkeuzemenu. We plaatsen de ActionScript-bestanden uit deze zelfstudie hier. We kunnen dan ons DropDownMenu-object gebruiken wanneer we maar willen, zonder de vervolgkeuzemenu-map naar elk project te kopiëren. Dit is het voordeel van het gebruik van een klassenpad.
Ik gebruik 5 xml-bestanden, één xml voor het hoofdmenu en andere om gegevens te vullen in het tweede vervolgkeuzemenu. Bewaar alle xml-bestanden in c: / dropdownexample / xml.
Sla het eerste xml-document op als "menu.xml" in de map "xml". Vul het met gegevens zoals:
Sla een tweede xml-document op als "contactlist1.xml" in de xml-map, de gegevens als volgt:
Sla een derde xml-document op als "contactlist2.xml" in de map xml, de gegevens als volgt:
Sla een ander xml-document op als "contactlist3.xml" in de map xml, de gegevens als volgt:
Maak ten slotte het laatste XML-document als "contactlist4.xml", opnieuw in de XML-map met de volgende gegevens:
Nu gaan we het MenuItem-object coderen. Dit is vereist voor ons vervolgkeuzemenu en zal de items in de lijst samenstellen.
Begin met het maken van het pakket, we bewaren het bestand in c: / myActionScripts / vervolgkeuzemenu zodat het pakket "vervolgkeuzemenu" wordt genoemd, dan importeren we de klassen die we in dit object willen gebruiken.
package dropdownmenu import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFormat; import flash.events. *; import gs.TweenLite;
Maak nu de klasse MenuItem. Naarmate we de klasse Sprite uitbreiden, hebben we alle methoden en eigenschappen van die klasse, maar we voegen er nog steeds meer aan toe.
Merk op dat we dit ActionScript-bestand opslaan als "MenuItem.as" in de vervolgkeuzelijst. Het pakket heeft daarom dezelfde naam als de map en de klasse heeft dezelfde naam als het .as-bestand.
public class MenuItem breidt Sprite uit
Geef hier de variabelen op en stel deze in, zodat u ze kunt gebruiken met elke functie in de klas. We zullen ze privé instellen, dus alleen deze klas heeft toegang tot hen. Als u de variabelen binnen een functie declareert, heeft alleen die functie toegang tot de variabele. In ons geval willen we dat de hele klas toegang heeft tot de variabelen.
private var _value: String; private var txt: TextField = new TextField (); private var txtFormat: TextFormat = new TextFormat ();
We verklaren de volgende functie als openbaar, zodat u deze overal kunt openen. Deze functie heeft dezelfde naam als de klasse It is de constructorfunctie en wordt aangeroepen wanneer we dit object instantiëren. Het wordt de eerste functie die wordt uitgevoerd en wordt uitgevoerd elke keer dat u een nieuw object van MenuItem maakt. De constructorfunctie is altijd openbaar.
We geven de waarden voor het bijschrift, de waarde, de breedte en de hoogte door aan de constructor:
openbare functie MenuItem (caption: String, value: String, _width: int = 200, _height: int = 20): void
Nu zullen we deze klasse instellen op "buttonMode", dus het zal zich gedragen als een knop en de handcursor zal elke keer dat je er met de muis overheen gaat weergeven. We stellen de alpha in op .8 (dit wordt de muisuitgangstoestand) we hebben de _value-variabele eerder gedeclareerd, buiten de functie, dus hier maken we de waarde zichtbaar voor elke andere functie van de klasse en de breedte die we met 10 verminderen , dus het menu-item zal een beetje kleiner zijn.
this.buttonMode = true; this.alpha = 0,8; _value = value; _width- = 10
Teken een zwarte rechthoek voor de achtergrond (dit kan elke kleur zijn, verander gewoon de 0x000000 naar wat je maar wilt).
this.graphics.beginFill (0x000000); this.graphics.drawRect (0,0, _width, _height);
Nu stellen we het tekstformaat-object in. Het is gemaakt buiten de functie en is toegankelijk voor elke functie in deze klasse. Dit is het itembijschrift (een dynamisch tekstveld).
txtFormat.color = 0xFFFFFF; txtFormat.size = 10; txtFormat.font = "Verdana";
Nu zullen we de standaard tekstveldopmaak instellen op het tekstformaatobject. We zullen de interactiviteit van de muis van het tekstveld uitschakelen, zodat de tekst niet klikbaar is (dit werkt met elk weergegeven object). We zullen de tekst van het txt dynamische tekstveld instellen als de variabele "caption" die door de constructorparameter gaat. Dan is het een kwestie van het instellen van de positie x en y van het tekstveld en de breedte en hoogte ervan. Vervolgens voegen we de tekst toe aan de weergavelijst van het MenuItem-object.
txt.defaultTextFormat = txtFormat; txt.mouseEnabled = false; txt.text = bijschrift; txt.x = 5; txt.y = 2; txt.width = _width-10; txt.height = _height-4; addChild (txt);
Laten we nu de gebeurtenissen toevoegen. Wanneer we dit object aan de stage toevoegen, wordt de functie addedToStage aangeroepen. Wanneer we met de muis over het object gaan, wordt de mouseOver-functie aangeroepen. Wanneer we de muis uit dit object halen, wordt de mouseOut-functie aangeroepen. We sluiten ook de constructorfunctie af met een "" aan het einde.
addEventListener (Event.ADDED_TO_STAGE, addedToStage); addEventListener (MouseEvent.MOUSE_OVER, mouseOver); addEventListener (MouseEvent.MOUSE_OUT, mouseOut);
Voeg hier een nieuwe functie toe. Wanneer de muis zich boven het object bevindt, stelt deze de alpha soepel in op 1, dus dit object lijkt anders te zijn dan de andere (mouse-over-status).
private function mouseOver (e: MouseEvent): void new TweenLite (this, 1, alpha: 1);
Wanneer we de muis uit het object halen, zal de alpha soepel teruggezet worden naar .8 (de muis uit toestand).
private function mouseOut (e: MouseEvent): void new TweenLite (this, 1, alpha: .8);
Wanneer dit object aan het werkgebied wordt toegevoegd, stellen we de positie van het voorwerp in door de index in de verplaatsingslijst te krijgen en dit te vermenigvuldigen met de hoogte. We hebben een reeks indexen (0, 1, 2, 3) en plaatsen het ene object op het andere, niet op elkaar.
private function addedToStage (e: Event): void this.y = this.parent.getChildIndex (this) * this.height;
De functie "get" is een eigenschap, het werkt als een variabele, maar het is alleen-lezen. U kunt deze waarden niet buiten deze klasse instellen, maar u kunt ze wel lezen. Ze retourneren de waarde van variabelen of tekstvelden die buiten de klas ontoegankelijk zijn.
public function get caption (): String return txt.text; public function get value (): String return _value;
Sluit nu de klas en het pakket dat we aan het begin van het bestand hebben geopend. Sla het op als "MenuItem.as" in c: / myActionScripts / vervolgkeuzemenu, het bestand moet zich bevinden op c: /myActionScripts/dropdownmenu/MenuItem.as
Nu maken we een aangepast evenement voor deze klas. Wanneer we het menu-item wijzigen, krijgen we de waarde door deze gebeurtenis.
Start het pakket, importeer het evenement en maak de klasse die de gebeurtenisklasse uitbreidt. Nu hebben we een nieuwe gebeurtenisklasse die we "DropDownMenuEvent" zullen noemen.
package dropdownmenu import flash.events.Event; public class DropDownMenuEvent breidt evenement uit
Statische variabelen, functies of constanten zijn toegankelijk zonder dat het object moet worden geïnstantieerd. U hoeft de nieuwe instructie niet te gebruiken, u kunt er eenvoudig toegang toe krijgen via: DropDownMenuEvent.CHANGE
Const. Zijn constanten. Nadat u een waarde hebt ingesteld voor const, kan de waarde ervan niet worden gewijzigd. Je kunt kleine letters gebruiken om constanten een naam te geven, maar standaard gebruikt bijna iedereen hoofdletters voor constanten en we zullen niet anders doen.
public static const CHANGE: String = "veranderen";
Instantiëren deze String-objecten hier om de toegang te garanderen vanaf elke plek in deze klasse.
private var _caption: String; private var _value: String;
Maak nu de constructorfunctie. Het super (type) is om deze klasse in te stellen als een superklasse.
openbare functie DropDownMenuEvent (type: String, caption: String, value: String): void super (type); _caption = bijschrift; _value = value;
Maak nu de getterfuncties van de klasse om de waarden als alleen-lezen te krijgen. Ik heb eerder uitgelegd hoe de vangstoffunctie werkt.
public function get caption (): String return _caption; public function get value (): String return _value;
Sluit het pakket en de klasse met "" en sla op als c: /myActionScripts/dropdownmenu/DropDownMenuEvent.as
Ik heb dit object voor het laatst bewaard omdat het complexer is. Het werkt ook niet zonder de twee hierboven gemaakte klassen.
Dit deel is al goed uitgelegd; we zullen het pakket definiëren, alle klassen die we zullen gebruiken importeren, de klasse aanmaken die de Sprite uitbreidt, de variabelen buiten de functies om met een andere functie van deze klasse te gebruiken instellen en dan de constructorfunctie starten. Niets nieuws hier.
Ik zou ook niet opnieuw hoeven te zeggen dat de klasse, de constructor en de bestandsnaam hetzelfde zijn.
De constructorfunctie heeft alle parameters vooraf gedefinieerd, dus we kunnen kiezen of parameters al dan niet worden doorgegeven. We zouden alleen de eerste parameter, of de eerste en de tweede, of de eerste, de tweede en de derde parameter kunnen doorgeven. We zouden de eerste parameter ook als null kunnen doorgeven, dus het zal dezelfde waarde hebben als de vooraf gedefinieerde waarde in de constructor.
package dropdownmenu import flash.display.Sprite; import flash.display.Shape; import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.TextField; import flash.text.TextFormat; import flash.xml. *; import flash.events. *; import flash.display.Graphics; import flash.display.GradientType; import flash.geom.Matrix; import flash.display.SimpleButton; import gs.TweenLite; public class DropDownMenu breidt Sprite uit private var-container: Sprite = nieuwe Sprite (); private var req: URLRequest = new URLRequest (); private var loader: URLLoader = new URLLoader (); private var txt: TextField = new TextField (); private var txtFormat: TextFormat = new TextFormat (); private var-knop: SimpleButton = nieuwe SimpleButton (); private var _value: String; publieke functie DropDownMenu (url: String = null, _width: int = 200, _height: int = 30): void
De container is een sprite, hierboven gemaakt buiten elke functie waarvoor de hele klas toegang heeft. We plaatsen alle menu-items in de container; zet de eigenschap y op de _height param. De container is om te beginnen onzichtbaar (alpha = 0), dus er kan niet op worden geklikt. Zelfs als het zichtbaar was, is de alpha nog steeds 0, dus het wordt nog niet weergegeven.
container.y = _height; container.alpha = 0; container.visible = false; addChild (container);
Maak een achtergrond en voeg deze toe aan het object. Het drawObject is een functie die een vorm teruggeeft, we zullen dit een beetje later zien.
var bg: Shape = drawObject (_width, _height); addChild (bg);
Nogmaals, we stellen de textFormat-objecteigenschappen in en stellen de eigenschap defaultTextFormat van het txt-object in als het textFormat-object. We schakelen de interactiviteit met de muis uit, plaatsen een standaardtekst terwijl de xml nog niet is geladen en voegen het txt-tekstveld toe aan de lijst met objecten van dit object. Al deze acties zijn eerder gezien, dus ze hebben niet al te veel uitleg nodig.
txtFormat.bold = true; txtFormat.size = 15; txtFormat.font = "Verdana"; txt.defaultTextFormat = txtFormat; txt.x = 5; txt.y = 3; txt.width = _width-10; txt.height = _height-6; txt.mouseEnabled = false; txt.text = "XML niet geladen"; addChild (txt);
De knop die buiten de functie is gemaakt, kan overal in deze klasse worden bewerkt. We hebben een nieuwe Shape voor de hitTestState ingesteld en voegen vervolgens een evenement toe. Wanneer erop wordt geklikt, wordt de functie "open" opgeroepen. Vervolgens voegen we de knop toe aan de weergavelijst van dit object.
button.hitTestState = DrawObject (_width, _height); button.addEventListener (MouseEvent.CLICK open); addChild (button);
Voeg nu de gebeurtenislisteners toe. Eén voor de lader wanneer de lader het XML-document volledig heeft geladen. Dit zal de functie loaderComplete aanroepen, of als de loader het xml-document niet vindt, zal het de functie loaderIOError noemen
Deze klasse als deze aan het werkgebied wordt toegevoegd, roept de functie addedToStage aan. Wanneer het uit het werkgebied wordt verwijderd, roept het de functie removedFromStage aan.
loader.addEventListener (Event.COMPLETE, loaderComplete); loader.addEventListener (IOErrorEvent.IO_ERROR, loaderIOError); addEventListener (Event.ADDED_TO_STAGE, addedToStage); addEventListener (Event.REMOVED_FROM_STAGE, removedFromStage);
Hier controleren we of een andere waarde dan nul werd doorgegeven aan url param van de constructor. Als dat het geval is, stellen we de URL in (private var url: URLRequest = new URLRequest ()) en roepen we de functie load aan. Sluit de constructorfunctie met een ""
if (url) load (url);
Omdat de laadfunctie openbaar is, kunt u XML overal buiten deze klasse of in deze klasse laden. Eerst verwijdert deze functie alle menu-items in de container. Als er al een bestaat, zal het het XML-document beginnen te laden.
Accentsconagua
