Outils graphiques / Web création Outils graphiques / Web création
Référence formation : 2-EA-BASE - Durée : 4 jours

Cliquez sur l'image ci-contre ou sur le lien ci-dessous
pour télécharger notre programme de formation professionnelle au format PDF
(nécessite © Acrobat Reader)

Objectifs

- Concevoir et réaliser des animations interactives en utilisant les nouveaux standards HTML5

- Être visible sur toutes les plateformes : desktop, smartphones et tablettes

Pré-requis

- 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

- Utilisateurs aynt une bonne utilisation de l’environnement informatique Mac ou PC

Plan de cours

1. Introduction

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

2. 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

3. Optimisation des médias

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

4. Mise en place

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

5. 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é

6. 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

7. Responsive Web Design

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

8. 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
  • Intégrer une animation au sein d'une page HTML existante

9. Publication

  • 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

Retour haut de page