Adobe Flex Tutorial - Adobe Flex Tutorial

26mar/097

Composant Flex – Texte Défilant type Marquee (ScrollingText)

Vous avez sûrement déjà vu sur des sites ayant des design type sites des années 80, ces textes défilants "Bienvenue sur mon site!". Pour cela, soit un peu de JavaScript, soit du html avec la balise marquee: <marquee>Bienvenue sur mon site!</marquee>. C'était plutôt affreux (à mon goût) mais admettons que vous vouliez créer le même effet dans votre application Flex, pour lui donner un air vintage peut-être.

Et bien Peter Ent a crée un composant permettant de faire ce texte défilant sous Flex. Ce composant est baptisé ScrollingFlex, voici un exemple de son utilisation:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:controls="com.keaura.controls.*"
	creationComplete="{scrollinText.start();scrollinText2.start();}">
	<controls:ScrollingText id="scrollinText" text="De gauche à droite" direction="leftToRight" speed="2" width="100%" height="30"/>
	<controls:ScrollingText id="scrollinText2" text="De haut en bas" direction="topToBottom" speed="3" width="100%" height="30"/>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

This movie requires Flash Player 11

Plusieurs paramètres sont à disposition:

direction: les 4 directions sont possibles (gauche à droite, haut en bas ...)
speed: vitesse de déplacement du texte
text: le texte à faire défiler

Attention, n'oubliez pas de donner une height à votre composant, la hauteur de base est de 0 sinon et vous ne verrez rien. N'oubliez pas non plus de lancer le défilement avec la méthode start()

Remplis sous: Composant Flex, Effect, Exemple, Label, Tween || Taggé comme: JavaScript, marquee Laisser un commentaire

Articles similaires

Commentaires (7) Trackbacks (0) (Souscrire aux commentaires de cet article)

NiCo
30 mars 2009

Hello, j'ai testé le ScrollingText, tout fonctionne mais je ne comprends pas comment changer le style du texte (défini dans ScrollingText.as), si quelqu'un pouvait m'expliquer ça m'arrangerait bien =)
Thanks
fnicollet
30 mars 2009

salut,
tu peux le changer directement dans le tag MXML, avec les propriétés color, fontWeight etc.. ou lui assigner un styleName pour assigner un style CSS

Fabien
pape
30 octobre 2009

Salut,
Moi je l'ai testé avec flash builder 4 mais il me signal toujours une erreur de ce genre

[1046: Ce type est introuvable ou n'est pas une constante de compilation : ScrollingText. ]

c'est comme si Flash 4 ne reconnait pas la propriété ScrollingText
donnez-moi un coup de main svp
fnicollet
30 octobre 2009

Salut,
Cela veut dire qu'il ne connait pas la classe ScrollingText, ce n'est pas propre à Flex 4. Vérifie les points suivants:
- Tu as bien ajouté les fichiers du composant ScrollingText
- Tu as bien fait un import de ScrollingText s'il n'est pas dans le même package
- Tu as bien le namespace xmlns:controls="com.keaura.controls.*" comme dans l'exemple

Fabien
pape
30 octobre 2009

merci.Au fait j'ai juste copié le meme code.
comment ajouter les fichiers du composant ScrollingText ? et comment fait un import de ScrollingText s'il n'est pas dans le même package ? merci
fnicollet
30 octobre 2009

Salut,
pour ajouter les fichiers, il faut que tu les télécharges (le lien au dessus de l'application de démo, puis Download Source en bas à gauche). Tu copies ces fichiers dans ton projets Flex et voila.
Fabien
FJacques
14 février 2012

Bonjour,

Quelques années plus tard, j'essai d'utiliser ce composant, nickel !

Sauf qu'a l'usage certains composants de mon appli disparaissent ??

Une idée, une piste ou chercher ce qui fait ça ?...