Si vous avez déjà travaillé avec des logiciels graphiques de l'Adobe Creative Suite (CS) comme Adobe Illustrator ou Adobe Photoshop, vous connaissez sûrement cette petite interface permettant de faire des dégradés. Elle se compose d'une barre montrant le dégradé et de plusieurs petites boîtes indiquant chaque couleur-clé du dégradé.
Pour ceux qui ne connaissent pas le principe, ces petites boîtes représentent des couleurs-clés (un peu comme les images-clé sur une timeline d'animation). C'est à dire que ce sont elles qui vont décider de l'apparence du dégradé. Les couleurs du dégradé sont générées et interpolées entre ces valeurs clés.
Voici quelques règles qui permettent de manipuler ce composant:
- Pour ajouter une couleur, cliquez simplement sur la barre de dégradé à l'endroit où vous voulez voir apparaître votre nouvelle couleur-clé.
- Pour modifier la position d'une couleur-clé, vous pouvez simplement faire un drag and drop de la boîte.
- Pour changer la couleur d'une couleur-clé, cliquez simplement sur la boîte et assignez une nouvelle valeur à la propriété selectedColor de votre composant. Pour supprimer une couleur-clé, prenez la boîte en drag and drop et glissez la en dehors (vers le bas).
De base, Flex a seulement un ColorPicker simple (une couleur) et ne permet pas de créer ces dégradés. Mariusz Tkaczyk a donc crée un composant pour cela.
Voici un exemple d'utilisation de ce composant Flex dans une application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:components="com.mariosh.components.*"
backgroundColor="#FFFFFF"
backgroundGradientAlphas="1,1"
xmlns:local="*" viewSourceURL="srcview/index.html">
<components:GradientEditor id="gEditor"
width="200"
height="50"
x="32"
y="40"
colors="[0xff0000, 0x000000]"
alphas="[.5, 1]"
ratios="[100, 255]"/>
<mx:HSlider
minimum="0"
maximum="1"
change="gEditor.selectedAlpha=event.value"
x="62"
y="99"
value="{gEditor.selectedAlpha}"/>
<mx:ColorPicker id="cPicker"
x="32"
y="98"
change="gEditor.selectedColor=cPicker.selectedColor"
selectedColor="{gEditor.selectedColor}"/>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
Voir la page de l'auteur officielle de ce composant
Télécharger les sources de ce composant
Autres Tutoriaux Flex liés:
- Flex Drag And Drop – Drag And Drop natif avec dragEnabled et dropEnabled
- Flex Drag And Drop – Opérations Drag And Drop personnalisées en ActionScript
- Composant Flex – Afficher/masquer les barres d'outils d'un RichTextEditor avec RichTextEditorRemoveSubcontrols
- Flex AdvancedDataGrid – Sélection de multiples lignes et cellules (row / cell)
- Flex PopUp – Contrôler le style d'une PopUp modale
Salut et bravo pour le grand nombre de tuto disponible sur ton site!
Je souhaiterai avoir un composant type colorpicker mais sans obtenir un dégradé, en gros juste pour sélectionner une couleur et l'appliquer sur un texte.
Faut-il modifier les propriétés ? si oui quel élément ?
merci.
Salut,
je pense qu'il te suffit d'utiliser le mx:ColorPicker de Flex qui te permet de sélectionner une couleur. Après tu captes l'évènement qui est lancé par le ColorPicker au moment du choix d'une couleur. A ce moment-là, tu peux récupérer la nouvelle couleur sélectionnée(qui est passée avec l'évènement) et l'appliquer à ton texte (en faisant un setStyle() dessus par exemple.
Dis moi si je ne suis pas clair ^^
Fabien
J'ai oublié de préciser que je ne veux seulement que quelques couleurs et pas les 256 qui sont proposées par le composant. En fait je veux restreindre le nombre de couleurs disponibles mais je ne sais pas comment faire ...
ok, alors pour faire ça, direction cette page:
http://livedocs.adobe.com/flex/3/html/help.html?content=controls_18.html
Fabien
Plus généralement sur les couleurs, j'ai un truc un peu space : je cherche à harmoniser les couleurs de fond d'une appli Flex et d'une image à part.
Si je colle le même code couleur aux 2 background, le rendu n'est pas le même. On voit clairement qu'il ne s'agit pas des 2 mêmes couleurs même si la nuance est subtile.
Ya une règle à respecter ?
Merci.
Pas vraiment, regarde bien si les alpha sont les mêmes. Sinon, si c'est la couleur de fond d'une application Flex, elle peut consister en 2 couleurs qui forment un dégradé. A part ça, cela devrait correspondre.
Fabien