Dans ce didacticiel, nous allons utiliser les nouvelles fonctionnalités de l'outil Déco de Flash CS5 pour créer un fond de dessin animé..
Adobe Flash dans Creative Suite 5 a été doté de mises à jour et d’améliorations remarquables. Adobe Flash CS5 comprend de nouvelles fonctionnalités pour les concepteurs et les développeurs, telles que le nouveau panneau Extrait de code, l'intégration à Flash Builder et le nouvel outil Spring for Bones..
L’une des nouvelles fonctionnalités de Flash CS5 est l’outil de dessin Déco (bien qu’il ne s’agisse pas d’une fonctionnalité nouvelle, car il a été ajouté à Flash CS4.) Il vous permet de créer des dessins et des animations à partir de formes et de couleurs dynamiques. . Il s'agit d'un des outils intelligents permettant de gagner du temps et de réduire les efforts en créant des objets de dessin et des animations à l'aide de symboles et d'objets prêts, ou en chargeant des symboles personnalisés à partir de la bibliothèque..
Dans Adobe Flash CS5, l'outil Déco a été amélioré pour inclure de nouvelles formes et fonctions, comme nous le verrons dans cet ouvrage. L'exemple que nous couvrirons devrait permettre de mieux comprendre l'outil Déco en créant un arrière-plan de dessins animés avec les outils Déco. Dans cet exemple, presque tout le travail est effectué à l'aide de l'outil Déco et de ses fonctions. Cependant, le but de cet exemple est de montrer comment utiliser l'outil Déco et comprendre ses fonctions en créant des arrière-plans animés Flash ou d'autres conceptions et en utilisant des objets à extraire de la liste d'objets Déco..
Ce tutoriel vous montrera combien de temps et d’efforts peuvent être économisés en utilisant l’outil Déco. Bien que l'exemple d'arrière-plan de bande dessinée ci-dessous nécessite des heures de création à l'aide des outils de dessin de Flash ainsi que des compétences en dessin, nous pouvons créer cet exemple en moins d'une heure à l'aide de l'outil Déco. Nous n'avons pas besoin de compétences en dessin..
Vous devez avoir des connaissances de base sur les outils Flash, car je vais creuser directement dans l'outil Déco, en lui montrant comment le personnaliser pour créer l'arrière-plan et l'animation. Cependant, commençons par l'étape 1…
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Nous allons commencer par créer le document Flash, en le préparant avant d'ajouter des objets d'outils Déco..
Créez un document Flash aux dimensions 600px X 450 px. Ajoutez un rectangle ayant les mêmes dimensions que le document et remplissez-le d'un remplissage linéaire (comme dans la figure ci-dessous) pour créer l'effet de ciel sombre..
Nous allons maintenant créer l’arrière-plan de la route, à l’aide de l’outil Ligne, créer le contour de la route et le remplir de gris pour simuler un véritable tarmac. Créez ensuite des nuages à l'aide de l'outil Ovale et le résultat final devrait ressembler à ceci:
Nous allons maintenant commencer à utiliser l'outil Déco pour créer les bâtiments à parcourir le trottoir routier que nous avons créé ci-dessus. Vous pouvez définir le type de gratte-ciel que vous souhaitez utiliser ou utiliser des bâtiments aléatoires. En outre, vous pouvez définir la taille des bâtiments.
Sélectionnez l'outil Déco ou appuyez sur la touche U du clavier. Dans le panneau Propriétés, sélectionnez "Pinceau de construction" dans la liste déroulante Effet de dessin. Ensuite, allez dans les Options avancées, choisissez "Construction aléatoire" et définissez la taille sur 2.
Cliquez sur la route, puis faites glisser vers le haut et relâchez la souris pour créer le premier bâtiment. Répétez l'étape ci-dessus pour créer d'autres bâtiments sur la route, comme illustré dans la figure ci-dessous.
Dans les étapes suivantes, nous allons utiliser le pinceau pour créer des arbres sur le trottoir et le pinceau pour créer des branches fleuries sur certains bâtiments. Avec cette brosse, vous pouvez définir la taille de l’arbre et ses couleurs de branches, de feuilles et de fleurs / fruits.
Créez un nouveau calque sur le calque bâtiments. Sélectionnez l'outil Déco. Dans le panneau des propriétés, choisissez Pinceau d'arbre dans le menu déroulant, puis dans l'option Avancé, sélectionnez "Arbre Aspen".
Cliquez sur le trottoir entre les bâtiments pour créer les arbres. Assurez-vous de faire glisser quelques pixels pour créer de petits arbres. Plus vous faites glisser, plus la taille de l'arbre devient grande. L'effet final après l'ajout des arbres devrait être comme ci-dessous:
Maintenant, sélectionnez le pinceau de fleurs, puis dans l'option Avancé, choisissez "Poinsettia". Définissez la taille de la fleur et de la feuille sur 50% et assurez-vous que la case Branche est cochée
Faites glisser l'écran pour créer des branches de fleurs. Ils devraient être grands pour les afficher comme une branche. Si la branche résultante est trop grande, vous pouvez la sélectionner et réduire sa taille. Placez ensuite la branche de fleur redimensionnée sur les bâtiments, comme indiqué dans la figure ci-dessous:
Les étapes suivantes expliquent comment créer des barils de feu animés. Nous utiliserons également le pinceau Animation de feu qui vous permet de créer un tir vectoriel animé. Vous pouvez définir la taille du feu, la vitesse et la durée de la trame. En outre, vous pouvez définir la couleur de la flamme et l'étincelle.
Créez un nouveau symbole en sélectionnant Insertion> Nouveau symbole ou utilisez le raccourci Ctrl + F8 (Commande + F8 sur Mac) et définissez-le comme clip..
Dans le calque actif, créez un cercle pour représenter le haut du baril et un autre pour en faire le bas. Faites glisser deux lignes entre elles et complétez le remplissage du barillet avec des lignes intermédiaires pour ressembler à l'exemple ci-dessous:
Créez un nouveau calque pour l'animation du feu. Sélectionnez l'outil Déco ou appuyez sur la touche U du clavier, choisissez Animation d'animation dans la liste déroulante du panneau Propriétés et définissez l'animation d'incendie sur 50 images..
Maintenant, nous allons changer la taille et la position du feu pour qu'il apparaisse comme si des flammes montaient du canon:
Retournez sur la scène principale et ajoutez le clip vidéo de Barrel sur la scène à côté des bâtiments, comme illustré dans la figure ci-dessous. Vous pouvez tester le film en appuyant sur Ctrl + Entrée (Commande + Entrée sous Mac).
Bien que l'outil Déco ne fournisse pas toutes les formes et tous les pinceaux possibles, vous pouvez le personnaliser en fonction de vos besoins à l'aide des symboles ou des couleurs que vous souhaitez afficher. Maintenant, nous allons utiliser le système de particules qui vous permet de créer une animation fluide telle que la neige, les feux d'artifice et autres effets qui dépendent de petites particules explosant à partir d'une source..
Ce pinceau est basé sur deux particules qui peuvent être des symboles par défaut ou vous pouvez utiliser des symboles de la bibliothèque. En outre, vous pouvez définir d'autres options telles que la longueur de l'animation, le taux par image et d'autres options, comme nous le verrons ci-dessous:
Créez un nouveau symbole en sélectionnant Insertion> Nouveau symbole ou utilisez le raccourci Ctrl + F8 (Commande + F8 sous Mac) et définissez-le comme un clip. Retournez sur la scène et faites glisser le symbole vide nouvellement créé de la bibliothèque vers la scène, puis double-cliquez sur le symbole pour passer en mode d'édition.
Sélectionnez l'outil Déco ou cliquez sur la touche U du clavier et choisissez Système de particules dans la liste déroulante Effet de dessin du panneau Propriétés. Sélectionnez les particules 1 et 2, définissez leur couleur en blanc pour simuler la chute de neige et utilisez la forme par défaut. Définissez les autres valeurs comme suit:
Maintenant, cliquez sur le haut de la scène pour que le système de particules tombe du haut vers le bas. Vous remarquerez que l'animation de la particule est générée et les images sont créées.
L'animation de neige commence petit et grossit jusqu'à la fin de l'animation. Ceci (comme avec le feu) créera une coupure indésirable dans l'animation en boucle. Pour résoudre ce problème, nous pouvons à nouveau supprimer les cadres de départ pour les particules de neige de départ. Sélectionnez le cadre jusqu'au point où la chute de neige couvre toute la scène. Dans cet exemple, nous allons sélectionner les 40 premières images. Cliquez avec le bouton droit de la souris et choisissez Supprimer les cadres ou appuyez sur Maj + F5..
Si vous remarquez que l'animation se déplace rapidement, vous pouvez ajouter une image supplémentaire après chaque image clé en sélectionnant l'image clé et en appuyant sur F5..
Ajoutons quelques effets de foudre en utilisant le pinceau de foudre. Cet éclair devrait animer et apparaître au hasard. Vous pouvez définir de nombreuses options avec cette brosse, telles que la couleur de l'éclairage, son échelle, la largeur du faisceau et la complexité. En outre, vous pouvez choisir si elle doit être animée ou non.
Créez un nouveau symbole de clip et ajoutez-le à la scène située derrière le calque buildings. Dans le symbole du clip, appuyez sur F7 pour créer une image vide au début du clip et passez à l'image 20..
Sélectionnez l'outil Déco et dans le panneau Propriétés, choisissez Pinceau lumineux. Conservez les mêmes paramètres, modifiez simplement la couleur en blanc et cochez la case Animation..
Pointez le curseur de votre souris en haut à gauche de la scène, cliquez et maintenez votre souris jusqu'à ce que la foudre atteigne la complexité souhaitée, puis relâchez la souris. Appuyez sur F7 après l'animation pour ajouter une image vide après celle-ci..
Passez à l'image 70, répétez les étapes ci-dessus pour créer davantage de foudre dans la partie droite de la scène avec une complexité différente et appuyez sur la touche F7 après l'animation pour supprimer la foudre de la scène..
Vous pouvez tester le film en cliquant sur Ctrl + Entrée (Commande + Entrée sur Mac) ou en choisissant Fichier> Publier pour exporter le film au format SWF et HTML..
Généralement, les fichiers qui utilisent l'outil Déco génèrent des fichiers SWF de grande taille, car l'outil Déco génère les pinceaux et l'animation sous forme de formes non groupées et d'animations image par image. Ces deux méthodes augmentent la taille totale du fichier. Cependant, il est préférable d'optimiser le fichier une fois les résultats requis atteints. Il existe quelques astuces pour réduire la taille du fichier comme ci-dessous:
Dans l'exemple ci-dessus, nous avons appris à utiliser l'outil Déco pour créer un arrière-plan de dessin animé. Cela fait gagner du temps et ne nécessite pas de compétences particulières en dessin animé. Vous pouvez découvrir le reste des pinceaux disponibles dans les outils de dessin Déco, voir comment les utiliser et les différentes options associées à chacun..
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!