{"id":1456,"date":"2014-07-24T15:15:26","date_gmt":"2014-07-24T15:15:26","guid":{"rendered":"http:\/\/www.ticeman.fr\/lecoutelas\/?p=1456"},"modified":"2018-07-29T20:52:07","modified_gmt":"2018-07-29T20:52:07","slug":"animatron-crer-des-animations-en-html5-en-ligne-facilement","status":"publish","type":"post","link":"https:\/\/www.ticeman.fr\/lecoutelas\/?p=1456","title":{"rendered":"Animatron :cr\u00e9er des animations en html5 en ligne facilement"},"content":{"rendered":"<p>Retour sur un vieux bilet scoop\u00e9 il y a longtemps. Comme d&#8217;habitude, je m&#8217;\u00e9tonne de voir les choses rescoop\u00e9es sans m\u00eame qu&#8217;un test plus approfondi ne l&#8217;accompagne.<\/p>\n<p>Donc la promesse est de pouvoir faire des animations html5 facilement ou \u00e0 la limite des pr\u00e9sentations. Facilement, on ne peut pas faire plus puisqu&#8217;il est possible de travailler sur le service sans m\u00eame s&#8217;inscrire, ce qui peut enlever des doutes aux plus frileux.<\/p>\n<p>Facilement ensuite car l&#8217;interface ne d\u00e9routera pas les habitu\u00e9s de l&#8217;animations web (et les autres s&#8217;y feront tr\u00e8s bien). on se retrouve avec une fen\u00eatre centrale permettant de disposer ses m\u00e9dias et une ligne de temps permettant d&#8217;animer, de faire appara\u00eetre ou dispara\u00eetre les objets.<\/p>\n<p><a  href=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2014\/02\/animatron1.png\" data-rel=\"lightbox-gallery-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1845\" src=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2014\/02\/animatron1-300x168.png\" alt=\"animatron1\" width=\"300\" height=\"168\" srcset=\"https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2014\/02\/animatron1-300x168.png 300w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2014\/02\/animatron1-1024x576.png 1024w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2014\/02\/animatron1-624x351.png 624w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2014\/02\/animatron1.png 1920w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>Chaque objet ajout\u00e9 donne lieu \u00e0 un calque diff\u00e9rent qui s&#8217;ins\u00e8re automatiquement dans la ligne de temps. Sur cette m\u00eame ligne il suffit de faire apparaitre ou dispara\u00eetre les objets en r\u00e9glant leur temps d&#8217;apparition par simple glissement. Pour les habitu\u00e9s ensuite, il est possible d&#8217;ins\u00e9rer des images clef afin de r\u00e9gler les animations et notamment les d\u00e9placements d&#8217;objet.<\/p>\n<p>Rien de bien r\u00e9volutionnaire donc si ce n&#8217;est que le service est totalement gratuit avec ou sans compte. L&#8217;animation produite est disponible en ligne par un lien ou un code d&#8217;int\u00e9gration.<\/p>\n<p>A noter que le service supporter les fichier svg et que donc il est possible de faire une animation assez fine. Toutefois, les possibilit\u00e9s restent limit\u00e9es car on ne peut cr\u00e9er d&#8217;objets programm\u00e9s type boutons. a r\u00e9server donc \u00e0 des pr\u00e9sentation ou des animations ponctuelles. il n&#8217;y a pas non plus d&#8217;interpolation de forme ce qui limite l&#8217;exploitation des formes vectorielles. Un plan pro \u00e0 19 euros par mois permet de r\u00e9cup\u00e9rer les animations en html5 pour une utilisation locale.<\/p>\n<p>on retiendra essentiellement la grande simplicit\u00e9 d&#8217;utilisation et la qualit\u00e9 de rendu donc voici un petit exemple r\u00e9alis\u00e9 en 2 minutes \u00e0 peine.<br \/>\n<iframe loading=\"lazy\" src=\"http:\/\/clips.animatron.com\/bb9b4e571267b409c7a686a39b3d24b5?w=1024&amp;h=768&amp;t=0&amp;r=1\" width=\"800\" height=\"480&lt;br \/&gt;&lt;br \/&gt; \" frameborder=\"0\"><\/iframe><br \/>\nLien: <a href=\"http:\/\/animatron.com\/\" target=\"_blank\" rel=\"noopener\">animatron<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Retour sur un vieux bilet scoop\u00e9 il y a longtemps. Comme d&#8217;habitude, je m&#8217;\u00e9tonne de voir les choses rescoop\u00e9es sans m\u00eame qu&#8217;un test&hellip;<a href=\"https:\/\/www.ticeman.fr\/lecoutelas\/?p=1456\" class=\"more-link\"><span class=\"more-button\">Continuez la lecture<span class=\"screen-reader-text\">Animatron :cr\u00e9er des animations en html5 en ligne facilement<\/span><\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1845,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-1456","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation"],"_links":{"self":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts\/1456"}],"collection":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1456"}],"version-history":[{"count":7,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts\/1456\/revisions"}],"predecessor-version":[{"id":8742,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts\/1456\/revisions\/8742"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/media\/1845"}],"wp:attachment":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}