{"id":2248,"date":"2015-09-17T15:59:09","date_gmt":"2015-09-17T13:59:09","guid":{"rendered":"http:\/\/studio.ican-design.fr\/?p=2248"},"modified":"2023-01-19T09:55:27","modified_gmt":"2023-01-19T08:55:27","slug":"adobe-edge-animate-animation-web","status":"publish","type":"post","link":"https:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/","title":{"rendered":"Adobe Edge Animate \/ Animation Web"},"content":{"rendered":"

Dans l\u2019univers de la publicit\u00e9 et de l\u2019animation pour le web, Flash disparait progressivement et la comp\u00e9tition reste ouverte. Adobe Edge Animate et Google Web designer semblent aujourd\u2019hui les mieux plac\u00e9s pour lui succ\u00e9der\u2026<\/p>\n

Au moment o\u00f9 nous r\u00e9digeons cet article il est impossible de pr\u00e9voir qui l\u2019emportera et s\u2019il y aura de la place pour d\u2019autres\u2026 Difficile de dire quel est le meilleur, car les choses \u00e9voluant si vite, chaque jour qui passe pourrait nous faire mentir. Mais nous allons n\u00e9anmoins faire un point sur ces logiciels, leurs sp\u00e9cificit\u00e9s et ce pourquoi nous serions susceptibles de les utiliser.<\/em><\/p>\n

Dans ce second article d\u00e9di\u00e9 \u00e0 l\u2019animation web, nous vous proposons donc de d\u00e9couvrir Adobe Edge Animate CC<\/em>, en m\u00eame temps que de faire quelques pas dans la cr\u00e9ation d\u2019une animation interactive ! Dans le pr\u00e9c\u00e9dent article nous d\u00e9couvrions Google Web designer<\/a>.<\/em><\/p>\n

1\/ Le point sur Adobe Edge Animate<\/em><\/h2>\n

Adobe Edge Animate CC<\/em> est un outil destin\u00e9 \u00e0 la cr\u00e9ation d\u2019animations (interactives) pour le web. On peut animer des formes, des images, g\u00e9rer la couleur, l\u2019opacit\u00e9, les transitions\u2026 Ins\u00e9rer des liens, des boutons, des vid\u00e9os\u2026 et proposer de l\u2019interactivit\u00e9. L\u2019ensemble de notre animation g\u00e9n\u00e9rera un fichier HTML, un ficher JS et un dossier images.<\/p>\n

\"edge<\/p>\n

l\u2019interface est assez compl\u00e8te et plut\u00f4t ergonomique, b\u00e9n\u00e9ficiant du savoir faire logiciel Adobe. On y retrouve les menus d\u00e9di\u00e9s \u00e0 l\u2019animation pour le web. En haut une barre d\u2019outils : texte, blocs, formes\u2026 A gauche, une barre de menu propri\u00e9t\u00e9 tr\u00e8s compl\u00e8te. A droite, une barre de menu : Images, Symboles, les \u00c9l\u00e9ments…ainsi qu’une autre barre de menu “Le\u00e7ons \/ tutoriels” plut\u00f4t pratique et pertinente pour les d\u00e9butants…\u00a0 En bas, la timeline sur laquelle vous pourrez animer vos \u00e9l\u00e9ments.<\/p>\n

En \u00ab\u00a0conclusion\u00a0\u00bb<\/h3>\n

Au moment o\u00f9 nous \u00e9crivons cet article, Adobe Edge Animate<\/em> est un outil assez complet – certainement plus que Google Web designer<\/em> – et qui b\u00e9n\u00e9ficie r\u00e9guli\u00e8rement de mises \u00e0 niveau efficaces via Adobe CC. S’il semble mieux arm\u00e9 (plus complet) pour la cr\u00e9ation d’animation “\u00e9labor\u00e9e”; il subit une tr\u00e8s rude concurrence avec Google Web designer<\/em> c\u00f4t\u00e9 pub \/ banni\u00e8re, car, il est – pour l’instant – moins bien optimis\u00e9 que ce dernier. En effet,\u00a0Google Web designer<\/em> a fait un gros travail c\u00f4t\u00e9 format \/ sortie fichier, pour fonctionner de mani\u00e8re plus fluide et efficace avec les r\u00e9gies pub, en particulier celle de Google ;).
\nEnfin pour ceux qui travaillaient d\u00e9j\u00e0 sous Flash, ils n’auront aucune peine \u00e0 se familiariser avec “AEA”<\/p>\n

2\/ Cr\u00e9ation d\u2019une animation avec Adobe Edge Animate<\/em><\/h2>\n

Cr\u00e9er une animation du type flyer anim\u00e9 \/ interactif sur la th\u00e9matique Halloween, qui mette en \u00e9vidence vos comp\u00e9tences en cr\u00e9ation et animation web (HTML5\/CSS3), via Adobe Edge Animate.<\/p>\n

Le storyboard<\/h3>\n

1\/ Image de fond (Manoir d\u00e9saffect\u00e9) + flashs \/ \u00e9clairs.
\n2\/ Les \u00e9l\u00e9ments titres images arrivent avec des transitions \/ animations diff\u00e9rentes (clignotement, zoom, fondu, masque).
\n3\/ Animation avec l’arriv\u00e9e des citrouilles + bouton pulsations “rejouer”<\/p>\n

\"edge<\/p>\n

Ce sc\u00e9nario nous permet de tester diff\u00e9rentes fonctionnalit\u00e9s et animations de GWD : Opacit\u00e9, mouvement, vitesse, easing, \u00e9l\u00e9ments, symboles (clips)\u2026<\/em><\/p>\n

Cr\u00e9ation et int\u00e9gration des \u00e9l\u00e9ments<\/h3>\n

Cr\u00e9ation sur Adobe Edge Animate<\/em>:<\/strong> cr\u00e9ez un nouveau fichier au format 860x400px
\n> Cr\u00e9ez sous Photoshop<\/em><\/strong> l\u2019ensemble des \u00e9l\u00e9ments n\u00e9cessaires \u00e0 votre animation que vous importerez ensuite dans AEA (Formats : JPG, PNG, SVG…).
\nDans le cadre de cette animation, nous avons essentiellement travaill\u00e9 sur la partie typographie, titres images, avec les fameux “fx” \/ “Style de calque” de Photoshop…<\/p>\n

\"edge<\/p>\n

Nous avons cr\u00e9\u00e9 diff\u00e9rents \u00e9l\u00e9ments sous Photoshop, puis les avons export\u00e9s pour le web en JPG ou PNG (Transparence) en faisant attention \u00e0 la taille et au poids des fichiers, et enfin nous les avons int\u00e9gr\u00e9s \u00e0 notre animation (Ils apparaissent bien dans la Biblioth\u00e8que d\u2019\u00e9l\u00e9ments). Vous pouvez \u00e9galement travailler sur Illustrator et exporter au format SVG (Vectoriel).
\n<\/em><\/p>\n

Animation des \u00e9l\u00e9ments dans Adobe Edge Animate
\n<\/em><\/h3>\n

Une fois les \u00e9l\u00e9ments int\u00e9gr\u00e9s, ils sont class\u00e9s dans la fen\u00eatre “\u00c9l\u00e9ment” ainsi que sur la “Timeline”, et il ne reste plus qu\u2019\u00e0 les animer via des images cl\u00e9s.<\/p>\n

\"edge<\/p>\n

Vous pouvez cr\u00e9er des clips \/ symboles, int\u00e9grer des vid\u00e9os, des sons et des sprites… <\/em><\/p>\n

\"edge<\/p>\n

Vous pouvez ajouter un couche d’interactivit\u00e9 via une interface plut\u00f4t intuitive et ergonomique.<\/em><\/p>\n

Notre animation avec Adobe Edge Animate<\/em><\/h2>\n

Mettez le son pour \u00e9couter le tonnerre, et rechargez l\u2019animation en cliquant sur la citrouille !
\n<\/span><\/p>\n

Le lien vers l’animation en responsive…<\/a><\/p>\n

Liens<\/h2>\n

https:\/\/www.adobe.com\/fr\/products\/edge-animate.html
\nhttps:\/\/helpx.adobe.com\/fr\/edge-animate\/using\/add-audio-animations.html
\nhttp:\/\/tv.adobe.com\/fr\/show\/apprendre-edge-animate-cc
\nhttps:\/\/helpx.adobe.com\/fr\/creative-cloud\/learn\/start\/animate.html<\/p>\n

D\u00e9couvrez les formations en Web et Multim\u00e9dia de l\u2019\u00e9cole d\u2019infographie<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Dans l\u2019univers de la publicit\u00e9 et de l\u2019animation pour le web, Flash disparait progressivement et la comp\u00e9tition reste ouverte. Adobe Edge Animate et Google Web designer semblent aujourd\u2019hui les mieux plac\u00e9s pour lui succ\u00e9der\u2026<\/p>\n","protected":false},"author":12,"featured_media":2250,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[381,15],"tags":[236,231,233],"acf":[],"yoast_head":"\nAdobe Edge Animate \/ Animation Web | Studio ICAN<\/title>\n<meta name=\"description\" content=\"Dans l\u2019univers de la publicit\u00e9 et de l\u2019animation pour le web, Flash disparait progressivement... Adobe Edge Animate et Google Web designer\u2026\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adobe Edge Animate \/ Animation Web | Studio ICAN\" \/>\n<meta property=\"og:description\" content=\"Dans l\u2019univers de la publicit\u00e9 et de l\u2019animation pour le web, Flash disparait progressivement... Adobe Edge Animate et Google Web designer\u2026\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio ICAN\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-17T13:59:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-19T08:55:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studio.ican-design.fr\/ecole-infographie\/sites\/3\/2015\/09\/halloween00.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"510\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nicolas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nicolas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/\",\"url\":\"https:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/\",\"name\":\"Adobe Edge Animate \/ Animation Web | Studio ICAN\",\"isPartOf\":{\"@id\":\"https:\/\/studio.ican-design.fr\/#website\"},\"datePublished\":\"2015-09-17T13:59:09+00:00\",\"dateModified\":\"2023-01-19T08:55:27+00:00\",\"author\":{\"@id\":\"https:\/\/studio.ican-design.fr\/#\/schema\/person\/b63c638049bff9f34019dcb9fe843656\"},\"description\":\"Dans l\u2019univers de la publicit\u00e9 et de l\u2019animation pour le web, Flash disparait progressivement... Adobe Edge Animate et Google Web designer\u2026\",\"breadcrumb\":{\"@id\":\"https:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/studio.ican-design.fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adobe Edge Animate \/ Animation Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studio.ican-design.fr\/#website\",\"url\":\"https:\/\/studio.ican-design.fr\/\",\"name\":\"Studio ICAN\",\"description\":\"D\u00e9couvrez les projets des \u00e9tudiants de l'ICAN : cr\u00e9ation num\u00e9rique, animation, game design, web design, cr\u00e9ation web, motion design\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studio.ican-design.fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/studio.ican-design.fr\/#\/schema\/person\/b63c638049bff9f34019dcb9fe843656\",\"name\":\"Nicolas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/studio.ican-design.fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ea0eb9183cdc62d47d12e7d4e5ec4a7f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ea0eb9183cdc62d47d12e7d4e5ec4a7f?s=96&d=mm&r=g\",\"caption\":\"Nicolas\"},\"sameAs\":[\"https:\/\/www.behance.net\/nicolasgervais\"],\"url\":\"https:\/\/studio.ican-design.fr\/author\/cd4vf9u296\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adobe Edge Animate \/ Animation Web | Studio ICAN","description":"Dans l\u2019univers de la publicit\u00e9 et de l\u2019animation pour le web, Flash disparait progressivement... Adobe Edge Animate et Google Web designer\u2026","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:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/","og_locale":"fr_FR","og_type":"article","og_title":"Adobe Edge Animate \/ Animation Web | Studio ICAN","og_description":"Dans l\u2019univers de la publicit\u00e9 et de l\u2019animation pour le web, Flash disparait progressivement... Adobe Edge Animate et Google Web designer\u2026","og_url":"https:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/","og_site_name":"Studio ICAN","article_published_time":"2015-09-17T13:59:09+00:00","article_modified_time":"2023-01-19T08:55:27+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/studio.ican-design.fr\/ecole-infographie\/sites\/3\/2015\/09\/halloween00.jpg","type":"image\/jpeg"}],"author":"Nicolas","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Nicolas","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/","url":"https:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/","name":"Adobe Edge Animate \/ Animation Web | Studio ICAN","isPartOf":{"@id":"https:\/\/studio.ican-design.fr\/#website"},"datePublished":"2015-09-17T13:59:09+00:00","dateModified":"2023-01-19T08:55:27+00:00","author":{"@id":"https:\/\/studio.ican-design.fr\/#\/schema\/person\/b63c638049bff9f34019dcb9fe843656"},"description":"Dans l\u2019univers de la publicit\u00e9 et de l\u2019animation pour le web, Flash disparait progressivement... Adobe Edge Animate et Google Web designer\u2026","breadcrumb":{"@id":"https:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studio.ican-design.fr\/adobe-edge-animate-animation-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/studio.ican-design.fr\/"},{"@type":"ListItem","position":2,"name":"Adobe Edge Animate \/ Animation Web"}]},{"@type":"WebSite","@id":"https:\/\/studio.ican-design.fr\/#website","url":"https:\/\/studio.ican-design.fr\/","name":"Studio ICAN","description":"D\u00e9couvrez les projets des \u00e9tudiants de l'ICAN : cr\u00e9ation num\u00e9rique, animation, game design, web design, cr\u00e9ation web, motion design","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studio.ican-design.fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/studio.ican-design.fr\/#\/schema\/person\/b63c638049bff9f34019dcb9fe843656","name":"Nicolas","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/studio.ican-design.fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ea0eb9183cdc62d47d12e7d4e5ec4a7f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ea0eb9183cdc62d47d12e7d4e5ec4a7f?s=96&d=mm&r=g","caption":"Nicolas"},"sameAs":["https:\/\/www.behance.net\/nicolasgervais"],"url":"https:\/\/studio.ican-design.fr\/author\/cd4vf9u296\/"}]}},"_links":{"self":[{"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/posts\/2248"}],"collection":[{"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/comments?post=2248"}],"version-history":[{"count":5,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/posts\/2248\/revisions"}],"predecessor-version":[{"id":8614,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/posts\/2248\/revisions\/8614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/media\/2250"}],"wp:attachment":[{"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/media?parent=2248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/categories?post=2248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/tags?post=2248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}