Edge Animate , livre ebook

Editions Eyrolles - David Tardiveau

Découvre YouScribe en t'inscrivant gratuitement

Je m'inscris

Obtenez un accès à la bibliothèque pour le consulter en ligne
En savoir plus

233 pages

Français

Vous pourrez modifier la taille du texte de cet ouvrage

Obtenez un accès à la bibliothèque pour le consulter en ligne
En savoir plus

A propos
Informations
Extrait

Description

Le successeur de Flash pour le Web

Commercialisé par Adobe, Edge Animate est un outil d'animation destiné à tous les créatifs du Web et du Digital Publishing. Se positionnant clairement comme le successeur de Flash, il permet de produire du contenu animé et interactif, à intégrer dans une page HTML ou dans une publication numérique réalisée via DPS ou iBooks Author.

S'adressant tout particulièrement aux webdesigners, cet ouvrage pratique dresse un panorama complet de ce nouvel outil, tant attendu depuis la disparition de Flash : réalisation d'une animation, gestion des textes, images, sons et vidéos, exportation d'un projet Edge Animate, ajout d'interactivité... D'une pédagogie remarquable, il est complété par 70 fichiers d'exemples disponibles en ligne.

A qui s'adresse ce livre ?

Aux webdesigners, graphistes web, chefs de projets web, webmasters et développeurs web

A tous les anciens utilisateurs de Flash

Premiers pas avec Edge Animate
- Présentation d'Edge Animate
- Découverte de l'interface
- Créer et configurer un nouveau document Edge Animate

L'animation dans une composition
- Manipuler les formes
- Intégrer textes et images dans une animation
- Réaliser une animation
- Manipuler les symboles
- Ajouter du son ou une animation
- Ajouter une affiche ou une animation de préchargement
- Exporter un projet Edge Animate

L'interactivité dans une animation
- Se préparer à la programmation dans Edge Animate
- Contrôler les propriétés d'un élément
- Animer un élément
- Naviguer au sein d'une animation
- Gérer les images, textes, son et vidéos
- Travailler avec les données
- Edge Animate, les tablettes et DPS

Sujets

Loisirs

Arts Numériques

Sciences & Techniques

Informatique

Computers

informatique

Graphics

Video

Design

Animation

Media

Informations

Publié par	Editions Eyrolles
Date de parution	08 janvier 2015
Nombre de lectures	1
EAN13	9782212271485
Langue	Français
Poids de l'ouvrage	5 Mo

Informations légales : prix de location à la page 0,1050€. Cette information est donnée uniquement à titre indicatif conformément à la législation en vigueur.

Extrait

R sum
Le successeur de Flash pour le Web
Commercialisé par Adobe, Edge Animate est un outil d’animation destiné à tous les créatifs du Web et du Digital Publishing. Se positionnant clairement comme le successeur de Flash, il permet de produire du contenu animé et interactif, à intégrer dans une page HTML ou dans une publication numérique réalisée via DPS ou iBooks Author. S’adressant tout particulièrement aux webdesigners, cet ouvrage pratique dresse un panorama complet de ce nouvel outil, tant attendu depuis la disparition de Flash : réalisation d’une animation, gestion des textes, images, sons et vidéos, exportation d’un projet Edge Animate, ajout d’interactivité… D’une pédagogie remarquable, il est complété par 70 fichiers d’exemples disponibles en ligne.
À qui s’adresse ce livre ?
• Aux webdesigners, graphistes web, chefs de projets web, webmasters et développeurs web
• À tous les anciens utilisateurs de Flash
Au sommaire
Premiers pas avec Edge Animate . Présentation d’Edge Animate • Découverte de l’interface • Créer et configurer un document Edge Animate • L’animation dans une composition . Manipuler les formes • Intégrer textes et images dans une animation • Réaliser une animation • Manipuler les symboles • Ajouter du son ou une vidéo à une animation • Ajouter une affiche et une animation de préchargement • Exporter un projet Edge Animate • L’interactivité dans une animation . Programmer dans Edge Animate • Contrôler les propriétés d’un élément • Animer un élément • Naviguer au sein d’une animation • Gérer les images, textes, sons et vidéos • Travailler avec des données • Edge Animate, les tablettes et DPS.

Téléchargez les 70 fichiers d’exemples sur www.voxpedago.com
Biographie auteur
Titulaire d’un master en multimédia interactif, David Tardiveau enseigne les nouvelles technologies depuis 1993. Après avoir animé des formations dans les domaines de la PAO et du multimédia, il assure depuis 1996 des cours dans des écoles d’enseignement supérieur et des universités françaises. À partir de 2009, il expérimente les différentes techniques et solutions de développement de contenus pour supports mobiles (tablettes et smartphones). Aujourd’hui, il enseigne le Digital Publishing et la conception pour supports mobiles, notamment dans le département Design interactif de GOBELINS, l’école de l’image.
www.editions-eyrolles.com
Avec les illustrations d’Aurore Brunet
ÉDITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com
Attention : la version originale de cet ebook est en couleur, lire ce livre numérique sur un support de lecture noir et blanc peut en réduire la pertinence et la compréhension.
En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans l’autorisation de l’Éditeur ou du Centre Français d’exploitation du droit de copie, 20, rue des Grands Augustins, 75006 Paris.
© Aurore Brunet pour les illustrations
© Groupe Eyrolles, 2015, ISBN : 978-2-212-14051-4
CHEZ LE MÊME ÉDITEUR
J. M OYA et É. D ELAMARRE . – Profession graphiste indépendant (3 e édition) . N°14090, 2015, 296 pages.
F. T AYLOR . – Faire son book (2 e édition). N°13983, 2014, 160 pages.
G. L EWIS . – 2000 accords de couleurs . Pour les graphistes et les designers. N°12537, 2009, 336 pages.
C. C HAPMAN . – Choisir ses couleurs pour le Web. N°14041, 2014, 144 pages.
A. B OUCHER . – Ergonomie web (3 e édition) . Pour des sites web efficaces. N°13215, 2011, 356 pages.
A. B OUCHER . – Mémento Ergonomie web (3 e édition) . N°13735, 2013, 14 pages.
E. S LOÏM . – Mémento Sites web (3 e édition) . Les bonnes pratiques. N°12802, 2010, 18 pages.
E. S AINTE -C ROIX . – Cahier Illustrator CC . Spécial débutants. N°13886, 2014, 144 pages.
T. S AMARA . – Le design graphique par le dessin. N°13806, 2014, 224 pages.
M. M ONTEIRO . – Métier web designer. N°13527, 2012, 156 pages.
Table des matières
Avant-propos
Faut-il connaître le HTML pour utiliser Edge Animate ?
Une palette et des exemples à télécharger
Remerciements
P ARTIE I
Premiers pas avec Edge Animate
C HAPITRE 1 – Présentation d’Edge Animate
Les techniques numériques d’animation
Un fichier vidéo
Une série de fichiers
Un langage de programmation ou de script
Quel logiciel utiliser ?
Genèse du logiciel Edge Animate
Le type d’animation produit
C HAPITRE 2 – Découverte de l’interface
Rôle des différentes palettes de l’interface
La scène
La palette Propriétés
Le scénario
La barre d’outils
La palette Éléments
La palette Bibliothèque
L’organisation des fichiers sources
En résumé
La notion d’élément
Conseils sur les règles de nommage de vos éléments
C HAPITRE 3 – Créer et configurer un document Edge Animate
L’écran d’accueil
Les modèles
Configurer un nouveau document
Largeur et hauteur de la scène
Mise à l’échelle réactive
Couleur de la scène
Mode de lecture
Dépassement des éléments sur la scène
P ARTIE II
L’animation dans une composition
C HAPITRE 4 – Manipuler les formes
Créer une forme
Les attributs d’une forme
Dimensions et positions d’une forme
Redimensionner une forme ou un élément
Positionner une forme ou un élément
Responsive Design ?
Rotation et inclinaison
Angles, filtres et ombres
Les angles de formes
Les filtres
Les ombres
Curseurs et accessibilité
Gestion des plans
C HAPITRE 5 – Intégrer textes et images dans une animation
Placer un texte sur la scène et le configurer
Importer une police
Ajouter un hyperlien à un texte
Optimiser une image pour le Web
Intégrer et gérer une image dans un document
Import automatique
Interchanger deux images
Div ou img
Écrêter/recadrer une image
Repositionner une image recadrée
C HAPITRE 6 – Réaliser une animation
La notion d’images-clés
Créer une image-clé
Sélectionner plusieurs images-clés
Déplacer une image-clé
Supprimer une image-clé
Réaliser une animation sans interpolation
Réaliser une animation à base d’interpolation (transition)
Ajouter des interpolations entre deux images-clés
Créer une interpolation et une image-clé automatiquement
Créer une interpolation avec verrouillage
En résumé
Ajouter une accélération
Utiliser une trajectoire de mouvement
Utiliser l’écrêtage dans le cadre d’une animation
Un dernier exemple…
Les filtres dans une animation
Copier-coller les interpolations/transitions
C HAPITRE 7 – Manipuler les symboles
Une animation imbriquée
Contrôler une animation sur la scène
Simplifier la timeline
Créer un symbole
Modifier un symbole
Créer un symbole animé
Créer une feuille de sprites
Méthode n° 1 : approche manuelle
Méthode n° 2 : approche automatique
Exporter un symbole
C HAPITRE 8 – Ajouter du son ou une vidéo à une animation
Codecs audio et vidéo
Le codec audio
Le codec vidéo
WebM ou Ogg ?
Différence entre un format et un codec
Gérer un fichier son dans les ressources
Contrôler un son dans la fenêtre Scénario
Convertir un son
Gérer un fichier vidéo dans les ressources
Contrôler une vidéo dans la fenêtre Scénario
Convertir une vidéo
Les dimensions d’une vidéo
Le débit d’une vidéo
Vérifier le résultat de la compression
Encoder une vidéo avec Miro Video Converter
C HAPITRE 9 – Ajouter une affiche et une animation de préchargement
Définir l’affiche d’une animation
La scène de niveau inférieur
L’animation de préchargement
Réaliser un GIF animé à l’aide de Photoshop
C HAPITRE 10 – Exporter un projet Edge Animate
Pour le Web
Pour Adobe DPS, Muse et Dreamweaver
Pour iBooks et Mac OS X
Intégrer une animation dans une page HTML
Explications préliminaires
Procédure d’intégration d’une animation dans une page web
Intégrer un fichier .oam dans InDesign pour DPS
Intégrer un fichier .oam dans Muse
Intégrer un widget dans iBooks
Installer un widget OS X
Intégrer un .oam dans une page WordPress
P ARTIE III
L’interactivité dans une animation
C HAPITRE 11 – Se préparer à la programmation dans Edge Animate
Quel langage pour quelle interactivité ?
Qu’est-ce que le jQuery ?
Scripts, programmes ou actions ?
Les déclencheurs
Supprimer un déclencheur
Les scripts d’événements
Associer un événement et une action
Modifier l’événement d’une action
Événement keydown
Cibler un élément
Cas n° 1 – Clic sur un élément pour le contrôler
Cas n° 2 – Clic sur un élément pour contrôler un symbole
Cas n° 3 – Clic sur un élément pour contrôler un élément contenu dans un symbole
Cas n° 4 – Clic sur un élément pour contrôler la lecture d’un symbole
Cas n° 5 – Clic sur un élément contenu dans un symbole, pour contrôler un élément sur la scène
Cas n° 6 – Clic sur un élément contenu dans un symbole, pour contrôler ce dernier
La fenêtre Code
Une variable et sa portée
Qu’est-ce qu’une variable ?
Déclarer une variable
Ajouter un script à une animation
Faire appel aux classes
Les commentaires et doubles barres obliques
Les commentaires pour structurer votre code
C HAPITRE 12 – Contrôler les propriétés d’un élément
Position, dimensions et rotation d’un élément
Position d’un élément sur la scène
Dimensions d’un élément sur la scène
Rotation d’un élément sur la scène
Visibilité et transparence d’un élément
Masquer et afficher
Diminuer la hauteur
Effectuer un fondu
Vitesse d’application des méthodes
Imbrication des effets
Connaître les coordonnées de la souris
Drag and drop
Contraindre le déplacement dans une zone
Contraindre le déplacement avec un pas
Exécuter une instruction lors du drag and drop
Gérer les plans
Window resize
Personnaliser le curseur
Quelques précisions de syntaxe
C HAPITRE 13 – Animer un élément
La méthode animate()
La bibliothèque GreenSock
Charger le fichier GreenSock
La méthode to()
Le contrôle de la timeline d’un symbole
Une réserve d’images
C HAPITRE 14 – Navigue