Share
In deze zelfstudie maken we een galerij die alle afbeeldingsbestanden in een bepaalde map weergeeft. Een schuifregelaar wordt gebruikt om gemakkelijk door de afbeeldingen te bladeren.
Stel een nieuw Flash AS3-document en een leeg ActionScript-bestand in. We zullen eerst de hoofdklasse maken; noem het "Galerij" en sla het op als "Gallery.as". Hieronder staat de code om de eerste klas in te stellen:
package public class Gallery public function Gallery (): void
In Flash kunnen we dit nu instellen als de basisklasse door de naam in te voeren in het invoervak onder de publicatie-instellingen van het document. Je kunt een "trace ('hallo wereld')" proberen in de Gallery-functie om te testen of het werkt.
Voordat we verdergaan met de hoofdklasse, kun je het beste beginnen met de schuifregelaar. De code is vrij eenvoudig te begrijpen en kan enig licht werpen op hoe dingen worden gedaan in AS3.
Maak twee nieuwe filmclips: een schuifregelaar en een handvat voor de schuifregelaar. De schuifregelaar of zoeker hoeft niet te worden geëxporteerd voor ActionScript, omdat we slechts enkele functies op de handle hoeven toepassen. Stel de klasse voor het handvat in als "Handvat". We kunnen nu een nieuwe klasse maken met de naam "Handle" en, indien opgeslagen in dezelfde directory, zal Flash deze klasse automatisch gebruiken voor de handle. Geef zowel een instantienaam als 'slider' en 'theHandle'.
Het volgende is de volledige code voor de handle die ik in stappen zal uitleggen. Het moet worden opgeslagen als "Handle.as" in dezelfde map als uw .fla. Op deze manier voert Flash de code uit zodra een exemplaar met een klassenaam "Handvat" wordt gebruikt.
Accentsconagua
pakket import flash.display.MovieClip; import flash.events.MouseEvent; import flash.events.Event; public class handle verlengt MovieClip public var goToX: Number = x; privé var-schuifregelaar: MovieClip = MovieClip (bovenliggend element) .slider; private var mousePos: Number = 0; public function Handle (): void buttonMode = true; addEventListener (MouseEvent.MOUSE_DOWN, moveHandle); stage.addEventListener (MouseEvent.MOUSE_UP, stopHandle); private functie moveHandle (_e: MouseEvent): void mousePos = mouseX; stage.addEventListener (MouseEvent.MOUSE_MOVE, followHandle); private function stopHandle (_e: MouseEvent): void stage.removeEventListener (MouseEvent.MOUSE_MOVE, followHandle); private function followHandle (_e: MouseEvent): void var newPos: Number = stage.mouseX - mousePos; var orgX: Number = x; if (nieuwPos < slider.x ) goToX = slider.x; else if ( newPos > (slider.x + slider.width) - width) goToX = (slider.x + slider.width) - width; else goToX = newPos; x = goToX; if (goToX! = orgX) dispatchEvent (nieuwe gebeurtenis ("sliding", true)); In de eerste paar regels maken we een paar variabelen om gegevens te bevatten die we kunnen gebruiken in elke functie in deze klasse. De schuifregelaarvariabele bevat een verwijzing naar het exemplaar dat 'schuifregelaar' wordt genoemd op het bovenliggende element. We hebben het nodig om correct de x-positie te berekenen waarnaar de hendel moet worden verplaatst. In de constructor stellen we "buttonMode" in op true, dus een handcursor verschijnt wanneer hij boven het handvat zweeft. Daarnaast voegen we twee eventlisteners toe om te luisteren naar muisgebeurtenissen.
public class handle verlengt MovieClip public var goToX: Number = x; privé var-schuifregelaar: MovieClip = MovieClip (bovenliggend element) .slider; private var mousePos: Number = 0; public function Handle (): void buttonMode = true; addEventListener (MouseEvent.MOUSE_DOWN, moveHandle); stage.addEventListener (MouseEvent.MOUSE_UP, stopHandle);
Zodra een gebeurtenis met de muis omlaag plaatsvindt, wordt een extra luisteraar toegevoegd. Deze luisteraar blijft actief zolang de sleepbeweging niet wordt gestopt en roept de "followHandle" -functie op. Het wordt weer verwijderd als de muisklik voorbij is.
private function moveHandle (_e: MouseEvent): void mousePos = mouseX; stage.addEventListener (MouseEvent.MOUSE_MOVE, followHandle); private function stopHandle (_e: MouseEvent): void stage.removeEventListener (MouseEvent.MOUSE_MOVE, followHandle);
Deze laatste functie verplaatst het handvat eigenlijk. De variabele "newPos" slaat de nieuwe positie op waarnaar de greep zou moeten bewegen. Als deze positie echter verder dan helemaal links of rechts van de schuifregelaar ligt, moet de positie worden ingesteld op de maximaal mogelijke waarde. Als het handvat wordt verplaatst, sturen we een nieuw aangepast evenement met de naam "sliding", dat we later kunnen gebruiken om door de afbeeldingen te bladeren.
private function followHandle (_e: MouseEvent): void var newPos: Number = stage.mouseX - mousePos; var orgX: Number = x; if (nieuwPos < slider.x ) goToX = slider.x; else if ( newPos > (slider.x + slider.width) - width) goToX = (slider.x + slider.width) - width; else goToX = newPos; x = goToX; if (goToX! = orgX) dispatchEvent (nieuwe gebeurtenis ("sliding", true)); Als alles tot nu toe goed is gegaan, zou je een mooie functionele schuifregelaar moeten hebben zoals die hieronder. Voeg daaronder een dynamisch tekstveld toe dat het nummer van de afbeelding bevat. Geef het een instantienaam zoals "countTxt", zodat we dit later in ActionScript kunnen adresseren. Omdat er nog niets te zien is vul ik het in met de tekst "Laden" die ook zal verschijnen terwijl het script de eerste afbeelding laadt.
Vervolgens maken we het php-backend-script. Flash kan de inhoud van een lokale map niet lezen, dus we moeten de informatie van php naar Flash doorgeven. We gebruiken XML omdat het gemakkelijk kan worden uitgevoerd met php en zelfs nog gemakkelijker om te lezen in AS3.
Het volgende is de php-backendcode, sla deze op als "backend.php". De code doorloopt de directory "img" en schrijft een XML-regel voor elk bestand dat zich daarin bevindt. Voorafgaand aan het afdrukken moeten we de "." Filteren en "..." mappen. Omdat de map alleen afbeeldingen bevat, is verdere controle niet nodig.
". $ bestandsnaam."\ n ";?>
Dit zal bijvoorbeeld het volgende weergeven:
file1.jpg
file2.jpg
file3.jpg
Voordat we dit in Flash laden, maken we een klasse om onze afbeeldingen afzonderlijk te houden. Op dezelfde manier als we de klasse Handle hebben gemaakt, kunnen we nu een klasse Img maken. Begin met het maken van een filmclip over het formaat dat u wilt dat uw afbeeldingen worden weergegeven. Geef het een marge van een paar pixels en sla wat ruimte op aan de onderkant voor de beschrijvende tekst. Voeg een dynamisch tekstveld toe voor de beschrijving en geef het een instantienaam van "descr". Zorg ervoor dat u het registratiepunt van de filmclip naar het midden plaatst, zodat we het later eenvoudig kunnen schalen. Exporteer het voor ActionScript onder de klassennaam "Img". Verwijder nu het exemplaar van het werkgebied zoals we het rechtstreeks vanuit de bibliotheek zullen noemen.
Vervolgens laden we de informatie die het php-bestand met ActionScript naar ons Flash-project retourneert. Open de klasse Gallery opnieuw. De volgende code voegt twee functionaliteiten toe aan ons project. Allereerst creëert het "imagesClip", een lege filmclip waarin we de daadwerkelijke afbeeldingen later opslaan. Het gebruik van "addChild" voegt hier de filmclip aan toe. Alles wat aan imagesClip later wordt toegevoegd, verschijnt ook op het podium. Om de XML-gegevens daadwerkelijk te laden, maken we een "URLLoader". Deze klasse kan de resultaten ophalen en een functie uitvoeren wanneer de resultaten zich bevinden.
pakket import flash.display.MovieClip; import flash.events.Event; import flash.net.URLLoader; import flash.net.URLRequest; public class Gallery breidt MovieClip uit private var backend: String = 'http: // localhost / ... / backend.php'; private var xmlLoader: URLLoader = new URLLoader; private var xdata: XML; public var images: Array = new Array (); public var imagesClip: MovieClip = nieuwe MovieClip; public function Gallery (): void imagesClip.y = 180; addChild (imagesClip); xmlLoader.load (nieuwe URLRequest (backend + "?" + nieuwe datum (). valueOf ())); xmlLoader.addEventListener (Event.COMPLETE, loadImages); private function loadImages (_e: Event): void xdata = new XML (_e.target.data); var i: Number = 0; voor elk (var img: XML in xdata.img) images [i] = new Img (); i ++; imagesClip.addChild (afbeeldingen [i]);
Hier gebruiken we de laadfunctie van de klasse URLLoader. Om caching van de resultaten te voorkomen, kunnen we een eenvoudige datum toevoegen aan het einde van de URL. De eventlistener controleert wanneer de URLLoader is voltooid en voert de functie loadImages uit.
xmlLoader.load (nieuwe URLRequest (backend + "?" + nieuwe datum (). valueOf ())); xmlLoader.addEventListener (Event.COMPLETE, loadImages);
Deze volgende functie doorloopt alle
persoonlijke functie loadImages (_e: Event): void xdata = new XML (_e.target.data); var i: Number = 0; voor elk (var img: XML in xdata.img) images [i] = new Img (); i ++; imagesClip.addChild (afbeeldingen [i]);
Om onze Img-instanties meer functionaliteit te geven, maakt u een klasse Img en slaat u deze op als "Img.as". Op dezelfde manier als bij het laden van de XML kunnen we de afbeelding zelf laden en weergeven in de Img-filmclip. Het laden zou niet in de constructor moeten plaatsvinden of alle afbeeldingen zouden tegelijk kunnen laden; we zullen een aparte functie creëren om dit te doen.
public class Img breidt MovieClip uit public var id: Number; private var src: String; private var imageLoader: Loader = new Loader (); private var main: Gallery; private var orgWidth: Number = 0; private var orgHeight: Number = 0;
In de constructor hebben we een verwijzing naar de hoofdgallerklasse ingesteld, zodat we later toegang kunnen krijgen tot elementen op het werkgebied of openbare variabelen en functies van de hoofdklasse. De string "load" zal het pad bevatten naar de afbeelding die php geretourneerd heeft, we zullen het in een variabele opslaan, zodat we het later kunnen gebruiken.
openbare functie Img (load: String, m: Gallery): void orgWidth = width; orgHeight = height; hoofd = m; src = laden;
Met de functie "loadImage" wordt de afbeelding geladen en wordt de functie "displayImage" uitgevoerd.
openbare functie loadImage (): void imageLoader.load (nieuwe URLRequest ("img /" + src)); imageLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, displayImage); De functie displayImage controleert de afbeeldingenreeks die we hebben gemaakt en laadt de volgende afbeelding. Hiermee wordt de vloeiend maken ingesteld op true op de lader (standaard wordt vloeiend maken ingesteld op false bij dynamisch geladen afbeeldingen). Zodra u begint met het schalen of roteren van een afbeelding, is het belangrijk om de vloeiendheid in te stellen, zodat de kwaliteit van het beeld behouden blijft. Omdat het registratiepunt van de filmclip Img zich in het midden bevindt, moeten we de x- en y-positie berekenen van waar de afbeelding zelf moet worden geplaatst. In mijn voorbeeld heb ik een map met afbeeldingen gebruikt met dezelfde breedte en hoogte. Als de breedte en hoogte van de geladen afbeelding variabel zijn, is dit de plek om de grootte tijdens het werken aan te passen. Vlak voordat het als een kind wordt toegevoegd, stellen we de beschrijvende tekst in op "src", die de naam van de afbeelding bevat.
persoonlijke functie displayImage (_e: Event): void if (main.images [id + 1]! = null &&! main.images [id + 1] .parent) main.images [id + 1] .loadImage (); Bitmap (imageLoader.content) .smoothing = true; imageLoader.x = main.spaceBetween / 2 - (orgWidth / 2); imageLoader.y = main.spaceBtween / 2 - (orgHeight / 2); descr.text = src; addChild (imageLoader);
Na de wijzigingen die we in de klasse Img hebben aangebracht, moeten we de manier bijwerken waarop de instanties worden aangeroepen in de functie loadImages van de klasse Gallery. We moeten nu twee argumenten doorgeven als je nieuwe Img () aanroept.
De eerste is de padnaam van de afbeelding die moet worden geladen, we krijgen dit van de xml. De tweede is een verwijzing naar de hoofdgallerklasse; we kunnen "dit" gebruiken dat verwijst naar de klas waarin we momenteel werken. In plaats van de afbeeldingen met addChild aan de imagesClip-container toe te voegen, zullen we een nieuwe functie "goTo" maken. Met deze functie kunt u bepalen welke afbeeldingen op het scherm moeten worden geplaatst. Het argument dat we moeten doorgeven is het id-nummer van de afbeelding, hetzelfde nummer als de indexsleutel in de array images. Wanneer de afbeeldingen voor de eerste keer worden geladen, stellen we de focus op de eerste afbeelding, waarvan het id-nummer nul is.
persoonlijke functie loadImages (_e: Event): void xdata = new XML (_e.target.data); var i: Number = 0; voor elk (var img: XML in xdata.img) images [i] = new Img (img, this); afbeeldingen [i] .x = 200 * i; afbeeldingen [i] .id = i; i ++; goTo (0);
Om de goTo-functie te gebruiken, moeten we eerst een variabele "imagesToShow" declareren. Hiermee wordt het aantal afbeeldingen dat we tegelijk willen laden op het scherm ingesteld. Om te bepalen in welke richting de gebruiker scrolt, controleren we eenvoudig of de afbeelding een hoger of lager id-nummer heeft dan de laatste.
private functie goTo (imgId: Number): void var direction: Number; if (orgImgId! = imgId) if (imgId> orgImgId) richting = 1; anders richting = -1;
De volgende "for-lus" zorgt ervoor dat alle beelden op het scherm worden herhaald. Bijvoorbeeld: als we imagesToShow instellen op 5, zal het lussen van -2 naar 2. Dit betekent dat als we de waarde van i doorgeven aan de klasse Img, we kunnen bepalen waar het op het scherm moet worden geplaatst (-2 is helemaal links , 0 midden en 2 uiterst rechts). Daarom kunnen we de afbeeldingen groter schalen naarmate ze centraal worden gepositioneerd.
Er is een extra cheque inbegrepen, zodat we geen niet-bestaande afbeeldingen activeren (deze stopt bij de eerste en de laatste). Voor elk van de actieve afbeeldingen voeren we de functie "makeActive" uit, die we later zullen maken.
for (var i: Number = - Math.floor (imagesToShow / 2); i <= Math.floor(imagesToShow/2); i++ ) if( imgId + i < images.length && imgId + i >= 0) afbeeldingen [imgId + i] .makeActive (i, richting);
Meteen na het plaatsen van de afbeeldingen die we op het scherm nodig hebben, zullen we controleren welke er niet meer zouden moeten zijn en die van het podium halen. Omdat alle afbeeldingen worden toegevoegd aan de container imagesClip, kunnen we eenvoudig alle kinderen van die filmclip doorlopen. Als hun ID niet binnen die welke actief zou moeten zijn, hebben we de "deActive".
voor (var j: Number = 0; j < imagesClip.numChildren; j++ ) var tile : Img = imagesClip.getChildAt(j) as Img; if ( tile.id < imgId - Math.floor(imagesToShow/2) || tile.id > imgId + Math.floor (imagesToShow / 2)) tile.deActive (richting);
De volgende regel werkt de tekst bij van het dynamische tekstveld dat we eerder hebben gemaakt. Omdat de ID's van de afbeeldingen hun telling beginnen op 0, voegen we + 1 toe aan de imgId, dus de eerste afbeelding is eigenlijk nummer 1. We kunnen het totale aantal afbeeldingen toegang geven tot de lengte van de afbeeldingenreeks.
countTxt.text = imgId + 1 + "/" + images.length;
Ten slotte stellen we "orgImgId" in, dus de volgende keer dat de functie wordt uitgevoerd, kan de richting waarin wordt gescrold, worden bepaald.
orgImgId = imgId;
We hebben nu de functies "makeActive" en "deActive" nodig in de klasse Img. Hiermee wordt de afbeelding aan het werkgebied toegevoegd of wordt het beeld opgeheven. Voorlopig voegen we ze gewoon toe en plaatsen ze correct. Later zullen we ze ook op hun juiste plaats zetten.
De makeActive-functie controleert eerst of deze al aan de imagesClip is toegevoegd. Als er geen bovenliggend item is gevonden, wordt het toegevoegd aan imagesClip-container. De ouder is dan de imagesClip. Vervolgens stellen we de zichtbare eigenschap in op true. Bij het deactiveren stellen we het in op false, dus het is normaal dat we onze afbeelding opnieuw laten zien wanneer deze actief wordt gemaakt.
publieke functie makeActive (positie: Number, direction: Number): void if (parent == null) main.imagesClip.addChild (this); visible = true;
Er is een kans dat de afbeelding zelf nog niet is geladen. Om dit te controleren, controleer ik of het aantal kinderen kleiner is dan 3. Dit aantal kan afhankelijk zijn van het aantal vormen of andere filmclips in uw Img. Als u zich onzeker voelt over deze methode, is het veiliger om een boolean aan het begin te declareren en in de functie displayImage in te stellen op true.
als (numChildren < 3 ) loadImage();
Er is geen diepte in AS3, maar zodra we beginnen met het schalen en roteren van onze afbeeldingen, moeten we ervoor zorgen dat het beeld in het midden bovenop de andere staat. Omdat we de positie als een argument in de goTo-functie hebben doorgegeven, kunnen we deze nu gebruiken om de index van de afbeelding in de afbeeldingenClip in te stellen. De index van een kind kan worden vergeleken met een diepte, maar er zullen geen problemen zijn bij het wijzigen, omdat de andere filmclips een index omhoog of omlaag verplaatsen. Deze stap is niet nodig als u niet van plan bent de afbeeldingen te overlappen.
parent.setChildIndex (this, (parent.numChildren-1) - Math.abs (position));
Ten slotte bepalen we de positie van de afbeelding. De "extra" variabele wordt hier gebruikt om te achterhalen door hoeveel de huidige afbeelding is verwijderd van het centrum. "DefaultWidth" en "spaceBetween" zijn openbare variabelen die zijn ingesteld in de hoofdgalleryklasse, zodat we ze overal kunnen openen. Omdat alle afbeeldingen in mijn map dezelfde breedte hebben, stel ik defaultWidth in op 195 en spatieTussen op 20. Om de afbeelding daadwerkelijk naar de nieuwe positie te verplaatsen, stellen we de eigenschap x in op de nieuw gevonden x-waarde.
var extra: Number = Math.round (positie * (main.defaultWidth + main.spaceBtween)); var newX: Number = Math.round ((main.stageWidth / 2)) + extra; x = newX;
De deActive-functie is vrij rechttoe rechtaan, het verandert de zichtbaarheid in false. De richting is al ingesteld als een argument, omdat we het later nodig hebben om te weten in welke richting het beeld moet worden verzonden wanneer het van het toneel wordt gehaald.
public function deActive (direction: Number): void visible = false;
Inmiddels moeten de eerste paar afbeeldingen op het podium verschijnen. Er ontbreekt nog één functionaliteit. De schuifregelaar is nog niet verbonden met de goTo-functie. Aangezien we echter al een aangepaste gebeurtenis verzenden nadat de handle is gesleept, is het niet erg moeilijk om deze te verbinden.
Voeg de volgende regel toe aan de Gallery-constructorfunctie. Deze eventlistener zal de dia-functie uitvoeren elke keer dat de "sliding" -gebeurtenis wordt aangeroepen door het handvat.
theHandle.addEventListener ("sliding", slide); Het enige dat we met de schuiffunctie moeten doen, is berekenen welk beeld in het midden moet worden weergegeven, afhankelijk van waar het handvat zich bevindt. In de functie "slider" en "theHandle" staan de instantienamen die we eerder hebben ingesteld op de filmclips op het podium. Om uit te zoeken naar welk beeld we gaan, bepalen we eerst het percentage van de positie van de greep over de lengte van de schuifregelaar. Door dat te vermenigvuldigen met het totaal aan afbeeldingen brengen we ons vervolgens naar de juiste afbeeldings-ID.
privé-functiedia (_e: Event): void var percent: Number = (theHandle.goToX - slider.x) / (slider.width - theHandle.width); var imgId: Number = Math.round (procent * (images.length - 1)); goTo (imgId);
Als je dit tot nu toe hebt kunnen volgen en hebt bijgehouden welke klassen je moet importeren en welke variabelen moeten worden verklaard (of de bronbestanden moeten worden gevolgd), zou je nu een werkend voorbeeld moeten hebben.
Om deze tutorial af te ronden, voegen we tweening toe aan de afbeeldingen met TweenLite, een gratis en lichtgewicht tweening-engine. De standaard tweening-klassen die door Adobe worden aangeboden, presteren niet goed wanneer er veel gebeurt. Bij het uitproberen van die crashten of bevriezen ze veel, terwijl ik dergelijke problemen met TweenLite nog moest ontdekken. De syntaxis van TweenLite is heel eenvoudig. Ik zal dit aantonen door het te vergelijken met een normale Flash-tween; een object tweenen van de huidige x naar 100 en de alpha wijzigen in 0:
nieuwe Tween (object, 'x', Linear.easeOut, object.x, 100, 2, waar); nieuwe Tween (object, 'alpha', Linear.easeOut, object alpha, 0, 2, waar);
Dit is de alternatieve syntaxis van TweenLite:
TweenLite.to (object, 2, x: 100, alpha: 0, easing: Linear.easeOut);
Laten we een nieuwe functie maken waarin we alle tweening-acties kunnen plaatsen. Noem het "flyTo" en plaats het in de klasse Img.
private function flyTo (newX: Number, removeAfter: Boolean, scale: Number = 1): void var tweeningOptions: Object = new Object; tweeningOptions.x = newX; if (removeAfter) tweeningOptions.ease = Linear.easeIn; tweeningOptions.alpha = 0; tweeningOptions.scaleX = tweeningOptions.scaleY = 0.3; tweeningOptions.visible = false; else tweeningOptions.ease = Back.easeOut; tweeningOptions.alpha = 1; tweeningOptions.scaleX = tweeningOptions.scaleY = scale; tweeningOptions.rotation = (Math.random () * 20) - 10; TweenLite.to (dit, 0.4, tweeningOptions);
Er zijn 3 argumenten nodig voor deze functie: de x-waarde die we eerder hebben berekend, of deze na de tween en de schaal moet worden verwijderd. De parameter "removedAfter" wordt gebruikt in de deActive-functie, zodat de zichtbaarheid van de afbeelding kan worden ingesteld op false als het einde van de fase is bereikt. De schaalparameter wordt alleen gebruikt voor de middelste afbeelding; we zullen het iets groter weergeven dan de rest.
Laten we eens kijken naar de tweening-opties voor wanneer de afbeelding uit het werkgebied wordt verwijderd. Eerst kiezen we een versnellingsoptie, in dit geval "Linear.easeIn", die een normale, lineaire beweging geeft. Ten tweede vervagen we de alpha-waarde naar nul, zodat het beeld vervaagt. Vervolgens schalen we het tot slechts een klein percentage van de breedte en hoogte, zodat het kleiner wordt naarmate het het einde bereikt. Ten slotte stellen we de zichtbaarheid in op false als de tween is voltooid.
tweeningOptions.ease = Linear.easeIn; tweeningOptions.alpha = 0; tweeningOptions.scaleX = tweeningOptions.scaleY = 0.3; tweeningOptions.visible = false;
Wanneer een afbeelding actief wordt gemaakt, zijn de opties voor tweening verschillend. We hebben de versnelling ingesteld op "Back.easeOut", zodat de beelden iets te ver lijken te vliegen en dan terugveren; een heel subtiel effect. Vervolgens veranderen we de alpha terug naar 1 en schalen we de afbeelding naar de schaalwaarde die we hebben doorgegeven aan de functie. Ten slotte stellen we een willekeurige rotatie in van -10 tot 10 graden. Als uw beschrijvende tekst niet wordt geladen na deze actie, moet u ervoor zorgen dat het lettertype is ingesloten.
tweeningOptions.ease = Back.easeOut; tweeningOptions.alpha = 1; tweeningOptions.scaleX = tweeningOptions.scaleY = scale; tweeningOptions.rotation = Math.round ((Math.random () * 20) - 10);
Nu moeten we de functies makeActive en deActive updaten, zodat ze gebruik kunnen maken van de nieuwe flyTo-functie.
In de makeActive-functie moeten we een x-waarde aan de afbeelding toevoegen, zodat deze van die oorspronkelijke waarde kan worden getweend. De defaultWidth moet worden ingesteld in de hoofdklasse Gallery en bevat de breedte van de stage.
publieke functie makeActive (positie: Number, direction: Number): void deactivating = false; if (parent == null) x = (direction == 1? main.stageWidth + main.defaultWidth * 2: - main.defaultWidth * 2); alpha = 0; main.imagesClip.addChild (this); visible = true; als (numChildren < 3 ) loadImage(); parent.setChildIndex(this, ( parent.numChildren-1 ) - Math.abs( position ) ); var extra : Number = Math.round( position * ( main.defaultWidth + main.spaceBetween ) ); var newX : Number = ( Math.round( ( main.stageWidth / 2 ) /* - ( main.defaultWidth / 2 )*/ ) + extra ); flyTo( newX, false, ( position == 0 ? 1.2 : 1 ) );
In de deActive-functie is alles wat we moeten toevoegen een moveTo-waarde die de x-waarde bevat waarnaar de afbeelding moet tweenen. Als we dit buiten de breedte van het werkgebied lokaliseren, verdwijnt het beeld net buiten het podium.
public function deActive (direction: Number): void if (! deactivating) active = false; var moveTo: Number = (direction! = 1? main.stageWidth + main.defaultWidth * 2: parent.x - main.defaultWidth * 2); flyTo (moveTo, true); deactivating = true;
Na het updaten van alles hebben we nu een functionele galerij. Om de filmclips te zien verdwijnen van het podium, bekijk de volledige versie.
De definitieve versie heeft nog steeds weinig functionaliteit. De geladen afbeeldingen moeten allemaal hetzelfde formaat hebben en geen groter voorbeeld hebben. U kunt een functie voor formaataanpassing toevoegen en een optie om een groter voorbeeld van de afbeelding te bekijken wanneer erop wordt geklikt. Bovendien kan een optie om naar links of rechts te bladeren met knoppen of met een toetsenbordgebeurtenis worden toegevoegd.
Zodra je het concept begrijpt om klassen te gebruiken om je code te scheiden en te structureren, zal het helpen bij de ontwikkeling en dingen op den duur gemakkelijker maken. Ik hoop dat je het leuk vond om mee te volgen!
