Accueil > Web design - les fondamentaux

 > Adobe Animate

null

Web design - les fondamentaux

Adobe Animate

Objectif

Concevoir et réaliser des animations interactives en utilisant les nouveaux standards HTML5.
Être visible sur toutes les plateformes : desktop, smartphones et tablettes.

Durée : 4 jours (28 heures)

Dates :
-20/02/23
-23/10/23

S'inscrire
Télécharger le pdf
Pré-requisMoyens pédagogiquesParticipantsFinancement & organisation

Il est nécessaire de connaître un logiciel de création graphique (Photoshop, Illustrator). La connaissance de Flash, du HTML et des CSS est un plus.

Programme de la formation

Introduction

  • Rôle des langages HTML5, CSS3, JavaScript, SVG
  • Comprendre la structure HTML5 avec Edge Animate

Prise en main du logiciel

  • Interface et environnement de travail
  • Les outils et le texte
  • Paramétrage d'un nouveau document
  • Créer, enregistrer et utiliser des gabarits
  • Gérer le temps et l'espace
  • Transition et images-clés
  • •Utilisation des symboles

Optimisation des médias

  • Formats, résolutions, préparation des fichiers

Mise en place

  • Importer des images
  • Définir une police Web (Typekit et Google Web Fonts)
  • Affecter une balise HTML5 à un élément

Animation

  • Gérer les transitions, les fondus, les masques, les accélérations, les filtres
  • Ajouter une ombre portée
  • Activer le verrouillage
  • Transformation : échelle, rotation, inclinaison, déformation et déplacement
  • Gestion des effets et des dégradés
  • Créer des trajectoires de mouvement
  • Animer le contenu d'une page HTML existante
  • Ajouter un préchargement prédéfini et personnalisé
  • Créer un bouton animé

Interactivité

  • Organiser son code
  • Ajouter du code sur le scénario et sur les objets
  • Ajouter des actions temporelles
  • Définir des événements à un élément et à la Scène
  • Déclencher et arrêter une animation
  • Afficher et masquer des éléments
  • Travailler avec des étiquettes
  • Cibler des symboles imbriqués
  • Obtenir une animation en boucle
  • Déclencher la tête de lecture en sens inverse
  • Ajouter du code HTML et des règles CSS

Responsive Web Design

  • Comprendre le mécanisme d'une mise en pages fluide
  • Créer un diaporama extensible

Son, vidéo et plan

  • Intégrer du son en HTML5
  • Intégrer une vidéo via les services de diffusion
  • Intégrer et afficher un plan d'accès Google Maps

Publication

  • Intégrer une animation au sein d'une page HTML existante
  • Définir une scène de niveau inférieur
  • Publier pour différents supports
  • Installer le widget dans le Dashboard
  • Vérifier la publication sur toutes les plates-formes
Menu