PALETTE DE COULEURS : application facile.

Besoin d'un selecteur de couleur?

Exemples

Une simple palette pour selectionner sa couleur

Comment faire?

La palette flash

La palette de couleurs est un composant flash classique. Pour l'ajouter à votre page, il suffit de placer le code suivant dans votre page:

<!-- code html -->

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="colorpicker" width="180" height="180">
<param name="movie" value="colorpicker.swf">
<param name="bgcolor" value="#FFFFFF">
<param name="wmode" value="transparent">
<div overflow::hidden>
<embed src="colorpicker.swf" name="colorpicker" width="180" height="180"bgcolor="#FFFFFF" wmode="transparent" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
</div>
</object>

Dynamiser avec javascript

La palette peut interagir avec votre page en l'associant à des fonctions javascript. Trois fonctions peuvent être utilisées:
    - une fonction ' cp_CloseFlash' appelée quand l'utilisateur clique sur le bouton ' fermer ' de la palette.
    - une fonction ' cp_FlashToJS ' appelée quand l'utilisateur clique sur le bouton ' OK ' de la palette.
    - une fonction ' cp_JSToFlash ' qui renvoie une couleur initiale pour la palette.

Voici un exemple qui utilise les fonctions javascript (à placer entre les balises ' body ' de votre page):

<!-- code javascript -->

<!--
///////////////////////////////
// FONCTIONS POUR LA PALETTE //
///////////////////////////////

var couleur_initiale = "#B2C0E3";

function cp_FlashToJS(str)
{
   couleur_initiale = str;
   getE('exemple2').style.background = str;
   getE('exemple2_text').value = str;
}
function cp_JSToFlash()
{
   return couleur_initiale;
}
function cp_CloseFlash()
{
   flip('palette2_1');
   flip('palette2_2');
}
-->

Fonctions javascript personnalisées

Vous pouvez utiliser vos propres fonctions pour interagir avec la palette. C'est particulièrement utile dans le cas où vous utilisez plusieurs palettes qui n'ont pas le même comportement. Par exemple, vous voulez utiliser:
    - une fonction ' maFonctionFermer ' à la place de ' cp_CloseFlash' (activée lorsque l'utilisateur clique sur le bouton ' fermer ' de la palette).
    - une fonction ' maFonctionOK ' à la place de ' cp_FlashToJS'. (activée lorsque l'utilisateur clique sur le bouton ' OK ' de la palette).

Le code javascript serait donc de la forme suivante (à placer entre les balises ' body ' de la page):

<!-- code javascript -->

<!--
///////////////////////////////
// FONCTIONS POUR LA PALETTE //
///////////////////////////////

var couleur_initiale;

function maFonctionOK(str)
{
   couleur_initiale = str;
   //...
}
function cp_JSToFlash()
{
   return couleur_initiale;
}
function maFonctionFermer()
{
   //...
}
-->

Note: la fonction cp_JSToFlash doit renvoyer une couleur au format hexadecimal précédé de dièse, comme: #FF0000. Si aucune couleur n'est renvoyée, la palette n'aura pas de couleur initialement sélectionnée.

On donne au composant flash les nouveaux noms de fonctions à utiliser :

<!-- code html -->

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="colorpicker" width="180" height="180">
<param name="movie" value="colorpicker.swf?cp_FlashToJS=maFonctionOK&cp_CloseFlash=maFonctionFermer">
<param name="bgcolor" value="#FFFFFF">
<param name="wmode" value="transparent">
<div overflow::hidden>
<embed src="colorpicker.swf?cp_FlashToJS=maFonctionOK&cp_CloseFlash=maFonctionFermer" name="colorpicker" width="180" height="180"bgcolor="#FFFFFF" wmode="transparent" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
</div>
</object>

Utiliser dans votre application Flash

Pour utiliser la palette dans votre application Flash, il vous faut la charger dynamiquement dans votre application (avec movieClipLoader, par exemple). Vous pouvez également définir les variables globales suivantes:
    - newCloseFunction : ayant pour valeur une référence vers une fonction existante. Cette variable permet d'assigner au bouton ' fermer ' de la palette un comportement personnalisé.
    - newOKFunction : ayant pour valeur une référence vers une fonction existante. Cette variable permet d'assigner au bouton ' OK ' de la palette un comportement personnalisé.
    - currentcolor : ayant pour valeur une chaine de caractère représentant une couleur au format "#XXXXXX". Cette variable permet de donner à la palette une couleur initialement sélectionnée.
    - enable_drag_cp : ayant pour valeur 1 ou 0. Cette variable autorise ou interdit le déplacement de la palette par glisser-déposer (0 pour interdire, 1 pour autoriser).

/* code actionscript */

//////////////////////////////
// FONCTIONS PERSONNALISEES //
//////////////////////////////


function newClose() {
   //...
}
function newOK(couleur:String) {
   //...
}
_global.newCloseFunction = newClose;
_global.newOKFunction = newOK;

// pour indiquer une couleur prédéfinie à la palette:
_global.currentcolor = "#CC5599";

// pour autoriser le déplacement de la palette par glisser-déposer
_global.enable_drag_cp = 1;

//////////////////////////////
// CHARGEMENT DE LA PALETTE //
//////////////////////////////


// Conteneur de la palette
var container:MovieClip = createEmptyMovieClip("container", getNextHighestDepth());
var mcLoaderListener:Object = new Object();
var mcLoader:MovieClipLoader = new MovieClipLoader();
mcLoaderListener.onLoadInit = function(mc) {
   //...
};
mcLoader.addListener(mcLoaderListener);

mcLoader.loadClip("colorpicker.swf", container);

Cette palette est mise à disposition sans garantie de fonctionnement, de compatibilité, ou de résultat.