Share
In deze tutorial laat ik je zien hoe je een menu zoals Apple's Dock maakt met behulp van AS3-klassen. We zullen een enkel AS-bestand maken dat alle magie uitvoert en uitbreidt om nieuwe functies toe te voegen.
Opnieuw gepubliceerde zelfstudieOm de paar weken bekijken we enkele van onze favoriete lezers uit de geschiedenis van de site. Deze tutorial werd voor het eerst gepubliceerd in maart 2010.
Laten we eerst eens kijken naar wat we gaan maken. Beweeg uw muis over de pictogrammen om te zien hoe ze bewegen en schalen.
Begin met het maken van een nieuw ActionScript-bestand en sla het op als "DockItem.as". Ik bewaar de mijne op c: /macmenu/org/effects/DockItem.as.
Merk op dat onze document root (waar de .fla leeft) c: / macmenu zal zijn; de map / org / effecten vormen het pakket voor de klasse DockItem.
Maak een nieuw ActionScript 3.0 Flash-bestand en open het, zodat we zowel DockItem.as als dit .fla-bestand geopend hebben. Sla deze .fla op in de hoofdmap (de DockItem.as is in c: / macmenu / org / effects, dus onze site root is c: / macmenu) de / org / effecten is het pakket van DockItem Object en we bewaren de. fla als c: /macmenu/macmenu.fla.
Nu importeren of tekenen we enkele pictogrammen naar de .fla. Ik heb wat iconen die ik hier heb geïmporteerd uit een Illustrator-bestand, maar je kunt er natuurlijk ook zelf een tekenen en een verloop op toepassen.
Selecteer een pictogram en klik op Wijzigen> Converteren naar symbool.
In het vak dat opent, geef het een naam (ik noemde dit symbool "Star") en let op het registratiepunt; het moet in het midden liggen. Gebruik voor de klas dezelfde naam (onthoud dat u geen spaties kunt gebruiken) en gebruik voor de klasse Base org.effects.DockItem (de klas die we zullen maken). Zorg er ook voor dat uw Type is ingesteld op Filmclip.
Lijn vervolgens alle objecten uit met de onderkant: selecteer alles, klik op Venster> Uitlijnen, zorg dat de knop "Naar fase" niet is geselecteerd (anders wordt het uitgelijnd op de rand van het werkgebied) en klik vervolgens op de knop rechts bovenaan in dit werkgebied. paneel om alle objecten uit te lijnen.
We kunnen zoveel knoppen hebben als we willen, dus laten we al onze pictogrammen omzetten in symbolen. Vergeet niet om ze een naam en klasse te geven, stel alle registratiepunten in op het midden onderaan en stel de Base class in op org.effects.DockItem.
Hieronder ziet u hoe onze bibliotheek en de pictogrammen er uit moeten zien; let op de ruimte ertussen, het is belangrijk voor het creëren van een goed effect.
Als we de film nu testen, wordt er een fout gegenereerd door te zeggen dat een ActionScript-bestand ten minste één externe en zichtbare definitie moet hebben; dat komt omdat al onze menu-items de DockItem-klasse uitbreiden, die we nog niet hebben geschreven. Laten we het nu schrijven ...
Begin met het maken van het pakket door de Sprite-klasse uit te breiden (we breiden Sprite uit omdat we geen tijdlijnanimatie hebben.)
package org.effects import flash.display.Sprite; openbare klasse DockItem breidt Sprite uit
Op dit punt hebben we ons DockItem uitbreiden van de klasse Sprite, dus als je het nu test, zal het werken, maar je zult geen effecten zien.
(Verward? Niet gewend aan het coderen met klassen? Bekijk deze Quick Tip over het gebruik van een documentklasse voor een inleiding.)
Nu zullen we alle benodigde klassen importeren. Hier wordt een aangepaste klasse gebruikt, de TweenLite-klasse, die u kunt downloaden van GreenSock.com. Als je TweenLite hebt gedownload, pak je het uit naar je / macmenu / map (dus je hebt een map / macmenu / com / greensock /).
package org.effects import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import com.greensock.TweenLite; //http://www.greensock.com/tweenlite import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; openbare klasse DockItem breidt Sprite uit
Ik heb de klasse Sprite geïmporteerd omdat dit is wat we uitbreiden; als u animaties op de tijdlijn hebt, breidt u de klasse MovieClip uit. We zullen de klasse Event gebruiken wanneer het aangepaste object wordt toegevoegd en we zullen de MouseEvent gebruiken bij het controleren van de afstand van elk pictogram van de muis.
Tijdens deze stap zullen we de nodige variabelen declareren:
package org.effects import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; openbare klasse DockItem breidt Sprite uit private var _initPosition: Number; public var maxXDistance: Number; public var maxYDistance: Number; public var maxScale: Number;
Merk op dat ik de _initPosition als privé: het stelt alleen de initiële x-positie van het pictogram in. De afstand van de muis wordt altijd vanaf dit punt gemeten, omdat de werkelijke x-positie van het item altijd zal veranderen.
maxXDistance is de maximale x-afstand waarover de muis het pictogram zal beïnvloeden, maxYDistance is de maximale Y-afstand waarover de muis het pictogram en zal beïnvloeden maxScale is de maximale schaal die aan het pictogram wordt toegevoegd (als u bijvoorbeeld de waarde 2 instelt, is de maximale schaal die het object kan bereiken 3).
Ik heb openbare variabelen voor de laatste drie gebruikt, zodat we ze tijdens runtime kunnen wijzigen.
De constructorfunctie moet dezelfde naam hebben als de klasse (en dus dezelfde naam als het bestand), vandaar DockItem ():
package org.effects import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; openbare klasse DockItem breidt Sprite uit private var _initPosition: Number; public var maxXDistance: Number; public var maxYDistance: Number; public var maxScale: Number; openbare functie DockItem ($ maxXDistance: Number = 60, $ maxYDistance: Number = 30, $ maxScale: Number = 2): void maxXDistance = $ maxXDistance; maxYDistance = $ maxYDistance; maxScale = $ maxScale; if (stadium) init (); else addEventListener (Event.ADDED_TO_STAGE, init); addEventListener (Event.REMOVED_FROM_STAGE, eind);
Waarom hebben we hier een aantal parameters? Hierdoor kunnen we verschillende combinaties van afstanden en schalen gebruiken: we kunnen een korte afstand hebben met een zeer grote schaal of een lange afstand met een kleine schaal. Ook kunnen we de y-afstand bepalen waarbinnen de muis het pictogram zal beïnvloeden.
Omdat we de klasse Sprite uitbreiden, kunnen we kinderen toevoegen of zelfs een aangepaste klasse coderen voor elk pictogram dat de klasse DockItem uitbreidt, dus als we het uitbreiden, kunnen we de functie super () gebruiken om de nieuwe parameters door te geven aan de superklasse. We kunnen de DockItem-klasse dan altijd en overal gebruiken.
In deze stap stellen we de maxXDistance-variabele, maxYDistance-variabele en de maxScale-variabele in op de waarden die als parameters worden doorgegeven. We controleren ook of het object zich op het podium bevindt - zo niet, dan voegen we een evenement toe om te controleren wanneer het zich voordoet. We voegen ook een andere gebeurtenislistener toe om te detecteren wanneer het pictogram uit het werkgebied wordt verwijderd. We voegen een MOUSE_MOVE-evenement toe aan het podium om de afstand te overbruggen, dus het is belangrijk om te weten of het op het podium staat.
Dit is de functie die wordt uitgevoerd zodra het pictogram is gemaakt en aan het werkgebied is toegevoegd. In de functie init () voegen we zojuist een listener MouseEvent.MOUSE_MOVE toe aan het werkgebied, stellen we de _initPosition-variabele in op de x-waarde van het object en luisteren we naar de muis die het stadiumgebied verlaat.
package org.effects import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; openbare klasse DockItem breidt Sprite uit private var _initPosition: Number; public var maxXDistance: Number; public var maxYDistance: Number; public var maxScale: Number; openbare functie DockItem ($ maxXDistance: Number = 60, $ maxYDistance: Number = 30, $ maxScale: Number = 2): void maxXDistance = $ maxXDistance; maxYDistance = $ maxYDistance; maxScale = $ maxScale; if (stadium) init (); else addEventListener (Event.ADDED_TO_STAGE, init); addEventListener (Event.REMOVED_FROM_STAGE, eind); private function init (e: Event = null): void _initPosition = x; stage.addEventListener (MouseEvent.MOUSE_MOVE, mouseMove); stage.addEventListener (Event.MOUSE_LEAVE, mouseLeave);
Wanneer de muis over het werkvlak beweegt, zal deze functie (getriggerd door de MOUSE_MOVE-gebeurtenis waaraan we in de laatste stap een luisteraar hebben toegevoegd) de muispositie van het bovenliggende object controleren en de afstand van het object tot de bovenliggende positie van de muis meten.
We gebruiken parent.mouseX omdat dat ons de x-positie van de muis ten opzichte van welk object dan ook het pictogram bevat, in plaats van relatief ten opzichte van het registratiepunt van het pictogram.
We tweenen de pictogrammen ook terug naar hun beginposities als de muis de fase verlaat in de handregel mouseLeave ().
package org.effects import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; openbare klasse DockItem breidt Sprite uit private var _initPosition: Number; public var maxXDistance: Number; public var maxYDistance: Number; public var maxScale: Number; openbare functie DockItem ($ maxXDistance: Number = 60, $ maxYDistance: Number = 30, $ maxScale: Number = 2): void maxXDistance = $ maxXDistance; maxYDistance = $ maxYDistance; maxScale = $ maxScale; if (stadium) init (); else addEventListener (Event.ADDED_TO_STAGE, init); addEventListener (Event.REMOVED_FROM_STAGE, eind); private function init (e: Event = null): void _initPosition = x; stage.addEventListener (MouseEvent.MOUSE_MOVE, mouseMove); stage.addEventListener (Event.MOUSE_LEAVE, mouseLeave); private function mouseMove (e: MouseEvent): void var yDistance: Number = Math.abs (parent.mouseY-y); if (yDistance> maxYDistance) if (_initPosition == x) retour; else TweenLite.to (this, .3, x: _initPosition, scaleX: 1, scaleY: 1); terug te keren; // haal het verschil tussen de bovenliggende muis x positie en de beginpositie van het object var xDistance: Number = parent.mouseX-_initPosition; // controleer of de afstand van de muis tot het object meer dan max. afstand is, het kan niet groter zijn ... xDistance = xDistance> maxXDistance? maxXDistance: xDistance; // controleer of de afstand lager is dan het negatief van de maximale afstand, deze mag niet lager zijn ... xDistance = xDistance < -maxXDistance ? -maxXDistance : xDistance; //create a variable for the position, assuming that the x position must be the initial position plus the distance of the mouse, but it can't be more than the max distance. var posX=_initPosition-xDistance; //we get the scale proportion here, it goes from 0 to maxScale variable var scale:Number=(maxXDistance-Math.abs(xDistance))/maxXDistance; //the minimum scale is 1, the original size, and the max scale will be maxScale variable + 1 scale=1+(maxScale*scale); //here we use a Tween to set the new position according to the mouse position TweenLite.to(this,.3,x:posX,scaleX:scale,scaleY:scale); private function mouseLeave(e:Event):void TweenLite.to(this,.3,x:_initPosition,scaleX:1,scaleY:1);
Eerst controleren we de y-afstand (verticale afstand tussen het pictogram en de muis); als het verder weg is dan het bereik dat we hebben ingesteld met de maxYDistanceVariable, dan controleren we of het pictogram terug in zijn oorspronkelijke positie is en, zo niet, we tween daar. De terugkeer sleutelwoord breekt uit de functie, dus geen van de rest van de code zal in dit geval worden uitgevoerd.
Als de muis verticaal in de buurt van het pictogram staat, gebruiken we wat wiskunde om een nieuwe schaal en positie voor het pictogram te bepalen op basis van de horizontale afstand van de muis en vervolgens te tweenen met die waarden.
Als we het object van het podium verwijderen, moeten we de listener mouseMove en mouseLeave verwijderen; Zo niet, dan kunnen we fouten krijgen telkens wanneer de muis wordt verplaatst. Deze functie is de handler voor de luisteraar REMOVED_FROM_STAGE die we eerder hebben toegevoegd, dus wordt geactiveerd wanneer het object wordt verwijderd.
package org.effects import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; openbare klasse DockItem breidt Sprite uit private var _initPosition: Number; public var maxXDistance: Number; public var maxYDistance: Number; public var maxScale: Number; openbare functie DockItem ($ maxXDistance: Number = 60, $ maxYDistance: Number = 30, $ maxScale: Number = 2): void maxXDistance = $ maxXDistance; maxYDistance = $ maxYDistance; maxScale = $ maxScale; if (stadium) init (); else addEventListener (Event.ADDED_TO_STAGE, init); addEventListener (Event.REMOVED_FROM_STAGE, eind); private function init (e: Event = null): void _initPosition = x; stage.addEventListener (MouseEvent.MOUSE_MOVE, mouseMove); stage.addEventListener (Event.MOUSE_LEAVE, mouseLeave); private function mouseMove (e: MouseEvent): void var yDistance: Number = Math.abs (parent.mouseY-y); if (yDistance> maxYDistance) if (_initPosition == x) retour; else TweenLite.to (this, .3, x: _initPosition, scaleX: 1, scaleY: 1); terug te keren; // haal het verschil tussen de bovenliggende muis x positie en de beginpositie van het object var xDistance: Number = parent.mouseX-_initPosition; // controleer of de afstand van de muis tot het object meer dan max. afstand is, het kan niet groter zijn ... xDistance = xDistance> maxXDistance? maxXDistance: xDistance; // controleer of de afstand lager is dan het negatief van de maximale afstand, deze mag niet lager zijn ... xDistance = xDistance < -maxXDistance ? -maxXDistance : xDistance; //create a variable for the position, assuming that the x position must be the initial position plus the distance of the mouse, but it can't be more than the max distance. var posX=_initPosition-xDistance; //we get the scale proportion here, it goes from 0 to maxScale variable var scale:Number=(maxXDistance-Math.abs(xDistance))/maxXDistance; //the minimum scale is 1, the original size, and the max scale will be maxScale variable + 1 scale=1+(maxScale*scale); //here we use a Tween to set the new position according to the mouse position TweenLite.to(this,.3,x:posX,scaleX:scale,scaleY:scale); private function mouseLeave(e:Event):void TweenLite.to(this,.3,x:_initPosition,scaleX:1,scaleY:1); private function end(e:Event=null):void stage.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMove); stage.removeEventListener(Event.MOUSE_LEAVE,mouseLeave);
Alles wat we doen in deze functie is het verwijderen van de gebeurtenislistener van het podium.
Op dit punt kunnen we het al testen; het zal werken omdat elk object is gekoppeld aan de Base-klasse DockItem. We hebben echter geen selectiekader om te klikken (als we het object instellen) buttonMode property to true, we zullen zien dat we er alleen op kunnen klikken als het over de daadwerkelijke afbeelding gaat.)
Tot nu toe kunnen we het effect zien werken, dus laten we nu elk item in een knop veranderen. We zullen een nieuw ActionScript-bestand maken en deze zal het DockItem uitbreiden - laten we het DockButton noemen. Het pakket is hetzelfde als DockItem (org.effects), dus we zullen itb opslaan in dezelfde map als DockItem.as (bijvoorbeeld: c: /macmenu/org/effects/DockButton.as)
Nu veranderen we de basisklasse van elk object in de bibliotheek. We gebruiken momenteel org.effects.DockItem als basisklasse. Laten we nu org.effects.DockButton gebruiken.
Als we het nu testen, is er een fout. Dit komt omdat DockButton.as nog steeds leeg is, dus laten we dit coderen.
OK, nu breiden we de DockItem-klasse uit, omdat we alles willen gebruiken dat we in DockItem hebben en wat meer trucs toevoegen (waardoor het als een knop kan fungeren), maar we willen de nieuwe functies niet toevoegen aan DockItem direct. Op deze manier kunnen we, als we het DockItem later als iets anders dan een knop willen gebruiken, maar als we het als een knop willen gebruiken, kunnen we de DockButton gebruiken.
package org.effects public class DockButton breidt DockItem uit
Als we ons project nu testen, zal het werken, maar het zal precies hetzelfde werken als het DockItem, omdat we nog niets nieuws hebben toegevoegd.
Laten we wat dingen importeren die we nodig hebben om het DockItem uit te breiden. Omdat we het DockItem uitbreiden, hoeven we de klassen die er al zijn niet te importeren, omdat we ze niet rechtstreeks in DockButton gebruiken.
package org.effects import flash.geom.Rectangle; public class DockButton breidt DockItem uit
Ik heb de klasse Rectangle geïmporteerd, maar waarom? Het is omdat we de begrenzende box van ons object gebruiken om een valse achtergrond te creëren, zodat de knop kan worden aangeklikt, zelfs als de muis zich niet precies boven een gekleurd gebied bevindt. Laten we een achtergrondafbeelding maken met alpha 0 (transparant), dus we hebben een vierkant om te klikken.
Omdat we een begrenzingsvak voor DockButton moeten maken, krijgen we onze eigen grenzen, daarom hebben we de klasse flash.geom.Rectangle geïmporteerd
package org.effects import flash.geom.Rectangle; openbare klasse DockButton breidt DockItem uit openbare functie DockButton (): void buttonMode = true; mouseChildren = false; var bounds: Rectangle = getBounds (this); this.graphics.beginFill (0,0); this.graphics.drawRect (bounds.x, bounds.y, bounds.width, bounds.height); this.graphics.endFill ();
Wat we hebben gedaan? We hebben een constructor gemaakt die eerst de buttonMode van het object instelt op true, dus onze DockButton wordt behandeld als een Button. Vervolgens stellen we mouseChildren in op false, dus muisgebeurtenissen zullen afkomstig zijn van het DockButton-object, niet van een ander object erin. Vervolgens krijgen we de grenzen van het object met getBounds () en tekenen we een transparante rechthoek met behulp van het grafische object. (De grafische eigenschap wordt geleverd met de klasse Sprite en we hebben Sprite uitgebreid om ons DockItem-object te maken. Nu hebben we ons DockItem uitgebreid om ons DockButton-object te maken, DockButton heeft alles van de klasse Sprite en de klasse DockItem.)
OK, laten we een controle uitvoeren:
Als het allemaal in orde is, test de film ...
(Op dit moment, als u de map org / effecten in uw klassepad wilt plaatsen, kunt u deze map niet kopiëren naar elk project dat u maakt en DockItem of DockButton gebruiken.)
Waarom verander je de kleur van de knop niet wanneer de muis eroverheen gaat? In deze sectie zal ik leren hoe. Hiervoor gebruiken we de TweenLite-motor opnieuw om het object een beetje tint te geven. We gebruiken echter al TweenLite in het DockItem-object en we breiden dit object uit op DockButton. We willen DockButton uitbreiden om de kleur te wijzigen, maar we kunnen TweenLite niet meer in hetzelfde object gebruiken, omdat het nieuwe TweenLite-object de andere zal overschrijven (zelfs met de eigenschap overschrijven: false in TweenLite zal het de prestaties veel verminderen als we het direct in hetzelfde object gebruiken). Alles is niet verloren; we hebben een pictogram in elk object van de bibliotheek en we kunnen de tint daarop toepassen.
Om dit te doen, laten we een ander ActionScript-bestand maken, maar sla dit nu op in dezelfde map als de .fla met de naam "OverButton.as" (bijvoorbeeld: c: /macmenu/OverButton.as.)
Eerst maken we het pakket en importeren de noodzakelijke klassen; omdat we het bestand OverButton.as in dezelfde map van het .fla-bestand hebben opgeslagen, is het pakket van het hoogste niveau, dus het is niet nodig om "package org.effects" te schrijven:
pakket import org.effects.DockButton; import flash.display.DisplayObject; import flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; openbare klasse OverButton breidt DockButton uit
OK, dus we breiden DockButton deze keer uit en we hebben de klasse DisplayObject geïmporteerd omdat we het pictogram als een DisplayObject behandelen. We hebben ook MouseEvent geïmporteerd, die we zullen gebruiken om te controleren wanneer de muis boven het pictogram staat en wanneer het uit is. We hebben ook TweenLite om enkele Tween-effecten met de kleur te maken.
pakket import org.effects.DockButton; import flash.display.DisplayObject; import flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; openbare klasse OverButton breidt DockButton uit private var _object: DisplayObject; openbare functie OverButton (): void _object = this.getChildAt (0) als DisplayObject; this.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); this.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); TweenPlugin.activate ([TintPlugin]);
Waarom hebben we een privé-var _object gemaakt als DisplayObject? Ons actuele pictogram wordt opgeslagen in deze variabele (dat is regel 13) en wordt behandeld als een DisplayObject; we gebruiken het kleureffect op ons pictogram, niet in het hele object.
We voegen de gebeurtenislisteners van de muis toe om te controleren wanneer de muis klaar is en wanneer de muis uit is.
Omdat we de listeners voor muis en muis hebben gemaakt, zullen we nu hun functies maken:
pakket import org.effects.DockButton; import flash.display.DisplayObject; import flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; openbare klasse OverButton breidt DockButton uit private var _object: DisplayObject; openbare functie OverButton (): void _object = this.getChildAt (0) als DisplayObject; this.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); this.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); TweenPlugin.activate ([TintPlugin]); private function mouseOver (e: MouseEvent): void new TweenLite (_object, .5, tint: 0x990099); private function mouseOut (e: MouseEvent): void new TweenLite (_object, .5, tint: null);
Merk op dat we de TweenLite nu op _object gebruiken, niet meer op "dit". Dat komt omdat de OverButton de DockButton uitbreidt die het DockItem uitbreidt waar al een TweenLite wordt gebruikt. Ook hebben we in DockButton een nep alpha 0 achtergrond die niet hoeft te worden geverfd.
Voor de tinteigenschap van TweenLite heb ik een kleurcode van 0x990099 gebruikt, die een medium paars is; als u null als de waarde gebruikt, wordt de tint zacht verwijderd.
Als u de film nu test, ziet u geen kleurverandering, omdat we de basisklasse van elk object in de bibliotheek opnieuw moeten wijzigen. Open de bibliotheek nog een keer in de .fla (Venster> Bibliotheek). Klik met de rechtermuisknop op elk object en wijzig de basisklasse in OverButton (niet org.effects.OverButton, omdat het klassebestand zich niet in de map / org / effects bevindt).
OK, nu kun je het testen!
In deze zelfstudie heb ik uitgelegd hoe objecten kunnen worden uitgebreid. Het eigenlijke dock-effect is pure wiskunde - het zijn afstandberekeningen, schaalinstellingen - maar het is belangrijk dat we in de code zien dat we de eigenschap "x" niet kunnen gebruiken als positiereferentie, omdat de eigenschap "x" elke keer wordt gewijzigd. Ik hoop dat jullie allemaal een beter begrip hebben van het "extends" -woord, en kunnen waarderen hoe de berekeningen hier worden gedaan. Bedankt voor het lezen :)
Accentsconagua