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 //
///////////////////////////////
/*****************************************************************
     Pour activer la relation Flash / Javascript, vos objets flash
     doivent recevoir la variable "enable_javascript",
     soit directement en query (colorpicker.swf?enable_javascript=1),
     soit via l'outils javascript utilisé pour afficher votre objet
     (SWFObject, AC_RunActiveContent ou autres).
*/

/*****************************************************************
     Couleur par défaut renvoyée à flash par la fonction cp_JSToFlash
*/
var couleur_actuelle = "#00FF00";

/*****************************************************************
     Fonction modifiable pour utiliser la couleur "couleur_actuelle"
     en relation avec la variable "target_id"
*/
var target_id = null;
function cp_actionToHTMLElement()
{
     getE(target_id).style.background = couleur_actuelle;
     getE(target_id+'_text').value = couleur_actuelle;
}

/*****************************************************************
     Paramètres de la relation Flash / Javascript
*/
var palette_actuelle = bouton_actuel = null;

// fonction appelé par Flash lors du click sur le bouton "OK"
// la paramètre envoyé par Flash est une couleur (format #DDDDDD)
function cp_FlashToJS(couleur)
{
     couleur_actuelle = couleur;
     cp_actionToHTMLElement();
}

// cp_JSToFlash envoie une couleur à Flash (format #DDDDDD)
function cp_JSToFlash()
{
     return couleur_actuelle;
}

// fonction appelé par Flash lors du click sur le bouton [X]
function cp_CloseFlash(){
     cp_hideCP();
}

/*****************************************************************
     Affichage/masquage de la palette
*/
function cp_showCP(bouton_appelant, palette_div_id, tgt_id)
{     
     if(palette_actuelle) cp_hideCP();

     bouton_actuel = bouton_appelant
     palette_actuelle = getE(palette_div_id);
     
     cp_flipElement(bouton_actuel);
     cp_flipElement(palette_actuelle);
     
     target_id = tgt_id;
}

function cp_hideCP()
{
     cp_flipElement(bouton_actuel);
     cp_flipElement(palette_actuelle);
     palette_actuelle = bouton_actuel = target_id = null;
}

/*****************************************************************
     Utilitaires
*/
function cp_flipElement(e)
{
     var current = (e.style.display == 'none') ? 'block' : 'none';
     e.style.display = current;
}

function getE(id)
{
     if(document.getElementById) {
          return document.getElementById(id);
     } else if(document.all) {
          return document.all[id];
     } else return;
}
-->

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?enable_javascript=1&cp_FlashToJS=maFonctionOK&cp_CloseFlash=maFonctionFermer">
<param name="bgcolor" value="#FFFFFF">
<param name="wmode" value="transparent">
<div overflow::hidden>
<embed src="colorpicker.swf?enable_javascript=1&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. Une fois le Colorpicker chargé, vous pouvez accéder à ses éléments principaux:
    - btn_OK : le bouton OK. Vous pouvez lui assigner une autre fonction comme dans l'exemple.
    - btn_close : le bouton fermer. ibid.
    - bg : le carré de fond de la palette. Utile si vous voulez conférer une possibilité de Drag'n'Drop à votre palette.
    - currentcolor : la dernière couleur validée.
    - colfinal : la couleur actuellement selectionnée.
    - texte : le champ texte contenant le code de la couleur actuellement selectionnée (accéder à la valeur par texte.text).

/* code actionscript */
private function getSWF()
{
     var request:URLRequest = new URLRequest("colorpicker.swf");
     var loader = new Loader();
     
     // load bar
     newLoadBar();
     
     loader.contentLoaderInfo.addEventListener(Event.INIT, initHandler);
     loader.load(request);
}

private function initHandler(event:Event):void
{
     var loader:Loader = Loader(event.target.loader);
     var info:LoaderInfo = LoaderInfo(loader.contentLoaderInfo);
     var colorpicker = info.content;
     
     var monOK = function(e)
     {
          trace("La couleur selectionnée est: "+colorpicker.currentcolor);
     };
     
     colorpicker.btn_OK.addEventListener("click", monOK);
     //colorpicker.btn_close...
     //colorpicker.bg...
}

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