Share
Dans ce tutoriel, nous allons créer une galerie qui affiche tous les fichiers image d'un répertoire donné. Un curseur permet de parcourir facilement les images..
Configurez un nouveau document Flash AS3 et un fichier ActionScript vierge. Nous allons créer la classe principale en premier; nommez-le "Galerie" et enregistrez-le sous "Galerie.as". Voici le code pour configurer la première classe:
package public class Gallery fonction publique Gallery (): void
Dans Flash, nous pouvons maintenant définir cela comme classe de base en entrant le nom dans la zone de saisie sous les paramètres de publication du document. Vous pouvez essayer une "trace ('hello world')" dans la fonction Gallery pour tester son fonctionnement..
Avant de continuer avec la classe principale, il est préférable de commencer avec le curseur. Le code est assez facile à comprendre et pourrait éclairer un peu la façon dont les choses se font dans AS3.
Créez deux nouveaux MovieClips: un curseur et une poignée pour le curseur. Le curseur ou le chercheur n'a pas besoin d'être exporté pour ActionScript, car il suffit d'appliquer certaines fonctions au descripteur. Définissez la classe pour le handle en tant que "Handle". Nous pouvons maintenant créer une nouvelle classe appelée "Handle" et, si elle est enregistrée dans le même répertoire, Flash utilisera automatiquement cette classe pour le handle. Donnez à la fois un nom d'instance tel que "slider" et "theHandle".
Ce qui suit est le code complet pour le handle que je vais expliquer dans les étapes. Il doit être enregistré sous le nom "Handle.as" dans le même répertoire que votre fichier .fla. De cette façon, Flash exécutera le code une fois qu'une instance portant le nom de classe "Handle" sera utilisée..
Accentsconagua
package import flash.display.MovieClip; import flash.events.MouseEvent; import flash.events.Event; public class Handle s'étend sur MovieClip public var goToX: Number = x; curseur var privé: MovieClip = MovieClip (parent) .slider; var var privé: Number = 0; fonction publique Handle (): void buttonMode = true; addEventListener (MouseEvent.MOUSE_DOWN, moveHandle); stage.addEventListener (MouseEvent.MOUSE_UP, stopHandle); fonction privée moveHandle (_e: MouseEvent): void mousePos = mouseX; stage.addEventListener (MouseEvent.MOUSE_MOVE, followHandle); fonction privée stopHandle (_e: MouseEvent): void stage.removeEventListener (MouseEvent.MOUSE_MOVE, followHandle); function privée followHandle (_e: MouseEvent): void var newPos: Number = stage.mouseX - mousePos; var orgX: Nombre = x; si (newPos < slider.x ) goToX = slider.x; else if ( newPos > (slider.x + slider.width) - width) goToX = (slider.x + slider.width) - width; sinon goToX = newPos; x = goToX; if (goToX! = orgX) dispatchEvent (nouvel événement ("glissant", true)); Dans les premières lignes, nous créons quelques variables pour contenir les données que nous pouvons utiliser dans chaque fonction de cette classe. La variable slider contient une référence à l'instance appelée "slider" sur le parent. Nous en avons besoin pour calculer correctement la position x vers laquelle la poignée doit être déplacée. Dans le constructeur, nous définissons "buttonMode" sur true afin qu'un curseur de main apparaisse lors du survol de la poignée. De plus, nous ajoutons deux eventlisteners pour écouter les événements de souris..
public class Handle s'étend sur MovieClip public var goToX: Number = x; curseur var privé: MovieClip = MovieClip (parent) .slider; var var privé: Number = 0; fonction publique Handle (): void buttonMode = true; addEventListener (MouseEvent.MOUSE_DOWN, moveHandle); stage.addEventListener (MouseEvent.MOUSE_UP, stopHandle);
Lorsqu'un événement de souris enfoncé se produit, un écouteur supplémentaire est ajouté. Cet écouteur reste actif tant que le mouvement de traînée n'est pas arrêté et appelle la fonction "followHandle". Il est à nouveau supprimé lorsque le clic de la souris est terminé.
fonction privée moveHandle (_e: MouseEvent): void mousePos = mouseX; stage.addEventListener (MouseEvent.MOUSE_MOVE, followHandle); fonction privée stopHandle (_e: MouseEvent): void stage.removeEventListener (MouseEvent.MOUSE_MOVE, followHandle);
Cette dernière fonction déplace réellement la poignée. La variable "newPos" stocke la nouvelle position vers laquelle le handle doit être déplacé. Si, toutefois, cette position est plus éloignée que l'extrême gauche ou droite du curseur, vous devez définir la position sur la valeur maximale possible. Si le descripteur est déplacé, nous envoyons un nouvel événement personnalisé appelé "glissement", que nous pourrons utiliser ultérieurement pour déplacer les images..
fonction privée followHandle (_e: MouseEvent): void var newPos: Number = stage.mouseX - mousePos; var orgX: Nombre = x; si (newPos < slider.x ) goToX = slider.x; else if ( newPos > (slider.x + slider.width) - width) goToX = (slider.x + slider.width) - width; sinon goToX = newPos; x = goToX; if (goToX! = orgX) dispatchEvent (nouvel événement ("glissant", true)); Si tout s'est bien passé jusqu'à maintenant, vous devriez avoir un joli curseur fonctionnel comme celui ci-dessous. Ajoutez un champ de texte dynamique sous celui-ci qui contiendra le numéro de l'image. Donnez-lui un nom d'occurrence comme "countTxt" afin que nous puissions l'adresser ultérieurement dans ActionScript. Parce qu'il n'y a rien à afficher, je l'ai rempli avec le texte "Loading" qui s'affichera également pendant que le script charge la première image..
Ensuite, nous allons créer le script backend php. Flash ne peut pas lire le contenu d'un répertoire local, nous devons donc transmettre les informations de php à Flash. Nous utiliserons XML car il est facile de générer des sorties avec php et encore plus facile à relire dans AS3.
Ce qui suit est le code backend php, enregistrez-le sous le nom "backend.php". Le code parcourt le répertoire "img" et écrit une ligne XML pour chaque fichier qu'il contient. Avant d’imprimer, nous devons filtrer le "." et "…" répertoires. Comme le répertoire ne contient que des images, aucune vérification supplémentaire n'est nécessaire..
". $ nom de fichier."\ n ";?>
Cela affichera par exemple:
fichier1.jpg
fichier2.jpg
fichier3.jpg
Avant de charger cela dans Flash, créons une classe pour contenir nos images individuellement. De la même manière que nous avons créé la classe Handle, nous pouvons maintenant créer une classe Img. Commencez par créer un MovieClip sur la taille d'affichage de vos images. Donnez-lui une marge de quelques pixels et économisez de l’espace en bas pour le texte de description. Ajoutez un champ de texte dynamique pour la description et attribuez-lui un nom d'instance "descr". Assurez-vous de définir le point d’enregistrement du MovieClip au centre pour pouvoir le redimensionner facilement par la suite. Exportez-le pour ActionScript sous le nom de classe "Img". Supprimez maintenant l'instance de la scène, comme nous l'appellerons directement depuis la bibliothèque..
Nous allons ensuite charger les informations renvoyées par le fichier php dans notre projet Flash à l'aide d'ActionScript. Ouvrez à nouveau la classe Gallery. Le code suivant ajoute deux fonctionnalités à notre projet. Tout d'abord, il crée "imagesClip", un MovieClip vide dans lequel nous stockerons les images réelles plus tard. L'utilisation de "addChild" ajoute ici le MovieClip à la scène. Tout ce qui sera ajouté à imagesClip plus tard apparaîtra également sur la scène. Pour charger les données XML, nous créons un "URLLoader". Cette classe peut récupérer les résultats et exécuter une fonction lorsque les résultats sont en.
package import flash.display.MovieClip; import flash.events.Event; import flash.net.URLLoader; import flash.net.URLRequest; Classe publique Gallery extension MovieClip backend privé var: String = 'http: // localhost /… /backend.php'; private var xmlLoader: URLLoader = new URLLoader; private var xdata: XML; images var publiques: Array = new Array (); public var imagesClip: MovieClip = new MovieClip; fonction publique Gallery (): void imagesClip.y = 180; addChild (imagesClip); xmlLoader.load (new URLRequest (backend + "?" + new Date (). valueOf ())); xmlLoader.addEventListener (Event.COMPLETE, loadImages); fonction privée loadImages (_e: Event): void xdata = new XML (_e.target.data); var i: nombre = 0; pour chaque (var img: XML dans xdata.img) images [i] = new Img (); i ++; imagesClip.addChild (images [i]);
Ici, nous utilisons la fonction de chargement de la classe URLLoader. Pour empêcher la mise en cache des résultats, nous pouvons ajouter une date simple à la fin de l'URL. Eventlistener vérifie quand URLLoader est terminé puis exécute la fonction loadImages.
xmlLoader.load (new URLRequest (backend + "?" + new Date (). valueOf ())); xmlLoader.addEventListener (Event.COMPLETE, loadImages);
Cette fonction suivante parcourt tous les
fonction privée loadImages (_e: Event): void xdata = new XML (_e.target.data); var i: nombre = 0; pour chaque (var img: XML dans xdata.img) images [i] = new Img (); i ++; imagesClip.addChild (images [i]);
Pour donner plus de fonctionnalités à nos instances Img, créez une classe Img et enregistrez-la sous le nom "Img.as". De manière similaire au chargement du XML, nous pouvons charger l'image elle-même et l'afficher à l'intérieur du clip Img. Le chargement ne devrait pas se produire dans le constructeur ou toutes les images essaieraient de se charger en même temps; nous allons créer une fonction séparée pour le faire.
classe publique Img étend MovieClip public var id: Number; private var src: String; private var imageLoader: Loader = new Loader (); var principal privé: Galerie; var privé orgWidth: Number = 0; var privéHauteur: nombre = 0;
Dans le constructeur, nous définissons une référence à la classe principale de la galerie afin de pouvoir ultérieurement accéder aux éléments de la scène ou aux variables et fonctions publiques de la classe principale. La chaîne "load" contiendra le chemin de l'image renvoyée par php, nous l'enregistrerons dans une variable pour pouvoir y accéder plus tard.
fonction publique Img (load: String, m: Gallery): void orgWidth = width; orgHight = hauteur; principal = m; src = charge;
La fonction "loadImage" charge l'image et une fois terminé, lance la fonction "displayImage".
fonction publique loadImage (): void imageLoader.load (new URLRequest ("img /" + src)); imageLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, displayImage); La fonction displayImage vérifie le tableau d'images que nous avons créé et charge l'image suivante. Il définit le lissage sur true sur le chargeur (par défaut, le lissage est défini sur false sur les images chargées dynamiquement). Une fois que vous commencez à redimensionner ou à faire pivoter une image, il est important de définir le lissage afin que l'image conserve sa qualité. Comme le point d’enregistrement du clip Img se trouve au centre, nous devons calculer la position x et y de l’emplacement propice à l’image. Dans mon exemple, j'ai utilisé un répertoire d'images de même largeur et de même hauteur. Si la largeur et la hauteur de l'image chargée sont variables, vous pouvez les redimensionner à la volée. Juste avant de l'ajouter en tant qu'enfant, nous définissons le texte de description sur "src", qui contient le nom de l'image..
fonction privée 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.espaceBetween / 2 - (orgWidth / 2); imageLoader.y = main.spaceBetween / 2 - (orgHeight / 2); descr.text = src; addChild (imageLoader);
Une fois les modifications apportées à la classe Img, nous devons mettre à jour la manière dont les instances sont appelées dans la fonction loadImages de la classe Gallery. Nous devons maintenant passer deux arguments lorsque nous appelons new Img ().
Le premier est le nom du chemin de l'image qui doit être chargée, nous l'obtenons du XML. La seconde est une référence à la classe principale de Gallery; nous pouvons utiliser "this" qui pointe vers la classe dans laquelle nous travaillons actuellement. Au lieu d'ajouter les images avec addChild au conteneur imagesClip, nous allons créer une nouvelle fonction "goTo". Cette fonction déterminera quelles images placer sur l'écran. L'argument que nous devons transmettre est le numéro d'identification de l'image, le même numéro que la clé d'index du tableau d'images. Lorsque les images sont chargées pour la première fois, nous allons définir le focus sur la première image, dont le numéro d'identification est zéro..
fonction privée loadImages (_e: Event): void xdata = new XML (_e.target.data); var i: nombre = 0; pour chaque (var img: XML dans xdata.img) images [i] = new Img (img, this); images [i] .x = 200 * i; images [i] .id = i; i ++; goTo (0);
Pour utiliser la fonction goTo, nous devons d'abord déclarer une variable "imagesToShow". Cela définira la quantité d'images que nous voulons charger en une fois à l'écran. Pour déterminer la direction dans laquelle défile l'utilisateur, nous vérifions simplement si l'image sur laquelle nous allons avoir un numéro d'identification supérieur ou inférieur à la dernière.
fonction privée goTo (imgId: Number): void direction var: Number; if (orgImgId! = imgId) if (imgId> orgImgId) direction = 1; sinon direction = -1;
La prochaine "boucle" met en boucle toutes les images nécessaires à l'écran. Par exemple: si nous définissons imagesToShow sur 5, la boucle passera de -2 à 2. Cela signifie que si nous transmettons la valeur de i à la classe Img, nous pouvons déterminer où elle doit être positionnée (-2 étant très à gauche). , 0 centre et 2 l'extrême droite). Par conséquent, nous pouvons redimensionner les images plus elles sont centrées.
Une vérification supplémentaire est incluse afin de ne pas activer les images non existantes (la première et la dernière s'arrêtent). Pour chacune des images actives, nous allons exécuter la fonction "makeActive", que nous créerons plus tard.
pour (var i: Number = - Math.floor (imagesToShow / 2); i <= Math.floor(imagesToShow/2); i++ ) if( imgId + i < images.length && imgId + i >= 0) images [imgId + i] .makeActive (i, direction);
Juste après avoir placé les images dont nous avons besoin à l’écran, nous vérifierons celles qui ne devraient plus être présentes et les retirerons de la scène. Toutes les images étant ajoutées au conteneur imagesClip, nous pouvons facilement parcourir tous les enfants de ce MovieClip. Si leur identifiant ne fait pas partie de ceux qui devraient être actifs, nous courons le "deActive".
pour (var j: nombre = 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 (direction);
La ligne suivante met à jour le texte du champ de texte dynamique créé précédemment. Étant donné que les identifiants des images commencent à 0, nous ajoutons +1 à l'imgId, de sorte que la première image porte le numéro 1, etc. Nous pouvons obtenir le nombre total d'images en accédant à la longueur du tableau d'images..
countTxt.text = imgId + 1 + "/" + images.length;
Enfin, nous allons définir "orgImgId" afin que la prochaine fois que la fonction est exécutée, la direction en cours de défilement peut être déterminée.
orgImgId = imgId;
Nous avons maintenant besoin des fonctions "makeActive" et "deActive" dans la classe Img. Ceux-ci vont soit ajouter l'image à la scène, ou l'enlever. Pour l'instant, nous allons simplement les ajouter et les placer correctement. Plus tard, nous les interpellerons également à leur place..
La fonction makeActive vérifie d’abord si elle a déjà été ajoutée à imagesClip. Si aucun parent n'est trouvé, il s'ajoute au conteneur imagesClip. Le parent est alors le imagesClip. Ensuite, nous définissons la propriété visible sur true. Lors de la désactivation, nous définissons la valeur sur false. Il est donc normal que nous souhaitions que notre image s'affiche à nouveau lorsqu'elle est activée..
fonction publique makeActive (position: Number, direction: Number): void if (parent == null) main.imagesClip.addChild (this); visible = true;
Il est possible que l'image elle-même ne soit pas encore chargée. Pour vérifier cela, je vérifie si le nombre d'enfants est inférieur à 3 ans. Ce nombre peut dépendre du nombre de formes ou d'autres MovieClips dans votre image. Si vous n’êtes pas sûr de cette méthode, une option plus sûre consiste à déclarer un booléen au début et à le définir sur true dans la fonction displayImage..
if (numChildren < 3 ) loadImage();
Il n'y a pas de profondeur dans AS3, mais une fois que nous avons commencé à redimensionner et à faire pivoter nos images, nous devons nous assurer que l'image au centre est au-dessus des autres. Comme nous avons passé la position en tant qu'argument dans la fonction goTo, nous pouvons maintenant l'utiliser pour définir l'index de l'image dans le imagesClip. L'index d'un enfant peut être comparé à une profondeur, mais sa modification ne posera aucun problème, car les autres MovieClips déplaceront un index vers le haut ou le bas. Cette étape est inutile si vous ne prévoyez pas de superposer les images..
parent.setChildIndex (this, (parent.numChildren-1) - Math.abs (position));
Enfin, nous déterminons la position de l'image. La variable "extra" est utilisée ici pour savoir à quel point l'image actuelle est éloignée du centre. "DefaultWidth" et "spaceBetween" sont des variables publiques définies dans la classe Gallery principale afin que nous puissions y accéder de n'importe où. Comme toutes les images de mon répertoire ont la même largeur, je règle par défaut defaultWidth sur 195 et spaceBetween sur 20. Pour déplacer l'image à la nouvelle position, nous définissons la propriété x sur la nouvelle valeur x trouvée..
var extra: Number = Math.round (position * (main.defaultWidth + main.spaceBetween)); var newX: Number = Math.round ((main.stageWidth / 2)) + extra; x = newX;
La fonction deActive est assez simple, elle change la visibilité en false. La direction est déjà définie comme argument, car nous en aurons besoin plus tard pour savoir dans quelle direction envoyer l'image lorsque vous l'enlevez de la scène..
fonction publique deActive (direction: Number): void visible = false;
A présent, les premières images devraient apparaître sur scène. Il ne manque qu'une fonctionnalité. Le curseur n'est pas encore connecté à la fonction goTo. Cependant, comme nous envoyons déjà un événement personnalisé une fois le descripteur glissé, il n’est pas très difficile de connecter les deux.
Ajoutez la ligne suivante à la fonction constructeur de la galerie. Ce eventlistener exécutera la fonction slide chaque fois que l'événement "glissant" est appelé par le handle.
theHandle.addEventListener ("glissant", glisse); Tout ce dont nous avons besoin de la fonction de glissement est de calculer quelle image doit être affichée au centre en fonction de l'emplacement de la poignée. Dans la fonction "curseur" et "theHandle" sont les noms d'instance que nous avons définis précédemment sur les MovieClips sur la scène. Pour déterminer quelle image aller, nous devons d’abord déterminer le pourcentage de la position de la poignée sur la longueur du curseur. Ensuite, multiplier cela par le nombre total d'images nous amène au bon identifiant d'image.
diapositive de fonction privée (_e: Event): void var pourcent: Number = (theHandle.goToX - slider.x) / (slider.width - theHandle.width); var imgId: Number = Math.round (percent * (images.length - 1)); goTo (imgId);
Si vous avez réussi à suivre jusque-là et à savoir quelles classes importer et quelles variables déclarer (ou suivre les fichiers source), vous devriez déjà avoir un exemple fonctionnel..
Pour terminer ce didacticiel, nous allons ajouter une interpolation aux images à l'aide de TweenLite, un moteur d'interpolation gratuit et léger. Les classes d'interpolation standard fournies par Adobe ne fonctionnent pas bien lorsqu'il se passe beaucoup de choses. Lors de leurs essais, ils bloquaient ou gèlaient beaucoup, mais je n’ai pas encore découvert de tels problèmes avec TweenLite. La syntaxe de TweenLite est très simple. Je vais démontrer ceci en le comparant à une interpolation Flash normale; interpoler un objet de son x actuel à 100 et changer l'alpha en 0:
new Tween (objet, 'x', Linear.easeOut, object.x, 100, 2, vrai); new Tween (objet, 'alpha', Linear.easeOut, object.alpha, 0, 2, vrai);
Maintenant, voici la syntaxe alternative TweenLite:
TweenLite.to (objet, 2, x: 100, alpha: 0, atténuation: Linear.easeOut);
Créons une nouvelle fonction dans laquelle nous pouvons placer toutes les actions d’interpolation. Nommez-le "flyTo" et placez-le dans la classe Img.
fonction privée 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);
Il y a 3 arguments nécessaires pour cette fonction: la valeur x calculée précédemment, si elle doit être supprimée après l'interpolation et l'échelle. Le paramètre "removedAfter" sera utilisé dans la fonction deActive, de sorte que la visibilité de l'image puisse être définie sur false une fois la fin de l'étape terminée. Le paramètre de mise à l'échelle n'est utilisé que pour l'image centrale; nous allons l'afficher légèrement plus grand que le reste.
Examinons les options d'interpolation pour le moment où l'image est supprimée de la scène. Nous choisissons d’abord une option d’atténuation, dans ce cas "Linear.easeIn" qui donne un mouvement linéaire normal. Deuxièmement, nous fondons la valeur alpha à zéro pour que l’image s’efface. Ensuite, nous l’échelonnons jusqu’à un petit pourcentage de sa largeur et de sa hauteur, de sorte qu’il devient plus petit au fur et à mesure qu’il atteint la fin. Enfin, lorsque l'interpolation est terminée, nous définissons la visibilité sur false..
tweeningOptions.ease = Linear.easeIn; tweeningOptions.alpha = 0; tweeningOptions.scaleX = tweeningOptions.scaleY = 0,3; tweeningOptions.visible = false;
Lorsqu'une image est rendue active, les options d'interpolation sont différentes. Nous avons réglé l'assouplissement sur "Back.easeOut" afin que les images semblent voler un peu trop loin, puis rebondissent; un effet très subtil. Ensuite, nous rétablissons l'alpha sur 1 et redimensionnons l'image à la valeur d'échelle que nous avons transmise à la fonction. Enfin, nous définissons une rotation aléatoire de -10 à 10 degrés. Si votre texte de description ne parvient pas à charger après cette action, vous devez vous assurer que la police est incorporée..
tweeningOptions.ease = Back.easeOut; tweeningOptions.alpha = 1; tweeningOptions.scaleX = tweeningOptions.scaleY = scale; tweeningOptions.rotation = Math.round ((Math.random () * 20) - 10);
Nous devons maintenant mettre à jour les fonctions makeActive et deActive afin qu’elles utilisent la nouvelle fonction flyTo..
Dans la fonction makeActive, nous devons ajouter une valeur x à l'image afin qu'elle puisse être interpolée à partir de cette valeur d'origine. DefaultWidth doit être défini dans la classe Gallery principale et contient la largeur de la scène..
fonction publique makeActive (position: Number, direction: Number): void désactivation = false; if (parent == null) x = (direction == 1? main.stageWidth + main.defaultWidth * 2: - main.defaultWidth * 2); alpha = 0; main.imagesClip.addChild (this); visible = true; if (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 ) );
Dans la fonction deActive, il suffit d’ajouter une valeur moveTo contenant la valeur x à laquelle l’image doit être interpolée. Si nous localisons cela en dehors de la largeur de la scène, l'image disparaîtra juste en dehors de la scène.
fonction publique deActive (direction: Number): void if (! désactivant) active = false; var moveTo: Number = (direction! = 1? main.stageWidth + main.defaultWidth * 2: parent.x - main.defaultWidth * 2); flyTo (moveTo, true); désactiver = true;
Après avoir tout mis à jour, nous avons maintenant une galerie fonctionnelle. Pour voir les MovieClips disparaître de la scène consultez la version complète.
La version finale est encore faible sur la fonctionnalité. Les images chargées doivent toutes avoir la même taille et ne pas avoir un aperçu plus grand. Vous pouvez ajouter une fonction de redimensionnement et une option pour afficher un aperçu plus grand de l'image lorsque vous cliquez dessus. De plus, une option permettant de naviguer à gauche ou à droite avec des boutons ou avec un événement de clavier pourrait être ajoutée.
Une fois que vous aurez compris le concept d’utilisation de classes pour séparer et structurer votre code, cela facilitera le développement et facilitera les choses à long terme. J'espère que vous avez aimé suivre!
