Share
In questo tutorial, creeremo una galleria che visualizza tutti i file di immagine in una determinata directory. Un cursore è usato per navigare facilmente attraverso le immagini.
Configura un nuovo documento Flash AS3 e un file ActionScript vuoto. Creeremo prima la classe principale; chiamalo "Gallery" e salvalo come "Gallery.as". Di seguito è riportato il codice per impostare la prima classe:
package public class Gallery public function Gallery (): void
In Flash possiamo ora impostare questa come classe base inserendo il nome nella casella di immissione sotto le impostazioni Pubblica del documento. Puoi provare una "traccia ('ciao mondo')" nella funzione Galleria per verificare se funziona.
Prima di continuare con la classe principale, è meglio iniziare con il cursore. Il codice è abbastanza facile da capire e potrebbe far luce su come sono fatte le cose in AS3.
Crea due nuovi Movie Clip: un cursore e una maniglia per il cursore. Il cursore o il cercatore non devono essere esportati per ActionScript poiché è necessario solo applicare alcune funzioni all'handle. Imposta la classe per l'handle come "Handle". Ora possiamo creare una nuova classe chiamata "Handle" e, se salvata nella stessa directory, Flash utilizzerà automaticamente questa classe per l'handle. Assegna un nome di istanza come "slider" e "theHandle".
Quello che segue è il codice completo per l'handle che spiegherò nei passaggi. Dovrebbe essere salvato come "Handle.as" nella stessa directory di .fla. In questo modo, Flash eseguirà il codice quando viene utilizzata un'istanza con un nome di classe "Handle".
Accentsconagua
package import flash.display.MovieClip; import flash.events.MouseEvent; import flash.events.Event; public class Handle extends MovieClip public var goToX: Number = x; cursore var privato: MovieClip = MovieClip (parent) .slider; private var mousePos: Number = 0; funzione pubblica Handle (): void buttonMode = true; addEventListener (MouseEvent.MOUSE_DOWN, moveHandle); stage.addEventListener (MouseEvent.MOUSE_UP, stopHandle); funzione privata 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; se (newPos < 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 (new Event ("sliding", true)); Nelle prime righe creiamo alcune variabili per contenere i dati che possiamo usare in ogni funzione in questa classe. La variabile slider contiene un riferimento all'istanza chiamata "slider" sul genitore. Ne abbiamo bisogno per calcolare correttamente la posizione x a cui deve essere spostato il manico. Nel costruttore impostiamo "buttonMode" su true in modo tale che un cursore a mano si mostri quando si passa il mouse sopra la maniglia. Inoltre, aggiungiamo due eventlistener per ascoltare gli eventi del mouse.
public class Handle extends MovieClip public var goToX: Number = x; cursore var privato: MovieClip = MovieClip (parent) .slider; private var mousePos: Number = 0; funzione pubblica Handle (): void buttonMode = true; addEventListener (MouseEvent.MOUSE_DOWN, moveHandle); stage.addEventListener (MouseEvent.MOUSE_UP, stopHandle);
Una volta che si verifica un evento mouse down, viene aggiunto un listener extra. Questo ascoltatore rimane attivo finché il movimento di trascinamento non viene interrotto e chiama la funzione "followHandle". Viene rimosso di nuovo quando il clic del mouse è finito.
funzione privata moveHandle (_e: MouseEvent): void mousePos = mouseX; stage.addEventListener (MouseEvent.MOUSE_MOVE, followHandle); private function stopHandle (_e: MouseEvent): void stage.removeEventListener (MouseEvent.MOUSE_MOVE, followHandle);
Quest'ultima funzione sposta effettivamente la maniglia in giro. La variabile "newPos" memorizza la nuova posizione a cui deve essere spostata la maniglia. Se, tuttavia, questa posizione è oltre l'estrema sinistra o destra del cursore, la posizione deve essere impostata sul valore massimo possibile. Se l'handle viene spostato, inviamo un nuovo evento personalizzato chiamato "sliding", che possiamo utilizzare in seguito per spostarci tra le immagini.
funzione privata followHandle (_e: MouseEvent): void var newPos: Number = stage.mouseX - mousePos; var orgX: Number = x; se (newPos < 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 (new Event ("sliding", true)); Se tutto è andato bene fino ad ora, dovresti avere un bel cursore funzionale come quello qui sotto. Aggiungi un campo di testo dinamico al di sotto di esso che manterrà il numero dell'immagine. Dagli un nome di istanza come "countTxt" in modo che possiamo affrontarlo in seguito in ActionScript. Perché non c'è niente da visualizzare, ma l'ho riempito con il testo "Caricamento" che verrà visualizzato anche mentre lo script carica la prima immagine.
Successivamente creeremo lo script di back-end php. Flash non può leggere il contenuto di una directory locale, quindi è necessario passare le informazioni da php a Flash. Useremo XML perché è facile da produrre con php e ancora più facile da leggere di nuovo in AS3.
Quello che segue è il codice di backend php, salvalo come "backend.php". Il codice scorre attraverso la directory "img" e scrive una riga di XML per ciascun file. Prima di stampare è necessario filtrare il "." e "..." directory. Poiché la directory contiene solo immagini, non è necessario eseguire ulteriori verifiche.
". $ nomefile".\ n ";?>
Questo produrrà per esempio:
file1.jpg
file2.jpg
file3.jpg
Prima di caricarlo in Flash, creiamo un corso per conservare le immagini singolarmente. Allo stesso modo abbiamo creato la classe Handle, ora possiamo creare una classe Img. Inizia con la creazione di un Movie Clip relativo alle dimensioni che desideri vengano visualizzate. Dagli un margine di pochi pixel e salva uno spazio in basso per il testo della descrizione. Aggiungi un campo di testo dinamico per la descrizione e assegnagli un nome di istanza di "descr". Assicurati di impostare il punto di registrazione del Movie Clip al centro in modo da poterlo scalare facilmente in un secondo momento. Esportalo per ActionScript sotto il nome della classe "Img". Ora elimina l'istanza dallo stage come la chiameremo direttamente dalla libreria.
Quindi caricherete le informazioni che il file php restituirà nel nostro progetto Flash usando ActionScript. Apri di nuovo la classe Gallery. Il codice seguente aggiunge due funzionalità al nostro progetto. Innanzitutto, crea "imagesClip", un Movie Clip vuoto in cui archiviamo le immagini reali in un secondo momento. Usando "addChild" qui aggiungi il Movie Clip allo stage. Qualsiasi cosa aggiunto a imagesClip successivamente apparirà anche sul palco. Per caricare effettivamente i dati xml, creiamo un "URLLoader". Questa classe può recuperare i risultati ed eseguire una funzione quando i risultati sono in.
package import flash.display.MovieClip; import flash.events.Event; import flash.net.URLLoader; import flash.net.URLRequest; public class Gallery estende MovieClip 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 = new MovieClip; public function Gallery (): void imagesClip.y = 180; addChild (imagesClip); xmlLoader.load (new URLRequest (backend + "?" + new Date (). valueOf ())); xmlLoader.addEventListener (Event.COMPLETE, loadImages); private function loadImages (_e: Event): void xdata = new XML (_e.target.data); var i: Number = 0; per ogni (var img: XML in xdata.img) images [i] = new Img (); i ++; imagesClip.addChild (images [i]);
Qui usiamo la funzione di caricamento della classe URLLoader. Per evitare la memorizzazione nella cache dei risultati, è possibile aggiungere una data semplice alla fine dell'URL. Eventlistener controlla quando URLLoader è terminato e quindi esegue la funzione loadImages.
xmlLoader.load (new URLRequest (backend + "?" + new Date (). valueOf ())); xmlLoader.addEventListener (Event.COMPLETE, loadImages);
Questa prossima funzione scorre in tutto il
funzione privata loadImages (_e: Event): void xdata = new XML (_e.target.data); var i: Number = 0; per ogni (var img: XML in xdata.img) images [i] = new Img (); i ++; imagesClip.addChild (images [i]);
Per dare alle nostre istanze Img più funzionalità, crea una classe Img e salvala come "Img.as". In modo simile al caricamento dell'XML possiamo caricare l'immagine stessa e mostrarla all'interno del Movie Clip di Img. Il caricamento non dovrebbe avvenire nel costruttore o tutte le immagini proverebbero a caricarsi nello stesso momento; creeremo una funzione separata per fare ciò.
Img di classe pubblica estende MovieClip public var id: Number; private var src: String; private var imageLoader: Loader = new Loader (); private var main: Galleria; private var orgWidth: Number = 0; private var orgHeight: Number = 0;
Nel costruttore, impostiamo un riferimento alla classe Gallery principale in modo da poter accedere successivamente agli elementi sullo stage o alle variabili e alle funzioni pubbliche della classe principale. La stringa "load" conterrà il percorso dell'immagine restituita da php, la salveremo in una variabile in modo che possiamo accedervi in seguito.
funzione pubblica Img (load: String, m: Gallery): void orgWidth = width; orgHeight = altezza; principale = m; src = load;
La funzione "loadImage" carica l'immagine e al termine esegue la funzione "displayImage".
public function loadImage (): void imageLoader.load (new URLRequest ("img /" + src)); imageLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, displayImage); La funzione displayImage controlla l'array di immagini che abbiamo creato e carica l'immagine successiva. Imposta lo smoothing su true nel Loader (per impostazione predefinita, smoothing è impostato su false su immagini caricate dinamicamente). Una volta iniziato il ridimensionamento o la rotazione di un'immagine, è importante impostare la levigatura in modo che l'immagine mantenga la sua qualità. Poiché il punto di registrazione del Movie Clip di Img è al centro, dobbiamo calcolare la posizione xey di dove posizionare l'immagine stessa. Nel mio esempio ho usato una directory di immagini con la stessa larghezza e altezza. Se la larghezza e l'altezza dell'immagine caricata sono variabili, questo è il posto dove ridimensionarlo al volo. Appena prima di aggiungerlo come un bambino impostiamo il testo della descrizione su "src", che contiene il nome dell'immagine.
private function 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.spaceBetween / 2 - (orgHeight / 2); descr.text = src; addChild (imageLoader);
Dopo le modifiche apportate alla classe Img, è necessario aggiornare il modo in cui le istanze vengono chiamate nella funzione loadImages della classe Gallery. Ora dobbiamo passare due argomenti quando si chiama new Img ().
Il primo è il nome del percorso dell'immagine che deve essere caricata, otteniamo questo dall'xml. Il secondo è un riferimento alla classe Gallery principale; possiamo usare "questo" che punta alla classe in cui stiamo lavorando. Invece di aggiungere le immagini con addChild al contenitore imagesClip creeremo una nuova funzione "goTo". Questa funzione determinerà quali immagini posizionare sullo schermo. L'argomento che dobbiamo passare è il numero ID dell'immagine, lo stesso numero della chiave dell'indice nell'array delle immagini. Quando le immagini vengono caricate per la prima volta, metteremo a fuoco la prima immagine, di cui il numero ID è zero.
funzione privata loadImages (_e: Event): void xdata = new XML (_e.target.data); var i: Number = 0; per ogni (var img: XML in xdata.img) images [i] = new Img (img, this); immagini [i] .x = 200 * i; immagini [i] .id = i; i ++; goTo (0);
Per utilizzare la funzione goTo, dobbiamo prima dichiarare una variabile "imagesToShow". Questo imposterà la quantità di immagini che vogliamo caricare contemporaneamente sullo schermo. Per determinare la direzione in cui l'utente sta scorrendo, controlliamo semplicemente se l'immagine che avremo avrà un numero di identificazione più alto o più basso dell'ultimo.
funzione privata goTo (imgId: Number): void var direction: Number; if (orgImgId! = imgId) if (imgId> orgImgId) direction = 1; else direction = -1;
Il prossimo "for loop" scorre tutte le immagini necessarie sullo schermo. Ad esempio: se impostiamo imagesToShow su 5, verrà eseguito il ciclo da -2 a 2. Ciò significa che se passiamo il valore di i alla classe Img possiamo determinare dove sullo schermo deve essere posizionato (-2 è molto a sinistra , 0 centro e 2 all'estrema destra). Pertanto, siamo in grado di ridimensionare le immagini più grande e più centrale sono posizionate.
È incluso un controllo aggiuntivo per non attivare le immagini non esistenti (si interrompe al primo e all'ultimo). Per ognuna delle immagini attive eseguiremo la funzione "makeActive", che creeremo in seguito.
per (var i: Number = - Math.floor (imagesToShow / 2); i <= Math.floor(imagesToShow/2); i++ ) if( imgId + i < images.length && imgId + i >= 0) immagini [imgId + i] .makeActive (i, direzione);
Subito dopo aver posizionato le immagini di cui abbiamo bisogno sullo schermo, controlleremo quali non dovrebbero essere più lì e far uscire quelli dal palco. Poiché tutte le immagini vengono aggiunte al contenitore imagesClip, possiamo facilmente passare in rassegna tutti i bambini di quel Movie Clip. Se il loro id non è all'interno di quelli che dovrebbero essere attivi, eseguiamo "deActive".
per (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 (direzione);
La riga successiva aggiorna il testo del campo di testo dinamico che abbiamo creato in precedenza. Poiché gli ID delle immagini iniziano il loro conteggio a 0 aggiungiamo + 1 all'imgId in modo che la prima immagine sia effettivamente il numero 1 ecc. Possiamo ottenere il numero totale di immagini dall'accesso alla lunghezza dell'array di immagini.
countTxt.text = imgId + 1 + "/" + images.length;
Infine, imposteremo "orgImgId" in modo che la prossima volta che si esegue la funzione, si possa determinare la direzione da scorrere.
orgImgId = imgId;
Ora abbiamo bisogno delle funzioni "makeActive" e "deActive" nella classe Img. Questi aggiungeranno l'immagine allo stage o la rimuoveranno. Per ora li aggiungeremo e li posizioneremo correttamente. In seguito li twutereremo anche al loro posto corretto.
La funzione makeActive controlla innanzitutto se è già stata aggiunta a imagesClip. Se non è stato trovato alcun genitore, si aggiunge al contenitore imagesClip. Il genitore è quindi il imagesClip. Quindi impostiamo la proprietà visible su true. Quando disattiviamo, lo impostiamo su false, quindi è normale che desideriamo che la nostra immagine ritorni quando è resa attiva.
funzione pubblica makeActive (posizione: numero, direzione: numero): void if (parent == null) main.imagesClip.addChild (this); visible = true;
C'è una possibilità che l'immagine stessa non sia ancora stata caricata. Per verificare questo, controllo se la quantità di bambini è inferiore a 3. Questo numero può dipendere dalla quantità di forme o altri filmati presenti nella tua Img. Se non sei sicuro di questo metodo, un'opzione più sicura sarebbe dichiarare un booleano all'inizio e impostarlo su true nella funzione displayImage.
se (numChildren < 3 ) loadImage();
Non c'è profondità in AS3, ma una volta iniziato a ridimensionare e ruotare le nostre immagini, dobbiamo assicurarci che l'immagine al centro sia sopra le altre. Poiché abbiamo passato la posizione come argomento nella funzione goTo, ora possiamo usarlo per impostare l'indice dell'immagine in imagesClip. L'indice di un bambino può essere paragonato ad una profondità, ma non ci saranno problemi quando lo si cambia poiché gli altri clip mobili spostano un indice in alto o in basso. Questo passaggio non è necessario se non si intende sovrapporre le immagini.
parent.setChildIndex (this, (parent.numChildren-1) - Math.abs (posizione));
Infine, determiniamo la posizione dell'immagine. La variabile "extra" è usata qui per scoprire quanto l'immagine attuale è lontana dal centro. "DefaultWidth" e "spaceBetween" sono variabili pubbliche impostate nella classe Gallery principale in modo che possiamo accedervi da qualsiasi luogo. Poiché tutte le immagini nella mia directory hanno la stessa larghezza, imposto defaultWidth a 195 e spazioBra a 20. Per spostare effettivamente l'immagine nella nuova posizione, impostiamo la proprietà x sul valore x appena trovato.
var extra: Number = Math.round (posizione * (main.defaultWidth + main.spaceBetween)); var newX: Number = Math.round ((main.stageWidth / 2)) + extra; x = newX;
La funzione deActive è piuttosto semplice, cambia la visibilità a false. La direzione è già impostata come argomento poiché in seguito avremo bisogno di sapere in quale direzione inviare l'immagine quando la si toglie dal palco.
public function deActive (direction: Number): void visible = false;
Ormai, le prime poche immagini dovrebbero apparire sul palco. C'è solo una funzionalità ancora mancante. Il cursore non è ancora connesso alla funzione goTo. Tuttavia, poiché abbiamo già inviato un evento personalizzato una volta trascinato il manico, non è molto difficile collegare i due.
Aggiungi la seguente riga alla funzione di costruzione di Gallery. Questo eventlistener eseguirà la funzione di scorrimento ogni volta che l'handle "sliding" chiama l'handle.
theHandle.addEventListener ("sliding", slide); Tutto ciò di cui abbiamo bisogno è la funzione di scorrimento per calcolare quale immagine deve essere mostrata al centro a seconda di dove si trova la maniglia. Nella funzione "slider" e "theHandle" sono i nomi di istanza che abbiamo impostato in precedenza sui Movie Clip sul palco. Per scoprire a quale immagine andare, per prima cosa determiniamo la percentuale della posizione della maniglia sulla lunghezza del cursore. Quindi, moltiplicandolo per il totale delle immagini, ci porta all'ID immagine corretto.
diapositiva di funzione privata (_e: Event): void var percento: Number = (theHandle.goToX - slider.x) / (slider.width - theHandle.width); var imgId: Number = Math.round (percent * (images.length - 1)); goTo (imgId);
Se sei riuscito a seguire fino a questo punto e hai tenuto traccia di quali classi importare e quali variabili dichiarare (o seguire i file sorgente) dovresti avere un esempio funzionante.
Per completare questo tutorial, aggiungeremo tweening alle immagini utilizzando TweenLite, un motore di interpolazione libero e leggero. Le classi di tweening standard fornite da Adobe non si comportano bene quando c'è molto da fare. Quando li hanno provati, si sono bloccati o bloccati molto, mentre non ho ancora scoperto questi problemi con TweenLite. La sintassi di TweenLite è molto semplice. Lo dimostrerò confrontandolo con una normale interpolazione Flash; interpolazione di un oggetto dalla sua corrente x a 100 e modifica dell'alfa a 0:
nuovo Tween (oggetto, 'x', Linear.easeOut, object.x, 100, 2, true); nuovo Tween (oggetto, 'alpha', Linear.easeOut, object.alpha, 0, 2, true);
Ora ecco la sintassi alternativa di TweenLite:
TweenLite.to (oggetto, 2, x: 100, alpha: 0, easing: Linear.easeOut);
Creiamo una nuova funzione in cui possiamo posizionare tutte le azioni di interpolazione. Chiamalo "flyTo" e inseriscilo nella classe Img.
funzione privata 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 (this, 0.4, tweeningOptions);
Ci sono 3 argomenti necessari per questa funzione: il valore x che abbiamo calcolato in precedenza, se debba essere rimosso dopo l'interpolazione e la scala. Il parametro "removedAfter" verrà utilizzato nella funzione deActive, quindi la visibilità dell'immagine può essere impostata su false una volta raggiunta la fine dello stage. Il parametro di ridimensionamento è utilizzato solo per l'immagine centrale; lo mostreremo leggermente più grande del resto.
Controlliamo le opzioni di interpolazione per quando l'immagine viene rimossa dallo stage. Per prima cosa scegliamo un'opzione di andamento, in questo caso "Linear.easeIn" che dà un movimento normale e lineare. In secondo luogo, dissolviamo il valore alfa a zero in modo che l'immagine svanisca. Quindi lo ridimensioniamo a una piccola percentuale della sua larghezza e altezza in modo che diventi più piccolo quando raggiunge la fine. Infine, quando l'interpolazione è completata, impostiamo la visibilità su false.
tweeningOptions.ease = Linear.easeIn; tweeningOptions.alpha = 0; tweeningOptions.scaleX = tweeningOptions.scaleY = 0.3; tweeningOptions.visible = false;
Quando un'immagine è resa attiva, le opzioni di interpolazione sono diverse. Impostiamo l'andamento su "Back.easeOut" in modo che le immagini sembrino volare leggermente troppo lontano e quindi rimbalzare; un effetto molto sottile. Quindi cambiamo l'alfa di nuovo a 1 e ridimensioniamo l'immagine al valore di scala che abbiamo passato alla funzione. Infine, impostiamo una rotazione casuale di -10 a 10 gradi. Se il testo della descrizione non viene caricato dopo questa azione, è necessario assicurarsi che il carattere sia incorporato.
tweeningOptions.ease = Back.easeOut; tweeningOptions.alpha = 1; tweeningOptions.scaleX = tweeningOptions.scaleY = scale; tweeningOptions.rotation = Math.round ((Math.random () * 20) - 10);
Ora dobbiamo aggiornare le funzioni makeActive e deActive in modo che utilizzino la nuova funzione flyTo.
Nella funzione makeActive è necessario aggiungere un valore x all'immagine in modo che possa essere interpolato da quel valore originale. La larghezza predefinita deve essere impostata nella classe Gallery principale e contiene la larghezza dello stage.
funzione pubblica makeActive (posizione: numero, direzione: numero): void disattivazione = falso; if (parent == null) x = (direzione == 1? main.stageWidth + main.defaultWidth * 2: - main.defaultWidth * 2); alfa = 0; main.imagesClip.addChild (this); visible = true; se (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 ) );
Nella funzione deActive tutto ciò che dobbiamo aggiungere è un valore moveTo che contiene il valore x a cui deve essere interpolata l'immagine. Se lo posizioniamo all'esterno della larghezza dello stage, l'immagine scomparirà appena fuori dal palco.
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); disattivazione = true;
Dopo aver aggiornato tutto, ora abbiamo una galleria funzionale. Per vedere i Movie Clip che scompaiono dallo stage, controlla la versione completa.
La versione finale ha ancora poca funzionalità. Le immagini caricate devono essere tutte della stessa dimensione e non hanno un'anteprima più grande. È possibile aggiungere una funzione di ridimensionamento e un'opzione per visualizzare un'anteprima più grande dell'immagine quando si fa clic. Inoltre, è possibile aggiungere un'opzione per navigare a sinistra o destra con i pulsanti o con un evento di tastiera.
Una volta compreso il concetto di utilizzare le classi per separare e strutturare il codice, ciò contribuirà allo sviluppo e renderà le cose più facili a lungo termine. Spero ti sia piaciuto seguirlo!
