Outils pour utilisateurs

Outils du site


cours2009:multimedia:projet_basique_liens_hypertextes

Projet basique : liens hypertextes

Flash, permet l'intégration de liens hypertextes dans les textes affichés. Ces liens peuvent être utilisés pour la navigation interne de l'application en utilisant le schéma d'URIevent:”.

La mise en place de liens hypertextes est aussi une bonne occasion pour utiliser et illustrer la propagation des événements.

Mise en place d'un lien

Il existe deux variantes :

  • Simple champ texte (statique) associé à un lien.
  • Un texte au format HTML (dois être dynamique) où l’on marque certains passages comme liens.

Lien sur tout le texte

Simplement faire un texte statique avec l'outil texte et spécifier dans les options le lien avec le schéma event vers la page désirée (event:Page2).

Le texte pourrait être dynamique est avoir un nom d'occurrence. Mais c'est pour montrer que ce n'est pas obligatoire.

Lien sur un passage de texte

Pour pouvoir marquer un passage de textes comme lien :

  • Le champ texte doit être dynamique pour pouvoir spécifier qu'il est au format HTML.
  • On n'est pas obligé de lui donner un nom d'occurrence. Mais le faire dans un premier temps pour la suite du TP.

Faire un champ texte dynamique est spécifier qu'il est au format HTML. Ensuite, surligner des passages de textes et indiquer dans les options des liens vers différentes pages avec le schéma event.

Problème d'affichage des Polices

La méthode que je vous donne pour organiser le projet présente l'avantage de bien séparer les différentes parties du projet. J'ai cherché à simplifier sa mise en oeuvre ce qui pose des problèmes indésirables.

Il se peut que les textes s'affichent quand vous publiez/testez une page. Mais qu’ils soient absents quand vous testez l'application.

C'est un problème lié à l'intégration des caractères que j'ai déjà évoqué.

Pour le contourner, vous devez forcer Flash à intégrer les polices de caractères que vous utilisez dans les pages à ”application.fla”.

Dans la bibliothèque de ”application.fla”, demandez à ajouter une police de caractères par le menu contextuel :

Dans les options : spécifiez la police de caractère utilisé dans les pages et demander à l'exporter pour ActionScript (le nom est sans importance).

Tester comme quoi vous avez maintenant les textes affichés dans l'application.

Pour une gestion plus fine, vous pouvez :

Code ActionScript pour les liens

La présentation sera faite en deux étapes. Mais seule la dernière suffit pour la mise en oeuvre.

Bien faire les deux étapes, car cela permet de percevoir indépendamment les deux notions :

  • Les événements de textes.
  • La propagation des événements.

Les événements de textes

De l'aide de Flash : événement LINK
Distribué lorsqu'un utilisateur clique sur un hyperlien dans un champ de texte HTML dont l'URL commence par ”event:”. La partie de l'URL qui suit « event: » est placée dans la propriété text de l'événement LINK.

Comme la méthode statique animeVers de la Classe Application prend un texte pour dire la page à afficher, il suffit d'avoir mis ce texte après ”event:” et de le lire de l'instance de TextEvent reçue par le gestionnaire d'événement.

Relire la phrase qui précède, mais sous forme de code c'est plus simple :

import src0.grZ0.unNom.projet.Application;
 
texteAvecLien.addEventListener(TextEvent.LINK, clickSurLien);
 
// passe le texte du lien à navigueVers
function clickSurLien(e:TextEvent):void {
    Application.navigueVers(e.text);
}

Simplement placer ce code dans le panneau d'action du symbole où est le champ texte dynamique.

Tester le bon fonctionnement !

Vous pouvez remarquer que ce code est totalement générique : il ne dépend pas du champ texte ou se produit l'événement.

La propagation des événements

Explication

Un événement est un message qu'envoie un objet à ceux qui le veulent : c'est pour cela que l'on met en place un gestionnaire d'événement.

Le message est une enveloppe : l'objet Event reçu par le gestionnaire d'événement. Il contient des renseignements qui peuvent être utiles. Par exemple la propriété text de TextEvent.

Parfois l'on peut vouloir être tenu informé des événements survenant sur plusieurs objets. Exemple: quand l’on clic sur un lien de n'importe quel champ texte.

Si vous lisez l'aide de Flash : événement LINK :

Propriété Valeur
bubbles true

Cela signifie que l'événement (le message) est passé aux parents de l'objet ou il est survenu. Par parents, l'on parle de la hiérarchie d'affichage.

Pour faire simple :

  • Les événements TextEvent.LINK sont propagés aux parents.
    • Il sera donc diffusé sur la racine (instance de la Classe Application). Sur laquelle l’on pourra mettre un gestionnaire d'événement.
  • Le code de gestion des événements TextEvent.LINK est générique.
    • On peut écrire cette fonction ou on veut. Le plus simple : comme une méthode de la Classe Application.

Mise en oeuvre

On ne peut plus simple (le plus dur est de correctement le comprendre).

Dans le constructeur de la Classe Application, mettre en place le gestionnaire d'événement :
Attention : FlashDevelop ne fait pas automatiquement l'import de TextEvent. Le faire avant (plus simple à saisir).

Ajouter la méthode qui sert de gestionnaire d'événement. Elle passe simplement le texte du lien à navigueVers :

Maintenant vous pouvez retirer le code du panneau actions et placer des liens sur vos pages (texte statique ou HTML dynamique).

Tester le bon fonctionnement !

Bonus

Vous pouvez passer à la suite des TP. Les points suivants sont des développements optionnels.

Mise en forme du texte HTML

La Classe TextField possède une propriété styleSheet qui permet d'associer un champ texte dynamique à un objet représentant des styles CSS : StyleSheet.

Exemple d'usage :

// création de la feuille de style
var feuilleDeStyleCSS:StyleSheet = new StyleSheet();
// sélecteur CSS pour les liens
feuilleDeStyleCSS.setStyle("a", {color:"#00FF00"});
// sélecteur CSS pour les liens survolés
feuilleDeStyleCSS.setStyle("a:hover", {textDecoration:"underline", color:"#00BB00"});
// association de la feuille de style au champ texte (HTML dynamique)
texteAvecLien.styleSheet = feuilleDeStyleCSS;

Programmation des champs textes HTML

Il est important de savoir que la Classe TextField à une méthode propriété spéciale pour le contenu HTML : htmlText.

cours2009/multimedia/projet_basique_liens_hypertextes.txt · Dernière modification: 2010/05/24 22:00 (modification externe)