Skip to main content

À lire sur apaxxdesigns.com, une interview très intéressante de notre ami Arzhur faisant le point sur l’état des technos d’animation HTML5, notamment suite à l’annonce de la mutation annoncée par Adobe du vénérable Flash en Animate CC, prévu pour 2016.

Unknown

Avec l’annonce de la sortie d’Adobe Animate CC, qui remplace Flash Pro, on comprend que les lignes continuent de bouger dans l’univers de l’animation HTML5. Arzhur Caouissin répond aux questions d’apaxxdesigns.com pour mieux comprendre quels outils aujourd’hui disponibles conviennent à quels usages.

Apaxxdesigns : Une première question, un peu cash : peut-on vraiment animer en HTML5 ?

Arzhur Caouissin : Oui. HTML5 intègre plusieurs spécifications qui gèrent l’animation. CSS3 permet d’appliquer des transformations de base et Javascript offre la possibilité stabiliser l’ensemble pour tous les navigateurs. Canvas, autre norme du HTML5, permet de lancer un rendu bitmap temps réel, généré par le navigateur lui-même. Le résultat est identique à un flux vidéo, à la différence que l’affichage est temps réel et permet d’intégrer des actions contrôlées par l’utilisateur. Ce standard est idéal pour le jeu. La vidéo traditionnelle, préenregistrée, est également utilisable sans plugin en HTML5. Donc, oui, un site HTML5 peut animer de bien nombreuses manières..

Quel standard privilégier alors et pour quel type de rendu exactement ? Pourquoi autant de possibilités ? On s’y perd !

  • Les animations Javascript/CSS sont à préférer pour les contenus accessibles et référençables. Mais les possibilités restent limitées. On anime des transitions simples (position, opacité, rotation, etc).
  • Les animations Canvas qui activent un affichage bitmap instantané sont comparables à un rendu de type vidéo. Les données moulinées en Javascript sont traduites par le navigateur en images PNG pour alléger l’affichage lors de calculs imposants comme les transformations vectorielles (SVG), les effets de particules, les mouvements d’objets dans un espace en 3D. Il convertit en une seule image un tracé complexe et gourmand en ressources. Le standard WebGL peut aider Canvas à déléguer pour ce faire une partie des calculs au processeur graphique. On utilise ces standards principalement pour du jeu, ou des projets impactants. Mais attention, le résultat étant une séquence animée d’images bitmaps, il en résulte un contenu non référençable et peu accessible.
  • La vidéo, quand à elle, peut être exploitée également pour ses capacités de rendu mais ne peut intégrer des données modifiées par l’utilisateur, contrairement à Canvas. Le standard vidéo reste donc idéal pour des créations calibrées et montées en amont de leur diffusion, y compris si le projet intègre une couche d’interactivité. Mais l’interactivité servira à naviguer entre différentes séquences audiovisuelles déjà enregistrées, uniquement. C’est ce que l’on nomme plus explicitement un Webdoc. Lire la suite

Welcome Adobe Animate CC, a new era for Flash Professional

For nearly two decades, Flash Professional has been the standard for producing rich animations on the web. Because of the emergence of HTML5 and demand for animations that leverage web standards, we completely rewrote the tool over the past few years to incorporate native HTML5 Canvas and WebGL support. To more accurately represent its position as the premier animation tool for the web and beyond, Flash Professional will be renamed Adobe Animate CC, starting with the next release in early 2016.

Today, over a third of all content created in Flash Professional uses HTML5, reaching over one billion devices worldwide. It has also been recognized as an HTML5 ad solution that complies with the latest Interactive Advertising Bureau (IAB) standards, and is widely used in the cartoon industry by powerhouse studios like Nickelodeon and Titmouse Inc.

Animate CC will continue supporting Flash (SWF) and AIR formats as first-class citizens. In addition, it can output animations to virtually any format (including SVG), through its extensible architecture.

There’s much more than just a name change however. Our team is hard at work on a major update with significant new features to create animations for any platform. Here’s a sneak peek by Michael Chaize, Principal Creative Cloud Evangelist:

Here’s what you can expect in Animate CC:

Drawing, illustration and authoring

  • Vector art brushes – Modify the path of a stroke after it’s been drawn, and scale them to any resolution without losing quality. You can also make custom brushes and import brushes created with Adobe Capture CC.
  • 360° rotatable canvas – Rotate the canvas on any pivot point as you draw to get the perfect angle and strokes. You can even use this feature with a Wacom Cintiq!
  • Improved pencils and brushes – Draw smooth, precise vector outlines along a curve and get faster live previews.
  • Easier audio syncing – Control audio looping directly on the timeline, without having to code.
  • Faster color changing – Naming tagged colors lets you change one color and have it automatically update your entire project.
  • Colored onion skinning – Easily orchestrate complex animations now that adjacent frames can have different color and alpha values.

CreativeSync integration

  • Adobe Stock – Browse and license millions of high-quality photos, illustrations and vector graphics directly in Animate CC. You can even add life to static content by adding animations to them.
  • Creative Cloud Libraries – Access colors, vector graphics and brushes directly as you work.

Output capabilities

  • Multiplatform support: HTML5 Canvas, WebGL, Flash (SWF), AIR, video, and custom platforms (such as SVG) via extensions.
  • 4K+ video export – Export videos with custom resolutions for the latest Ultra HD and Hi-DPI displays.
  • Custom resolution export – Revitalize older content by resizing and optimizing them for any resolution, such as Ultra HD and Hi-DPI displays.
  • .OAM support – Export your project as an .OAM file for easy importing to Adobe Muse, InDesign, DPS and Dreamweaver.
href="http://www.apaxxdesigns.com/news/animer-en-html5/" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text  href="http://www.nextinpact.com/news/97542-adobe-fait-disparaitre-flash-professionnal-au-profit-danimate-cc.htm" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text  href="http://blogs.adobe.com/flashpro/welcome-adobe-animate-cc-a-new-era-for-flash-professional/" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff">Button Text

 

Valéry Girou

D.A. / DIGITAL / WEB / PRINT / Co-fondateur du site ELECTRICNEWS.fr / Consultant & Formateur Digital / Web / Print

Pin It on Pinterest