Buttonology een doorloop van methode voor het maken van knoppen

Hoe u een probleem benadert, is tot op zekere hoogte uw sleutel tot goed solide werk. Deze walkthrough begeleidt je in de zes meest gebruikte methoden voor het maken van knoppen en laat je zien in welke situaties ze het beste kunnen worden gebruikt.

Het Button Making Dilemma

Laat me je een klein verhaal vertellen over hoe al dit knooppunt interactie conflict begon. Op een dag waren Adam en Eva in de Hof van Eden.

ADAM: Hoi Eva, je ziet er vandaag anders uit, wat is er mis?
VOORAVOND: Ik heb echt dorst en we hebben geen zoet water meer.
ADAM: Blijf hier.

Adam ging naar een automaat in de buurt, zag een doos met appelsap, onthield zijn nummer, voegde een muntje en drukte op de knop! Er is niks gebeurd. Er was een bug.

Weet je, Adam startte een gebeurtenis die een actie had moeten veroorzaken. Gelukkig was hij een goed bedreven ActionScript-programmeur en plugt hij zijn USB ActionScript-compiler in de USB ActionScript-programmeersleuf van de verkoopautomaat en begint hij met het debuggen van de code.

Hij had een vorm op het podium die op een knop leek, en niets anders. Iemand was vergeten de code te maken. Het was nu aan hem om de meest geschikte methode te vinden om dit probleem te benaderen en zijn weg naar de juice box te coderen.

Old School Method

Wanneer je Flash 5 voor de eerste keer opent, wordt je gevraagd om een paar tutorials te bekijken als je dat wilt. In een van deze handleidingen leert u hoe u eenvoudige knopinteractie maakt en voor het grootste deel van uw ActionScript 1 en begin 2 volgt u dat pad.

Het werkt ongeveer als volgt:

Maak een knopsymbool.
Zet binnen het symbool de toestanden die u wilt dat de knop heeft.
Ga naar de tijdlijn waar u de knop plaatst, klik om deze te selecteren, open de acties en schrijf:

 aan (druk op) trace ("hihi that tickles");

Hoewel het geen standaardpraktijk meer is, zijn er veel ontwerpers die ik ken die deze methode nog steeds gebruiken. Het is nog steeds best handig als je een krappe deadline hebt, je werkt aan een banner die beperkt is tot Flash Player 5 of lager (ja, er zijn tegenwoordig nog steeds dergelijke beperkingen) en je moet vertrouwen op een ontwerper om te bouwen en te animeren De vlag. Uiteindelijk is alles wat je nodig hebt een clickTag-knop.

Opmerking: een clickTag is een variabele die een advertentiegastheer via een HTML in een swf-object injecteert. Het bevat de URL waarnaar de banner moet navigeren. Bekijk de clickTag-tut van Victor Jackson voor meer informatie.

Download voorbeeld 1 om deze methode in actie te zien.

Als ik het doel kon vertellen ...

Later in je ActionScript-leven, toen 2.0 langs kwam, was er ook de mogelijkheid om functies aan gebeurtenissen in MovieClip Objects te koppelen. Door deze methode te gebruiken, kunt u uw eigen knop bouwen op basis van een filmclip en het beste was dat al uw code op slechts één plaats kon worden opgeslagen. Dit is erg handig voor menu's, jammer dat het alleen beschikbaar werd gesteld in Flash Player 6.

Hier ziet u hoe die workflow eruitziet.

Maak een filmclipsymbool.
Voor de toestanden kun je doen wat je wilt: je zou keyframes kunnen toevoegen, je zou verschillende filmclips kunnen maken, je zou ze kunnen transformeren, het is aan jou omdat je de volledige controle over de gebeurtenissen zult hebben.
Geef de filmclip waarvoor je een instantienaam hebt gemaakt, ik heb mijn mijn 'myMovieClip' genoemd.
Plaats de filmclip op het podium en voeg in hetzelfde keyframe (andere laag) de volgende regels toe:

 myMovieclip.onRollOver = function () trace ("hihi, that tickles");  myMovieclip.onPress = function () trace ("hihi, dat kietelt ook");  myMovieclip.onRollOut = function () trace ("au, nu doet het pijn !!");

Als je een beperking hebt voor spelers tot versie 8 of als je niet gewend bent aan AS3 en je bouwt iets met weinig interactie, dit is de manier om te gaan.

Download voorbeeld 2 om deze methode in actie te zien.

U kunt feitelijk delegeren

Voor complexere modellen, waarbij de structuur bijvoorbeeld geneste filmclips omvat, kunt u eigenlijk functies delegeren en een nieuwe scope instellen om de functie te laten werken. Dit klinkt misschien verwarrend, dus bekijk het verschil hieronder.

 // Reguliere code myMovieclip.stop_bt.onPress = function () this._parent.myAnimation.stop (); ; myMovieclip.play_bt.onPress = function () this._parent.myAnimation.play (); ; // Delegate import mx.utils.Delegate; myMovieclip.onPlayClick = function () this.myAnimation.play (); ; myMovieclip.onStopClick = function () this.myAnimation.stop (); ; myMovieclip.play_bt.onPress = Delegate.create (myMovieclip, myMovieclip.onPlayClick); myMovieclip.stop_bt.onPress = Delegate.create (myMovieclip, myMovieclip.onStopClick);

Zoals je kunt zien, is het niet nodig om de ouder te bellen, maar kan ik gewoon opnieuw naar het object kijken. Dit is een vrij eenvoudig voorbeeld, maar je kunt zien hoe dit van pas kan komen in een complexere situatie.

Download voorbeeld 3 om deze methode in actie te zien.

3.0

Dat is allemaal erg mooi, maar als je helemaal geen beperkingen hebt met betrekking tot de spelerversie, moet je alle bovenstaande stappen negeren en je richten op ActionScript 3.0. Zich niet comfortabel voelen met de taal is geen excuus, je zult je nooit op je gemak voelen met iets, tenzij je het gebruikt. Na een paar uur inzicht in de syntaxis en enkele dagen met het spiekbriefje AS2 naar AS3 naast je, zul je je meteen thuis voelen. Het hoeft niet volledig op OOP-klasse gebaseerd te zijn, als je gewend bent aan tijdlijnprogrammering, kun je dat blijven doen. De Flash IDE maakt een MainTimeline-klasse zodra u uw film exporteert.

Schrijf dit gewoon in het eerste frame van uw FLA, bedenk dat u een filmclipsymbool op dat keyframe hebt (andere laag echter, alleen om de organisatie te helpen) met een exemplaar van myMovieClip.

 myMovieClip.addEventListener (MouseEvent.CLICK, onClickHandler) -functie onClickHandler (e) trace ("ik zei dat kietelt !! NU STOP!");

Er zijn echter enkele nadelen aan het gebruik van deze methode:

Gedispergeerde code, zoals wanneer we te veel symbolen op het podium hebben en het spoor verliezen van waar de code voor een bepaald object zit
Code herbruikbaarheid is een no-no, de enige manier waarop je iets kunt hergebruiken, is door het kopiëren en plakken, en dat is een beetje zwak, nietwaar?

Maar ik moet toegeven dat ik deze methode veel te vaak gebruik. Meestal voor het gemak, maar ik betreur het meestal. Mijn advies is om alleen in de tijdlijn te programmeren met banneradvertenties en kleine eenvoudige mini / micro-sites. Zelfs in die gevallen wilt u mogelijk een schuifregelklasse, een diavoorstellingklasse, een tweenklasse, een sneeuwklasseklasse, enz. Importeren die u specifiek voor dat project gaat bouwen..

Download voorbeeld 4 om deze methode in actie te zien.

Volledige gestructureerde objectgeoriënteerde programmering

Laten we hetzelfde doen met een volledige OOP-aanpak. Stel dat de ontwerper het Flash-bestand heeft gebouwd en de afbeeldingen op het podium heeft achtergelaten, dan is dit wat u moet doen.

In de Flash IDE converteert u de afbeelding naar een symbool en geeft u deze een instantienaam. In een nieuw AS-bestand met de naam Main.as schrijf de volgende code:

 pakket import flash.display.Sprite; import flash.display.MovieClip; import flash.events.MouseEvent; public class Main breidt Sprite uit private var myMovieClip: MovieClip; public function Main (): void myMovieClip.addEventListener (MouseEvent.CLICK, onClickHandler);  private functie onClickHandler (e: MouseEvent): void trace ("that's the spot ...");

Waarschijnlijk de methode die nachtmerries veroorzaakt voor nieuwkomers in de AS3- en OOP-wereld, en waarschijnlijk de beste methode voor milde tot zeer complexe Flash-projecten..

Zie het als een tijdlijn-programmering met een paar extra karakters die je helpen een robuuste, herbruikbare code te maken. U zult altijd weten waar het is, waardoor u uw werk gemakkelijker kunt lezen en begrijpen.

Download voorbeeld 5 om deze methode in actie te zien.

Opmerking: als het ontwerp van de knop eenvoudig genoeg is, zouden we het in de klas hebben kunnen bouwen zonder dat er Flash IDE en zijn mooie ontwerptools voor nodig zijn. Meestal is het gewoon niet praktisch.

Toen maakte "God" het component van de knop

Terug naar het hoofdverhaal verwijderde Adam per ongeluk de vorm die iemand had gemaakt als de knop en omdat hij niet wist hoe het rechthoekgereedschap moest worden gebruikt om een nieuwe knop te tekenen, nam hij de componentroute. Hier is hoe hij het deed.

Hij voegde het Button-onderdeel toe aan de bibliotheek.
Hij redde zijn code als MyButton.as in dezelfde map als zijn FLA-bestand.
Hij heeft de klasse Document in het FLA-bestand ingesteld op MyButton.

 pakket import fl.controls.Button; import flash.display.Sprite; import flash.events.MouseEvent; public class MyButton breidt Sprite uit private var b1: Button; openbare functie MyButton () setup Knoppen ();  private function setup Knoppen (): void b1 = new Button (); b1.width = 160; b1.move (10,10); b1.label = "Appelsap"; b1.addEventListener (MouseEvent.CLICK, buttonClick); addChild (b1);  knop persoonlijke functieKlik (e: MouseEvent) knop var: Button = e.target als knop; trace (button.label + "tickles");

Wanneer gebruik ik dit? Als u van plan bent een gebruikersinterface te bouwen voor een rijke internettoepassing en in plaats van Flex te gebruiken, wilt u Flash uitproberen, dan is dat de manier om het te doen. (Mijn advies zou zijn om in plaats daarvan met Flash Builder te gaan) of als je gewoon een eenvoudige gebruikersinterface nodig hebt voor elke vorm die je aan het bouwen bent, waarvoor niet veel ontwerpwerk vereist is. Natuurlijk kun je een knopcomponent aanpassen, maar dat duurt te lang in vergelijking met het bouwen van een nieuwe knop.

Download voorbeeld 6 om deze methode in actie te zien.

Conclusie

Uiteindelijk is de beslissing voor jou. Ik heb de methoden genummerd die ik heb leren kennen en gebruiken in mijn loopbaan als ontwikkelaar in Flash en de meningen die ik hier noemde zijn degene die ik tot nu toe heb gerealiseerd tijdens het werken aan verschillende projecten..

Als je je op je gemak voelt met je methode om knopen te maken en het gevoel hebt dat het jou uitkomt, dan is dat prima, zolang het werkt, maar uiteindelijk zul je gaan begrijpen waarom OOP gestructureerd ActionScript een best practice is. Niet omdat het nerds is, maar omdat het eigenlijk gemakkelijker is om te schrijven, te lezen en daarom te begrijpen.

Bedankt voor het lezen, ik hoop dat je het leuk vond en een geweldig 2010 hebt!

Opmerking: Adam slaagde erin de appelsapdoos te bemachtigen, die hij aan Eva gaf. De rest van het verhaal weet je waarschijnlijk ...

Code