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