Share
Deux fois par mois, nous revoyons certains des articles préférés de nos lecteurs dans l’histoire d’Activetuts +. Ce tutoriel a été publié pour la première fois en septembre 2009..
Bonjour, encore une fois, je m'appelle Andr? Dans ce didacticiel, je vais vous montrer comment créer des filtres personnalisés avec Pixel Bender Toolkit, puis les utiliser avec Flash CS4 pour générer des fichiers .pbj..
* Cette fonctionnalité ne fonctionne que dans Flash Player 10..
Pixel Bender Toolkit est fourni avec le pack Adobe Master Collection CS4. Vous pouvez également le télécharger à l'adresse http://labs.adobe.com/downloads/pixelbender.html..
Avant de créer un filtre, nous devons comprendre les fonctions et les types de base du langage. C'est différent de Flash, et beaucoup plus simple.
Le mot clé d'entrée: C'est l'entrée image, l'image qui sera lue et travaillée. Nous pouvons avoir jusqu'à 2 images d'entrée dans le code. Travailler avec une image créera un filtre et travailler avec deux images créera un mode de fusion. L'entrée est toujours du type "image4", qui est une image en mode RGBA (Rouge, Vert, Bleu et Alpha).
Le mot clé de sortie: C'est la sortie pixel, par opposition à l'entrée. Cela ne produira pas l'image, cela produira simplement le pixel lu dans RGBA. C'est le type "pixel4" (et pas image4 comme l'entrée).
Le paramètre mot clé: Le mot clé de paramètre fonctionnera comme une fonction de définition. Avec le paramètre, les valeurs du filtre peuvent être modifiées en cours d'utilisation. Le paramètre doit être suivi du type et du nom, et peut également avoir une valeur minimale, une valeur maximale et une valeur par défaut. Exemple: paramètre int dimension ou paramètre float myfloat . De plus, le paramètre peut être saisi float2, float3, float3, int1, int2? Exemple: paramètre float2 test
Nous avons aussi les types float, float2, float3, float4, int, int2, int3, int4 et bien d’autres que nous n’utiliserons pas ici. De plus, certains types ne fonctionnent pas avec Flash Player 10, je ne vais donc pas les aborder pour le moment. Je vais toutefois parler un peu des types que j'ai mentionnés ici et de leur fonctionnement..
Tapez float, float2, float3 et float4: Lorsque vous créez un type float4, par exemple, vous créez un tableau de 4 valeurs float. Dans Pixelbender, les valeurs float sont définies par un point, mais float () fonctionne également comme une fonction permettant de convertir d’autres valeurs numériques en float. Par exemple "test float4 = float4 (1,2,3,4);". Nous avons ici un objet avec 4 valeurs (type float) dans la variable "test". Vous pouvez également créer un objet float4 à partir d'une valeur, par exemple: "test float4 = float4 (3);". Nous avons ici un objet avec 4 valeurs (RGBA) et toutes les valeurs sont les mêmes (3.0 float). Lorsque vous créez une valeur flottante, vous pouvez également la créer en utilisant un point tel que "test de flottaison = 1.0;". Si vous essayez de le définir comme "test de flottaison = 1;" il y aura une erreur, parce que les nombres sans points dans pixelbender fonctionnent comme des valeurs int.
Donc, float sont toujours définis par un point. Même en utilisant "float ()" pour créer la valeur float, vous obtiendrez un nombre avec un point. Enfin, pour accéder aux valeurs flottantes avec plusieurs valeurs, vous pouvez utiliser une syntaxe comme celle d’un accès tableau. "variable [0] ou variable [1] ou variable [2]?".
Les types int, int2, int3 et in4 sont identiques aux types float, mais n'ont pas de points. Vous pouvez également convertir des valeurs numériques en utilisant des fonctions similaires à "int".
evaluPixel (): cette fonction parcourt toute l'image, pixel par pixel, puis renvoie le type de sortie pixel4. Dans les filtres personnalisés pour Flash, nous utilisons toujours cette fonction.
outCoord (): cette fonction retourne la coordonnée courante du pixel en cours de lecture par la fonction evaluPixel. Il retourne un type de valeur float2, x et y valeurs, et est accessible via [] comme tableau ou comme objet .x et .y. Par exemple: var out = outCoord (); //out.x est identique à out [0] et out.y est identique à out [1].
sampleNearest (source, pixelCoordinate): cette fonction renvoie la valeur float4 du pixel de l'image source (image4) aux coordonnées "pixelCoordinate". Normalement, nous utilisons la fonction "outCoord" ici.
Une observation doit être faite; lorsque vous utilisez des valeurs float et que vous souhaitez ajouter / soustraire / multiplier ou diviser les valeurs avec d'autres valeurs float de même longueur, vous pouvez les utiliser comme suit:
float4 test1 = float4 (3.0,2.0,2.0,3.0); float4 test2 = float4 (1.0,2.0,2.0,1.0); float4 result = test1-test2;
Le résultat sera une variable de type float4 avec les valeurs 2.0, 0.0, 0.0 et 2.0. En outre, vous pouvez utiliser:
float4 test1 = float4 (3.0,2.0,2.0,3.0); float4 test2 = float4 (1.0,2.0,2.0,1.0); float4 result = test1; résultat [0] = test1 [0] -test2 [0]; résultat [2] - = 0,5;
Je pense que cela suffit pour comprendre la structure du code Pixel Bender, passons à l'étape suivante, après avoir mentionné une dernière chose:
Avant de tester un filtre, il est important de charger au moins une image (fichier> charger l'image 1 "). Pour tester le filtre, vous pouvez aller à la construction> exécuter, si le filtre a des paramètres, sur le côté droit de l'application vous ' Voir les curseurs pour changer les valeurs. Ils changent au moment de l’exécution et ont un aperçu en direct, chaque fois que vous appuyez sur Exécuter à nouveau..
Ce filtre est fourni avec Pixel Bender Toolkit, mais c’est l’un des filtres les plus simples à expliquer. Pour en savoir plus sur la référence du langage Pixel Bender, il suffit d'appuyer sur le bouton F1 du programme et l'aide en .pdf s'ouvrira..
Une fois le programme ouvert, créez un nouveau filtre de noyau (fichier> nouveau filtre de noyau). Le programme créera une structure par défaut pour le filtre:
noyau NewFilter < namespace : "Your Namespace"; vendor : "Your Vendor"; version : 1; description : "your description"; > input image4 src; sortie pixel4 dst; void evaluPixel () dst = sampleNearest (src, outCoord ());
Dans le noyau NewFilter, vous modifiez le nom NewFilter pour le nom de votre filtre. Espace de noms, fournisseur, version et description que je n'ai pas besoin d'expliquer, juste vos chaînes comme auteur, version (int) et la description.
L'image d'entrée sera l'image chargée par le filtre et la sortie sera le pixel généré par la fonction evaluPixel. La sortie sera une valeur pixel4 générée par la fonction evaluPixel, qui exécute pixel par pixel de l'image d'entrée, comme je l'ai expliqué.
À la ligne "dst = sampleNearest (src, outCoord ());"nous obtenons la valeur du pixel actuel et la coordonnée outCoord () de l'image src (l'image d'entrée), afin de pouvoir modifier les valeurs de la valeur rgba du dst. Par exemple, si nous voulons inverser les couleurs de l'image d'entrée, nous pourrions faire ce qui suit:
dst = sampleNearest (src, outCoord ()); dst.rgb = float3 (1) -dst.rgb;
Que faisons-nous ici?
Nous affirmons que la valeur rgb de ce pixel est le tableau de la valeur float3 moins la valeur initiale de rgb, de sorte que la couleur sera inversée. Vous pouvez utiliser le fichier dst.rgb au lieu de dst [0], dst [1]? et l'ordre après le point peut être n'importe quel ordre, il lit chaque lettre comme valeur de la couleur. Par exemple, vous pouvez utiliser dst.gbr = float3 (1) -dst.gbr. Une autre chose que vous pouvez essayer est de changer les couleurs de l'image. Par exemple, en utilisant le code ci-dessous (dans la fonction assessPixel):
dst = sampleNearest (src, outCoord ()); dst.rgb = dst.brg;
Ce code produira une image étrangement colorée.
Testons un filtre d'Adobe. Le filtre pixelate est idéal pour les tests, allez dans Fichier> Ouvrir; Dans le dossier où Pixel Bender est installé, il y a des filtres. Choisissons le filtre pixelate. Une fois ouvert, vous pouvez cliquer sur le bouton "Exécuter" pour tester le filtre. Si vous souhaitez exporter, accédez à Fichier> Exporter le filtre de noyau pour Flash Player. Cela exportera le filtre à utiliser avec Flash. Vous pouvez le charger avec URLLoader ou l'intégrer avec la balise incorporée à partir du Flex SDK. Dans ce tutoriel, je montrerai comment utiliser le fichier incorporé, car le filtre ne pèse que 4 Ko à 15 Ko (il est très léger)..
L'extension de sortie est un fichier .pbj.
Si vous avez un chemin de classe pour Flash, utilisez votre chemin, si vous n'en avez pas et si vous voulez en créer un, ouvrez mon précédent tutoriel et suivez l'étape 1. Si vous ne voulez pas de chemin de classe, utilisez le même dossier que votre document .fla . Supposons le chemin de classe pour le tutoriel.
Dans votre chemin de classe, créez le dossier "pixelbender". Ensuite, dans le dossier "pixelbender", dans votre chemin de classe, créez le dossier "pbj". Copiez le fichier .pbj (exemple: pixelate.pbj) dans ce dossier pbj que vous avez créé..
Ouvrez Flash CS4 ou Flex avec le SDK mis à jour pour FP10. Si vous utilisez Flash, il est important de configurer le SDK Flex pour Flash. Si vous ne savez pas comment faire cela, appuyez sur "ctrl + u" pour ouvrir les préférences de Flash, puis sélectionnez "actionscripts" dans la catégorie, puis "Paramètres d'Actionctipt 3.0". Dans la fenêtre "Paramètres avancés d’Actionscript 3.0", cliquez sur le bouton "+" du chemin de la bibliothèque et ajoutez ce qui suit: $ (FlexSDK) /frameworks/libs/flex.swc. Cliquez sur le bouton OK.
Créez maintenant un nouveau fichier .as et commencez à coder ce qui suit:
Nous définissons d'abord le package et importons les classes nécessaires.
package pixelbender import flash.display.Shader; import flash.filters.ShaderFilter; import flash.utils.ByteArray;
Créez la classe publique PixelateFilter qui étend le ShaderFilter. ShaderFilter peut être appliqué en tant que filtre normal dans le tableau de filtres de tout objet DisplayObject..
classe publique PixelateFilter étend ShaderFilter
Intégrez le fichier pixelate.pbj dans le dossier pbj (nous supposons que nous enregistrerons le fichier .as dans le dossier pixelate de notre chemin de classe). La balise incorporée est une balise Flex qui incorpore des fichiers dans un swf au lieu de les charger. Il existe de nombreux types que vous pouvez intégrer, tels que .flv, .jpg et autres, et en tant qu'application / octet-stream mimeType, le fichier sera incorporé sous forme de ByteArray. La balise embed crée une classe pour le fichier incorporé, ici j'utilise une classe nommée "Filtre".
[Embed (source = "pbj / pixelate.pbj", mimeType = "application / octet-stream")] private var Filtre: Class;
Dans le constructeur, créons une instance de notre fichier incorporé sous le nom ByteArray. ByteArray est le paramètre du constructeur Shader. Nous allons donc créer l'instance du shader, en définissant le filtre sur "ByteArray" en tant que paramètre du constructeur. Étant donné que nous étendons ShaderFilter, nous n'avons pas besoin de créer une instance de ShaderFilter. Cette classe est déjà étendue à ShaderFilter. Il suffit donc de définir le paramètre shader de notre classe ShaderFilter comme instance de shader..
fonction publique PixelateFilter (): void var filter: ByteArray = new Filter () en tant que ByteArray; // Le fichier incorporé en tant que ByteArray var shader: Shader = new Shader (filter); // L'instance de Shader this.shader = shader; // réglage du paramètre shader de notre classe
Nous créons maintenant un nouveau paramètre pour notre classe, le paramètre "dimension". Ce paramètre affectera la "paramètre int dimension" créée dans le pixelbender. La fonction de définition modifiera la valeur et la fonction de lecture obtiendra simplement la valeur actuelle. Les valeurs des données du shader sont accessibles via "instance.data.value", les valeurs sont des tableaux. Si nous avions un paramètre "paramètre int2 position;" dans le filtre par exemple, nous y accéderions respectivement par "instance.data.position [0]" et "instance.data.position [1]".
dimension du jeu de fonctions public (valeur: Number): void shader.data.dimension.value [0] = valeur; fonction publique get dimension (): Number return shader.data.dimension.value [0];
Après tout cela, fermez juste le paquet et la classe.
Maintenant que la classe de ce filtre est créée, enregistrez le fichier .as sous le nom "PixelateFilter.as" (le même nom que la classe) dans le dossier pixelbender de votre chemin de classe (même nom que votre paquet, et où vous avez également créé le dossier pbj).
Première étape, créez un nouveau document .fla AS3, enregistrez-le où vous voulez, par exemple c: / mycustomfilter..
Définissez une classe pour ce document .fla. Ouvrez le panneau des propriétés du document .fla à partir de la fenêtre> propriétés, dans la zone "Classe", tapez "Main" et créez un nouveau fichier actionscript..
Copiez n’importe quelle image dans le même dossier du document .fla, par exemple, j’ai utilisé l’un des exemples d’images des exemples Pixel Bender; YellowFlowers.png, qui peut être trouvé avec les fichiers source.
Si vous n'avez pas encore la classe TweenLite, veuillez la télécharger à l'adresse http://blog.greensock.com/tweenliteas3/ et décompresser le contenu du dossier gs dans le dossier gs de votre chemin d'accès aux classes..
Créer un nouveau document .as.
Incluez les classes nécessaires à notre classpath:
package import flash.display.Sprite; import flash.display.Bitmap; importer pixelbender.PixelateFilter; // Notre filtre personnalisé importer gs.TweenLite; // la meilleure classe de Tweening
Créez la classe Main qui étend la classe Sprite:
public class Main étend Sprite
Incorporer l'image à des fins de test, le type mime est "image / png", nous intégrons donc en tant qu'image et non ByteArray. Nommez sa classe "Img". De plus, nous tapons une variable nommée "filter" de type PixelateFilter, afin que nous puissions l’utiliser ultérieurement dans n’importe quelle fonction..
[Incorporer (source = "YellowFlowers.png", mimeType = "image / png")] private var Img: Class; filtre var privé: PixelateFilter;
Dans le constructeur, nous commençons à créer notre image, qui sera affectée par le filtre, puis ajoutons l'image enfant à la scène. Créez ensuite une instance de PixelateFilter. Nous avons déjà créé la variable, nous n'avons donc pas besoin de taper à nouveau. Définissez la dimension du filtre sur 100 pour que nous puissions mieux voir l'effet, ajoutez également le filtre à la liste de filtres de notre classe Main..
Ensuite, en utilisant la classe TweenLite, nous animons le paramètre filter. Le paramètre de dimension sera animé de 100 à 1. Pendant la mise à jour de l'animation, la fonction "tweenLiteUpdate" est exécutée et, une fois l'animation terminée, la fonction "newTween" est exécutée..
fonction publique Main (): void image var: Bitmap = new Img () en tant que Bitmap; addChild (image); filter = new PixelateFilter (); filter.dimension = 100; this.filters = [filtre]; TweenLite.to (filtre, 3, dimension: 1, onUpdate: tweenLiteUpdate, onComplete: newTween);
Pendant la mise à jour de TweenLite, tweenLiteUpdate est exécuté et met à jour le filtre de notre classe Main. Sans cette méthode, TweenLite ne mettrait pas à jour le filtre..
fonction privée tweenLiteUpdate (): void this.filters = [filtre];
Lorsque la première animation Tweening est terminée, la fonction newTween est exécutée. La première ligne de cette fonction vérifiera si la valeur de la dimension du filtre est 1. Si c'est le cas, la variable dim sera définie sur 100, sinon la variable sera définie sur 1. Ceci est identique à if et else ou switch. La deuxième ligne lancera à nouveau l'animation Tweening du filtre..
fonction privée newTween (): void var dim: Number = (filter.dimension == 1)? 100: 1; TweenLite.to (filtre, 3, dimension: dim, onUpdate: tweenLiteUpdate, onComplete: newTween);
Maintenant, fermez le paquet et la classe avec le double "".
Enregistrez votre fichier sous "Main.as" dans le même dossier que votre fichier .fla. Si tous les fichiers et tous les dossiers sont corrects, vous pouvez tester votre fichier. L’animation commencera à se pixelliser et à passer à l’image normale et se déroulera en boucle.
J'espère que cela vous a plu et j'espère que cela vous sera très utile. Dans Adobe Exchange, vous pouvez télécharger de nombreux autres filtres, dont certains sont gratuits ou à code source ouvert. J'ai également mis quelques autres .pbj et des cours avec la source pour étudier. Par exemple, SpherizeFilter.as: http://cavallari.freehostia.com/spherize/, s'anime en fonction de la position de la souris..
Accentsconagua