Share
Bienvenue dans cette introduction au travail au niveau des pixels avec l’objet BitmapData d’ActionScript 3. Nous allons prendre des images 2D, les décomposer en leurs pixels composants, puis les ré-assembler en tant qu'images 3D que nous pouvons déplacer et faire pivoter..
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Juste avant de vous lancer, prenons un instant pour regarder comment le projet-type est présenté. En ouvrant le zip source pour ce tutoriel, vous aurez des sources pour chaque étape importante, vous pouvez aller de l'avant et faire une copie du commencer dossier car cela servira de point de départ.
Dans ce dossier, vous trouverez deux autres dossiers. src et poubelle. le src dossier est où nous allons enregistrer tous nos fichiers de code et FLA et la poubelle Le dossier est l'endroit où le Flash enregistrera les fichiers SWF. À l'intérieur de src dossier il y a le Main.FLA et le Main.AS classe de document.
Si, pour une raison quelconque, vous trouvez une erreur dans votre code, essayez de la réparer (il est toujours bon d'apprendre des erreurs), mais si vous ne le pouvez pas, ne vous inquiétez pas! Vous pouvez revenir directement et utiliser l’un des dossiers d’étapes du fichier zip source le plus proche de l’étape sur laquelle vous vous trouviez..
Si vous avez déjà eu un aperçu de la Main.as Dans ce fichier, vous remarquerez déjà quelques références à Away3D, un framework 3D pour Flash. Nous allons avoir besoin de télécharger ceci et de l'ajouter à notre projet pour continuer.
Vous pouvez récupérer leur dernière version sur le site Away3D.
Une fois ce téléchargement terminé, ouvrez le fichier zip et à l'intérieur du répertoire. loin3d_3_6_0 \ src dossier, vous trouverez trois dossiers, loin3d, nochump et wumedia. Copiez-les, comme indiqué ci-dessous, dans votre src dossier.
Si vous ne l'avez pas déjà fait, ouvrez Main.fla et Main.as. En regardant dans la bibliothèque Flash, vous pouvez voir une image appelée 1.png et un MovieClip avec un nom d'instance de img1, qui servira de conteneur de base pour le png.
Nous allons effectuer une compilation rapide juste pour nous assurer que nous avons correctement ajouté Away3D. Si tout se passe bien, nous devrions voir une animation Flash vierge avec un fond gris foncé et aucun message d'erreur de la part de Flash..
Examiner le Main.as fichier nous pouvons voir quelques variables qui sont utilisées dans Away3D, il existe déjà une foule de tutoriels sur Away3D mais nous allons rapidement les récapituler:
// propriétés Away3D de base protected var scene: Scene3D; caméra var protégée: TargetCamera3D; vue var protégée: View3D;
Accentsconagua
Scene3D est un espace que nous pouvons utiliser pour ajouter des objets 3D tels que des cubes et des sphères.TargetCamera3D est l’un des nombreux types de caméras disponibles dans Away3D, c’est ce que nous utilisons pour regarder le Scene3D.View3D est une fenêtre, souvent décrite comme la "fenêtre" dans laquelle nous voyons notre scène.Sans entrer dans les détails, vous pouvez également voir une scène de base est configurée prête à être utilisée avec le initAway3d () méthode. Notez qu'il ajoute un ENTER_FRAME EventListener, cela dit simplement à Away3D de rendre() (ou dessinez) tout objet ajouté à la Scene3D chaque image.
/ ** * Configuration de scène de base Away3D * / fonction privée initAway3d (): void scene = new Scene3D (); camera = new TargetCamera3D (z: -200); view = new View3D (scene: scene, camera: camera); addChild (voir); addEventListener (Event.ENTER_FRAME, renderLoop); / ** * la boucle de rendu * / fonction privée renderLoop (event: Event): void view.render ();
C’est à peu près tout pour l’introduction à la Main.as classe, nous allons construire tout le reste que nous allons.
Nous allons passer directement à ces deux classes et les présenter tout au long du didacticiel. Si vous êtes nouveau à Bitmap et BitmapData vous pouvez les considérer comme une toile de peintre et une collection de taches de peinture. Ce sont des objets totalement différents mais connectés, le BitmapData contient toutes les informations de pixels ou de coups de pinceau et ne serait rien sans être peint sur une toile ou dans ce cas, le Bitmap!
Testons cela en ajoutant une instance de la img1 MovieClip au étape et en faire une copie en utilisant Bitmap / BitmapData.
Modifier le paragraphe principal comme suit:
/ ** * constructeur * / fonction publique Main () initAway3d (); drawExample (); / ** * exemple rapide d'utilisation de BitmapData et Bitmap * / fonction privée drawExample (): void // crée une instance de l'objet img1 sur la scène pour copier var img: MovieClip = new img1 (); addChild (img); // crée un objet BitmapData avec les paramètres suivants: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // dessine une copie du MovieClip img dans BitmapData bmpData.draw (img); // ajoute un bitmap à la scène avec les informations BitmapData (copie de img1) pour afficher var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp);
En regardant le drawExample () code, les deux premières lignes ajoutent simplement le img1 objecter à la étape, c'est l'image que nous allons faire de la copie de.
Ensuite, nous créons un BitmapData objet avec les paramètres suivants:
largeur, la largeur pour faire la BitmapData la taille, la hauteur pour faire la BitmapData transparent, si le BitmapData doit contenir des pixels transparentsCouleur, la couleur de fondComme nous connaissons la largeur et la hauteur de img1 nous les avons définies directement, car nous aurons besoin de transparence, nous définissons le paramètre suivant sur true et, enfin, nous spécifions 0x000000 ou noir comme couleur de fond car ça va paraître transparent jusqu'à ce que nous le remplissions.
En continuant, nous avons maintenant le BitmapData Pour configurer un objet, nous avons plusieurs options à notre disposition, nous pouvons par exemple parcourir en boucle pixel par pixel et copier l’image (nous utiliserons quelque chose comme cela plus tard dans le tutoriel), ou nous pourrions utiliser le dessiner() méthode.
le dessiner() méthode prend un MovieClip ou Lutin en tant que paramètre et copiera toutes les informations de pixel de l'objet vers le BitmapData.
/ ** * exemple rapide d'utilisation de BitmapData et Bitmap * / fonction privée drawExample (): void // crée une instance de l'objet img1 sur la scène pour copier var img: MovieClip = new img1 (); addChild (img); // crée un objet BitmapData avec les paramètres suivants: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // dessine une copie du MovieClip img dans BitmapData bmpData.draw (img); // ajoute un bitmap à la scène avec les informations BitmapData (copie de img1) pour afficher var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp);
Suite à cela, les lignes suivantes créent un Bitmap objet avec le BitmapData informations de pixel en tant que paramètre, qui est ensuite déplacé en dessous de l'original img MovieClip et ajouté à la étape.
/ ** * exemple rapide d'utilisation de BitmapData et Bitmap * / fonction privée drawExample (): void // crée une instance de l'objet img1 sur la scène pour copier var img: MovieClip = new img1 (); addChild (img); // crée un objet BitmapData avec les paramètres suivants: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // dessine une copie du MovieClip img dans BitmapData bmpData.draw (img); // ajoute un bitmap à la scène avec les informations BitmapData (copie de img1) pour afficher var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp);
Il n'y a pas beaucoup de configuration impliquée dans la configuration de la Bitmap aspect, il affiche simplement un BitmapData, toute la magie est avec le BitmapData. Maintenant, lors des tests, nous devrions obtenir les éléments suivants:
Maintenant, nous avons du contenu à l'intérieur du BitmapData les choses d'objet commencent à devenir intéressant que nous pouvons commencer à manipuler des images en utilisant getPixel32 () et setPixel32 ().
Commençant par getPixel32 () modifier le drawExample () code ci-dessus à ce qui suit:
/ ** * exemple rapide d'utilisation de BitmapData et Bitmap * / fonction privée drawExample (): void // crée une instance de l'objet img1 sur la scène pour copier var img: MovieClip = new img1 (); addChild (img); // crée un objet BitmapData avec les paramètres suivants: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // dessine une copie du MovieClip img dans BitmapData bmpData.draw (img); // ajoute un bitmap à la scène avec les informations BitmapData (copie de img1) pour afficher var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp); // lit les informations de pixel à partir de BitmapData var pixelInformation: uint = bmpData.getPixel32 (5, 0); trace (pixelInformation, pixelInformation.toString (16));
En examinant le code, nous avons créé une variable uint régulière et l'avons affectée à la valeur du pixel dans le bmpData à 5 pixels horizontalement et à 0 pixel verticalement. Rappelez-vous que les valeurs commencent à 0 comme suit:
Sachant que nous avons choisi d'obtenir les informations sur les pixels pour 5,0, cela ferait en sorte que les pixels noirs apparaissent sur la rangée supérieure et que suffisamment de sorties Flash soient disponibles: 4278190080 ff000000
Cela peut ne pas sembler juste au début, mais setPixel32 lit la valeur alpha du pixel (où, comme setPixel lit juste la couleur). Nous sommes généralement habitués à travailler avec des valeurs hexadécimales pour des couleurs telles que FFFFFF ou 000000 afin que nous puissions dire à Flash toString (16) pour obtenir la valeur hexadécimale:
Nous savons maintenant comment lire les informations sur les pixels, en dessinant les pixels vers le BitmapData est très similaire, seulement cette fois nous utilisons setPixel32 () dessiner des pixels à BitmapData, et nous allons aussi jeter un pour boucle pour dessiner des pixels.
Commencez par modifier le code comme suit:
/ ** * exemple rapide d'utilisation de BitmapData et Bitmap * / fonction privée drawExample (): void // crée une instance de l'objet img1 sur la scène pour copier var img: MovieClip = new img1 (); addChild (img); // crée un objet BitmapData avec les paramètres suivants: width, height, transparent, color var bmpData: BitmapData = new BitmapData (img.width, img.height, true, 0x000000); // dessine une copie du MovieClip img dans BitmapData bmpData.draw (img); // ajoute un bitmap à la scène avec les informations BitmapData (copie de img1) pour afficher var bmp: Bitmap = new Bitmap (bmpData); bmp.y = img.height; addChild (bmp); // lit les informations de pixel à partir de BitmapData var pixelInformation: uint = bmpData.getPixel32 (5, 0); trace (pixelInformation, pixelInformation.toString (16)); // écrit les informations de pixel dans BitmapData var color: uint = 0xffff0000; // ff0000 - rangée de var rouge: uint = 0; var colonne: uint = 0; pour (rangée; rangée < bmpData.height; row++) bmpData.setPixel32(column, row, color); column++; if(column > bmpData.width) column = 0;
Le nouveau code commence par créer un journal uint variable nommée Couleur que nous stockons 0xffff0000 qui est: ff entièrement transparent, ff entièrement rouge, 00 pas de vert, 00 pas de bleu.
Ensuite, deux compteurs sont créés pour les lignes et les colonnes (les lignes sont une ligne de pixels horizontaux, les colonnes sont une ligne de pixels verticaux). Ces compteurs sont ensuite placés dans un pour boucle qui augmente la valeur de la ligne et du compteur à chaque fois, donc mélangé avec le setPixel32 () méthode, il va tracer une ligne diagonale:
Dans cette étape, nous allons présenter le PixelObject3D.as classe. Pour gagner un peu de temps, prenez une copie de la classe à partir du Étape 8 dossier dans le zip source et déposez-le dans votre src dossier à côté du Main.fla et Main.as.
Une fois que cela est fait, examinons-le rapidement avant de commencer à ajouter le code permettant de créer des objets 3D à partir de pixels..
// propriétés protégées var _bitmapData: BitmapData = null; public var _scaleFactor: Number = 1; var_width protégé: Number = 0; protected var _height: Number = 0;
Nous avons quelques variables protégées en haut de la classe, une pour un BitmapData et trois Nombres pour la largeur, la hauteur et une échelle de l'objet.
/ ** * constructeur * / fonction publique PixelObject3D () / ** * lance le processus de création * / fonction publique createFromMovieClip (mc: MovieClip): void
Les suivant est un constructeur de classe vide et la méthode avec laquelle nous allons travailler, createFromMovieClip (). Vous remarquerez que cette méthode prend un paramètre de MovieClip comme vous le savez déjà, nous passons un MovieClip et cela nous en redonnera une représentation en 3D. Quand c'est fini c'est!
Tandis que le PixelObject3D.as la classe ne fait rien encore mais ajoutons une instance de celle-ci à la Main.as classe afin que nous puissions réellement voir les changements à l'écran alors que nous allons.
Commençant par ajouter une variable privée:
// propriétés Away3D de base protected var scene: Scene3D; caméra var protégée: TargetCamera3D; vue var protégée: View3D; // le var protégé Pixel3DObject po3d: PixelObject3D;
Après cela, ajoutez au constructeur un appel à createPixelObect3D ().
/ ** * constructeur * / fonction publique Main () initAway3d (); drawExample (); createPixelObect3D ();
Enfin, ajoutez la fonction suivante au Main.as fichier. Cela va créer une instance du PixelObject3D classe, invoque le createFromMovieClip () méthode et passer une nouvelle MovieClip, la img1 nous avons utilisé précédemment.
Une dernière ligne à souligner est que nous ajoutons le PixelObject3D classe en tant qu'enfant de la scène car c'est un objet 3D, pas le Étape.
/ ** * crée une fonction PixelObject3D * / private createPixelObect3D (): void po3d = new PixelObject3D (); po3d.createFromMovieClip (new img1 ()); scene.addChild (po3d);
Sachant que nous sommes passés le MovieClip nous voulons recréer à partir de cette méthode, la première chose à faire à notre ordre du jour est d’en faire une copie en utilisant BitmapData exactement comme nous le faisions auparavant. Nous pouvons ensuite utiliser les données de pixels pour commencer à créer des objets 3D.
Comme avant, nous allons créer un BitmapData objet et dessiner le mc MovieClip objet:
/ ** * commence le processus de création * / fonction publique createFromMovieClip (mc: MovieClip): void // enregistre les références et crée le bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // set width / height _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor);
Nous avons également mis le _largeur et _la taille variables en fonction de la mc largeur et hauteur et multipliez cela par le _facteur d'échelle variable, cela nous permet d’augmenter ou de réduire la taille des pixels 3D si nous le souhaitons. Plus sur cela plus tard.
N'oubliez pas que BitmapData ne contient que des informations sur les pixels. Sans l'ajout de BitmapData à un bitmap, nous ne pourrons le voir, mais nous pourrons toujours le lire et l'écrire. C’est parfait pour nous car nous allons utiliser cette étape pour commencer à parcourir en boucle les pixels de BitmapData et à séparer les valeurs rouge, verte, bleue et alpha..
Modifier votre createFromMovieClip () méthode pour correspondre à ceci:
/ ** * commence le processus de création * / fonction publique createFromMovieClip (mc: MovieClip): void // enregistre les références et crée le bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // set width / height _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // information de pixel var pixelValue: uint = 0; var rouge: uint = 0; var green: uint = 0; var bleu: uint = 0; var alpha: uint = 0; // boucle chaque pixel horizontalement pour (var i: int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, 0); alpha = pixelValue >> 24 & 0xFF; red = pixelValue >> 16 & 0xFF; green = pixelValue >> 8 & 0xFF; blue = pixelValue & 0xFF; trace ("alpha:" + alpha + "rouge:" + rouge + "vert:" + vert + "bleu:" + bleu); Ici, nous avons défini quelques variables pour les valeurs de couleur et alpha, puis avons démarré une pour boucle basée sur le mc's largeur.
Ce pour boucle définit le pixelValue variable à la valeur du pixel actuel en utilisant le getPixel32 () méthode que nous avons utilisée plus tôt, mais cette note de temps, nous avons utilisé 0 pour le second paramètre qui est y, donc nous allons seulement traiter la première ligne horizontale de pixels.
Suite à cela, il y a quelques mathématiques assez complexes appelées masquage et décalage de bits. Pour gagner un peu de temps, vous pouvez supposer que chacune des couleurs est extraite du pixelValue variable et ensuite sortie pour nous de voir en utilisant trace(). Si vous souhaitez en savoir plus sur les opérateurs au niveau des bits, le décalage et le masquage de bits, vous pouvez trouver un excellent poste sur le site Web de Polygonal Labs..
Ce que vous devriez voir est la sortie de tout un tas de 0 valeurs, mais faites attention aux deux alpha: 255 lignes, ce sont les deux pixels noirs en haut de la main.
Ouf, il y avait beaucoup de logique dans ces dernières étapes! Maintenant que nous connaissons les bases, commençons à utiliser les informations sur les pixels obtenues précédemment pour créer un chef-d’œuvre 3D. presque.
Si vous avez déjà utilisé Away3D ou Papervision 3D, vous allez commencer à créer des cubes 3D et à leur appliquer des matériaux. Pour chaque pixel dont l'alpha est égal à 255 (opaque), nous prenons sa couleur et créons un matériau basé sur la couleur à appliquer à un cube 3D. Voici le code pour lancer ceci:
/ ** * commence le processus de création * / fonction publique createFromMovieClip (mc: MovieClip): void // enregistre les références et crée le bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // set width / height _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // information de pixel var pixelValue: uint = 0; var rouge: uint = 0; var green: uint = 0; var bleu: uint = 0; var alpha: uint = 0; // boucle chaque pixel horizontalement pour (var i: int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, 0); alpha = pixelValue >> 24 & 0xFF; red = pixelValue >> 16 & 0xFF; green = pixelValue >> 8 & 0xFF; blue = pixelValue & 0xFF; // si le pixel est opaque si (alpha == 255) // crée une chaîne de couleur hexadécimale normale, par exemple FFFFFF ou 000000 couleur var: String = red.toString (16) + green.toString (16) + blue.toString (16 ) if (color == "000") color = "000000"; trace ("#" + couleur); // crée un matériau à partir de la couleur et l'applique à un matériau de cube 3D var: Material = new ColorMaterial (color); var cube: Cube = nouveau Cube (matériau: matériau, largeur: 2 * _scaleFactor, hauteur: 2 * _scaleFactor, profondeur: 2 * _scaleFactor); // positionne le cube à partir d'une - valeur afin que le point d'enregistrement / de transformation soit toujours au centre de cube.x = 0 - (_width / 2) + cube.width * i; this.addChild (cube); Dans le code ci-dessus, nous avons utilisé le rouge, vert et bleu variables et créé une couleur hexadécimale régulière, que vous pouvez voir la sortie du trace().
Puis la couleur de l'hex Couleur variable est utilisée pour créer un ColorMaterial avec Away3D, qui est juste un matériau régulier basé sur une couleur qui peut être appliquée à des objets 3D.
Ensuite, nous créons un cube objet et spécifiez le Matériel être le Matériel objet nous avons créé la ligne avant. À noter également que nous avons défini le largeur, la taille et profondeur (souvenez-vous que nous travaillons maintenant en trois dimensions!) à une valeur égale à deux fois la valeur du _scaleValue variable, cela nous permet d’agrandir ou de réduire les cubes en changeant _scaleValue.
Enfin, nous positionnons le cube à zéro moins la moitié de la largeur du mc multiplié par le pour compteur de boucles je, cela fait le point d’enregistrement ou de transformation de l’objet 3D fini au centre. Il est ensuite ajouté comme un enfant et lorsque vous testez, vous verrez deux petites images 3D noires. cube objets.
Maintenant, deux cubes 3D, c’est génial et nous souhaitons tous obtenir la forme complète de la main pour obtenir des cubes 3D. Nous utilisons déjà un pour boucle pour parcourir tous les pixels de la première ligne, mais comment l'obtenir pour parcourir les lignes restantes de pixels?
Vous l'avez deviné, un autre pour boucle!
/ ** * commence le processus de création * / fonction publique createFromMovieClip (mc: MovieClip): void // enregistre les références et crée le bitmapdata _bitmapData = new BitmapData (mc.width, mc.height, true, 0x000000); _bitmapData.draw (mc); // set width / height _width = mc.width * (2 * _scaleFactor); _height = mc.height * (2 * _scaleFactor); // information de pixel var pixelValue: uint = 0; var rouge: uint = 0; var green: uint = 0; var bleu: uint = 0; var alpha: uint = 0; // boucle chaque ligne de pixels pour (var j: int = 0; j < mc.height; j++) // loop through each pixel horizontally for (var i:int = 0; i < mc.width; i++) pixelValue = _bitmapData.getPixel32(i, j); alpha = pixelValue >> 24 & 0xFF; red = pixelValue >> 16 & 0xFF; green = pixelValue >> 8 & 0xFF; blue = pixelValue & 0xFF; // si le pixel est opaque si (alpha == 255) // crée une chaîne de couleur hexadécimale normale, par exemple FFFFFF ou 000000 couleur var: String = red.toString (16) + green.toString (16) + blue.toString (16 ) if (color == "000") color = "000000"; trace ("#" + couleur); // crée un matériau à partir de la couleur et l'applique à un matériau de cube 3D var: Material = new ColorMaterial (color); var cube: Cube = nouveau Cube (matériau: matériau, largeur: 2 * _scaleFactor, hauteur: 2 * _scaleFactor, profondeur: 2 * _scaleFactor); // positionne le cube à partir d'une - valeur afin que le point d'enregistrement / de transformation soit toujours au centre de cube.x = 0 - (_width / 2) + cube.width * i; cube.y = (_height / 2) + -cube.height * j; this.addChild (cube); Cette fois, nous n’avons vraiment changé que trois choses, une nouvelle pour boucle que cette fois a j pour son comptoir. le getPixel32 () a maintenant le j variable ajoutée en tant que y paramètre et enfin le cube est positionné verticalement à l'aide du j compteur.
Ceci complète à peu près la logique principale, maintenant il va faire une boucle horizontale, lire les valeurs de pixel, créer un ColorMaterial et un cube et les positionner en conséquence. Une fois qu’elle atteint la fin de la ligne horizontale, à cause du nouveau pour En boucle, il passe au pixel suivant et en boucle horizontalement jusqu'à la fin de l'image. Regardez par vous-même en testant le film:
Nous avons maintenant tous ces objets 3D, mais ils ont une apparence très 2D. Nous allons donc ajouter un peu de mouvement et faire tourner tout l'objet.
Pour ce faire, nous devrons revenir en arrière à la Main.as déposer et localiser le renderLoop () méthode. N'oubliez pas qu'Away3D devra restituer (ou peindre) l'image 3D chaque image afin que nous puissions ajouter quelques rotations simples à nos images. PixelObject3D voir tout l'enfant Cubes tourner:
/ ** * la boucle de rendu * / fonction privée renderLoop (event: Event): void pObject3D.rotationZ ++; view.render ();
N'hésitez pas à expérimenter avec rotationX, rotationY et rotationZ rappelez-vous ici de réinitialiser le code ci-dessus avant de continuer. Vous pouvez également ajouter à la create3DObject () pour mieux centrer et aligner le Cubes à la caméra.
/ ** * crée un objet pixel 3D à partir d'une fonction MovieClip * / public create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (new img1 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);
Maintenant, c'est plus comme ça, on peut enfin voir l'objet pixel 3D en rotation. Nous pouvons commencer à peaufiner cela et ajouter une vue éclatée en éditant simplement le z valeur de la Cubes quand on les crée.
Sautez dans le PixelObject3d.as classe et trouver les lignes où nous positionnons la cubede X et y et ajoutez ce qui suit:
// si le pixel est opaque si (alpha == 255) // crée une chaîne de couleur hexadécimale normale, par exemple FFFFFF ou 000000 couleur var: String = red.toString (16) + green.toString (16) + blue.toString (16 ) if (color == "000") color = "000000"; trace ("#" + couleur); // crée un matériau à partir de la couleur et l'applique à un matériau de cube 3D var: Material = new ColorMaterial (color); var cube: Cube = nouveau Cube (matériau: matériau, largeur: 2 * _scaleFactor, hauteur: 2 * _scaleFactor, profondeur: 2 * _scaleFactor); // positionne le cube à partir d'une - valeur afin que le point d'enregistrement / de transformation soit toujours au centre de cube.x = 0 - (_width / 2) + cube.width * i; cube.y = (_height / 2) + -cube.height * j; cube.z = -25 + (Math.random () * 50); this.addChild (cube); Cela va déplacer chaque cube à une profondeur aléatoire de -25 à 25 positives et créer un bel effet éclaté:
Comme le PixelObject3D est un peu petit sur l’écran, nous allons ajuster légèrement l’échelle. Nous pouvons le faire rapidement en ajustant la _scaleValue variable dans le PixelObject3D.as classe et l'augmentation à 1,5.
/ ** * crée un objet 3D à partir d'un MovieClip * * @author Anton Mills * / classe publique PixelObject3D étend ObjectContainer3D // propriétés protégées var _bitmapData: BitmapData = null; public var _scaleFactor: Number = 1.5; var_width protégé: Number = 0; protected var _height: Number = 0;
En utilisant le PixelObject3D Il est facile de créer une classe pour créer d’autres images. Il vous suffit d’importer dans Flash l’image que vous souhaitez traiter. Puis convertissez-le en MovieClip comme d'habitude, cette fois, donnez-lui une Nom du cours de img2 comme ça:
Maintenant, vous pouvez modifier Main.as utiliser le nouveau img2 objet avec une petite modification:
/ ** * crée un objet pixel 3D à partir d'une fonction MovieClip * / public create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (new img2 ()); pObject3D.x = 80; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D);
Vous pouvez en utiliser autant que vous le souhaitez. Assurez-vous simplement de les ajouter à la scène Away3D et vous pourrez en avoir plusieurs. Dans cet exemple, j'ai supprimé le z propriété que nous avons utilisée à l'étape 16 pour l'effet d'explosion.
Main.as avec un autre PixelObject3D ajoutée:
/ ** * Didacticiel visant à présenter BitmapData * d'ActionScript 3 et à utiliser les informations BitmapData pour créer une forme de pixel 3D * à l'aide d'Away3D. * * @author Anton Mills * / classe publique Main étend MovieClip // propriétés de base Away3D protégées var scene: Scene3D; caméra var protégée: TargetCamera3D; vue var protégée: View3D; var protégé pObject3D: PixelObject3D; var protégée pObject3D2: PixelObject3D;
Puis créez une autre instance:
/ ** * crée un objet pixel 3D à partir d'une fonction MovieClip * / public create3DObject (): void pObject3D = new PixelObject3D (); pObject3D.createFromMovieClip (new img2 ()); pObject3D.x = 40; pObject3D.y = -55; pObject3D.rotationX = -5; scene.addChild (pObject3D); pObject3D2 = new PixelObject3D (); pObject3D2.createFromMovieClip (new img1 ()); pObject3D2.x = 115; pObject3D2.y = -55; pObject3D2.rotationX = -5; scene.addChild (pObject3D2);
Et enfin, faites-le p
