{"id":778,"date":"2011-04-10T08:11:20","date_gmt":"2011-04-10T06:11:20","guid":{"rendered":"http:\/\/www.hyperbate.com\/whatever\/?page_id=778"},"modified":"2011-04-10T08:11:20","modified_gmt":"2011-04-10T06:11:20","slug":"tutoriel-le-dessin-progressif-avec-flash","status":"publish","type":"page","link":"https:\/\/hyperbate.fr\/whatever\/tutoriel-le-dessin-progressif-avec-flash\/","title":{"rendered":"Tutoriel : Le dessin progressif avec Flash"},"content":{"rendered":"<p>Il existe plusieurs m\u00e9thodes pour donner l&rsquo;impression qu&rsquo;un trait de trace dans une animation Flash. La plus simple est sans doute d&rsquo;utiliser un masque.<br \/>\nL&rsquo;exemple qui suit est r\u00e9alis\u00e9 avec Flash 8 mais fonctionne pour toutes les versions.<\/p>\n<p>Premi\u00e8re \u00e9tape : on dessine d&rsquo;avance le trait tel qu&rsquo;il devra appara\u00eetre \u00e0 la fin de l&rsquo;animation.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-779 aligncenter\" src=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_1.png\" alt=\"\" width=\"498\" height=\"463\" srcset=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_1.png 498w, https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_1-300x278.png 300w\" sizes=\"(max-width: 498px) 100vw, 498px\" \/><\/p>\n<p>On \u00e9tire ensuite l&rsquo;affichage de ce trait sur un certain nombre de <em>frames<\/em>. Ce nombre d\u00e9pend de la dur\u00e9e que vous voulez donner \u00e0 votre animation. Ici, l&rsquo;affichage est \u00e9tir\u00e9 sur 20 images, dans un document dont la cadence est de 12 images par seconde. Le r\u00e9sultat durera donc un peu moins que secondes.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-780 aligncenter\" src=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_2.png\" alt=\"\" width=\"498\" height=\"463\" srcset=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_2.png 498w, https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_2-300x278.png 300w\" sizes=\"(max-width: 498px) 100vw, 498px\" \/><\/p>\n<p>On cr\u00e9e ensuite un nouveau calque, situ\u00e9 au dessus du premier.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-781 aligncenter\" src=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_3.png\" alt=\"\" width=\"498\" height=\"463\" srcset=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_3.png 498w, https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_3-300x278.png 300w\" sizes=\"(max-width: 498px) 100vw, 498px\" \/><\/p>\n<p>Avec le bouton droit de la souris (ou la combinaison control + clic sur Macintosh, ou encore en s\u00e9lectionnant la commande Modification &gt; Sc\u00e9nario &gt; Propri\u00e9t\u00e9s du calque dans les menus de Flash), on convertit le calque sup\u00e9rieur en masque. Un calque \u00ab\u00a0masque\u00a0\u00bb est un calque qui servira de \u00ab\u00a0pochoir\u00a0\u00bb au calque situ\u00e9 en dessous : seules les zones recouvertes par des parties pleines du masques seront visibles au moment de l&rsquo;exportation de l&rsquo;animation.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-782 aligncenter\" src=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_4.png\" alt=\"\" width=\"498\" height=\"463\" srcset=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_4.png 498w, https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_4-300x278.png 300w\" sizes=\"(max-width: 498px) 100vw, 498px\" \/><\/p>\n<p>Si tout se passe bien, on obtient la situation montr\u00e9e sur l&rsquo;image suivante : le calque sur lequel on a fait notre dessin est verrouill\u00e9 et il est inf\u00e9od\u00e9 au calque \u00ab\u00a0masque\u00a0\u00bb qui se trouve situ\u00e9 au dessus.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-783 aligncenter\" src=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_5.png\" alt=\"\" width=\"498\" height=\"463\" srcset=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_5.png 498w, https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_5-300x278.png 300w\" sizes=\"(max-width: 498px) 100vw, 498px\" \/><\/p>\n<p>On peut commencer \u00e0 dessiner sur le calque \u00ab\u00a0masque\u00a0\u00bb (avec l&rsquo;outil et la couleur qu&rsquo;on veut, \u00e7a n&rsquo;a pas d&rsquo;importance).<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-784 aligncenter\" src=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_6.png\" alt=\"\" width=\"498\" height=\"463\" srcset=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_6.png 498w, https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_6-300x278.png 300w\" sizes=\"(max-width: 498px) 100vw, 498px\" \/><\/p>\n<p>Ici, je donne juste des coups de pinceau rond. Apr\u00e8s chaque touche, je cr\u00e9e une nouvelle image-clef. Ainsi sur la premi\u00e8re frame il n&rsquo;y a qu&rsquo;une touche de pinceau, sur la seconde il y en a deux, etc.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-785 aligncenter\" src=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_7.png\" alt=\"\" width=\"498\" height=\"463\" srcset=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_7.png 498w, https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_7-300x278.png 300w\" sizes=\"(max-width: 498px) 100vw, 498px\" \/><\/p>\n<p>&#8230; Jusqu&rsquo;\u00e0 avoir recouvert l&rsquo;int\u00e9gralit\u00e9 du trait :<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-786 aligncenter\" src=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_8.png\" alt=\"\" width=\"498\" height=\"463\" srcset=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_8.png 498w, https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/masque_8-300x278.png 300w\" sizes=\"(max-width: 498px) 100vw, 498px\" \/><\/p>\n<p>Et lorsque tout est termin\u00e9, on peut lancer l&rsquo;animation (avec control + entr\u00e9e, pomme + entr\u00e9e ou bien en s\u00e9lectionnant le menu Contr\u00f4le &gt; Tester l&rsquo;animation.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-787\" src=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/trait.gif\" alt=\"\" width=\"400\" height=\"300\" srcset=\"https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/trait.gif 400w, https:\/\/hyperbate.fr\/whatever\/files\/2011\/04\/trait-300x225.gif 300w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<p>Et voil\u00e0, ce n&rsquo;est pas plus compliqu\u00e9 que \u00e7a.<br \/>\nLa fluidit\u00e9 de l&rsquo;effet d\u00e9pendra \u00e9videmment du nombre d&rsquo;\u00e9tapes de l&rsquo;animation du masque et de la pr\u00e9cision avec laquelle on aura travaill\u00e9.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il existe plusieurs m\u00e9thodes pour donner l&rsquo;impression qu&rsquo;un trait de trace dans une animation Flash. La plus simple est sans doute d&rsquo;utiliser un masque. L&rsquo;exemple qui suit est r\u00e9alis\u00e9 avec Flash 8 mais fonctionne pour toutes les versions. Premi\u00e8re \u00e9tape : on dessine d&rsquo;avance le trait tel qu&rsquo;il devra appara\u00eetre \u00e0 la fin de l&rsquo;animation. &hellip; <a href=\"https:\/\/hyperbate.fr\/whatever\/tutoriel-le-dessin-progressif-avec-flash\/\" class=\"more-link\">Continuer la lecture de <span class=\"screen-reader-text\">Tutoriel : Le dessin progressif avec Flash<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-778","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hyperbate.fr\/whatever\/wp-json\/wp\/v2\/pages\/778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hyperbate.fr\/whatever\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hyperbate.fr\/whatever\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hyperbate.fr\/whatever\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hyperbate.fr\/whatever\/wp-json\/wp\/v2\/comments?post=778"}],"version-history":[{"count":0,"href":"https:\/\/hyperbate.fr\/whatever\/wp-json\/wp\/v2\/pages\/778\/revisions"}],"wp:attachment":[{"href":"https:\/\/hyperbate.fr\/whatever\/wp-json\/wp\/v2\/media?parent=778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}