Adobe Animate et l'exportation vers Canva : Un guide complet
Adobe Flash CS6, bien qu'ancien, reste un outil puissant pour l'animation et le dessin vectoriel, offrant une interface utilisateur et une expérience utilisateur appréciées. Avec la transition vers Adobe Animate, les développeurs et concepteurs disposent désormais d'un outil polyvalent pour créer du contenu interactif. Cet article explore comment exporter des créations d'Adobe Animate (anciennement Flash Professional) et les intégrer dans des plateformes comme Canva, en mettant l'accent sur les fonctionnalités et les flux de travail pertinents pour les versions modernes et anciennes du logiciel.
Composants HTML5 dans Adobe Animate
Adobe Animate prend en charge l'utilisation de composants HTML5, qui offrent des fonctionnalités personnalisables et réutilisables pour améliorer la productivité des créateurs. Auparavant, Animate prenait en charge les composants Flash destinés aux cibles basées sur Flash.
Utilisation des composants vidéo
Pour intégrer de la vidéo, sélectionnez Composants > Vidéo. Une fois le composant vidéo sélectionné sur la scène, ses paramètres peuvent être ajustés dans l'inspecteur des propriétés. L'option Respecter les dimensions du fichier source permet de redimensionner le lecteur vidéo en fonction des dimensions de la vidéo d'entrée, une fonctionnalité qui fonctionne uniquement avec les vidéos MP4.
La prévisualisation de la séquence s'effectue en appuyant sur Ctrl + Entrée (Commande + Entrée sur Mac).
Rendre les composants interactifs
Les composants sont ajoutés au document HTML en tant qu'éléments DOM. Pour les rendre interactifs, utilisez le panneau Fenêtre > Fragments de code. Par exemple, pour créer des boutons interactifs :
- Double-cliquez sur le composant Bouton deux fois dans le panneau Composants pour créer deux occurrences sur la scène et les positionner.
- Sélectionnez la première occurrence de bouton et définissez son libellé sur "Lecture" dans l'inspecteur des propriétés.
- Ouvrez le panneau Fragments de code (Fenêtre > Fragments de code).
- Sélectionnez le bouton "Lecture" sur la scène, double-cliquez sur l'événement de clic dans le panneau Fragments de code, puis cliquez sur OK. Animate attribuera un nom d'instance au bouton.
- Sélectionnez la vidéo sur la scène, développez la section Vidéo dans les fragments de code et double-cliquez sur "Lire une vidéo".
La prévisualisation du film permet de vérifier l'interactivité. L'attribut className de chaque composant est visible dans l'inspecteur des propriétés, permettant de styliser les composants à l'aide de feuilles de style CSS. Le composant CSS peut être utilisé pour charger une feuille CSS personnalisée.
Installation des composants HTML5
Les concepteurs ou développeurs Animate peuvent installer les composants HTML5 distribués sous forme de fichiers ZXP à l'aide de l'utilitaire Gérer les extensions. L'installation se fait en double-cliquant sur le fichier ManageExtensions.exe, puis en cliquant sur Installer une extension et en sélectionnant le fichier .zxp. Après l'installation, un clic sur le menu hamburger dans le coin supérieur droit et la sélection de Recharger les composants sont nécessaires.
Exportation de contenu depuis Adobe Animate
Adobe Animate offre diverses options d'exportation pour différents formats, permettant d'intégrer le contenu créé dans d'autres plateformes comme Canva.
Exportation d'images à partir de symboles
Il est possible d'exporter une série de fichiers image à partir d'un symbole de clip, de bouton ou de graphique. Animate crée un fichier image distinct pour chaque image du symbole. Les paramètres d'exportation incluent :
- Largeur et Hauteur : pour redimensionner l'image générée.
- Résolution : la résolution de l'image.
- Couleurs : la profondeur de couleur (8, 24 ou 32 bits). La valeur par défaut de 32 bits prend en charge la transparence. Les options 24 et 8 bits désactivent la transparence et définissent automatiquement l'arrière-plan sur "Scène".
- Arrière-plan : couleur de fond pour les images 8 ou 24 bits. Pour les images 32 bits, l'arrière-plan est toujours transparent.
- Lisser : pour atténuer les bords de l'image générée.
Format FXG
Le format FXG est un format d'échange graphique basé sur MXML, facilitant la collaboration entre concepteurs et développeurs. Les graphiques vectoriels sont stockés directement, tandis que les éléments non pris en charge par FXG (bitmaps, certains filtres, masques, etc.) sont exportés en tant que bitmaps référencés. L'exportation d'objets au format FXG se fait en sélectionnant les objets et en choisissant Exporter > Exporter la sélection.
Exportation d'images bitmap
Animate permet de créer des images bitmap pour une utilisation dans d'autres applications. Les options d'exportation incluent la définition de la taille (en pixels), de la résolution (en ppp), du nombre de couleurs, et l'application de l'anticrénelage pour une meilleure qualité d'image.
Exportation vidéo
Animate peut exporter des interpolations, des symboles et des graphiques au format vidéo HD. L'intégration avec Adobe Media Encoder (AME) optimise l'exportation vers divers formats. Les options incluent :
- Choix du format vidéo et des paramètres prédéfinis pris en charge par AME.
- Mise en file d'attente et traitement automatique dans AME.
- Exportation de toutes les scènes ou d'une scène spécifique avec lecture en boucle.
- Par défaut, Animate prend en charge l'exportation vers des fichiers QuickTime (.MOV).
- La procédure d'exportation vidéo HD a été remodelée avec l'intégration d'Adobe Media Encoder.
- Options de rendu pour la taille (Largeur et Hauteur du rendu), correspondant à la résolution d'exportation souhaitée.
- Ignorer la couleur de la scène (créer un canal alpha) : crée un canal alpha transparent.
- Convertir la vidéo dans Adobe Media Encoder : pour convertir le fichier MOV exporté en un autre format via AME.
- Arrêter l'exportation : permet de définir un délai pour arrêter l'exportation.
Une fois l'exportation terminée, AME démarre si l'option de conversion a été sélectionnée, plaçant le fichier MOV exporté dans une nouvelle file d'attente.
Exportation en séquence SVG
Avec les mises à jour récentes, les utilisateurs peuvent exporter le scénario actuel sous forme de Séquence SVG. Animate offre un processus de publication efficace pour exporter des animations vers des GIF animés, des vidéos, et plus encore.
Intégration avec Canva
Canva est une plateforme de conception graphique en ligne qui permet de créer et d'exporter facilement des designs professionnels. L'importation de designs Adobe Illustrator et Photoshop dans Canva élimine la nécessité de recréer des éléments graphiques.
Importer des designs Adobe Illustrator et Photoshop dans Canva
Cette fonctionnalité est actuellement disponible sur canva.com via un navigateur de bureau. Les formats de fichiers pris en charge sont .ai (jusqu'à 100 Mo) et .psd (jusqu'à 300 Mo).
Méthodes d'importation :
- Depuis la page d'accueil :
- Faites glisser et déposez votre design sur la page d'accueil.
- Cliquez sur le bouton Importer, puis faites glisser votre fichier ou cliquez sur Parcourir.
- Depuis la page Projets :
- Cliquez sur Projets dans le menu latéral, accédez à vos Importations, puis faites glisser votre fichier ou cliquez sur Importer.
- Depuis l'éditeur :
- Faites glisser et déposez votre design dans l'éditeur.
- Cliquez sur Fichier > Importer un fichier.
- Dans le panneau latéral, cliquez sur l'onglet Importations, puis sur Importer des fichiers.
Une fois importé, le design apparaît dans l'onglet Téléchargements de l'éditeur Canva.
Limitations et considérations pour l'importation :
- Zones de création : jusqu'à 300 zones de création par design Illustrator. Au-delà, le design peut être divisé en plusieurs fichiers. Aucune limite pour Photoshop.
- Polices : jusqu'à 100 polices peuvent être importées.
- Images : limité à 1200 images par page pour Illustrator et Photoshop.
- Calques, dégradés et masques : pris en charge, mais certains éléments peuvent être tramés.
- Les designs Illustrator doivent être enregistrés en tant que fichiers « compatibles PDF ».
- Les numérisations de documents ou designs sont traitées comme des images simples ou fusionnées, sans possibilité de modifier les éléments de texte ou de design individuellement.
Pourquoi les textes ou polices importés ont-ils un aspect différent ? Canva tente d'identifier et de faire correspondre les polices, mais une correspondance exacte n'est pas toujours possible.
Pourquoi ne puis-je pas modifier les couleurs d'une image ? La modification des couleurs dépend du type d'image d'origine ; les images vectorielles offrent de meilleures chances de modification.
Où retrouver vos designs importés dans Canva
Les designs importés se trouvent dans Projets > Importations. Vous pouvez les télécharger ou les supprimer à partir de là.
Formats d'exportation et téléchargement depuis Canva
Canva propose diverses options d'exportation et de téléchargement pour vos créations.
Options de téléchargement :
- Formats pris en charge : PDF, JPG, PNG, MP4, GIF.
- Exportation par page : chaque design ou page est exporté séparément selon le type de fichier.
- Limites de transparence et de fichiers : s'appliquent par page pour JPG et PNG.
- Dossiers : seuls les dossiers de niveau supérieur sont pris en charge.
- Quantité : jusqu'à 200 designs à la fois (ou 25 pour MP4/GIF).
- Type de fichier unique : un seul type de fichier est pris en charge par téléchargement.
- Les téléchargements multiples sont regroupés dans un fichier ZIP.
Téléchargement en masse :
Disponible sur ordinateur pour les utilisateurs de Canva Pro et des forfaits supérieurs. Permet de sélectionner plusieurs fichiers et dossiers, puis de choisir le format de fichier pour le téléchargement.
Problèmes de téléchargement et options payantes :
Si vous rencontrez des problèmes de téléchargement, consultez les articles d'aide dédiés. Si un paiement est demandé avant le téléchargement, cela peut indiquer l'utilisation d'éléments premium ou Pro. Les utilisateurs gratuits peuvent acheter une licence de contenu Pro, passer à un forfait payant ou télécharger une version avec filigrane. Les abonnés Pro bénéficient de licences d'éléments incluses.
Téléchargement de pages ou parties spécifiques :
Il est possible de télécharger des pages spécifiques ou des parties d'un design en les sélectionnant lors de l'invite de téléchargement.
Limitations d'abonnement :
Certaines options de téléchargement, telles que le téléchargement en masse, le téléchargement avec un arrière-plan transparent, ou au format SVG, sont réservées aux forfaits payants.
Compatibilité des fichiers et versions d'Adobe Animate
Adobe Animate continue de prendre en charge le format de fichier XFL, qui représente les fichiers .fla compressés et les fichiers .xfl non compressés (introduits dans Flash CS5). Animate peut ouvrir les fichiers enregistrés dans des versions antérieures.
Ouverture de fichiers anciens dans Animate :
Flash CS5.5 et les versions ultérieures peuvent ouvrir les fichiers XFL des versions "futures". Cependant, certaines fonctions ont été abandonnées dans Animate. Si vous ouvrez un fichier créé avec une ancienne version, un message d'avertissement s'affichera. La conversion automatique convertira le contenu obsolète en un type pris en charge, avec la possibilité d'enregistrer le fichier sous un nouveau nom.
- Le texte TLF est converti en texte classique statique.
- Les composants AS2 sont transmis en tant qu'espaces réservés et ne peuvent pas être utilisés pour créer du contenu sur la scène.
L'ouverture de fichiers anciens peut prendre du temps en raison de l'analyse et de la conversion du contenu obsolète. Pour éviter cela, il est recommandé de réenregistrer ces fichiers avec Animate.
Exporter des fichiers Affinity vers Canva
Affinity Studio permet d'exporter des documents ou des zones sélectionnées directement vers un dossier spécifique dans Canva, offrant un flux de travail plus rapide et plus simple.
Utilisation de l'exportation vers Canva :
L'exportation peut se faire via la boîte de dialogue Exporter ou Exportation rapide. Les deux options incluent le choix To Canva, permettant de sélectionner le dossier de destination.
Modification et partage de fichiers Affinity dans Canva :
Lors de l'importation, le fichier apparaît comme une image statique ou un graphique dans Canva. Les calques d'origine d'Affinity ne sont pas modifiables. Pour une édition dans Affinity, exportez les fichiers Canva au format SVG, PDF, ou PNG/JPG.
Adobe Flash CS6 : Un regard rétrospectif
Adobe Flash CS6 (sorti en 2012) est encore considéré par certains comme un logiciel d'animation et de dessin vectoriel performant. L'évolution vers Adobe Animate avec un modèle d'abonnement mensuel/annuel a suscité des critiques, notamment de la part des indépendants et des utilisateurs non commerciaux.
Limitations d'exportation vidéo dans Flash CS6 :
Certains utilisateurs ont rencontré des difficultés lors de l'exportation vidéo en haute résolution (4K) depuis Flash. Les formats d'exportation vidéo incluent SWF, AVI, MOV, Animation GIF, WAV, JPEG sequence, GIF sequence, et PNG sequence. Une solution proposée est d'exporter en séquence JPEG, puis de combiner les images avec du son dans un éditeur vidéo.
Points à vérifier avant l'animation dans Flash :
- La taille du film doit être définie en 4096x2160 pour le 4K.
- Créez l'animation en 24 ips (pas d'option pour modifier cela lors de l'exportation).
- Utilisez des instances graphiques (pas des instances de film).
- Assurez-vous que toutes les calques cachés sont visibles avant l'exportation, car l'exportation est WYSIWYG (What You See Is What You Get).
Malgré l'obsolescence perçue, l'interface utilisateur et la nature vectorielle des données dans Flash continuent d'attirer certains utilisateurs, notamment pour le dessin.
tags: #adobe #flash #cs6 #exporter #en #canva