AccueilAccueil  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  ConnexionConnexion  

Partagez | 
 

 Créer une application de dessin

Aller en bas 
AuteurMessage
allstar27
A l'aise
A l'aise
avatar

Messages : 98
Date d'inscription : 20/08/2007
Age : 34
Localisation : Liège

MessageSujet: Créer une application de dessin   Sam 1 Sep - 17:10

Cet exercice va vous permettre de développer votre propre logiciel de dessin vectoriel en Flash, qui consiste en une feuille de papier sur laquelle vous pouvez dessiner à la souris, en choisissant l'épaisseur du trait, sa couleur et sa transparence. Bien évidement, cette petite application est loin de concurrencer des logiciels tels que Photoshop ou Painter, mais cet exercice nous permettra d'aborder de nouvelles fonctions ActionScript.

Préparer la scène

1. Créez un nouveau document Flash (Ctrl+N) dont la scène mesure 650 pixels de large sur 500 pixels de hauteur, à une cadence de 30 images par secondes. Modifiez la couleur de fond pas un gris foncé.

2. Dessinez sur la partie de droite de la scène un rectangle blanc de 450 pixels de large sur 490 pixels de haut. Il s'agira de la feuille sur laquelle vous dessinerez.



3. Ouvrez le panneau Coposants (Ctrl+F7) et, depuis le menu User Interface de ce panneau, déposez deux composants NumericStepper dans le coin supérieur gauche de la scène. Placez au-dessus de chacun d'eux zone de texte statique de couleur blanche contenant respectivement Epaisseur et Transparence.

4. Donnez comme nom d'occurence epaisseur au stepper qui modifiera cette propriété et, dans le panneau de Paramètres, mettez la valeur maximum à 5, minimum à 1, stepSize à 1 et value à 1. Pour le second stepper, donnez-lui comme nom d'occurence transparence, la propriété maximum à 100, minimum à à 10, stepSize à 10 et value à 100.



5. Nous allons maintenant réaliser un sélecteur de couleur. Pour cela, réalisez une capture d'écran du sélecteur de couleur de Flash, en appuyant sur la touche Imp.écran de votre clavier.



6. A l'aide d'un logiciel de traitement d'images tel que Photoshop, sauvegardez uniquement le carré de dégradés sous un fichier image JPG. Importez ensuite cette image dans Flash (Ctrl+R) et placez-la sur la scène.



7. Placez ensuite un rectangle noir en dessous du sélecteur de coleur, sur tout sa largeur.

8. Enfin, placez un bouton Effacer que vous créé, sur le bas de la scène.

9. Convertissez le fichier image du sélecteur de couleur en clip d'animation ayant pour nom d'occurence palette, convertissez aussi le rectangle noir en clip d'animation avec pour nom d'occurence choix, et convertissez la feuille blanche en clip d'animation avec comme nom d'occurence feuille.



Ecrire le code ActionScript

1. Créez un nouveau calque par-dessus qui contiendra le code ActionScript. Le principe de cette table de dessin est de créer un clip d'animation vide qui contiendra les lignes dessinées par l'utilisateur. Pour cela, nous allons tout d'abord créer ce clip vide. Dans le panneau Actions, entrez ce code:

Code:
_root.createEmptyMovieClip("ecran", 0);

2. La fonction CreateEmptyMovieClip() crée un clip d'animation vide, d'un nom d'occurance donné, à un niveau précis. Ici, ce clip a poru nom d'occurence ecran et se situe sur le niveau 0.

3. Nous allons maintenant créer le code qui permettra de réellement dessiner sur la feuille. Pour cela, nous utiliserons la méthode lineTo(), qui permet de dessiner une ligne d'un point à un autre. Tout d'abord, nous allons paramètrer: l'épaisseur du trait, la couleur et la transparence. A la suite de votre code ActionScript, inscrivez ceci:

Code:
onMouseMove = function() {
ecran.lineStyle(epaisseur.value, 0x000000, transparence.value);
ecran.lineTo(ecran._xmouse, ecran._ymouse);
}
N'OUBLIE PAS LES TABULATIONS

4. L'épaisseur de la ligne est ainsi définie par la valeur du stepper epaisseur, et la transparence est associée à la valeur de son stepper. La couleur de la ligne est définie en code hexadécimal; ici, la couleur 000000 correspond à noir. Ce code définit la valeur des trois canaux rouge vert bleu en langage hexadécimal. Puis la méthode lineTo() trace une ligne entre chaque point situé sous le curseur de la souris, ce qui fais que la pointe du crayon est comem attaché au curseur. Enfin, nous mettons ce script dans un gestionnaire onMouseMove(), ce qui permet d'être appelé à chaque mouvement de la souris et utilisera moins de ressources qu'un gestionnaire onEnterFrame().

5. Le problème qui se pose est que les lignes se font automatiquement et sur toute la scène, ce qui n'est pas le but souhaité de cet exercice. De plus, le point de départ se situe au point (0;0), et non à l'endroit où se trouve la souris. Modifiez votre code complet pour obtenir celui-ci:

Code:
_root.createEmptyMovieClip("ecran", 0);
dessine = false;

feuille.onPress = function() {
ecran.moveTo(_xmouse, _ymouse);
dessine = true;
}

feuille.onRelease = function() {
dessine = false;
}

onMouseMove = function() {
if(dessine == true) {
ecran.lineStyle(epaisseur.value, 0x000000, transparence.value);
ecran.lineTo(ecran._xmouse, ecran._ymouse);
}
}
N'OUBLIEZ PAS LES TABULATIONS

6. Qu'avons-nous fait? Nous avons simplement créé une variable dessine qui indique si oui ou non l'utilisateur clique ou relâche la souris sur le clip feuille. Aussi, à chaque fois que la souris est appuyèe sur la feuille, nous utilisons la méthode moveTo(), qui permet de déplacer le point de départ de la ligne. Testez votre animation: vous pouvez maintenant réellement dessiner en cliquant. Testez aussi la transparence et l'épaisseur du trait.

7. Le bouton Effacer, quant à lui s'occupera simplement d'effacer le clip ecran et d'en créer un mouvement. Le code à placer sur ce bouton est donc:

Code:
on(release) {
removeMovieClip("ecran");
_root.createEmptyMovieClip("ecran", 0;
}

Le sélectionneur de couleur: la classe BitmapData

Une étape importante de cet exercice est la création d'un sélectionneur de couleur en Flash. Comme nous l'avons vu, la méthode lineStyle() possède un paramètre de couleur, que vuos pouvez modifier. Bien sûr, nous pourrions créer une zone de texte dynamique où l'utilisateur entre la valeur en hexdéimal de la couleur, mais ce n'est ps forcément attractif comme méthode. Ici, nous utiliserons une nouvelle propriété propre à Flash 8 qui est la classe BitmapData. Cette classe, associée à la méthode getPixel(), permet de récupérer le code couleur d'un pixel présent à l'écran. Dans notre exercice, nous allons donc récupérer la couleur d'un pixel de la tablette et attribuer cette couleur à celle de la méthode lineStyle().

1. En dessous de la déclaration de la variable dessine, écrivez ce code:

Code:
bmp = new flash.display.BitmapData(175, 187);
bmp.draw(palette);

2. Tout d'abord, nous créons un élément BitmapData appelé bmp, d'une taille de 175 pixels de large sur 187 pixels de hauteur. Ces dimensions ne sont pas mises au hasard, il s'agit en fait de la taille de l'image importée dans Flash, qui nous sert de sélecteur. Changez ces valeurs selon la taille de votre image. Ensuite, nous utilisons la méthode draw(), qui permet d'associer l'élément BitmapData au clip d'occurence palette.

3. Ajoutez ensuite ce code:

Code:
palette.onRelease = function() {
couleur = bmp.getPixel(palette._xmouse, palette._ymouse);
couleur_hexa = "0x" + couleur.toString(16);
new Color(choix).setRGB(couleur_hexa);
}

4. Ce code s'exécutera uniquement lorsque l'utilisateur relâchera le bouton de la souris au-dessus du clip d'occurence palette, c'est à dire notre sélecteur de couleur. Nous utilisons ensuite la méthode getPixel(), qui retourne la couleur du pixel de coordonnées égales à la position de la souris, que nous associons à la variable couleur. Ensuite, cette variable est convertie en couleur_hexa. Enfin, nous créons un nouvel objet Color qui nous permet d'attribuer une couleur, en l'occurence couleur_hexa, au petit rectangle situé en dessous du sélecteur, afin d'avoir un viuel précis de la couleur obtenue.

5. Il ne nous reste plus qu'à attribuer cette couleur également au style de la ligne. Modifiez le code à cet endroit afin de mettre celui-ci:

Code:
ecran.lineStyle(epaisseur.value, couleur_hexa, transparence.value);

RESULTAT

http://img264.imageshack.us/my.php?image=paintvr0.swf

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://kenza-farah.exprimetoi.net
 
Créer une application de dessin
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Ce n'est plus seulement un dessin...
» Démarrage application impossible ... [RESOLU]
» Peut-on nettoyer sans risques le dossier Local Settings\Application Data\ ?
» Application pour tablette
» [Résolu] Peut-on nettoyer sans risques le dossier Application Data ?

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Val-Création :: Espace Graphisme :: Tutos Flash-
Sauter vers: