Share
Depuis la publication anticipée d'Adobe Creative Suite, l'intégration de ses produits a été l'une des fonctionnalités clés. Après la fusion d'Adobe avec Macromedia, l'intégration de Creative Suite s'est étendue à des produits tels que Flash, Dreamweaver et Fireworks. Ce tutoriel montre comment utiliser Flash, Photoshop, Illustrator et After Effects ensemble pour créer un seul projet..
L'intégration entre les produits Adobe Creative Suite améliore votre flux de travail grâce à ces applications en vous donnant la possibilité de vous déplacer facilement et efficacement entre chacune d'elles. Cela est dû à la compatibilité entre eux et à la capacité des produits CS à lire les formats et objets courants. L'interface unifiée est un autre aspect de l'intégration entre les produits. Une fois que vous apprendrez à travailler avec un seul produit, vous serez familiarisé avec le reste de la famille..
L'intégration prend de nombreuses formes dans Adobe Creative Suite. La possibilité d'adapter votre travail à des périphériques mobiles et de tester avec Adobe Device Central est une autre forme d'intégration, car vous pouvez utiliser la même application que vous exécutez sur des ordinateurs avec différents types de périphériques. La troisième forme d'intégration est l'intégration entre les concepteurs et les développeurs qui travaillent dans le même environnement, se familiarisant avec le flux de travail des autres et les outils qu'ils utilisent tous les deux..
Cet article traite de l'intégration entre Flash et d'autres produits Adobe Creative Suite tels que Photoshop, Illustrator et After Effects pour donner une idée de la manière dont ces produits s'intègrent efficacement entre eux. Nous allons simuler un projet pour créer une bannière animée en Flash utilisant les ressources de Photoshop et Illustrator. Nous allons également utiliser After Effects pour améliorer l'animation Flash à l'aide des paramètres prédéfinis d'After Effects..
Bien que cet article permette de passer d'une application Adobe Creative Suite 5 à une autre, vous n'avez pas besoin d'avoir beaucoup d'expérience avec ces applications, car nous expliquerons uniquement comment intégrer le flux de travail entre chacune de ces applications via notre exemple..
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
La première étape consiste à créer le fichier de bannière Flash de base qui sera le point central à intégrer à Flash et Photoshop, Illustrator et After Effects..
Créons un document pour la bannière avec 336 pixels x 280 pixels et avec une vitesse de 30 images par seconde. Et définissez la couleur d'arrière-plan sur noir dans la boîte de dialogue Configuration du document.
Cette taille de document sera la taille standard de tous les documents que nous allons créer dans Photoshop et After Effects, histoire de garder les choses en ordre..
Après avoir créé le document Flash, nous produirons la première animation de la bannière à l'aide de l'outil Déco. Avant de passer aux étapes suivantes, vous pouvez passer en revue un article précédent qui couvre l'outil Déco à l'aide du nouvel outil de dessin Déco dans Flash CS5. Voyons maintenant les premières étapes de l'animation:
Sélectionnez l'outil Déco et, parmi les options de l'outil Déco du panneau Propriétés, choisissez Remplissage de la grille..
Dans les options de la grille, définissez ses propriétés comme suit:
Sélectionnez la première image du panneau Montage et cliquez avec la souris sur la scène pour créer une grille aléatoire. Dans l'image numéro 3, appuyez sur F7 pour créer une image vierge et répétez l'étape ci-dessus pour créer une autre grille aléatoire..
Répétez l'étape ci-dessus toutes les deux images pendant 20 images pour créer une animation pour une animation de grille aléatoire..
À ce stade, nous allons passer à Photoshop pour préparer les ressources que nous utiliserons dans l’animation ultérieure des bannières..
Dans les versions précédentes de Flash, il n'existait qu'une méthode pour importer des ressources bitmap dans Flash: l'importation de formats d'image tels que JPG pour une compression d'image optimale et PNG pour des images transparentes. Toutefois, il a fallu beaucoup de temps pour importer chaque couche sous forme d'image distincte avant de l'importer séparément dans Flash. Le nouvel importateur PSD dans Flash vous permet d'importer des fichiers PSD directement dans Flash avec diverses options, comme nous le verrons plus tard..
Dans les étapes suivantes, nous allons importer le fichier Photoshop Banner.psd dans Flash à l'aide de la boîte de dialogue d'importation Flash PSD:
Dans le menu Fichier, choisissez Importer> Importer pour créer et choisir un fichier PSD. Nous allons utiliser le psd_banner.psd fichier du téléchargement source (lien en haut du didacticiel).
Jetons un coup d'œil sur la boîte de dialogue d'importation PSD et ses propriétés disponibles. La boîte de dialogue comprend les parties suivantes:
Dans la section des calques, vous pouvez prévisualiser dans cette section les calques PSD du document et cocher ou décocher les calques que vous souhaitez importer dans Flash. En outre, il donne un aperçu du type de la couche. Par exemple, le calque de texte modifiable comporte une lettre T sur le calque pour indiquer qu'il est modifiable.
D'autre part, la couche bitmap comprend une icône bitmap pour indiquer que la couche n'est pas modifiable. Et vous pouvez fusionner entre deux calques en les sélectionnant à l'aide de la touche Maj et en appuyant sur le bouton Fusionner les calques..
Sous la section des calques, vous pouvez convertir les calques en calques Flash ou en images clés. Vous pouvez également choisir de placer les calques dans leur position d'origine et de modifier la scène Flash pour qu'elle soit identique à celle du fichier Photoshop..
Dans la section de droite, vous pouvez définir les propriétés de chacun des calques sélectionnés dans la section des calques. Dans la zone supérieure, vous pouvez choisir comment importer les calques. Par exemple, dans le calque de texte, vous pouvez choisir d'importer le calque en tant que texte modifiable, chemins vectoriels ou image bitmap aplatie. De plus, vous pouvez choisir d'importer les calques bitmap fusionnés avec ses styles ou séparés de ceux-ci..
Vous pouvez recouvrir le calque importé d'un clip et lui attribuer un nom d'occurrence directement à partir de la boîte de dialogue d'importation PSD sans qu'il soit nécessaire de le convertir après son importation. À la fin de cette section, vous pouvez définir les paramètres de publication du calque importé, tels que le type de compression et la qualité..
Revenons maintenant à notre exemple et définissons les options d'importation..
Définissez la boîte de dialogue Importation PSD pour importer tous les calques PSD en tant que calques Flash et convertir les calques importés en clips. Notez que les calques importés apparaissent au-dessus du calque Flash créé précédemment. Déplacez le calque d'arrière-plan pour qu'il apparaisse au niveau de l'image 10 dans le scénario et le calque homme pour qu'il apparaisse à l'image 15
Étendez tous les calques de l'animation à l'image 50, cliquez avec le bouton droit sur le premier calque et choisissez Interpolation de mouvement.
Sélectionnez l'image d'arrière-plan dans la première image du mouvement et définissez son alpha sur 0%, puis passez à l'image 15 et réglez l'alpha sur l'arrière-plan sur 100%. Répétez l'animation alpha ci-dessus sur le clip de la couche man pour qu'il apparaisse après l'apparition complète de l'arrière-plan..
À ce stade, nous avons intégré les ressources Photoshop à un projet Flash à l'aide de la boîte de dialogue Importation PSD. Dans la prochaine étape, nous allons importer des ressources depuis Adobe Illustrator.
Alors que Photoshop est plus spécialisé dans l'édition de bitmap et d'images, Adobe Illustrator est le meilleur choix pour créer des ressources de vecteurs et d'illustrations pour votre projet. Dans cette partie, nous allons importer des ressources vectorielles dans Flash à l'aide de la boîte de dialogue d'importation AI qui importera le contenu du fichier Adobe Illustrator en tant que calque vectoriel éditable..
Lors des étapes suivantes, nous allons importer le fichier Illustrator. Flora.ai d'Illustrator à Flash et l'utiliser dans l'animation de la bannière.
Dans le menu Fichier, choisissez Importer> Importer sur la scène et sélectionnez le Flora.ai fichier. La boîte de dialogue d'importation AI apparaît. Bien qu’elle soit similaire à la boîte de dialogue d’importation PSD, certaines fonctionnalités supplémentaires lui permettent d’utiliser davantage de fichiers Illustrator, telles que la possibilité de choisir un Artboard spécifique et d’importer les symboles inutilisés ou les calques en tant qu’image bitmap unique..
Dans la boîte de dialogue Importation AI, assurez-vous que le calque AI est sélectionné et cochez la case du clip pour créer un clip basé sur le calque importé..
Le vecteur importé est placé sur un nouveau calque, déplacez le nouveau calque derrière le calque man..
Créez un nouveau calque de masque et définissez le calque vectoriel comme calque masqué. Dans le calque de masque, créez un petit clip pour un cycle qui fonctionnera comme masque du vecteur floral et sera animé pour le révéler..
Cliquez avec le bouton droit sur le calque de masque et choisissez une interpolation de mouvement. Dans la première image du mouvement, réduisez le cycle de la vidéo au centre du motif floral. Dans le dernier cadre, redimensionnez-le pour couvrir tout le floral et révélez-le sous le masque.
Ici, nous avons vu comment Flash s’intègre facilement à Illustrator pour amener les ressources vectorielles sur la scène Flash. Nous avons utilisé la boîte de dialogue d'importation AI qui fournit des options personnalisées basées sur la structure de fichier importée d'Illustrator..
Après cette étape, nous créerons le texte dans Adobe After Effects et l’ajouterons à la bannière comme dernière étape de notre exemple d’intégration..
Bien que vous puissiez créer une animation de texte et des effets dans Flash, Adobe After Effects offre la possibilité étendue de créer davantage d’effets en utilisant les effets prédéfinis ou en créant des effets personnalisés à l’aide du menu Effets. Dans cet exemple, nous verrons comment créer facilement des effets de texte sans connaître After Effects et les exporter dans l'animation de la bannière Flash..
Ouvrez Adobe After Effects. Cliquez avec le bouton droit sur le panneau du projet (s'il n'est pas présent, vous pouvez le révéler dans le menu Fenêtre), puis choisissez Nouvelle composition.
Définissez les dimensions et les images par seconde de la composition de la même manière que la taille Flash originale créée au début de ce didacticiel.
Utilisez l'outil Texte pour écrire le texte sur la scène et sélectionnez-le à l'aide de l'outil Flèche. Choisissez le panneau Effets et paramètres prédéfinis sur la droite. S'il n'est pas présent, vous pouvez le révéler à partir du menu Fenêtre..
Dans le panneau Effets et paramètres prédéfinis, recherchez les paramètres prédéfinis Animation> Texte> Texte 3D et choisissez Retombée 3D Scramble & Blur.
Appuyez sur la barre d'espace pour prévisualiser l'animation sur la timeline. Vous pouvez afficher les détails de l'animation en cliquant sur la flèche en regard du calque de texte dans le scénario. Vous pouvez également afficher les images clés d'animation..
Avant d'exporter l'animation au format Flash, nous devons rogner la zone qui sera exportée à partir de la timeline pour ne disposer que de l'animation de texte. Pour recadrer la chronologie de l'animation, faites glisser le crochet de la fin de la zone de travail à l'extrême droite de la chronologie sous les numéros d'image, puis positionnez-le à la fin de l'animation..
Dans le menu Fichier, choisissez Exporter> Adobe Flash Player (SWF). Dans le menu des options, définissez la qualité JPG sur Maximum et les fonctionnalités non prises en charge sur Rasterize..
L’animation After Effects ne se limite pas à l’animation de texte, vous pouvez l’utiliser pour créer d’autres effets d’animation et les exporter pour les utiliser dans des projets Flash..
Après avoir exporté l'effet secondaire au format SWF, l'étape suivante consiste à importer l'animation au format Flash en tant qu'images animées. After Effects peut prendre en charge l'exportation de contenu sous forme de vecteur, mais dans certains cas, il ne peut pas lire les informations sur les vecteurs (lors de l'importation de contenu 3D, par exemple). Pour éviter les problèmes, After Effects pixellise le contenu exporté sous forme de séquence bitmap. Dans les étapes suivantes, nous allons importer l'animation After Effect dans Flash..
Dans l'animation Flash, choisissez Fichier> Importer> Importer dans la scène, puis choisissez le fichier SWF d'animation de texte créé précédemment dans After Effects..
Le fichier SWF est importé dans Flash sous la forme d'une séquence d'images. déplacez les images de la séquence pour qu'elles apparaissent une fois l'animation de la couche man terminée.
Nous avons vu que vous pouvez importer les ressources After Effect dans Flash, mais vous pouvez également importation l'animation Flash dans After Effects en tant que fichier SWF et appliquez directement des effets à l'animation Flash. Vous pouvez ensuite l'exporter sous forme de vidéo SWF ou Flash FLV à partir d'After Effects. Dans ce cas, vous pouvez appliquer les effets d’animation After Effects à l’ensemble de l’animation Flash SWF..
L'objectif de ce didacticiel est de comprendre le flux de travail d'intégration entre Flash et d'autres produits Adobe Creative Suite tels que Photoshop, Illustrator et After Effects. À la fin de ce didacticiel, vous devriez être familiarisé avec le flux de travail croisé entre les applications dans Adobe Creative Suite..
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
Accentsconagua