M2i Formation

Web et Mobile Design - Animation Web

Animate CC - Animations publicitaires HTML 5

Présentiel

3 jours (21 heures) - ANIM-CC

(32)
Accueil  ›  Formations Multimédia  ›  Web et Mobile Design  ›  Animation Web  ›  Animate CC - Animations publicitaires HTML 5

Objectifs pédagogiques

  • Concevoir et réaliser des publicités au format HTML
  • Utiliser des fichiers Photoshop et Illustrator pour améliorer le workflow
  • Animer textes, images bitmaps et vectorielles
  • Intégrer des médias riches
  • Exporter et optimiser les animations dans le respect des normes de l'IAB
  • Publier les animations en HTML 5 dans des pages Web.

Niveau requis

Avoir une connaissance de base de l'environnement technique du Web. La pratique courante d'un logiciel de dessin vectoriel et bitmap est souhaitable.

Public concerné

Webmasters, maquettistes, infographistes, responsables de communication, chefs de projets et responsables de campagne multicanal.

Afdas

Paris Chaillot22/10/20181 290 € HTInscriptions en cours, places disponiblesRéserver

Sessions
planifiées
Sessions
ouvertes
Sessions
confirmées
Réserver
le stage

Afdas

Metz22/10/20181 290 € HTDates proposées dans les agences M2iRéserver
Mulhouse22/10/20181 290 € HTDates proposées dans les agences M2iRéserver
Nancy22/10/20181 290 € HTDates proposées dans les agences M2iRéserver
Reims22/10/20181 290 € HTDates proposées dans les agences M2iRéserver

Afficher plus de dates

Sessions
planifiées
Sessions
ouvertes
Sessions
confirmées
Réserver
le stage

Afdas

Caen22/10/20181 290 € HTDates proposées dans les agences M2iRéserver
Évreux22/10/20181 290 € HTDates proposées dans les agences M2iRéserver
Le Havre22/10/20181 290 € HTDates proposées dans les agences M2iRéserver
Lille22/10/20181 290 € HTDates proposées dans les agences M2iRéserver

Afficher plus de dates

Sessions
planifiées
Sessions
ouvertes
Sessions
confirmées
Réserver
le stage

Afdas

Dijon22/10/20181 290 € HTDates proposées dans les agences M2iRéserver
Grenoble22/10/20181 290 € HTDates proposées dans les agences M2iRéserver
Lyon22/10/20181 290 € HTDates proposées dans les agences M2iRéserver
Saint-Étienne22/10/20181 290 € HTDates proposées dans les agences M2iRéserver

Afficher plus de dates

Sessions
planifiées
Sessions
ouvertes
Sessions
confirmées
Réserver
le stage

Afdas

Bordeaux22/10/20181 290 € HTDates proposées dans les agences M2iRéserver
Orléans22/10/20181 290 € HTDates proposées dans les agences M2iRéserver
Tours22/10/20181 290 € HTDates proposées dans les agences M2iRéserver

Sessions
planifiées
Sessions
ouvertes
Sessions
confirmées
Réserver
le stage

Afdas

Aix-en-Provence22/10/20181 290 € HTDates proposées dans les agences M2iRéserver
Montpellier22/10/20181 290 € HTDates proposées dans les agences M2iRéserver
Sophia Antipolis22/10/20181 290 € HTDates proposées dans les agences M2iRéserver

Sessions
planifiées
Sessions
ouvertes
Sessions
confirmées
Réserver
le stage

Rappel sur la publicité en ligne

Les normes IAB

Les normes Google (Doubleclick)

Types et formats de display

  • Standard
  • Standard +
  • Rich media
  • Rising Stars

Les frameworks JavaScript

  • CreateJS
  • Greensock
  • WebGL
  • JQuery
  • Edge Animate JSAPI...

Recommandations

  • Clicktags
  • Tags d'emplacement
  • Guidelines et bonnes pratiques

Plateformes

Création et publication d'un document HTML 5 Canvas

  • Création d'un document HTML 5 avec l'API Canvas
  • Utilisation des fragments de code JavaScript
  • Migration de contenu existant vers HTML 5 Canvas

Création et publication d'un document WebGL

  • Création d'un document WebGL
  • Migration de contenu existant vers un document WebGL
  • Amélioration des performances de rendu grâce à la mise en cache sous forme de bitmap

Espace de travail et workflow

Flux de travail et espace de travail Animate

  • Flux de travail Animate
  • L'espace de travail : fenêtres et panneaux

Utilisation du panneau Scène et Outils

  • Utilisation de la scène, mise à l'échelle, rotation de la scène
  • Panneau Outils et menus contextuels
  • Nouveau : pinceaux vectoriels
  • Nouveau : nuanciers balisés

Transformation et combinaison d'objets graphiques

  • Transformation des objets
  • Combinaison d'objets

Utilisation des occurrences de symboles

  • Création de symboles et d'occurrences
  • Propriétés des occurrences
  • Permutation des occurrences
  • Changement du type d'une occurrence

Utilisation de plusieurs scénarios

  • Clips imbriqués et hiérarchie parent-enfant

Animation et interactivité

Animations interpolées classiques

  • Création et modification d'images-clés
  • Création d'un calque de guide d'animation
  • Nouveau : guide d'animation basé sur la largeur de trait variable
  • Nouveau : guide d'animation basé sur la couleur du trait
  • Accélération / décélération personnalisée

Animation d'interpolations de mouvement

  • Application de présélections de mouvement
  • Création d'une animation interpolée
  • Modification de la trajectoire de mouvement d'une animation interpolée
  • Modification des plages d'interpolation d'une animation dans le scénario

Modification des interpolations avec l'éditeur de mouvement

  • Courbes de propriété, points d'ancrage, points de contrôle
  • Application des accélérations présélectionnées et personnalisées
  • Contrôle de l'affichage de l'éditeur de mouvement

Interpolation de forme

  • Création d'une interpolation de forme
  • Contrôle des modifications de formes avec des repères de formes
  • Interpolation de forme des traits à l'aide de l'épaisseur variable

Animation de l'outil de segment

  • La cinématique inverse
  • Ajout de segments à des symboles ou à des formes
  • Modification des objets et des squelettes IK
  • Contrainte de mouvement et élasticité à des segments

Multimédia et vidéo

Importation d'images

  • Matricielles : GIF, JPEG, PNG
  • Vectorielle : SVG

Exportation de fichiers SVG

  • Processus d'exportation SVG dans Animate CC
  • Exportation d'illustrations au format SVG
  • Echange des fichiers SVG avec Adobe Illustrator

Utilisation de sons dans Animate CC

  • Formats audio pris en charge
  • Ajout de sons à un bouton
  • Synchronisation d'un son avec une animation
  • Modification d'un son dans Animate

Création de fichiers vidéo en vue de les utiliser dans Animate

  • Contrôle de la lecture vidéo
  • Assistant Importer de la vidéo
  • Formats vidéo et Animate

Ajout de vidéo à Animate

  • Téléchargement progressif d'une vidéo à l'aide d'un serveur Web
  • Intégration d'un fichier vidéo dans un fichier Animate
  • Utilisation des points de repère vidéo

Exportation et publication

A propos de l'exportation depuis Animate

  • Exportation de fichiers SWF
  • A propos des formats de fichier d'exportation
  • Mise à jour des fichiers SWF pour Dreamweaver

Exportation de graphiques

  • GIF animé, séquence GIF et image GIF
  • Création d'une feuille Sprite

Publication de documents Animate

  • Paramétrage pour la publication d'un document HTML 5 Canvas
  • Création de modèles HTML 5 Canvas personnalisés et annexion aux profils de publication
  • Définition des paramètres de publication pour les fichiers SVG
  • Définition des paramètres de publication d'un document WebGL