Flash - changer dynamiquement la couleur d´un clip.

A l'aide de boutons, nous allons changer dynamiquement la couleur d'un clip posé sur la scène grace à quelques lignes de codes.

VOIR L'ANIMATION FLASH PLEINE PAGE DANS UN NAVIGATEUR

Pour débuter, nous utiliserons la photo d'une basket Convers au format .jpg de taille 500x500 pixels.

Importez cette photo sous Photoshop, enregistrez là au format natif de Photoshop, c'est à dire au format .psd. Utilisez ensuite la baguette magique pour sélectionner la partie colorée de la basket, exportez ensuite cette sélection au format .png afin de conserver les transparences tout en conservant les propriétés de taille de 500x500 pixels.

 Coté animation Flash, nous allons créer 4 calques, sur le premier 'AS' nous écrirons notre script sur l'image 1. Sur le calque 2 'boutons_nuancier' sur lequel nous positionnerons les occurences du bouton 'btn_couleur'. Le calque 3 'convers_partie_col...' receuillera le clip de la partie colorée au format .png. Le dernier calque 4 'convers_complete' va hébergé le clip de la basket complète au format .jpg.

 

Dans la bibliothèque nous retrouvons les deux bitmap 'convers_color.png' et 'convers_totale' que nous avons importé 'vers la bibliothèque'. Glissez/déposez sur la scène depuis la bibliothèque 'convers_color.png' convertissez cette image en MC (MovieClip) grace à la commande Modification>Convertir en symbole (F8), choisissez clip et le nommer le 'color'. Sur la scène nommer cette occurence 'colored'. Sur le calque situé immédiatement dessous (calque 4'convers_complete') glissez/déposez sur la scène depuis la bibliothèque la photo 'convers_totale.jpg' convertir cette image en MC (MovieClip) grace à la commande Modification>Convertir en symbole (F8), choisir clip et le nommer 'convers_complete'. Sur la scène nommer cette occurence à votre guise.

 Veuillez à bien aligner les MC des calques 3 et 4 au centre de la scène, afin que l'image de la partie colorée soit parfaitement alignée avec la partie colorée de la photo de la basket complète située juste au dessous.

Fabriquez un nouveau symbole de type bouton, composé simplement d'un carré, nommez ce bouton 'btn_couleur' dans la bibliothèque.

 Glissez/déposez des occurences du symbole 'btn_couleur' sur la scène sur le calque 'bouton_nuancier', nommez chacune des occurences de ces boutons sous le forme 'btn_1', 'btn_2' ect... Pour choisir une couleur différente pour chaque bouton, sélectionnez l'occurence puis allez dans le panneau 'propriétés' (en général disposé sous la scène), choisissez 'Teinte' dans la liste déroulante de 'Couleur' et choisissez une couleur dans le nuancier ou bien entrez le code héxadécimal de la couleur désirée.

 

Voilà il ne nous reste plus qu'à écrire quelques lignes de code sur l'image 1 du calque 1

On commence par déclarer une variable maCouleur de type Color qu'on applique à au MC 'colored' déposé sur la scène. Ensuite pour chacun des boutons, on applique une fonction qui change le code héxadécimal de la couleur en faisant varier ma variable 'maCouleur'.

//======================================
//Gestion des couleurs ====================TekProd
//======================================

var maCouleur:Color = new Color (colored);


btn_1.onPress = function(){
 maCouleur.setRGB(0x000000);
}

btn_2.onPress = function(){
 maCouleur.setRGB(0xFFFFFF);
}

btn_3.onPress = function(){
 maCouleur.setRGB(0xFF0000);
}

btn_4.onPress = function(){
 maCouleur.setRGB(0x3CB33C);
}

btn_5.onPress = function(){
 maCouleur.setRGB(0x0033FF);
}

btn_6.onPress = function(){
 maCouleur.setRGB(0xFFFF00);
}

btn_7.onPress = function(){
 maCouleur.setRGB(0x00FFFF);
}

btn_8.onPress = function(){
 maCouleur.setRGB(0xFF00FF);
}

btn_9.onPress = function(){
 maCouleur.setRGB(0xFF6600);
}

Patrick

Imprimer