Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox
EN CHANTIER
Cette page n'est pas terminée et est en cours d'écriture.

Outil Déco - Introduction

Compatible Flash CS4. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash CS5. Cliquer pour en savoir plus sur les compatibilités.Par abriko (Boué Maxime), le 27 août 2012

Introduction (vidéo)

Remplissage vigne (vidéo)

Remplissage de la grille (vidéo)

Pinceau symétrique (vidéo)

Pinceau 3D(vidéo)

Pinceau construction (à venir)

Pinceau décoration (à venir)

Animation de feu (à venir)

Pinceau flammes (à venir)

Pinceau fleurs (à venir)

Pinceau éclairs (à venir)

Systême de particules (à venir)

Animation de la fumée (à venir)

Pinceau Arbres (à venir)

Introduction

L'Outil Déco de flash est très particulier voir étrange. A l'image du traitement qu'Adobe réserve aux outils graphiques de flash, il n'est ni complet ni au point et est buggé. Un graphiste confirmé ne pensera pas à l'utiliser car il aura pris l'habitude de s'en passer dans les versions précédents la version CS4. L'outil Déco est tout aussi maltraité dans la plupart des tutoriels du net qui montrent très rapidement les mêmes ingrédients inutiles de cet outil. L'Outil Déco est pourtant plein de possibilités et permet aux graphistes de gagner énormément de temps et de patience. Les programmeurs Action Script sauront a peu prés s'en passer en reproduisant le même type de chose en code mais le graphiste pourra avoir un rendu très rapide de ce qu'il a en tête grâce à cet outil. Nous allons explorer ce qu'il est possible de faire avec cet outil, en voici un aperçu:

Prérequis

Faible compétence requise. Savoir utiliser les symboles, en créer, utiliser l'outil pinceau et forme simple.

Fonctionnement du tutoriel

L'Outil Déco est diviser en 13 sous fonctions. 6 de ces fonctions peuvent se révéler utile si bien utilisées dans un but précis, je vais donc consacrer un tutoriel pour chacune de ces fonctions. Les 7 fonctions restantes sont inutiles ou pas assez complètes pour leur consacrer un tutoriel, elles seront regroupées sous le même tutoriel.

Remplissage Vignes

Si vous arrivez ici après avoir vu ou lu quelques tutoriels à propos de l'Outil Déco, vous ne savez probablement que faire 3 choses avec remplir votre scène de vignes, tracer facilement des gratte-ciels et barbouiller votre écran avec une flamme. Inutile, n'est-ce pas?

Nous allons tacher d'aller un peu plus loin que ça:

Après avoir sélectionner l'outil déco, puis dans le menu propriété “Remplissage de Vignes”, cliquez dans la scène vide et vous la remplirez avec le motif précédent. Cela n'a pas l'air très intéressant au premier abord, mais cette fonction Remplissage de Vignes comporte de quoi la personnaliser, l'améliorer et en faire de nombreuses choses même si malheureusement les options sont limitées et la fiabilité n'est pas au rendez vous. Avec un peu plus d'option et de fiabilité l'outil deviendrait incontournable.

Nous allons donc aller plus loin et reproduire ça:

Quel rapport entre les deux me direz vous? :) L'outil dans tout son potentiel ajouté à de l'astuce et de la créativité peut donner ce résultat sans problème mais surtout très rapidement car bien sûr il n'est pas forcément difficile de reproduire ce pommier dans Flash ou dans Illustrator en se passant de l'outil Déco mais grâce à ce dernier un bon graphiste le reproduit en 5mn! La rapidité fait tout l'intérêt de l'outil.

Etape 1 - Préparation des éléments

Dans un premier temps, il faut préparer les symboles qui remplaceront ses petites feuille verte et ses fleurs jaunes uniquement laissé là par Adobe à titre d'aperçu. Il est hors de question de s'en servir. Le motif type de Remplissage de vigne est uniquement capable de produire quelque chose d'organique. Il est difficile d'en tirer autre chose.

Les symboles dont nous aurons besoin: un symbole feuille, fleur puis pomme.

Etape 2 - Réalisation

- Dessiner un grand disque à l'aide de l'outil Ovale (à trouver sous l'outil rectangle ou taper “o”) d'une couleur neutre.

- Sélectionner l'Outil Déco (ou taper “u”)

- Dans le panneau propriété, assurez vous que “Remplissage Vigne” soit sélectionné

- En dessous, à droite de Feuille, cliquez sur modifier et sélectionnez le symbole de la feuille

- En dessous, à droite de Fleur, cliquez sur modifier et sélectionnez le symbole de la fleur

- Pour ma taille de disque, j'ai réduit la Longueur de Segment à 8px.

- Avec l'Outil Déco en main, sur le même calque, cliquez sur le disque précédemment créé, vous allez obtenir quelque chose ressemblant à ceci:

- Cela ne ressemble à rien pour l'instant et en plus nous avons un trou impossible à combler en recliquant car l'Outil Déco est comme je le disais très imparfait. Pour boucher ce trou, dans la panneau propriété, réduisez le paramètre Echelle du motif à 70 ou 80%, et réduisez la longueur de segment à 6px. (encore une fois, tout dépend de la taille de votre disque):

On est encore loin du résultat souhaité mais une fois maitrisée, ces deux étapes vous auront pris 30s en comptant le temps de calcul de la vigne par l'ordinateur.

Maintenant, voici l'astuce Top Secrète, pour toi public de Mediabox!! :D

- Allez dans la bibliothèque pour aller modifier le symbole feuille ou doubler cliquer sur la vigne créé pour entrer dans le symbole feuille.

- Modifiez le et ajoutez une ou plusieurs feuille, selon votre envie, au symbole. Copier coller le graphique de celle en place et obtenez par exemple ceci :

- Votre vigne va alors ressembler à ça :

- A présent, sélectionnez le disque de fond et supprimez le:

- Créez un nouveau calque, copiez collez le contenu du premier calque vers le deuxième.

- Sélectionnez tout le contenu du calque du dessous et effectuez une rotation de tout ce contenu en essayant de trouver le meilleur capable de masquer le fond blanc au maximum comme ceci :

- Une fois le meilleur angle trouvé, dégroupez tout en appuyant sur CTRL+B plusieurs fois.

- Une fois qu'il n'y a plus de groupe ni de symbole, que des formes, avec la pipette, piper le vert des feuilles et dans la palette Couleur, faites descendre le curseur pour obtenir un vert plus foncé. Feuille et Fleur devraient alors se colorer ainsi :

- Double cliquez sur le “branchage” vert clair afin de sélectionner d'un seul toute le branchage. Un deuxième double clic s'imposera pour le petit ajout qui a bouché le trou. Une fois les branchages sélectionnés, dans la palette Couleur, choisissez un marron. Obtenez ceci:

- De la même manière sélectionnez les branchages du calque du dessus et supprimez les:

- Créez un troisième calque en dessous des deux autres.

- Copier coller le contenu du deuxième calque sur ce troisième calque et comme précédemment effectuez une rotation afin de masquer le fond blanc au maximum.

- Cela ne suffira pas, alors prenez l'outil Pinceau, prenez la taille maximum et donnez de grand coup de pinceau de long en large. Laissez quelques jour:

- Sélectionnez les branchages par double clique et supprimez les de ce calque.

- Supprimez les branchages du calque qui dépassent de la “boule”, un par un ou en les sélectionnant tous par double clique et en effectuant une transformation à 90%:

J'ai choisi de commencer par des fleurs car malheureusement il est impossible de demander à l'outil Déco de ne pas faire pivoter le symbole Fleur donc il est préférable de choisir un motif qui n'a ni haut ni bas. Rien ne nous empêche de modifier notre arbre ensuite et de le transformer en pommier!

- Modifier votre symbole Fleur, copiez votre pomme à l'intérieur et supprimez les formes de la fleurs. - Ajuster les pommes dans l'arbre car les pommes ne peuvent se trouver au sommet:

- Manuellement, faites pivoter les pommes :

- Petit peaufinage si nécessaire et technique de pro :p : sélectionnez le fond de l'arbre sur le troisième calque et aller dans le menu Modification>Forme>Etendre le remplissage :

Etape 3 - Finition

- Régler à 2 ou 3, selon l'échelle de votre graphique, afin de rendre le fond plus opaque et les feuilles du fond plus grasses:

- Ajoutez un pied au pinceau, ici l'Outil Déco ne peut vous aider, et voilà le travail!

Nous voyons bien comment le Remplissage Vigne peut permettre de faire rapidement une sympathique illustration d'arbre dont on jurerait qu'elle a été dessinée ou en tout pas générée. Il faudrait un temps fou pour dupliquer même avec Clic+ALT+DRAG, faire pivoter individuellement chaque feuille et la placer à un endroit à priori aléatoire. Il m'a fallut moins de 5 mn pour faire cet arbre et vous aussi quand vous n'aurez pas à suivre un tutoriel pour cela.