Adobe Edge Animate CC 2015 Manuel utilisateur

Aide d’Adobe® Edge Animate CC
Certains liens peuvent mener vers des pages disponibles uniquement en anglais.
Juin 2014
Nouveautés
Il se peut qu’une partie du contenu accessible depuis cette page ne soit disponible qu’en anglais.
1
Nouveautés d’Edge Animate CC (version 3.0, janvier 2014)
Prise en charge des données audio
Mise à l’échelle réactive
Chargement de scripts
Améliorations relatives aux trajectoires de mouvement
Nouvelles commandes de répartition
Centrage de la scène
Image d’affiche transparente pour OAM
Option CDN pour OAM
Nouvelles leçons
Mise à jour de jQuery
Haut de la page
Prise en charge des données audio
Faites vibrer les murs avec vos projets Edge Animate, grâce à la nouvelle option permettant d’ajouter des données audio à vos projets. A l’aide
des API audio HTML5 natives disponibles dans tous les navigateurs modernes, vous pouvez lier des événements audio au scénario, ajouter des
actions audio à vos éléments ou encore créer des transitions audio afin d’obtenir des effets sonores uniques.
Pour en savoir plus sur l’utilisation des fonctions audio, reportez-vous à la section Ajouter des données audio aux animations.
Pour regarder un didacticiel vidéo, cliquez ici.
Haut de la page
Mise à l’échelle réactive
Il est désormais aussi facile de créer des projets Animate réactifs que de cliquer sur un simple bouton. Une fois activée, cette option vous permet
de mettre à l’échelle votre scène Animate tout en conservant ses proportions. Utilisez l’option Mise à l’échelle réactive pour le contenu Animate
autonome ou lorsque vous imbriquez des compositions Edge Animate dans un site Web réactif.
La mise à l’échelle réactive peut également être utilisée lorsque vous imbriquez un fichier OAM dans des applications Adobe prises en charge.
Redimensionnez le cadre de contenu en fonction du fichier OAM défini et affichez l’aperçu pour voir ce que ça donne.
Dans les propriétés de la scène, vous pouvez définir la mise à l’échelle réactive sur « Largeur », « Hauteur » ou « Les deux » pour
redimensionner l’ensemble de la composition de manière proportionnelle. Les proportions, qui sont déterminées par le ratio entre largeur de la
scène et hauteur de la scène, sont conservées.
Option Mise à l’échelle réactive dans le panneau Propriétés
L’option « Largeur » redimensionne la composition uniquement lorsque la largeur de la fenêtre de document change.
L’option « Hauteur » redimensionne la composition en fonction de la hauteur du document.
L’option « Les deux » redimensionne la composition dans les deux sens.
La mise à l’échelle est déterminée par la taille de l’élément parent de la scène. Si vous placez la scène dans une page statique, la hauteur et la
largeur de l’élément parent doivent également être définies.
Il est désormais plus facile de placer une composition dans un fichier statique : elle s’intègre dans le flux de document.
Pour regarder un didacticiel vidéo, cliquez ici.
Haut de la page
Chargement de scripts
Importez des bibliothèques JavaScript externes pour élargir les possibilités d’Animate grâce à vos scripts favoris. Vous avez le choix entre deux
sources possibles :
2
Chargement de scripts dans la bibliothèque
Ajouter un fichier JS depuis le disque
Importez des fichiers JS depuis votre système local. Ces fichiers sont placés dans un dossier nommé « js » lors de l’enregistrement.
Ajout d’un fichier JS depuis le disque
Ajouter un fichier JS depuis une URL
Ajoutez un lien vers une version hébergée en ligne de votre fichier de script.
Ajout d’un fichier JS depuis une URL
Tous les scripts et références de scripts locaux sont inclus lors de l’enregistrement, la publication et la création de modèles.
Améliorations relatives aux trajectoires de mouvement
Haut de la page
Diverses améliorations ont été apportées à l’édition de trajectoires de mouvement, ce qui vous permet de modifier facilement les trajectoires
appliquées à des objets.
Lorsque vous survolez une trajectoire de mouvement, vous voyez les nouvelles info-bulles en incrustation qui fournissent des informations sur les
raccourcis clavier disponibles pour contrôler la trajectoire. Pour activer et désactiver l’affichage de cette incrustation, appuyez sur la touche « H ».
Option (Mac) ; Alt (Windows) + cliquer-glisser : permet de faire pivoter la trajectoire de mouvement.
3
Rotation d’une trajectoire de mouvement
Commande/Ctrl + Option (Mac) ; Ctrl + Alt (Windows) + cliquer-glisser : permet de mettre à l’échelle la trajectoire de mouvement.
Mise à l’échelle d’une trajectoire de mouvement
Haut de la page
Nouvelles commandes de répartition
Les nouvelles commandes de répartition sont disponibles dans le menu Aligner, pour vous aider à aligner et à positionner les éléments sur la
scène. Sélectionnez au moins trois objets et cliquez sur Modifier > Répartir dans le menu pour accéder aux différentes options de répartition.
Pour espacer de manière uniforme des objets de tailles différentes sur le plan horizontal ou vertical, sélectionnez Répartir > Espace horizontal ou
Espace vertical.
Haut de la page
Centrage de la scène
Centrez votre scène Animate dans la fenêtre du navigateur ou tout autre conteneur parent dans laquelle elle se trouve. Sélectionnez l’une des
trois options suivantes :
4
Centrage de la scène
Vertical : permet de centrer la scène en fonction de la largeur de la fenêtre.
Horizontal : permet de centrer la scène en fonction de la hauteur de la fenêtre.
Les deux : permet de centrer la scène en fonction de la largeur et la hauteur de la fenêtre.
Haut de la page
Image d’affiche transparente pour OAM
Lorsque vous publiez un fichier OAM, vous avez désormais la possibilité d’enregistrer l’image d’affiche sous la forme d’un fichier PNG transparent.
Cette option est particulièrement utile lorsque vous intégrez du contenu Animate dans Adobe InDesign ou Adobe Muse si vous souhaitez qu’une
scène transparente apparaisse en incrustation par-dessus le contenu de votre document.
Publication avec une image d’affiche transparente
Remarque : quand cette option est sélectionnée, l’OAM s’affiche sous la forme d’un cadre vide lorsqu’il est placé dans d’autres applications
Adobe. Affichez systématiquement un aperçu en direct de votre projet pour voir les résultats de lecture.
Veillez également à définir la scène comme étant transparente avant de procéder à la publication.
Pour le moment, cette fonction n’est pas compatible avec les folios PDF lors de la publication dans DPS. Pour utiliser une image d’affiche
transparente, sélectionnez le type de folio Automatique, PNG ou JPG.
Haut de la page
Option CDN pour OAM
L’hébergement de fichiers d’exécution est désormais proposé comme paramètre de publication pour OAM. Si vous créez du contenu Animate en
vue de l’utiliser en ligne (Adobe Muse ou Adobe Dreamweaver), l’hébergement CDN peut s’avérer utile pour l’exécution Animate et jQuery.
Lorsque vous activez cette option, les fichiers se téléchargent plus rapidement avec l’hébergement mis en cache.
5
Option CDN pour OAM
Haut de la page
Nouvelles leçons
Deux nouvelles leçons (Mise en forme réactive et Audio) sont proposées pour vous aider à découvrir une partie des fonctionnalités disponibles
dans cette version. Sélectionnez « Prise en main » sur l’écran d’accueil ou cliquez sur Fenêtre > Leçons pour afficher le panneau des leçons.
Haut de la page
Mise à jour de jQuery
Edge Animate utilise maintenant la version 2.0.3 de jQuery.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
6
Télécharger des exemples de fichiers
Télécharger des exemples depuis html.adobe.com
Exemple (21 janvier 2014)
Exemples à télécharger depuis le site de Chris Gannon
Exemple (17 juin 2013)
Il se peut qu’une partie du contenu accessible depuis cette page ne soit disponible qu’en anglais.
7
Création de contenu et importation d’actifs
Création de contenu pour l’animation
Article (17 juin 2013)
Création d’un projet et importation de contenu (Vidéo)
Didacticiel vidéo (17 juin 2013)
Utilisation des feuilles de sprite Flash avec Animate (Didacticiel)
Didacticiel vidéo (17 juin 2013)
Il se peut qu’une partie du contenu accessible depuis cette page ne soit disponible qu’en anglais.
8
Ajout de données audio aux animations
Adobe Edge Animate prend désormais en charge le format audio HTML5 natif avec l’élément <audio>, ce qui vous permet d’ajouter du son à vos
projets d’animation. Vous pouvez contrôler la lecture audio dans les compositions à l'aide de code HTML et JavaScript de base. Vous pouvez
également lier les éléments audio à des événements de la souris ou du clavier tactile, ainsi que déclencher une lecture audio dans le scénario.
Les fonctionnalités audio d’Adobe Edge Animate sont intégrées au DOM HTML. Ainsi, les sons peuvent être lus sur n’importe quel ordinateur ou
appareil, sans avoir recours à un quelconque module externe.
Vous pouvez importer les types audio suivants dans Edge Animate :
.mp3
.ogg/.oga
.wav
.m4a
.aac
Pour une meilleure cohérence entre les navigateurs, pensez à inclure les ressources .mp3 et .ogg des éléments audio à votre projet. Pour obtenir
une description détaillée des types audio pris en charge, consultez la page Formats Media supportés par les éléments HTML audio et vidéo.
Pour créer des versions de secours de votre fichier audio, vous pouvez utiliser une application de conversion audio telle qu’Adobe Audition, qui
est comprise dans votre abonnement Creative Cloud.
Ajout de données audio aux compositions
Lecture et contrôle des données audio
Ajustement des données audio
Préchargement d’une piste audio
Activation du lecteur audio par défaut
Utilisation des fonctions audio sur un appareil
Conseils et observations concernant la compatibilité entre navigateurs
Haut de la page
Ajout de données audio aux compositions
Effectuez l’une des opérations suivantes :
Faites glisser les fichiers audio vers votre projet, depuis votre système de fichiers. Un « groupe audio » portant le nom du fichier audio est
créé dans la bibliothèque. Celui-ci contient le fichier audio ainsi que les fichiers de secours permettant d’assurer la compatibilité entre
navigateurs.
Remarque : Lorsque vous les faites glisser dans le projet, les fichiers de secours sont automatiquement rassemblés sous le groupe audio.
Groupe audio dans la bibliothèque
Cliquez sur Ajouter une piste audio dans votre bibliothèque de projet et recherchez le fichier audio. Faites ensuite glisser le groupe audio
vers la scène.
9
Option « Ajouter une piste audio » dans la bibliothèque
Une fois les données audio ajoutées à votre projet, un « élément audio » apparaît dans le panneau Eléments. Si vous le sélectionnez, les options
permettant de contrôler la lecture de la piste audio s’affichent.
Elément audio dans le panneau Eléments
Haut de la page
Lecture et contrôle des données audio
Vous pouvez lire et contrôler les données audio à l’aide de l’une des options suivantes :
Panneau Propriétés
Lecture auto : permet de lancer automatiquement la lecture du fichier audio sur le scénario.
Boucle : relance le fichier audio depuis le début quand sa lecture se termine.
Options de contrôle des données audio dans le panneau Propriétés
Scénario
Lecture : permet de lire le fichier audio depuis la position actuelle de la tête de lecture.
Lire à partir de : permet de préciser la marque temporelle à partir de laquelle vous souhaitez lancer la lecture.
Pause : permet de mettre en pause la piste audio. Utilisez une fonction de lecture pour reprendre la lecture.
Options de contrôle des données audio dans le scénario
Actions audio : permet d’utiliser des fragments de code dans le panneau Actions pour contrôler la lecture audio des événements.
Voir aussi
Actions audio
10
1. Cliquez sur {} en regard de l’élément audio sur le scénario pour ouvrir l’éditeur d’actions.
2. Dans la liste des événements qui s’affiche, cliquez sur le déclencheur requis.
3. Dans la liste Choisir une action, cliquez sur Audio, puis sur l’action requise.
Actions audio dans l’éditeur d’actions
4. Dans la section Sélectionner une cible, cliquez sur Scène, puis double-cliquez sur l’élément sur lequel doit s’appliquer l’action que vous avez
sélectionnée.
5. Si nécessaire, modifiez le code dans la fenêtre de code.
Important : Il peut arriver que la lecture de votre piste audio ne pose aucun problème en local, mais échoue une fois que vous l’avez chargée sur
un serveur Web. Dans ce cas, configurez le fichier .htaccess de votre site Web de façon à inclure les types MIME requis pour la prise en charge
des données audio. Contactez l’administrateur de votre site Web pour obtenir de l’aide.
Haut de la page
Ajustement des données audio
Vous pouvez définir des transitions d’images-clés afin de contrôler les transitions de volume dans le scénario. Utilisez les transitions de volume
pour créer des effets audio uniques, par exemple, fondu à l’ouverture, fondu à la fermeture ou fondu enchaîné de plusieurs pistes.
Remarque : Sur la plupart des appareils mobiles, les transitions de volume relatives aux pistes audio ne sont pas disponibles. Reportez-vous à la
section Utilisation des fonctions audio sur un appareil pour connaître les restrictions applicables.
Haut de la page
Préchargement d’une piste audio
Pour précharger des fichiers audio avant le chargement de la composition, sélectionnez « Précharger la piste audio » dans la section
Préchargement du panneau Propriétés de la scène.
Remarque : Le préchargement de données audio n’est pas disponible sur la plupart des appareils mobiles. Reportez-vous à la section Utilisation
des fonctions audio sur un appareil pour connaître les restrictions applicables.
Haut de la page
Activation du lecteur audio par défaut
Vous pouvez utiliser le lecteur Windows Media Player par défaut du navigateur pour afficher les commandes relatives à vos données audio. Le
lecteur audio par défaut est automatiquement masqué. Pour activer l’affichage du lecteur, sélectionnez l’élément audio et cliquez sur « Activé »
dans le panneau Propriétés.
11
Activation du lecteur audio par défaut
L’habillage du lecteur est rendu par les navigateurs, il peut donc apparaître différemment selon le navigateur utilisé. Ainsi, le lecteur que vous
voyez dans Chrome diffère de celui affiché dans Firefox. Reportez-vous à la section Actions audio pour apprendre à créer des commandes
personnalisées permettant de générer votre propre lecteur.
Lorsque le lecteur est affiché sur la scène, vous pouvez y ajouter des propriétés d’animation et de transformation, comme pour n’importe quel
autre objet. Dans la mesure où les éléments <audio> sont un type spécial d’élément HTML, seules certaines propriétés sont disponibles :
Opacité
Ecrêtage
Position et taille
Transformation
Haut de la page
Utilisation des fonctions audio sur un appareil
iOS
Dans Safari sur iOS (pour tous les appareils, y compris l’iPad), où les utilisateurs peuvent être connectés à un réseau de téléphonie mobile et être
facturés par unité de données, les fonctions de préchargement, de lecture et de lecture automatique sont désactivées. Aucune donnée n’est
chargée tant que l’utilisateur ne lance pas la lecture du fichier audio.
Vous pouvez utiliser le panneau Actions audio pour appeler un élément audio déclenché par un événement utilisateur. Pour plus d’informations sur
les actions audio, voir Actions audio.
Les images-clés et les commandes de volume configurées par le biais de la propriété de volume ne sont pas prises en charge sur les appareils
iOS. Les utilisateurs peuvent régler le volume à l’aide de la commande présente sur l’appareil lui-même.
Avant iOS 4.0, les iPhone et iPod touch n’étaient pas capables de lire des données audio incorporées en ligne. Elles étaient systématiquement
affichées en mode plein écran. Sur tous les appareils avec iOS 4.0 ou une version ultérieure, les données audio peuvent être lues en ligne.
Android
Android présente généralement les mêmes restrictions d’élément audio que le système iOS.
Conseils et observations concernant la compatibilité entre navigateurs
Haut de la page
Synchronisation audio
Vous pouvez utiliser des éléments audio pour ajouter des effets sonores chorégraphiques à vos compositions de scène. Cependant, du fait de la
nature du Web, il est possible que les pistes audio soient désynchronisées par rapport aux éléments mobiles présents sur la scène. Vous pouvez
rencontrer ce problème de retard de lecture lorsque vous coordonnez des mouvements avec des sons, en particulier s’il s’agit d’une piste
relativement longue.
Sprites audio
L’utilisation de sprites audio permet de créer un fichier audio unique comportant plusieurs parties lisibles distinctes. Cette technique est utilisée
pour télécharger toutes vos données audio dans un même fichier, afin de réduire le temps de téléchargement.
Pour utiliser un sprite audio, convertissez votre élément audio en symbole et utilisez des marques de lecture pour appeler les sections de votre
sprite.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
12
Utiliser des polices Web
Vous pouvez appliquer les polices d’Edge Web Fonts à du texte directement à partir d’Edge Animate. Lorsque vous sélectionnez une police dans
la boîte de dialogue Edge Web Fonts, le code permettant d’extraire la police depuis le serveur est automatiquement inséré dans votre code.
Edge Animate vous permet également de choisir des polices de secours en cas de problème lors du téléchargement ou lors de l’utilisation d’Edge
Web Fonts sur le poste de l’utilisateur.
1. Insérez le texte dans la zone de travail d’Edge Animate.
2. Dans la section Texte du panneau Propriétés, cliquez sur le bouton "+" en regard du menu des polices.
3. Sélectionnez la police que vous souhaitez utiliser. Un aperçu du texte avec la police appliquée s’affiche.
Vous pouvez filtrer les polices affichées dans le panneau en fonction de leur type. Pour cela, utilisez les boutons à gauche du panneau. Par
exemple, pour afficher uniquement les polices de type sans serif, cliquez sur le bouton Sans Serif.
4. Cliquez sur Ajouter une police.
Les polices sélectionnées et appliquées sont ajoutées à la bibliothèque de polices dans Edge Animate. Dans cette bibliothèque de polices, il
vous suffit de cliquer deux fois sur une police afin d’indiquer des polices de secours.
En cas de problème de téléchargement des polices Web à partir du serveur, les polices de secours sont utilisées pour afficher le texte. Les
polices sont utilisées selon l’ordre dans lequel elles apparaissent dans la liste.
13
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions de Creative Commons.
Informations juridiques | Politique de confidentialité en ligne
14
Créer des animations à l’aide du scénario
Scénario Edge Animate
didacticiel vidéo (13 décembre 2012)
Création d’animations dans Edge Animate
didacticiel vidéo (13 décembre 2012)
Animation du texte
didacticiel vidéo (13 décembre 2012)
Exploiter des scénarios indépendants avec des symboles
didacticiel (12 décembre 2012)
Créer un logo animé
didacticiel (08 janvier 2013)
15
Utilisation de l’outil de verrouillage, des images-clés et des transitions
dans les animations
Création d’animations à l’aide de l’outil de verrouillage
Création d’animations à l’aide d’images-clés
Modification d’images-clés
Copie de transitions
En savoir plus
Vous pouvez créer des animations dans Edge Animate à l’aide de méthodes d’animation standard basées sur les images-clés. Edge Animate
propose également une autre méthode basée sur l’outil de verrouillage pour créer des images-clés.
Création d’animations à l’aide de l’outil de verrouillage
Haut de la page
Cet outil verrouille les valeurs de propriété des éléments à un moment donné dans le Scénario. Lors d’une modification, l’outil verrouille la valeur
en cours pendant que vous modifiez les valeurs de propriété au niveau de la tête de lecture. Edge Animate génère les images-clés et les
transitions vers ou à partir de la tête de lecture.
Pour créer des animations à l’aide de l’outil de verrouillage :
1. Définissez les propriétés d’élément que vous souhaitez verrouiller à un moment donné dans le Scénario.
2. Cliquez sur le bouton Activer/Désactiver le verrouillage dans le panneau Scénario.
Activer/Désactiver le verrouillage
Vous pouvez également activer le verrouillage en double-cliquant sur la tête de lecture ou en appuyant sur la touche P de votre clavier.
3. Faites glisser le verrouillage vers l’emplacement du Scénario où vous souhaitez verrouiller les propriétés de l’élément.
4. Une fois les propriétés initiales verrouillées, modifiez les valeurs des propriétés de l’élément.
Les chevrons étant pointés vers la tête de lecture, les modifications sont apportées au niveau de la tête de lecture.
Adobe Edge Animate ajoute automatiquement des images-clés et des transitions entre la position de la tête de lecture et du verrouillage. Il
n’est pas nécessaire d’ajouter manuellement les images-clés ni de repositionner la tête de lecture dans le Scénario.
5. Vous pouvez afficher un aperçu de l’animation en cliquant sur le bouton Lecture dans le panneau Scénario ou en appuyant sur la barre
d’espace sur le clavier.
Pour voir une leçon sur l’animation à l’aide de l’outil de verrouillage :
1. Sélectionnez Fenêtre > Leçons dans Edge Animate.
2. Cliquez sur Animer II : Verrouillage.
Les images-clés indiquent la valeur d’une propriété à un moment donné. Lorsque vous créez une animation à l’aide d’images-clés, vous ajoutez
une image-clé à deux emplacements ou plus dans le Scénario et définissez des propriétés d’élément différentes à chaque emplacement. Edge
Animate utilise les valeurs de propriété pour animer le contenu se trouvant entre les images-clés.
Pour créer une animation à l’aide d’images-clés :
1. Sélectionnez l’élément que vous souhaitez animer sur la scène.
16
2. Déplacez la tête de lecture vers l’emplacement du Scénario où vous voulez démarrer l’animation.
3. Dans le panneau Propriétés de l’élément, cliquez sur le bouton Ajouter une image-clé (bouton en forme de losange) en regard de la
propriété que vous souhaitez modifier au fil du temps.
Ajout d’une image-clé
4. Déplacez la tête de lecture vers un autre emplacement du Scénario et modifiez la valeur de la propriété.
Edge ajoute automatiquement une image-clé de fin et crée la transition.
5. Vous pouvez afficher un aperçu de l’animation en cliquant sur le bouton Lecture dans le panneau Scénario ou en appuyant sur la barre
d’espace sur le clavier.
Pour voir une leçon sur l’animation à l’aide d’images-clés :
1. Sélectionnez Fenêtre > Leçons dans Edge Animate.
2. Cliquez sur Animer I : Images-clés.
Haut de la page
Modification d’images-clés
1. Déplacez la tête de lecture vers une image-clé (icône en forme de losange) dans le Scénario.
2. Modifiez la valeur de propriété modifiable située dans la partie gauche du panneau Scénario.
Haut de la page
Copie de transitions
Vous pouvez copier une transition et la coller dans le Scénario du même élément ou d’un autre élément.
1. Cliquez sur une transition dans le Scénario pour la sélectionner. Une fois la transition sélectionnée, une bordure orange apparaît autour de
la barre de transition dans le Scénario.
2. Appuyez sur Ctrl+C (Windows) ou sur Cmd+C (Macintosh) pour copier la transition dans le Presse-papiers.
Vous pouvez également couper la transition à partir de l’élément à l’aide des touches Ctrl+X (Windows) ou de Cmd+X (Macintosh).
3. Si vous souhaitez copier la transition vers un autre élément, sélectionnez l’élément en question sur la scène.
4. Déplacez la tête de lecture vers l’emplacement où vous souhaitez que la transition copiée démarre.
5. Appuyez sur Ctrl+V (Windows) ou sur Cmd+V (Macintosh) pour coller la transition dans le Scénario.
Haut de la page
En savoir plus
Création et importation d’actifs
Création d’animation
Création d’une mise en forme flexible
Création d’un logo animé
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
17
Création d’animations imbriquées à l’aide de symboles
Création d’animations réutilisables avec des symboles
Création d’un symbole
Animation des éléments d’un symbole
Exportation d’un symbole
Importation d’un symbole
Contrôle des symboles à l’aide de JavaScript
En savoir plus
Créez des animations imbriquées avec des scénarios indépendants et des fonctions interactives. Les symboles sont des éléments qui
comprennent leur propre scénario. Vous pouvez animer un symbole en tant qu’élément standard dans la scène, par exemple, en le déplaçant de
gauche à droite. Vous pouvez également animer les éléments individuels composant le symbole. En d’autres termes, vous pouvez créer une
animation à l’intérieur d’une autre animation.
Les symboles sont réutilisables et peuvent être contrôlés avec des API et des fragments de code préconstruits.
Pour voir une leçon sur l’animation à l’aide de symboles :
1. Sélectionnez Fenêtre > Leçons dans Edge Animate.
2. Cliquez sur Réutiliser.
Haut de la page
Création d’un symbole
1. Dans le panneau Eléments, sélectionnez un ou plusieurs éléments. La sélection de plusieurs éléments entraîne la création d’un symbole
unique à partir de ces éléments.
Remarque : vous pouvez également sélectionner des symboles pour créer des symboles imbriqués.
2. Cliquez avec le bouton droit de la souris et sélectionnez Convertir en symbole dans le menu contextuel.
3. Dans la boîte de dialogue Créer un symbole, définissez le nom du symbole et cliquez sur OK.
Haut de la page
Animation des éléments d’un symbole
1. Dans le panneau Eléments, cliquez avec le bouton droit de la souris sur le symbole et sélectionnez Modifier le symbole.
Vous pouvez également cliquer avec le bouton droit de la souris sur le symbole dans la scène.
2. Animez un ou plusieurs éléments composant le symbole.
3. Pour quitter le mode de modification de symbole, cliquez sur le mot Scène situé en haut de la fenêtre d’aperçu.
4. Vous pouvez afficher un aperçu de l’animation en cliquant sur le bouton Lecture dans le panneau Scénario ou en appuyant sur la barre
d’espace sur le clavier.
Haut de la page
Exportation d’un symbole
Vous pouvez copier et coller un symbole d’un projet à l’autre.
Vous pouvez également exporter des symboles et leurs propriétés sous forme de fichier unique (.easym) pouvant être partagé et importé dans
une autre composition.
1. Cliquez avec le bouton droit de la souris sur le symbole dans le panneau Eléments et sélectionnez Copier.
2. Basculez vers un autre projet.
3. Cliquez avec le bouton droit de la souris sur l’élément Scène dans le panneau Eléments et sélectionnez Coller.
1. Sélectionnez les symboles à exporter dans la scène ou dans le panneau Bibliothèque.
2. Cliquez avec le bouton droit de la souris et sélectionnez Exporter le symbole.
Haut de la page
Importation d’un symbole
1. Cliquez sur le bouton Plus (+) en regard de l’onglet Symboles dans la bibliothèque.
2. Recherchez et sélectionnez le fichier du symbole (.easym) à importer.
18
Haut de la page
Contrôle des symboles à l’aide de JavaScript
Vous pouvez utiliser JavaScript pour contrôler les symboles. Pour plus d’informations, voir :
Ajout d’interactivité avec JavaScript
« Utilisation de symboles » dans le manuel Guide de l’API Edge Animate
Haut de la page
En savoir plus
Exploiter des scénarios indépendants avec des symboles
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
19
Animation de pages HTML existantes
Vous pouvez animer et ajouter de l’interactivité aux éléments se trouvant dans les pages HTML existantes. Etant donné que le code d’animation
généré par Edge Animate est stocké dans un fichier distinct, l’intégrité de la page HTML est conservée.
1. Ouvrez une page HTML existante dans Edge (Fichier > Ouvrir).
Edge Animate ouvre uniquement le code conforme aux normes. Par exemple, si votre document comporte des ID en double, l’outil vous en
informe et n’ouvre pas le fichier. Si vous recevez des messages d’erreur ou constatez un comportement anormal, essayez de contrôler la
page HTML à l’aide d’un programme de validation HTML.
2. Sélectionnez un élément de la page dans la scène.
Vous pouvez également sélectionner un élément dans le panneau Eléments qui affiche l’élément DOM (Document Object Model) de la
page.
3. Animez l’élément. Voir Créer des animations.
Remarque : l’utilisation des éléments HTML comporte des limitations. Les éléments HTML ne peuvent pas être convertis en symboles et
ne possèdent pas toutes les propriétés des autres éléments. Si vous recevez des messages d’erreur ou constatez un comportement
anormal, essayez de contrôler la page HTML à l’aide d’un programme de validation HTML.
Vous pouvez également ajouter des éléments tels que des div ou des textes, importer des images dans Edge, puis animer et ajouter une
interactivité à ces éléments.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
20
Ajout d’interactivité avec JavaScript
Ajout d’interactivité
Définition d’actions
Utilisation de l’éditeur de code
Ajout d’étiquettes au Scénario
Ajout de déclencheurs au Scénario
En savoir plus
Vous pouvez utiliser JavaScript pour ajouter de l’interactivité à vos compositions. Vous pouvez définir des actions pour chaque élément à l’aide
d’un éditeur de code intégré et d’une bibliothèque de fragments de code. Les actions sont des fonctions qui peuvent être ajoutées pour gérer un
événement unique.
Haut de la page
Définition d’actions
1. Dans le Scénario, cliquez sur le bouton Actions d’ouverture, situé à gauche du nom d’un élément ou d’un symbole.
Vous pouvez également cliquer sur le bouton Actions d’ouverture situé à gauche du nom d’un élément ou d’un symbole dans le panneau
Eléments.
2. Sélectionnez un événement pour déclencher l’action.
L’éditeur d’actions s’affiche sur la droite, avec un éditeur de code et une liste de fragments de code.
3. Ecrivez le code de l’événement.
Vous pouvez écrire votre propre code ou utiliser les fragments de code pour ajouter des fonctions courantes. Pour obtenir des informations
de référence, reportez-vous au manuel Guide de l’API Edge Animate.
Haut de la page
Utilisation de l’éditeur de code
L’éditeur de code vous offre une vue complète du code JavaScript figurant dans votre projet. Il vous permet également d’afficher le code brut du
fichier d’actions.
1. Sélectionnez Fenêtre > Code.
Vous pouvez également appuyer sur Ctrl+E (Windows) ou Cmd+E (Macintosh).
2. Sélectionnez un événement ou un élément en cliquant sur l’icône Plus (+) située à gauche de Scène dans la barre latérale gauche.
3. Pour modifier l’intégralité du fichier JavaScript, cliquez sur le bouton Code complet situé dans le coin supérieur droit du panneau.
Haut de la page
Ajout d’étiquettes au Scénario
Vous pouvez insérer des étiquettes dans le Scénario et les utiliser comme références de temps dans les paramètres de fonction. Un nom
d’étiquette peut être utilisé comme paramètre pour toute fonction de lecture en attente d’une valeur de code temporel. Les étiquettes vous
permettent de créer des actions telles que la lecture ou la recherche d’un point dans le Scénario.
21
Pour ajouter une étiquette :
1. Déplacez la tête de lecture vers l’emplacement de votre choix.
2. Cliquez sur le bouton Insérer une étiquette situé dans le coin supérieur droit du Scénario.
Vous pouvez également appuyer sur Ctrl+L (Windows) ou Cmd+L (Macintosh).
3. Spécifiez un nom pour l’étiquette.
4. Lorsque vous définissez une action pour un élément dans l’éditeur de code, utilisez le nom de l’étiquette comme paramètre pour les
fonctions de lecture attendant une valeur de code temporel.
Par exemple, au lieu de sym.play(1000), vous pouvez utiliser sym.play(’monétiquette’).
Haut de la page
Ajout de déclencheurs au Scénario
Vous pouvez placer des déclencheurs dans le Scénario pour exécuter le code JavaScript à un moment donné.
Pour ajouter un déclencheur :
1. Déplacez la tête de lecture vers l’emplacement de votre choix.
2. Cliquez sur le bouton Insérer un déclencheur situé dans le coin supérieur droit du Scénario.
Vous pouvez également appuyer sur Ctrl+T (Windows) ou Cmd+T (Macintosh).
Le panneau Code s’affiche.
3. Définissez l’action à exécuter au niveau du déclencheur. Pour obtenir des informations de référence, reportez-vous au manuel Guide de
l’API Edge Animate.
Vous pouvez modifier le code du déclencheur à tout moment en cliquant deux fois sur l’icône du déclencheur dans le Scénario.
Haut de la page
En savoir plus
Ajout d’interactivité
Guide de l’API Edge Animate
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
22
Utiliser des trajectoires de mouvement
Apprendre à utiliser Edge Animate avec des didacticiels vidéo
Adobe TV (16 janvier 2013)
didacticiel vidéo
Découvrez les principes de base d’Edge Animate CS6 à l’aide des didacticiels Prise en main et Nouvelles fonctionnalités élaborés par
des spécialistes des produits.
Créer un logo animé
didacticiel (08 janvier 2013)
Animation du texte
didacticiel vidéo (13 décembre 2012)
Utilisation de fichiers Animate dans InDesign ou Muse
didacticiel vidéo (13 décembre 2012)
Introduction à Edge Animate
didacticiel vidéo (12 décembre 2012)
Didacticiel vidéo
Utilisation de fichiers Edge Animate dans InDesign ou Muse
didacticiel vidéo (13 décembre 2012)
Utilisation des feuilles de sprite Flash avec Animate (Didacticiel)
didacticiel vidéo (12 décembre 2012)
Exemples à télécharger depuis le site de Chris Gannon
exemple (12 décembre 2012)
Publication et intégration
didacticiel vidéo (13 décembre 2012)
23
Animation sur une trajectoire courbe
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
24
Nouveautés d’Edge Animate CC
Présentation des nouvelles fonctionnalités
Trajectoires de mouvement
Publication optimisée avec hébergement CDN
Modèles
Mouvements de glissement
Outil pipette
Codes de couleur pour les éléments
Défilement du panneau Eléments et du scénario
Haut de page
Présentation des nouvelles fonctionnalités
Sarah Hunt, chef de produit pour Edge Animate, fournit un bref aperçu des fonctionnalités d’Edge Animate CC.
Haut de page
Trajectoires de mouvement
Les trajectoires de mouvement vous permettent d’ajouter des mouvements extrêmement précis aux éléments suivant une trajectoire courbe
personnalisée. Grâce à cette fonction, vous pouvez reproduire l’expérience du monde réel grâce à des mouvements fluides, basés sur des
principes physiques, qui ne pourraient pas être obtenus par une animation linéaire.
Pour contrôler le déplacement d’un élément à l’aide de trajectoires de mouvement, procédez comme suit :
1. Sélectionnez l’élément sur la scène, puis sélectionnez Trajectoires de mouvement dans le panneau des propriétés contextuelles, sous
l’accordéon Position et taille.
Option Trajectoires de mouvement dans le panneau des propriétés contextuelles
Pour définir les trajectoires de mouvement comme méthode d’animation par défaut des nouveaux éléments de la composition, sélectionnez
« Animer avec des trajectoires de mouvement » dans les Paramètres de mise en forme par défaut.
25
Utilisation de l’option Trajectoires de mouvement comme élément par défaut pour les nouveaux éléments
2. Créez une transition de manière classique, à l’aide d’images-clés ou de l’outil de verrouillage. Ce faisant, vous remarquerez qu’une ligne est
tracée entre deux points d’ancrage (représentés par des triangles), comme illustré ci-dessous :
Elément « Bee » à déplacer
Trajectoire de l’élément « Bee »
Cliquez sur n’importe quel point de la ligne pour afficher les poignées qui vous permettront de définir la trajectoire en utilisant une courbe de
Bézier. Utilisez l’option Orientation automatique (Orient. auto.) pour contrôler la direction de votre objet lors de son déplacement le long de la
trajectoire.
26
Cliquez sur la trajectoire pour afficher les poignées permettant de la modifier
Trajectoire de mouvement définie à l’aide d’une courbe de Bézier
Pour ajouter un point d’ancrage, placez le curseur de la souris sur la trajectoire et cliquez.
Pour supprimer un point d’ancrage, placez le curseur de la souris sur l’ancre, puis effectuez la combinaison Cmd/Ctrl + clic.
Pour convertir une poignée de Bézier en angle, cliquez sur le point d’ancrage, puis effectuez la combinaison Option/Alt + clic.
Vous pouvez dissocier les deux poignées se trouvant de part et d’autre d’un point d’ancrage afin de les déplacer indépendamment. Pour
ce faire, effectuez la combinaison Option/Alt + clic + glisser.
Les images-clés d’emplacement se trouvant sur le scénario représentent deux trajectoires de mouvement distinctes. Ajoutez une image-clé pour
diviser votre trajectoire en deux, ou supprimez une image-clé pour créer une trajectoire contiguë. Vous pouvez appliquer une accélération aux
trajectoires de mouvement, qui sera lue séparément pour chaque trajectoire.
Pour scinder une trajectoire de mouvement, ajoutez une image-clé au scénario.
Pour créer une trajectoire de mouvement contiguë, supprimez une image-clé d’emplacement du scénario.
Pour séparer deux trajectoires de mouvement adjacentes dans l’espace, effectuez la combinaison Cmd/Ctrl + clic et faites glisser le curseur
jusqu’à une ancre d’image-clé de jonction.
Pour relier les ancres de fin de deux trajectoires de mouvement distinctes, faites glisser les ancres l’une vers l’autre. Leurs positions seront
alors automatiquement reliées.
L’objet est lié à la trajectoire par l’origine de la transformation, laquelle peut être rectifiée afin que l’objet puisse suivre une trajectoire décentrée.
Trajectoires de mouvement et mises en forme adaptatives
Dans la version actuelle, les trajectoires de mouvement ne peuvent pas être utilisées avec des mises en forme basées sur des pourcentages.
Pour contourner ce problème, placez l’objet de la trajectoire dans un groupe, parent ou symbole et définissez un positionnement en pourcentages
pour le parent. Cette méthode permet également d’obtenir un positionnement relatif de la trajectoire de mouvement pour chaque direction :
27
haut/droite/bas/gauche.
Didacticiel
Cliquez sur le panneau Fenêtres > Leçons, puis sur Trajectoires de mouvement pour réaliser un exercice pratique sur l’utilisation des trajectoires
de mouvement dans une composition Animate.
Haut de page
Publication optimisée avec hébergement CDN
Faites en sorte que votre contenu soit transmis plus rapidement avec vos fichiers d’exécution sur Adobe Content Deliver Network (CDN). Pour ce
faire, sélectionnez l’option Héberger des fichiers exécutables sur Adobe CDN dans les Paramètres de publication. Vos projets se téléchargent plus
rapidement et vous bénéficiez d’un hébergement en cache totalement gratuit.
Si votre contenu doit s’exécuter hors ligne, désactivez cette option dans les Paramètres de publication. Cette option est activée par défaut.
Publication avec hébergement CDN
Haut de page
Modèles
Vous pouvez maintenant charger, enregistrer et réutiliser des modèles à partir d’une galerie. Il est ainsi possible de charger une composition
Animate pour une utilisation de fichier similaire. Les modèles peuvent inclure des images, du texte, des symboles, des polices, et toute
modification personnelle apportée à la composition actuelle. Vous pouvez charger des modèles à partir de l’outil visuel de chargement de modèles.
Accédez au menu des modèles depuis l’écran d’accueil (« Créer à partir d’un modèle ») ou le menu Fichier. Depuis la galerie de modèles, vous
pouvez importer, supprimer et créer une nouvelle composition à partir d’un modèle.
28
Option Créer à partir d’un modèle dans le menu Fichier
Les fichiers de modèle possèdent une extension .antmpl. Ils peuvent être diffusés librement et stockés n’importe où dans le système de fichiers.
Haut de page
Mouvements de glissement
Vous pouvez maintenant associer des éléments à des mouvements de glissement vers la droite et vers la gauche pour optimiser l’utilisation sur
mobile. Le mouvement de glissement peut être associé à n’importe quel élément de votre composition. Vous pouvez affecter des mouvements de
glissement à la scène elle-même ou les appliquer à plusieurs éléments pour créer des expériences mobiles uniques.
Effectuez un clic droit sur l’élément dans le scénario, sélectionnez Ouvrir le panneau Actions pour <élément> dans le menu, puis cliquez sur
swipeleft ou swiperight.
Mouvements de glissement
29
Haut de page
Outil pipette
Le nouvel outil pipette a été intégré dans les panneaux de sélection de couleurs. Sélectionnez l’icône de la pipette pour prélever des couleurs sur
la scène.
Outil pipette
Haut de page
Codes de couleur pour les éléments
Vous pouvez désormais attribuer des couleurs à différents éléments de votre composition afin de les identifier et de les utiliser plus facilement.
Pour attribuer des couleurs, cliquez sur la palette de couleurs du panneau Eléments ou du scénario. Les couleurs choisies sont également
transmises aux transitions du scénario.
Codes de couleur des éléments du scénario
Codes de couleur dans le panneau Eléments
30
Haut de page
Défilement du panneau Eléments et du scénario
Le panneau Eléments et le scénario affichent maintenant directement les éléments sélectionnés (si le défilement du panneau est activé).
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions de Creative Commons.
Informations juridiques | Politique de confidentialité en ligne
31
Historique des versions | Edge Animate CC
Edge Animate CC (3.0)
Audio
Faites vibrer les murs avec vos projets Animate, grâce à la nouvelle option permettant d’ajouter des données audio à vos compositions. A l’aide
des API audio HTML5 natives disponibles dans tous les navigateurs modernes, vous pouvez lier des événements audio au scénario, ajouter des
actions audio à vos éléments ou encore créer des transitions audio afin d’obtenir des effets sonores uniques.
Pour en savoir plus sur l’utilisation des fonctions audio, reportez-vous à la section Ajouter des données audio aux animations.
Mise à l’échelle réactive
Il est désormais aussi facile de créer des projets Animate réactifs que de cliquer sur un simple bouton. Une fois activée, cette option vous permet
de mettre à l’échelle votre scène Animate en fonction de la taille de la fenêtre du navigateur ou du conteneur parent, et ce tout en conservant ses
proportions.
Chargement de scripts
Intégrez vos bibliothèques JavaScript favorites afin d’élargir les possibilités de vos projets Animate grâce au nouveau panneau de chargement de
scripts. Les bibliothèques peuvent être importées à partir de sources locales ou en ligne, puis enregistrées avec votre composition et incluses
dans les packs des fichiers publiés.
Mise à l’échelle + Rotation de trajectoires de mouvement
Diverses améliorations ont été apportées à l’édition de trajectoires de mouvement, ce qui vous permet de modifier facilement la taille d’une
trajectoire et de la faire pivoter autour de son origine de transformation. Passez le curseur sur une trajectoire de mouvement pour voir ces
nouvelles commandes, ou appuyez sur la touche H pour faire disparaître l’incrustation.
Nouvelles commandes de répartition
Les nouvelles commandes de répartition sont disponibles dans le menu Modifier, pour vous aider à aligner et à positionner les éléments sur la
scène. Sélectionnez au moins deux objets et cliquez sur Modifier > Répartir dans le menu pour accéder aux différentes options de répartition.
Centrage de la scène
Centrez votre scène Animate dans la fenêtre du navigateur ou tout autre conteneur parent dans laquelle elle se trouve. Vous pouvez choisir de
centrer la scène sur le plan horizontal, vertical ou les deux. Pour cela, il suffit de cocher la case correspondante dans les propriétés de la scène.
Image d’affiche transparente pour OAM
Lorsque vous publiez un fichier OAM, vous avez désormais la possibilité d’enregistrer l’image d’affiche sous la forme d’un fichier PNG transparent.
Utilisez cette option pour intégrer du contenu Animate dans InDesign ou Adobe Muse si vous souhaitez qu’une scène transparente apparaisse en
incrustation par-dessus le contenu de votre document. Remarque : lorsque cette option est utilisée dans une application prenant en charge les
fichiers OAM, le fichier positionné apparaît vide en raison de la transparence.
Pour le moment, cette fonction n’est pas compatible avec les folios PDF lors de la publication dans DPS. Pour utiliser une image d’affiche
transparente, sélectionnez le type de folio Automatique, PNG ou JPG.
Publication CDN pour OAM
Profitez d’un chargement plus rapide de vos projets Animate grâce à l’hébergement en cache, maintenant disponible avec la publication OAM.
Activez cette option si vous créez du contenu Animate en vue de l’utiliser en ligne (Muse, Dreamweaver ou plug-in de chargement tiers).
Nouvelles leçons
Deux nouvelles leçons (Mise en forme réactive et Audio) sont proposées pour vous aider à découvrir une partie des fonctionnalités disponibles
dans cette version. Cliquez sur « Prise en main » sur l’écran d’accueil ou sur Fenêtre > Leçons pour afficher le panneau des leçons.
Mise à jour de jQuery
Animate utilise maintenant la version 2.0.3 de jQuery, une mise à jour de jQuery 1.7.1.
Prise en charge la fonctionnalité Source Map
Lors du débogage de compositions Animate à l’aide de la fonction Aperçu dans le navigateur ou sur le CDN, vous pouvez maintenant analyser le
code compressé des bibliothèques Animate et jQuery. Cette option est disponible dans les navigateurs prenant en charge la fonctionnalité Source
Map, tels que Google Chrome.
Haut de la page
Edge Animate CC (2.0.1)
Cette mise à jour d’Edge Animate CC résout des problèmes de compatibilité avec Internet Explorer 11 et est recommandée pour tous les
utilisateurs. Les contenus générés avec les anciennes versions d’Animate ne s’exécuteront pas sous IE11 ; cette mise à jour est nécessaire pour
assurer la compatibilité.
32
Pour mettre à jour un projet, installez la mise à jour d’Animate CC disponible ici et enregistrez à nouveau votre projet. Pour en savoir plus sur les
problèmes résolus par cette mise à jour, consultez le blog de l’équipe Animate ici.
Haut de la page
Edge Animate CC (2.0)
Trajectoires de mouvement
L’introduction de trajectoires de mouvement va vous permettre d’ajouter des mouvements extrêmement précis aux éléments suivant une trajectoire
courbe. Vous pouvez ainsi reproduire l’expérience du monde réel grâce à des mouvements fluides, basés sur des principes physiques, qui ne
pourraient pas être obtenus par une animation linéaire.
La translation x/y reste la méthode par défaut pour le contrôle des positions. Pour utiliser des trajectoires de mouvement sur un élément particulier,
sélectionnez le bouton radio Trajectoires de mouvement dans le panneau Propriétés. Pour définir les trajectoires de mouvement comme méthode
d’animation par défaut des nouveaux éléments de la composition, sélectionnez « Trajectoires de mouvement » dans les paramètres de mise en
forme par défaut.
Lorsque les trajectoires de mouvement sont sélectionnées pour votre objet, créez une transition comme vous le feriez ordinairement, avec des
images-clés ou l’outil de verrouillage. Une trajectoire est alors tracée sur la scène entre deux points d’ancrage, que vous pouvez modifier pour
ajouter des courbes. Les points d’ancrage de fin sont représentés par des triangles pointant dans le sens du mouvement de l’objet.
Pour contrôler la durée d’une trajectoire de mouvement, ajoutez une image-clé Emplacement à la transition Emplacement du scénario. Vous
obtenez ainsi deux trajectoires distinctes, dont la vitesse est indépendante. Vous pouvez également ajouter une accélération à votre trajectoire, et
ainsi contrôler les variations de vitesse du mouvement de façon réaliste.
Cochez la case Orient. auto. pour appliquer une rotation automatique à vos éléments lors de leur déplacement le long de la trajectoire.
Mouvement de glissement
Vous pouvez maintenant associer des mouvements de glissement vers la droite et vers la gauche à des éléments pour optimiser l’utilisation sur
mobile. Le glissement peut être associé à n’importe quel élément de votre composition. Attribuez une action à un événement de glissement
comme vous le feriez pour un clic, un double-clic ou autre, via le bouton d’ajout d’actions d’un élément.
Publication optimisée avec hébergement CDN
Bénéficiez de téléchargements plus rapides et de sorties plus simples à gérer grâce à l’hébergement des fichiers exécutables par Adobe via les
serveurs Akamai. Désactivez cette option si votre contenu doit s’exécuter hors ligne ou si vous souhaitez utiliser votre propre solution
d’hébergement.
Modèles
Vous pouvez maintenant charger, enregistrer et réutiliser des modèles à partir d’une galerie. Il est ainsi possible de charger une composition
Animate pour une utilisation de fichier similaire.
Accédez au menu des modèles depuis l’écran d’accueil (« Créer à partir d’un modèle ») ou le menu Fichier. Depuis la galerie de modèles, vous
pouvez importer, supprimer et créer une nouvelle composition à partir d’un modèle.
Lorsque vous enregistrez un modèle, un fichier .antmpl est créé, qui peut être diffusé librement et être utilisé n’importe où dans le système de
fichiers. Les modèles peuvent inclure des images, du texte, des symboles, des polices, et toute modification personnelle apportée à la composition
active. Vous pouvez charger des modèles à partir de l’outil visuel de chargement de modèles.
Défilement des panneaux Eléments/Scénario
Les panneaux Eléments et Scénario affichent maintenant directement les éléments sélectionnés si le défilement du panneau est activé.
Outil pipette
Le nouvel outil pipette se trouve dans la fenêtre du sélecteur de couleurs. Sélectionnez l’outil pipette dans la fenêtre du sélecteur de couleurs pour
prélever des couleurs sur la scène.
Codes de couleur du scénario et des éléments
Lorsque vous cliquez sur la couleur appliquée à un élément dans le panneau Eléments ou sur le scénario, vous pouvez attribuer une couleur pour
assurer une segmentation facile des couleurs des objets. La couleur attribuée est alors modifiée à la fois sur les transitions du scénario et les
éléments.
Niveaux de zoom supplémentaires pour la scène
Vous pouvez maintenant définir un niveau de zoom de la scène allant de 10 à 400 %, pour une vision plus globale de vos projets.
Haut de la page
Edge Animate 1.5
Prise en charge des filtres CSS
Les fonctionnalités CSS les plus sophistiquées font leur apparition dans Edge Animate.
Les filtres pris en charge sont :
Inversion
33
Rotation de teinte
Contraste
Saturation
Sépia
Niveaux de gris
Flou
Ombre
Ils sont disponibles dans le panneau des propriétés en tant qu’effets animables. Remarque : les filtres CSS font partie des nouvelles spécifications
CSS et sont uniquement pris en charge par les navigateurs Chrome 18 et ses versions ultérieures, Safari 6, iOS Safari 6 et Blackberry 10.
Dégradés
Appliquez des dégradés radiaux ou linéaires à vos éléments via le nouvel outil Dégradé. Vous avez maintenant accès aux fonctionnalités
suivantes :
Ajout de plusieurs étapes de dégradé à vos éléments
Création d’interpolations pour les couleurs et le positionnement du dégradé
Répétition de dégradés à l’infini en fonction des étapes de couleur
Transitions de dégradé disponibles en mode linéaire ou radial (les transitions linéaires et radiales ne peuvent pas être utilisées
conjointement)
Définition de propriétés CSS pour les dégradés radiaux telles que ellipse-farthest-corner, circle-farthest-corner, etc.
Positionnement du dégradé en degrés de rotation pour les dégradés linéaires et en pourcentages x/y pour les dégradés radiaux
Typographie avancée avec Edge Web Fonts
Vous pouvez maintenant parcourir la bibliothèque de polices Edge Web Fonts directement dans Edge Animate et appliquer des polices de la
collection à vos compositions. Vous pouvez afficher les polices par style et les ajouter à la bibliothèque de polices au niveau du document.
Nouveau sélecteur de couleurs
Le sélecteur de couleurs a été mis à jour pour vous permettre de modifier les couleurs plus facilement.
Nouveaux modes colorimétriques
Les couleurs peuvent maintenant être définies aux formats RVBa, TSLa et hexadécimal, y compris pour les dégradés.
Curseurs de couleurs
De nouveaux curseurs de couleurs sont disponibles dans les panneaux Couleur et Dégradé et permettent de définir et d’appliquer facilement des
couleurs.
Nuanciers réutilisables
Il est possible d’enregistrer des nuanciers et de les réutiliser pour définir des couleurs et des dégradés au niveau du document.
Eléments verrouillés grisés
Les éléments verrouillés apparaissent en grisé sur le scénario et dans le panneau Eléments, ce qui permet de repérer facilement les éléments
modifiables.
Outils de préchargement adaptés aux Iframes
Le préchargement est maintenant optimisé pour une utilisation au sein d’Iframes, afin d’obtenir un chargement coordonné des ressources. Les
compositions Animate contenues dans des Iframes attendent que le document soit chargé avant de s’exécuter, ce qui permet un préchargement
retardé pour les publicités.
Le maintien du mode de modification de symbole lors de l’aperçu
permet que la composition Animate ne retourne plus à la scène lors de l’aperçu dans le navigateur. Animate maintient vos modifications en l’état
actuel à chaque création d’aperçu.
Haut de la page
Edge Animate 1.0.1
Cette mise à jour inclut la possibilité d’envoyer un rapport anonyme sur l’utilisation des fonctionnalités spécifiques d’Edge Animate.
L’objectif est de mieux comprendre les fonctionnalités les plus appréciées par les utilisateurs d’Edge Animate. Ces informations
permettent à l’équipe Edge Animate de prendre des décisions éclairées pour définir des priorités et mettre l’accent sur certaines
fonctionnalités. L’équipe Edge Animate a établi une relation de confiance avec ses utilisateurs depuis le développement de la
version 1.0. Leurs avis et commentaires ont joué un rôle majeur sur le produit final. Grâce à cette mise à jour, chacune de vos
actions dans l’application devient un élément d’information exploitable.
Adobe a également traité plusieurs problèmes importants concernant le produit :
Prise en charge d’Edge Web Fonts
Amélioration des performances sur le contenu publié
Correctif iOS 6 pour plusieurs compositions intégrées via iFrame et Adobe DPS
Divers correctifs visant à améliorer la stabilité de l’application
34
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
35
Notes de mise à jour | Edge Animate CC
Bienvenue dans Adobe® Edge Animate CC
Nouveautés d’Edge Animate CC (3.0)
Installation du logiciel
Configuration minimale requise
Problèmes connus
Ressources techniques
Autres ressources
Haut de la page
Nouveautés d’Edge Animate CC (3.0)
Audio
Faites vibrer les murs avec vos projets Animate, grâce à la nouvelle option permettant d’ajouter des données audio à vos compositions. A l’aide
des API audio HTML5 natives disponibles dans tous les navigateurs modernes, vous pouvez lier des événements audio au scénario, ajouter des
actions audio à vos éléments ou encore créer des transitions audio afin d’obtenir des effets sonores uniques.
Pour en savoir plus sur l’utilisation des fonctions audio, reportez-vous à la section Ajouter des données audio aux animations.
Mise à l’échelle réactive
Il est désormais aussi facile de créer des projets Animate réactifs que de cliquer sur un simple bouton. Une fois activée, cette option vous permet
de mettre à l’échelle votre scène Animate en fonction de la taille de la fenêtre du navigateur ou du conteneur parent, et ce tout en conservant ses
proportions.
Chargement de scripts
Intégrez vos bibliothèques JavaScript favorites afin d’élargir les possibilités de vos projets Animate grâce au nouveau panneau de chargement de
scripts. Les bibliothèques peuvent être importées à partir de sources locales ou en ligne, puis enregistrées avec votre composition et incluses
dans les packs des fichiers publiés.
Mise à l’échelle + Rotation de trajectoires de mouvement
Diverses améliorations ont été apportées à l’édition de trajectoires de mouvement, ce qui vous permet de modifier facilement la taille d’une
trajectoire et de la faire pivoter autour de son origine de transformation. Passez le curseur sur une trajectoire de mouvement pour voir ces
nouvelles commandes, ou appuyez sur la touche H pour faire disparaître l’incrustation.
Nouvelles commandes de répartition
Les nouvelles commandes de répartition sont disponibles dans le menu Modifier, pour vous aider à aligner et à positionner les éléments sur la
scène. Sélectionnez au moins deux objets et cliquez sur Modifier > Répartir dans le menu pour accéder aux différentes options de répartition.
Centrage de la scène
Centrez votre scène Animate dans la fenêtre du navigateur ou tout autre conteneur parent dans laquelle elle se trouve. Vous pouvez choisir de
centrer la scène sur le plan horizontal, vertical ou les deux. Pour cela, il suffit de cocher la case correspondante dans les propriétés de la scène.
Image d’affiche transparente pour OAM
Lorsque vous publiez un fichier OAM, vous avez désormais la possibilité d’enregistrer l’image d’affiche sous la forme d’un fichier PNG transparent.
Utilisez cette option pour intégrer du contenu Animate dans InDesign ou Adobe Muse si vous souhaitez qu’une scène transparente apparaisse en
incrustation par-dessus le contenu de votre document. Remarque : lorsque cette option est utilisée dans une application prenant en charge les
fichiers OAM, le fichier positionné apparaît vide en raison de la transparence.
Pour le moment, cette fonction n’est pas compatible avec les folios PDF lors de la publication dans DPS. Pour utiliser une image d’affiche
transparente, sélectionnez le type de folio Automatique, PNG ou JPG.
Publication CDN pour OAM
Profitez d’un chargement plus rapide de vos projets Animate grâce à l’hébergement en cache, maintenant disponible avec la publication OAM.
Activez cette option si vous créez du contenu Animate en vue de l’utiliser en ligne (Muse, Dreamweaver ou plug-in de chargement tiers).
Nouvelles leçons
Deux nouvelles leçons (Mise en forme réactive et Audio) sont proposées pour vous aider à découvrir une partie des fonctionnalités disponibles
dans cette version. Cliquez sur « Prise en main » sur l’écran d’accueil ou sur Fenêtre > Leçons pour afficher le panneau des leçons.
Mise à jour de jQuery
Animate utilise maintenant la version 2.0.3 de jQuery, une mise à jour de jQuery 1.7.1.
Prise en charge la fonctionnalité Source Map
Lors du débogage de compositions Animate à l’aide de la fonction Aperçu dans le navigateur ou sur le CDN, vous pouvez maintenant analyser le
code compressé des bibliothèques Animate et jQuery. Cette option est disponible dans les navigateurs prenant en charge la fonctionnalité Source
36
Map, tels que Google Chrome.
Reportez-vous à l’historique des versions pour découvrir les fonctionnalités introduites dans les versions précédentes.
Haut de la page
Installation du logiciel
1. Consultez la page produit d’Edge Animate sur Adobe Creative Cloud à l’adresse https://creative.adobe.com/fr/products/animate.
2. Cliquez sur le bouton Télécharger.
3. Entrez votre ID Adobe et votre mot de passe, puis cliquez sur Se connecter, si nécessaire.
4. Si vous ne possédez pas encore de compte Adobe Creative Cloud, cliquez sur le bouton Démarrer et sélectionnez une offre Creative Cloud.
Remarque : Edge Animate est disponible dans toutes les offres Creative Cloud, y compris en mode d’évaluation avec l’abonnement gratuit.
5. L’application Creative Cloud pour bureau se lance pour télécharger et installer Edge Animate automatiquement. Remarque : vous devrez
peut-être entrer le mot de passe administrateur de votre ordinateur.
6. A la fin de l’installation, cliquez sur le lien Lancer l’application.
Haut de la page
Configuration minimale requise
Windows
Processeur Intel® Pentium® 4 ou AMD Athlon® 64
Système d’exploitation Windows® 7 et Windows 8
1 Go de RAM
200 Mo d’espace disponible sur le disque dur pour l’installation
Affichage 1280x800 avec carte vidéo 16 bits
Connexion Internet haut débit requise
Mac OS
Processeur Intel multicœur
Système d’exploitation Mac OS X v10.7, v10.8 et v10.9
1 Go de RAM
200 Mo d’espace disponible sur le disque dur pour l’installation
Affichage 1280x800 avec carte vidéo 16 bits
Connexion Internet haut débit requise
Haut de la page
Problèmes connus
Pour consulter la liste des problèmes connus, accédez à la page adobe.com/go/animate_knownissues_fr
Considérations de sécurité lors de l’ouverture de projets Animate depuis votre ordinateur de bureau
Animate utilise un serveur HTTP pour envoyer du contenu vers votre navigateur lorsque vous utilisez l’option Aperçu dans le navigateur. Animate
fournit les fichiers se trouvant dans tous les dossiers contenant une composition Animate ouverte. Afin d’éviter que des fichiers sensibles ne soient
accessibles via le serveur d’Animate, nous vous recommandons d’enregistrer vos compositions Animate dans un dossier dédié.
Haut de la page
Ressources techniques
Une assistance spécifique pour Edge Animate est disponible sur le forum de la communauté à l’adresse
suivante : adobe.com/go/learn_animate_forum_fr
Haut de la page
Autres ressources
Ressources en ligne
Pour consulter l’aide complète et obtenir des instructions, des modèles et des conseils auprès de la communauté, consultez les ressources
suivantes :
adobe.com/go/learn_animate_forum_fr
Site Web d’Adobe
Adobe TV
37
API d’Edge Animate
©2013 Adobe Systems Incorporated. All rights reserved.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
38
Utilisation de l’outil de verrouillage, des images-clés et des transitions
dans les animations
Création d’animations à l’aide de l’outil de verrouillage
Création d’animations à l’aide d’images-clés
Modification d’images-clés
Copie de transitions
En savoir plus
Vous pouvez créer des animations dans Edge Animate à l’aide de méthodes d’animation standard basées sur les images-clés. Edge Animate
propose également une autre méthode basée sur l’outil de verrouillage pour créer des images-clés.
Création d’animations à l’aide de l’outil de verrouillage
Haut de la page
Cet outil verrouille les valeurs de propriété des éléments à un moment donné dans le Scénario. Lors d’une modification, l’outil verrouille la valeur
en cours pendant que vous modifiez les valeurs de propriété au niveau de la tête de lecture. Edge Animate génère les images-clés et les
transitions vers ou à partir de la tête de lecture.
Pour créer des animations à l’aide de l’outil de verrouillage :
1. Définissez les propriétés d’élément que vous souhaitez verrouiller à un moment donné dans le Scénario.
2. Cliquez sur le bouton Activer/Désactiver le verrouillage dans le panneau Scénario.
Activer/Désactiver le verrouillage
Vous pouvez également activer le verrouillage en double-cliquant sur la tête de lecture ou en appuyant sur la touche P de votre clavier.
3. Faites glisser le verrouillage vers l’emplacement du Scénario où vous souhaitez verrouiller les propriétés de l’élément.
4. Une fois les propriétés initiales verrouillées, modifiez les valeurs des propriétés de l’élément.
Les chevrons étant pointés vers la tête de lecture, les modifications sont apportées au niveau de la tête de lecture.
Adobe Edge Animate ajoute automatiquement des images-clés et des transitions entre la position de la tête de lecture et du verrouillage. Il
n’est pas nécessaire d’ajouter manuellement les images-clés ni de repositionner la tête de lecture dans le Scénario.
5. Vous pouvez afficher un aperçu de l’animation en cliquant sur le bouton Lecture dans le panneau Scénario ou en appuyant sur la barre
d’espace sur le clavier.
Pour voir une leçon sur l’animation à l’aide de l’outil de verrouillage :
1. Sélectionnez Fenêtre > Leçons dans Edge Animate.
2. Cliquez sur Animer II : Verrouillage.
Les images-clés indiquent la valeur d’une propriété à un moment donné. Lorsque vous créez une animation à l’aide d’images-clés, vous ajoutez
une image-clé à deux emplacements ou plus dans le Scénario et définissez des propriétés d’élément différentes à chaque emplacement. Edge
Animate utilise les valeurs de propriété pour animer le contenu se trouvant entre les images-clés.
Pour créer une animation à l’aide d’images-clés :
1. Sélectionnez l’élément que vous souhaitez animer sur la scène.
39
2. Déplacez la tête de lecture vers l’emplacement du Scénario où vous voulez démarrer l’animation.
3. Dans le panneau Propriétés de l’élément, cliquez sur le bouton Ajouter une image-clé (bouton en forme de losange) en regard de la
propriété que vous souhaitez modifier au fil du temps.
Ajout d’une image-clé
4. Déplacez la tête de lecture vers un autre emplacement du Scénario et modifiez la valeur de la propriété.
Edge ajoute automatiquement une image-clé de fin et crée la transition.
5. Vous pouvez afficher un aperçu de l’animation en cliquant sur le bouton Lecture dans le panneau Scénario ou en appuyant sur la barre
d’espace sur le clavier.
Pour voir une leçon sur l’animation à l’aide d’images-clés :
1. Sélectionnez Fenêtre > Leçons dans Edge Animate.
2. Cliquez sur Animer I : Images-clés.
Haut de la page
Modification d’images-clés
1. Déplacez la tête de lecture vers une image-clé (icône en forme de losange) dans le Scénario.
2. Modifiez la valeur de propriété modifiable située dans la partie gauche du panneau Scénario.
Haut de la page
Copie de transitions
Vous pouvez copier une transition et la coller dans le Scénario du même élément ou d’un autre élément.
1. Cliquez sur une transition dans le Scénario pour la sélectionner. Une fois la transition sélectionnée, une bordure orange apparaît autour de
la barre de transition dans le Scénario.
2. Appuyez sur Ctrl+C (Windows) ou sur Cmd+C (Macintosh) pour copier la transition dans le Presse-papiers.
Vous pouvez également couper la transition à partir de l’élément à l’aide des touches Ctrl+X (Windows) ou de Cmd+X (Macintosh).
3. Si vous souhaitez copier la transition vers un autre élément, sélectionnez l’élément en question sur la scène.
4. Déplacez la tête de lecture vers l’emplacement où vous souhaitez que la transition copiée démarre.
5. Appuyez sur Ctrl+V (Windows) ou sur Cmd+V (Macintosh) pour coller la transition dans le Scénario.
Haut de la page
En savoir plus
Création et importation d’actifs
Création d’animation
Création d’une mise en forme flexible
Création d’un logo animé
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
40
Ajout d’interactivité avec JavaScript
Ajout d’interactivité
Définition d’actions
Utilisation de l’éditeur de code
Ajout d’étiquettes au Scénario
Ajout de déclencheurs au Scénario
En savoir plus
Vous pouvez utiliser JavaScript pour ajouter de l’interactivité à vos compositions. Vous pouvez définir des actions pour chaque élément à l’aide
d’un éditeur de code intégré et d’une bibliothèque de fragments de code. Les actions sont des fonctions qui peuvent être ajoutées pour gérer un
événement unique.
Haut de la page
Définition d’actions
1. Dans le Scénario, cliquez sur le bouton Actions d’ouverture, situé à gauche du nom d’un élément ou d’un symbole.
Vous pouvez également cliquer sur le bouton Actions d’ouverture situé à gauche du nom d’un élément ou d’un symbole dans le panneau
Eléments.
2. Sélectionnez un événement pour déclencher l’action.
L’éditeur d’actions s’affiche sur la droite, avec un éditeur de code et une liste de fragments de code.
3. Ecrivez le code de l’événement.
Vous pouvez écrire votre propre code ou utiliser les fragments de code pour ajouter des fonctions courantes. Pour obtenir des informations
de référence, reportez-vous au manuel Guide de l’API Edge Animate.
Haut de la page
Utilisation de l’éditeur de code
L’éditeur de code vous offre une vue complète du code JavaScript figurant dans votre projet. Il vous permet également d’afficher le code brut du
fichier d’actions.
1. Sélectionnez Fenêtre > Code.
Vous pouvez également appuyer sur Ctrl+E (Windows) ou Cmd+E (Macintosh).
2. Sélectionnez un événement ou un élément en cliquant sur l’icône Plus (+) située à gauche de Scène dans la barre latérale gauche.
3. Pour modifier l’intégralité du fichier JavaScript, cliquez sur le bouton Code complet situé dans le coin supérieur droit du panneau.
Haut de la page
Ajout d’étiquettes au Scénario
Vous pouvez insérer des étiquettes dans le Scénario et les utiliser comme références de temps dans les paramètres de fonction. Un nom
d’étiquette peut être utilisé comme paramètre pour toute fonction de lecture en attente d’une valeur de code temporel. Les étiquettes vous
permettent de créer des actions telles que la lecture ou la recherche d’un point dans le Scénario.
41
Pour ajouter une étiquette :
1. Déplacez la tête de lecture vers l’emplacement de votre choix.
2. Cliquez sur le bouton Insérer une étiquette situé dans le coin supérieur droit du Scénario.
Vous pouvez également appuyer sur Ctrl+L (Windows) ou Cmd+L (Macintosh).
3. Spécifiez un nom pour l’étiquette.
4. Lorsque vous définissez une action pour un élément dans l’éditeur de code, utilisez le nom de l’étiquette comme paramètre pour les
fonctions de lecture attendant une valeur de code temporel.
Par exemple, au lieu de sym.play(1000), vous pouvez utiliser sym.play(’monétiquette’).
Haut de la page
Ajout de déclencheurs au Scénario
Vous pouvez placer des déclencheurs dans le Scénario pour exécuter le code JavaScript à un moment donné.
Pour ajouter un déclencheur :
1. Déplacez la tête de lecture vers l’emplacement de votre choix.
2. Cliquez sur le bouton Insérer un déclencheur situé dans le coin supérieur droit du Scénario.
Vous pouvez également appuyer sur Ctrl+T (Windows) ou Cmd+T (Macintosh).
Le panneau Code s’affiche.
3. Définissez l’action à exécuter au niveau du déclencheur. Pour obtenir des informations de référence, reportez-vous au manuel Guide de
l’API Edge Animate.
Vous pouvez modifier le code du déclencheur à tout moment en cliquant deux fois sur l’icône du déclencheur dans le Scénario.
Haut de la page
En savoir plus
Ajout d’interactivité
Guide de l’API Edge Animate
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
42
Publication de votre contenu
Publication et intégration
Optimisation du contenu pour le Web
Publier en tant que package de déploiement Animate (.oam)
Publication dans Apple iBooks Author
En savoir plus
Pour publier votre contenu :
1. Spécifiez vos paramètres de publication. Pour plus d’informations, voir ci-dessous.
2. Sélectionnez Fichier > Publier.
Haut de la page
Optimisation du contenu pour le Web
1. Sélectionnez Fichier > Paramètres de publication.
2. Dans la boîte de dialogue Paramètres de publication, assurez-vous que Web est sélectionné en tant que cible de publication.
3. Notez ou modifiez le répertoire cible.
4. Définissez la préférence Structures via CDN.
Sélectionnez cette option pour télécharger les actifs jQuery associés à la composition à partir d’un réseau de distribution de contenu (CDN).
Ne sélectionnez pas cette option si vous souhaitez associer les actifs à la composition.
5. Définissez la préférence Publier le contenu en HTML statique.
Sélectionnez cette option pour générer des balises HTML au lieu d’injecter du contenu Edge Animate dans le document via JavaScript.
Cette option améliore la compatibilité avec les SEO et leur accès sur certaines plateformes.
6. Cliquez sur Enregistrer pour sauvegarder les paramètres de publication ou cliquez sur Publier.
Publier en tant que package de déploiement Animate (.oam)
Haut de la page
Sélectionnez cette option d’exportation pour créer un fichier de package de votre projet à des fins d’utilisation dans d’autres outils Adobe. Les
outils suivants prennent en charge les packages de déploiement Animate : Adobe Digital Publishing Suite (DPS), InDesign CS6, Dreamweaver
CS6 et Muse.
1. Sélectionnez Fichier > Paramètres de publication.
2. Dans la boîte de dialogue Paramètres de publication, assurez-vous que Package de déploiement Animate est sélectionné en tant que cible
de publication.
3. Notez ou modifiez le répertoire cible.
4. (Facultatif) Spécifiez une image d’affiche.
5. Cliquez sur Enregistrer pour sauvegarder les paramètres de publication ou cliquez sur Publier.
Haut de la page
Publication dans Apple iBooks Author
1. Sélectionnez Fichier > Paramètres de publication.
2. Dans la boîte de dialogue Paramètres de publication, assurez-vous que l’élément iBooks/OS X est sélectionné en tant que cible de
publication.
3. Notez ou modifiez le répertoire cible.
4. (Facultatif) Spécifiez une image d’affiche.
5. Cliquez sur Enregistrer pour sauvegarder les paramètres de publication ou cliquez sur Publier.
Haut de la page
En savoir plus
Améliorer vos folios DPS avec des animations HTML à l’aide d’Adobe Edge
43
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
44
Nouveautés d’Edge Animate 1.5
Important : Edge Animate 1.5 n’est plus pris en charge par Adobe et est déconseillé pour la production. En effet, cette version ne dispose pas de
fonctionnalités essentielles, comme les trajectoires de mouvement et la prise en charge audio, qui ont été introduites lors de versions ultérieures ;
les améliorations de performances et les nouveaux correctifs font également défaut (notamment au niveau des problèmes de compatibilité avec les
derniers navigateurs, qui peuvent provoquer des problèmes de rendu).
Ajout de dégradés aux objets
Mises à jour apportées au panneau Couleur
Utilisation des filtres CSS
Exploitation des polices Edge Web Fonts pour une typographie améliorée
Outils de préchargement adaptés aux Iframes
Maintien du mode de modification de symbole lors de l’aperçu
Identification simplifiée des éléments verrouillés et déverrouillés
Haut de la page
Ajout de dégradés aux objets
Le panneau Dégradé introduit dans cette version vous permet d’ajouter des dégradés à des éléments Edge Animate. Vous pouvez créer des
dégradés linéaires ou radiaux en utilisant les options du panneau.
Ces dégradés peuvent également être animés. Il n’est cependant pas possible de créer une animation entre un dégradé radial et un dégradé
linéaire.
Didacticiel vidéo
Application de couleurs et de dégradés dans Edge Animate
Vous pouvez effectuer les opérations suivantes dans le panneau Dégradé :
Utiliser des taquets de couleur pour créer des dégradés complexes
Créer des dégradés linéaires ou des dégradés radiaux
Spécifier l’angle du dégradé pour les dégradés linéaires
Enregistrer des dégradés personnalisés en tant que nuanciers
Indiquer une valeur de couleur dans l’un des trois formats (RVBa, hexadécimal ou TSLa). La lettre « a » fait référence à la valeur de la
transparence (alpha) ou de l’opacité. Quel que soit le format utilisé pour définir la couleur, Animate convertit les valeurs au format RVB.
Pour appliquer des propriétés CSS au dégradé radial, par exemple Ellipse-farthest corner (coin éloigné de l’ellipse) ou Circle-farthest-side
(côté éloigné du cercle), cliquez sur le bouton Dégradé radial et maintenez-le enfoncé. Sélectionnez l’option que vous souhaitez appliquer.
Remarque : Les dégradés ne sont pas pris en charge dans Internet Explorer version 9. Ils sont alors remplacés par la couleur d’arrière-plan.
A. Supprimer la couleur B. Angle du dégradé linéaire C. Nuancier du dégradé linéaire D. Nuancier du dégradé radial E. Taquet de couleur F.
45
Ajouter une nuance de dégradé G. Répéter le motif H. Boutons de format de couleur I. Curseur de luminosité J. Curseur de couleur K. Curseur
d’opacité L. Ajouter une nuance de couleur M. Nuance de couleur N. Couleur sélectionnée O. Couleur d’origine P. Bouton Dégradé radial Q.
Bouton Dégradé R. Bouton Dégradé linéaire
Pour regarder un didacticiel vidéo portant sur l’utilisation des couleurs et des dégradés dans Edge Animate, cliquez ici.
Haut de la page
Mises à jour apportées au panneau Couleur
Dans le panneau Couleur, vous pouvez maintenant effectuer les opérations suivantes :
Utiliser le curseur Luminosité pour modifier l’intensité de la couleur sélectionnée
Utiliser le curseur Opacité pour définir l’opacité (transparence) de la couleur sélectionnée
Enregistrer des couleurs personnalisées en tant que nuances à réutiliser
Indiquer une valeur de couleur dans l’un des trois formats (RVBa, hexadécimal ou TSLa). La lettre « a » fait référence à la valeur de la
transparence (alpha) ou de l’opacité. Quel que soit le format utilisé pour définir la couleur, Animate convertit les valeurs au format RVB.
A. Option de saisie du code couleur B. Bouton Couleur C. Option de suppression de couleur D. Nuance de couleur ajoutée E. Option d’ajout de
nuance de couleur F. Curseur d’opacité G. Curseur de luminosité de la couleur H. Curseur de couleur I. Options de format du code couleur
Haut de la page
Utilisation des filtres CSS
Fonctionnement des effets de filtre CSS
Les filtres sont un outil puissant permettant
aux auteurs de contenu Web d’obtenir des
effets visuels particuliers. Dans cet article,
nous allons aborder la genèse des effets de
filtre, leur fonctionnement et leur mode
d’utilisation. ... En savoir plus
par Alex Danilo
Partagez votre expérience dans
Adobe Community Help
http://www.html5rocks.com/fr/tutorials/filter...
Les options du panneau Filtres vous permettent d’appliquer rapidement des filtres CSS à des symboles, du texte, des balises div ou des images.
Jusqu’à maintenant, le seul moyen d’obtenir ce type d’effets était de passer par un éditeur d’image.
Les filtres CSS sont actuellement pris en charge par les versions les plus récentes de Chrome, Safari, iOS6 et BlackBerry 10.
Pour appliquer un filtre CSS, sélectionnez un objet sur la scène et utilisez les options du panneau Filtres pour appliquer les effets souhaités. Par
exemple, pour appliquer des filtres à une image insérée, sélectionnez cette image et appliquez les filtres nécessaires.
Pour supprimer un filtre de l’élément, cliquez sur le bouton "x" correspondant.
46
Pour regarder un didacticiel vidéo portant sur l’utilisation des filtres CSS dans Edge Animate, cliquez ici.
Exploitation des polices Edge Web Fonts pour une typographie améliorée
Haut de la page
Pour vous permettre d’exploiter toutes les possibilités de la propriété CSS @font-face, Edge Animate met à votre disposition une sélection de
polices Web à intégrer dans votre création. Avec les polices Edge Web Fonts, vous pouvez proposer sur le Web une expérience typographique se
rapprochant de celle des supports imprimés.
Edge Web Fonts contient des centaines de polices Web provenant de la bibliothèque Adobe, ainsi qu’un large choix de polices open source. Les
polices Edge Web Fonts sont gratuites et accessibles sans compte ni configuration de kit, pour une utilisation plus simple et plus rapide.
Utilisation des polices Edge Web Fonts dans Edge Animate
Lorsque vous appliquez une police à du texte, cliquez sur le bouton "+" en regard du menu des polices pour afficher la boîte de dialogue Edge
Web Font. Sélectionnez la police que vous souhaitez utiliser dans la liste et cliquez sur Ajouter une police.
Vous pouvez filtrer les polices affichées dans le panneau en fonction de leur type. Pour cela, utilisez les boutons à gauche du panneau. Par
exemple, pour afficher uniquement les polices de type sans serif, cliquez sur le bouton Sans Serif. Pour plus d’informations, consultez la page
Utilisation de polices Web.
Didacticiel vidéo
Utilisation de polices Web dans Edge Animate
Les polices sélectionnées et appliquées sont ajoutées à la bibliothèque de polices dans Edge Animate. Dans cette bibliothèque de polices, il vous
suffit de cliquer deux fois sur une police afin d’indiquer des polices de secours. Si, pour une raison ou une autre, la police sélectionnée ne peut
pas être appliquée, les polices de secours sont utilisées selon l’ordre dans lequel elles apparaissent dans la liste.
47
Haut de la page
Outils de préchargement adaptés aux Iframes
Le préchargement est maintenant optimisé pour une utilisation au sein d’Iframes, afin d’obtenir un chargement coordonné des ressources. Les
compositions Animate contenues dans des Iframes ne lisent le fichier qu’une fois le document chargé.
Les outils de préchargement Iframe vous permettent de précharger l’Iframe et son contenu publicitaire avant que le fichier Animate et la page Web
ne soient téléchargés.
Pour plus d’informations sur l’utilisation des outils de préchargement, consultez la page API JavaScript Adobe Edge Animate.
Maintien du mode de modification de symbole lors de l’aperçu
Haut de la page
Animate maintient vos modifications en l’état actuel à chaque création d’aperçu. La composition ne revient pas à la scène lorsque l’aperçu est
affiché dans le navigateur.
Identification simplifiée des éléments verrouillés et déverrouillés
Haut de la page
Les éléments verrouillés apparaissent en grisé sur le scénario et dans le panneau Eléments, ce qui permet de les distinguer facilement des
éléments déverrouillés.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
48
Leçons intégrées à l’application
Le panneau Leçons d’Adobe Edge Animate propose des didacticiels pratiques avec exemples d’actifs, que vous pouvez suivre dans l’outil.
Panneau Leçons
Vous pouvez accéder au panneau Leçons à partir de l’onglet Mise en route de l’écran d’accueil ou à partir du menu Fenêtre (Fenêtre > Leçons).
Leçons
49
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions de Creative Commons.
Informations juridiques | Politique de confidentialité en ligne
50
Cibler les anciens navigateurs
Prise en charge des anciens navigateurs avec des images d’affiche
Prise en charge des anciens navigateurs avec Google Chrome Frame
Adobe Edge Animate utilise des normes Web telles que HTML5, CSS3 et JavaScript pour définir l’animation et l’interactivité. Il se peut que
certaines fonctionnalités ne fonctionnent pas ou n’apparaissent pas dans les anciens navigateurs qui ne prennent pas en charge ces normes.
Vous pouvez toujours cibler les anciens navigateurs en créant des images d’affiche. Vous pouvez également utiliser l’extension Google Chrome
Frame d’Internet Explorer pour les utilisateurs Windows.
Prise en charge des anciens navigateurs avec des images d’affiche
Haut de la page
Définissez un état de remplacement de votre projet sous la forme d’une image d’affiche ou de votre propre illustration.
Lorsque les visiteurs consultent votre contenu dans un ancien navigateur Web, l’image d’affiche leur est présentée.
1. Dans le panneau Scénario, placez la tête de lecture à l’état de fin de toutes les animations.
2. Dans le panneau Eléments, sélectionnez l’élément Scène.
3. Dans le panneau Propriétés, cliquez sur le bouton Capturer la scène en tant qu’image d’affiche (icône de la caméra).
4. Dans la boîte de dialogue Capturer une image d’affiche, cliquez sur Capturer.
5. Dans le panneau Propriétés, cliquez sur le bouton Edition pour la propriété Scène de niveau inférieur.
6. Cliquez sur le bouton Insérer. L’image capturée s’affiche dans la scène de niveau inférieur.
Pour utiliser votre propre illustration, faites glisser l’image depuis le panneau Bibliothèque vers la scène de niveau inférieur.
7. Revenez à la scène principale en cliquant sur le chemin de navigation de la scène situé en haut de la fenêtre d’aperçu.
Prise en charge des anciens navigateurs avec Google Chrome Frame
Haut de la page
Google Chrome Frame est une extension qui peut être installée dans les anciennes versions d’Internet Explorer. Elle active les technologies
HTML5 telles que celles utilisées par Edge Animate.
Voir aussi Activer les technologies d’ouverture de site Web dans Internet Explorer sur le site Web Google Developers.
1. Sélectionnez Fichier > Paramètres de publication.
2. Dans la boîte de dialogue Paramètres de publication, assurez-vous que Web est sélectionné en tant que cible de publication.
3. Sélectionnez l’option Utiliser Google Frame pour IE 6, 7 et 8.
4. Acceptez l’option par défaut « Pas d’invite » du programme d’installation Chrome Frame.
5. Cliquez sur Enregistrer pour enregistrer les paramètres de publication et revenir à la composition.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
51
52
Création d’animations imbriquées à l’aide de symboles
Création d’animations réutilisables avec des symboles
Création d’un symbole
Animation des éléments d’un symbole
Exportation d’un symbole
Importation d’un symbole
Contrôle des symboles à l’aide de JavaScript
En savoir plus
Créez des animations imbriquées avec des scénarios indépendants et des fonctions interactives. Les symboles sont des éléments qui
comprennent leur propre scénario. Vous pouvez animer un symbole en tant qu’élément standard dans la scène, par exemple, en le déplaçant de
gauche à droite. Vous pouvez également animer les éléments individuels composant le symbole. En d’autres termes, vous pouvez créer une
animation à l’intérieur d’une autre animation.
Les symboles sont réutilisables et peuvent être contrôlés avec des API et des fragments de code préconstruits.
Pour voir une leçon sur l’animation à l’aide de symboles :
1. Sélectionnez Fenêtre > Leçons dans Edge Animate.
2. Cliquez sur Réutiliser.
Haut de la page
Création d’un symbole
1. Dans le panneau Eléments, sélectionnez un ou plusieurs éléments. La sélection de plusieurs éléments entraîne la création d’un symbole
unique à partir de ces éléments.
Remarque : vous pouvez également sélectionner des symboles pour créer des symboles imbriqués.
2. Cliquez avec le bouton droit de la souris et sélectionnez Convertir en symbole dans le menu contextuel.
3. Dans la boîte de dialogue Créer un symbole, définissez le nom du symbole et cliquez sur OK.
Haut de la page
Animation des éléments d’un symbole
1. Dans le panneau Eléments, cliquez avec le bouton droit de la souris sur le symbole et sélectionnez Modifier le symbole.
Vous pouvez également cliquer avec le bouton droit de la souris sur le symbole dans la scène.
2. Animez un ou plusieurs éléments composant le symbole.
3. Pour quitter le mode de modification de symbole, cliquez sur le mot Scène situé en haut de la fenêtre d’aperçu.
4. Vous pouvez afficher un aperçu de l’animation en cliquant sur le bouton Lecture dans le panneau Scénario ou en appuyant sur la barre
d’espace sur le clavier.
Haut de la page
Exportation d’un symbole
Vous pouvez copier et coller un symbole d’un projet à l’autre.
Vous pouvez également exporter des symboles et leurs propriétés sous forme de fichier unique (.easym) pouvant être partagé et importé dans
une autre composition.
1. Cliquez avec le bouton droit de la souris sur le symbole dans le panneau Eléments et sélectionnez Copier.
2. Basculez vers un autre projet.
3. Cliquez avec le bouton droit de la souris sur l’élément Scène dans le panneau Eléments et sélectionnez Coller.
1. Sélectionnez les symboles à exporter dans la scène ou dans le panneau Bibliothèque.
2. Cliquez avec le bouton droit de la souris et sélectionnez Exporter le symbole.
Haut de la page
Importation d’un symbole
1. Cliquez sur le bouton Plus (+) en regard de l’onglet Symboles dans la bibliothèque.
2. Recherchez et sélectionnez le fichier du symbole (.easym) à importer.
53
Haut de la page
Contrôle des symboles à l’aide de JavaScript
Vous pouvez utiliser JavaScript pour contrôler les symboles. Pour plus d’informations, voir :
Ajout d’interactivité avec JavaScript
« Utilisation de symboles » dans le manuel Guide de l’API Edge Animate
Haut de la page
En savoir plus
Exploiter des scénarios indépendants avec des symboles
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
54
Utiliser des polices Web
Vous pouvez appliquer les polices d’Edge Web Fonts à du texte directement à partir d’Edge Animate. Lorsque vous sélectionnez une police dans
la boîte de dialogue Edge Web Fonts, le code permettant d’extraire la police depuis le serveur est automatiquement inséré dans votre code.
Edge Animate vous permet également de choisir des polices de secours en cas de problème lors du téléchargement ou lors de l’utilisation d’Edge
Web Fonts sur le poste de l’utilisateur.
1. Insérez le texte dans la zone de travail d’Edge Animate.
2. Dans la section Texte du panneau Propriétés, cliquez sur le bouton "+" en regard du menu des polices.
3. Sélectionnez la police que vous souhaitez utiliser. Un aperçu du texte avec la police appliquée s’affiche.
Vous pouvez filtrer les polices affichées dans le panneau en fonction de leur type. Pour cela, utilisez les boutons à gauche du panneau. Par
exemple, pour afficher uniquement les polices de type sans serif, cliquez sur le bouton Sans Serif.
4. Cliquez sur Ajouter une police.
Les polices sélectionnées et appliquées sont ajoutées à la bibliothèque de polices dans Edge Animate. Dans cette bibliothèque de polices, il
vous suffit de cliquer deux fois sur une police afin d’indiquer des polices de secours.
En cas de problème de téléchargement des polices Web à partir du serveur, les polices de secours sont utilisées pour afficher le texte. Les
polices sont utilisées selon l’ordre dans lequel elles apparaissent dans la liste.
55
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions de Creative Commons.
Informations juridiques | Politique de confidentialité en ligne
56
Animation de pages HTML existantes
Vous pouvez animer et ajouter de l’interactivité aux éléments se trouvant dans les pages HTML existantes. Etant donné que le code d’animation
généré par Edge Animate est stocké dans un fichier distinct, l’intégrité de la page HTML est conservée.
1. Ouvrez une page HTML existante dans Edge (Fichier > Ouvrir).
Edge Animate ouvre uniquement le code conforme aux normes. Par exemple, si votre document comporte des ID en double, l’outil vous en
informe et n’ouvre pas le fichier. Si vous recevez des messages d’erreur ou constatez un comportement anormal, essayez de contrôler la
page HTML à l’aide d’un programme de validation HTML.
2. Sélectionnez un élément de la page dans la scène.
Vous pouvez également sélectionner un élément dans le panneau Eléments qui affiche l’élément DOM (Document Object Model) de la
page.
3. Animez l’élément. Voir Créer des animations.
Remarque : l’utilisation des éléments HTML comporte des limitations. Les éléments HTML ne peuvent pas être convertis en symboles et
ne possèdent pas toutes les propriétés des autres éléments. Si vous recevez des messages d’erreur ou constatez un comportement
anormal, essayez de contrôler la page HTML à l’aide d’un programme de validation HTML.
Vous pouvez également ajouter des éléments tels que des div ou des textes, importer des images dans Edge, puis animer et ajouter une
interactivité à ces éléments.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
57
Notes de mise à jour
Notes de mise à jour d’Edge Animate 1.5
Notes de mise à jour d’Edge Code
58
Mise en forme et création
Création d’une mise en forme flexible
10 décembre 2012
Création de mises en forme de pages Web fluides et réactives
didacticiel vidéo ()
59
Cibler les anciens navigateurs
Prise en charge des anciens navigateurs avec des images d’affiche
Prise en charge des anciens navigateurs avec Google Chrome Frame
Adobe Edge Animate utilise des normes Web telles que HTML5, CSS3 et JavaScript pour définir l’animation et l’interactivité. Il se peut que
certaines fonctionnalités ne fonctionnent pas ou n’apparaissent pas dans les anciens navigateurs qui ne prennent pas en charge ces normes.
Vous pouvez toujours cibler les anciens navigateurs en créant des images d’affiche. Vous pouvez également utiliser l’extension Google Chrome
Frame d’Internet Explorer pour les utilisateurs Windows.
Prise en charge des anciens navigateurs avec des images d’affiche
Haut de la page
Définissez un état de remplacement de votre projet sous la forme d’une image d’affiche ou de votre propre illustration.
Lorsque les visiteurs consultent votre contenu dans un ancien navigateur Web, l’image d’affiche leur est présentée.
1. Dans le panneau Scénario, placez la tête de lecture à l’état de fin de toutes les animations.
2. Dans le panneau Eléments, sélectionnez l’élément Scène.
3. Dans le panneau Propriétés, cliquez sur le bouton Capturer la scène en tant qu’image d’affiche (icône de la caméra).
4. Dans la boîte de dialogue Capturer une image d’affiche, cliquez sur Capturer.
5. Dans le panneau Propriétés, cliquez sur le bouton Edition pour la propriété Scène de niveau inférieur.
6. Cliquez sur le bouton Insérer. L’image capturée s’affiche dans la scène de niveau inférieur.
Pour utiliser votre propre illustration, faites glisser l’image depuis le panneau Bibliothèque vers la scène de niveau inférieur.
7. Revenez à la scène principale en cliquant sur le chemin de navigation de la scène situé en haut de la fenêtre d’aperçu.
Prise en charge des anciens navigateurs avec Google Chrome Frame
Haut de la page
Google Chrome Frame est une extension qui peut être installée dans les anciennes versions d’Internet Explorer. Elle active les technologies
HTML5 telles que celles utilisées par Edge Animate.
Voir aussi Activer les technologies d’ouverture de site Web dans Internet Explorer sur le site Web Google Developers.
1. Sélectionnez Fichier > Paramètres de publication.
2. Dans la boîte de dialogue Paramètres de publication, assurez-vous que Web est sélectionné en tant que cible de publication.
3. Sélectionnez l’option Utiliser Google Frame pour IE 6, 7 et 8.
4. Acceptez l’option par défaut « Pas d’invite » du programme d’installation Chrome Frame.
5. Cliquez sur Enregistrer pour enregistrer les paramètres de publication et revenir à la composition.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
60
61
Intégration et publication
API d’exécution d’Adobe Edge Animate
article (12 décembre 2012)
Publication et intégration
didacticiel vidéo (13 décembre 2012)
Edge Animate et l’API Twitter
article (12 décembre 2012)
Améliorer vos folios DPS avec des animations HTML à l’aide d’Adobe Edge
didacticiel (12 décembre 2012)
Utilisation de fichiers Animate dans InDesign ou Muse
didacticiel vidéo (13 décembre 2012)
Pimenter votre site WordPress avec Edge Animate
didacticiel vidéo ()
Création d’une application PhoneGap Build avec Edge Animate
didacticiel vidéo ()
Utilisation de fichiers Edge Animate dans InDesign ou Muse
didacticiel vidéo (13 décembre 2012)
Optimiser Edge Animate à l’aide de composants Web tiers
article (12 décembre 2012)
62
Publication de votre contenu
Publication et intégration
Optimisation du contenu pour le Web
Publier en tant que package de déploiement Animate (.oam)
Publication dans Apple iBooks Author
En savoir plus
Pour publier votre contenu :
1. Spécifiez vos paramètres de publication. Pour plus d’informations, voir ci-dessous.
2. Sélectionnez Fichier > Publier.
Haut de la page
Optimisation du contenu pour le Web
1. Sélectionnez Fichier > Paramètres de publication.
2. Dans la boîte de dialogue Paramètres de publication, assurez-vous que Web est sélectionné en tant que cible de publication.
3. Notez ou modifiez le répertoire cible.
4. Définissez la préférence Structures via CDN.
Sélectionnez cette option pour télécharger les actifs jQuery associés à la composition à partir d’un réseau de distribution de contenu (CDN).
Ne sélectionnez pas cette option si vous souhaitez associer les actifs à la composition.
5. Définissez la préférence Publier le contenu en HTML statique.
Sélectionnez cette option pour générer des balises HTML au lieu d’injecter du contenu Edge Animate dans le document via JavaScript.
Cette option améliore la compatibilité avec les SEO et leur accès sur certaines plateformes.
6. Cliquez sur Enregistrer pour sauvegarder les paramètres de publication ou cliquez sur Publier.
Publier en tant que package de déploiement Animate (.oam)
Haut de la page
Sélectionnez cette option d’exportation pour créer un fichier de package de votre projet à des fins d’utilisation dans d’autres outils Adobe. Les
outils suivants prennent en charge les packages de déploiement Animate : Adobe Digital Publishing Suite (DPS), InDesign CS6, Dreamweaver
CS6 et Muse.
1. Sélectionnez Fichier > Paramètres de publication.
2. Dans la boîte de dialogue Paramètres de publication, assurez-vous que Package de déploiement Animate est sélectionné en tant que cible
de publication.
3. Notez ou modifiez le répertoire cible.
4. (Facultatif) Spécifiez une image d’affiche.
5. Cliquez sur Enregistrer pour sauvegarder les paramètres de publication ou cliquez sur Publier.
Haut de la page
Publication dans Apple iBooks Author
1. Sélectionnez Fichier > Paramètres de publication.
2. Dans la boîte de dialogue Paramètres de publication, assurez-vous que l’élément iBooks/OS X est sélectionné en tant que cible de
publication.
3. Notez ou modifiez le répertoire cible.
4. (Facultatif) Spécifiez une image d’affiche.
5. Cliquez sur Enregistrer pour sauvegarder les paramètres de publication ou cliquez sur Publier.
Haut de la page
En savoir plus
Améliorer vos folios DPS avec des animations HTML à l’aide d’Adobe Edge
63
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.
Mentions légales | Politique de confidentialité en ligne
64
Configuration requise
65
">