Share
Vous devez admettre que, lorsque vous utilisez un produit appelé Flash, vous avez tendance à devenir trop flashy et à en faire trop. Le problème, c’est que le véritable art du concepteur Flash ne réside pas dans la production de présentations ou d’effets accablants. L’art véritable consiste à composer le numéro du Flashiness Meter et à comprendre que c’est la art de la subtilité c'est important. Pas le Flash.
Ce qui nous amène au sujet de ce tutoriel de niveau débutant… faire de l’eau.
Avant de commencer, soyons parfaitement clairs les uns avec les autres. Il existe plusieurs douzaines de façons de faire ce dont je vais parler dans ce tutoriel. En fait, je m'attends vraiment à voir la boîte de commentaires à la fin de cette pièce devenir peuplée avec un certain nombre de messages me disant, essentiellement, Ce n'est pas comme ça que je le ferais. Ce n'est probablement pas le cas et cela ne me pose aucun problème et je m'y attends. En fait, ce tutoriel est basé sur un exemple que Lee Brimelow, un évangéliste de la plate-forme Flash d'Adobe m'a montré il y a quelques années..
Lee et moi partageons des perspectives remarquablement similaires en ce qui concerne l'utilisation d'ActionScript. Au lieu de regarder un panneau Actions vide, nous pensons tous les deux qu’il est important que vous, débutant, récupériez un exemple de code (un peu comme nous le proposons ici) et commencez à jouer avec. De cette façon, vous apprendrez beaucoup de choses. Les universitaires appellent ce processus «échafaudage», terme génial pour apprendre une compétence de base et en développer les connaissances..
Comme je l’ai dit plus tôt, il s’agit d’un didacticiel de niveau débutant conçu pour illustrer un code ActionScript très intéressant utilisant des cartes de déplacement, des filtres et du bruit Perlin pour créer des ondulations d’eau. En fait, le but de cet exercice est de présenter un code complexe par ailleurs complexe et de vous montrer où vous pouvez vous amuser. Lorsque le code commence à devenir amusant, vous êtes sur la bonne voie pour atteindre la gloire de la POO. En fait, mon associé chez Activetuts +, Cadin Batrack, fait exactement cela avec beaucoup des techniques présentées ici dans son tutoriel Créer un effet de distorsion statique en utilisant le filtre de carte de déplacement.
Maintenant que nous nous comprenons, soyons subtils et faisons des ondulations..
L'image que nous allons utiliser est une photo que j'ai prise de la fontaine Médicis dans le jardin du Luxembourg à Paris, en France. Le plan est de mettre en mouvement cette piscine d'eau en utilisant Flash.
Pourquoi avons-nous besoin d'un plan d'attaque? Flash ne fait pas de rides de l'eau. Dans cette approche particulière, vous ne pouvez tout simplement pas sélectionner la zone d’eau à l’aide d’un outil de sélection dans Flash et, avec ActionScript, par exemple, modifiez cette sélection.
Pour Flash to déplacer une sélection autour vous devez coller l'image dans un objet BitMapData, déplacer les pixels de cet objet avec l'aide de DisplacementMapFilter, puis appliquer du bruit de Perlin au filtre pour créer les ondulations. Avant de commencer, vous devez vous rendre à Photoshop ou à Fireworks..
Cela peut être fait dans Fireworks ou Photoshop. La clé consiste à dupliquer l'image et à masquer ou à éliminer l'eau du calque de masquage. Enregistrez le fichier en tant qu’image .png ou .psd et quittez. Comme vous l'avez peut-être deviné, la couche non masquée est essentielle au succès de ce projet.
Créez un nouveau document Flash ActionScript 3. Ajoutez deux nouvelles couches nommées "Masque" et "actions". Renommez le calque 1 en "Image" et verrouillez le calque "actions". À ce stade, je vais faire un brin de branche car importer des images Photoshop et Fireworks dans Flash est deux techniques distinctes..
Lorsque la boîte de dialogue Importer s'ouvre, sélectionnez le calque Fontaine et sélectionnez Créer un clip pour ce calque. Ne vous embêtez pas avec le nom de l'instance que nous ferons une fois que les couches seront entrées en scène. Lorsque le fichier est importé, vous voyez que la couche de masque est une image bitmap et la couche de fontaine est désormais un MovieClip..
Lorsque la boîte de dialogue Importer s'ouvre, assurez-vous que l'option Importer en tant que bitmap aplati n'est pas sélectionnée..
Fireworks importe un fichier .png qui n'est rien d'autre qu'un espace réservé. Si vous ouvrez le dossier Objets de feu d'artifice, vous verrez que le document se trouve dans son propre dossier - généralement "Page un" - car Fireworks vous permet de créer plusieurs pages dans un même document. Si vous ouvrez ce dossier, vous verrez les deux bitmaps et un MovieClip. Ouvrez le MovieClip et configurez les calques en suivant les instructions de l'étape 3. Convertissez le calque Fountain en un MovieClip..
Sélectionnez le clip de la fontaine sur la timeline et donnez-lui le nom d'occurrence "photo". Verrouillez les trois couches et enregistrez le fichier.
Le code que vous allez écrire est assez simple. Comme je l'ai dit plus tôt, vous ne pouvez pas dire à Flash de faire une sélection et de la faire trembler. Dans le cas de ce code, nous allons bouger les pixels de la fontaine. Cela vous oblige à:
Si vous êtes subtil, le remue-ménage ressemble à de l'eau courante plutôt qu'à un tsunami ou à une fosse de goudron…
Commençons:
Entrez le code suivant:
var bmd: BitmapData = new BitmapData (800 535); var dmf: DisplacementMapFilter = new DisplacementMapFilter (bmd, new Point (0,0), 0,2,10,60);
Nous commençons par créer un objet BitmapData qui correspond à la taille de l'image à manipuler. Rappelez-vous que Flash n’est pas exactement la bougie la plus brillante de l’arbre. Il faut savoir quoi faire. Dans ce cas, vous lui demandez de créer une collection de pixels correspondant aux dimensions de l’image et de les coller dans un objet nommé "bmd"..
Maintenant qu’il a cette "chose bmd", il faut lui dire quoi faire avec les pixels de l’objet. La ligne suivante fait exactement cela.
DisplacementMapFilter utilise les valeurs d'échelle de gris d'un canal RGB, y compris alpha, et les utilise pour déformer une image (dans ce cas, un groupe de pixels Bitmapdata) en fonction des valeurs extraites des paramètres du filtre. Les paramètres sont les suivants:
Il y a trois autres paramètres que vous pouvez ajouter mais ne sont pas nécessaires ici. Elles sont:
Créez les variables à utiliser lors de la création de l'effet d'entraînement:
var pt1: Point = nouveau Point (0,0); var pt2: Point = nouveau Point (0,0); var perlinOffset: Tableau = [pt1, pt2];
addEventListener (Event.ENTER_FRAME, loopIt);
Nous avons besoin de cela pour faire trembler l'eau. Cela se produit grâce au filtre Displacment qui modifie les valeurs de son paramètre Point () au même rythme que votre film. Dans mon cas, la cadence est fixée à 30 images par seconde, ce qui signifie que les valeurs changeront 30 fois par seconde..
Ecrivez la fonction loopIt:
fonction loopIt (evt: Event): void perlinOffset [0] .x + = 0,5; perlinOffset [1] .y + = 0,1; bmd.perlinNoise (400,5,3,2, false, false, 2, true, perlinOffset); photo.filters = [dmf]; ;
Les deux premières lignes définissent les valeurs utilisées par Point() paramètre dans DisplacementMapFilter, lorsque la tête de lecture boucle l’incrément de valeurs x et y. Les valeurs que j'ai choisies sont le résultat de nombreux tests jusqu'à l'obtention de l'effet souhaité.
La troisième ligne applique la méthode perlinNoise à l'objet bitmap créé à la ligne 1 du code. Passons en revue les paramètres:
Les deux premiers chiffres sont les baseX et base les valeurs - 400, 5 - qui déterminent la fréquence du bruit sur les axes x et y. Plus le nombre est bas, plus le bruit sera détaillé. En règle générale, le nombre baseX peut être défini pour correspondre à la largeur de l'image. J'ai trouvé 800 un peu trop, je l'ai donc réduit à 400. La différence de détail était négligeable..
Le troisième nombre, 3, est le numOctave paramètre. Plus le nombre est élevé, plus le bruit aléatoire sera détaillé. L'inconvénient est un coup sur la puissance de traitement et une diminution potentielle de la vitesse de l'effet. Ce n’était pas destiné au Web, donc 3 semble fonctionner parfaitement. Utiliser une valeur de 1 ne déplaçait vraiment pas beaucoup les pixels. Le nombre suivant, 2, est le randomSeed paramètre.
Les deux valeurs booléennes sont les suivantes: point et bruit fractal paramètres. Une valeur vraie pour point adoucit les bords de tout carrelage qui pourrait se produire - inutile ici. La valeur fractalNoise détermine si le bruit sera un bruit fractal (vrai) ou une turbulence (faux). La fausse valeur - turbulence - convient aux effets de l’eau tels que les ondulations ou le feu.
La valeur suivante, 2, est le channelOptions paramètre. Cette valeur détermine dans lequel des quatre canaux de couleur le bruit sera appliqué.
La valeur booléenne, false, est la échelle de gris paramètre. Si j'avais utilisé false, le canal de couleur spécifié dans le paramètre channelOptions serait utilisé pour générer le bruit. L'utilisation de true indique à Flash que je souhaite utiliser l'échelle de gris .
Le paramètre final,perlinOffset, est le tableau de points à utiliser pour compenser le bruit dans chaque octave de l'effet.
La ligne finale - photo.filters = [dmf]; - applique le filtre de déplacement, avec le bruit de Perlin, à l'image dans l'instance de photo.
Enregistrez le film et testez-le.
Dans ce tutoriel de niveau débutant, je vous ai expliqué comment utiliser ActionScript pour créer des ondulations d’eau dans une fontaine de Paris. Comme vous pouvez le constater, il n'y avait pas beaucoup de code en cause et une grande partie était assez simple..
Lorsque vous commencez à explorer ActionScript et Flash, vous devez vraiment comprendre que la plupart des valeurs de code sont des nombres ou des valeurs booléennes. Ce que vous devez faire, c'est ne pas avoir peur de jouer à des jeux "Et si ...". Ce sont les jeux où vous vous demandez, "Et si je changeais ce nombre, que se passerait-il?" En fait, sentez-vous libre de jouer avec tous les nombres dans le DisplacemantmapFilter et le perlinNoise (). Vous pouvez avoir des effets assez fascinants, allant de l’oooze d’une fosse de goudron à l’eau qui ressemble à un tremblement de terre en cours.
S'amuser un peu!
Accentsconagua