tutorial flash paint

tutorial; (Flash) paint flash part 1

niveaux intermédiaire

 Etape 1 paramètrage de base

-ouvrez un nouveau document flash

-faites ctrl + J (ou modify > document)

-paramètrez comme ci dessous;

Etape 2 le graphique

pour insérez une nouvelle image faites ctrl + R (file > import > import to stage)

insérez cette image en la copiant sur votre moniteur; (clic droit > enregistrer l’image sous)

-une fois insérez, cliqué dessus puis paramètrez comme ci dessous; (en bas a gauche)

-créez un nouveau layer (calque en francais)

-comme indiqué ci-dessous; et renommez-le bouton, et le premier fond. (pour renommez cliquez deux fois sur le calque )

-appuyez sur la premiere frame (image en francais)

-puis, ctrl + R et chargez l’image ci dessous, comme précédemment

-positionnez le en, x : 14.0 et y : 118.0

-appuyez sur F8 (pour créez un nouveau bouton ou clip) et nommez le, btn_efface

-Cliquez 2 fois sur le bouton que vous venez de créez pour l’éditer vous devriez obtenir ceci;

-appuyez 2 fois sur F6 pour créez des nouvelle copy-frames

-créez un nouveau layer (calque)

-sur ce nouveau calque, appuyez également 2 fois sur F6

sélectionnez l’outil crayon et enlevez lui sa fonction comme ci-dessous;

-Maintenant de la couleur de votre choix, alpha = 17 créez un carré en frame Over

-redimensitonnez- le en cliquant dessus, puis en bas à gauche, W: 40.0 & H: 40.0, placement x: -20.1 & y: -20.0

-faites de même avec la frame Down et changez l’alpha du carré en alpha = 30

-revenez sur la scène 1 en cliquant dessus

-créez un nouveau layer, renommez le btn invisible

-sur ce même calque, en frame 1, créez un cube, alpha = 0, de taille, W: 17.2 & H: 17.0, position x: 14.9 & y: 37.0

-recommencez l’opération en positionnant le nouveau cube en x: 14.9 & y: 59.7, et x: 14.9 & y: 81.7

-recommencez les opérations précédentes mais cette fois-ci en créant un carré de taille W: 16.4 & H: 16.4, pos x: 36.1 & y: 37.1

-recommencez, avec le 16.4, position x: 36.1 & y: 60.3, pos x: 36.1 & y: 81.7

-après toutes ces opérations répétitivent, pour chaqun des cubes faites-ens des boutons que vous nommerez btn_rouge, btn_bleu, btn_vert, btn_jaune, btn_bleu_f, btn_rose, etc…

-cliquez sur chaqun d’eux et nommez les comme ci dessous;

-pour le btn_efface de même.

Etape 3 le scriptage

-créez un nouveau calque que vous renommerez script

vous devriez obtenir ceci;

-Pour commencez à créez un script appuyez sur la première frame de script et faites F9

-puis copiez le script ci-dessous;

//createEmptyMovieClip sert à créer un clip vide
//pour y ajoutez quelque chose
peinture = createEmptyMovieClip("peinture",1);
//color = code couleur
color = "0x000000" ;
//opac = niveau opacité 0 - 100
opac = "100" ;
// pinceau = notre nouvelle objet
pinceau = new Object();
//on press la souris on déclanche une Action, true = vrai,
//et moveTo est désigné pour placé
//le lineTo a l'endroit ou on press avec notre souris)
pinceau.onMouseDown = function(){
Action = true;
peinture.moveTo(_xmouse,_ymouse);
peinture.lineTo(_xmouse+1,_ymouse+1);
}
//quand la souris bouge la ligne suis le mouvement
pinceau.onMouseMove = function(){
if(Action){
peinture.lineTo(_xmouse,_ymouse);
}
}
// quand on relache Action, false = faux, plus de peinture
pinceau.onMouseUp = function(){
Action = false;
}
Mouse.addListener(pinceau);
//onEnterFrame designe une fonction qui se repète
peinture.onEnterFrame = function(){
//la fonction mathrandom est ici pour varié l'épaisseur
trait = Math.round((Math.random() * 5)+2);
//lineStyle, trait = clip, couleur, opacité
peinture.lineStyle(trait,color,opac);
}
//on appuit sur le bouton(onPress) on modifie la couleur
btn_rose.onPress = function(){
color = "0xFD6CE1" ;
}
btn_bleu_f.onPress = function(){
color = "0x1A53F8" ;
}
btn_vert.onPress = function(){
color = "0x28D308" ;
}
btn_jaune.onPress = function(){
color = "0xFFDF0E" ;
}
btn_bleu.onPress = function(){
color = "0x039EEE" ;
}
btn_rouge.onPress = function(){
color = "0xF50302" ;
}
//on press le btn_efface on efface la peinture = clear
btn_efface.onRelease = function(){
peinture.clear();
}

resultat final. (je suis desolé le blog ne gère pas encore le flash)

- -> apercu final <- -

[ fichier .fla ]

merci d’avoir suivi ce tutorial

by nonitt

 

pour toutes questions postez un commentaire

vous serez repondus au plus vite