edge animate initiation

Transcription

edge animate initiation
EDGE ANIMATE INITIATION
CONTENU DE LA FORMATION EDGE ANIMATE
Fiche technique : A l’heure actuelle, le standard FLASH est de plus en plus
délaissé par l’ensemble de la communauté du web international.
Le langage HTML version 5 semble devenir une référence pour des animations
simples et efficaces. Associé à la maîtrise des « cascading style sheet » V3, il
représente un ensemble incontournable pour bien comprendre la structure des
sites modernes adaptés aux nouveaux médias (tablettes tactiles et
smartphones).
Adobe Edge Animate est un outil souple et puissant qui permet de créer des
animations respectant le standard html 5 et css 3. Une interface claire, intuitive
et professionnelle. Une série d’exercices et mises en situation ont été préparés
pour intégrer progressivement toutes les manipulations.
Pour les webmasters qui désirent connaître le webdesign professionnel, et
responsive. Exercices, manipulation des codes et actions, études de cas.
Objectif de la formation : Maîtriser l’interface de ce nouveau logiciel
permettant de créer des animations au standard html 5 et css 3. Respecter la
nouvelle sémantique structurelle et les mises en page responsives, adaptées à
tout type de périphériques modernes. Etre capable de créer une interactivité
personnalisée grâce aux comportements prédéfinis. Intégrer de la vidéo.
Interfaces parallaxes, dessins animés, etc.
Public concerné : OPÉRATEURS PAO – INFOGRAPHISTES – WEB DESIGNER
et toute personne qui réalise ou modifie un site internet attractif.
Prérequis : Connaissance de l’environnement Windows ou Macintosh.
Connaissance des notions de base du html et des css.
Durée : 3 journées
1/ INTRODUCTION - INTERNET - GÉNÉRALITÉS
L’internet – généralités - Analyse conceptuelle d’un site WEB
Les avantages de la navigation par liens hypertexte - Notions de communication
visuelle adaptée au WEB - le langage HTML 5, les CSS 3 et le standard W3C
Rappels : mise en ligne d’un site par FTP – les sites classiques
2/ NOTIONS PRÉREQUISES
Edge Animate dans l’ensemble « Edge Tools and Services » - Construction d’une
animation Edge Animate – structure - Analyse des fichiers générés lors de la
création d’une animation
3/ PREMIERS PAS AVEC EDGE ANIMATE
HTML 5 remplace Flash
Le principe de l'animation - Installation du logiciel
L'interface - L'espace de travail - Les menus
Notion de scénario - Créer un document Edge - Définir une police Web (Google
Web Font) Sauvegarder un document Edge
Analyse des fichiers crées - Créer des formes - Créer des éléments texte Propriétés des éléments
4/ IMPORTER DES IMAGES - Les formats du web (bitmap)
Le format vectoriel : SVG - Sprite sheets
Import depuis Flash et Illustrator
5/ L'ANIMATION
Une animation simple - Utilisation de la Timeline
Les clés d'animation - Animation complexe
Transitions et clés d'animation Marques et pop
Gérer le temps et le rythme - Symboles et animations imbriquées
6/ INTERACTIVITE ET CODE DANS EDGE Le principe de l'interactivité
Déclencheurs, évènements et actions Les syntaxes possibles
JavaScript - JQuery - un peu de code
Les comportements - Code sur la timeline
Actions sur les objets - Création de comportements personnalisés (snippets) La
notion de boutons
7/ POUR ALLER PLUS LOIN - Intégration Edge / Muse et Dreamweaver
8/ INTEGRATION DE MEDIAS - Intégrer du son en HTML5 via Edge Code
Intégrer la vidéo
9/ UTILISATION DES FONTES WEB DANS EDGE
Edge Web Fonts
10/ CONCLUSIONS