Titre: animation d'une signature
Posté par: thot01 le le 29-08-2004 a 06:18:06
Bonjour,
Je voudrais réaliser un effet de signature "en direct", c'est à dire, "faire en sorte que l'on voie la signature se dessiner comme si la personne signait sur le site Web".
Je n'ai aucune idée de la façon de procéder ???
Quelqu'un pourrait-il m'aider :P
Je travaille avec la version Flash MX 2004 mais je suis débutant en programmation :P
C'est assez URGENT :-[
Merci beaucoup pour l'aide @+ |
Titre: Re:animation d'une signature
Posté par: jb_gfx le le 29-08-2004 a 13:34:34
Version tres simple:
Tu dessine ta signature dans flash avec les outils de dessin vectiriels. Tu créé tes images pour l'animation. Puis tu part de la fin vers le début de lanim en effaçant à chaque fois un peu plus de ta signature.
Sinon j'aurais plutot fais avec des chemins d'anims et/ou des masques, dans ce cas je te conseil de jetter un oeil à la doc (notement les tutoriels d'introduction, tout est expliqué). |
Titre: Re:animation d'une signature
Posté par: tavman le le 29-08-2004 a 15:19:50
jb_gfx : c'est la galère ton plan là gros... Il va passer 3 heures pour faire le truc.
Solution plus simple :
Tu commence par apprendre a te servir des guides de mouvements avec les interpolations. Ensuite, tu fait bougé un clip sur le guide de mouvement, et tu dessine le suivit du clip avec une fontion comme ca :
/////
// Sur la 1ere frame :
this.createEmptyMovieClip(Dessine, 0);
Dessine.lineStyle(0,0,100)
Dessine.moveTo( MC._x, MC._y);
this.onEnterFrame = function (){
Dessine.lineTo( MC._x, MC._y);
};
/////
// Sur la derniere frame :
delete(this.onEnterFrame);
Sachant que MC est l'occurence du clip qui suis le guide de mouvement. Tu peut en plus de cela t'arranger pour changer l'épaisseur des traits au fure et a mesure.
Bonne chance a toi.
PS : si t'as pas trop compris jte refilerai un exemple prcq là, chui un peu a l'ouest donc désollé pour les explications foireuse... |
Titre: Re:animation d'une signature
Posté par: jb_gfx le le 29-08-2004 a 23:58:41
Sûr que ta version est plus propre mais avecma technique n'importe qui peut le faire (en 5minutes pas en 3 heures) vu que notre ami precisait : " je suis débutant en programmation".
L'autre problème c'est que avec ce bout de code (qui est par ailleur trés bon) tu peux pas avoir le resultat graphique que tu veux, tu reste limité à un tracé basique (ah moins qu'il y ai une combine). |
Titre: Re:animation d'une signature
Posté par: tavman le le 30-08-2004 a 14:14:16
Bahhh biensur qu'il y a une combine... Mais derriere, c'est vrai que c'est un petit morceau de code qui dépasse notre ami.
En fait, si tu te renseigne sur lineStyle, tu voit que tu peut changer la largeur des traits (tu peut faire des traits de 1000 px de large si tu veut).
Donc après celà, en fonction de l'ancienne position du clip (celui qui bouge sur le guide) et de sa nouvelle position, on peut calculer la largeur des traits et obtenir des traits horizontaux épais et verticaux fin (ou l'inverse si on veut). Pour celà, il suffit juste de rajoutter la ligne lineStyle et de changer les parametres a l'intérieur. Donc au final, on peut obtenir de très bon effets avec cette technique... Je vais essayer de bidouiller un ptit morceau de code vite fait.
@+ |
Titre: Re:animation d'une signature
Posté par: jb_gfx le le 30-08-2004 a 15:17:04
| Pas mal... couplé avec un masque pour afficher une texture ça doit permettre de jolis résultats. |
Titre: Re:animation d'une signature
Posté par: tavman le le 30-08-2004 a 16:15:59
Hélas non... y a pas moyen de faire ca et ce pour une raison très bete : les lignes sur des masques n'ont aucun effet... C'est comme si tu avait un masque vide en fait... C'est idiot mais c'est comme ca. Pourtant, je suis pas sur que ca aurait posé de gros problemes a macromédia de faire celà mais bon...
bon, pour ceux qui veulent un exemple, faudrai me refiler une adresse parceque là, j'arrive plus a aller sur mon FTP... Donc c'est relou. Mais bon, je donne le code quand meme (après ca, c'est a vous de l'appliquer) :
/////
// pour la 1ere Frame :
createEmptyMovieClip("Dessine", 0);
Dessine.lineStyle(0, 0, 100);
Dessine.moveTo(MC._x, MC._y);
var OldX:Number = MC._x;
var OldX:Number = MC._y;
Epaisseur = 1;
this.onEnterFrame = function() {
Epaisseur = Math.round(Math.abs((MC._x-OldX)/2+(MC._y-OldY)/4)+2);
Dessine.lineStyle(Epaisseur, 0, 100);
Dessine.lineTo(MC._x, MC._y);
OldX = MC._x;
};
Ca peut sembler compliquer mais en fait, c'est assez simple a faire... suffit de savoir comment on fait des guides de mouvements. |
Titre: Re:animation d'une signature
Posté par: hacknours le le 31-08-2004 a 01:48:26
Pour ma part, j'ai toujours utilisé la version jb_gfx...
Ca permet de choisir la typo que tu veux, mais c'est vrai que c'est plutôt long à faire... :p
Par contre je pense que vous êtes hors sujet tout les deux. si je reprend la phrase de thot01 il demande : "un effet de signature en direct comme si la personne signait sur le site Web"
Je pense qu'il s'agit là d'un truc comme www.isketch.net où tu dessine quelque chose avec ta souris.
Au quel cas... ce serait pas si simple. Pour ma part j'ai essayé d'un faire un et je n'arrive qu'a obtenir soit des points, soit des lignes décousues, soit des lignes attachées avec un très moche effet porc-épic sur les courbes.
La version la moins pire en code
Code:
// sur un clip vide appelé lou (c'est mon surnom)
onClipEvent (enterFrame) {
_x+=(_root._xmouse-_x)/2;
_y+=(_root._ymouse-_y)/2;
_root.niveau+=1;
_root.createEmptyMovieClip ("dessine", _root.niveau);
with (_root.dessine){
lineStyle (5, 0xFF00FF, 100);
moveTo (this._x,this._y);
lineTo (_root.sui._x, _root.sui._y);
}
}
// sur un clip vide appelé sui
onClipEvent (enterFrame) {
_x+=(_root.lou._x-_x)/2;
_y+=(_root.lou._y-_y)/2;
}
|
|
En plus j'imagine qu'il voudra s'en servir pour le transformer en image à envoyer par mail... (enfin c'est une supposition)
A bientot pour de nouvelles aventures... |
Titre: Re:animation d'une signature
Posté par: tavman le le 31-08-2004 a 03:01:38
Mais qui a dit qu'avec ma technik tu pouvait pas utiliser la typo que tu veut ?? Suffit d'écrir ton texte, de faire Ctrl+B 2 fois de suite (pour le transformer en graphisme), d'utiliser l'encrier pour dessiner le contour de chaque lettres, et de s'arranger ensuite pour faire une seule ligne avec tout ca. Après, tu pose sur le guide de mouvement et voila, c'est parti...
Bon en tout cas, si il veut faire ce que tu veut, c'est loin d'etre compliqué :
createEmptyMovieClip("Dessine", 0);
Dessine.lineStyle(0, 0, 100);
Dessine.moveTo(_xmouse,_ymouse);
var Souris:Object = new Object();
Souris.onMouseMove = function(){
Dessine.lineTo(_xmouse,_ymouse);
}
Mouse.addListener(Souris);
Enfin là, c'est dés qu'il bouge la souris... Donc forcément, c'est très limite, mais il faudrai gérer avec le onMouseDown et onMouseUp pour savoir quand dessiner...
Si il veut faire un envoit d'image par mail, c'est en effet un peu plus chaud et faudra passer par un script coté serveur...
Le mieux je pense serait de faire une liste qui contiendrai les listes des coordonnées de chaques points (sachant que t'as une liste par ligne dessinée), d'envoyer tout ca a un ptit php qui créra un fichier texte et de récupérer les données ensuite (en utilisant une BDD biensur).
Enfin bon, là, c'est quand meme de la haute voltige, faut pas s'imaginer nan plus qu'on peut faire ca après 3 semaines de flash... rien que l'envoit des données, C chiant, alors après ca, vu qu'on récupère un txt avec les coordonnées de chaques points, c'est une String et on veut une Array... bref, c'est la merde... Enfin bon voila quoi... Bonne chance a thot01 si il veut faire ca (et montre nous le résultat STP) |
Titre: Re:animation d'une signature
Posté par: jb_gfx le le 31-08-2004 a 15:37:19
Hélas non... y a pas moyen de faire ca et ce pour une raison très bete : les lignes sur des masques n'ont aucun effet... C'est comme si tu avait un masque vide en fait... C'est idiot mais c'est comme ca. Pourtant, je suis pas sur que ca aurait posé de gros problemes a macromédia de faire celà mais bon...
|
|
C'est vrai j'avais pas pensé à ça... flash est bien stupide des fois :( |
Titre: Re:animation d'une signature
Posté par: tavman le le 31-08-2004 a 21:04:35
Bahh ouais mais bon, ils se sont améliorer déjà a ce niveau là... avant (Flash 5), lorsque tu avait des lignes dans un masque, ca foutai une merde pas possible...
Mais bon, doit bien y avoir moyen de faire un petit tracage de forme tout tranquilou... mais ca va bouffer psa mal de ressources. En fait, faudrai tracer un rectangle a chaque frame.
Enfin bon, je pense sincérement que le mieux est encore de changer la couleur dans le lineStyle en utilisant une fonction qui fait une évolution progressive des couleurs avec des listes... |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|