La Communauté Webmaster  forum rss


  Forum-webmaster
  Webdesign / graphisme
  Flash / Director
(Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  animation d'une signature
« Précédent Suivant »
Pages: [1] Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: animation d'une signature  (Lu 1386 fois)
animation d'une signature
« sur: le 29-08-2004 a 06:18:06 »
thot01
Membre récent
*

Hors-Ligne

Messages: 1



Je suis un lama!

Voir le Profil    E-Mail
Répondre avec citation

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
Je travaille avec la version Flash MX 2004 mais je suis débutant en programmation
C'est assez URGENT
Merci beaucoup pour l'aide @+

Rapporter au modérateur  

Re:animation d'une signature
« Répondre #1 sur: le 29-08-2004 a 13:34:34 »
jb_gfx
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 562





Voir le Profil    WWW
Répondre avec citation

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é).

Rapporter au modérateur  

http://www.pixemedia.com
Re:animation d'une signature
« Répondre #2 sur: le 29-08-2004 a 15:19:50 »
tavman
Habitué
***

Hors-Ligne

Messages: 466



HS

Voir le Profil
Répondre avec citation

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...

Rapporter au modérateur  

I-Radian
Re:animation d'une signature
« Répondre #3 sur: le 29-08-2004 a 23:58:41 »
jb_gfx
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 562





Voir le Profil    WWW
Répondre avec citation

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).

Rapporter au modérateur  

http://www.pixemedia.com
Re:animation d'une signature
« Répondre #4 sur: le 30-08-2004 a 14:14:16 »
tavman
Habitué
***

Hors-Ligne

Messages: 466



HS

Voir le Profil
Répondre avec citation

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.

@+

Rapporter au modérateur  

I-Radian
Re:animation d'une signature
« Répondre #5 sur: le 30-08-2004 a 15:17:04 »
jb_gfx
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 562





Voir le Profil    WWW
Répondre avec citation

Pas mal... couplé avec un masque pour afficher une texture ça doit permettre de jolis résultats.

Rapporter au modérateur  

http://www.pixemedia.com
Re:animation d'une signature
« Répondre #6 sur: le 30-08-2004 a 16:15:59 »
tavman
Habitué
***

Hors-Ligne

Messages: 466



HS

Voir le Profil
Répondre avec citation

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.

Rapporter au modérateur  

I-Radian
Re:animation d'une signature
« Répondre #7 sur: le 31-08-2004 a 01:48:26 »
hacknours
P'tit nouveau
**

Hors-Ligne

Sexe: Male
Messages: 137



Vive ActionScript !!!

Voir le Profil    WWW    E-Mail
Répondre avec citation

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...

Rapporter au modérateur  
Re:animation d'une signature
« Répondre #8 sur: le 31-08-2004 a 03:01:38 »
tavman
Habitué
***

Hors-Ligne

Messages: 466



HS

Voir le Profil
Répondre avec citation

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)

Rapporter au modérateur  

I-Radian
Re:animation d'une signature
« Répondre #9 sur: le 31-08-2004 a 15:37:19 »
jb_gfx
Superactif
****

Hors-Ligne

Sexe: Male
Messages: 562





Voir le Profil    WWW
Répondre avec citation

Citation de: 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...

C'est vrai j'avais pas pensé à ça... flash est bien stupide des fois

Rapporter au modérateur  

http://www.pixemedia.com
Re:animation d'une signature
« Répondre #10 sur: le 31-08-2004 a 21:04:35 »
tavman
Habitué
***

Hors-Ligne

Messages: 466



HS

Voir le Profil
Répondre avec citation

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...

Rapporter au modérateur  

I-Radian
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg