SWFAddress est une bibliothèque Javascript / ActionScript qui vous permet de modifier l'URL du navigateur, d'ajouter des entrées à sa liste d'historique et de déclencher des événements ActionScript lorsque l'URL change. Il permet également aux moteurs de recherche de trouver un contenu spécifique sur votre site. Toutes les fonctionnalités qui, selon ses créateurs, font défaut dans les technologies Web riches actuelles.
Nous allons jeter un coup d'oeil…
Contexte
Avant de passer directement au code, nous allons explorer SWFAddress et voir comment nous devons ajuster notre flux de travail pour l'utiliser. SWFAddress est essentiellement une bibliothèque javascript / ActionScript qui vous permet de modifier l’URL du navigateur, d’ajouter des entrées à sa liste d’historique et de déclencher des événements ActionScript lorsque le navigateur modifie son URL. SWFAddress écoute les événements spécifiques du navigateur (modifications de l'URL) et signale à son homologue ActionScript de déclencher certains événements. La classe ActionScript nous fournit également une API facile à utiliser pour contrôler diverses actions du navigateur (par exemple, changer l'URL, changer le titre de la page)..
Les sites SWFAddress diffèrent de certains sites traditionnels car la logique de navigation doit être basée sur des chaînes et disposer d'une jonction centrale. Il est courant que de nombreux sites Flash aient une fonction unique attachée à chaque élément de navigation. Par exemple, le premier bouton peut déclencher une fonction showPage1 () et le second, une fonction showPage2 (), etc. Dans une page SWFAddress, chaque élément de navigation déclenchera la même fonction, à savoir celle qui demande à SWFAddress de modifier l'URL..
SWFAddress déclenchera également simultanément son événement de modification. Vous devrez alors évaluer l'URL actuelle et décider des mesures à prendre. Une fois que vous êtes à l'aise avec cette différence, vous constaterez que SWFAddress crée peu de résistance à votre flux de travail habituel. En fait, de nombreux développeurs utilisent déjà une architecture de navigation similaire sur leurs sites autres que SWFAddress..
Ce tutoriel commencera par la construction d’une page de base avec 4 éléments de navigation. Nous allons ensuite introduire SWFAddress dans le mix pour nous donner un peu de soutien en profondeur. Enfin, pour les utilisateurs avancés, nous allons échanger notre menu / texte statique et utiliser un fichier XML externe pour fournir le contenu..
Étape 1: Configuration de l'espace de travail
Notre site Web alimenté par SWFAddress sera composé de quelques fichiers clés. Nous aurons besoin de notre fichier FLA principal, du fichier SWF compilé, d'une page HTML, des bibliothèques SWFAddress .as, des bibliothèques SWFAddress .js et des bibliothèques SWFObject (les bibliothèques javascript se trouvent dans les dossiers swfaddress et swfobject)..
Étape 2: le fichier HTML
Notre page HTML est une intégration de base de SWFObject avec une ligne pour SWFAddress. Nous n'allons pas trop approfondir car HTML et js vont au-delà de la portée de ce tutoriel. Autant dire que les seules différences entre un modèle HTML typique de SWFObject et ceci est le code HTML de la ligne 7 (voir la ligne surlignée en bleu).
Étape 3: Configuration de base de la FLA
Maintenant que les fichiers source sont en place, nous allons commencer à créer notre fichier FLA. Créez un nouveau document AS3, définissez ses dimensions sur 600 x 400 pixels, puis enregistrez-le dans le répertoire du projet sous le nom "tutorial.fla". Nous allons également définir la couleur de fond sur # 999999 pour que ce soit moins ennuyeux.
Étape 4: Tableau d'éléments de menu
Pour ce tutoriel, nous allons créer un tableau contenant nos éléments de menu. Cela facilitera l’incorporation ultérieure d’un menu basé sur XML si vous le souhaitez. Nous allons commencer par créer un nouveau calque sur la timeline que nous appellerons "actions". Nous allons ensuite ouvrir le panneau d'actions (avec cette couche sélectionnée) et utiliser le code suivant:
var menuArray: Array = new Array ("Accueil", "A propos de nous", "Services", "Nous contacter");
Ça devrait ressembler a quelque chose comme ca:
Étape 5: Dessiner le support de menu
Nous allons maintenant commencer à créer le menu. Nous allons créer un nouveau calque (appelez-le "menu") et commencer par dessiner un rectangle simple de 400 x 50 pixels avec un rayon de coin de 2 pixels sur le nouveau calque. La couleur n'est pas importante car nous la peaufinerons plus tard.
Étape 6: Conversion du menu en clip vidéo
Nous allons maintenant sélectionner le menu et appuyer sur F8 pour le convertir en clip. Nous allons lui donner un identifiant de bibliothèque de "menu" et un nom d'instance de "menuHolder".
Étape 7: Créer le fond du menu
Double-cliquez sur le clip de menu nouvellement créé pour passer en mode d'édition. Nous allons sélectionner la forme à l'intérieur et la convertir à nouveau en MovieClip (F8). Cependant, cette fois, nous lui appliquerons une grille d’échelle à 9 tranches. Nous faisons cela afin d’avoir un arrière-plan pour le menu que nous pouvons dimensionner proprement sans avoir à redimensionner le menu lui-même. Nous allons lui donner une bibliothèque et un nom d'instance de "menubg".
J'ai également ajouté une subtile lueur bleue au menu à l'aide d'un filtre antireflet avec les valeurs de flou et de flou définies à 6, la force définie à 50% et la couleur définie à # 32CCFF..
Étape 8: Dessiner les éléments du menu
Nous allons maintenant revenir au document principal et commencer à créer les éléments de menu actuels (c.-à-d. Les "liens" qui rempliront le menu). Bien que nous les dessinions sur le document principal, nous pourrions les dessiner n'importe où, car ils seront ajoutés dynamiquement à la scène plus tard. Nous allons d’abord créer un champ de texte, le définir en dynamique et lui attribuer un nom d’instance "txt". Nous allons définir la police sur Arial, la taille sur 22pts et la couleur sur blanc #ffffff. Assurez-vous que le champ de texte ne peut pas être sélectionné (le premier bouton sous le menu déroulant anti-alias). Enfin, nous intégrerons la police. Vous pouvez utiliser n’importe quelle police que vous le souhaitez, mais vous devrez vous rappeler d’ajuster la taille de la police de sorte qu’elle s'adapte à la hauteur du menu..
Étape 9: Exportation d'éléments de menu pour ActionScript
Nous allons maintenant convertir les éléments de menu en clips, mais nous devrons prendre une mesure supplémentaire, car nous allons réutiliser ce clip dans notre code ActionScript. Sélectionnez le champ de texte et appuyez sur F8 pour afficher la boîte de dialogue MovieClip, saisissez "menuItem" dans le champ du nom, puis cochez la case "Exporter pour ActionScript". Une fois terminé, cliquez sur OK, puis à nouveau sur OK dans la boîte de dialogue de confirmation suivante (elle peut ne pas apparaître en fonction de vos paramètres).
Étape 10: Création des éléments de menu (ActionScript)
Nous utiliserons le code suivant pour renseigner le menu avec les éléments de menu appropriés:
var xval = 20; pour (var i: int = 0; i
Fondamentalement, nous parcourons les éléments de notre tableau et chaque élément crée une nouvelle instance de menuItem. Ensuite, nous définissons le champ de texte à l'intérieur de l'élément de menu sur "autoSize = left" afin qu'il s'agrandisse pour correspondre au texte placé à l'intérieur. La ligne suivante définit le texte à l'intérieur du champ de texte en fonction de l'élément de tableau qui correspond à l'itération actuelle de la boucle. xval est une variable que nous utilisons qui stocke la position de l'élément de menu afin de pouvoir les placer les uns à côté des autres. Ensuite, nous centrons l'élément de menu dans le menu et ajoutons enfin la largeur de l'élément de menu et la valeur de remplissage à xval. Ensuite, nous ajoutons l’élément de menu au menuHolder. Les deux dernières lignes de code font que le menuHolder s’étire en arrière-plan pour remplir le titulaire du menu (nous ajoutons 20px pour le remplissage) et centrer le menu sur la scène..
Étape 11: Création de la zone de contenu
Avant de passer à l'attribution d'actions aux éléments de menu et à la configuration de SWFAddress, nous devons créer du contenu à afficher. Par souci de simplicité, nous utiliserons le moteur d'interpolation flash par défaut. Créez un nouveau calque appelé contenu. Sur ce calque, créez un rectangle de 500 x 250 pixels et convertissez-le en clip avec un nom d'occurrence "contenu"..
Étape 12: Ajout d'un champ de texte à la zone de contenu
Maintenant que nous avons créé la zone de contenu, nous allons double-cliquer dessus pour passer en mode édition et y placer un champ de texte dynamique. Ce champ de texte devrait être presque aussi grand que le clip "contenu". Nous utiliserons les mêmes paramètres de texte que le menu (arial 22pt, blanc) avec des polices intégrées. Nous lui donnerons un nom d’instance de txt et changerons le comportement (sous les paramètres de paragraphe) en multi-ligne..
Étape 13: Création du contenu
Créons maintenant du contenu que nous pourrons renseigner dans la zone de contenu lorsque les éléments de menu sont sélectionnés. Par souci de simplicité, nous allons simplement créer 4 variables de chaîne différentes, mais sur un site plus avancé, vous remplacerez probablement ceci par une source de données externe. Ajoutez les 4 variables suivantes à notre code ActionScript:
var text1: String = "Ceci est le texte de la page d'accueil" var text2: String = "Voici le texte que vous verriez sur la page à propos de nous" var text3: String = "Cette page présente les différents services que nous fournissons. "var text4: String =" Voici les différentes méthodes que vous pouvez entrer en contact avec nous. Vous trouverez également une carte ici "
Vous pouvez les placer près du haut du code.
Étape 14: Création de la fonction de modification du champ de texte
Nous allons maintenant créer une fonction simple qui modifie le contenu du champ de texte et anime la transition. Collez le code suivant puis nous l'explorerons ligne par ligne:
import fl.transitions.Tween; import fl.transitions.easing. *; var cTween: Tween = new Tween (content, "x", Regular.easeOut, 50, 50, .1, true); var mainText: String function textChange () cTween.continueTo (-800, .4); cTween.addEventListener ("motionFinish", setText) fonction setText (e: Event) content.txt.text = mainText cTween.continueTo (50, .4)
Les deux premières lignes importent simplement la classe d'interpolation et les fonctions d'accélération. La ligne suivante initialise l'interpolation afin que nous puissions plus facilement la manipuler avec la fonction continueTo. La 4ème ligne crée une variable qui contient la chaîne en cours. Cette variable sera définie par SWFAddress et la zone de contenu chargera cette variable dans son champ de texte à chaque fois qu'elle sera interpolée. La fonction textChange interpelle la zone de contenu et définit un écouteur d'événement pour déclencher la fonction setText à la fin. La fonction setText réinterprète la zone de contenu sur la scène et définit son champ de texte sur le paramètre mainText défini par SWFAddress..
Étape 15: initialisation de SWFAddress
Pour initialiser SWFAddress, nous devons simplement ajouter son événement CHANGE et créer le gestionnaire de cet événement. Ces quelques lignes de code le feront.
SWFAddress.addEventListener (SWFAddressEvent.CHANGE, addressChange) function addressChange (e: Event) // Ce qu'il faut faire lorsque l'adresse change
La fonction "addressChange" sera exécutée chaque fois que le navigateur modifie l'URL (via les boutons Précédent / Suivant, réécrit l'URL de la barre d'adresse ou toute autre méthode) ou que vous modifiez l'URL (via la fonction SWFAddress.setValue)..
Étape 16: Ajout d'actions aux éléments de menu
Notre prochaine étape consiste à ajouter un comportement aux boutons de menu créés précédemment. Nous y arriverons en revenant sur la boucle de création de menu que nous avons construite plus tôt..
var xval = 20 pour (var i: int = 0; i
La dernière ligne avant l'accolade fermante est celle que nous devons ajouter. Il crée un événement sur les éléments de menu qui se déclenche lorsqu'un élément de menu est cliqué. Nous allons maintenant avoir besoin d'ajouter le gestionnaire d'événement correspondant.
var xval = 20; pour (var i: int = 0; i
Les trois dernières lignes de code que nous avons ajoutées sont exécutées chaque fois qu'un élément de menu est cliqué. Il demande à SWFAddress d'exécuter sa fonction setValue qui change la page et déclenche son gestionnaire d'événements CHANGE. Le paramètre que nous passons à la fonction setValue est le texte de l'élément de menu sur lequel l'utilisateur a cliqué..
À ce stade, si nous téléchargions les fichiers sur notre serveur Web et testions le fichier HTML, l'URL de l'adresse serait modifiée à mesure que nous cliquions sur les boutons, mais le fichier ne ferait rien car nous n'avions pas indiqué à SWFAddress quoi faire quand. l'adresse change.
Étape 17: Actions de SWFAddress
Nous avons maintenant le menu configuré et les boutons de menu déclenchent correctement SWFAddress. La dernière partie de l'équation consiste à indiquer à SWFAddress ce qu'il doit faire lorsqu'il est déclenché. Plus tôt dans le didacticiel (étape 15), nous avons créé l'écouteur et le gestionnaire d'événements SWFAddress. Nous allons revoir ce bloc de code et ajouter ce qui suit:
SWFAddress.addEventListener (SWFAddressEvent.CHANGE, addressChange) function addressChange (e: Event) if (SWFAddress.getValue () == "/ Home") mainText = text1 textChange () if (SWFAddress.getValue () == " / À propos de nous ") mainText = text2 textChange () if (SWFAddress.getValue () ==" / Services ") mainText = text3 textChange () if (SWFAddress.getValue () ==" / Contactez-nous ") mainText = text4 textChange () SWFAddress.setTitle (SWFAddress.getValue ());
La différence clé est tout le code dans la fonction "addressChange". Nous avons créé plusieurs instructions conditionnelles qui vérifient la page actuelle, définissez le texte approprié sur "mainText", puis lancez la fonction "textChange", chargée de l'animation de la transition et de la définition du texte de la zone de contenu. La dernière ligne définit le titre HTML de la page sur la page en cours. Cette fonction pourrait être nettoyée avec un boîtier de commutateur, mais dans un souci de simplicité, nous la laisserons telle quelle..
Étape 18: Tout est fait
Vos fichiers doivent maintenant correspondre à ceux des fichiers source. Publiez la FLA, téléchargez les fichiers sur votre serveur et vous aurez maintenant une page entièrement fonctionnelle..
Conclusion
Nous avons maintenant terminé notre simple page alimentée par SWFAddress. Ce fichier doit constituer une base appropriée pour tout site SWFAddress et peut facilement être étendu avec du contenu dynamique avec un minimum de code supplémentaire. J'espère que vous avez aimé suivre!
Share
Accentsconagua
