{"id":7794,"date":"2012-07-18T16:31:09","date_gmt":"2012-07-18T14:31:09","guid":{"rendered":"http:\/\/flaven.fr\/?p=7794"},"modified":"2012-07-18T16:31:09","modified_gmt":"2012-07-18T14:31:09","slug":"exemple-realiser-une-sequence-avec-timeline","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2012\/07\/exemple-realiser-une-sequence-avec-timeline\/","title":{"rendered":"Exemple &#8211; R\u00e9aliser une s\u00e9quence avec timeline"},"content":{"rendered":"<p><iframe loading=\"lazy\" style=\"box-shadow:0px 0px 5px #bbb;\" width=\"960\" height=\"540\" scrolling=\"no\" frameborder=\"0\" name=\"3wdoc-embed\" src=\"http:\/\/story.3wdoc.com\/cb6c4c2fad07ad2d52469550411ab7460d3d46da98b7af0680e626e7dd5eb88575\/10\/index.html\"><\/iframe><\/p>\n<h4>D\u00e9finitions<\/h4>\n<p>Nous avons r\u00e9alis\u00e9 une s\u00e9quence utilisant la timeline. Pour ce projet, la vid\u00e9o est h\u00e9berg\u00e9e chez Vimeo et les textes, pour respecter un choix typographique sont des images (png transparent)<br \/>\nVous pouvez aller voir le projet sur <a href=\"http:\/\/story.3wdoc.com\/cb6c4c2fad07ad2d52469550411ab7460d3d46da98b7af0680e626e7dd5eb88575\/10\/index.html\">sa page de publication<\/a>.<\/p>\n<h4>La page M\u00e9dia manager<\/h4>\n<p>En premier lieu nous avons upload\u00e9 les images n\u00e9cessaires.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_sequenceTimeline_media.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_sequenceTimeline_media.jpg\" alt=\"Exemple - R\u00e9aliser une s\u00e9quence avec timeline\" title=\"Exemple - R\u00e9aliser une s\u00e9quence avec timeline\" width=\"960\" height=\"316\" class=\"alignnone size-full wp-image-7797\" \/><\/a><\/p>\n<h4>La page Editor<\/h4>\n<p>Ici les \u00e9l\u00e9ments arrivent simplement les uns apr\u00e8s les autres. La vid\u00e9o \u00e9tant h\u00e9berg\u00e9e chez Vimeo, nous utilisons un Article avec comme contenu une <code>&lt;iframe&gt;<\/code>, le caract\u00e8re Autoplay de la vid\u00e9o est d\u00e9fini \u00e0 l&#8217;int\u00e9rieur de l&#8217;iframe (lors de la d\u00e9finition des options dans le player de Vimeo), elle ne peux donc en aucun cas r\u00e9agir \u00e0 un play ou un pause de notre player car cette video est ext\u00e9rieure \u00e0 notre plate-forme.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_sequenceTimeline_editor.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_sequenceTimeline_editor.jpg\" alt=\"Exemple - R\u00e9aliser une s\u00e9quence avec timeline\" title=\"Exemple - R\u00e9aliser une s\u00e9quence avec timeline\" width=\"960\" height=\"632\" class=\"alignnone size-full wp-image-7796\" \/><\/a><\/p>\n<h4>La page Projet<\/h4>\n<p>Pour ce projet, nous avons gliss\u00e9 notre s\u00e9quence dans le Storybuilder, et <strong>nous avons coch\u00e9 la case Autoplay <\/strong> par contre la case Plein \u00e9cran n&#8217;a pas \u00e9t\u00e9 coch\u00e9e.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_sequenceTimeline_project2.jpg\"rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_sequenceTimeline_project2.jpg\" alt=\"Exemple - R\u00e9aliser une s\u00e9quence avec timeline\" title=\"Exemple - R\u00e9aliser une s\u00e9quence avec timeline\" width=\"960\" height=\"619\" class=\"aligncenter size-full wp-image-7815\" \/><\/a><\/p>\n<p>Le projet est maintenant publi\u00e9, nous pouvons le partager ou l&#8217;int\u00e9grer dans votre site gr\u00e2ce aux deux types d&#8217;exportation disponible.<br \/>\nPour plus de d\u00e9tail sur l&#8217;utilisation de ces codes d&#8217;exportation, consulter <a href=\"https:\/\/flaven.fr\/2012\/06\/27\/inserer-une-creation-3wdoc-dans-une-page-html-profiter-de-la-fonction-dexport-et-de-partage-de-3wdoc\/\">cet article<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>D\u00e9finitions Nous avons r\u00e9alis\u00e9 une s\u00e9quence utilisant la timeline. Pour ce projet, la vid\u00e9o est h\u00e9berg\u00e9e chez Vimeo et les textes, pour respecter un choix&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2012\/07\/exemple-realiser-une-sequence-avec-timeline\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Exemple &#8211; R\u00e9aliser une s\u00e9quence avec timeline<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"R\u00e9aliser une s\u00e9quence avec timeline: guide pratique pour int\u00e9grer vid\u00e9os Vimeo et images PNG. D\u00e9couvrez les outils et r\u00e9sultats.","bf_ai_og_title":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3433,1],"tags":[1691,2185,285,2267,799,337,2261,154,1110,606,2243,1660,2213],"class_list":["post-7794","post","type-post","status-publish","format-standard","hentry","category-3wdoc-tutorials","category-miscellaneous-other","tag-duree","tag-html5","tag-image","tag-interactif","tag-interactives","tag-media","tag-narration","tag-photos","tag-sequence","tag-storytelling","tag-technique","tag-timeline","tag-video"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-21I","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/7794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=7794"}],"version-history":[{"count":0,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/7794\/revisions"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=7794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=7794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=7794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}