Share
Les mises à jour de contenu dans Flash peuvent être difficiles et longues en raison des nombreuses étapes impliquées. La simple lecture du contenu d'un fichier XML signifie qu'il n'est plus nécessaire d'importer de nouveaux actifs et de recompiler le fichier swf. Ce tutoriel couvrira le chargement dynamique d'images à partir d'un fichier XML, puis résoudra les incohérences dans les dimensions de l'image à l'aide de la bibliothèque d'animation GreenSock Tween Max..
Jetons un coup d'œil à une capture d'écran du diaporama final sur lequel nous allons travailler:
Des images d'interface et des exemples sont fournis avec Flash CS4 et Actionscript 2, mais d'autres versions de Flash datant de la version 8 devraient pouvoir suivre sans problème. Ce didacticiel suppose au moins une connaissance pratique d’Actionscript, car je ne vais pas expliquer chaque ligne. Toutefois, même si vous faites simplement un copier-coller, vous devriez pouvoir le faire fonctionner..
Avec un projet de ce type, il est important de tout organiser pour que Flash puisse trouver les éléments dont il a besoin. Donc, créez un dossier de projet sur votre ordinateur où vous pouvez placer TOUS les fichiers liés à ce projet.
Trouvez des images pour votre diaporama. J'ai utilisé plusieurs images de http://www.sxc.hu (sxc_hu_410471_5588.jpg, sxc_hu_1151936_79441078.jpg, sxc_hu_1152040_85122875.jpg, sxc_hu_1154131_54136948.jpg).
Créez un dossier «assets» dans votre dossier de projet. Ouvrez votre éditeur d'images préféré et redimensionnez vos photos pour qu'elles aient toutes la même taille. J'ai redimensionné mes images de sorte que le côté le plus long (hauteur ou largeur) soit de 700 pixels et que le logiciel de traitement d'images conserve la proportion d'images..
Étant donné que les ressources externes ne bénéficient pas d'un préchargeur Flash, ce serait un excellent moment pour optimiser vos images pour des téléchargements rapides. Flash peut charger des fichiers png, jpeg ou gif. Assurez-vous donc que vos images finales sont dans l'un de ces formats et enregistrez-les dans le dossier de ressources que vous venez de créer..
Redimensionnez votre scène pour qu'elle soit un peu plus grande que les images créées à l'étape 2. L'objectif est de vous assurer que les images affichées ne soient jamais masquées dans la présentation finale. J'ai utilisé 800px x 800px pour donner aux images 700px 50px d'espace sur tous les côtés. C’est également le bon moment de modifier la cadence en 30 ips pour des transitions en douceur et de choisir la couleur de fond de votre choix.
Renommez «couche 1» en «arrière-plan». Créez un nouveau calque et appelez-le «contenu». Créez un autre calque et appelez-le «script». C'est une bonne idée de verrouiller ce calque. Tout ce que vous placez sur la couche d’arrière-plan s’affiche derrière le diaporama. Si vous regardez l'exemple, le texte est dans ce calque.
Utilisez l'objet de dessin pour créer un carré blanc sur la scène. Sélectionnez le carré et convertissez-le en symbole (F8). Assurez-vous que le point d’inscription est dans le coin supérieur gauche et appelez le clip «shell». Attribuez au clip le nom d'occurrence «shell_mc»..
Dans «shell_mc», sélectionnez la case blanche et convertissez-la en symbole (F8). Encore une fois, assurez-vous que l'enregistrement est en haut à gauche et nommez le clip «arrière-plan». Donnez au nouveau movieClip le nom d’instance «background_mc». Enfin, nommez le calque "background" et verrouillez-le.
Dans “shell_mc”, créez un nouveau calque appelé “texte”. Utilisez l'outil de texte pour créer du texte statique qui dit «image de chargement». Déplacez le texte vers x: 20 et y: 20 pour qu'il se retrouve sous l'image.
Créez un autre nouveau calque dans «shell_mc» appelé «images». Créez un movieClip vierge appelé «images», puis faites-le glisser de la bibliothèque vers le calque «images» nouvellement créé. Déplacez le clip vers x: 10 et y: 10 et donnez-lui un nom d'occurrence «pics_mc»..
Dans “shell_mc”, créez un calque au-dessus de “images et nommez-le“ masque ”. Créez un nouveau carré, convertissez-le en un clip appelé "masque" et nommez-le "masque_mc". Déplacez le clip vers x: 10 et y: 10.
Cliquez avec le bouton droit sur le calque «masque» et sélectionnez Masque. Assurez-vous que les icônes de calque «masque» et «image» changent pour ressembler à l'exemple.
Dans “shell_mc”, créez un calque au-dessus de “masque” et nommez-le “frame”. Dans la palette d'outils, sélectionnez une couleur de trait et une couleur de remplissage différente, puis créez un carré sur le calque «image». Sélectionnez la zone de remplissage et supprimez-la en ne laissant que la bordure. Double-cliquez sur la bordure pour la sélectionner et convertissez-la en un clip appelé "bordure". Donnez le nom de movieClip et l'instance de «border_mc» et placez-le à x: 10 et y: 10..
Retournez à la timeline racine et sélectionnez «shell_mc». Accédez au panneau de propriétés et tournez la flèche Filtres. Cliquez sur la petite icône "page" et sélectionnez Ombre portée. Cela va ajouter un peu de profondeur.
Nous en avons terminé avec Flash pour le moment et nous devons créer un fichier XML pour garder une trace de nos images. Ouvrez votre éditeur de texte préféré (pratiquement tout ce qui peut modifier le HTML fonctionnera) et créez un nouveau fichier. Enregistrez le fichier dans votre dossier de projet sous le nom content.xml. Nous devons maintenant ajouter une structure au fichier pour que Flash puisse comprendre comment utiliser les informations. Pour ce faire, utilisez le code suivant:
Nous devons maintenant ajouter des chemins d'accès à toutes les images du diaporama (c'est ainsi que Flash va "trouver" les images). À l'intérieur de
Enregistrez le fichier et fermez votre éditeur de texte.
Nous allons utiliser une bibliothèque d'interpolation pour nous aider à animer les transitions entre les images. Ouvrez votre navigateur, allez à http://blog.greensock.com/tweenmaxas2/ et cliquez sur le bouton "Télécharger AS2" en haut. Ouvrez le fichier zip que vous avez téléchargé, puis copiez le dossier "gs" et son contenu dans le dossier de votre projet..
Il est temps de revenir à votre fichier Flash et de commencer à écrire du code ActionScript. Sélectionnez le première image du calque "script" et ouvrez le panneau Actions (Fenêtre> Actions). Les étapes suivantes nécessitent toutes que vous modifiiez le contenu de la fenêtre Actions. À partir de maintenant, je vais simplement parler de "script". En parcourant les étapes ci-dessous, vous verrez tout le script créé à ce stade avec les ajouts les plus récents mis en évidence..
La première chose à faire est d’inclure la classe tween que nous avons téléchargée afin qu’elle soit compilée lors de la création du fichier swf. Ajoutez le code suivant à votre script:
importer gs. *; importer gs.easing. *;
(Lignes supplémentaires: 3-15)
Accentsconagua
importer gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; photos_xml.onLoad = fonction (succès) if (succès) // ----------- chargement réussi else // ----------- problème de chargement, chemin d'accès à vérifier trace ("Erreur lors du chargement de photos_xml"); photos_xml.load (xmlPath); Cela crée un nouvel objet XML qui cible notre fichier "content.xml". Comme les fichiers XML ne se chargent pas instantanément, il est important de vérifier si le chargement est terminé. Nous faisons cela avec le rappel onLoad qui attend le chargement du fichier XML et effectue ensuite une action..
Nous devons d’abord créer un tableau appelé "imageList". Une fois le fichier XML chargé, nous allons affecter les données à la matrice afin de faciliter son accès ultérieur..
(Lignes supplémentaires: 7,10)
importer gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = fonction (succès) if (succès) // ----------- charger avec succès imageList = photos_xml.firstChild.childNodes; else // ----------- problème de chargement, vérifiez le chemin de trace ("Erreur lors du chargement de photos_xml"); photos_xml.load (xmlPath); Créez un objet chargeur d'images à l'aide de la classe movieClipLoader et utilisez des rappels pour lancer des commandes lorsque le chargement du film commence / se termine..
(Lignes supplémentaires: 17-27)
importer gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = fonction (succès) if (succès) // ----------- charger avec succès imageList = photos_xml.firstChild.childNodes; else // ----------- problème de chargement, vérifiez le chemin de trace ("Erreur lors du chargement de photos_xml"); var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = fonction (target_mc: MovieClip, httpStatus: Number): vide loadListener.onLoadComplete = function (cible_mc: MovieClip): vide photos_xml.load (xmlPath); Une fois que l'objet chargeur existe, nous avons besoin d'une fonction pour déterminer les images correctes. Nous devons également ajouter une variable pour suivre l’image en cours. Dans la fonction "loadImage", "loadURL" est défini sur l'attribut XML du chemin de l'image. Définissez un nouveau MovieClip (targetClip) dans lequel un conteneur doit charger l'image et définissez ce conteneur sur une opacité égale à zéro avec la propriété _alpha..
La dernière étape de la fonction consiste à charger l'image dans le conteneur (imageLoader.loadClip). Nous souhaitons également exécuter la commande "loadImage" dès que le chargement du code XML sera terminé..
(Lignes supplémentaires: 11,18,31-38)
importer gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = fonction (succès) if (succès) // ----------- charger avec succès imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- problème de chargement, vérifiez le chemin de trace ("Erreur lors du chargement de photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = fonction (target_mc: MovieClip, httpStatus: Number): vide loadListener.onLoadComplete = function (cible_mc: MovieClip): vide function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("image" + image en cours, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; // charge la nouvelle image imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Construisez une fonction de minuterie qui appellera la fonction "loadImage" toutes les 5000 millisecondes (5 secondes). Activer la minuterie lorsque l’image a terminé chargement, en plaçant l'appel dans le rappel onLoadComplete.
(Lignes supplémentaires: 29,32-34)
importer gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = fonction (succès) if (succès) // ----------- charger avec succès imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- problème de chargement, vérifiez le chemin de trace ("Erreur lors du chargement de photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = fonction (target_mc: MovieClip, httpStatus: Number): vide loadListener.onLoadComplete = function (cible_mc: MovieClip): vide setTimer (); function setTimer () timer = setInterval (loadImage, 5000); function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("image" + image en cours, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Nous devons redimensionner "background_mc", "border_mc" et "mask_mc" afin qu'ils correspondent à la taille de l'image chargée. La bibliothèque TweenMax / TweenLite est assez facile à utiliser. La syntaxe est TweenLite.to (clip cible, durée en secondes, propriétés: valeur, type de facilité); Nous souhaitons également que l'image apparaisse en fondu après son chargement. Par conséquent, définissez _alpha sur une interpolation de 100% à l'intérieur du onLoadComplete..
(Lignes supplémentaires: 25-27,31)
importer gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = fonction (succès) if (succès) // ----------- charger avec succès imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- problème de chargement, vérifiez le chemin de trace ("Erreur lors du chargement de photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = fonction (target_mc: MovieClip, httpStatus: Number): vide TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, facilité: Quad.OutOut ) TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilité: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilité: Quad.easeOut); loadListener.onLoadComplete = fonction (target_mc: MovieClip): vide TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); Régler la minuterie(); function setTimer () timer = setInterval (loadImage, 5000); function removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg); // incrémente l'image actuelle si (currentImage < imageList.length -1) currentImage = currentImage + 1; else currentImage = 0; function loadImage() var loadURL = imageList[currentImage].attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth()); targetClip._alpha = 0; imageLoader.loadClip(loadURL,targetClip); photos_xml.load(xmlPath); Recherchez d'abord le centre de la scène en divisant la hauteur de la scène par 2 et la largeur de la scène par 2. Ensuite, le point d'alignement de la coque se trouvant en haut à gauche, déplacez le clip de moitié à gauche du centre de la scène. la largeur de la coque et la moitié de sa hauteur (les variables clipXTarg et clipYtarg calculent les nombres pour chaque nouvelle image). Il est important d'utiliser la fonction Math.round () pour que le nombre final ne contienne pas de décimale - la position finale est alors forcée à un pixel complet..
(Lignes supplémentaires: 28-30)
importer gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = fonction (succès) if (succès) // ----------- charger avec succès imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- problème de chargement, vérifiez le chemin de trace ("Erreur lors du chargement de photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = fonction (target_mc: MovieClip, httpStatus: Number): vide TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, facilité: Quad.OutOut ) TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilité: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilité: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, facilité: Quad.easeOut); loadListener.onLoadComplete = fonction (target_mc: MovieClip): vide TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); Régler la minuterie(); function setTimer () timer = setInterval (loadImage, 5000); function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("image" + image en cours, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Nous devons trouver l'image précédemment chargée afin qu'elle puisse être supprimée. Évidemment, si l'image en cours se trouve au milieu de la liste, l'image précédente correspond à un moins que le nombre d'images curentImage. Toutefois, si l'image courante est égale à zéro, l'image précédente (en supposant que le diaporama défile chaque image) serait la dernière image du tableau ou imageList.length - 1. Prenez le numéro de l'image précédente et déterminez le chemin de movieClip. le shell d'image précédent.
(Lignes supplémentaires: 32-37)
importer gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = fonction (succès) if (succès) // ----------- charger avec succès imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- problème de chargement, vérifiez le chemin de trace ("Erreur lors du chargement de photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = fonction (target_mc: MovieClip, httpStatus: Number): vide TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, facilité: Quad.OutOut ) TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilité: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilité: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, facilité: Quad.easeOut); if (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; loadListener.onLoadComplete = fonction (target_mc: MovieClip): vide TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); Régler la minuterie(); function setTimer () timer = setInterval (loadImage, 5000); function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("image" + image en cours, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Ensuite, nous voulons faire disparaître l’image précédente, puis quand elle sera nulle, nous devons supprimer complètement le clip de la scène. Le onComplete: removePrevious attend que le fondu soit terminé, puis appelle "removePrevious". Par mesure de sécurité, il est toujours bon de s’assurer que le clip que nous essayons de supprimer existe réellement. Par conséquent, utilisez une instruction "if" pour vérifier que le clip n'est pas indéfini (Le mot de Flash pour n'existe pas).
(Lignes supplémentaires: 38,50-54)
importer gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = fonction (succès) if (succès) // ----------- charger avec succès imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- problème de chargement, vérifiez le chemin de trace ("Erreur lors du chargement de photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = fonction (target_mc: MovieClip, httpStatus: Number): vide TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, facilité: Quad.OutOut ) TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilité: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilité: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, facilité: Quad.easeOut); if (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; TweenLite.to (prevImg, 0.25, autoAlpha: 0, onComplete: removePrevious); loadListener.onLoadComplete = fonction (target_mc: MovieClip): vide TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); Régler la minuterie(); function setTimer () timer = setInterval (loadImage, 5000); function removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg); function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("image" + image en cours, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Nous devons maintenant incrémenter la propriété currentImage de sorte que, une fois le minuteur terminé, Flash sache quelle image charger ensuite. Tout comme pour l'image précédente, si l'image actuelle est un nombre quelconque, à l'exception de la dernière image de la liste, nous en ajoutons simplement un au nombre image en cours. Cependant, si l'image en cours est le dernier élément de la liste, la "prochaine" image reprendra la liste avec la première image de la liste (position zéro dans le tableau)..
(Lignes supplémentaires: 55-59)
importer gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = fonction (succès) if (succès) // ----------- charger avec succès imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- problème de chargement, vérifiez le chemin de trace ("Erreur lors du chargement de photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = fonction (target_mc: MovieClip, httpStatus: Number): vide TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, facilité: Quad.OutOut ) TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilité: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilité: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, facilité: Quad.easeOut); if (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; TweenLite.to (prevImg, 0.25, autoAlpha: 0, onComplete: removePrevious); loadListener.onLoadComplete = fonction (target_mc: MovieClip): vide TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); Régler la minuterie(); function setTimer () timer = setInterval (loadImage, 5000); function removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg); if (currentImage < imageList.length -1) currentImage = currentImage + 1; else currentImage = 0; function loadImage() var loadURL = imageList[currentImage].attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth()); targetClip._alpha = 0; imageLoader.loadClip(loadURL,targetClip); photos_xml.load(xmlPath); La plupart des fonctions Actionscript se produisent presque instantanément, mais le chargement des images nécessite un certain temps. Ce temps dépend de la vitesse de connexion au réseau et de la taille de l’image et peut donc durer plusieurs secondes. Nous devons supprimer le minuteur jusqu'à ce que le chargement de l'image soit terminé afin que le diaporama ait une durée cohérente après le chargement de l'image. Une simple ligne de code (clearInterval) supprime l'intervalle de 5 secondes jusqu'à ce qu'il soit réinitialisé par la nouvelle exécution de setInterval..
(Ligne supplémentaire: 66)
importer gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = fonction (succès) if (succès) // ----------- charger avec succès imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- problème de chargement, vérifiez le chemin de trace ("Erreur lors du chargement de photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = fonction (target_mc: MovieClip, httpStatus: Number): vide TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, facilité: Quad.OutOut ) TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilité: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilité: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, facilité: Quad.easeOut); if (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; TweenLite.to (prevImg, 0.25, autoAlpha: 0, onComplete: removePrevious); loadListener.onLoadComplete = fonction (target_mc: MovieClip): vide TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); Régler la minuterie(); function setTimer () timer = setInterval (loadImage, 5000); function removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg); if (currentImage < imageList.length -1) currentImage = currentImage + 1; else currentImage = 0; function loadImage() var loadURL = imageList[currentImage].attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth()); targetClip._alpha = 0; clearInterval(timer); imageLoader.loadClip(loadURL,targetClip); photos_xml.load(xmlPath); Enfin, nous devons arrêter la chronologie. La fonction par défaut de Flash consiste à lire la timeline en continu, sauf indication contraire. Dans le cas où il n’ya qu’une image sur la ligne de scénario, Flash continuera à essayer d’exécuter le même code encore et encore, ce qui entraînera une tentative de chargement répétitif de la même image..
(Ligne supplémentaire: 72)
importer gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = fonction (succès) if (succès) // ----------- charger avec succès imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- problème de chargement, vérifiez le chemin de trace ("Erreur lors du chargement de photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = fonction (tar
