Avant d’aborder cette ressource, commencez par placer un élément sur la scène à l’aide de l’outil Texte, puis nommez le via la palette Propriétés (ou Scénario ou Éléments).
Voici à présent les différentes méthodes qui vous permettront de le traiter.
Modifier le contenu d’un texte sur la scène
sym.$("affichageJour").text("Lundi");
Modifier les attributs d’un textes
sym.$("affichageJour").css({color:"blue", fontSize:10, backgroundColor:"#FFFFAA"});
Les attributs/propriétés d’un élément sont très variés, retrouvez-les à cette adresse (http://www.w3schools.com/css/css_text.asp), mais gardez à l’esprit qu’il existe deux syntaxes pour ceux contenant 2 mots. Ex. : font-size peut s’écrire de deux façons.
sym.$("affichageJour").css({fontSize:10});
ou
sym.$("affichageJour").css({"font-size":10});
Par ailleurs, vous n’avez pas besoin de spécifier l’unité de la valeur, ni même les saisir entre guillemets pour les valeurs numériques. Utilisez les parenthèses pour spécifier une valeur précise comme le montre l’exemple ci-dessous.
Valeur exprimée en pixels
sym.$("temoin").css({left:10});
Valeur exprimée en pourcentage
sym.$("temoin").css({left:"10"});
ou
sym.$("temoin").css({left:"10%"});
Injecter du code HTML dans un élément
sym.$("affichageLien").html("Rechercher sur <a href='http://www.yahoo.fr'>Yahoo</a>");
Vous devez remplacer la méthode texte() par html() et spécifier une valeur (comprise entre les parenthèses) contenant des balises.
Faire défiler le texte contenu dans un élément à un niveau précis
sym.$("zoneTexte2").animate({scrollTop:120});
Pour connaître la valeur à utiliser (120 dans notre exemple), vous pouvez utiliser la méthode ci-dessous. Utilisez la valeur 0 pour remonter au début du texte.
Pour faire défiler un texte à l’aide d’un pas, veuillez utiliser la syntaxe suivante :
sym.$("zoneTexte2").animate({scrollTop:"+=50"});
Exécuter du code durant le défilement d’un texte dans son contenant
Si vous avez oublié la technique qui permet d’ajouter un script à/sur un élément, veuillez consulter cette page : [http://voxpedago.com/edge-animate/cibler-dans-edge-animate/].
Dans cet exemple, nous avons un élément avec le style overflow réglé sur scroll (en haut à droite de la palette Propriétés). Il est par défaut sur visible ou hidden. Il contient bien sûr un texte suffisamment important pour être défilé et nous lui ajoutons un événement de type scroll* avec la ligne d’instruction ci-dessous.
Nous avons également ajouté un autre élément (à l’aide de l’outil texte) que nous avons nommé affichageScroll pour afficher le niveau du défilement du texte.
sym.$("affichageScroll").text(sym.$("zoneTexte1").scrollTop());
* L’événement scroll n’est pas proposé dans la liste de ceux disponibles dans le menu, vous devez donc choisir n’importe lequel et effectuer le raccourci Cmd-E (ou CTRL-E sous Windows) pour localiser votre code. Il ne vous reste plus qu’à remplacer l’événement que vous avez choisi par scroll.
Faire défiler un texte tant que la souris se trouve sur un élément
Pour ce faire, vous allez devoir utiliser la méthode setInterval() qui permet d’exécuter du code en continu.
setInterval(afficher, 5000) ;
function afficher() {
alert("Une seconde plus tard");
}
Dans cet exemple pour introduire cette nouvelle notion, nous affichons toutes les 5 secondes (5000 millisecondes), le texte « Une seconde plus tard » dans une fenêter d’alerte du navigateur.
Voyons à présent comment nous pourrions adapter ce code pour faire défiler du texte en continu.
- Commencez par afficher la fenêtre de code (Cmd-E ou CTRL-E sous Windows) et sélectionnez « Stage » en haut à gauche de la fenêtre. Nous avons besoin de déclarer une variable globale. Écrivez var goScroll;
- Fermez cette fenêtre et sélectionnez l’élément qui déclenchera le défilement du texte.
- Ajoutez un script d’événement (avec mouseover) et utilisez ce code :
goScroll = setInterval(defiler,10)
function defiler() {
sym.$("zoneTexte2").animate({scrollTop:"+=1"},10);
}
Il ne vous reste plus qu’à ajouter l’évènement mouseout en spécifiant l’instruction ci-dessous.
clearInterval(goScroll);