Share
Les concepteurs numériques sont bien obligés de s'identifier à l'outil de leur choix. C’est regrettable, car Fireworks CS4 est un outil qui est toujours négligé..
Dans ce didacticiel, vous découvrirez comment utiliser Fireworks CS4 pour accélérer votre flux de travail dans Flash et, en même temps, aider une enseigne au néon située sur le mur d’un théâtre en ruine de Los Angeles à scintiller tristement rue.
Ouvrez le MusicHall.jpg fichier dans Fireworks CS4. Le plan consiste à dessiner chaque lettre avec les mots «Music» et «Hall» en utilisant les vecteurs produits par Fireworks..
Sélectionnez l'outil de zoom et effectuez un zoom avant sur les mots du signe. Vous pouvez également sélectionner 150% dans la fenêtre contextuelle d’agrandissement située dans le coin inférieur droit du canevas..
Cliquez sur la puce de couleur Trait dans le panneau Outils pour ouvrir le sélecteur de couleurs. Sélectionner FF3300 (une orange), puis appuyez sur Entrée / Retour pour accepter votre choix. Définissez la couleur de remplissage sur Aucune. Cela définira la couleur des lettres à mesure que nous les dessinons. Bien que le tube semble être de couleur grise, je soupçonne que la lumière réelle était, à un moment donné, rouge.
Cliquez et maintenez l'outil Crayon. Sélectionnez l'outil de chemin de vecteur dans la liste déroulante. La sélection de cet outil vous permet de traiter le stylo comme un pinceau. Bien que cet outil soit plus adapté à ceux qui utilisent des stylos et des tablettes, ce projet permet également à ceux d'entre nous qui dessinent avec des souris de s'amuser..
Dans l’Inspecteur des propriétés, définissez la largeur du pinceau sur 4 pixels et sélectionnez le Doux arrondi pinceau de la catégorie de base dans le Type de brosse menu déroulant. Met le Précision valeur à 2. La précision est la précision avec laquelle les vecteurs sont dessinés. Plus le nombre est élevé (la valeur maximale étant 10) plus il y aura de nœuds de vecteurs dans la ligne.
Sélectionnez le calque de lettrage et, à l'aide de l'outil, tracez la lettre «M». Lorsque vous avez terminé, une nouvelle sous-couche nommée Chemin. Double-cliquez sur le nom de la couche “Path” et remplacez-le par “M”..
Si le chemin d'accès semble utiliser un «ajustement», passez à l'outil de sous-sélection, à la flèche creuse dans le panneau Outils, puis cliquez sur la forme. Vous verrez les vecteurs. Cliquez sur un point d'ancrage pour faire apparaître les poignées et effectuer vos «réglages». Pour supprimer un point, sélectionnez-le à l'aide de l'outil de sous-sélection et appuyez sur la touche Suppr. Pour modifier un point d'angle en un point arrondi, basculez vers l'outil Plume et cliquez sur le point pour ajouter la poignée manquante..
Si vous vous retrouvez avec des points sans poignées, sélectionnez l'outil Plume et cliquez / faites glisser le point. Fireworks a la mauvaise habitude de toujours vouloir fermer le chemin pour vous. Double-cliquez simplement sur le point final du chemin pour supprimer la ligne. Pour supprimer un point du tracé, sélectionnez-le à l'aide de l'outil Sous-sélection et appuyez sur la touche Suppr..
Répétez les étapes 4 à 7 pour les autres lettres du signe..
Lorsque vous avez terminé, sélectionnez Fichier> Enregistrer sous. La boîte de dialogue Enregistrer s'ouvre. Nommez le fichier - J'ai utilisé «MusicHall» - et sélectionnez FireworksPNG (* .png) de la pop vers le bas. Cela vous donnera un document multicouche avec transparence pour chaque couche. Cliquez sur le bouton Enregistrer et quittez Fireworks..
Comme je l'ai indiqué au début de ce didacticiel, les concepteurs considèrent que Fireworks est le «membre de la famille de Photoshop que nous préférons ne pas discuter». Comme vous êtes sur le point de le découvrir, il est peut-être préférable de parler un peu plus de Fireworks CS4. Commençons.
Lancer Flash CS4 et créer un nouveau document Flash ActionScript 3.0.
Sélectionnez Fichier> Importer> Importer dans la bibliothèque et accédez au dossier dans lequel vous avez enregistré l'image .png. Sélectionnez l'image et cliquez sur le bouton Importer dans la bibliothèque. Cela ouvrira la boîte de dialogue Importer un document Fireworks. Pourquoi la bibliothèque? Il est généralement considéré comme une pratique exemplaire d'importer tout dans la bibliothèque. En fait, tout ce qui est importé sur la scène reste bloqué dans la bibliothèque, alors économisez-vous un pas..
Lorsque la boîte de dialogue Importer un document Fireworks s'ouvre, cliquez sur OK. Si vous n'avez jamais vu cette boîte de dialogue auparavant, parcourons-la..
Ouvrez la bibliothèque Flash et ouvrez Objets Fireworks> MusicHall.png> Page 1. Double-cliquez sur le clip en page 1 pour l'ouvrir dans l'éditeur de symboles..
En regardant le MovieClip, vous découvrirez pourquoi Fireworks CS4 peut vous faciliter la vie. Chacune des lettres est sur sa propre couche dans le MovieClip. le MusicHall.png Le symbole graphique dans la bibliothèque est strictement un espace réservé et nous ne l'utilisons pas. Si vous cliquez sur chaque lettre à l'aide de l'outil de sous-sélection de Flash, vous verrez que chacune d'elles est un objet de dessin vectoriel, ce qui signifie que vous pouvez effectuer d'autres «ajustements» si nécessaire. Ce que vous ne voulez pas faire est de supprimer le Bitmap 3 image dans le Objets Feu d'artifice dossier. C'est celui qui contient l'image de fond.
Les lettres sont importantes et il faudra leur appliquer un certain nombre de filtres pour créer l'effet. De plus, le scintillement sera contrôlé par ActionScript 3.0. Cela vous indique que les lettres, dans leur forme actuelle, ne fonctionneront pas. Ils doivent être contenus dans un MovieClip car les filtres ne peuvent être appliqués qu'à du texte ou à des MovieClips. Voici comment:
Sélectionnez les calques de lettrage, pas le dossier, dans le dossier Lettrage de la timeline et coupez-les..
Collez les lettres du presse-papiers dans un nouveau MovieClip nommé Lettres..
Retour à la page 1 MovieClip, supprimer le calque lettrage, ajouter un nouveau calque et faites glisser le lettrage MovieClip vers le nouveau calque.
Cliquez une fois sur le MovieClip sur la scène et faites-le glisser en position. Utilisez les touches fléchées pour un contrôle plus précis. (Image 13)
Enregistrez le fichier dans le dossier où vous avez enregistré l'image importée..
Une chose que j’essaie de convaincre mes étudiants est que "l’art du flash est l’art de la subtilité". Faites attention à la façon dont les choses fonctionnent dans le monde réel et vous verrez cela en action. Créer un effet néon implique beaucoup plus que simplement gifler les lettres. Il y a un peu plus que cela quand il s'agit de créer un effet réaliste. Commençons.
Utilisez les valeurs indiquées dans la figure pour ajouter un filtre en biseau au MovieClip. Cela crée la base de l'effet en donnant aux lettres un aspect 3D et en ajoutant un peu de surbrillance le long des bords.
Utilisez les valeurs indiquées dans la figure pour ajouter un filtre de dégradé de lueur au MovieClip…. Lueur X et Glow Y valeurs à 0, le tube au néon devient plus défini.
Utilisez maintenant les valeurs indiquées dans la figure pour ajouter un filtre anti-luminescence au clip… Les deux étapes précédentes ont créé la tubulure, cette étape ajoute la lumière. Assurez-vous que la couleur de la lueur - FFCC00 - correspondre à la couleur des lettres ajoutées dans Fireworks.
Un filtre de plus; utilisez les valeurs indiquées dans la figure pour ajouter un filtre Ombre portée au MovieClip… La couleur de l’ombre portée n’est pas noire mais #CCCCCC. Cela donne l’illusion d’un peu d’éclairage - ce qui explique les valeurs de flou de 2 pixels - derrière la lumière.
Avec le MovieClip sélectionné sur la scène, attribuez-lui le nom d'instance "sign" dans l'inspecteur des propriétés. Ceci configure maintenant le MovieClip pour le code ActionScript qui contrôlera le scintillement des tubes au néon.
Créer le scintillement typique d'une enseigne au néon n'est pas une tâche réalisable sur la timeline. Dans ce cas, la lueur clignotera de manière à simuler une enseigne au néon à bout de souffle. Pour ajouter l'effet de scintillement, procédez comme suit.
Ajouter un nouveau calque nommé actes à la chronologie du MovieClip. Verrouiller le calque.
Sélectionnez la première image du calque actions et sélectionnez Fenêtre> Actions ou appuyez sur les touches F9 (PC) ou Option-F9 (Mac) pour ouvrir la fenêtre de script..
Entrez le code suivant:
import flash.filters. *; addEventListener (Event.ENTER_FRAME, flickerIt); fonction flickerIt (evt: Event): void filtres var: Array = sign.filters; var glow: GlowFilter = filtres [2]; lueur.longueur = Math.random () *. 5 + .35; sign.filters = filtres; ;
Si vous êtes nouveau dans ActionScript, parcourons ce bloc de code..
Nous savons que le filtre Glow est celui utilisé pour générer le scintillement. Pour ce faire, vous devez d'abord charger dans la classe de filtres. Cela s'appelle un joker et dit à Flash de charger toute la classe de filtres. Si vous ne souhaitez utiliser qu'un seul filtre, utilisez plutôt le nom du filtre. Dans ce cas, nous avons quatre filtres dans le MovieClip, donc un joker est la meilleure solution..
La ligne suivante indique comment se produit le scintillement. Comprenons clairement quelque chose: ActionScript est assez stupide. Il ne fera rien sauf s'il entend quelque chose. Dans ce cas, nous disons à ActionScript d'écouter un événement ENTER_FRAME et, lorsqu'il l'entend, d'exécuter quelque chose appelé flickerIt. Vous pouvez en déduire que l'animation Flash est une boucle d'image et que, lorsque la tête de lecture pénètre dans l'image après avoir fait le nécessaire, elle recommence tout.
La fonction est l'endroit où la magie se produit et le scintillement est créé.
La première ligne récupère les noms de tous les filtres qui ont été appliqués au signe MovieClip et les met dans une liste. Lorsque ActionScript crée une liste (appelée tableau), il n'utilise pas les noms des filtres. Au lieu de cela, il les met dans l'ordre numérique, le terme est ordre indexé, suivant l'ordre dans lequel ils ont été ajoutés. Si vous pouviez voir la liste, les quatre filtres ressembleraient à ceci: 0,1,2,3 ne pas Biseau, GradientGlow, Glow, DropShadow.
La ligne suivante attribue à GlowFilter le nom de variable "lueur" en indiquant à ActionScript de figurer dans la liste et d'utiliser l'élément d'index intitulé 2 dans cette liste.
Maintenant que ActionScript sait quel filtre utiliser, nous créons le scintillement en «jouant» avec le force propriété du GlowFilter.
La valeur de la propriété de résistance - Math.random () *. 5 + .35- peut sembler un peu mystérieuse. Ce n'est vraiment pas. le au hasard() méthode du Math La classe choisit un nombre compris entre 0 et 1. Lorsque ce nombre est choisi, il est divisé en deux puis augmenté de 0,35. Cela signifie que chaque fois que la tête de lecture entre dans la première image, la couleur orange a une force différente. Supposons que le nombre choisi au hasard est de 0,95. Le calcul serait:
La lueur résultante aurait une valeur de force de 83% si nous devions entrer la valeur directement dans le filtre. Chaque fois que la tête de lecture pénètre dans le cadre, la luminosité de la lumière augmente ou diminue en fonction de ce nombre aléatoire..
Fermez le volet Script et cliquez sur le bouton Scène 1 pour revenir au scénario principal..
Faites glisser le Page 1 movielcip sur la scène et sélectionnez Modifier> Document. Lorsque la boîte de dialogue Propriétés du document s'ouvre, cliquez sur le bouton radio Contenu. Maintenant, sauvegardez et testez le film.
Rendons tout cela un peu plus réaliste et ajoutons le bourdonnement d'une enseigne au néon en arrière-plan.
Copiez le fichier Buzz.mp3 du téléchargement dans le même dossier que le fichier .fla..
Ouvrez le clip de la page 1, sélectionnez la première image du calque actions et ouvrez le volet de script.
Cliquez une fois après la première ligne de code, appuyez sur la touche Retour / Entrée et ajoutez le bloc de code suivant:
Accentsconagua
var audio: Son = nouveau Son (); var req: URLRequest = new URLRequest ("Buzz.mp3"); audio.load (req); audio.play (); Encore une fois, si vous êtes nouveau dans ActionScript, parcourons ensemble ce bloc de code..
Au sein de la communauté Flash, il est un fait évident que l’ajout d’audio à la timeline est une «pratique perverse». Cela signifie que nous devons appeler le fichier audio dans le film à l'aide d'ActionScript. La première ligne de code commence ce processus en créant un objet son nommé l'audio. Cet objet sera utilisé plus tard pour jouer le fichier son.
Encore une fois, nous savons que Flash est stupide, nous devons donc lui indiquer quel fichier audio sera utilisé. Ceci est accompli à travers le URLRequest objet nommé req. Le paramètre est le nom du fichier que nous allons utiliser. Assurez-vous que les guillemets sont présents et que le nom correspond exactement au nom du fichier. Si vous allez ailleurs sur votre site pour récupérer le fichier audio, vous devez saisir une adresse absolue pour le fichier..
Maintenant que Flash sait quel fichier lire, il restera là à vous regarder avec un sourire stupide, à moins que vous ne lui demandiez d’alimenter ce fichier audio dans le lecteur Flash à l’aide de la touche charge() méthode de la classe Sound. Enfin, vous devez dire à Flash de jouer réellement le son.
Vous pouvez maintenant sauvegarder et tester le film!
Dans ce didacticiel, vous avez exploré le flux de travail entre Fireworks CS4 et Flash CS4. Vous avez découvert comment utiliser quelques-uns des outils de dessin de Fireworks et comment la superposition est réalisée dans Fireworks. Vous avez également importé un document Fireworks .png dans Flash et appris que les documents Fireworks .png ajoutent un MovieClip à la bibliothèque Flash. Vous avez ouvert le MovieClip de Fireworks et, avec quelques filtres et un trait d'ActionScript, vous avez créé une enseigne au néon clignotante accompagnée d'un son d'accompagnement..
Merci de votre lecture, n'hésitez pas à laisser des commentaires et des questions ci-dessous :)
