Dans ce document, son premier tutoriel chez Flashtuts +, Yanko vous guide dans la création d’une liste dynamique de «produits phares» à l’aide d’anciens favoris ActionScript 3.0 et XML. Il adoucit également les choses en utilisant la classe Caurina Tweener. Prendre plaisir…
Étape 1: Structure du fichier
Nous commencerons par examiner la structure de fichier de notre projet. Le dossier "caurina" est le dossier de la classe Tweener. Vous pouvez télécharger tweener à partir d'ici: Tweener. Dans le dossier "img" nous allons stocker nos images qui seront utilisées dans l'application. Les images dans mon cas auront des dimensions de 60px de large et 55px de haut.
Étape 2: XML
Créons le fichier XML. Ouvrez votre éditeur de texte et écrivez:
Enregistrez-le sous "data.xml" dans le dossier "projet".
Étape 3: L'idée
L'idée est de passer des paramètres à la fonction principale "showData". Ces paramètres sont les valeurs "loopMin" et "loopMax" (voir le code) d'une boucle for (). Ensuite, nous filtrerons les résultats avec une instruction if () et leur montrerons.
Étape 4: commencer
Créer un nouveau fichier Flash (ActionScript 3).
Définissez la taille de la scène sur 350x350px
Étape 5: Contexte
Avec l’outil Rectangle (R), tracez une forme de dimensions 350x350px, tapez linéaire et couleurs # d3d3d3, # f1f1f1. Utilisez l'outil de transformation du dégradé (F) pour ajuster le dégradé..
Cliquez sur la forme, puis ouvrez la fenêtre d'alignement et assurez-vous que le bouton "Vers la scène" est activé. Alignez votre forme verticalement et horizontalement.
Créez un nouveau calque, puis avec l’outil rectangle, tracez une forme 350x40px avec la couleur # 333333 et alignez-la vers le bas..
Sélectionnez ensuite les deux formes et appuyez sur F8 ou sur Modifier> Convertir en symbole, définissez le type sur le clip et nommez-le "principal"..
Étape 6: Ajout de boutons
Double-cliquez sur le clip pour l'ouvrir, puis renommez le calque 1 en "arrière-plan" et verrouillez-le. Créez un nouveau calque et nommez-le "btns". Sélectionnez l'outil Ovale (O), maintenez la touche Maj enfoncée et faites glisser un cercle de couleur de trait: # 0098FF et remplissez la couleur: #FFFFFF dimensions 20X20px. Cliquez sur le trait et changez la hauteur du trait en 3.
Sélectionnez votre forme et appuyez sur F8 pour la convertir en symbole. Choisissez le type "Button" et nommez-le "btn".
Double-cliquez sur le bouton puis cliquez avec le bouton droit de la souris sur le cadre "Sur". Sélectionnez Insérer une image clé.
Sélectionnez la couleur de remplissage et remplacez-la par # d3d3d3.
Insérez l'image clé dans le cadre inférieur et changez la couleur de remplissage en # 999999. Retournez au clip "principal" et sélectionnez le bouton. Changez son nom d'instance en "btn1". Ensuite, faites glisser le bouton vers le bas, faites glisser vers la droite tout en maintenant "Alt" et relâchez pour créer un deuxième bouton. Changez le nom de l'instance en "btn2".
Répétez la procédure une fois de plus pour ajouter un troisième bouton à l’étape et changer son nom d’instance en "btn3". Ouvrez la fenêtre Align et désactivez le bouton "To stage". Sélectionnez les trois boutons et alignez-les horizontalement et verticalement. Activez à nouveau "Stade" et alignez-les verticalement.
Étape 7: Articles
Créez un nouveau calque et nommez-le "éléments". Dessinez dessus un rectangle de 320x90px couleur: type: linéaire # D3D3D3, # BBBBBB. Encore une fois, utilisez l'outil de transformation de dégradé pour ajuster le dégradé. Sélectionnez la forme et alignez-la verticalement sur la scène. Appuyez sur F8, tapez: Movie Clip et nommez-le "item" - sélectionnez en haut au milieu comme point d'alignement.
Double-cliquez sur l'élément du clip. Renommez le "calque 1" en "fond". Créez un nouveau calque et nommez-le "txt". Sélectionnez l'outil de texte (T) et définissez le type de texte sur Texte dynamique. Ensuite, dessinez un champ de texte en définissant le nom de l'instance sur "txt". Tapez du texte et définissez ces propriétés:
Créez un nouveau calque et nommez-le "prix". Avec l'outil de texte, dessinez un autre champ de texte et définissez son nom d'occurrence sur "prix". Définissez la couleur du texte sur: # 0099FF.
Maintenant, nous allons créer un nouveau bouton…
Créez un nouveau calque et nommez-le "btn_more". Dessinez maintenant une forme avec l’outil rectangle de 60x20px avec la couleur: # 666666. Sélectionnez-le et appuyez sur F8. Choisissez type: Button et attribuez-lui un nom "more". Changez également son nom d'instance en "plus". Ouvrez le bouton et ajoutez un nouveau calque, appelez-le texte. Sélectionnez l'outil de texte et utilisez-le pour dessiner un champ de texte, tapez: texte statique. Entrez le texte "plus" dans le champ, couleur: #FFFFFF; taille: 12; format: aligner le centre;.
Insérez des images clés dans les cadres Supérieur et Inférieur et modifiez la couleur à votre guise. J'utilise: sur: # 999999; vers le bas: # 333333;
Revenez au clip principal, sélectionnez l'élément et modifiez son nom d'occurrence en élément1. Maintenez la touche Alt enfoncée, faites glisser l'élément vers le bas pour ajouter une copie à la scène. Nommez le second nom d'instance d'élément en "item2". Ajoutez une autre copie et remplacez le nom de l'instance par "item3". Alignez les éléments et vous devriez avoir quelque chose comme ça:
Étape 8: masque
Nous allons maintenant fabriquer un masque pour les objets. Créez un nouveau calque, nommez-le "masque" et dessinez dessus un rectangle de 350x310px.
Cliquez avec le bouton droit sur le calque de masque, puis sélectionnez masque:
Créez un nouveau calque, nommez-le "actions" et collez le code présenté à l'étape suivante..
Étape 9: Actionscript
Regardez le code complet:
// importer Tweener import caurina.transitions. *; // // var xmlPath: String = "data.xml"; // contient le lien vers le fichier xml var data_xml: XML; // objet XML var data_Req: URLRequest = new URLRequest (xmlPath); // Requête URL var data_Loader: URLLoader = new URLLoader ( ); // Loader var longueur_xml: Nombre; // longueur xml // // var time: Number = 5000; // 5000 = 5 secondes var timer: Timer = new Timer (time); // timer // // var imgPath: String; // chemin de l'image pour le premier élément var imgPath2: String; // chemin de l'image pour le deuxième élément var imgPath3: String; // chemin de l'image pour le troisième élément var item1Y: Number = item1.y; // item 1 y valeur var item2Y: Number = item2.y; // item 2 y valeur var item3Y: Number = item3.y; // item 3 y valeur // // var currentBtn: Number = 1; // avec lequel btn est appuyé var min: Number; // valeur min utilisée dans la fonction hideNshow () var max: Nombre; // valeur max utilisée dans la fonction hideNshow () // // //---------------------------------------------------- function xmlLoaded (event: Event): void // xml Fonction chargée data_xml = new XML (data_Loader.data); // récupère le fichier XML de prom. xml_length = data_xml.item.length (); // longueur xml longueur = xml_length- 6; // définition de la valeur minimale au deuxième résultat max = xml_length-2; // définition de la vélocité maximale à la deuxième fonction résultante showData (loopMin: Number, loopMax: Number) // Fonction principale var i: Number; // var pour pour loop var loopMaxResult = loopMax-2; // var pour le troisième résultat var loopSecondResult = loopMax-3; // var pour le deuxième résultat de (i = loopMin; i imgPath = data_xml.item [i]. @ img; // récupère l'URL img de xml var imgRequest: URLRequest = new URLRequest (imgPath); // requête URL var imgLoader: Loader = new Loader (); // image Loader imgLoader. load (imgRequest); // charge l'image item1.addChild (imgLoader); // ajoute la première image à l'élément 1 imgLoader.x = -150; // image x valeur imgLoader.y = 15; // image y valeur // // fin if if if (i == loopSecondResult) // deuxième résultat fData (item2, i); // appel de la fonction fData pour remplir l'élément 2 // imgPath2 = data_xml.item [i]. @ img; // récupère l'URL img de xml var imgRequest2: URLRequest = new URLRequest (imgPath2); // demande d'URL var imgLoader2: Loader = new Loader (); // image Loader imgLoader2. load (imgRequest2); // charge l'image item2.addChild (imgLoader2); // ajoute la première image à l'élément 2 imgLoader2.x = -150; // image x valeur imgLoader2.y = 15; // image y valeur // // fin if if if (i == loopMaxResult) // troisième résultat fData (item3, i); // appel de la fonction fData pour remplir l'élément 3 // imgPath3 = data_xml.item [i]. @ img; // récupère l'URL img de xml var imgRequest3: URLRequest = new URLRequest (imGPath3); // demande d'URL var imgLoader3: Loader = new Loader (); // image Loader imgLoader3. load (imgRequest3); // charge l'image item3.addChild (imgLoader3); // ajoute la première image à l'élément 3 imgLoader3.x = -150; // image x valeur imgLoader3.y = 15; // image y valeur // // end if // end pour la fonction fData (item: MovieClip, iValue: int) // fonction qui remplit les données dans les éléments var moreURL: String; // url du bouton more item.txt.text = data_xml.item [iValue]. @ title; // renseigner le titre de l'élément item.price.text = data_xml.item [iValue]. @ price; // remplir le prix de l'élément moreURL = data_xml.item [iValue]. @ link; // item link item .more.addEventListener (MouseEvent.CLICK, gotoURL); // écouteur d'événements pour plus de fonctions btn gotoURL (e: MouseEvent): void // fonction d'événement de clic var myURL: URLRequest = new URLRequest (moreURL); // demande d'URL browseWebToURL (myURL); // aller au lien d'article // end function gotoURL // fonction pour afficher les éléments masqués de fonction hideNshow (effTime: Number, effTransition: String, iMin: Number, iMax: Number) // timer.stop (); // arrête le minuteur Tweener.addTween (item3, y: 330, alpha: 0, time: effTime, transition: effTransition); // masque l'élément 3 Tweener.addTween (item2, y: 247, alpha: 0, heure: effTime, délai: 0,3, transition: effTransition); // masquer l'élément 2 Tweener.addTween (élément1, y: 163, alpha: 0, heure: effTime, retard: 0,6, transition: effTransition, onComplete: Show); // masque l'élément 1, // une fois terminé, appelle la fonction Show () // function Show () // affiche les éléments // currentBtn + = 1; // ajoute 1 à la valeur actuelle de btn if (currentBtn == 4) // si la valeur de currentBtn est égale à 4 définissez la valeur sur 1 car nous n'avons que 3 btns currentBtn = 1; // définissons-la sur 1 // end if item1.removeChild (imgLoader); // supprime l'image de l'élément 1 item2.removeChild (imgLoader2); // supprime l'image de l'élément 2 item3.removeChild (imgLoader3); // supprime l'image de l'élément 3 showData (iMin, iMax); // appel à la fonction showData avec les paramètres iMin et iMax (valeurs des vars min et max) min- = 3; // diminue la valeur min pour afficher les 3 prochains résultats de xml max- = 3; // diminue la valeur max. pour afficher les 3 prochains résultats de xml if (max == xml_length-8) // si la valeur maximale min = xml_length-3; // définit la valeur minimale pour afficher le premier résultat max = xml_length + 1; // définit la valeur maximale à afficher premier résultat // se termine si Tweener.addTween (item3, y: item3Y, alpha: 1, heure: 2, retard: 0.6, transition: "aisanceSoutExpo"); // affiche item3 Tweener.addTween (item2, y : item2Y, alpha: 1, heure: 2, retard: 0,3, transition: "aisanceexpo"); // montre item2 Tweener.addTween (item1, y: item1Y, alpha: 1, heure: 2, transitio n: "easlyOutExpo"); // show item1 timer.start (); // // fin de la fonction Show // fin de la fonction hideNshow fonction timerEvent () // fonction de l'événement timer hideNshow (2, "aisance au début", min, max); // appel de la fonction hideNshow // fonction 1 fonction fonction btn1Clicked ( e: MouseEvent) min = longueur_mlml-3; // définition de la valeur minimale max = longueur_xml + 1; // définition de la valeur maximale hideNshow (2, "aisanceOuvertureQuart", min, max) // appel de la fonction hideNshow currentBtn = 0; / / set surrent Btn btnControl (1); // fonction d'appel btnControl // fonction btn 2 fonction btn2Clicked (e: MouseEvent) min = xml_length-6; max = xml_length-2; hideNshow (2, "aisance au début", min, max); currentBtn = 1; btnControl (2); // btn 3 function fonction btn3Clicked (e: MouseEvent) min = xml_length-9; max = longueur_xml-5; hideNshow (2, "aisance au début", min, max); currentBtn = 2; btnControl (3); function btnControl (btnNumber: Number) // une casse switch… switch (btnNumber) cas 1: // lorsque btn 1 est actif btn1.alpha = 0.5; // set alpha btn1.mouseEnabled = false; // bouton de désactivation Tweener.addTween (btn1, width: 30, height: 30, time: 2, transition: "easEutExpo"); // changez la largeur et la hauteur de btn btn2.alpha = 1; // set alpha btn2.mouseEnabled = true; // enable btn Tweener.addTween (btn2, largeur: 20, hauteur: 20, heure: 2, transition: "aisanceSautExpo"); // change la largeur et la hauteur de btn btn3.alpha = 1; // définit alpha btn3. mouseEnabled = true; // enable btn Tweener.addTween (btn3, width: 20, height: 20, time: 2, transition: "aisanceSoutExpo"); // change la largeur et la hauteur de btn; cas 2: // lorsque btn 2 est actif btn1.alpha = 1; // set alpha btn1.mouseEnabled = true; // enable btn Tweener.addTween (btn1, largeur: 20, hauteur: 20, heure: 2, transition : "easlyOutExpo"); // change la largeur et la hauteur de btn btn2.alpha = 0.5; // set alpha btn2.mouseEnabled = false; // désactive le bouton Tweener.addTween (btn2, width: 30, height: 30, time : 2, transition: "nessEutExpo "); // change la largeur et la hauteur de btn btn3.alpha = 1; // définit alpha btn3.mouseEnabled = true; // active btn Tweener.addTween (btn3, width: 20, height : 20, heure: 2, transition: "aisanceSoutExpo"); // changez la largeur et la hauteur de btn; case 3: // quand btn 3 est actif btn1.alpha = 1; // set alpha btn1.mouseEnabled = true; // enable btn Tweener.addTween (btn1, largeur: 20, hauteur: 20, heure: 2, transition : "easlyOutExpo"); // change la largeur et la hauteur de btn btn2.alpha = 1; // définit alpha btn2.mouseEnabled = true; // active le btn Tweener.addTween (btn2, largeur: 20, hauteur: 20, heure : 2, transition: "easyOutExpo "); // modifie la largeur et la hauteur de btn btn3.alpha = 0.5; // définit alpha btn3.mouseEnabled = false; // désactive le bouton Tweener.addTween (btn3, width: 30, height : 30, heure: 2, transition: "aisanceSoutExpo"); // changez la largeur et la hauteur de btn; // end Switch // end function btnControl // // timer timer.addEventListener (TimerEvent.TIMER, timerEvent); timer.start (); // boutons btn1.addEventListener (MouseEvent.CLICK, btn1Clicked); // écoute le clic sur btn1 et appelle la fonction btn2.addEventListener (MouseEvent.CLICK, btn2Clicked); // écoute le clic sur btn2 et appelle la fonction btn3.addEventListener , btn3Clicked); // Ecoute la fonction click and call de btn3 // // indique quel btns est actif si (currentBtn == 1) btnControl (1); // appelle la fonction btnControl else if (currentBtn == 2) btnControl (2); // appelle btnControl fonction else if (currentBtn == 3) btnControl (3); // end if // end function fData // end function ShowData showData (xml_length-3, xml_length + 1); // indique le premier résultat // end xml Fonction chargée //--------------------------------------------------- // data_Loader.load (data_Req); data_Loader.addEventListener (Event.COMPLETE, xmlLoaded); //
Étape 10: Vars
// importer Tweener import caurina.transitions. *; // // var xmlPath: String = "data.xml"; // contient le lien vers le fichier xml var data_xml: XML; // objet XML var data_Req: URLRequest = new URLRequest (xmlPath); // Requête URL var data_Loader: URLLoader = new URLLoader ( ); // Loader var longueur_xml: Nombre; // longueur xml // // var time: Number = 5000; // 5000 = 5 secondes var timer: Timer = new Timer (time); // timer // // var imgPath: String; // chemin de l'image pour le premier élément var imgPath2: String; // chemin de l'image pour le deuxième élément var imgPath3: String; // chemin de l'image pour le troisième élément var item1Y: Number = item1.y; // item 1 y valeur var item2Y: Number = item2.y; // item 2 y valeur var item3Y: Number = item3.y; // item 3 y valeur // // var currentBtn: Number = 1; // avec lequel btn est appuyé var min: Number; // valeur min utilisée dans la fonction hideNshow () var max: Nombre; // valeur max utilisée dans la fonction hideNshow () // //
Étape 11: xmlLoaded
function xmlLoaded (event: Event): void // xml Fonction chargée data_xml = new XML (data_Loader.data); // récupère le fichier XML de prom. xml_length = data_xml.item.length (); // longueur xml longueur = xml_length- 6; // définition de la valeur minimale au deuxième résultat max = xml_length-2; // définition de la vélocité maximale au deuxième résultat
Lorsque le fichier XML est chargé, un écouteur d'événements appelle la fonction xmlLoaded.
Étape 12: showData
function showData (loopMin: Number, loopMax: Number) // Fonction principale var i: Number; // var pour la boucle var loopMaxResult = loopMax-2; // var pour le troisième résultat var loopSecondResult = loopMax-3; // var pour le second résultat pour (i = loopMin; i imgPath = data_xml.item [i]. @ img; // récupère l'URL img de xml var imgRequest: URLRequest = new URLRequest (imgPath); // requête URL var imgLoader: Loader = new Loader (); // image Loader imgLoader. load (imgRequest); // charge l'image item1.addChild (imgLoader); // ajoute la première image à l'élément 1 imgLoader.x = -150; // image x valeur imgLoader.y = 15; // image y valeur // // fin if if if (i == loopSecondResult) // deuxième résultat fData (item2, i); // appel de la fonction fData pour remplir l'élément 2 // imgPath2 = data_xml.item [i]. @ img; // récupère l'URL img de xml var imgRequest2: URLRequest = new URLRequest (imgPath2); // demande d'URL var imgLoader2: Loader = new Loader (); // image Loader imgLoader2. load (imgRequest2); // charge l'image item2.addChild (imgLoader2); // ajoute la première image à l'élément 2 imgLoader2.x = -150; // image x valeur imgLoader2.y = 15; // image y valeur // // fin if if if (i == loopMaxResult) // troisième résultat fData (item3, i); // appel de la fonction fData pour remplir l'élément 3 // imgPath3 = data_xml.item [i]. @ img; // récupère l'URL img de xml var imgRequest3: URLRequest = new URLRequest (imGPath3); // demande d'URL var imgLoader3: Loader = new Loader (); // image Loader imgLoader3. load (imgRequest3); // charge l'image item3.addChild (imgLoader3); // ajoute la première image à l'élément 3 imgLoader3.x = -150; // image x valeur imgLoader3.y = 15; // image y valeur // // fin si // fin pour
La fonction "showData" transmet deux paramètres "loopMin" et "loopMax", valeurs correspondant à la boucle for (). "loopMaxResult" et "loopSecondResult" sont utilisés dans une instruction if () pour séparer trois résultats. Si nous avons un tableau avec 3 éléments, le premier élément sera avec la clé [0] et le dernier avec la clé [2] (0,1,2). Pour parcourir le tableau avec pour () notre valeur loopMin doit être = 0 et notre boucleMax = 4. Pour savoir dans quel élément nous devons placer les données que nous utilisons si (i == loopMin), le premier résultat s'affiche dans le premier élément, si (i == loopSecondResult) affiche le deuxième résultat et si (i == loopMaxResult) le troisième résultat.
Étape 13: Fonction fData
function fData (item: MovieClip, iValue: int) // fonction qui remplit les données dans les éléments var moreURL: String; // url pour le bouton more item.txt.text = data_xml.item [iValue]. @ title; // fill titre de l'article item.price.text = data_xml.item [iValue]. @ price; // indiquer le prix de l'élément moreURL = data_xml.item [iValue]. @ link; // lien de l'article item.more.addEventListener (MouseEvent.CLICK, gotoURL ); // écouteur d'événement pour plus de fonctions btn gotoURL (e: MouseEvent): void // fonction d'événement de clic var myURL: URLRequest = new URLRequest (moreURL); // demande d'URL browseToURL (myURL); // aller au lien de l'élément // fonction de fin gotoURL
La fonction fData transmet deux paramètres. Le premier correspond au nom de l'occurrence du clip et le second à la valeur i. Ici, nous ajoutons des données du document XML à nos clips et faisons en sorte que le bouton "Plus" ouvre les liens à partir du XML..
Étape 14: hideNshow
// fonction pour afficher les éléments masqués function hideNshow (effTime: Number, effTransition: String, iMin: Number, iMax: Number) // timer.stop (); // arrête le minuteur Tweener.addTween (item3, y: 330, alpha: 0, time: effTime, transition: effTransition); // masque l'élément 3 Tweener.addTween (item2, y: 247, alpha: 0, heure: effTime, délai: 0,3, transition: effTransition); // masquer l'élément 2 Tweener.addTween (élément1, y: 163, alpha: 0, heure: effTime, retard: 0,6, transition: effTransition, onComplete: Show); // masque l'élément 1, // une fois terminé, appelle la fonction Show () // function Show () // affiche les éléments // currentBtn + = 1; // ajoute 1 à la valeur actuelle de btn if (currentBtn == 4) // si la valeur de currentBtn est égale à 4 définissez la valeur sur 1 car nous n'avons que 3 btns currentBtn = 1; // définissons-la sur 1 // end if item1.removeChild (imgLoader); // supprime l'image de l'élément 1 item2.removeChild (imgLoader2); // supprime l'image de l'élément 2 item3.removeChild (imgLoader3); // supprime l'image de l'élément 3 showData (iMin, iMax); // appel à la fonction showData avec les paramètres iMin et iMax (valeurs des vars min et max) min- = 3; // diminue la valeur min pour afficher les 3 prochains résultats de xml max- = 3; // diminue la valeur max. pour afficher les 3 prochains résultats de xml if (max == xml_length-8) // si la valeur maximale min = xml_length-3; // définit la valeur minimale pour afficher le premier résultat max = xml_length + 1; // définit la valeur maximale à afficher premier résultat // se termine si Tweener.addTween (item3, y: item3Y, alpha: 1, heure: 2, retard: 0.6, transition: "aisanceSoutExpo"); // affiche item3 Tweener.addTween (item2, y : item2Y, alpha: 1, heure: 2, retard: 0,3, transition: "aisanceexpo"); // montre item2 Tweener.addTween (item1, y: item1Y, alpha: 1, heure: 2, transitio n: "easlyOutExpo"); // show item1 timer.start (); // // fin de la fonction Show // fin de la fonction hideNshow
La fonction hideNshow passe 4 paramètres.
effTime - temps en secondes utilisé dans l'animation tweener
effeffTransition - type de transition tweener
iMin - var min value
iMax - valeur var max
Lorsque l'animation item1 est terminée, tweener appelle la fonction "Show" (qui ramène des éléments mais supprime les images de chacune d'elles) et exécute la fonction "showData" pour les remplir avec les prochains résultats de notre fichier xml. De plus, la valeur de currentBtn est augmentée de un. Enfin, la minuterie est démarrée.
Étape 15: timeEvent
function timerEvent () // fonction de l'événement timer hideNshow (2, "aisance au début", min, max); // appel de la fonction hideNshow
Cette fonction est appelée lorsque la minuterie compte à rebours 5 secondes.
Étape 16: Fonctions des boutons
// btn 1 function function btn1Clicked (e: MouseEvent) min = longueur_xml-3; // valeur minimale définie max = longueur_xml + 1; // valeur maximale définie hideNshow (2, "aisanceDeRécupération", min, max); // Fonction d'appel hideNshow currentBtn = 0; // définition du surtent Btn btnControl (1); // fonction d'appel btnControl // fonction btn 2 fonction btn2Clicked (e: MouseEvent) min = xml_length-6; max = xml_length-2; hideNshow (2, "aisance au début", min, max); currentBtn = 1; btnControl (2); // btn 3 function fonction btn3Clicked (e: MouseEvent) min = xml_length-9; max = longueur_xml-5; hideNshow (2, "aisance au début", min, max); currentBtn = 2; btnControl (3);
Ce sont les fonctions que les auditeurs d'événements pour les boutons appellent.
Étape 17: fonction btnControl
function btnControl (btnNumber: Number) // une casse switch… switch (btnNumber) cas 1: // lorsque btn 1 est actif btn1.alpha = 0.5; // set alpha btn1.mouseEnabled = false; // bouton de désactivation Tweener .addTween (btn1, width: 30, height: 30, time: 2, transition: "easlyOutExpo"); // change la largeur et la hauteur de btn btn2.alpha = 1; // set alpha btn2.mouseEnabled = true; / / enable btn Tweener.addTween (btn2, largeur: 20, hauteur: 20, heure: 2, transition: "aisancepaspo"); // change la largeur et la hauteur de btn btn3.alpha = 1; // définit alpha btn3.mouseEnabled = true; // enable btn Tweener.addTween (btn3, largeur: 20, hauteur: 20, heure: 2, transition: "aisanceSoutExpo"); // changez la largeur et la hauteur de btn; cas 2: // lorsque btn 2 est actif btn1.alpha = 1; // set alpha btn1.mouseEnabled = true; // enable btn Tweener.addTween (btn1, largeur: 20, hauteur: 20, heure: 2, transition : "easlyOutExpo"); // change la largeur et la hauteur de btn btn2.alpha = 0.5; // set alpha btn2.mouseEnabled = false; // désactive le bouton Tweener.addTween (btn2, width: 30, height: 30, time : 2, transition: "nessEutExpo "); // change la largeur et la hauteur de btn btn3.alpha = 1; // définit alpha btn3.mouseEnabled = true; // active btn Tweener.addTween (btn3, width: 20, height : 20, heure: 2, transition: "aisanceSoutExpo"); // changez la largeur et la hauteur de btn; case 3: // quand btn 3 est actif btn1.alpha = 1; // set alpha btn1.mouseEnabled = true; // enable btn Tweener.addTween (btn1, largeur: 20, hauteur: 20, heure: 2, transition : "easlyOutExpo"); // change la largeur et la hauteur de btn btn2.alpha = 1; // définit alpha btn2.mouseEnabled = true; // active le btn Tweener.addTween (btn2, largeur: 20, hauteur: 20, heure : 2, transition: "easyOutExpo "); // modifie la largeur et la hauteur de btn btn3.alpha = 0.5; // définit alpha btn3.mouseEnabled = false; // désactive le bouton Tweener.addTween (btn3, width: 30, height : 30, heure: 2, transition: "aisanceSoutExpo"); // changez la largeur et la hauteur de btn; // end Switch // end function btnControl
btnControl transmet un paramètre "btnNumber" utilisé dans une instruction switch pour modifier les propriétés des boutons lorsqu'ils sont cliqués ou actifs.
Étape 18: Auditeurs de l'événement
// // timer timer.addEventListener (TimerEvent.TIMER, timerEvent); timer.start (); // boutons btn1.addEventListener (MouseEvent.CLICK, btn1Clicked); // écoute le clic sur btn1 et appelle la fonction btn2.addEventListener (MouseEvent.CLICK, btn2Clicked); // écoute le clic sur btn2 et appelle la fonction btn3.addEventListener , btn3Clicked); // Ecoute la fonction click and call de btn3 //
Étape 19: Quel bouton est actif?
// indique quel bouton est actif si (currentBtn == 1) btnControl (1); // appelle la fonction btnControl else if (currentBtn == 2) btnControl (2); // appelle la fonction btnControl else if (currentBtn == 3) btnControl (3); //fin si
Nous utilisons trois instructions if () pour voir quel bouton est actuellement actif.
Étape 20: Fonctions d'appel
// fin de la fonction fData // fin de la fonction ShowData showData (xml_length-3, xml_length + 1); // show First Result // end xml Fonction chargée //--------------------------------------------------- // data_Loader.load (data_Req); data_Loader.addEventListener (Event.COMPLETE, xmlLoaded); //
Après la fin de la fonction "ShowData", nous l'exécutons avec les paramètres (xml_length-3, xml_length + 1) pour afficher les premiers résultats lors de l'exécution de l'application. Nous ajoutons un écouteur d'événement à data_loader. Ainsi, lorsque le fichier XML est chargé et prêt à être utilisé, nous appelons la fonction "xmlLoaded"..
Conclusion
Vous pouvez modifier l'application à votre guise, modifier les types de transition, les secondes du minuteur ou lui permettre par exemple d'afficher des publications récentes, des actualités, des tweets, etc. J'espère que vous avez aimé suivre!
Share
Accentsconagua
