Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Ecriture à main levée, dessin progressif

Bonjour,

Bientôt les traditionnelles cartes de vœux, c'est le moment de ressortir mes vieilles classes qui prenaient consciencieusement la poussière depuis près d'un an ;-) et d'illustrer avec un petit air de saison ce qu'on peut en faire…


L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Le gros du travail n'a à voire qu'avec l'environnement auteur, et je m'adresse ici aux grapheux. Je considère donc que vous savez utiliser les outils de dessin de flash (plume, sous-sélection, déco, remplissage, transformation, etc.), que le menu Modification et ses commandes vous est familier ainsi que l'usage de la bibliothèque, des symboles, des instances…


Pour obtenir l'effet dessin progressif sur une phrase ou un tracé vous n'aurez qu'une ligne de code à saisir après avoir associé une classe au symbole concerné.

ici, les classes en question.

Puisqu'il s'agit d'utiliser des classes en les associant à des clips, et si vous voulez aborder le sujet un peu plus en profondeur, vous pourrez aller lire les deux pages du tuto POO par la pratique.

Principe

Une fois le paquetage fourni déposé sur votre disque vous n'aurez plus qu'à réaliser, à la souris, les illustrations de votre goût dans des clips. Leur associer via le panneau propriété une classe ou l'autre (il n'y en a que deux) et utiliser l'une des deux méthodes mises à votre disposition.

Une méthode remplit qui permet de dessiner progressivement le contenu d'un clip.
Une méthode ecritPhrase qui permet d'enchainer le remplissage successif de plusieurs clips

Avant de commencer

Téléchargez les sources jointes (décompactez bien sûr :mrgreen:), et glissez le répertoire DessinProgressif là où vous allez travailler, je veux dire dans le répertoire où vous créerez les fichiers .fla.



Gardez les fichiers .jfsl sous le coude pour tout à l'heure, tout le reste n'est que sources des exemples.

Démarrage rapide

Classe Mot et Méthode remplit

Voyons, pour attaquer sans plus de bavardage, le principe de base :
On veut ça :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu. L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu. L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
Il suffit d'un clip dans lequel dessiner la spirale, en prenant soin de placer ce qui sera le point de départ du tracé en 0/0.





Puis on lui donne pour classe de base Mot du paquetage DessinProgressif

Dans le panneau Propriétés cochez Exporter pour ActionScript et saisissez DessinProgressif.Mot dans le champ Classe de base, comme illustré ici.

Si vous avez placé le paquetage (dossier DessinProgressif) dans le même répertoire que le .fla du projet rien de plus à faire. Si vous l'avez placé ailleurs, il faudra le préciser dans les paramètres de publication pour vous rafraichir la mémoire, c'est là.

Posez une instance du clip sur la scène, nommez la… spirale, au hasard.
A l'exécution le clip restera transparent. Pour en lancer le remplissage il faut utiliser la méthode remplit.

spirale.remplit();


Illustré sur DemoSpirale.fla

si vous obtenez le message d'erreur de ce genre là :

Error: pas de pixel coloré sous le point de départ
at DessinProgressif::Recolorise/marche()
at DessinProgressif::Mot/remplit()
at DemoSpirale_fla::MainTimeline/frame1()



C'est qu'il n'y a rien (pas de dessin) au point d'origine. Vérifiez ;-)

Méthode Efface et propriété complet

Si vous voulez “effacer” un clip dans l'idée d'en reprendre le tracé plus tard, vous disposez de la méthode efface.
La propriété complet vaudra vrai ou faux selon que le tracé est complet ou non.

Par exemple, voici le code de la démo en spirale ci-dessus :

stage.addEventListener(MouseEvent.CLICK,marche);
function marche(me:MouseEvent):void {
	trace(demo.complet);
	if (! demo.complet) {
		demo.remplit();
	} else {
		demo.efface();
	}
}


Illustré sur DemoEffaceReprise.fla


Et voilà pour le principe :)

Méthode remplit par le détail

Comment ça marche

La méthode se contente de re-colorier le clip par contamination depuis le point 0/0, en progressant de pixel en pixel jusqu'à remplir complètement le dessin d'origine.

Pour le dessin vous devez impérativement n'utiliser que des formes (groupées au besoin), mais ni clip ni graphique.


Pour le reste vous êtes libres comme l'air, vous pouvez utiliser tout le potentiel graphique de Flash 1), dégradés et remplissages compris.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Du coup pour dessiner une boucle, il va falloir ruser. On y reviendra avec l'écriture.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Profitez en pour vérifier que c'est bien le clip tel qu'il apparait sur la scène, avec toutes les modifications que vous lui avez fait subir, qui est restitué.
Ci-dessous le même clip que précédemment seulement affligé d'une ombre portée et d'une teinte avancée :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Préciser le point de départ remplissage

Par défaut, on vient de le vérifier, la méthode re-colorie le clip en partant de son centre (x=0 / y=0), mais on peut lui passer en paramètres les coordonnées x/y de son choix

// recolorise l'instance nommée leClip en partant du point de coordonnées 50/120
leClip.remplit(50,120);


Ce qui peut être bien pratique quand un clip contient plusieurs formes qui ne se touchent pas. En effet, dans ce cas la “contagion” prend fin sitôt qu'une forme toute entière est remplie, les autres sont ignorées.
Pour faire pousser les trois arbres, qui - regardez bien - n'ont aucun pixel en commun, j'invoque plusieurs fois la méthode sur le même clip.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

demo.remplit();// premier arbre en 0/0, on va pas se compliquer inutilement non plus
demo.remplit(240,4);
demo.remplit(117,-55);

La vitesse de remplissage

Si vous vous êtes essayés avec moi au remplissage d'un 'H', un peu plus haut, peut-être avez vous constaté que que votre version se remplissait plus vite que l'illustration. C'est que j'ai triché, pour qu'on ait bien le temps de voir le processus de “capillarité” : j'ai ralenti le rythme.

Quand je disais, en intro, que les classes n'exposaient que deux pauvres méthodes, c'était pour vous allécher (pô bien :mrgreen:). En fait, elles sont un peu plus complètes que ça ;) et vous donnent par exemple, le moyen de paramétrer la vitesse de progression.
C'est la propriété cadence (int) qui vous permettra de modifier la célérité par défaut (valeur par défaut : 15). Plus la valeur est petite plus la vitesse est grande. Essayez sur la forêt :

demo.cadence = 50;//l'algo de remplissage est invoqué toutes les cinquante millisecondes
demo.remplit();
demo.remplit(240,4);
demo.remplit(117,-55);


Illustré sur DemoArbre.fla premières lignes

Un détour par JSFL

Associer la classe Mot à un clip, ce n'est pas un gros travail, il n'en reste pas moins que le faire plusieurs fois, vire vite à très lassant - pour rester correcte ;)
C'est pourquoi vous avez trouvé des fichiers .jfsl dans le zip proposé. Ils permettent d'enrichir le menu Commandes de Flash de quelques macros bien utiles.

La doc

Vous trouverez toutes les infos nécessaires dans la doc à la rubrique Extension de flash professionnel/Présentation/Utilisation de l’API JavaScript.
Au chapitre Enregistrement des fichiers JSFL, vous trouverez le chemin des répertoire où déposer les fichiers jfsl joins aux sources, selon le système d'exploitation de votre machine. Par exemple pour un Mac : Macintosh HD/Utilisateurs/nom d’utilisateur/Bibliothèque/Application Support/Adobe/Flash CS5 ou CS5.5/langue/Configuration/

Installer les fichiers .jsfl

Il vous suffit donc de déposer les deux fichiers .jfsl joints dans le répertoire adéquat selon les infos de la doc.
Si vous utilisez CS4 sous Mac, vous trouverez tout pareil un répertoire Flash CS42) C'est d'ailleurs ce à quoi correspond la copie d'écran ci-dessous


Utiliser le menu commandes

Et voilà, c'est tout.

Dans le menu Commandes de Flash vous allez voir apparaitre les items correspondants aux deux fichiers ajoutés :



Pour associer la classe Mot à un ou plusieurs symboles de la bibli, sélectionnez le(s), et choisissez la commande associerMot du menu Commandes, ayé c'est fait (trop fort !)3).

Nous voilà parés ! On peut continuer l'âme en paix.

Oui il y a troisième fichier dans le zip, au cas où vous prendriez goût à l'association en série de symboles à une même classe ;)
La commande s'utilise comme les deux autres si ce n'est qu'elle associe la classe de votre choix. Vous n'aurez qu'à en saisir le nom dans la boite de dialogue.

Enchaîner les animations de remplissage

Pour en finir avec le principe général, il me reste à vous dire un mot de l'événement COMPLETE diffusé par la classe quand le remplissage est terminé.

Par exemple vous pourriez souhaiter faire apparaitre les arbres successivement et non simultanément.

demo.addEventListener(Event.COMPLETE,enchaine);// quand un remplissage sera achevé la fonction enchaine sera invoquée
var cpt:int = 1;// pour compter les arbres
 
demo.cadence = 50;
demo.remplit();
 
function enchaine(e:Event) {
	if (cpt==1) {
// après le premier on change la cadence et on remplit le suivant en 240/4 
		demo.cadence = 15;
		demo.remplit(240,4);
	} else {
// ensuite on change encore la cadence et on remplit le suivant en 117/-55
		demo.cadence = 100;
		demo.remplit(117,-55);
	}
	cpt++;
}
Ce code est juste à titre d'illustration pour ce cas là bien précisément. Les if…else sont rarement une bonne idée, je me suis seulement attachée à rendre le code accessible au plus grand nombre, si vous avez beaucoup de zones à remplir, l'emploi d'un tableau pour stocker les coordonnées sera bien plus malin ;)


L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Illustré sur DemoArbre.fla lignes commentées

Vers l'écriture manuscrite : tracer des boucles


L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Le problème avec la boucle, c'est la zone de croisement (superposition) des lignes. Le principe de re-coloriage du clip par “propagation” implique qu'arrivé à une fourche toutes les branches sont remplies simultanément.


L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Il faudra alors tricher et décomposer la forme en autant de clips que nécessaire, puis enchainer les remplissages.

Découper le trajet

Vous vous y prendrez bien comme vous voudrez, pour ma part, je procède comme suit :
• sur un calque, la forme que je souhaite découper en plusieurs tronçons pour forcer un trajet4). Je verrouille pour être tranquille.
• copier-coller en place [cmd-maj-v] de la forme sur un autant de calques que de futurs tronçons (ici 2).
• découper la forme en traçant des lignes [y] d'une autre couleur.
• copier-coller en place [cmd-maj-v] la (les) ligne(s) de frontière sur le calque du tronçon concerné.
• ne reste plus qu'à sélectionner en cliquant dans la zone considérée le tronçon à isoler, à vérifier la sélection en changeant la couleur, et…
• … à supprimer tout le reste.

Pensez à double-cliquer sur les lignes afin de les sélectionner toute entières avant de les supprimer, sans quoi vous risquez de vous retrouver avec des petites “crottes” de reste…





Il ne reste plus ensuite qu'à convertir le tronçon de chaque calque en un symbole5), et à associer la classe DessinProgressif.Mot à ces symboles (vive la commande perso qui le fait ! \o/).

On peut maintenant facilement reconstituer une chaine après avoir fait coïncider les deux instances qui constituent une boucle et en procédant par duplications successives (alt-glisse) et autres retournements.


Maintenant… Non, on ne va pas se compliquer à gérer l'enchainement à coups d'écouteurs. Je vous ai parlé d'une autre classe, c'est le moment de s'en occuper.

Méthode EcritPhrase

L'idée c'est de regrouper dans un même clip tous ceux qui, associés à la classe Mot, doivent être enchainés.
Sélectionnons donc tous les morceaux de boucle, puis transformons en clip [F8] (on se moque de la position du point d'origine) et associons ce clip à la classe EcritPhrase du paquetage DessinProgressif - si vous le souhaitez vous disposez de la commande idoine ;)

Une seule chose à respecter un clip par calque, l'enchainement se fera automatiquement depuis le calque inférieur.


Je vous rappelle à toutes fins utiles que [maj-D] répartit les objets sélectionnés sur autant de calques que d'objets…



Je dis : l'enchainement se fera automatiquement… Oui, pour peu qu'on le déclenche ;)
C'est la méthode EcritPhrase qui s'en charge :

ressort.ecritPhrase();



Illustré sur ressort.fla

Le délai entre deux mots

Il est des circonstances où on peut souhaiter jouer sur le délai d'enchainement. Par défaut aussitôt un clip remplit, le remplissage du suivant débute. Si vous souhaitez modifier ce délai, passez la valeur souhaitée - en millisecondes - à la méthode ecritPhrase.

Vous auriez par exemple pu faire la forêt (aux trois arbres) sans écouteurs en convertissant chacun des arbres en un clip et en les enfermant dans un symbole (Mv_Foret) associé à Phrase. Imaginons une instance nommée foret, une seule ligne, et les arbres se remplissaient successivement avec un délai de 100 millisecondes entre chaque arbre :

forêt.ecritPhrase(100);
Attention, la classe phrase expose une propriété cadence elle aussi, mais du coup valable pour l'ensemble des clips destinés ) être remplis.

Enchaîner les phrases

Tout comme la classe Mot, la classe Phrase diffuse un événement quand le boulot est terminé, c'est aussi un événement event.COMPLETE. Il s'utilise tout pareil.

Vous trouverez une exemple sur le fichier DemoPourVoir.fla.

Associer un pinceau au tracé

Vous pouvez aussi souhaiter associer un symbole à la progression du remplissage. Je vous prévient tout de suite, ça a ses limites et ce n'est pas forcément du meilleur effet si le tracé est épais.

Voici la méthode à suivre :
Il faut bien entendu un clip qui suivra la progression du tracé, dans le code reproduit on considère une instance nommée traceur.
Il s'agit ensuite d'écouter un événement diffusé lors du remplissage, c'est un événement perso (classe EvPerso). L'objet événement expose deux propriétés, l'une pour l'objet d'affichage en cours de remplissage (clip), l'autre pour le point en cours de traitement (p). Comme ce n'est pas un tuto, je m'économise de l'explication du pourquoi du comment, et vous invite à reproduire l'exemple ci-dessous qui déplacera le clip nommé traceur au fur et mesure du remplissage de n'importe quel clip, qu'il soit associé à Mot ou à Phrase :

 
import DessinProgressif.EvPerso;// n'oubliez pas !
 
stage.addEventListener(EvPerso.TAG,suitDessin);
 
//  un clip qui suit le tracé;
function suitDessin(e:EvPerso) {
	//e.clip l'objet bitmap
	//e.p un point du front
	var p_c:Point = e.clip.localToGlobal(e.p);
	traceur.x = p_c.x;
	traceur.y = p_c.y;
}


Illustré sur BonneAnnee2.fla

Ruser avec des clips animés

Une dernière petite chose, imaginons que vous souhaitiez remplir progressivement un clip, qui ensuite s'animera, comme sur l'exemple aux bougies.
La ruse est simple : un visuel (forme ou groupe) sur l'image 1, et l'animation sur l'image suivante. On écoute le remplissage, une fois terminé ou passe image suivante. Vous pouvez utiliser les six méthodes du scénario : play, gotoAnd… et autre nextFrame.

Illustré sur BonneAnnee3.fla

Rendre à Billy ce qui est à Billyben

Ces classes sont loin d'être adaptées à tous les cas de figure, et bien des choses pourraient être améliorées (à commencer par le nom des classes elles même… oui mais voilà c'est historique et j'ai la flemme de reprendre tous les fichiers d'illustration). Je me suis bricolé ça pour un usage très ponctuel, très perso. Que les dev égarés dans le coin ne se privent pas d'améliorer la chose !

Si vous voulez éplucher le principe, sachez que j'ai détourné et réadapté à ma problématique le travail de Billyben, qui lui s'attachait à faire disparaitre une image par grignotage de pixels.

J'ai donc repris le principe de progression par “capillarité” de pixel en pixel.
Lui les fait disparaitre, moi je leur ré-applique leur couleur d'origine, puisque j'ai commencé par tout passer en alpha quasi zéro.


Souhaitant que ces classes vous soit de quelque utilité, je dépose ici des gerbes de remerciements à l'attention du grand Billy, sans qui mes velléités d'écriture à main levée en serait toujours à ce stade : velléités !

_O_


Si vous avez des questions ou commentaires, le sujet dédié se trouve là

MAJ

Retrouver mes vieilleries m'a donné envie de jouer, et je les ai un peu enrichies :
la classe Phrase expose maintenant une méthode efface, qui efface tous les clips contenus et une propriété rempli6) qui vaut vrai si tous les clips inclus sont remplis.
Exemple de mise en œuvre ci-dessous, code dans les sources :)

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu. source : decouvre.fla


Cliquer pour remplir les zones, maj-clic pour révéler le tracé
clowClic source : clownclic.fla

1) voir d'Illustrator ou Photoshop ;)
2) Macintosh HD/Utilisateurs/nom d’utilisateur/Bibliothèque/Application Support/Adobe/
3) on va voir l'usage de la deuxième commande : associerPhrase dans pas longtemps
4) en fait, c'est par sécurité, si tout se passe bien elle ne servira à rien
5) penser au point de coordonnée 0/0 qui doit être au bon endroit
6) booléenne, en lecture seule