{"id":19617,"date":"2018-01-15T17:48:28","date_gmt":"2018-01-15T16:48:28","guid":{"rendered":"https:\/\/www.adventori.com\/fr\/?p=19617"},"modified":"2018-02-27T16:06:27","modified_gmt":"2018-02-27T15:06:27","slug":"visibilite-animate","status":"publish","type":"post","link":"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/","title":{"rendered":"visibilit\u00e9"},"content":{"rendered":"<style>\r\n.wedocs-single-wrap .wedocs-single-content article .entry-content img{\r\n        padding: inherit;\r\n}\r\n<\/style>\r\n<h3 id=\"image\" style=\"text-align: center;\"><strong>GERER LA VISIBILITE<\/strong><\/h3><p>La gestion de la visibilit\u00e9 vous permet de jouer l&rsquo;animation d&rsquo;une cr\u00e9a uniquement lorsque celle-ci est visible.<br \/>Pour implementer cette solution , nous devons g\u00e9rer l&rsquo;\u00e9v\u00e9nement de visibilit\u00e9 dans la banni\u00e8re et ex\u00e9cuter l&rsquo;animation lorsque l&rsquo;evenement est captur\u00e9.<\/p><p><br \/><strong>Cas o<span>\u00f9<\/span> la banni\u00e8re n&rsquo;est pas visible :<\/strong><\/p><p>Avant toute chose , vous devez modifier votre banni\u00e8re pour l&rsquo;affichage par defaut (image , div&#8230;), dans la cas ou la banni\u00e8re n&rsquo;est pas visible .<br \/>Dans votre fichier html, ajoutez une div correspondant \u00e0 la taille de votre banni\u00e8re ou une image par defaut.<\/p><p><strong>Conseil : ajouter cette fonctionnalit\u00e9 uniquement lorsque votre banni\u00e8re est terminer<\/strong>. Editer votre fichier html.<\/p><p>exemple :\u00a0<\/p><p><code>&lt;div id=\"loading\" class=\"loading-image\" style=\"background-image: url('no_visible.png');width:300px;height:250px;\"&gt;&lt;\/div&gt;<\/code><\/p>\r\n\r\n\r\n\r\n\r\n\r\n<p>Pour l&rsquo;instant nous ne souhaitons pas afficher l&rsquo;animation de notre canvas<\/p>\r\n<p><code>&lt;canvas id=\"canvas\" width=\"300px\" height=\"250px\" style=\"background-color:#FFFFFF;<strong>display:none<\/strong>;\"&gt;&lt;\/canvas&gt;<\/code><\/p>\r\n<p>\r\n<\/p><p>Sous adobe animate l&rsquo;initialisation du canvas est r\u00e9alis\u00e9 par l&rsquo;appel de la fonction <strong>init(),<\/strong> pr\u00e9sent dans la balise <strong>body\u00a0<\/strong>.Effacer la , pour pouvoir controler l&rsquo;appel<\/p>\r\n\r\n<p><code>&lt;body <label style=\"text-decoration: line-through;\">onload=\"init();\"<\/label>  style=\"background-color:#D4D4D4;margin:0px;cursor:pointer;\" onclick=\"ADventori.click();\" &gt;\r\n<\/code><\/p>\r\n\r\n\r\n\r\n\r\n\r\n<p>\r\n<strong>Capturer la visibilit\u00e9: <\/strong>\r\n<\/p><p>La methode\u00a0<strong>ADventori.isVisible ()<\/strong> vous renseigne quand la banni\u00e8re est visible.<\/p><p><strong>ADventori.Event.addEventListenerOnce(ADventori.Event.VISIBLE,callBackFunction); <\/strong>cette m\u00e9thode s&rsquo;abonne \u00e0 l&rsquo;\u00e9v\u00e9nement de visibilit\u00e9 et appelle la fonction en param\u00e8tre lorsqu&rsquo;elle est visible<\/p><p>exemple :\u00a0<\/p><p><code>\/\/dans le cas ci-dessous, la fonction startAnimation sera appel\u00e9e quand la banni\u00e8re sera visible<\/code>\r\n\r\n<code><\/code><\/p>\r\n\r\n\r\n\r\n<pre><span>if<\/span>(!ADventori.isVisible()){<br \/>  ADventori.Event.<strong>addEventListenerOnce<\/strong>(ADventori.Event.VISIBLE,startAnimation);<br \/>}<span>else<\/span>{<br \/>  startAnimation();<br \/>}<span><br \/><\/span><span>function <\/span>startAnimation() {<span><br \/><\/span><span>  <\/span>document.getElementById(<span>'loading'<\/span>).style.display = <span>'none'<\/span>;<br \/>  document.getElementById(<span>'canvas'<\/span>).style.display = <span>'block'<\/span>;<br \/>  \/\/votre code pour d\u00e9clencher l'animation de la banni\u00e8re<br \/>  init();<br \/>}<\/pre>\r\n\r\n\r\n\r\n\r\n<p><a href=\"http:\/\/bo.adventori.com\/testPage\/test?creativeId=c947c7b8-8f77-4bbc-90ae-62fbd89d1057\/index.html&#038;size=300x250\" target=\"_blank\" rel=\"noopener\">Lien d&rsquo;exemple\u00a0<\/a><\/p><p><strong>Tester la visibilit\u00e9 de v\u00f4tre banni\u00e8re:<\/strong><\/p><p>Allez dans la page de test ADventori : <a target=\"_blank\" href=\"http:\/\/bo.adventori.com\/testPage\/test\" rel=\"noopener\">lien<\/a><\/p>\r\n<p>Uploadez votre banni\u00e8re, pour activer la visibilit\u00e9, cliquez sur l&rsquo;ic\u00f4ne en forme d&rsquo;oeil<\/p>\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"\/\/www.adventori.com\/media\/visibilite1.png\" alt=\"link_enabler\" class=\"aligncenter wp-image-5546 size-full\" width=\"860\" height=\"370\" \/>\r\n\r\n\r\n<p>resultat :<\/p>\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"\/\/www.adventori.com\/media\/visibilite2.png\" alt=\"link_enabler\" class=\"aligncenter wp-image-5546 size-full\" width=\"860\" height=\"370\" \/>\r\n\r\n\r\n<p><a href=\"\/\/adventori.com\/lp\/enabler\/templates\/Wall_CreaV2\/visibilite\/adobe_animate\/visibilite_adobe_animate.zip\"><button class=\"btn btn-primary\">T\u00e9l\u00e9chargez l&rsquo;exemple<\/button><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>D\u00e9clencher l&rsquo;animation de votre banni\u00e8re uniquement quand  elle est visible<\/p>\n","protected":false},"author":11,"featured_media":1171,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[262],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>visibilit\u00e9 | ADventori<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"visibilit\u00e9 | ADventori\" \/>\n<meta property=\"og:description\" content=\"D\u00e9clencher l&#039;animation de votre banni\u00e8re uniquement quand elle est visible\" \/>\n<meta property=\"og:url\" content=\"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/\" \/>\n<meta property=\"og:site_name\" content=\"ADventori\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-15T16:48:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-02-27T15:06:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/v4.adventori.com\/media\/Solution_Meteo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@adventori\" \/>\n<meta name=\"twitter:site\" content=\"@adventori\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ismail Azdad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/v4.adventori.com\/#organization\",\"name\":\"ADventori\",\"url\":\"https:\/\/v4.adventori.com\/\",\"sameAs\":[\"https:\/\/twitter.com\/adventori\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/v4.adventori.com\/#\/schema\/logo\/image\/\",\"url\":\"\/media\/Large_Logo-ADventori_Couleur_2015.png\",\"contentUrl\":\"\/media\/Large_Logo-ADventori_Couleur_2015.png\",\"width\":400,\"height\":133,\"caption\":\"ADventori\"},\"image\":{\"@id\":\"https:\/\/v4.adventori.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/v4.adventori.com\/#website\",\"url\":\"https:\/\/v4.adventori.com\/\",\"name\":\"ADventori\",\"description\":\"LESS ADS, MORE EFFICIENT ADS\",\"publisher\":{\"@id\":\"https:\/\/v4.adventori.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/v4.adventori.com\/search\/{search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#primaryimage\",\"url\":\"https:\/\/v4.adventori.com\/media\/Solution_Meteo.jpg\",\"contentUrl\":\"https:\/\/v4.adventori.com\/media\/Solution_Meteo.jpg\",\"width\":540,\"height\":410},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#webpage\",\"url\":\"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/\",\"name\":\"visibilit\u00e9 | ADventori\",\"isPartOf\":{\"@id\":\"https:\/\/v4.adventori.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#primaryimage\"},\"datePublished\":\"2018-01-15T16:48:28+00:00\",\"dateModified\":\"2018-02-27T15:06:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/v4.adventori.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"visibilit\u00e9\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#webpage\"},\"author\":{\"@id\":\"https:\/\/v4.adventori.com\/#\/schema\/person\/e6f1b8450889d31648a36063f22d3564\"},\"headline\":\"visibilit\u00e9\",\"datePublished\":\"2018-01-15T16:48:28+00:00\",\"dateModified\":\"2018-02-27T15:06:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#webpage\"},\"wordCount\":231,\"publisher\":{\"@id\":\"https:\/\/v4.adventori.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/v4.adventori.com\/media\/Solution_Meteo.jpg\",\"articleSection\":[\"COMPOSANTS\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/v4.adventori.com\/#\/schema\/person\/e6f1b8450889d31648a36063f22d3564\",\"name\":\"Ismail Azdad\",\"sameAs\":[\"https:\/\/www.adventori.com\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"visibilit\u00e9 | ADventori","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/","og_locale":"fr_FR","og_type":"article","og_title":"visibilit\u00e9 | ADventori","og_description":"D\u00e9clencher l'animation de votre banni\u00e8re uniquement quand elle est visible","og_url":"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/","og_site_name":"ADventori","article_published_time":"2018-01-15T16:48:28+00:00","article_modified_time":"2018-02-27T15:06:27+00:00","og_image":[{"width":540,"height":410,"url":"https:\/\/v4.adventori.com\/media\/Solution_Meteo.jpg","type":"image\/jpeg"}],"twitter_card":"summary","twitter_creator":"@adventori","twitter_site":"@adventori","twitter_misc":{"Written by":"Ismail Azdad","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/v4.adventori.com\/#organization","name":"ADventori","url":"https:\/\/v4.adventori.com\/","sameAs":["https:\/\/twitter.com\/adventori"],"logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/v4.adventori.com\/#\/schema\/logo\/image\/","url":"\/media\/Large_Logo-ADventori_Couleur_2015.png","contentUrl":"\/media\/Large_Logo-ADventori_Couleur_2015.png","width":400,"height":133,"caption":"ADventori"},"image":{"@id":"https:\/\/v4.adventori.com\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/v4.adventori.com\/#website","url":"https:\/\/v4.adventori.com\/","name":"ADventori","description":"LESS ADS, MORE EFFICIENT ADS","publisher":{"@id":"https:\/\/v4.adventori.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/v4.adventori.com\/search\/{search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#primaryimage","url":"https:\/\/v4.adventori.com\/media\/Solution_Meteo.jpg","contentUrl":"https:\/\/v4.adventori.com\/media\/Solution_Meteo.jpg","width":540,"height":410},{"@type":"WebPage","@id":"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#webpage","url":"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/","name":"visibilit\u00e9 | ADventori","isPartOf":{"@id":"https:\/\/v4.adventori.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#primaryimage"},"datePublished":"2018-01-15T16:48:28+00:00","dateModified":"2018-02-27T15:06:27+00:00","breadcrumb":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/v4.adventori.com\/fr\/"},{"@type":"ListItem","position":2,"name":"visibilit\u00e9"}]},{"@type":"Article","@id":"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#article","isPartOf":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#webpage"},"author":{"@id":"https:\/\/v4.adventori.com\/#\/schema\/person\/e6f1b8450889d31648a36063f22d3564"},"headline":"visibilit\u00e9","datePublished":"2018-01-15T16:48:28+00:00","dateModified":"2018-02-27T15:06:27+00:00","mainEntityOfPage":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#webpage"},"wordCount":231,"publisher":{"@id":"https:\/\/v4.adventori.com\/#organization"},"image":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-adobe-animate-fr\/composant\/visibilite-animate\/#primaryimage"},"thumbnailUrl":"https:\/\/v4.adventori.com\/media\/Solution_Meteo.jpg","articleSection":["COMPOSANTS"],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/v4.adventori.com\/#\/schema\/person\/e6f1b8450889d31648a36063f22d3564","name":"Ismail Azdad","sameAs":["https:\/\/www.adventori.com\/"]}]}},"_links":{"self":[{"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/posts\/19617"}],"collection":[{"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/comments?post=19617"}],"version-history":[{"count":23,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/posts\/19617\/revisions"}],"predecessor-version":[{"id":19734,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/posts\/19617\/revisions\/19734"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/media\/1171"}],"wp:attachment":[{"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/media?parent=19617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/categories?post=19617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/tags?post=19617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}